feat: Article settings sidebar in new article page (#5355)

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -225,7 +225,7 @@
       }
     },
     "CREATE_ARTICLE": {
-      "ERROR_MESSAGE": "Something went wrong. Please try again."
+      "ERROR_MESSAGE": "Please add the article heading and content then only you can update the settings"
     },
     "SIDEBAR": {
       "SEARCH": {

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -44,6 +44,7 @@
         variant="hollow"
         size="small"
         color-scheme="secondary"
+        :is-disabled="enableOpenSidebarButton"
         @click="openSidebar"
       />
       <woot-button
@@ -82,6 +83,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    enableOpenSidebarButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -154,7 +154,7 @@ export default {
     },
   },
   mounted() {
-    if (!isEmptyObject(this.article.meta)) {
+    if (!isEmptyObject(this.article.meta || {})) {
       const {
         meta: { title = '', description = '', tags = [] },
       } = this.article;

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue

@@ -119,12 +119,12 @@ export default {
   padding: var(--space-small) var(--space-normal);
   width: 100%;
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
 
   .edit-article--container {
     flex: 1;
     flex-shrink: 0;
-    overflow: scroll;
+    overflow: auto;
   }
 
   .is-sidebar-open {

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue

@@ -1,41 +1,60 @@
 <template>
   <div class="article-container">
+    <div
+      class="new-article--container"
+      :class="{ 'is-sidebar-open': showArticleSettings }"
+    >
       <edit-article-header
         :back-button-label="$t('HELP_CENTER.HEADER.TITLES.ALL_ARTICLES')"
         draft-state="saved"
         @back="onClickGoBack"
+        @open="openArticleSettings"
+        @close="closeArticleSettings"
         @save-article="createNewArticle"
       />
-    <article-editor :article="article" @save-article="createNewArticle" />
+      <article-editor :article="newArticle" @save-article="createNewArticle" />
+    </div>
+    <article-settings
+      v-if="showArticleSettings"
+      :article="article"
+      @save-article="saveArticle"
+    />
   </div>
 </template>
-
 <script>
 import { mapGetters } from 'vuex';
 import EditArticleHeader from 'dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader';
 import ArticleEditor from '../../components/ArticleEditor.vue';
 import portalMixin from '../../mixins/portalMixin';
 import alertMixin from 'shared/mixins/alertMixin.js';
+import ArticleSettings from './ArticleSettings.vue';
 export default {
   components: {
     EditArticleHeader,
     ArticleEditor,
+    ArticleSettings,
   },
   mixins: [portalMixin, alertMixin],
   data() {
     return {
       articleTitle: '',
       articleContent: '',
+      showOpenSidebarButton: false,
       showArticleSettings: false,
+      article: {},
     };
   },
   computed: {
     ...mapGetters({
       selectedPortal: 'portals/getSelectedPortal',
       currentUserID: 'getCurrentUserID',
+      articles: 'articles/articles',
       categories: 'categories/allCategories',
     }),
-    article() {
+    articleId() {
+      return this.$route.params.articleSlug;
+    },
+    newArticle() {
       return { title: this.articleTitle, content: this.articleContent };
     },
     selectedPortalSlug() {
@@ -79,25 +98,35 @@ export default {
         }
       }
     },
+    openArticleSettings() {
+      this.showArticleSettings = true;
+    },
+    closeArticleSettings() {
+      this.showArticleSettings = false;
+    },
+    saveArticle() {
+      this.alertMessage = this.$t('HELP_CENTER.CREATE_ARTICLE.ERROR_MESSAGE');
+      this.showAlert(this.alertMessage);
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .article-container {
+  display: flex;
   padding: var(--space-small) var(--space-normal);
   width: 100%;
   flex: 1;
-  overflow: scroll;
-
-  .edit-article--container {
+  overflow: auto;
+}
+.new-article--container {
   flex: 1;
   flex-shrink: 0;
   overflow: scroll;
-  }
-
-  .is-sidebar-open {
+  overflow: auto;
+}
+.is-sidebar-open {
   flex: 0.7;
-  }
 }
 </style>