Squashed insights page

package.json

@@ -13,7 +13,7 @@
     "@zendeskgarden/react-forms": "^8.49.0",
     "@zendeskgarden/react-tables": "^8.62.0",
     "@zendeskgarden/react-theming": "^8.48.2",
-    "@zendeskgarden/svg-icons": "^6.31.1",
+    "@zendeskgarden/svg-icons": "^7.2.0",
     "date-fns": "^2.28.0",
     "formik": "^2.2.9",
     "i18n-iso-countries": "^7.3.0",
@@ -37,11 +37,13 @@
     "react-scroll": "^1.8.7",
     "styled-components": "^6.1.1",
     "typescript": "^4.6.2",
+    "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
   "scripts": {
     "start": "craco start",
+    "start:ssl": "craco --openssl-legacy-provider start",
     "build": "craco build",
     "test": "react-scripts test",
     "recover": "yarn install --check-files",
@@ -87,6 +89,7 @@
     "@types/react-scroll": "^1.8.3",
     "@types/react-transition-group": "^4.4.5",
     "@types/styled-components": "^5.1.24",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
     "cz-conventional-changelog": "3.3.0",

src/app/theme.tsx

@@ -6,16 +6,16 @@ import {
 // todo: check green 600
 export const SEVERITY_COLORS: Record<Severities, string> = {
   critical: baseTheme.palette.red[900],
-  high: baseTheme.palette.yellow[600],
+  high: baseTheme.palette.yellow[700],
   medium: baseTheme.palette.blue[600],
   low: baseTheme.palette.green[600],
 };
 
 export const SEVERITY_HUES: Record<Severities, string> = {
-  critical: baseTheme.palette.red[900],
-  high: baseTheme.palette.yellow[600],
-  medium: baseTheme.palette.blue[600],
-  low: baseTheme.palette.green[600],
+  critical: `${baseTheme.palette.red[900]}14`,
+  high: `${baseTheme.palette.yellow[600]}14`,
+  medium: `${baseTheme.palette.blue[600]}14`,
+  low: `${baseTheme.palette.green[600]}14`,
 };
 // temporary fix for the bug state colors
 export const BUG_STATE_COLORS: Record<

src/common/Pages.tsx

@@ -23,6 +23,7 @@ import Catalog from 'src/pages/Services';
 import Manual from 'src/pages/Manual';
 import Videos from 'src/pages/Videos';
 import Video from 'src/pages/Video';
+import InsightsPage from 'src/pages/Insights';
 import SentryWrapper from 'src/features/SentryWrapper';
 import { Redirect } from './Redirect';
 
@@ -88,6 +89,10 @@ const Pages = () => {
                     path={`/${langPrefix}/campaigns/:campaignId/videos`}
                     element={<Videos />}
                   />
+                  <Route
+                    path={`/${langPrefix}/campaigns/:campaignId/insights`}
+                    element={<InsightsPage />}
+                  />
                   <Route
                     path={`/${langPrefix}/campaigns/:campaignId/videos/:videoId`}
                     element={<Video />}

src/common/components/BugDetail/Meta/index.tsx

@@ -30,7 +30,7 @@ const BugInfo = styled.div`
 `;
 
 export function getDeviceIcon(device: string) {
-  switch (device) {
+  switch (device.toLocaleLowerCase()) {
     case 'smartphone':
       return <SmartphoneIcon />;
     case 'tablet':

src/common/schema.ts

@@ -170,6 +170,18 @@ export interface paths {
       };
     };
   };
+  '/campaigns/{cid}/observations': {
+    /**
+     * Return all observations for a specificCampaigns.
+     * You can group by observations for usecase and grapes (observations with same title) or get an ungrouped list.
+     */
+    get: operations['get-campaigns-cid-observations'];
+    parameters: {
+      path: {
+        cid: string;
+      };
+    };
+  };
   '/campaigns/{cid}/os': {
     get: operations['get-campaigns-cid-os'];
     parameters: {
@@ -733,21 +745,37 @@ export interface components {
       os_version?: string;
       type?: string;
     };
+    /** Grape */
+    Grapes: {
+      title: string;
+      severity: string;
+      usersNumber: number;
+      observations: (components['schemas']['Observation'] & {
+        uploaderId: number;
+        mediaId: number;
+        deviceType: string;
+        usecaseTitle: string;
+      })[];
+    };
     /** Insight */
     Insight: {
       id: number;
       title: string;
       description: string;
-      severity: components['schemas']['BugSeverity'];
+      severity: {
+        id: number;
+        name: string;
+        style: string;
+      };
+      visible?: number;
+      comment?: string;
       observations: (components['schemas']['Observation'] & {
         video: {
           id: number;
-          poster: string;
-          url: string;
-          streamUrl: string;
+          deviceType: string;
         };
+        uploaderId: number;
       })[];
-      comment?: string;
     };
     /** Observation */
     Observation: {
@@ -758,8 +786,9 @@ export interface components {
       start: number;
       /** Format: float */
       end: number;
-      tags: components['schemas']['VideoTag'][];
       quotes: string;
+      uxNote?: string;
+      tags: components['schemas']['VideoTag'][];
     };
     /**
      * Output
@@ -1074,6 +1103,41 @@ export interface components {
        */
       kind: 'campaignUniqueBugs';
     };
+    /**
+     * WidgetCampaignUxProgress
+     * @description Used to show an overview of Ux progress
+     */
+    WidgetCampaignUxProgress: {
+      data: {
+        countMediaWithObservation?: number;
+        countMedia?: number;
+        countTitleTag?: number;
+        countObservation?: number;
+        countObservationNoTitle?: number;
+        countRecurrentTitles?: number;
+        severitiesDistribution?: {
+          countPositiveFindings: number;
+          countMinorIssue: number;
+          countMajorIssue: number;
+          countObservations: number;
+        };
+        mostUsedTitles?: {
+          title: string;
+          usage: number;
+          mainSeverityAssignment: string;
+        }[];
+      };
+      /**
+       * @default uxTaggingVideoCompletion
+       * @example uxTaggingVideoCompletion
+       * @enum {string}
+       */
+      kind:
+        | 'uxTaggingVideoCompletion'
+        | 'uxTotalTitlesVsRecurrentTitles'
+        | 'uxSeveritiesDistribution'
+        | 'uxMostUsedTitles';
+    };
     Word: {
       start: number;
       end: number;
@@ -1106,6 +1170,51 @@ export interface components {
       /** @description Number of shared items */
       sharedItems?: number;
     };
+    /** WidgetCampaignUxTaggingVideoCompletionData */
+    WidgetCampaignUxTaggingVideoCompletionData: {
+      data: {
+        countMediaWithObservation: number;
+        countMedia: number;
+      };
+      /** @enum {undefined} */
+      kind: 'uxTaggingVideoCompletion';
+    };
+    /** WidgetCampaignUxTotalTitlesVsRecurrentTitles */
+    WidgetCampaignUxTotalTitlesVsRecurrentTitles: {
+      data: {
+        countTitleTag: number;
+        countObservationNoTitle: number;
+        countRecurrentTitles: number;
+      };
+      /** @enum {undefined} */
+      kind: 'uxTotalTitlesVsRecurrentTitles';
+    };
+    /** WidgetCampaignUxSeveritiesDistribution */
+    WidgetCampaignUxSeveritiesDistribution: {
+      data: {
+        countObservations: number;
+        severitiesDistribution: {
+          countPositiveFindings: number;
+          countMinorIssue: number;
+          countMajorIssue: number;
+          countObservationSeverity: number;
+        };
+      };
+      /** @enum {undefined} */
+      kind: 'uxSeveritiesDistribution';
+    };
+    /** WidgetCampaignUxMostUsedTitles */
+    WidgetCampaignUxMostUsedTitles: {
+      data: {
+        mostUsedTitles: {
+          title: string;
+          usage: number;
+          mainSeverityAssignment: string;
+        }[];
+      };
+      /** @enum {undefined} */
+      kind: 'uxMostUsedTitles';
+    };
   };
   responses: {
     /** Shared error response */
@@ -1140,7 +1249,11 @@ export interface components {
       | 'bugs-by-device'
       | 'cp-progress'
       | 'unique-bugs'
-      | 'bugs-by-duplicates';
+      | 'bugs-by-duplicates'
+      | 'ux-tagging-video-completion'
+      | 'ux-total-titles-vs-recurrent-titles'
+      | 'ux-severities-distribution'
+      | 'ux-most-used-titles';
     /** @description keywords to search */
     search: string;
     /** @description Custom Status id */
@@ -1748,10 +1861,7 @@ export interface operations {
     requestBody: {
       content: {
         'application/json': {
-          /**
-           * @description se esiste già questo parametro viene passato nel request body
-           * se invece non esiste ed il custom status deve essere creato, non viene passato
-           */
+          /** @description se esiste già questo parametro viene passato nel request body\r\nse invece non esiste ed il custom status deve essere creato, non viene passato */
           custom_status_id?: number;
           name: string;
           color: string;
@@ -1812,7 +1922,12 @@ export interface operations {
       /** OK */
       200: {
         content: {
-          'application/json': components['schemas']['Insight'][];
+          'application/json': (components['schemas']['Insight'] & {
+            usecases: {
+              id: number;
+              name: string;
+            }[];
+          })[];
         };
       };
       400: components['responses']['Error'];
@@ -1846,6 +1961,7 @@ export interface operations {
           severity_id: number;
           observations_ids: number[];
           comment?: string;
+          visible?: number;
         };
       };
     };
@@ -1875,6 +1991,61 @@ export interface operations {
       500: components['responses']['Error'];
     };
   };
+  /**
+   * Return all observations for a specificCampaigns.
+   * You can group by observations for usecase and grapes (observations with same title) or get an ungrouped list.
+   */
+  'get-campaigns-cid-observations': {
+    parameters: {
+      path: {
+        cid: string;
+      };
+      query: {
+        groupBy?: 'usecase-grapes';
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          'application/json':
+            | {
+                results: {
+                  usecaseId: number;
+                  usecaseTitle: string;
+                  grapes: components['schemas']['Grapes'][];
+                  ungrouped: (components['schemas']['Observation'] & {
+                    uploaderId: number;
+                    mediaId: number;
+                    deviceType: string;
+                    usecaseTitle: string;
+                  })[];
+                }[];
+                /**
+                 * @default usecase-grapes
+                 * @example usecase-grapes
+                 * @enum {string}
+                 */
+                kind: 'usecase-grapes';
+              }
+            | {
+                results: (components['schemas']['Observation'] & {
+                  uploaderId: number;
+                  mediaId: number;
+                  deviceType: string;
+                  usecaseTitle: string;
+                })[];
+                /**
+                 * @default ungrouped
+                 * @example ungrouped
+                 * @enum {string}
+                 */
+                kind: 'ungrouped';
+              };
+        };
+      };
+    };
+  };
   'get-campaigns-cid-os': {
     parameters: {
       path: {
@@ -2301,7 +2472,11 @@ export interface operations {
             | components['schemas']['WidgetBugsByDevice']
             | components['schemas']['WidgetCampaignProgress']
             | components['schemas']['WidgetCampaignUniqueBugs']
-            | components['schemas']['WidgetBugsByDuplicates'];
+            | components['schemas']['WidgetBugsByDuplicates']
+            | components['schemas']['WidgetCampaignUxTaggingVideoCompletionData']
+            | components['schemas']['WidgetCampaignUxTotalTitlesVsRecurrentTitles']
+            | components['schemas']['WidgetCampaignUxSeveritiesDistribution']
+            | components['schemas']['WidgetCampaignUxMostUsedTitles'];
         };
       };
       400: components['responses']['Error'];
@@ -2370,6 +2545,7 @@ export interface operations {
           severity_id?: number;
           observations_ids?: number[];
           comment?: string;
+          visible?: number;
         };
       };
     };