feat: Component for listing the portal (#5146)

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

@@ -27,16 +27,51 @@
       "SAVED": "Draft saved"
     },
     "PORTAL": {
+      "HEADER": "Portals",
+      "NEW_BUTTON": "New Portal",
       "ACTIVE_BADGE": "active",
       "CHOOSE_LOCALE_LABEL": "Choose a locale",
       "ARTICLES_LABEL": "articles",
       "ADD_NEW_LOCALE": "Add a new locale",
       "POPOVER": {
         "TITLE": "Portals",
-        "NEW_PORTAL_LINK": "New Portal",
+        "PORTAL_SETTINGS": "Portal settings",
         "SUBTITLE": "You have multiple portals and can have different locales for each portal.",
         "CANCEL_BUTTON_LABEL": "Cancel",
         "CHOOSE_LOCALE_BUTTON": "Choose Locale"
+      },
+      "PORTAL_SETTINGS": {
+        "LIST_ITEM": {
+          "HEADER": {
+            "COUNT_LABEL": "articles",
+            "ADD": "Add locale",
+            "VISIT": "Visit site",
+            "SETTINGS": "Settings"
+          },
+          "PORTAL_CONFIG": {
+            "TITLE": "Portal Configurations",
+            "ITEMS": {
+              "NAME": "Name",
+              "DOMAIN": "Custom domain",
+              "SLUG": "Slug",
+              "TITLE": "Portal title",
+              "THEME": "Theme color",
+              "SUB_TEXT": "Portal sub text"
+            }
+          },
+          "AVAILABLE_LOCALES": {
+            "TITLE": "Available locales",
+            "TABLE": {
+              "NAME": "Locale name",
+              "CODE": "Locale code",
+              "ARTICLE_COUNT": "No. of articles",
+              "CATEGORIES": "No. of categories",
+              "SWAP": "Swap",
+              "DELETE": "Delete",
+              "DEFAULT_LOCALE": "Default"
+            }
+          }
+        }
       }
     },
     "TABLE": {

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

@@ -31,6 +31,7 @@
         v-if="showPortalPopover"
         :portals="portals"
         @close-popover="closePortalPopover"
+        @open-portal-page="openPortalPage"
       />
     </section>
   </div>
@@ -339,6 +340,12 @@ export default {
     closePortalPopover() {
       this.showPortalPopover = false;
     },
+    openPortalPage() {
+      this.$router.push({
+        name: 'list_all_portals',
+      });
+      this.showPortalPopover = false;
+    },
   },
 };
 </script>

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

