feat: Display Account context in the UI (#4069)

2022-02-25 16:36:36 +05:30 · 2022-02-25 16:36:36 +05:30 · cc74bebc0f
commit cc74bebc0f
parent 2c8a3ef3b2
13 changed files with 138 additions and 6 deletions
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@ -27,7 +27,9 @@ class DashboardController < ActionController::Base
      'ANALYTICS_TOKEN',
      'ANALYTICS_HOST',
      'DIRECT_UPLOADS_ENABLED',
-      'HCAPTCHA_SITE_KEY'
+      'HCAPTCHA_SITE_KEY',
+      'LOGOUT_REDIRECT_LINK',
+      'DISABLE_USER_PROFILE_UPDATE'
    ).merge(app_config)
  end

--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@ -54,3 +54,9 @@
 .text-y-800 {
  color: var(--y-800);
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@ -0,0 +1,36 @@
+<template>
+  <div v-if="showShowCurrentAccountContext" class="account-context--group">
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p class="account-context--name text-ellipsis">
+      {{ account.name }}
+    </p>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  computed: {
+    ...mapGetters({
+      account: 'getCurrentAccount',
+      userAccounts: 'getUserAccounts',
+    }),
+    showShowCurrentAccountContext() {
+      return this.userAccounts.length > 1 && this.account.name;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.account-context--group {
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+  font-size: var(--font-size-mini);
+  padding: var(--space-small);
+  margin-bottom: var(--space-small);
+
+  .account-context--name {
+    font-weight: var(--font-weight-medium);
+    margin-bottom: 0;
+  }
+}
+</style>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@ -1,5 +1,6 @@
 <template>
  <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
+    <account-context />
    <transition-group name="menu-list" tag="ul" class="menu vertical">
      <secondary-nav-item
        v-for="menuItem in accessibleMenuItems"
@ -18,9 +19,11 @@
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
+import AccountContext from './AccountContext.vue';

 export default {
  components: {
+    AccountContext,
    SecondaryNavItem,
  },
  props: {
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@ -65,7 +65,7 @@
        </div>
        <div class="features-item">
          <h2 class="block-title">
-            <span class="emoji">🏷</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
+            <span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
          </h2>
          <p class="intro-body">
            {{ $t('ONBOARDING.LABELS.DESCRIPTION') }}
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@ -142,6 +142,7 @@
    }
  },
  "SIDEBAR": {
+    "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
    "CONVERSATIONS": "Conversations",
    "ALL_CONVERSATIONS": "All Conversations",
    "MENTIONED_CONVERSATIONS": "Mentions",
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@ -48,7 +48,10 @@
              @input="$v.displayName.$touch"
            />
          </label>
-          <label :class="{ error: $v.email.$error }">
+          <label
+            v-if="!globalConfig.disableUserProfileUpdate"
+            :class="{ error: $v.email.$error }"
+          >
            {{ $t('PROFILE_SETTINGS.FORM.EMAIL.LABEL') }}
            <input
              v-model.trim="email"
@ -67,7 +70,7 @@
      </div>
    </form>
    <message-signature />
-    <change-password />
+    <change-password v-if="!globalConfig.disableUserProfileUpdate" />
    <notification-settings />
    <div class="profile--settings--row row">
      <div class="columns small-3">
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/app/javascript/dashboard/routes/login/Login.vue
@ -50,7 +50,7 @@
          </div>
        </form>
        <div class="column text-center sigin__footer">
-          <p>
+          <p v-if="!globalConfig.disableUserProfileUpdate">
            <router-link to="auth/reset/password">
              {{ $t('LOGIN.FORGOT_PASSWORD') }}
            </router-link>
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@ -71,6 +71,19 @@ export const getters = {

    return messageSignature || '';
  },
+
+  getCurrentAccount(_state) {
+    const { accounts = [] } = _state.currentUser;
+    const [currentAccount = {}] = accounts.filter(
+      account => account.id === _state.currentAccountId
+    );
+    return currentAccount || {};
+  },
+
+  getUserAccounts(_state) {
+    const { accounts = [] } = _state.currentUser;
+    return accounts;
+  },
 };

 // actions
--- a/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/auth/getters.spec.js
@ -53,4 +53,60 @@ describe('#getters', () => {
      ).toEqual('');
    });
  });
+
+  describe('#getCurrentAccount', () => {
+    it('returns correct values', () => {
+      expect(
+        getters.getCurrentAccount({
+          currentUser: {},
+          currentAccountId: 1,
+        })
+      ).toEqual({});
+
+      expect(
+        getters.getCurrentAccount({
+          currentUser: {
+            accounts: [
+              {
+                name: 'Chatwoot',
+                id: 1,
+              },
+            ],
+          },
+          currentAccountId: 1,
+        })
+      ).toEqual({
+        name: 'Chatwoot',
+        id: 1,
+      });
+    });
+  });
+
+  describe('#getUserAccounts', () => {
+    it('returns correct values', () => {
+      expect(
+        getters.getUserAccounts({
+          currentUser: {},
+        })
+      ).toEqual([]);
+
+      expect(
+        getters.getUserAccounts({
+          currentUser: {
+            accounts: [
+              {
+                name: 'Chatwoot',
+                id: 1,
+              },
+            ],
+          },
+        })
+      ).toEqual([
+        {
+          name: 'Chatwoot',
+          id: 1,
+        },
+      ]);
+    });
+  });
 });
--- a/app/javascript/dashboard/store/utils/api.js
+++ b/app/javascript/dashboard/store/utils/api.js
@ -44,5 +44,9 @@ export const clearCookiesOnLogout = () => {

  Cookies.remove('auth_data');
  Cookies.remove('user');
-  window.location = frontendURL('login');
+
+  const globalConfig = window.globalConfig || {};
+  const logoutRedirectLink =
+    globalConfig.LOGOUT_REDIRECT_LINK || frontendURL('login');
+  window.location = logoutRedirectLink;
 };
--- a/app/javascript/shared/store/globalConfig.js
+++ b/app/javascript/shared/store/globalConfig.js
@ -14,6 +14,7 @@ const {
  PRIVACY_URL: privacyURL,
  TERMS_URL: termsURL,
  WIDGET_BRAND_URL: widgetBrandURL,
+  DISABLE_USER_PROFILE_UPDATE: disableUserProfileUpdate,
 } = window.globalConfig || {};

 const state = {
@ -24,6 +25,7 @@ const state = {
  chatwootInboxToken,
  createNewAccountFromDashboard,
  directUploadsEnabled: directUploadsEnabled === 'true',
+  disableUserProfileUpdate: disableUserProfileUpdate === 'true',
  displayManifest,
  hCaptchaSiteKey,
  installationName,
--- a/config/installation_config.yml
+++ b/config/installation_config.yml
@ -53,3 +53,9 @@
 - name: HCAPTCHA_SERVER_KEY
  value:
  locked: false
+- name: LOGOUT_REDIRECT_LINK
+  value: /app/login
+  locked: false
+- name: DISABLE_USER_PROFILE_UPDATE
+  value: false
+  locked: false