chore: Final touches for portals (#5388)

* chore: Final touches for portals

* Review fixes

* Minor fixes

* Fixes styles for input and buttons

* Minor fixes

* Spacing fixes on header

* Minor fixes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -370,7 +370,7 @@ $input-font-weight: $global-weight-normal;
 $input-background: $white;
 $input-background-focus: $white;
 $input-background-disabled: $light-gray;
-$input-border: 1px solid $color-border;
+$input-border: 1px solid var(--s-200);
 $input-border-focus: 1px solid lighten($primary-color, 15%);
 $input-shadow: 0;
 $input-shadow-focus: 0;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -20,7 +20,7 @@
   }
 
   .multiselect--active {
-    > .multiselect__tags {
+    >.multiselect__tags {
       border-color: $color-woot;
     }
   }
@@ -96,8 +96,8 @@
   }
 
   .multiselect__tags {
-    border: 1px solid $color-border;
+    border: 1px solid var(--s-200);
-    border-color: $color-border;
+    border-color: var(--s-200);
     margin: 0;
     min-height: 4.4rem;
     padding-top: $zero;
@@ -145,6 +145,7 @@
 }
 
 .sidebar-labels-wrap {
+
   &.has-edited,
   &:hover {
     .multiselect {
@@ -153,15 +154,15 @@
   }
 
   .multiselect {
-    > .multiselect__select {
+    >.multiselect__select {
       visibility: hidden;
     }
 
-    > .multiselect__tags {
+    >.multiselect__tags {
       border-color: transparent;
     }
 
-    &.multiselect--active > .multiselect__tags {
+    &.multiselect--active>.multiselect__tags {
       border-color: $color-woot;
     }
   }

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -44,6 +44,52 @@ $default-button-height: 4.0rem;
     padding-top: 0;
   }
 
+  &.hollow {
+    border-color: var(--s-200);
+    color: var(--w-700);
+
+    &.secondary {
+      border-color: var(--s-200);
+      color: var(--s-700)
+    }
+
+    &.success {
+      border-color: var(--s-200);
+      color: var(--g-700)
+    }
+
+    &.alert {
+      border-color: var(--s-200);
+      color: var(--r-700)
+    }
+
+    &.warning {
+      border-color: var(--s-200);
+      color: var(--y-700)
+    }
+
+    &:hover {
+      background: var(--s-75);
+      border-color: var(--s-100);
+
+      &.secondary {
+        border-color: var(--s-100);
+      }
+
+      &.success {
+        border-color: var(--s-100);
+      }
+
+      &.alert {
+        border-color: var(--s-100);
+      }
+
+      &.warning {
+        border-color: var(--s-100);
+      }
+    }
+  }
+
   // Smooth style
   &.smooth {
     @include button-style(var(--w-50), var(--w-100), var(--w-700));
@@ -67,11 +113,12 @@ $default-button-height: 4.0rem;
   }
 
   &.clear {
+
     &.warning {
       color: var(--y-600);
     }
 
-    &.button--only-icon:hover {
+    &:hover {
       background: var(--w-50);
 
       &.secondary {

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -14,7 +14,7 @@
       >
         <woot-button
           size="small"
-          variant="clear"
+          variant="smooth"
           color-scheme="secondary"
           class-names="goto-first"
           :is-disabled="hasFirstPage"
@@ -29,7 +29,7 @@
         </woot-button>
         <woot-button
           size="small"
-          variant="clear"
+          variant="smooth"
           color-scheme="secondary"
           :is-disabled="hasPrevPage"
           @click="onPrevPage"
@@ -38,7 +38,7 @@
         </woot-button>
         <woot-button
           size="small"
-          variant="clear"
+          variant="smooth"
           color-scheme="secondary"
           @click.prevent
         >
@@ -46,7 +46,7 @@
         </woot-button>
         <woot-button
           size="small"
-          variant="clear"
+          variant="smooth"
           color-scheme="secondary"
           :is-disabled="hasNextPage"
           @click="onNextPage"
@@ -55,7 +55,7 @@
         </woot-button>
         <woot-button
           size="small"
-          variant="clear"
+          variant="smooth"
           color-scheme="secondary"
           class-names="goto-last"
           :is-disabled="hasLastPage"

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

@@ -65,6 +65,7 @@
     },
     "PORTAL": {
       "HEADER": "Portals",
+      "DEFAULT": "Default",
       "NEW_BUTTON": "New Portal",
       "ACTIVE_BADGE": "active",
       "CHOOSE_LOCALE_LABEL": "Choose a locale",
@@ -159,8 +160,7 @@
         }
       },
       "ADD": {
-        "CREATE_FLOW": [
+        "CREATE_FLOW": [{
-          {
             "title": "Help center information",
             "route": "new_portal_information",
             "body": "Basic information about portal",

app/javascript/dashboard/modules/widget-preview/components/WidgetHead.vue

@@ -74,7 +74,7 @@ export default {
 
     .header-expanded {
       max-height: var(--space-giga);
-      overflow: scroll;
+      overflow: auto;
       h2 {
         font-size: var(--font-size-big);
         margin-bottom: var(--space-small);

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="edit-article--container">
-    class="edit-article--container"
-    :class="{ 'is-settings-sidebar-open': isSettingsSidebarOpen }"
-  >
     <input
       v-model="articleTitle"
       type="text"
@@ -82,10 +79,6 @@ export default {
   width: 640px;
 }
 
-.is-settings-sidebar-open {
-  margin: var(--space-large) var(--space-small);
-}
-
 .article-heading {
   font-size: var(--font-size-giga);
   font-weight: var(--font-weight-bold);

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

@@ -3,7 +3,6 @@
     <div class="header-left--wrap">
       <woot-button
         icon="chevron-left"
-        class-names="article-back-buttons"
         variant="clear"
         color-scheme="primary"
         @click="onClickGoBack"
@@ -64,6 +63,7 @@
           <woot-button
             class-names="publish-button"
             size="small"
+            icon="checkmark"
             color-scheme="primary"
             :is-disabled="!articleSlug || isPublishedArticle"
             @click="updateArticleStatus(ARTICLE_STATUS_TYPES.PUBLISH)"
@@ -227,7 +227,8 @@ export default {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  height: var(--space-larger);
+  height: var(--space-jumbo);
+  padding-top: var(--space-small);
 }
 .header-left--wrap {
   display: flex;
@@ -237,9 +238,6 @@ export default {
   display: flex;
   align-items: center;
 }
-.article-back-buttons {
-  padding-left: 0;
-}
 .article--buttons {
   margin-left: var(--space-smaller);
   .dropdown-pane {

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue

@@ -9,15 +9,16 @@
               <h2 class="portal-title block-title">
                 {{ portal.name }}
               </h2>
-              <Label
+              <woot-label
                 :title="status"
                 :color-scheme="labelColor"
-                :small="true"
+                size="small"
+                variant="smooth"
                 class="status"
               />
             </div>
             <p class="portal-count">
-              {{ portal.articles_count }}
+              {{ articleCount }}
               {{
                 $t(
                   'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
@@ -186,13 +187,11 @@
 
 <script>
 import thumbnail from 'dashboard/components/widgets/Thumbnail';
-import Label from 'dashboard/components/ui/Label';
 import LocaleItemTable from './PortalListItemTable';
 import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {
     thumbnail,
-    Label,
     LocaleItemTable,
   },
   mixins: [alertMixin],
@@ -234,6 +233,10 @@ export default {
         return this.locales[key].code;
       });
     },
+    articleCount() {
+      const { all_articles_count: count } = this.portal.meta;
+      return count;
+    },
   },
   methods: {
     addLocale() {
@@ -358,7 +361,7 @@ export default {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      margin-bottom: var(--space-normal);
+      margin-bottom: var(--space-large);
       .title-status--wrap {
         display: flex;
         align-items: center;
@@ -380,6 +383,7 @@ export default {
       }
     }
     .portal-locales {
+      margin-top: var(--space-medium);
       margin-bottom: var(--space-small);
       .locale-title {
         color: var(--s-800);
@@ -411,7 +415,7 @@ export default {
       display: flex;
       align-items: flex-start;
       flex-direction: column;
-      margin-bottom: var(--space-slab);
+      margin-bottom: var(--space-normal);
       .content-theme-wrap {
         display: flex;
         align-items: center;

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue

@@ -40,15 +40,16 @@
       <tr v-for="locale in locales" :key="locale.code">
         <td>
           <span>{{ localeName(locale.code) }}</span>
-          <Label
+          <woot-label
             v-if="locale.code === selectedLocaleCode"
             :title="
               $t(
                 'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DEFAULT_LOCALE'
               )
             "
-            color-scheme="primary"
+            color-scheme="warning"
             :small="true"
+            variant="smooth"
             class="default-status"
           />
         </td>
@@ -95,12 +96,8 @@
 </template>
 
 <script>
-import Label from 'dashboard/components/ui/Label';
 import portalMixin from '../mixins/portalMixin';
 export default {
-  components: {
-    Label,
-  },
   mixins: [portalMixin],
   props: {
     locales: {

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -33,6 +33,7 @@
         v-for="portal in portals"
         :key="portal.id"
         :portal="portal"
+        :active-portal-slug="activePortalSlug"
         :active="portal.slug === activePortalSlug"
         @open-portal-page="onPortalSelect"
       />

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue

@@ -4,15 +4,19 @@
     <div class="actions-container">
       <header>
         <div>
-          <h3 class="text-block-title portal-title">{{ portal.name }}</h3>
+          <h3 class="sub-block-title portal-title">{{ portal.name }}</h3>
           <p class="portal-count">
             {{ articlesCount }}
             {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
           </p>
         </div>
-        <span v-if="active" class="badge">{{
+        <woot-label
-          $t('HELP_CENTER.PORTAL.ACTIVE_BADGE')
+          v-if="active"
-        }}</span>
+          variant="smooth"
+          size="small"
+          color-scheme="success"
+          :title="$t('HELP_CENTER.PORTAL.ACTIVE_BADGE')"
+        />
       </header>
       <div class="portal-locales">
         <h5 class="locale-title">
@@ -21,36 +25,43 @@
         <ul>
           <li v-for="locale in locales" :key="locale.code">
             <woot-button
-              class="locale-item"
+              :class="
-              variant="clear"
+                `locale-item ${
+                  isLocaleActive(locale.code, activePortalSlug)
+                    ? 'smooth'
+                    : 'clear'
+                }`
+              "
               size="large"
               color-scheme="secondary"
               @click="event => onClick(event, locale.code, portal)"
             >
               <div class="locale-content">
-                <input
+                <div class="meta">
-                  :id="`locale-${locale.code}`"
+                  <h6 class="text-block-title text-left">
-                  v-model="selectedLocale"
-                  type="radio"
-                  name="locale"
-                  :value="locale.code"
-                  class="locale__radio"
-                  :checked="isLocaleActive(locale.code)"
-                />
-                <div>
-                  <p>{{ localeName(locale.code) }}</p>
                     <span>
+                      {{ localeName(locale.code) }}
+                    </span>
+                    <span
+                      v-if="isLocaleDefault(locale.code)"
+                      class="fs-small text-muted"
+                    >
+                      {{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
+                    </span>
+                  </h6>
+
+                  <span class="locale-meta">
                     {{ locale.articles_count }}
                     {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
                     {{ locale.code }}
                   </span>
                 </div>
+                <div v-if="isLocaleActive(locale.code, activePortalSlug)">
+                  <fluent-icon icon="checkmark" class="locale__radio" />
+                </div>
               </div>
             </woot-button>
           </li>
-          <li class="add-locale-wrap">
-            <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
-          </li>
         </ul>
       </div>
     </div>
@@ -60,6 +71,7 @@
 <script>
 import thumbnail from 'dashboard/components/widgets/Thumbnail';
 import portalMixin from '../mixins/portalMixin';
+
 export default {
   components: {
     thumbnail,
@@ -74,6 +86,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    activePortalSlug: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -111,12 +127,14 @@ export default {
       });
       this.$emit('open-portal-page');
     },
-    isLocaleActive(code) {
+    isLocaleActive(code, slug) {
-      const isPortalActive = this.portalSlug === this.portal.slug;
+      const isPortalActive = this.portal.slug === slug;
       const isLocaleActive = this.portal?.meta?.default_locale === code;
-
       return isPortalActive && isLocaleActive;
     },
+    isLocaleDefault(code) {
+      return this.portal?.meta?.default_locale === code;
+    },
   },
 };
 </script>
@@ -153,8 +171,7 @@ export default {
       }
 
       .portal-title {
-        margin-bottom: 0;
+        margin-bottom: var(--space-micro);
-        color: var(--s-700);
       }
 
       .portal-count {
@@ -184,24 +201,6 @@ export default {
         margin: 0;
       }
 
-      .locale-item {
-        display: flex;
-        align-items: flex-start;
-        margin-bottom: var(--space-smaller);
-        padding: var(--space-smaller);
-        border-radius: var(--border-radius-normal);
-
-        p {
-          margin-bottom: 0;
-          text-align: left;
-        }
-
-        span {
-          color: var(--s-500);
-          font-size: var(--font-size-small);
-        }
-      }
-
       .locale__radio {
         width: var(--space-large);
         margin-top: var(--space-tiny);
@@ -212,5 +211,32 @@ export default {
       }
     }
   }
+
+  .locale-item {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--space-smaller) var(--space-normal);
+    border-radius: var(--border-radius-normal);
+    width: 100%;
+    margin-bottom: var(--space-small);
+
+    p {
+      margin-bottom: 0;
+      text-align: left;
+    }
+
+    .locale-meta {
+      display: flex;
+      color: var(--s-500);
+      font-size: var(--font-size-small);
+      text-align: left;
+      line-height: var(--space-normal);
+      width: 100%;
+    }
+
+    .meta {
+      flex-grow: 1;
+    }
+  }
 }
 </style>

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -4,6 +4,7 @@
       :thumbnail-src="thumbnailSrc"
       :header-title="headerTitle"
       :sub-title="subTitle"
+      :portal-link="portalLink"
       @open-popover="openPortalPopover"
     />
     <transition-group name="menu-list" tag="ul" class="menu vertical">
@@ -66,6 +67,10 @@ export default {
         this.additionalSecondaryMenuItems[0].children.length > 0
       );
     },
+    portalLink() {
+      const slug = this.$route.params.portalSlug;
+      return `/public/api/v1/portals/${slug}`;
+    },
   },
   methods: {
     onSearch(value) {

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue

@@ -52,10 +52,14 @@ export default {
       type: String,
       default: '',
     },
+    portalLink: {
+      type: String,
+      default: '',
+    },
   },
   methods: {
     popoutHelpCenter() {
-      this.$emit('pop-out');
+      window.open(this.portalLink, '_blank');
     },
     openPortalPopover() {
       this.$emit('open-popover');

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

@@ -214,7 +214,8 @@ export default {
 .article-settings--container {
   flex: 0.3;
   min-width: var(--space-giga);
-  overflow: scroll;
+  max-width: 36rem;
+  overflow-y: auto;
   border-left: 1px solid var(--color-border-light);
   margin-left: var(--space-normal);
   padding-left: var(--space-normal);
@@ -233,10 +234,6 @@ export default {
   .action-buttons {
     display: flex;
     flex-direction: column;
-
-    ::v-deep .button {
-      padding-left: 0;
-    }
   }
 }
 ::v-deep {

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

@@ -11,6 +11,7 @@
         @back="onClickGoBack"
         @open="openArticleSettings"
         @close="closeArticleSettings"
+        @show="showArticleInPortal"
       />
       <div v-if="isFetching" class="text-center p-normal fs-default h-full">
         <spinner size="" />
@@ -43,9 +44,9 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import EditArticleHeader from '../../components/Header/EditArticleHeader.vue';
+import EditArticleHeader from '../../components/Header/EditArticleHeader';
-import ArticleEditor from '../../components/ArticleEditor.vue';
+import ArticleEditor from '../../components/ArticleEditor';
-import ArticleSettings from './ArticleSettings.vue';
+import ArticleSettings from './ArticleSettings';
 import Spinner from 'shared/components/Spinner';
 import portalMixin from '../../mixins/portalMixin';
 import alertMixin from 'shared/mixins/alertMixin';
@@ -83,6 +84,10 @@ export default {
     selectedPortalSlug() {
       return this.$route.params.portalSlug;
     },
+    portalLink() {
+      const slug = this.$route.params.portalSlug;
+      return `/public/api/v1/portals/${slug}`;
+    },
   },
   mounted() {
     this.fetchArticleDetails();
@@ -171,6 +176,9 @@ export default {
     closeArticleSettings() {
       this.showArticleSettings = false;
     },
+    showArticleInPortal() {
+      window.open(this.portalLink, '_blank');
+    },
   },
 };
 </script>
@@ -178,7 +186,7 @@ export default {
 <style lang="scss" scoped>
 .article-container {
   display: flex;
-  padding: var(--space-small) var(--space-normal);
+  padding: 0 var(--space-normal);
   width: 100%;
   flex: 1;
   overflow: auto;
@@ -190,7 +198,8 @@ export default {
   }
 
   .is-sidebar-open {
-    flex: 0.7;
+    flex-grow: 1;
+    flex-shrink: 0;
   }
 }
 </style>

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

@@ -114,7 +114,7 @@ export default {
 <style lang="scss" scoped>
 .article-container {
   display: flex;
-  padding: var(--space-small) var(--space-normal);
+  padding: 0 var(--space-normal);
   width: 100%;
   flex: 1;
   overflow: auto;
@@ -122,8 +122,7 @@ export default {
 .new-article--container {
   flex: 1;
   flex-shrink: 0;
-  overflow: scroll;
+  overflow-y: auto;
-  overflow: auto;
 }
 .is-sidebar-open {
   flex: 0.7;

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -5,7 +5,12 @@
         <woot-sidemenu-icon />
         <h1 class="page-title">{{ $t('HELP_CENTER.PORTAL.HEADER') }}</h1>
       </div>
-      <woot-button color-scheme="primary" size="small" @click="addPortal">
+      <woot-button
+        color-scheme="primary"
+        icon="add"
+        size="small"
+        @click="addPortal"
+      >
         {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
       </woot-button>
     </div>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -144,7 +144,7 @@ export default {
 .notification-list-item--wrap {
   flex-direction: column;
   padding: var(--space-small) var(--space-slab);
-  overflow: scroll;
+  overflow: auto;
 }
 
 .empty {

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -136,7 +136,7 @@ export default {
 
   .selector-button {
     width: 100%;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--s-200);
     padding-left: var(--space-one);
     padding-right: var(--space-one);
 

app/javascript/widget/components/AgentMessageBubble.vue

@@ -138,7 +138,7 @@ export default {
 .chat-bubble .message-content::v-deep pre {
   background: $color-primary-light;
   color: $color-body;
-  overflow: scroll;
+  overflow-y: auto;
   padding: $space-smaller;
 }
 </style>

app/javascript/widget/components/UserMessageBubble.vue

@@ -35,7 +35,7 @@ export default {
 .chat-bubble.user::v-deep pre {
   background: $color-primary-light;
   color: $color-body;
-  overflow: scroll;
+  overflow: auto;
   padding: $space-smaller;
 }
 </style>