From fd9a3aeb6fcaffffb5856c7f99e919c2547db93c Mon Sep 17 00:00:00 2001
From: Sayan Mondal <sayan@chaosnative.com>
Date: Mon, 28 Jun 2021 10:46:02 +0530
Subject: [PATCH] Fixed Table FormControl active colors + updated workflow
 pills + minor ux fixes (#2943)

Signed-off-by: Sayan Mondal <sayan@chaosnative.com>
---
 .../public/locales/en/translation.yaml        |  2 +-
 .../src/components/UserDetails/index.tsx      | 12 +++---
 .../Table/TableToolbar.tsx                    | 28 +++++++-------
 .../ApplicationDashboards/Table/styles.ts     |  6 +--
 .../WorkflowGraphs/index.tsx                  |  2 +-
 .../WorkflowGraphs/styles.ts                  |  1 +
 .../ChaosWorkflows/BrowseSchedule/index.tsx   | 13 +------
 .../ChaosWorkflows/BrowseSchedule/styles.ts   |  1 +
 .../ChaosWorkflows/Runs/HeaderSection.tsx     |  4 +-
 .../views/ChaosWorkflows/Runs/TableData.tsx   | 13 ++++---
 .../src/views/ChaosWorkflows/Runs/styles.ts   |  6 ++-
 .../Targets/BrowseCluster/HeaderSection.tsx   | 37 +++++++------------
 .../src/views/Targets/BrowseCluster/styles.ts | 13 +++----
 13 files changed, 59 insertions(+), 79 deletions(-)

diff --git a/litmus-portal/frontend/public/locales/en/translation.yaml b/litmus-portal/frontend/public/locales/en/translation.yaml
index 34b84dd49..dce6b8b4b 100644
--- a/litmus-portal/frontend/public/locales/en/translation.yaml
+++ b/litmus-portal/frontend/public/locales/en/translation.yaml
@@ -1057,7 +1057,7 @@ createWorkflow:
     errYaml: Error in CRD Yaml.
     codeIsFine: Your code is fine.
     youCanMoveOn: You can move on !
-    workflowNameValidationMessage: Workflow name can only be alpha numeric and should not contain capital letters
+    workflowNameValidationMessage: Workflow name can only be lowercase characters and alpha numeric
     subjectValidationMessage: Subject can only have alphanumeric characters and - . _ in-between
     test: test
     YAML: YAML
diff --git a/litmus-portal/frontend/src/components/UserDetails/index.tsx b/litmus-portal/frontend/src/components/UserDetails/index.tsx
index 2e9cc8001..d9e474520 100644
--- a/litmus-portal/frontend/src/components/UserDetails/index.tsx
+++ b/litmus-portal/frontend/src/components/UserDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Button, Typography } from '@material-ui/core';
+import { Avatar, Typography } from '@material-ui/core';
 import { ButtonOutlined, InputField, Modal } from 'litmus-ui';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,9 +37,9 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
   // avatar image source string
   const [avatar, setAvatar] = useState<string>('./avatars/default.svg');
 
