From 2a177a9a3480f170f132063610871ab6428dd292 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 23 Jan 2023 15:17:03 +0100
Subject: [PATCH] change(ui) - card option disable ee, card type text changes

---
 .../BreakdownOfLoadedResources.tsx            |   2 +-
 .../PredefinedWidgets/CPULoad/CPULoad.tsx     |   2 +-
 .../MetricTypeDropdown/MetricTypeDropdown.tsx |  34 ++++--
 .../CustomDropdownOption.tsx                  |  44 +++----
 frontend/app/constants/card.ts                | 110 +++++++-----------
 5 files changed, 94 insertions(+), 98 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
index 35cd05063..f28f81fff 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
@@ -19,7 +19,7 @@ function BreakdownOfLoadedResources(props: Props) {
         <NoContent
           size="small"
           title="No data available"
-          show={ metric.data.chart.length === 0 }
+          show={ metric.data.chart && metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
               <BarChart
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
index 2344de348..ec1aaee92 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
@@ -20,7 +20,7 @@ function CPULoad(props: Props) {
         <NoContent
           size="small"
           title="No data available"
-          show={ metric.data.chart.length === 0 }
+          show={ metric.data.chart && metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
index c85389529..060c9c580 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DROPDOWN_OPTIONS, Option } from 'App/constants/card';
+import { DROPDOWN_OPTIONS, INSIGHTS, Option } from 'App/constants/card';
 import Select from 'Shared/Select';
 import { components } from 'react-select';
 import CustomDropdownOption from 'Shared/CustomDropdownOption';
@@ -7,25 +7,34 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
 import { Icon } from 'UI';
-interface Options {
-  label: string;
-  icon: string;
-  value: string;
-  description: string;
-}
+import { connect } from 'react-redux';
 
 interface Props {
   query: Record<string, (key: string) => any>;
   onSelect: (arg: any) => void;
+  isEnterprise?: boolean;
 }
 function MetricTypeDropdown(props: Props) {
+  const { isEnterprise } = props;
   const { metricStore } = useStore();
   const metric: any = metricStore.instance;
 
+  const options = React.useMemo(() => {
+    return DROPDOWN_OPTIONS.map((option: any) => {
+      return {
+        ...option,
+        disabled: !isEnterprise && option.value === INSIGHTS,
+      };
+    });
+  }, []);
+
   React.useEffect(() => {
     const queryCardType = props.query.get('type');
-    if (queryCardType && DROPDOWN_OPTIONS.length > 0 && metric.metricType) {
-      const type: Option = DROPDOWN_OPTIONS.find((i) => i.value === queryCardType) as Option;
+    if (queryCardType && options.length > 0 && metric.metricType) {
+      const type: Option = options.find((i) => i.value === queryCardType) as Option;
+      if (type.disabled) {
+        return;
+      }
       setTimeout(() => onChange(type.value), 0);
     }
   }, []);
@@ -38,7 +47,8 @@ function MetricTypeDropdown(props: Props) {
     <Select
       name="metricType"
       placeholder="Select Card Type"
-      options={DROPDOWN_OPTIONS}
+      options={options}
+      isOptionDisabled={(option: Option) => option.disabled}
       value={
         DROPDOWN_OPTIONS.find((i: any) => i.value === metric.metricType) || DROPDOWN_OPTIONS[0]
       }
@@ -73,4 +83,6 @@ function MetricTypeDropdown(props: Props) {
   );
 }
 
-export default withLocationHandlers()(observer(MetricTypeDropdown));
+export default connect((state: any) => ({
+  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+}))(withLocationHandlers()(observer(MetricTypeDropdown)));
diff --git a/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx b/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
index 4d8c6d2ad..ce25bb996 100644
--- a/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
+++ b/frontend/app/components/shared/CustomDropdownOption/CustomDropdownOption.tsx
@@ -1,36 +1,40 @@
 import React from 'react';
 import { components, OptionProps } from 'react-select';
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import cn from 'classnames';
 
 export interface Props extends OptionProps {
   icon?: string;
   label: string;
   description: string;
+  disabled?: boolean;
 }
 function CustomDropdownOption(props: Props) {
-  const { icon = '', label, description, isSelected, isFocused } = props;
+  const { icon = '', label, description, isSelected, isFocused, disabled } = props;
   return (
     <components.Option {...props} className="!p-0 mb-2">
-      <div
-        className={cn(
-          'group p-2 flex item-start border border-transparent rounded hover:border-teal hover:!bg-active-blue !leading-0'
-        )}
-      >
-        {icon && (
-          <Icon
-            // @ts-ignore
-            name={icon}
-            className="pt-2 mr-3"
-            size={18}
-            color={isSelected || isFocused ? 'teal' : 'gray-dark'}
-          />
-        )}
-        <div className={cn('flex flex-col', { '!color-teal': isFocused || isSelected })}>
-          <div className="font-medium leading-0">{label}</div>
-          <div className="text-sm color-gray-dark">{description}</div>
+      <Tooltip disabled={!disabled} title="This feature requires an enterprise license." delay={0}>
+        <div
+          className={cn(
+            'group p-2 flex item-start border border-transparent rounded hover:border-teal hover:!bg-active-blue !leading-0',
+            { 'opacity-30': disabled }
+          )}
+        >
+          {icon && (
+            <Icon
+              // @ts-ignore
+              name={icon}
+              className="pt-2 mr-3"
+              size={18}
+              color={isSelected || isFocused ? 'teal' : 'gray-dark'}
+            />
+          )}
+          <div className={cn('flex flex-col', { '!color-teal': isFocused || isSelected })}>
+            <div className="font-medium leading-0">{label}</div>
+            <div className="text-sm color-gray-dark">{description}</div>
+          </div>
         </div>
-      </div>
+      </Tooltip>
     </components.Option>
   );
 }
diff --git a/frontend/app/constants/card.ts b/frontend/app/constants/card.ts
index 9c520c740..31c668eb2 100644
--- a/frontend/app/constants/card.ts
+++ b/frontend/app/constants/card.ts
@@ -8,6 +8,7 @@ export interface CardType {
   description: string;
   slug: string;
   subTypes?: CardType[];
+  disabled?: boolean;
 }
 
 export const LIBRARY = 'library';
@@ -29,6 +30,7 @@ export interface Option {
   icon: string;
   value: string;
   description: string;
+  disabled?: boolean;
 }
 
 export const TYPES: CardType[] = [
@@ -41,21 +43,21 @@ export const TYPES: CardType[] = [
   {
     title: 'Clickmap',
     icon: 'puzzle-piece',
-    description: 'Track the features that are being used the most.',
+    description: 'See where users click and where they get frustrated.',
     slug: CLICKMAP,
     subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
   },
   {
     title: 'Timeseries',
     icon: 'graph-up',
-    description: 'Trend of sessions count in over the time.',
+    description: 'Combine captured events and filters to track trends over time.',
     slug: TIMESERIES,
     subTypes: [{ title: 'Session Count', slug: 'sessionCount', description: '' }],
   },
   {
     title: 'Table',
     icon: 'list-alt',
-    description: 'See list of Users, Sessions, Errors, Issues, etc.,',
+    description: 'Create custom tables of users, sessions, errors, issues and more.',
     slug: TABLE,
     subTypes: [
       { title: 'Users', slug: FilterKey.USERID, description: '' },
@@ -71,21 +73,21 @@ export const TYPES: CardType[] = [
   {
     title: 'Funnel',
     icon: 'funnel',
-    description: 'Uncover the issues impacting user journeys.',
+    description: 'Find out where users are dropping and understand why.',
     slug: FUNNEL,
   },
   {
-    title: 'Errors Tracking',
+    title: 'Error Tracking',
     icon: 'exclamation-circle',
-    description: 'Discover user journeys between 2 points.',
+    description: 'Track API errors across domains and origins.',
     slug: ERRORS,
     subTypes: [
-      { title: 'Resources by Party', slug: FilterKey.RESOURCES_BY_PARTY, description: '' },
-      { title: 'Errors per Domains', slug: FilterKey.ERRORS_PER_DOMAINS, description: '' },
-      { title: 'Errors per type', slug: FilterKey.ERRORS_PER_TYPE, description: '' },
-      { title: 'Calls Errors', slug: FilterKey.CALLS_ERRORS, description: '' },
-      { title: 'Domains Errors 4xx', slug: FilterKey.DOMAINS_ERRORS_4XX, description: '' },
-      { title: 'Domains Errors 5xx', slug: FilterKey.DOMAINS_ERRORS_5XX, description: '' },
+      { title: 'Errors by Origin', slug: FilterKey.RESOURCES_BY_PARTY, description: '' },
+      { title: 'Errors per Domain', slug: FilterKey.ERRORS_PER_DOMAINS, description: '' },
+      { title: 'Errors by type', slug: FilterKey.ERRORS_PER_TYPE, description: '' },
+      { title: 'Calls with Errors', slug: FilterKey.CALLS_ERRORS, description: '' },
+      { title: 'Top 4xx Domains', slug: FilterKey.DOMAINS_ERRORS_4XX, description: '' },
+      { title: 'Top 5xx Domains', slug: FilterKey.DOMAINS_ERRORS_5XX, description: '' },
       {
         title: 'Impacted Sessions by JS Errors',
         slug: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
@@ -94,19 +96,19 @@ export const TYPES: CardType[] = [
     ],
   },
   {
-    title: 'Performance Monitoring',
+    title: 'Performance Tracking',
     icon: 'speedometer2',
-    description: 'Retention graph of users / features over a period of time.',
+    description: 'Uncover slowdowns and monitor CPU and memory consumption.',
     slug: PERFORMANCE,
     subTypes: [
-      { title: 'CPU', slug: FilterKey.CPU, description: '' },
+      { title: 'CPU Load', slug: FilterKey.CPU, description: '' },
       { title: 'Crashes', slug: FilterKey.CRASHES, description: '' },
-      { title: 'FPS', slug: FilterKey.FPS, description: '' },
-      { title: 'Pages Dom Build Time', slug: FilterKey.PAGES_DOM_BUILD_TIME, description: '' },
+      { title: 'Frame Rate', slug: FilterKey.FPS, description: '' },
+      { title: 'DOM Building Time', slug: FilterKey.PAGES_DOM_BUILD_TIME, description: '' },
       { title: 'Memory Consumption', slug: FilterKey.MEMORY_CONSUMPTION, description: '' },
-      { title: 'Pages Response Time', slug: FilterKey.PAGES_RESPONSE_TIME, description: '' },
+      { title: 'Page Response Time', slug: FilterKey.PAGES_RESPONSE_TIME, description: '' },
       {
-        title: 'Pages Response Time Distribution',
+        title: 'Page Response Time Distribution',
         slug: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
         description: '',
       },
@@ -117,10 +119,10 @@ export const TYPES: CardType[] = [
       },
       { title: 'Sessions per Browser', slug: FilterKey.SESSIONS_PER_BROWSER, description: '' },
       { title: 'Slowest Domains', slug: FilterKey.SLOWEST_DOMAINS, description: '' },
-      { title: 'Speed Location', slug: FilterKey.SPEED_LOCATION, description: '' },
+      { title: 'Speed Index by Location', slug: FilterKey.SPEED_LOCATION, description: '' },
       { title: 'Time to Render', slug: FilterKey.TIME_TO_RENDER, description: '' },
       {
-        title: 'Impacted Sessions by Slow Pages',
+        title: 'Sessions Impacted by Slow Pages',
         slug: FilterKey.IMPACTED_SESSIONS_BY_SLOW_PAGES,
         description: '',
       },
@@ -129,7 +131,7 @@ export const TYPES: CardType[] = [
   {
     title: 'Resource Monitoring',
     icon: 'files',
-    description: 'Find the adoption of your all features in your app.',
+    description: 'Identify missing resources and those slowing down your app.',
     slug: RESOURCE_MONITORING,
     subTypes: [
       {
@@ -150,91 +152,69 @@ export const TYPES: CardType[] = [
   {
     title: 'Web Vitals',
     icon: 'activity',
-    description: 'Find the adoption of your all features in your app.',
+    description: 'Keep an eye on your web vitals and how they evolve over time.',
     slug: WEB_VITALS,
     subTypes: [
-      {
-        title: 'CPU Load',
-        slug: FilterKey.AVG_CPU,
-        description: 'Uncover the issues impacting user journeys',
-      },
-      {
-        title: 'DOM Content Loaded',
-        slug: FilterKey.AVG_DOM_CONTENT_LOADED,
-        description: 'Keep a close eye on errors and track their type, origin and domain.',
-      },
+      { title: 'CPU Load', slug: FilterKey.AVG_CPU, description: '' },
+      { title: 'DOM Content Loaded', slug: FilterKey.AVG_DOM_CONTENT_LOADED, description: '' },
       {
         title: 'DOM Content Loaded Start',
         slug: FilterKey.AVG_DOM_CONTENT_LOAD_START,
-        description:
-          'FInd out which resources are missing and those that may be slowign your web app.',
+        description: '',
       },
       {
         title: 'First Meaningful Paint',
         slug: FilterKey.AVG_FIRST_CONTENTFUL_PIXEL,
-        description:
-          "Optimize your app's performance by tracking slow domains, page resposne times, memory consumption, CPU usage and more.",
-      },
-      {
-        title: 'First Paint',
-        slug: FilterKey.AVG_FIRST_PAINT,
-        description:
-          'Find out which resources are missing and those that may be slowing your web app.',
+        description: '',
       },
+      { title: 'First Paint', slug: FilterKey.AVG_FIRST_PAINT, description: '' },
       { title: 'Frame Rate', slug: FilterKey.AVG_FPS, description: '' },
-      {
-        title: 'Image Load Time',
-        slug: FilterKey.AVG_IMAGE_LOAD_TIME,
-        description:
-          'Find out which resources are missing and those that may be slowing your web app.',
-      },
+      { title: 'Image Load Time', slug: FilterKey.AVG_IMAGE_LOAD_TIME, description: '' },
       { title: 'Page Load Time', slug: FilterKey.AVG_PAGE_LOAD_TIME, description: '' },
       { title: 'DOM Build Time', slug: FilterKey.AVG_PAGES_DOM_BUILD_TIME, description: '' },
       { title: 'Pages Response Time', slug: FilterKey.AVG_PAGES_RESPONSE_TIME, description: '' },
       { title: 'Request Load Time', slug: FilterKey.AVG_REQUEST_LOADT_IME, description: '' },
       { title: 'Response Time ', slug: FilterKey.AVG_RESPONSE_TIME, description: '' },
-      { title: 'Session Dueration', slug: FilterKey.AVG_SESSION_DURATION, description: '' },
+      { title: 'Session Duration', slug: FilterKey.AVG_SESSION_DURATION, description: '' },
       { title: 'Time Till First Byte', slug: FilterKey.AVG_TILL_FIRST_BYTE, description: '' },
       { title: 'Time to be Interactive', slug: FilterKey.AVG_TIME_TO_INTERACTIVE, description: '' },
       { title: 'Time to Render', slug: FilterKey.AVG_TIME_TO_RENDER, description: '' },
       { title: 'JS Heap Size', slug: FilterKey.AVG_USED_JS_HEAP_SIZE, description: '' },
       { title: 'Visited Pages', slug: FilterKey.AVG_VISITED_PAGES, description: '' },
-      {
-        title: 'Captured Requests',
-        slug: FilterKey.COUNT_REQUESTS,
-        description: 'Trend of sessions count in over the time.',
-      },
-      {
-        title: 'Captured Sessions',
-        slug: FilterKey.COUNT_SESSIONS,
-        description: 'See list of users, sessions, errors, issues, etc.,',
-      },
+      { title: 'Captured Requests', slug: FilterKey.COUNT_REQUESTS, description: '' },
+      { title: 'Captured Sessions', slug: FilterKey.COUNT_SESSIONS, description: '' },
     ],
   },
   // {
-  //   title: 'User Path',
+  //   title: 'Path Analysis',
   //   icon: 'signpost-split',
-  //   description: 'Discover user journeys between 2 points.',
+  //   description: 'See where users are flowing and explore their journeys.',
   //   slug: USER_PATH,
   // },
   // {
   //   title: 'Retention',
   //   icon: 'arrow-repeat',
-  //   description: 'Retension graph of users / features over a period of time.',
+  //   description: 'Get an understanding of how many users are returning.',
   //   slug: RETENTION,
   // },
   // {
   //   title: 'Feature Adoption',
   //   icon: 'card-checklist',
-  //   description: 'Find the adoption of your all features in your app.',
+  //   description: 'See which features are used the most and how often.',
   //   slug: FEATURE_ADOPTION,
   // },
   {
     title: 'Insights',
     icon: 'lightbulb',
-    description: 'Find the adoption of your all features in your app.',
+    description: 'Uncover new issues impacting user experience.',
     slug: INSIGHTS,
   },
+  // {
+  //   title: 'Form Analysis',
+  //   icon: 'card-checklist',
+  //   description: 'Understand why users are not completing forms.',
+  //   slug: FEATURE_ADOPTION,
+  // },
 ];
 
 export const DROPDOWN_OPTIONS = TYPES.filter((i: MetricType) => i.slug !== LIBRARY).map(