feat: Update the design for teams (#9899)

This PR updates the design for the team listing page. This PR is part of the design revamp project for all the settings pages.

Co-authored-by: Sojan Jose <sojan@pepalo.com>

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

@@ -2,7 +2,9 @@
   "TEAMS_SETTINGS": {
     "NEW_TEAM": "Create new team",
     "HEADER": "Teams",
-    "SIDEBAR_TXT": "<p><b>Teams</b></p> <p>Teams let you organize your agents into groups based on their responsibilities. <br /> An agent can be part of multiple teams. You can assign conversations to a team when you are working collaboratively. </p>",
+    "LOADING": "Fetching teams",
+    "DESCRIPTION": "Teams allow you to organize agents into groups based on their responsibilities. An agent can belong to multiple teams. When working collaboratively, you can assign conversations to specific teams.",
+    "LEARN_MORE": "Learn more about teams",
     "LIST": {
       "404": "There are no teams created on this account.",
       "EDIT_TEAM": "Edit team"
@@ -85,7 +87,6 @@
       "BUTTON_TEXT": "Add agents",
       "AGENT_VALIDATION_ERROR": "Select at least one agent."
     },
-
     "FINISH": {
       "TITLE": "Your team is ready!",
       "MESSAGE": "You can now collaborate as a team on conversations. Happy supporting ",
@@ -98,7 +99,7 @@
         "ERROR_MESSAGE": "Couldn't delete the team. Try again."
       },
       "CONFIRM": {
-        "TITLE": "Are you sure want to delete - %{teamName}",
+        "TITLE": "Are you sure you want to delete the team?",
         "PLACE_HOLDER": "Please type {teamName} to confirm",
         "MESSAGE": "Deleting the team will remove the team assignment from the conversations assigned to this team.",
         "YES": "Delete ",

app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue

@@ -1,143 +1,146 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
 import { useAlert } from 'dashboard/composables';
 import { useAdmin } from 'dashboard/composables/useAdmin';
-import accountMixin from '../../../../mixins/account';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import { computed, ref } from 'vue';
 
-export default {
-  components: {},
-  mixins: [accountMixin],
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
-  data() {
-    return {
-      loading: {},
-      showSettings: false,
-      showDeletePopup: false,
-      selectedTeam: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      teamsList: 'teams/getTeams',
-      globalConfig: 'globalConfig/get',
-    }),
-    deleteConfirmText() {
-      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${
-        this.selectedTeam.name
-      }`;
-    },
-    deleteRejectText() {
-      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.NO');
-    },
-    confirmDeleteTitle() {
-      return this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
-        teamName: this.selectedTeam.name,
-      });
-    },
-    confirmPlaceHolderText() {
-      return `${this.$t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
-        teamName: this.selectedTeam.name,
-      })}`;
-    },
-  },
-  methods: {
-    async deleteTeam({ id }) {
-      try {
-        await this.$store.dispatch('teams/delete', id);
-        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        useAlert(this.$t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+import { useI18n } from 'dashboard/composables/useI18n';
 
-    confirmDeletion() {
-      this.deleteTeam(this.selectedTeam);
-      this.closeDelete();
-    },
-    openDelete(team) {
-      this.showDeletePopup = true;
-      this.selectedTeam = team;
-    },
-    closeDelete() {
-      this.showDeletePopup = false;
-      this.selectedTeam = {};
-    },
-  },
+const store = useStore();
+const { t } = useI18n();
+const getters = useStoreGetters();
+const teamsList = computed(() => getters['teams/getTeams'].value);
+const uiFlags = computed(() => getters['teams/getUIFlags'].value);
+const { isAdmin } = useAdmin();
+
+const loading = ref({});
+
+const deleteTeam = async ({ id }) => {
+  try {
+    loading.value[id] = true;
+    await store.dispatch('teams/delete', id);
+    useAlert(t('TEAMS_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    useAlert(t('TEAMS_SETTINGS.DELETE.API.ERROR_MESSAGE'));
+  } finally {
+    loading.value[id] = false;
+  }
 };
+
+const showDeletePopup = ref(false);
+const selectedTeam = ref({});
+
+const openDelete = team => {
+  showDeletePopup.value = true;
+  selectedTeam.value = team;
+};
+
+const closeDelete = () => {
+  showDeletePopup.value = false;
+  selectedTeam.value = {};
+};
+
+const confirmDeletion = () => {
+  deleteTeam(selectedTeam.value);
+  closeDelete();
+};
+
+const deleteConfirmText = computed(
+  () => `${t('TEAMS_SETTINGS.DELETE.CONFIRM.YES')} ${selectedTeam.value.name}`
+);
+
+const deleteRejectText = computed(() => t('TEAMS_SETTINGS.DELETE.CONFIRM.NO'));
+
+const confirmDeleteTitle = computed(() =>
+  t('TEAMS_SETTINGS.DELETE.CONFIRM.TITLE', {
+    teamName: selectedTeam.value.name,
+  })
+);
+
+const confirmPlaceHolderText = computed(() =>
+  t('TEAMS_SETTINGS.DELETE.CONFIRM.PLACE_HOLDER', {
+    teamName: selectedTeam.value.name,
+  })
+);
 </script>
 
 <template>
   <div class="flex-1 overflow-auto">
-    <div class="flex flex-row gap-4 p-8">
-      <div class="w-full md:w-3/5">
-        <p
-          v-if="!teamsList.length"
-          class="flex flex-col items-center justify-center h-full"
+    <BaseSettingsHeader
+      :title="$t('TEAMS_SETTINGS.HEADER')"
+      :description="$t('TEAMS_SETTINGS.DESCRIPTION')"
+      :link-text="$t('TEAMS_SETTINGS.LEARN_MORE')"
+      feature-name="team_management"
+    >
+      <template #actions>
+        <router-link
+          v-if="isAdmin"
+          :to="{ name: 'settings_teams_new' }"
+          class="button rounded-md primary"
         >
-          {{ $t('TEAMS_SETTINGS.LIST.404') }}
-          <router-link
-            v-if="isAdmin"
-            :to="addAccountScoping('settings/teams/new')"
-          >
+          <fluent-icon icon="add-circle" />
+          <span class="button__content">
             {{ $t('TEAMS_SETTINGS.NEW_TEAM') }}
-          </router-link>
-        </p>
+          </span>
+        </router-link>
+      </template>
+    </BaseSettingsHeader>
+    <div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
+      <woot-loading-state
+        v-if="uiFlags.isFetching"
+        :message="$t('TEAMS_SETTINGS.LOADING')"
+      />
+      <p
+        v-else-if="!teamsList.length"
+        class="flex flex-col items-center justify-center h-full text-base p-8"
+      >
+        {{ $t('TEAMS_SETTINGS.LIST.404') }}
+      </p>
 
-        <table v-if="teamsList.length" class="woot-table">
-          <tbody>
-            <tr v-for="item in teamsList" :key="item.id">
-              <td>
-                <span class="agent-name">{{ item.name }}</span>
-                <p>{{ item.description }}</p>
-              </td>
+      <table
+        v-else
+        class="min-w-full divide-y divide-slate-75 dark:divide-slate-700"
+      >
+        <tbody class="divide-y divide-slate-50 dark:divide-slate-800">
+          <tr v-for="team in teamsList" :key="team.id">
+            <td class="py-4 pr-4">
+              <span class="block font-medium capitalize">{{ team.name }}</span>
+              <p class="mb-0">{{ team.description }}</p>
+            </td>
 
-              <td>
-                <div class="button-wrapper">
-                  <router-link
-                    :to="addAccountScoping(`settings/teams/${item.id}/edit`)"
-                  >
-                    <woot-button
-                      v-if="isAdmin"
-                      v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
-                      variant="smooth"
-                      size="tiny"
-                      color-scheme="secondary"
-                      class-names="grey-btn"
-                      icon="settings"
-                    />
-                  </router-link>
-                  <woot-button
-                    v-if="isAdmin"
-                    v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
-                    variant="smooth"
-                    color-scheme="alert"
-                    size="tiny"
-                    icon="dismiss-circle"
-                    class-names="grey-btn"
-                    :is-loading="loading[item.id]"
-                    @click="openDelete(item)"
-                  />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="hidden w-1/3 md:block">
-        <span
-          v-dompurify-html="
-            $t('TEAMS_SETTINGS.SIDEBAR_TXT', {
-              installationName: globalConfig.installationName,
-            })
-          "
-        />
-      </div>
+            <td class="py-4 flex justify-end gap-1">
+              <router-link
+                :to="{
+                  name: 'settings_teams_edit',
+                  params: { teamId: team.id },
+                }"
+              >
+                <woot-button
+                  v-if="isAdmin"
+                  v-tooltip.top="$t('TEAMS_SETTINGS.LIST.EDIT_TEAM')"
+                  variant="smooth"
+                  size="tiny"
+                  color-scheme="secondary"
+                  class-names="grey-btn"
+                  icon="settings"
+                />
+              </router-link>
+              <woot-button
+                v-if="isAdmin"
+                v-tooltip.top="$t('TEAMS_SETTINGS.DELETE.BUTTON_TEXT')"
+                variant="smooth"
+                color-scheme="alert"
+                size="tiny"
+                icon="dismiss-circle"
+                class-names="grey-btn"
+                :is-loading="loading[team.id]"
+                @click="openDelete(team)"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
     <woot-confirm-delete-modal
       v-if="showDeletePopup"
@@ -153,11 +156,3 @@ export default {
     />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.button-wrapper {
-  min-width: unset;
-  justify-content: flex-end;
-  padding-right: var(--space-large);
-}
-</style>

app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js

@@ -1,6 +1,6 @@
-/* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../../helper/URLHelper';
 
+const TeamsIndex = () => import('./Index.vue');
 const CreateStepWrap = () => import('./Create/Index.vue');
 const EditStepWrap = () => import('./Edit/Index.vue');
 const CreateTeam = () => import('./Create/CreateTeam.vue');
@@ -9,23 +9,13 @@ const AddAgents = () => import('./Create/AddAgents.vue');
 const EditAgents = () => import('./Edit/EditAgents.vue');
 const FinishSetup = () => import('./FinishSetup.vue');
 const SettingsContent = () => import('../Wrapper.vue');
-const TeamsHome = () => import('./Index.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/teams'),
-      component: SettingsContent,
-      props: params => {
-        const showBackButton = params.name !== 'settings_teams_list';
-        return {
-          headerTitle: 'TEAMS_SETTINGS.HEADER',
-          headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
-          icon: 'people-team',
-          newButtonRoutes: ['settings_teams_new'],
-          showBackButton,
-        };
-      },
+      component: SettingsWrapper,
       children: [
         {
           path: '',
@@ -34,11 +24,26 @@ export default {
         {
           path: 'list',
           name: 'settings_teams_list',
-          component: TeamsHome,
+          component: TeamsIndex,
           meta: {
             permissions: ['administrator'],
           },
         },
+      ],
+    },
+    {
+      path: frontendURL('accounts/:accountId/settings/teams'),
+      component: SettingsContent,
+      props: () => {
+        return {
+          headerTitle: 'TEAMS_SETTINGS.HEADER',
+          headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
+          icon: 'people-team',
+          newButtonRoutes: ['settings_teams_new'],
+          showBackButton: true,
+        };
+      },
+      children: [
         {
           path: 'new',
           component: CreateStepWrap,