ui: add metricOf selector

frontend/app/components/Dashboard/components/WidgetOptions.tsx

@@ -1,12 +1,28 @@
 import React from 'react';
-import { FUNNEL, HEATMAP, TABLE, TIMESERIES, USER_PATH } from "App/constants/card";
-import { Select, Space, Switch, Dropdown, Button} from 'antd';
+import {
+  FUNNEL,
+  HEATMAP,
+  TABLE,
+  TIMESERIES,
+  USER_PATH,
+} from 'App/constants/card';
+import { Select, Space, Switch, Dropdown, Button } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 import { useStore } from 'App/mstore';
 import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker';
 import { FilterKey } from 'Types/filter/filterType';
 import { observer } from 'mobx-react-lite';
-import { ChartLine, ChartArea, ChartColumn, ChartBar, ChartPie, Table, Hash } from 'lucide-react'
+import {
+  ChartLine,
+  ChartArea,
+  ChartColumn,
+  ChartBar,
+  ChartPie,
+  Table,
+  Hash,
+  Users,
+  Library,
+} from 'lucide-react';
 
 function WidgetOptions() {
   const { metricStore } = useStore();
@@ -16,26 +32,8 @@ function WidgetOptions() {
     metric.update({ metricFormat: value });
   };
 
- const chartTypes = {
-    lineChart: 'Chart',
-    barChart: 'Column',
-    areaChart: 'Area',
-    pieChart: 'Pie',
-    progressChart: 'Bar',
-    table: 'Table',
-   metric: 'Metric',
-  }
-  const chartIcons = {
-    lineChart: <ChartLine size={16} strokeWidth={1} />,
-    barChart: <ChartColumn size={16} strokeWidth={1} />,
-    areaChart: <ChartArea size={16} strokeWidth={1} />,
-    pieChart: <ChartPie size={16} strokeWidth={1} />,
-    progressChart: <ChartBar size={16} strokeWidth={1} />,
-    table: <Table size={16} strokeWidth={1} />,
-    metric: <Hash size={16} strokeWidth={1} />,
-  }
   return (
-    <div>
+    <div className={'flex items-center gap-2'}>
       {metric.metricType === USER_PATH && (
         <a
           href="#"
@@ -52,28 +50,10 @@ function WidgetOptions() {
       )}
 
       {metric.metricType === TIMESERIES ? (
-        <Dropdown
-          menu={{
-            items: Object.entries(chartTypes).map(([key, name]) => ({
-              key,
-              label: <div className={'flex items-center gap-2'}>
-                {chartIcons[key]}
-                <div>{name}</div>
-              </div>,
-            })),
-            onClick: ({ key }: any) => {
-              metric.updateKey('viewType', key);
-            },
-          }}
-        >
-          <Button>
-            <Space>
-              {chartIcons[metric.viewType]}
-              <div>{chartTypes[metric.viewType]}</div>
-              <DownOutlined />
-            </Space>
-          </Button>
-        </Dropdown>
+        <>
+          <SeriesTypeOptions metric={metric} />
+          <WidgetViewTypeOptions metric={metric} />
+        </>
       ) : null}
       {(metric.metricType === FUNNEL || metric.metricType === TABLE) &&
         metric.metricOf != FilterKey.USERID &&
@@ -94,4 +74,89 @@ function WidgetOptions() {
   );
 }
 
+const SeriesTypeOptions = observer(({ metric }: { metric: any }) => {
+  const items = {
+    sessionCount: 'Total Sessions',
+    userCount: 'Unique Users',
+  }
+  const chartIcons = {
+    sessionCount: <Library size={16} strokeWidth={1} />,
+    userCount: <Users size={16} strokeWidth={1} />,
+  } as const;
+
+  return (
+    <Dropdown
+      menu={{
+        items: Object.entries(items).map(([key, name]) => ({
+          key,
+          label: (
+            <div className={'flex items-center gap-2'}>
+              {chartIcons[key]}
+              <div>{name}</div>
+            </div>
+          ),
+        })),
+        onClick: ({ key }: any) => {
+          metric.updateKey('metricOf', key);
+        },
+      }}
+    >
+      <Button>
+        <Space>
+          {chartIcons[metric.metricOf]}
+          <div>{items[metric.metricOf] || 'Total Sessions'}</div>
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+  );
+})
+
+const WidgetViewTypeOptions = observer(({ metric }: { metric: any }) => {
+  const chartTypes = {
+    lineChart: 'Chart',
+    barChart: 'Column',
+    areaChart: 'Area',
+    pieChart: 'Pie',
+    progressChart: 'Bar',
+    table: 'Table',
+    metric: 'Metric',
+  };
+  const chartIcons = {
+    lineChart: <ChartLine size={16} strokeWidth={1} />,
+    barChart: <ChartColumn size={16} strokeWidth={1} />,
+    areaChart: <ChartArea size={16} strokeWidth={1} />,
+    pieChart: <ChartPie size={16} strokeWidth={1} />,
+    progressChart: <ChartBar size={16} strokeWidth={1} />,
+    table: <Table size={16} strokeWidth={1} />,
+    metric: <Hash size={16} strokeWidth={1} />,
+  };
+  return (
+    <Dropdown
+      menu={{
+        items: Object.entries(chartTypes).map(([key, name]) => ({
+          key,
+          label: (
+            <div className={'flex items-center gap-2'}>
+              {chartIcons[key]}
+              <div>{name}</div>
+            </div>
+          ),
+        })),
+        onClick: ({ key }: any) => {
+          metric.updateKey('viewType', key);
+        },
+      }}
+    >
+      <Button>
+        <Space>
+          {chartIcons[metric.viewType]}
+          <div>{chartTypes[metric.viewType]}</div>
+          <DownOutlined />
+        </Space>
+      </Button>
+    </Dropdown>
+  );
+})
+
 export default observer(WidgetOptions);

frontend/app/components/hocs/withPermissions.js

@@ -1,7 +1,7 @@
 import { useStore } from "App/mstore";
 import React from 'react';
 import { NoPermission, NoSessionPermission } from 'UI';
-
+import { observer } from 'mobx-react-lite'
 
 
 export default (requiredPermissions, className, isReplay = false, andEd = true) => (BaseComponent) => {
@@ -14,6 +14,8 @@ export default (requiredPermissions, className, isReplay = false, andEd = true)
       requiredPermissions.some((permission) => permissions.includes(permission)
       );
 
+    console.log(isEnterprise, hasPermission, userStore.account, userStore.authStore)
+
     return !isEnterprise || hasPermission ? (
       <BaseComponent {...props} />
     ) : (
@@ -26,5 +28,5 @@ export default (requiredPermissions, className, isReplay = false, andEd = true)
       </div>
     );
   }
-  return WrapperClass;
+  return observer(WrapperClass);
 }

frontend/app/mstore/userStore.ts

@@ -618,7 +618,7 @@ type AuthDetails = {
   sso: string | null;
   ssoProvider: string | null;
   enforceSSO: boolean | null;
-  edition: 'foss' | 'ee' | 'msaas';
+  edition?: 'foss' | 'ee' | 'msaas';
 };
 
 class AuthStore {
@@ -640,10 +640,13 @@ class AuthStore {
         {
           key: 'authDetails',
           serialize: (ad) => {
+            delete ad['edition']
             return Object.keys(ad).length > 0 ? JSON.stringify(ad) : JSON.stringify({});
           },
           deserialize: (json) => {
-            return JSON.parse(json);
+            const ad = JSON.parse(json)
+            delete ad['edition']
+            return ad;
           }
         }
       ],