@@ -0,0 +1,301 @@
+<template>
+  <div>
+    <div v-for="portal in portals" :key="portal.id" class="portal">
+      <thumbnail :username="portal.name" variant="square" />
+      <div class="container">
+        <header>
+          <div>
+            <div class="title-status--wrap">
+              <h2 class="portal-title block-title">{{ portal.name }}</h2>
+              <Label
+                :title="status"
+                :color-scheme="labelColor"
+                :small="true"
+                class="status"
+              />
+            </div>
+            <p class="portal-count">
+              {{ portal.articles_count }}
+              {{
+                $t(
+                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.COUNT_LABEL'
+                )
+              }}
+            </p>
+          </div>
+          <div>
+            <woot-button
+              variant="smooth"
+              size="small"
+              color-scheme="primary"
+              class="header-action-buttons"
+              @click="addLocale"
+            >
+              {{
+                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.ADD')
+              }}
+            </woot-button>
+            <woot-button
+              variant="hollow"
+              size="small"
+              color-scheme="secondary"
+              class="header-action-buttons"
+              @click="openSite"
+            >
+              {{
+                $t('HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.VISIT')
+              }}
+            </woot-button>
+            <woot-button
+              v-tooltip.top-end="
+                $t(
+                  'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.HEADER.SETTINGS'
+                )
+              "
+              variant="hollow"
+              size="small"
+              icon="settings"
+              class="header-action-buttons"
+              color-scheme="secondary"
+              @click="openSettings"
+            />
+          </div>
+        </header>
+        <div class="portal-locales">
+          <h2 class="locale-title sub-block-title">
+            {{
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.TITLE'
+              )
+            }}
+          </h2>
+          <div class="configuration-items--wrap">
+            <div class="configuration-items">
+              <div class="configuration-item">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.NAME'
+                  )
+                }}</label>
+                <span class="text-block-title">{{ portal.header_text }}</span>
+              </div>
+              <div class="configuration-item">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.DOMAIN'
+                  )
+                }}</label>
+                <span class="text-block-title">{{ portal.custom_domain }}</span>
+              </div>
+            </div>
+            <div class="configuration-items">
+              <div class="configuration-item">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SLUG'
+                  )
+                }}</label>
+                <span class="text-block-title">{{ portal.slug }}</span>
+              </div>
+              <div class="configuration-item">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.TITLE'
+                  )
+                }}</label>
+                <span class="text-block-title">{{ portal.page_title }}</span>
+              </div>
+            </div>
+            <div class="configuration-items">
+              <div class="configuration-item">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.THEME'
+                  )
+                }}</label>
+                <div class="content-theme-wrap">
+                  <div
+                    class="theme-color"
+                    :style="{ background: portal.color }"
+                  />
+                  <span class="text-block-title">{{ portal.page_title }}</span>
+                </div>
+              </div>
+              <div class="configuration-item">
+                <label>{{
+                  $t(
+                    'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.PORTAL_CONFIG.ITEMS.SUB_TEXT'
+                  )
+                }}</label>
+                <span class="text-block-title">{{ portal.page_title }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="portal-locales">
+          <h2 class="locale-title sub-block-title">
+            {{
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TITLE'
+              )
+            }}
+          </h2>
+          <locale-item-table
+            :portals="portal"
+            :selected-locale-code="selectedLocaleCode"
+            @swap="swapLocale"
+            @delete="deleteLocale"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import thumbnail from 'dashboard/components/widgets/Thumbnail';
+import Label from 'dashboard/components/ui/Label';
+import LocaleItemTable from './PortalListItemTable';
+export default {
+  components: {
+    thumbnail,
+    Label,
+    LocaleItemTable,
+  },
+  props: {
+    portals: {
+      type: Array,
+      default: () => [],
+    },
+    status: {
+      type: String,
+      default: '',
+      values: ['archived', 'draft', 'published'],
+    },
+    selectedLocaleCode: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    labelColor() {
+      switch (this.status) {
+        case 'archived':
+          return 'secondary';
+        case 'draft':
+          return 'warning';
+        default:
+          return 'success';
+      }
+    },
+    defaultLocale(code) {
+      return code === this.selectedLocaleCode;
+    },
+  },
+  methods: {
+    addLocale() {
+      this.$emit('add');
+    },
+    openSite() {
+      this.$emit('open-site');
+    },
+    openSettings() {
+      this.$emit('open');
+    },
+    swapLocale() {
+      this.$emit('swap');
+    },
+    deleteLocale() {
+      this.$emit('delete');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.portal {
+  background-color: var(--white);
+  padding: var(--space-normal);
+  border: 1px solid var(--color-border-dark);
+  border-radius: var(--border-radius-medium);
+  position: relative;
+  display: flex;
+  margin-bottom: var(--space-slab);
+
+  .container {
+    margin-left: var(--space-small);
+    flex-grow: 1;
+
+    header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--space-normal);
+      .title-status--wrap {
+        display: flex;
+        align-items: center;
+        .status {
+          margin: 0 0 0 var(--space-small);
+        }
+      }
+      .portal-title {
+        color: var(--s-900);
+        margin-bottom: 0;
+      }
+      .portal-count {
+        font-size: var(--font-size-small);
+        margin-bottom: 0;
+        color: var(--s-700);
+      }
+      .header-action-buttons {
+        margin-left: var(--space-smaller);
+      }
+    }
+    .portal-locales {
+      margin-bottom: var(--space-small);
+      .locale-title {
+        color: var(--s-800);
+        font-weight: var(--font-weight-medium);
+        margin-bottom: var(--space-small);
+      }
+    }
+  }
+  .portal-settings--icon {
+    padding: var(--space-smaller);
+    margin-left: var(--space-small);
+
+    &:hover {
+      cursor: pointer;
+      background: var(--s-50);
+      border-radius: var(--border-radius-normal);
+    }
+  }
+  .configuration-items--wrap {
+    display: flex;
+    justify-content: space-between;
+    margin-right: var(--space-mega);
+    max-width: 80vw;
+    .configuration-items {
+      display: flex;
+      flex-direction: column;
+    }
+    .configuration-item {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      margin-bottom: var(--space-slab);
+      .content-theme-wrap {
+        display: flex;
+        align-items: center;
+      }
+      .theme-color {
+        width: var(--space-normal);
+        height: var(--space-normal);
+        border-radius: var(--border-radius-normal);
+        margin-right: var(--space-smaller);
+        border: 1px solid var(--color-border-light);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,148 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">
+          {{
+            $t(
+              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.NAME'
+            )
+          }}
+        </th>
+        <th scope="col">
+          {{
+            $t(
+              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CODE'
+            )
+          }}
+        </th>
+        <th scope="col">
+          {{
+            $t(
+              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.ARTICLE_COUNT'
+            )
+          }}
+        </th>
+        <th scope="col">
+          {{
+            $t(
+              'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.CATEGORIES'
+            )
+          }}
+        </th>
+        <th scope="col" />
+      </tr>
+    </thead>
+    <tr>
+      <td colspan="100%" class="horizontal-line" />
+    </tr>
+    <tbody>
+      <tr v-for="locale in portals.locales" :key="locale.code">
+        <td>
+          <span>{{ locale.name }}</span>
+          <Label
+            v-if="locale.code === selectedLocaleCode"
+            :title="
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DEFAULT_LOCALE'
+              )
+            "
+            color-scheme="primary"
+            :small="true"
+            class="default-status"
+          />
+        </td>
+        <td>
+          <span>{{ locale.code }}</span>
+        </td>
+        <td>
+          <span>{{ locale.articles_count }}</span>
+        </td>
+        <td>
+          <span>{{ locale.categories_count }}</span>
+        </td>
+        <td>
+          <woot-button
+            v-tooltip.top-end="
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.SWAP'
+              )
+            "
+            size="tiny"
+            variant="smooth"
+            icon="arrow-swap"
+            color-scheme="primary"
+            :disabled="locale.code === selectedLocaleCode"
+            @click="swapLocale"
+          />
+          <woot-button
+            v-tooltip.top-end="
+              $t(
+                'HELP_CENTER.PORTAL.PORTAL_SETTINGS.LIST_ITEM.AVAILABLE_LOCALES.TABLE.DELETE'
+              )
+            "
+            size="tiny"
+            variant="smooth"
+            icon="delete"
+            color-scheme="secondary"
+            @click="deleteLocale"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import Label from 'dashboard/components/ui/Label';
+export default {
+  components: {
+    Label,
+  },
+  props: {
+    portals: {
+      type: Object,
+      default: () => {},
+    },
+    selectedLocaleCode: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    swapLocale() {
+      this.$emit('swap');
+    },
+    deleteLocale() {
+      this.$emit('delete');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  thead tr th {
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    text-transform: none;
+    color: var(--s-600);
+    padding-left: 0;
+    padding-top: 0;
+  }
+
+  tbody tr {
+    border-bottom: 0;
+    td {
+      font-size: var(--font-size-small);
+      padding-left: 0;
+      .default-status {
+        margin: 0 0 0 var(--space-smaller);
+      }
+    }
+  }
+}
+.horizontal-line {
+  border-bottom: 1px solid var(--color-border);
+}
+</style>

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

@@ -5,12 +5,15 @@
         <h2 class="block-title">
           {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
         </h2>
-        <router-link to="#" class="new-popover-link">
+        <woot-button
-          <fluent-icon icon="add" size="16" />
+          variant="smooth"
-          <span>
+          color-scheme="secondary"
-            {{ $t('HELP_CENTER.PORTAL.POPOVER.NEW_PORTAL_LINK') }}
+          icon="settings"
-          </span>
+          size="small"
-        </router-link>
+          @click="openPortalPage"
+        >
+          {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
+        </woot-button>
       </div>
       <p class="subtitle">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
@@ -52,6 +55,9 @@ export default {
     closePortalPopover() {
       this.$emit('close-popover');
     },
+    openPortalPage() {
+      this.$emit('open-portal-page');
+    },
   },
 };
 </script>

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

@@ -16,13 +16,13 @@
       <woot-button
         variant="link"
         color-scheme="secondary"
-        @click="popOutHelpCenter"
+        @click="popoutHelpCenter"
       >
         <fluent-icon
           icon="arrow-up-right"
           size="28px"
           class="pop-out--icon"
-          @click="popOutHelpCenter"
+          @click="popoutHelpCenter"
         />
       </woot-button>
       <woot-button
@@ -61,7 +61,7 @@ export default {
     },
   },
   methods: {
-    popOutHelpCenter() {
+    popoutHelpCenter() {
       this.$emit('pop-out');
     },
     openPortalPopover() {

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js

@@ -0,0 +1,145 @@
+import { action } from '@storybook/addon-actions';
+import PortalListItem from '../PortalListItem';
+
+export default {
+  title: 'Components/Help Center/Portal List',
+  component: PortalListItem,
+  argTypes: {
+    portals: { control: 'array' },
+    status: {
+      control: {
+        type: 'string',
+        options: ['archived', 'draft', 'published'],
+      },
+    },
+    selectedLocaleCode: { control: 'string' },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PortalListItem },
+  template:
+    '<portal-list-item v-bind="$props" @add="addLocale" @open-site="openSite" @open="openSettings" @swap="swapLocale" @delete="deleteLocale" ></portal-list-item>',
+});
+
+export const PortalListItemView = Template.bind({});
+PortalListItemView.args = {
+  addLocale: action('addLocale'),
+  openSite: action('openSite'),
+  openSettings: action('openSettings'),
+  swapLocale: action('swapLocale'),
+  deleteLocale: action('deleteLocale'),
+  status: 'published',
+  selectedLocaleCode: 'en-US',
+  portals: [
+    {
+      name: 'Chatwoot Help Center',
+      id: 1,
+      color: 'red',
+      custom_domain: 'help-center.chatwoot.com',
+      articles_count: 123,
+      header_text: 'Help center',
+      homepage_link: null,
+      page_title: 'English',
+      slug: 'help-center',
+      archived: false,
+      config: {
+        allowed_locales: [
+          {
+            code: 'en-US',
+            name: 'English',
+            articles_count: 123,
+            categories_count: 42,
+          },
+          {
+            code: 'fr-FR',
+            name: 'Français',
+            articles_count: 23,
+            categories_count: 11,
+          },
+          {
+            code: 'de-DE',
+            name: 'Deutsch',
+            articles_count: 32,
+            categories_count: 12,
+          },
+          {
+            code: 'es-ES',
+            name: 'Español',
+            articles_count: 12,
+            categories_count: 4,
+          },
+        ],
+      },
+      locales: [
+        {
+          code: 'en-US',
+          name: 'English',
+          articles_count: 123,
+          categories_count: 42,
+        },
+        {
+          code: 'fr-FR',
+          name: 'Français',
+          articles_count: 23,
+          categories_count: 11,
+        },
+        {
+          code: 'de-DE',
+          name: 'Deutsch',
+          articles_count: 32,
+          categories_count: 12,
+        },
+        {
+          code: 'es-ES',
+          name: 'Español',
+          articles_count: 12,
+          categories_count: 4,
+        },
+      ],
+    },
+    {
+      name: 'Chatwoot Docs',
+      id: 2,
+      color: 'green',
+      custom_domain: 'doc-chatwoot.com',
+      articles_count: 67,
+      header_text: 'Docs',
+      homepage_link: null,
+      page_title: 'Portal',
+      slug: 'second_portal',
+      archived: false,
+      config: {
+        allowed_locales: [
+          {
+            name: 'English',
+            code: 'en-EN',
+            articles_count: 12,
+            categories_count: 66,
+          },
+          {
+            name: 'Mandarin',
+            code: 'ch-CH',
+            articles_count: 6,
+            categories_count: 23,
+          },
+        ],
+      },
+      locales: [
+        {
+          name: 'English',
+          code: 'en-EN',
+          articles_count: 12,
+          categories_count: 66,
+        },
+        {
+          name: 'Mandarin',
+          code: 'ch-CH',
+          articles_count: 6,
+          categories_count: 23,
+        },
+      ],
+    },
+  ],
+};

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

@@ -1,3 +1,165 @@
 <template>
-  <div>List of portals</div>
+  <div class="container">
+    <div class="header-wrap">
+      <h1 class="page-title">{{ $t('HELP_CENTER.PORTAL.HEADER') }}</h1>
+      <woot-button color-scheme="primary" size="small" @click="createPortal">
+        {{ $t('HELP_CENTER.PORTAL.NEW_BUTTON') }}
+      </woot-button>
+    </div>
+    <div class="portal-container">
+      <portal-list-item
+        :portals="portals"
+        status="published"
+        selected-locale-code="en-US"
+      />
+    </div>
+  </div>
 </template>
+
+<script>
+import PortalListItem from 'dashboard/routes/dashboard/helpcenter/components/PortalListItem';
+export default {
+  components: {
+    PortalListItem,
+  },
+  data() {
+    return {
+      // Dummy data for testing will remove once the state is implemented.
+      portals: [
+        {
+          name: 'Chatwoot Help Center',
+          id: 1,
+          color: 'red',
+          custom_domain: 'help-center.chatwoot.com',
+          articles_count: 123,
+          header_text: 'Help center',
+          homepage_link: null,
+          page_title: 'English',
+          slug: 'help-center',
+          archived: false,
+          config: {
+            allowed_locales: [
+              {
+                code: 'en-US',
+                name: 'English',
+                articles_count: 123,
+                categories_count: 42,
+              },
+              {
+                code: 'fr-FR',
+                name: 'Français',
+                articles_count: 23,
+                categories_count: 11,
+              },
+              {
+                code: 'de-DE',
+                name: 'Deutsch',
+                articles_count: 32,
+                categories_count: 12,
+              },
+              {
+                code: 'es-ES',
+                name: 'Español',
+                articles_count: 12,
+                categories_count: 4,
+              },
+            ],
+          },
+          locales: [
+            {
+              code: 'en-US',
+              name: 'English',
+              articles_count: 123,
+              categories_count: 42,
+            },
+            {
+              code: 'fr-FR',
+              name: 'Français',
+              articles_count: 23,
+              categories_count: 11,
+            },
+            {
+              code: 'de-DE',
+              name: 'Deutsch',
+              articles_count: 32,
+              categories_count: 12,
+            },
+            {
+              code: 'es-ES',
+              name: 'Español',
+              articles_count: 12,
+              categories_count: 4,
+            },
+          ],
+        },
+        {
+          name: 'Chatwoot Docs',
+          id: 2,
+          color: 'green',
+          custom_domain: 'doc-chatwoot.com',
+          articles_count: 67,
+          header_text: 'Docs',
+          homepage_link: null,
+          page_title: 'Portal',
+          slug: 'second_portal',
+          archived: false,
+          config: {
+            allowed_locales: [
+              {
+                name: 'English',
+                code: 'en-EN',
+                articles_count: 12,
+                categories_count: 66,
+              },
+              {
+                name: 'Mandarin',
+                code: 'ch-CH',
+                articles_count: 6,
+                categories_count: 23,
+              },
+            ],
+          },
+          locales: [
+            {
+              name: 'English',
+              code: 'en-EN',
+              articles_count: 12,
+              categories_count: 66,
+            },
+            {
+              name: 'Mandarin',
+              code: 'ch-CH',
+              articles_count: 6,
+              categories_count: 23,
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    createPortal() {
+      this.$emit('create-portal');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: var(--space-small) var(--space-normal);
+  width: 100%;
+
+  .header-wrap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 var(--space-small) 0;
+    height: var(--space-larger);
+  }
+  .portal-container {
+    height: 90vh;
+    overflow-y: scroll;
+  }
+}
+</style>