Fix displaying of activity types (#769)

Author: gaspergrom

frontend/package-lock.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@cubejs-client/core": "^0.31.63",
     "@cubejs-client/vue3": "^0.31.63",
-    "@formbricks/js": "^0.1.8",
+    "@formbricks/js": "^0.1.10",
     "@loomhq/loom-embed": "^1.5.0",
     "@nangohq/frontend": "^0.9.0",
     "@octokit/core": "^3.6.0",

frontend/package.json

@@ -190,7 +190,7 @@ const en = {
         activities: 'Activities',
         activityCount: '# of activities',
         numberOfOpenSourceContributions: '# of open source contributions',
-        activityTypes: 'Activity Type',
+        activityTypes: 'Activity type',
         location: 'Location',
         organization: 'Organization',
         organizations: 'Organizations',

frontend/src/i18n/en.js

@@ -54,18 +54,22 @@
           >
             <div class="flex items-center">
               <img
+                v-if="getPlatformDetails(plat)"
                 class="w-4 h-4 mr-3"
                 :src="getPlatformDetails(plat).image"
                 :alt="getPlatformDetails(plat).name"
               />
-              <p class="text-xs leading-5 activity-type">
-                <app-i18n
-                  :code="`entities.activity.${plat}.${type}`"
-                />
+              <i v-else class="ri-radar-line text-base text-gray-400 mr-3" />
+              <p v-if="typeNames?.[plat]?.[type]?.display" class="text-xs leading-5 activity-type">
+                {{ typeNames?.[plat]?.[type]?.display?.short }}
               </p>
+              <app-i18n
+                v-else-if="getPlatformDetails(plat)"
+                :code="`entities.activity.${plat}.${type}`"
+              />
             </div>
             <p class="text-2xs text-gray-400">
-              {{ total }} activities ・
+              {{ pluralize('activity', total, true) }} ・
               {{
                 Math.round(
                   (total
@@ -104,8 +108,32 @@ import { CrowdIntegrations } from '@/integrations/integrations-config';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import AppCubeRender from '@/shared/cube/cube-render.vue';
 import AppLoading from '@/shared/loading/loading-placeholder.vue';
+import { useActivityTypeStore } from '@/modules/activity/store/type';
+import { storeToRefs } from 'pinia';
+import { computed, watch } from 'vue';
+import pluralize from 'pluralize';
 
 const { period, platform } = mapGetters('dashboard');
+const { currentTenant } = mapGetters('auth');
+
+const activityTypeStore = useActivityTypeStore();
+const { types } = storeToRefs(activityTypeStore);
+const { setTypes } = activityTypeStore;
+
+const typeNames = computed(() => ({
+  ...types.value.default,
+  ...types.value.custom,
+}));
+
+watch(
+  () => currentTenant,
+  (tenant) => {
+    if (tenant.value.settings.length > 0) {
+      setTypes(tenant.value.settings[0].activityTypes);
+    }
+  },
+  { immediate: true, deep: true },
+);
 
 const compileData = (resultSet) => {
   const pivot = resultSet.chartPivot();

frontend/src/modules/dashboard/components/activity/dashboard-activity-types.vue

@@ -368,7 +368,7 @@
 
 <script setup>
 import { useStore } from 'vuex';
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { RouterLink, useLink } from 'vue-router';
 import { SettingsPermissions } from '@/modules/settings/settings-permissions';
 import { ReportPermissions } from '@/modules/report/report-permissions';
@@ -381,21 +381,32 @@ import config from '@/config';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { TaskPermissions } from '@/modules/task/task-permissions';
 import formbricks from '@/plugins/formbricks';
+import { useActivityTypeStore } from '@/modules/activity/store/type';
 import AppWorkspaceDropdown from './workspace-dropdown.vue';
 import AppSupportDropdown from './support-dropdown.vue';
 import AppAccountDropdown from './account-dropdown.vue';
 
 const store = useStore();
+const { currentTenant } = mapGetters('auth');
+const { setTypes } = useActivityTypeStore();
+
+watch(
+  () => currentTenant,
+  (tenant) => {
+    if (tenant.value.settings.length > 0) {
+      setTypes(tenant.value.settings[0].activityTypes);
+    }
+  },
+  { immediate: true, deep: true },
+);
+
 const { route } = useLink(RouterLink.props);
 const isCollapsed = computed(
   () => store.getters['layout/menuCollapsed'],
 );
 const currentUser = computed(
   () => store.getters['auth/currentUser'],
 );
-const currentTenant = computed(
-  () => store.getters['auth/currentTenant'],
-);
 
 function toggleMenu() {
   store.dispatch('layout/toggleMenu');

frontend/src/modules/layout/components/menu.vue

@@ -122,7 +122,6 @@ const fields = {
     {
       required: true,
       filterable: true,
-      fromMembers: true,
     },
   ),
   engagementLevel: new MemberEngagementLevelField(

frontend/src/modules/member/member-model.js

@@ -135,7 +135,7 @@ const includeModel = computed({
 });
 
 const additionalOptions = computed(() => {
-  if (props.label === 'Activity type') {
+  if (props.label === 'Activity type' && types.value?.custom) {
     return [
       {
         label: reactive({
@@ -147,7 +147,7 @@ const additionalOptions = computed(() => {
           .map(([, platformTypes]) => Object.entries(platformTypes))
           .flat()
           .map(([type, display]) => ({
-            label: display.short,
+            label: display.display.short,
             value: type,
           })),
       },