feat: Update the design for user management page (#9948)

This PR is the part of the settings page design update series. This PR updates the design for the user management page.


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

app/javascript/dashboard/helper/featureHelper.js

@@ -1,5 +1,6 @@
 const FEATURE_HELP_URLS = {
   agent_bots: 'https://chwt.app/hc/agent-bots',
+  agents: 'https://chwt.app/hc/agents',
   audit_logs: 'https://chwt.app/hc/audit-logs',
   campaigns: 'https://chwt.app/hc/campaigns',
   canned_responses: 'https://chwt.app/hc/canned',

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

@@ -3,7 +3,8 @@
     "HEADER": "Agents",
     "HEADER_BTN_TXT": "Add Agent",
     "LOADING": "Fetching Agent List",
-    "SIDEBAR_TXT": "<p><b>Agents</b></p> <p> An <b>Agent</b> is a member of your Customer Support team. </p><p> Agents will be able to view and reply to messages from your users. The list shows all agents currently in your account. </p><p> Click on <b>Add Agent</b> to add a new agent. Agent you add will receive an email with a confirmation link to activate their account, after which they can access Chatwoot and respond to messages. </p><p> Access to Chatwoot's features are based on following roles. </p><p> <b>Agent</b> - Agents with this role can only access inboxes, reports and conversations. They can assign conversations to other agents or themselves and resolve conversations.</p><p> <b>Administrator</b> - Administrator will have access to all Chatwoot features enabled for your account, including settings, along with all of a normal agents' privileges.</p>",
+    "DESCRIPTION": "An agent is a member of your customer support team who can view and respond to user messages. The list below shows all the agents in your account.",
+    "LEARN_MORE": "Learn about user roles",
     "AGENT_TYPES": {
       "ADMINISTRATOR": "Administrator",
       "AGENT": "Agent"
@@ -33,7 +34,6 @@
           "PLACEHOLDER": "Please select a role",
           "ERROR": "Role is required"
         },
-
         "EMAIL": {
           "LABEL": "Email Address",
           "PLACEHOLDER": "Please enter an email address of the agent"

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

@@ -1,60 +1,56 @@
-<script>
+<script setup>
-import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { computed, onMounted, ref } from 'vue';
-import Thumbnail from '../../../../components/widgets/Thumbnail.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import { useI18n } from 'dashboard/composables/useI18n';
+import { useStoreGetters, useStore } from 'dashboard/composables/store';
+
 import AddAgent from './AddAgent.vue';
 import EditAgent from './EditAgent.vue';
+import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
+import SettingsLayout from '../SettingsLayout.vue';
 
-export default {
+const getters = useStoreGetters();
-  components: {
+const store = useStore();
-    AddAgent,
+const { t } = useI18n();
-    EditAgent,
+
-    Thumbnail,
+const loading = ref({});
-  },
+const showAddPopup = ref(false);
-  mixins: [globalConfigMixin],
+const showDeletePopup = ref(false);
-  data() {
+const showEditPopup = ref(false);
-    return {
+const agentAPI = ref({ message: '' });
-      loading: {},
+const currentAgent = ref({});
-      showAddPopup: false,
+
-      showDeletePopup: false,
+const deleteConfirmText = computed(
-      showEditPopup: false,
+  () => `${t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${currentAgent.value.name}`
-      agentAPI: {
+);
-        message: '',
+const deleteRejectText = computed(() => {
-      },
+  return `${t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${currentAgent.value.name}`;
-      currentAgent: {},
+});
-    };
+const deleteMessage = computed(() => {
-  },
+  return ` ${currentAgent.value.name}?`;
-  computed: {
+});
-    ...mapGetters({
+
-      agentList: 'agents/getAgents',
+const agentList = computed(() => getters['agents/getAgents'].value);
-      uiFlags: 'agents/getUIFlags',
+const uiFlags = computed(() => getters['agents/getUIFlags'].value);
-      currentUserId: 'getCurrentUserID',
+const currentUserId = computed(() => getters.getCurrentUserID.value);
-      globalConfig: 'globalConfig/get',
+
-    }),
+onMounted(() => {
-    deleteConfirmText() {
+  store.dispatch('agents/get');
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
+});
-        this.currentAgent.name
+
-      }`;
+const verifiedAdministrators = computed(() => {
-    },
+  return agentList.value.filter(
-    deleteRejectText() {
+    agent => agent.role === 'administrator' && agent.confirmed
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
+  );
-        this.currentAgent.name
+});
-      }`;
+
-    },
+const showEditAction = agent => {
-    deleteMessage() {
+  return currentUserId.value !== agent.id;
-      return ` ${this.currentAgent.name}?`;
+};
-    },
+
-  },
+const showDeleteAction = agent => {
-  mounted() {
+  if (currentUserId.value === agent.id) {
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    showEditAction(agent) {
-      return this.currentUserId !== agent.id;
-    },
-    showDeleteAction(agent) {
-      if (this.currentUserId === agent.id) {
     return false;
   }
 
@@ -63,114 +59,109 @@ export default {
   }
 
   if (agent.role === 'administrator') {
-        return this.verifiedAdministrators().length !== 1;
+    return verifiedAdministrators.value.length !== 1;
   }
   return true;
-    },
+};
-    verifiedAdministrators() {
+const showAlertMessage = message => {
-      return this.agentList.filter(
+  loading.value[currentAgent.value.id] = false;
-        agent => agent.role === 'administrator' && agent.confirmed
+  currentAgent.value = {};
-      );
+  agentAPI.value.message = message;
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
-
-    // Edit Function
-    openEditPopup(agent) {
-      this.showEditPopup = true;
-      this.currentAgent = agent;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
-
-    // Delete Function
-    openDeletePopup(agent) {
-      this.showDeletePopup = true;
-      this.currentAgent = agent;
-    },
-    closeDeletePopup() {
-      this.showDeletePopup = false;
-    },
-    confirmDeletion() {
-      this.loading[this.currentAgent.id] = true;
-      this.closeDeletePopup();
-      this.deleteAgent(this.currentAgent.id);
-    },
-    async deleteAgent(id) {
-      try {
-        await this.$store.dispatch('agents/delete', id);
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
-      } catch (error) {
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
-      }
-    },
-    // Show SnackBar
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loading[this.currentAgent.id] = false;
-      this.currentAgent = {};
-      // Show message
-      this.agentAPI.message = message;
   useAlert(message);
-    },
+};
-  },
+
+const openAddPopup = () => {
+  showAddPopup.value = true;
+};
+const hideAddPopup = () => {
+  showAddPopup.value = false;
+};
+
+const openEditPopup = agent => {
+  showEditPopup.value = true;
+  currentAgent.value = agent;
+};
+const hideEditPopup = () => {
+  showEditPopup.value = false;
+};
+
+const openDeletePopup = agent => {
+  showDeletePopup.value = true;
+  currentAgent.value = agent;
+};
+const closeDeletePopup = () => {
+  showDeletePopup.value = false;
+};
+
+const deleteAgent = async id => {
+  try {
+    await store.dispatch('agents/delete', id);
+    showAlertMessage(t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    showAlertMessage(t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+  }
+};
+const confirmDeletion = () => {
+  loading.value[currentAgent.value.id] = true;
+  closeDeletePopup();
+  deleteAgent(currentAgent.value.id);
 };
 </script>
 
 <template>
-  <div class="flex-1 p-4 overflow-auto">
+  <SettingsLayout
+    :is-loading="uiFlags.isFetching"
+    :loading-message="$t('AGENT_MGMT.LOADING')"
+    :no-records-found="!agentList.length"
+    :no-records-message="$t('AGENT_MGMT.LIST.404')"
+  >
+    <template #header>
+      <BaseSettingsHeader
+        :title="$t('AGENT_MGMT.HEADER')"
+        :description="$t('AGENT_MGMT.DESCRIPTION')"
+        :link-text="$t('AGENT_MGMT.LEARN_MORE')"
+        feature-name="agents"
+      >
+        <template #actions>
           <woot-button
-      color-scheme="success"
+            class="button nice rounded-md"
-      class-names="button--fixed-top"
             icon="add-circle"
-      @click="openAddPopup()"
+            @click="openAddPopup"
           >
             {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
           </woot-button>
-
+        </template>
-    <!-- List Agents -->
+      </BaseSettingsHeader>
-    <div class="flex flex-row gap-4">
+    </template>
-      <div class="w-full lg:w-3/5">
+    <template #body>
-        <woot-loading-state
+      <table class="divide-y divide-slate-75 dark:divide-slate-700">
-          v-if="uiFlags.isFetching"
+        <tbody
-          :message="$t('AGENT_MGMT.LOADING')"
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-        />
+        >
-        <div v-else>
-          <p v-if="!agentList.length">
-            {{ $t('AGENT_MGMT.LIST.404') }}
-          </p>
-          <table v-else class="woot-table">
-            <tbody>
           <tr v-for="(agent, index) in agentList" :key="agent.email">
-                <!-- Gravtar Image -->
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
-                <td>
+              <div class="flex items-center flex-row gap-4">
                 <Thumbnail
                   :src="agent.thumbnail"
                   :username="agent.name"
                   size="40px"
                   :status="agent.availability_status"
                 />
-                </td>
+                <div>
-                <!-- Agent Name + Email -->
+                  <span class="block font-medium capitalize">
-                <td>
-                  <span class="agent-name">
                     {{ agent.name }}
                   </span>
                   <span>{{ agent.email }}</span>
+                </div>
+              </div>
             </td>
-                <!-- Agent Role + Verification Status -->
+
-                <td>
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
-                  <span class="agent-name">
+              <span class="block font-medium capitalize">
-                    {{
+                {{ $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`) }}
-                      $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`)
-                    }}
               </span>
+            </td>
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
               <span v-if="agent.confirmed">
                 {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
               </span>
@@ -178,9 +169,8 @@ export default {
                 {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
               </span>
             </td>
-                <!-- Actions -->
+            <td class="py-4">
-                <td>
+              <div class="flex justify-end gap-1">
-                  <div class="button-wrapper">
                 <woot-button
                   v-if="showEditAction(agent)"
                   v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
@@ -207,24 +197,12 @@ export default {
           </tr>
         </tbody>
       </table>
-        </div>
+    </template>
-      </div>
+
-      <div class="hidden w-1/3 lg:block">
-        <span
-          v-dompurify-html="
-            useInstallationName(
-              $t('AGENT_MGMT.SIDEBAR_TXT'),
-              globalConfig.installationName
-            )
-          "
-        />
-      </div>
-    </div>
-    <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
       <AddAgent :on-close="hideAddPopup" />
     </woot-modal>
-    <!-- Edit Agent -->
+
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <EditAgent
         v-if="showEditPopup"
@@ -236,7 +214,7 @@ export default {
         :on-close="hideEditPopup"
       />
     </woot-modal>
-    <!-- Delete Agent -->
+
     <woot-delete-modal
       :show.sync="showDeletePopup"
       :on-close="closeDeletePopup"
@@ -247,5 +225,5 @@ export default {
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
-  </div>
+  </SettingsLayout>
 </template>

app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js

@@ -1,12 +1,12 @@
 import { frontendURL } from '../../../../helper/URLHelper';
-const SettingsContent = () => import('../Wrapper.vue');
+const SettingsWrapper = () => import('../SettingsWrapper.vue');
 const AgentHome = () => import('./Index.vue');
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/agents'),
-      component: SettingsContent,
+      component: SettingsWrapper,
       props: {
         headerTitle: 'AGENT_MGMT.HEADER',
         icon: 'people',