-  const handleOpen = () => {
-    setOpen(true);
-  };
+  // const handleOpen = () => {
+  //   setOpen(true);
+  // };
 
   const handleClose = () => {
     setOpen(false);
@@ -61,9 +61,9 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
               className={classes.avatarBackground}
               src={avatar}
             />
-            <Button className={classes.edit} onClick={handleOpen} disabled>
+            {/* <Button className={classes.edit} onClick={handleOpen} disabled>
               {t('settings.userManagementTab.createUser.userDetails.button')}
-            </Button>
+            </Button> */}
             <Modal
               open={open}
               onClose={handleClose}
diff --git a/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableToolbar.tsx b/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableToolbar.tsx
index ef3b7e4c7..09fe282a2 100644
--- a/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableToolbar.tsx
+++ b/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/TableToolbar.tsx
@@ -242,20 +242,20 @@ const TableToolBar: React.FC<TableToolBarProps> = ({
         </Typography>
       </Button>
 
-      <div className={classes.addButton}>
-        <ButtonFilled
-          onClick={() => {
-            history.push({
-              pathname: '/analytics/dashboard/create',
-              search: `?projectID=${projectID}&projectRole=${projectRole}`,
-            });
-          }}
-        >
-          <Typography className={classes.dateRangeDefault}>
-            {t('analyticsDashboard.dashboardTable.addDashboard')}
-          </Typography>
-        </ButtonFilled>
-      </div>
+      <ButtonFilled
+        className={classes.addButton}
+        size="small"
+        onClick={() => {
+          history.push({
+            pathname: '/analytics/dashboard/create',
+            search: `?projectID=${projectID}&projectRole=${projectRole}`,
+          });
+        }}
+      >
+        <Typography className={classes.dateRangeDefault}>
+          {t('analyticsDashboard.dashboardTable.addDashboard')}
+        </Typography>
+      </ButtonFilled>
       <DateRangeSelector
         anchorEl={dateRangeSelectorRef.current as HTMLElement}
         isOpen={isDateRangeSelectorPopoverOpen}
diff --git a/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/styles.ts b/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/styles.ts
index 82f3a9151..a45a84d79 100644
--- a/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/styles.ts
+++ b/litmus-portal/frontend/src/views/Analytics/ApplicationDashboards/Table/styles.ts
@@ -192,15 +192,11 @@ const useStyles = makeStyles((theme) => ({
   },
 
   dateRangeDefault: {
-    height: '2rem',
-    textDecoration: 'none',
-    textTransform: 'none',
     padding: theme.spacing(1),
   },
 
   addButton: {
-    marginRight: theme.spacing(3),
-    marginLeft: theme.spacing(1),
+    margin: theme.spacing(0, 2),
   },
 
   icon: {
diff --git a/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/index.tsx b/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/index.tsx
index 2d661387a..b8cc10b51 100644
--- a/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/index.tsx
+++ b/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/index.tsx
@@ -54,7 +54,7 @@ const WorkflowGraphs: React.FC<WorkflowGraphsProps> = ({ data }) => {
   ];
   return (
     <div className={classes.root}>
-      <FormControl variant="outlined" className={classes.formControl} focused>
+      <FormControl variant="outlined" className={classes.formControl}>
         <InputLabel className={classes.selectText} />
         <Select
           value={filters}
diff --git a/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/styles.ts b/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/styles.ts
index 259456ca0..0fae2d42e 100644
--- a/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/styles.ts
+++ b/litmus-portal/frontend/src/views/Analytics/WorkflowDashboard/WorkflowGraphs/styles.ts
@@ -23,6 +23,7 @@ const useStyles = makeStyles((theme) => ({
   },
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
   formControl: {
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
index 6253c4861..fbc0505b9 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
@@ -189,11 +189,7 @@ const BrowseSchedule: React.FC = () => {
             }
           />
 
-          <FormControl
-            variant="outlined"
-            className={classes.formControl}
-            focused
-          >
+          <FormControl variant="outlined" className={classes.formControl}>
             <InputLabel className={classes.selectText}>Name</InputLabel>
             <Select
               value={filters.suspended}
@@ -219,12 +215,7 @@ const BrowseSchedule: React.FC = () => {
           </FormControl>
 
           {/* Select Cluster */}
-          <FormControl
-            variant="outlined"
-            className={classes.formControl}
-            color="primary"
-            focused
-          >
+          <FormControl variant="outlined" className={classes.formControl}>
             <InputLabel className={classes.selectText}>Target Agent</InputLabel>
             <Select
               value={filters.cluster_name}
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
index b3454efc2..b8912ab79 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
@@ -31,6 +31,7 @@ const useStyles = makeStyles((theme) => ({
   },
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
 
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx
index 2ff62aacf..9ba8705c9 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/HeaderSection.tsx
@@ -100,7 +100,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         />
 
         {/* Select Workflow */}
-        <FormControl variant="outlined" className={classes.formControl} focused>
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>
             Workflow Status
           </InputLabel>
@@ -118,7 +118,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         </FormControl>
 
         {/* Select Cluster */}
-        <FormControl variant="outlined" className={classes.formControl} focused>
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>Target Cluster</InputLabel>
           <Select
             value={clusterValue}
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx
index 72559233a..fb48bdaea 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/TableData.tsx
@@ -11,7 +11,7 @@ import {
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import { ButtonFilled, LightPills } from 'litmus-ui';
+import { ButtonFilled, OutlinedPills } from 'litmus-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import TimePopOver from '../../../components/TimePopOver';
@@ -143,13 +143,13 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
   const getVariant = (variant: string | undefined) => {
     switch (variant) {
       case 'succeeded':
-        return 'success';
+        return 'succeeded';
       case 'failed':
-        return 'danger';
+        return 'failed';
       case 'running':
-        return 'warning';
+        return 'running';
       default:
-        return undefined;
+        return 'pending';
     }
   };
 
@@ -237,7 +237,8 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
         </Popover>
       </TableCell>
       <TableCell>
-        <LightPills
+        <OutlinedPills
+          size="small"
           variant={getVariant(data.phase?.toLowerCase())}
           label={data.phase ?? ''}
         />
diff --git a/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts
index 62f9551be..3422003ea 100644
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts
+++ b/litmus-portal/frontend/src/views/ChaosWorkflows/Runs/styles.ts
@@ -35,6 +35,7 @@ const useStyles = makeStyles((theme) => ({
 
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
 
@@ -44,10 +45,11 @@ const useStyles = makeStyles((theme) => ({
     height: '2.5rem',
     minWidth: '9rem',
     border: '0.125rem solid',
-    borderRadius: 4,
-    borderColor: theme.palette.primary.main,
     marginRight: theme.spacing(3.75),
     textTransform: 'none',
+    '&:focus': {
+      borderColor: theme.palette.primary.main,
+    },
   },
   displayDate: {
     marginLeft: theme.spacing(1),
diff --git a/litmus-portal/frontend/src/views/Targets/BrowseCluster/HeaderSection.tsx b/litmus-portal/frontend/src/views/Targets/BrowseCluster/HeaderSection.tsx
index a1f2a8aef..9f7045fcb 100644
--- a/litmus-portal/frontend/src/views/Targets/BrowseCluster/HeaderSection.tsx
+++ b/litmus-portal/frontend/src/views/Targets/BrowseCluster/HeaderSection.tsx
@@ -9,16 +9,16 @@ import {
   Select,
   Typography,
 } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
 import SearchIcon from '@material-ui/icons/Search';
 import { ButtonOutlined } from 'litmus-ui';
 import React, { useState } from 'react';
 import { DateRangePicker } from 'react-date-range';
-import { useTranslation } from 'react-i18next';
-import { useTheme } from '@material-ui/core/styles';
 import 'react-date-range/dist/styles.css'; // main css file
 import 'react-date-range/dist/theme/default.css'; // theme css file
+import { useTranslation } from 'react-i18next';
 import useStyles from './styles';
 
 interface HeaderSectionProps {
@@ -97,12 +97,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         />
 
         {/* Select Workflow */}
-        <FormControl
-          variant="outlined"
-          className={classes.formControl}
-          color="primary"
-          focused
-        >
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>
             {t('workflowCluster.header.status')}
           </InputLabel>
@@ -128,12 +123,7 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
         </FormControl>
 
         {/* Select Cluster */}
-        <FormControl
-          variant="outlined"
-          className={classes.formControl}
-          color="primary"
-          focused
-        >
+        <FormControl variant="outlined" className={classes.formControl}>
           <InputLabel className={classes.selectText}>
             {t('workflowCluster.header.target')}
           </InputLabel>
@@ -154,16 +144,15 @@ const HeaderSection: React.FC<HeaderSectionProps> = ({
             </MenuItem>
           </Select>
         </FormControl>
-        <div className={classes.dateBtn}>
-          <ButtonOutlined disabled={false} onClick={popOverClick}>
-            <Typography className={classes.displayDate}>
-              {displayDate}
-              <IconButton className={classes.iconButton}>
-                {isOpen ? <KeyboardArrowDownIcon /> : <ChevronRightIcon />}
-              </IconButton>
-            </Typography>
-          </ButtonOutlined>
-        </div>
+
+        <ButtonOutlined className={classes.selectRange} onClick={popOverClick}>
+          <Typography className={classes.displayDate}>
+            {displayDate}
+            <IconButton className={classes.iconButton}>
+              {isOpen ? <KeyboardArrowDownIcon /> : <ChevronRightIcon />}
+            </IconButton>
+          </Typography>
+        </ButtonOutlined>
         <Popover
           open={isOpen}
           anchorEl={popAnchorEl}
diff --git a/litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts b/litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts
index 8746e0243..ee39e8817 100644
--- a/litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts
+++ b/litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts
@@ -32,18 +32,20 @@ const useStyles = makeStyles((theme) => ({
   },
   selectText: {
     height: '2.5rem',
+    color: theme.palette.text.primary,
     padding: theme.spacing(0.5),
   },
-  selectDate: {
+  selectRange: {
     display: 'flex',
     flexDirection: 'row',
     height: '2.5rem',
     minWidth: '9rem',
-    border: '1.7px solid',
-    borderRadius: '2rem',
-    borderColor: theme.palette.secondary.main,
+    borderColor: theme.palette.border.main,
     marginRight: theme.spacing(3.75),
     textTransform: 'none',
+    '&:focus': {
+      borderColor: theme.palette.primary.main,
+    },
   },
   displayDate: {
     marginLeft: theme.spacing(1),
@@ -198,9 +200,6 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: 'space-between',
     gap: '1rem',
   },
-  dateBtn: {
-    marginRight: theme.spacing(2.5),
-  },
   w7: { width: '7rem' },
   // delete user
   delDiv: {