From b55145e58047a2cc976e3b2ed10dede6d1b383b8 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 23 Jun 2022 12:49:39 +0200
Subject: [PATCH] fix(ui): minor ui fixes

---
 .../MissingResources/MissingResources.tsx     | 23 +++++++++++--------
 .../ResourceLoadedVsResponseEnd.tsx           |  4 ++--
 .../SlowestResources/SlowestResources.tsx     | 21 ++++++++++-------
 .../ResourceLoadedVsResponseEnd.js            |  2 +-
 .../Dashboard/Widgets/common/Table.js         |  2 +-
 .../components/WidgetName/WidgetName.tsx      |  4 +++-
 .../components/WidgetView/WidgetView.tsx      |  1 +
 frontend/app/constants/filterOptions.js       |  6 ++---
 frontend/scripts/constants.js                 |  2 +-
 9 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
index 69517328c..ae2f1d27e 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MissingResources/MissingResources.tsx
@@ -7,7 +7,7 @@ import Chart from './Chart';
 import ResourceInfo from './ResourceInfo';
 import CopyPath from './CopyPath';
 
-const cols = [
+const cols: Array<Object> = [
   {
     key: 'resource',
     title: 'Resource',
@@ -17,7 +17,7 @@ const cols = [
   {
     key: 'sessions',
     title: 'Sessions',
-    toText: count => `${ count > 1000 ? Math.trunc(count / 1000) : count }${ count > 1000 ? 'k' : '' }`,
+    toText: (count: number) => `${ count > 1000 ? Math.trunc(count / 1000) : count }${ count > 1000 ? 'k' : '' }`,
     width: '20%',
   },
   {
@@ -25,16 +25,17 @@ const cols = [
     title: 'Trend',
     Component: Chart,
     width: '20%',
-  },
-  {
-    key: 'copy-path',
-    title: '',
-    Component: CopyPath,
-    cellClass: 'invisible group-hover:visible text-right',
-    width: '20%',
   }
 ];
 
+const copyPathCol = {
+  key: 'copy-path',
+  title: '',
+  Component: CopyPath,
+  cellClass: 'invisible group-hover:visible text-right',
+  width: '20%',
+}
+
 interface Props {
     data: any
     metric?: any
@@ -43,6 +44,10 @@ interface Props {
 function MissingResources(props: Props) {
     const { data, metric, isTemplate } = props;
 
+    if (!isTemplate) {
+      cols.push(copyPathCol);
+    }
+    
     return (
         <NoContent
           title="No resources missing."
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
index 0423a0007..4bd0c2b52 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
@@ -18,7 +18,7 @@ function ResourceLoadedVsResponseEnd(props: Props) {
           size="small"
           show={ metric.data.chart.length === 0 }
         >
-          <ResponsiveContainer height={ 240 } width="100%">
+          <ResponsiveContainer height={ 246 } width="100%">
             <ComposedChart
                 data={metric.data.chart}
                 margin={ Styles.chartMargins}
@@ -67,4 +67,4 @@ function ResourceLoadedVsResponseEnd(props: Props) {
     );
 }
 
-export default ResourceLoadedVsResponseEnd;
\ No newline at end of file
+export default ResourceLoadedVsResponseEnd;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
index ac400904a..9cdf60514 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestResources/SlowestResources.tsx
@@ -15,7 +15,7 @@ export const RESOURCE_OPTIONS = [
   { text: 'JS', value: 'SCRIPT', },
 ];
 
-const cols = [
+const cols: Array<Object> = [
   {
     key: 'type',
     title: 'Type',
@@ -43,16 +43,17 @@ const cols = [
     title: 'Trend',
     Component: Chart,
     width: '15%',
-  },
-  {
-    key: 'copy-path',
-    title: '',
-    Component: CopyPath,
-    cellClass: 'invisible group-hover:visible text-right',
-    width: '15%',
   }
 ];
 
+const copyPathCol = {
+  key: 'copy-path',
+  title: '',
+  Component: CopyPath,
+  cellClass: 'invisible group-hover:visible text-right',
+  width: '15%',
+}
+
 interface Props {
     data: any
     metric?: any
@@ -61,6 +62,10 @@ interface Props {
 function SlowestResources(props: Props) {
     const { data, metric, isTemplate } = props;
 
+    if (!isTemplate) {
+      cols.push(copyPathCol);
+    }
+    
     return (
         <NoContent
           title="No resources missing."
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
index e106b3728..c30375aa7 100644
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
@@ -29,7 +29,7 @@ export default class ResourceLoadedVsResponseEnd extends React.PureComponent {
           size="small"
           show={ data.chart.length === 0 }
         >
-          <ResponsiveContainer height={ 240 } width="100%">
+          <ResponsiveContainer height={ 247 } width="100%">
             <ComposedChart
               data={data.chart}
               margin={Styles.chartMargins}
diff --git a/frontend/app/components/Dashboard/Widgets/common/Table.js b/frontend/app/components/Dashboard/Widgets/common/Table.js
index 59b802f7d..d1970b1cb 100644
--- a/frontend/app/components/Dashboard/Widgets/common/Table.js
+++ b/frontend/app/components/Dashboard/Widgets/common/Table.js
@@ -52,7 +52,7 @@ export default class Table extends React.PureComponent {
           )) }
         </div>
         { !isTemplate && rows.size > (small ? 3 : 5) && !showAll &&
-            <div className="w-full flex justify-center">
+            <div className="w-full flex justify-center mt-3">
               <Button
                 onClick={ this.onLoadMoreClick }
                 variant="text-primary"
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
index 3e8396ab7..ee32b7703 100644
--- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Icon } from 'UI';
+import cn from 'classnames';
+
 
 interface Props {
   name: string;
@@ -47,7 +49,7 @@ function WidgetName(props: Props) {
           onFocus={() => setEditing(true)}
         />
       ) : (
-        <div className="text-2xl h-8 flex items-center border-transparent">{ name }</div>
+        <div onDoubleClick={() => setEditing(true)} className={cn("text-2xl h-8 flex items-center border-transparent", canEdit && 'cursor-pointer')}>{ name }</div>
       )}
       { canEdit && <div className="ml-3 cursor-pointer" onClick={() => setEditing(true)}><Icon name="pencil" size="14" /></div> }
     </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index 527dbe32b..48b78d415 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -11,6 +11,7 @@ import { withSiteId } from 'App/routes';
 import FunnelIssues from '../Funnels/FunnelIssues/FunnelIssues';
 import Breadcrumb from 'Shared/Breadcrumb';
 import { FilterKey } from 'Types/filter/filterType';
+
 interface Props {
     history: any;
     match: any
diff --git a/frontend/app/constants/filterOptions.js b/frontend/app/constants/filterOptions.js
index 4e27d6b44..224a32ae6 100644
--- a/frontend/app/constants/filterOptions.js
+++ b/frontend/app/constants/filterOptions.js
@@ -70,7 +70,7 @@ export const metricTypes = [
 export const tableColumnName = {
     [FilterKey.USERID]: 'Users',
     [FilterKey.ISSUE]: 'Issues',
-    [FilterKey.USER_BROWSER]: 'Browsers',
+    [FilterKey.USER_BROWSER]: 'Browser',
     [FilterKey.USER_DEVICE]: 'Devices',
     [FilterKey.USER_COUNTRY]: 'Countries',
     [FilterKey.LOCATION]: 'URLs',
@@ -82,7 +82,7 @@ export const metricOf = [
   { label: 'Sessions', value: FilterKey.SESSIONS, type: 'table' },
   { label: 'JS Errors', value: FilterKey.ERRORS, type: 'table' },
   { label: 'Issues', value: FilterKey.ISSUE, type: 'table' },
-  { label: 'Browsers', value: FilterKey.USER_BROWSER, type: 'table' },
+  { label: 'Browser', value: FilterKey.USER_BROWSER, type: 'table' },
   { label: 'Devices', value: FilterKey.USER_DEVICE, type: 'table' },
   { label: 'Countries', value: FilterKey.USER_COUNTRY, type: 'table' },
   { label: 'URLs', value: FilterKey.LOCATION, type: 'table' },
@@ -128,4 +128,4 @@ export default {
   metricOf,
   issueOptions,
   methodOptions,
-}
\ No newline at end of file
+}
diff --git a/frontend/scripts/constants.js b/frontend/scripts/constants.js
index eb2d3e6d9..32b4de9a6 100644
--- a/frontend/scripts/constants.js
+++ b/frontend/scripts/constants.js
@@ -27,7 +27,7 @@ fs.writeFileSync('app/constants.js',
   "/* eslint-disable */" +
   toExport('countries', countries) +
   toExport('os', os) +
-  toExport('browsers', browsers)
+  toExport('browser', browsers)
 );
 
 function toStyles(prefix, data) {