From 2b5d85cb350f8da46e265102b4781431e13660aa Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 21 Jun 2022 17:23:51 +0200
Subject: [PATCH] feat(ui) - dropdown alignments

---
 .../CustomMetricOverviewChart.tsx                    | 11 ++++-------
 .../DashboardEditModal/DashboardEditModal.tsx        |  1 +
 .../DashboardMetricSelection.tsx                     |  2 +-
 .../Dashboard/components/MetricsView/MetricsView.tsx |  2 +-
 .../Dashboard/components/WidgetChart/WidgetChart.tsx |  2 +-
 .../shared/Filters/FilterOperator/FilterOperator.tsx | 12 ++++++++++--
 .../shared/Filters/FilterValue/FilterValue.tsx       |  6 +++---
 .../FilterValueDropdown/FilterValueDropdown.tsx      | 12 +++++++-----
 frontend/app/components/ui/Input/Input.tsx           | 11 +++++++++--
 9 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
index b6d0ff995..3038813e4 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
@@ -1,14 +1,11 @@
 import React from 'react'
 import { Styles } from '../../common';
-import { AreaChart, ResponsiveContainer, XAxis, YAxis, CartesianGrid, Area, Tooltip } from 'recharts';
-import { LineChart, Line, Legend } from 'recharts';
-import cn from 'classnames';
+import { AreaChart, ResponsiveContainer, XAxis, YAxis, Area, Tooltip } from 'recharts';
 import CountBadge from '../../common/CountBadge';
 import { numberWithCommas } from 'App/utils';
 
 interface Props {
     data: any;
-    // onClick?: (event, index) => void;
 }
 function CustomMetricOverviewChart(props: Props) {
     const { data } = props;
@@ -33,7 +30,7 @@ function CustomMetricOverviewChart(props: Props) {
                 <AreaChart
                     data={ data.chart }
                     margin={ {
-                        top: 50, right: 0, left: 0, bottom: 1,
+                        top: 50, right: 0, left: 0, bottom: 0,
                     } }
                 >
                     {gradientDef}
@@ -60,7 +57,7 @@ function CustomMetricOverviewChart(props: Props) {
 export default CustomMetricOverviewChart
 
 
-const countView = (avg, unit) => {  
+const countView = (avg: any, unit: any) => {  
     if (unit === 'mb') {
       if (!avg) return 0;
       const count = Math.trunc(avg / 1024 / 1024);
@@ -72,4 +69,4 @@ const countView = (avg, unit) => {
       return numberWithCommas(count > 1000 ? count +'k' : count);
     }
     return avg ? numberWithCommas(avg): 0;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
index c08ff12fb..bf92d6ea1 100644
--- a/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardEditModal/DashboardEditModal.tsx
@@ -61,6 +61,7 @@ function DashboardEditModal(props: Props) {
                     <label>{'Description:'}</label>
                     <Input
                         className=""
+                        type="textarea"
                         name="description"
                         value={ dashboard.description }
                         onChange={write}
diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index b86476b03..a31bd4ffe 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -11,7 +11,7 @@ function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }
     });
     return (
         <div
-            className={cn("rounded p-4 border cursor-pointer", { 'bg-active-blue border-blue':isSelected, 'bg-white': !isSelected })}
+            className={cn("rounded p-4 border cursor-pointer hover:bg-active-blue", { 'bg-active-blue border-blue':isSelected, 'bg-white': !isSelected })}
             onClick={() => onClick(category)}
         >
             <div className="font-medium text-lg mb-2 capitalize">{category.name}</div>
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index e16b19a1d..a8c1d96c4 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -18,7 +18,7 @@ function MetricsView(props: Props) {
         metricStore.fetchList();
     }, []);
     return useObserver(() => (
-        <div style={{ maxWidth: 1300 }}>
+        <div style={{ maxWidth: '1300px', margin: 'auto'}}>
             <div className="flex items-center mb-4 justify-between">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Metrics" className="" />
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index cc7574f63..af32c1318 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -101,7 +101,7 @@ function WidgetChart(props: Props) {
         }
 
         if (metricType === 'funnel') {
-            return <FunnelWidget metric={metric} isWidget={isWidget} />
+            return <FunnelWidget metric={metric} isWidget={isWidget || isTemplate} />
         }
 
         if (metricType === 'predefined') {
diff --git a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
index b52a91939..137891866 100644
--- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@@ -21,7 +21,9 @@ const dropdownStyles = {
     ...provided,
     paddingRight: '0px',
     width: 'fit-content',
-    // height: '26px'
+    '& input': {
+      marginTop: '-3px',
+    },
   }),
   placeholder: (provided: any) => ({
     ...provided,
@@ -40,6 +42,7 @@ const dropdownStyles = {
       top: 20,
       left: 0,
       minWidth: 'fit-content',
+      overflow: 'hidden',
   }),
   container: (provided: any) => ({
       ...provided,
@@ -49,7 +52,12 @@ const dropdownStyles = {
     const opacity = state.isDisabled ? 0.5 : 1;
     const transition = 'opacity 300ms';
 
-    return { ...provided, opacity, transition };
+    return {
+      ...provided,
+      opacity,
+      transition,
+      marginTop: '-3px',
+    };
   }
 }
 interface Props {
diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
index df36a1046..7087926ff 100644
--- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
+++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx
@@ -88,7 +88,7 @@ function FilterValue(props: Props) {
       case FilterType.DROPDOWN:
         return (
           <FilterValueDropdown
-            search={true}
+            // search={true}
             value={value}
             filter={filter}
             options={filter.options}
@@ -100,9 +100,9 @@ function FilterValue(props: Props) {
         return (
           <FilterValueDropdown
             search={true}
-            multiple={true}
+            // multiple={true}
             value={value}
-            filter={filter}
+            // filter={filter}
             options={filter.options}
             onChange={({ value }) => onChange(null, { value }, valueIndex)}
             onAddValue={onAddValue}
diff --git a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
index 6123f931d..13c40cbd8 100644
--- a/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
+++ b/frontend/app/components/shared/Filters/FilterValueDropdown/FilterValueDropdown.tsx
@@ -43,6 +43,7 @@ const dropdownStyles = {
       top: 20,
       left: 0,
       minWidth: 'fit-content',
+      overflow: 'hidden',
   }),
   container: (provided: any) => ({
       ...provided,
@@ -50,9 +51,10 @@ const dropdownStyles = {
   }),
   input: (provided: any) => ({
     ...provided,
-    // padding: '0px',
-    // margin: '0px',
     height: '22px',
+    '& input:focus': {
+      border: 'none !important',
+    }
   }),
   singleValue: (provided: any, state: { isDisabled: any; }) => {
     const opacity = state.isDisabled ? 0.5 : 1;
@@ -67,14 +69,14 @@ const dropdownStyles = {
   }
 }
 interface Props {
-  filter: any; // event/filter
+  // filter: any; // event/filter
   // options: any[];
   value: string;
   onChange: (value: any) => void;
   className?: string;
   options: any[];
   search?: boolean;
-  multiple?: boolean;
+  // multiple?: boolean;
   showCloseButton?: boolean;
   showOrButton?: boolean;
   onRemoveValue?: () => void;
@@ -82,7 +84,7 @@ interface Props {
   isMultilple?: boolean;
 }
 function FilterValueDropdown(props: Props) {
-  const { filter, multiple = false, isMultilple = true, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
+  const { isMultilple = true, search = false, options, onChange, value, className = '', showCloseButton = true, showOrButton = true } = props;
   // const options = []
 
   return (
diff --git a/frontend/app/components/ui/Input/Input.tsx b/frontend/app/components/ui/Input/Input.tsx
index 502142508..7851fec7f 100644
--- a/frontend/app/components/ui/Input/Input.tsx
+++ b/frontend/app/components/ui/Input/Input.tsx
@@ -7,14 +7,21 @@ interface Props {
     className: string;
     icon?: string;
     leadingButton?: React.ReactNode;
+    type?: string;
+    rows?: number;
     [x:string]: any;
 }
 function Input(props: Props) {
-    const { className, leadingButton = "", wrapperClassName = "", icon = "", ...rest } = props;
+    const { className, leadingButton = "", wrapperClassName = "", icon = "", type="text", rows=4, ...rest } = props;
     return (
         <div className={cn({ "relative" : icon || leadingButton }, wrapperClassName)}>
             {icon && <Icon name={icon} className="absolute top-0 bottom-0 my-auto ml-4" size="14" />}
-            <input style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
+            { type === 'textarea' ? (
+                <textarea rows={rows} style={{ resize: 'none' }} maxLength={500} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
+            ) : (
+                <input style={{ height: '36px'}} className={ cn("p-2 border border-gray-light bg-white w-full rounded", className, { 'pl-10' : icon }) } {...rest} />
+            )}
+            
             { leadingButton && <div className="absolute top-0 bottom-0 right-0">{ leadingButton }</div> }
         </div>
     );