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,230 +1,208 @@
-<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,
-  },
-  mixins: [globalConfigMixin],
-  data() {
-    return {
-      loading: {},
-      showAddPopup: false,
-      showDeletePopup: false,
-      showEditPopup: false,
-      agentAPI: {
-        message: '',
-      },
-      currentAgent: {},
-    };
-  },
-  computed: {
-    ...mapGetters({
-      agentList: 'agents/getAgents',
-      uiFlags: 'agents/getUIFlags',
-      currentUserId: 'getCurrentUserID',
-      globalConfig: 'globalConfig/get',
-    }),
-    deleteConfirmText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
-        this.currentAgent.name
-      }`;
-    },
-    deleteRejectText() {
-      return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${
-        this.currentAgent.name
-      }`;
-    },
-    deleteMessage() {
-      return ` ${this.currentAgent.name}?`;
-    },
-  },
-  mounted() {
-    this.$store.dispatch('agents/get');
-  },
-  methods: {
-    showEditAction(agent) {
-      return this.currentUserId !== agent.id;
-    },
-    showDeleteAction(agent) {
-      if (this.currentUserId === agent.id) {
-        return false;
-      }
 
-      if (!agent.confirmed) {
+const loading = ref({});
-        return true;
+const showAddPopup = ref(false);
-      }
+const showDeletePopup = ref(false);
+const showEditPopup = ref(false);
+const agentAPI = ref({ message: '' });
+const currentAgent = ref({});
 
-      if (agent.role === 'administrator') {
+const deleteConfirmText = computed(
-        return this.verifiedAdministrators().length !== 1;
+  () => `${t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${currentAgent.value.name}`
-      }
+);
-      return true;
+const deleteRejectText = computed(() => {
-    },
+  return `${t('AGENT_MGMT.DELETE.CONFIRM.NO')} ${currentAgent.value.name}`;
-    verifiedAdministrators() {
+});
-      return this.agentList.filter(
+const deleteMessage = computed(() => {
-        agent => agent.role === 'administrator' && agent.confirmed
+  return ` ${currentAgent.value.name}?`;
-      );
+});
-    },
-    // Edit Function
-    openAddPopup() {
-      this.showAddPopup = true;
-    },
-    hideAddPopup() {
-      this.showAddPopup = false;
-    },
 
-    // Edit Function
+const agentList = computed(() => getters['agents/getAgents'].value);
-    openEditPopup(agent) {
+const uiFlags = computed(() => getters['agents/getUIFlags'].value);
-      this.showEditPopup = true;
+const currentUserId = computed(() => getters.getCurrentUserID.value);
-      this.currentAgent = agent;
-    },
-    hideEditPopup() {
-      this.showEditPopup = false;
-    },
 
-    // Delete Function
+onMounted(() => {
-    openDeletePopup(agent) {
+  store.dispatch('agents/get');
-      this.showDeletePopup = true;
+});
-      this.currentAgent = agent;
+
-    },
+const verifiedAdministrators = computed(() => {
-    closeDeletePopup() {
+  return agentList.value.filter(
-      this.showDeletePopup = false;
+    agent => agent.role === 'administrator' && agent.confirmed
-    },
+  );
-    confirmDeletion() {
+});
-      this.loading[this.currentAgent.id] = true;
+
-      this.closeDeletePopup();
+const showEditAction = agent => {
-      this.deleteAgent(this.currentAgent.id);
+  return currentUserId.value !== agent.id;
-    },
+};
-    async deleteAgent(id) {
+
-      try {
+const showDeleteAction = agent => {
-        await this.$store.dispatch('agents/delete', id);
+  if (currentUserId.value === agent.id) {
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
+    return false;
-      } catch (error) {
+  }
-        this.showAlertMessage(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
+
-      }
+  if (!agent.confirmed) {
-    },
+    return true;
-    // Show SnackBar
+  }
-    showAlertMessage(message) {
+
-      // Reset loading, current selected agent
+  if (agent.role === 'administrator') {
-      this.loading[this.currentAgent.id] = false;
+    return verifiedAdministrators.value.length !== 1;
-      this.currentAgent = {};
+  }
-      // Show message
+  return true;
-      this.agentAPI.message = message;
+};
-      useAlert(message);
+const showAlertMessage = message => {
-    },
+  loading.value[currentAgent.value.id] = false;
-  },
+  currentAgent.value = {};
+  agentAPI.value.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
-    <woot-button
+    :is-loading="uiFlags.isFetching"
-      color-scheme="success"
+    :loading-message="$t('AGENT_MGMT.LOADING')"
-      class-names="button--fixed-top"
+    :no-records-found="!agentList.length"
-      icon="add-circle"
+    :no-records-message="$t('AGENT_MGMT.LIST.404')"
-      @click="openAddPopup()"
+  >
-    >
+    <template #header>
-      {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
+      <BaseSettingsHeader
-    </woot-button>
+        :title="$t('AGENT_MGMT.HEADER')"
-
+        :description="$t('AGENT_MGMT.DESCRIPTION')"
-    <!-- List Agents -->
+        :link-text="$t('AGENT_MGMT.LEARN_MORE')"
-    <div class="flex flex-row gap-4">
+        feature-name="agents"
-      <div class="w-full lg:w-3/5">
+      >
-        <woot-loading-state
+        <template #actions>
-          v-if="uiFlags.isFetching"
+          <woot-button
-          :message="$t('AGENT_MGMT.LOADING')"
+            class="button nice rounded-md"
-        />
+            icon="add-circle"
-        <div v-else>
+            @click="openAddPopup"
-          <p v-if="!agentList.length">
+          >
-            {{ $t('AGENT_MGMT.LIST.404') }}
+            {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
-          </p>
+          </woot-button>
-          <table v-else class="woot-table">
+        </template>
-            <tbody>
+      </BaseSettingsHeader>
-              <tr v-for="(agent, index) in agentList" :key="agent.email">
+    </template>
-                <!-- Gravtar Image -->
+    <template #body>
-                <td>
+      <table class="divide-y divide-slate-75 dark:divide-slate-700">
-                  <Thumbnail
+        <tbody
-                    :src="agent.thumbnail"
+          class="divide-y divide-slate-50 dark:divide-slate-800 text-slate-700 dark:text-slate-300"
-                    :username="agent.name"
+        >
-                    size="40px"
+          <tr v-for="(agent, index) in agentList" :key="agent.email">
-                    :status="agent.availability_status"
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
-                  />
+              <div class="flex items-center flex-row gap-4">
-                </td>
+                <Thumbnail
-                <!-- Agent Name + Email -->
+                  :src="agent.thumbnail"
-                <td>
+                  :username="agent.name"
-                  <span class="agent-name">
+                  size="40px"
+                  :status="agent.availability_status"
+                />
+                <div>
+                  <span class="block font-medium capitalize">
                     {{ agent.name }}
                   </span>
                   <span>{{ agent.email }}</span>
-                </td>
+                </div>
-                <!-- Agent Role + Verification Status -->
+              </div>
-                <td>
+            </td>
-                  <span class="agent-name">
+
-                    {{
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
-                      $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`)
+              <span class="block font-medium capitalize">
-                    }}
+                {{ $t(`AGENT_MGMT.AGENT_TYPES.${agent.role.toUpperCase()}`) }}
-                  </span>
+              </span>
-                  <span v-if="agent.confirmed">
+            </td>
-                    {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
+            <td class="py-4 ltr:pr-4 rtl:pl-4">
-                  </span>
+              <span v-if="agent.confirmed">
-                  <span v-if="!agent.confirmed">
+                {{ $t('AGENT_MGMT.LIST.VERIFIED') }}
-                    {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
+              </span>
-                  </span>
+              <span v-if="!agent.confirmed">
-                </td>
+                {{ $t('AGENT_MGMT.LIST.VERIFICATION_PENDING') }}
-                <!-- Actions -->
+              </span>
-                <td>
+            </td>
-                  <div class="button-wrapper">
+            <td class="py-4">
-                    <woot-button
+              <div class="flex justify-end gap-1">
-                      v-if="showEditAction(agent)"
+                <woot-button
-                      v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
+                  v-if="showEditAction(agent)"
-                      variant="smooth"
+                  v-tooltip.top="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
-                      size="tiny"
+                  variant="smooth"
-                      color-scheme="secondary"
+                  size="tiny"
-                      icon="edit"
+                  color-scheme="secondary"
-                      class-names="grey-btn"
+                  icon="edit"
-                      @click="openEditPopup(agent)"
+                  class-names="grey-btn"
-                    />
+                  @click="openEditPopup(agent)"
-                    <woot-button
+                />
-                      v-if="showDeleteAction(agent)"
+                <woot-button
-                      v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
+                  v-if="showDeleteAction(agent)"
-                      variant="smooth"
+                  v-tooltip.top="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
-                      color-scheme="alert"
+                  variant="smooth"
-                      size="tiny"
+                  color-scheme="alert"
-                      icon="dismiss-circle"
+                  size="tiny"
-                      class-names="grey-btn"
+                  icon="dismiss-circle"
-                      :is-loading="loading[agent.id]"
+                  class-names="grey-btn"
-                      @click="openDeletePopup(agent, index)"
+                  :is-loading="loading[agent.id]"
-                    />
+                  @click="openDeletePopup(agent, index)"
-                  </div>
+                />
-                </td>
+              </div>
-              </tr>
+            </td>
-            </tbody>
+          </tr>
-          </table>
+        </tbody>
-        </div>
+      </table>
-      </div>
+    </template>
-      <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',