Merge branch 'main' into improvement/organizations-heading

frontend/src/middleware/auth/auth-guard.js

@@ -12,7 +12,7 @@ function isGoingToIntegrationsPage(to) {
  * This middleware runs before rendering any route that has meta.auth = true
  *
  * It uses the PermissionChecker to validate if:
- * - User is authenticated, and both currentTenant & currentUser exist within our store (if not, redirects to /auth/signin)
+ * - User is authenticated, and both currentTenant & currentUser exist within our store (if not, redirects to /auth/signup)
  * - Email of that user is verified (if not, redirects to /auth/email-unverified)
  * - User is onboarded (if not, redirects to /onboard)
  * - User has permissions (if not, redirects to /auth/empty-permissions)
@@ -36,7 +36,7 @@ export default async function ({ to, store, router }) {
   );
 
   if (!permissionChecker.isAuthenticated) {
-    router.push({ path: '/auth/signin' });
+    router.push({ path: '/auth/signup' });
     return;
   }
 

frontend/src/modules/report/components/templates/report-template-filters.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="border-t border-gray-200">
-    <div
-      class="flex items-center gap-6 py-4 max-w-5xl mx-auto px-8"
-    >
+    <div class="flex items-center gap-6 py-4 max-w-5xl mx-auto px-8">
       <app-filter-list-item
         v-if="showPlatform"
         :filter="platform"
@@ -12,14 +10,9 @@
       >
         <template #button>
           <div class="relative">
-            <el-button
-              class="custom-btn"
-              @click="handleOpenPlatform"
-            >
+            <el-button class="custom-btn" @click="handleOpenPlatform">
               <div class="flex items-center gap-2">
-                <i class="ri-apps-2-line" /><span
-                  class="font-medium"
-                >Platforms:
+                <i class="ri-apps-2-line" /><span class="font-medium">Platforms:
                   <span class="font-normal text-gray-600">{{
                     platformLabel
                   }}</span></span>
@@ -33,7 +26,11 @@
         </template>
         <template #optionPrefix="{ item }">
           <img
-            v-if="item.value && platformOptions(item.value) && platformOptions(item.value).image"
+            v-if="
+              item.value
+                && platformOptions(item.value)
+                && platformOptions(item.value).image
+            "
             :src="platformOptions(item.value).image"
             :alt="platformOptions(item.value).name"
             class="w-4 h-4 mr-2"
@@ -42,10 +39,7 @@
         </template>
       </app-filter-list-item>
 
-      <div
-        v-if="showTeamMembers"
-        class="flex gap-2 items-center"
-      >
+      <div v-if="showTeamMembers" class="flex gap-2 items-center">
         <el-switch
           class="switch-filter !ml-0"
           :model-value="teamMembers"
@@ -55,10 +49,7 @@
         />
       </div>
 
-      <div
-        v-if="showTeamActivities"
-        class="flex gap-2 items-center"
-      >
+      <div v-if="showTeamActivities" class="flex gap-2 items-center">
         <el-switch
           class="switch-filter !ml-0"
           :model-value="teamActivities"
@@ -72,7 +63,10 @@
 </template>
 
 <script setup>
-import { computed, defineEmits, defineProps } from 'vue';
+import {
+  computed, defineEmits, defineProps,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import AppFilterListItem from '@/shared/filter/components/filter-list-item.vue';
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 
@@ -91,26 +85,28 @@ const props = defineProps({
   },
   teamMembers: {
     type: Boolean,
-    defaul: null,
+    default: null,
   },
   teamActivities: {
     type: Boolean,
-    defaul: null,
+    default: null,
   },
   showPlatform: {
     type: Boolean,
-    defaul: true,
+    default: true,
   },
   showTeamMembers: {
     type: Boolean,
-    defaul: true,
+    default: true,
   },
   showTeamActivities: {
     type: Boolean,
-    defaul: false,
+    default: false,
   },
 });
 
+const route = useRoute();
+const router = useRouter();
 const hasSelectedPlatform = computed(() => !!props.platform.value.length);
 const platformLabel = computed(() => {
   if (!hasSelectedPlatform.value) {
@@ -120,28 +116,90 @@ const platformLabel = computed(() => {
   return props.platform.value.map((v) => v.label).join(', ');
 });
 
+const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
+if (route.query.selectedPlatforms) {
+  const platformsValues = route.query.selectedPlatforms.split(',');
+  const platforms = platformsValues
+    .map((value) => {
+      const platform = platformOptions(value);
+      if (!platform) {
+        return null;
+      }
+
+      return {
+        value,
+        label: platform.name,
+        selected: false,
+      };
+    })
+    .filter((v) => !!v);
+
+  emit('update:platform', {
+    ...props.platform,
+    value: platforms,
+    expanded: false,
+    operator: null,
+    include: true,
+  });
+  emit('trackFilters');
+}
+
 const onPlatformChange = (newPlatform) => {
+  router.replace({
+    query: {
+      ...route.query,
+      selectedPlatforms: newPlatform.value.map((v) => v.value).join(','),
+    },
+  });
   emit('update:platform', newPlatform);
   emit('trackFilters');
 };
 const onPlatformReset = () => {
+  router.replace({
+    query: {
+      ...route.query,
+      selectedPlatforms: '',
+    },
+  });
   emit('reset');
   emit('trackFilters');
 };
+
+if (route.query.showTeamMembers === 'true') {
+  emit('update:teamMembers', true);
+  emit('trackFilters');
+}
+
 const onTeamMembersChange = (value) => {
+  router.replace({
+    query: {
+      ...route.query,
+      showTeamMembers: value,
+    },
+  });
   emit('update:teamMembers', value);
   emit('trackFilters');
 };
+
+if (route.query.showTeamActivities === 'true') {
+  emit('update:teamActivities', true);
+  emit('trackFilters');
+}
+
 const onTeamActivitiesChange = (value) => {
+  router.replace({
+    query: {
+      ...route.query,
+      showTeamActivities: value,
+    },
+  });
   emit('update:teamActivities', value);
   emit('trackFilters');
 };
 
 const handleOpenPlatform = () => {
   emit('open');
 };
-
-const platformOptions = (platform) => CrowdIntegrations.getConfig(platform);
 </script>
 
 <style lang="scss">

frontend/src/modules/widget/components/activity/widget-activities-leaderboard.vue

@@ -6,9 +6,7 @@
         class="flex grow justify-between items-center pb-5 border-b border-gray-100 mb-8"
       >
         <div class="flex gap-1">
-          <app-widget-title
-            :title="ACTIVITIES_LEADERBOARD_WIDGET.name"
-          />
+          <app-widget-title :title="ACTIVITIES_LEADERBOARD_WIDGET.name" />
         </div>
         <app-widget-period
           :template="ACTIVITIES_REPORT.nameAsId"
@@ -25,10 +23,7 @@
         :limit="10"
       >
         <template #button="{ showButton }">
-          <div
-            v-if="showButton"
-            class="flex justify-end"
-          >
+          <div v-if="showButton" class="flex justify-end">
             <el-button
               class="btn btn-link btn-link--primary mt-4 !h-8"
               @click="handleDrawerOpen"
@@ -61,12 +56,16 @@
 
 <script setup>
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { ref } from 'vue';
 import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
 import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vue';
 import AppWidgetCubeDrawer from '@/modules/widget/components/shared/widget-cube-drawer.vue';
-import ACTIVITIES_REPORT, { ACTIVITIES_LEADERBOARD_WIDGET } from '@/modules/report/templates/config/activities';
+import ACTIVITIES_REPORT, {
+  ACTIVITIES_LEADERBOARD_WIDGET,
+} from '@/modules/report/templates/config/activities';
 import AppWidgetActivitiesTypeList from '@/modules/widget/components/activity/widget-activities-type-list.vue';
+import { useRoute, useRouter } from 'vue-router';
 
 defineProps({
   filters: {
@@ -75,14 +74,27 @@ defineProps({
   },
 });
 
+const route = useRoute();
+const router = useRouter();
 const drawerExpanded = ref();
 const drawerTitle = ref('Leaderboard: Activities by type');
 
-const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
+const selectedPeriod = ref(
+  getSelectedPeriodFromLabel(
+    route.query.leaderboardActivitiesByTypePeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
 const drawerSelectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
 
 const onUpdatePeriod = (updatedPeriod) => {
   selectedPeriod.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      leaderboardActivitiesByTypePeriod: updatedPeriod.label,
+    },
+  });
 };
 
 const onDrawerUpdatePeriod = (updatedPeriod) => {

frontend/src/modules/widget/components/activity/widget-activities-platform.vue

@@ -6,9 +6,7 @@
         class="flex grow justify-between items-center pb-5 border-b border-gray-100 mb-8"
       >
         <div class="flex gap-1">
-          <app-widget-title
-            :title="ACTIVITIES_PLATFORM_WIDGET.name"
-          />
+          <app-widget-title :title="ACTIVITIES_PLATFORM_WIDGET.name" />
         </div>
         <app-widget-period
           :template="ACTIVITIES_REPORT.nameAsId"
@@ -19,11 +17,7 @@
         />
       </div>
 
-      <query-renderer
-        v-if="cubejsApi"
-        :cubejs-api="cubejsApi"
-        :query="query"
-      >
+      <query-renderer v-if="cubejsApi" :cubejs-api="cubejsApi" :query="query">
         <template #default="{ resultSet, loading }">
           <app-widget-activities-platform-content
             :loading="loading"
@@ -37,13 +31,17 @@
 
 <script setup>
 import { SEVEN_DAYS_PERIOD_FILTER } from '@/modules/widget/widget-constants';
+import { getSelectedPeriodFromLabel } from '@/modules/widget/widget-utility';
 import { computed, ref } from 'vue';
 import AppWidgetTitle from '@/modules/widget/components/shared/widget-title.vue';
 import AppWidgetPeriod from '@/modules/widget/components/shared/widget-period.vue';
 import { QueryRenderer } from '@cubejs-client/vue3';
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { LEADERBOARD_ACTIVITIES_TYPES_QUERY } from '@/modules/widget/widget-queries';
-import ACTIVITIES_REPORT, { ACTIVITIES_PLATFORM_WIDGET } from '@/modules/report/templates/config/activities';
+import ACTIVITIES_REPORT, {
+  ACTIVITIES_PLATFORM_WIDGET,
+} from '@/modules/report/templates/config/activities';
+import { useRoute, useRouter } from 'vue-router';
 import AppWidgetActivitiesPlatformContent from './widget-activities-platform-content.vue';
 
 const props = defineProps({
@@ -55,7 +53,14 @@ const props = defineProps({
 
 const { cubejsApi } = mapGetters('widget');
 
-const selectedPeriod = ref(SEVEN_DAYS_PERIOD_FILTER);
+const route = useRoute();
+const router = useRouter();
+const selectedPeriod = ref(
+  getSelectedPeriodFromLabel(
+    route.query.activitiesByPlatformPeriod,
+    SEVEN_DAYS_PERIOD_FILTER,
+  ),
+);
 
 const query = computed(() => LEADERBOARD_ACTIVITIES_TYPES_QUERY({
   period: selectedPeriod.value,
@@ -65,8 +70,13 @@ const query = computed(() => LEADERBOARD_ACTIVITIES_TYPES_QUERY({
 
 const onUpdatePeriod = (updatedPeriod) => {
   selectedPeriod.value = updatedPeriod;
+  router.replace({
+    query: {
+      ...route.query,
+      activitiesByPlatformPeriod: updatedPeriod.label,
+    },
+  });
 };
-
 </script>
 <script>
 export default {