Updated Litmus-UI and added minor UI fixes (#2883)

* Updated Litmus-UI and added minor UI fixes
Signed-off-by: Sayan Mondal <sayan@chaosnative.com>

litmus-portal/frontend/package.json

@@ -39,7 +39,7 @@
     "jsonwebtoken": "^8.5.1",
     "jspdf": "^2.1.1",
     "jspdf-autotable": "^3.5.13",
-    "litmus-ui": "^1.1.7",
+    "litmus-ui": "1.2.0",
     "localforage": "^1.7.3",
     "lodash": "^4.17.20",
     "moment": "^2.27.0",
@@ -97,13 +97,13 @@
     "@types/lodash": "^4.14.161",
     "@types/plotly.js": "^1.50.15",
     "@types/react": "^16.9.19",
+    "@types/react-beautiful-dnd": "^11.0.1",
     "@types/react-date-range": "^0.95.1",
     "@types/react-dom": "^16.9.5",
     "@types/react-plotly.js": "^2.2.4",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-simple-maps": "^1.0.3",
-    "@types/react-beautiful-dnd": "^11.0.1",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^3.5.0",
     "@typescript-eslint/parser": "^3.5.0",

litmus-portal/frontend/src/components/WorkflowStepper/styles.ts

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   headerButtonWrapper: {
     display: 'flex',
-    width: '10rem',
+    width: '13rem',
     justifyContent: 'space-between',
   },
   bottomButtonWrapper: {

litmus-portal/frontend/src/models/dashboardsData.ts

@@ -1,4 +1,4 @@
-import { EventMetric, GraphMetric } from 'litmus-ui';
+import { GraphMetric } from 'litmus-ui';
 import { PanelGroupResponse, PanelResponse } from './graphql/dashboardsDetails';
 
 export interface PanelGroupMap {
@@ -54,7 +54,7 @@ export interface GraphPanelGroupProps extends PanelGroupResponse {
 
 export interface ParsedPrometheusData {
   seriesData: Array<GraphMetric>;
-  chaosData: Array<EventMetric>;
+  chaosData: Array<GraphMetric>;
 }
 export interface RunWiseChaosMetrics {
   runIndex: number;

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/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 } from 'litmus-ui';
+import { ButtonFilled, LightPills } from 'litmus-ui';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import TimePopOver from '../../../components/TimePopOver';
@@ -30,7 +30,6 @@ import * as NodeSelectionActions from '../../../redux/actions/nodeSelection';
 import { history } from '../../../redux/configureStore';
 import { getProjectID, getProjectRole } from '../../../utils/getSearchParams';
 import ExperimentPoints from '../BrowseSchedule/ExperimentPoints';
-import CustomStatus from '../CustomStatus/Status';
 import useStyles from './styles';
 
 interface TableDataProps {
@@ -141,6 +140,19 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
     return timeDifference;
   };
 
+  const getVariant = (variant: string | undefined) => {
+    switch (variant) {
+      case 'succeeded':
+        return 'success';
+      case 'failed':
+        return 'danger';
+      case 'running':
+        return 'warning';
+      default:
+        return undefined;
+    }
+  };
+
   return (
     <>
       {/* Table cell for warning (if the workflow is in running state from 20 mins) */}
@@ -225,7 +237,10 @@ const TableData: React.FC<TableDataProps> = ({ data, refetchQuery }) => {
         </Popover>
       </TableCell>
       <TableCell>
-        <CustomStatus status={data.phase ?? ''} />
+        <LightPills
+          variant={getVariant(data.phase?.toLowerCase())}
+          label={data.phase ?? ''}
+        />
       </TableCell>
       <TableCell
         className={classes.workflowNameData}

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts

@@ -121,13 +121,13 @@ const useStyles = makeStyles((theme) => ({
 
   // Colors for Resilency score and Experiments passed
   less: {
-    color: theme.palette.status.failed,
+    color: theme.palette.status.workflow.failed,
   },
   medium: {
-    color: theme.palette.status.pending,
+    color: theme.palette.status.workflow.pending,
   },
   high: {
-    color: theme.palette.status.completed,
+    color: theme.palette.status.workflow.completed,
   },
 
   // Menu option with icon

litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/Status.tsx

@@ -1,40 +0,0 @@
-import { Typography } from '@material-ui/core';
-import React, { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SUCCEEDED } from '../../WorkflowDetails/workflowConstants';
-import useStyles from './styles';
-
-interface StatusProps {
-  status: string;
-}
-
-const CustomStatus: React.FC<StatusProps> = ({ status }) => {
-  const classes = useStyles();
-  const { t } = useTranslation();
-  const [label, setLabel] = React.useState(' ');
-  useEffect(() => {
-    if (status === 'Succeeded') {
-      return setLabel(`${classes.status} ${classes.completed}`);
-    }
-    if (status === 'Running' || status === 'Pending') {
-      return setLabel(`${classes.status} ${classes.running}`);
-    }
-    if (status === 'NotAvailable') {
-      return setLabel(`${classes.naStatus} ${classes.notAvailable}`);
-    }
-    return setLabel(`${classes.status} ${classes.failed}`);
-  }, [status]);
-
-  return (
-    <>
-      <div className={label}>
-        <Typography data-testid="status" className={classes.statusFont}>
-          {status === SUCCEEDED
-            ? `${t('workflowDetailsView.workflowInfo.Completed')}`
-            : status}
-        </Typography>
-      </div>
-    </>
-  );
-};
-export default CustomStatus;

litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/__tests__/CustomStatus.test.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable */
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render } from '../../../../testHelpers/test-util';
-import CustomStatus from '../Status';
-
-/**
- * Test to check the custom status
- */
-describe('Custom Status', () => {
-  it('Renders Succeeded Status', () => {
-    const { getByTestId } = render(<CustomStatus status="Succeeded" />);
-    const status = getByTestId('status');
-    expect(status!.innerHTML).toEqual(
-      'workflowDetailsView.workflowInfo.Completed'
-    );
-  });
-  it('Renders Running Status', () => {
-    const { getByTestId } = render(<CustomStatus status="Running" />);
-    const status = getByTestId('status');
-    expect(status!.innerHTML).toEqual('Running');
-  });
-  it('Renders Failed Status', () => {
-    const { getByTestId } = render(<CustomStatus status="Failed" />);
-    const status = getByTestId('status');
-    expect(status!.innerHTML).toEqual('Failed');
-  });
-});

litmus-portal/frontend/src/views/ChaosWorkflows/CustomStatus/styles.ts

@@ -1,39 +0,0 @@
-import { makeStyles } from '@material-ui/core';
-
-const useStyles = makeStyles((theme) => ({
-  status: {
-    width: '3.9125rem',
-    textAlign: 'center',
-    borderRadius: 3,
-    paddingTop: theme.spacing(0.375),
-    paddingBottom: theme.spacing(0.375),
-  },
-  naStatus: {
-    width: '4.8rem',
-    textAlign: 'center',
-    borderRadius: 3,
-    paddingTop: theme.spacing(0.375),
-    paddingBottom: theme.spacing(0.375),
-  },
-  notAvailable: {
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.status.pending,
-  },
-  completed: {
-    color: theme.palette.success.main,
-    backgroundColor: theme.palette.success.light,
-  },
-  running: {
-    color: theme.palette.warning.main,
-    backgroundColor: theme.palette.warning.light,
-  },
-  failed: {
-    color: theme.palette.status.failed,
-    backgroundColor: theme.palette.status.failed,
-  },
-  statusFont: {
-    fontSize: '0.725rem',
-  },
-}));
-
-export default useStyles;

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/styles.ts

@@ -76,7 +76,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   // Accordion Expanded Body [Content]
   predefinedWorkflowDiv: {
     maxHeight: '15rem',
-    overflowY: 'scroll',
+    overflowY: 'auto',
     padding: theme.spacing(3, 0, 3, 0),
   },
   MuiAccordionroot: {
@@ -239,7 +239,6 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   formControl: {
     minWidth: '9rem',
-    marginLeft: theme.spacing(1),
   },
   label: {
     color: theme.palette.common.black,

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/WorkflowPreview/styles.ts

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => ({
         cursor: 'pointer',
         fill: 'none',
         '& circle': {
-          fill: theme.palette.status.completed,
+          fill: theme.palette.status.experiment.completed,
         },
         '& g.label g': {
           transform: (props: StyleProps) =>
@@ -36,15 +36,15 @@ const useStyles = makeStyles((theme: Theme) => ({
           `scale(1.8) translate(-5px, ${props.horizontal ? -3.6 : -1}px)`,
       },
       '& g.StepGroup.Succeeded': {
-        fill: theme.palette.status.completed,
+        fill: theme.palette.status.experiment.completed,
       },
     },
 
     // Styles for edges
     '& g g.edgePaths': {
       '& g.succeeded': {
-        fill: theme.palette.status.completed,
+        fill: theme.palette.status.experiment.completed,
-        stroke: theme.palette.status.completed,
+        stroke: theme.palette.status.experiment.completed,
       },
     },
   },

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/styles.ts

@@ -107,6 +107,7 @@ const useStyles = makeStyles((theme) => ({
   addExpModal: {
     textAlign: 'left',
     padding: theme.spacing(5),
+    height: '100%',
     display: 'flex',
     flexDirection: 'column',
 
@@ -126,9 +127,9 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   doneBtn: {
-    marginLeft: 'auto',
+    position: 'absolute',
-    marginTop: theme.spacing(2.5),
+    bottom: '1rem',
-    marginRight: theme.spacing(2),
+    right: '3rem',
   },
   inputDiv: {
     display: 'flex',
@@ -212,7 +213,7 @@ const useStyles = makeStyles((theme) => ({
   radioList: {
     width: '100%',
     alignItems: 'center',
-    height: '26rem',
+    height: '75%',
     overflowY: 'auto',
   },
   experimentCard: {

litmus-portal/frontend/src/views/Targets/BrowseCluster/TableData.tsx

@@ -1,5 +1,5 @@
 import { IconButton, TableCell, Tooltip, Typography } from '@material-ui/core';
-import { ButtonFilled, ButtonOutlined, Modal } from 'litmus-ui';
+import { ButtonFilled, ButtonOutlined, LightPills, Modal } from 'litmus-ui';
 import moment from 'moment';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -42,17 +42,20 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
     <>
       <TableCell className={classes.tableDataStatus}>
         {data.is_cluster_confirmed === false ? (
-          <Typography className={`${classes.check} ${classes.pending}`}>
+          <LightPills
-            {t('workflowCluster.header.formControl.menu6')}
+            variant="warning"
-          </Typography>
+            label={t('workflowCluster.header.formControl.menu6')}
+          />
         ) : data.is_cluster_confirmed === true && data.is_active ? (
-          <Typography className={`${classes.check} ${classes.active}`}>
+          <LightPills
-            {t('workflowCluster.header.formControl.menu1')}
+            variant="success"
-          </Typography>
+            label={t('workflowCluster.header.formControl.menu1')}
+          />
         ) : (
-          <Typography className={`${classes.check} ${classes.notactive}`}>
+          <LightPills
-            {t('workflowCluster.header.formControl.menu2')}
+            variant="danger"
-          </Typography>
+            label={t('workflowCluster.header.formControl.menu2')}
+          />
         )}
       </TableCell>
       <TableCell className={classes.workflowNameData}>

litmus-portal/frontend/src/views/Targets/BrowseCluster/styles.ts

@@ -160,26 +160,6 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.secondary.dark,
   },
   // Table status
-  check: {
-    width: '5.9125rem',
-    textAlign: 'center',
-    borderRadius: 3,
-    paddingTop: theme.spacing(0.375),
-    paddingBottom: theme.spacing(0.375),
-    color: theme.palette.primary.dark,
-  },
-  active: {
-    color: theme.palette.status.completed,
-    background: theme.palette.success.light,
-  },
-  notactive: {
-    color: theme.palette.error.dark,
-    backgroundColor: theme.palette.error.light,
-  },
-  pending: {
-    background: theme.palette.warning.light,
-    color: theme.palette.warning.main,
-  },
   statusFont: {
     fontSize: '0.725rem',
   },

litmus-portal/frontend/src/views/WorkflowDetails/ArgoWorkflow/styles.ts

@@ -107,11 +107,11 @@ const useStyles = makeStyles((theme: Theme) => ({
       },
       '& g.Failed': {
         '& circle': {
-          fill: theme.palette.status.failed,
+          fill: theme.palette.status.experiment.failed,
         },
         '& circle.selected': {
           strokeDasharray: '5,2',
-          stroke: theme.palette.status.failed,
+          stroke: theme.palette.status.experiment.failed,
           fill: 'none',
           strokeWidth: '1.5',
         },
@@ -150,7 +150,7 @@ const useStyles = makeStyles((theme: Theme) => ({
         },
       },
       '& g.StepGroup': {
-        fill: theme.palette.status.completed,
+        fill: theme.palette.status.experiment.completed,
         cursor: 'default',
         '& rect': {
           x: '-1.5px',
@@ -166,8 +166,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     // Styles for edges
     '& g g.edgePaths': {
       '& g.link': {
-        fill: theme.palette.status.completed,
+        fill: theme.palette.status.experiment.completed,
-        stroke: theme.palette.status.completed,
+        stroke: theme.palette.status.experiment.completed,
       },
     },
   },

litmus-portal/frontend/src/views/WorkflowDetails/WorkflowStatus/styles.ts

@@ -3,31 +3,31 @@ import { makeStyles } from '@material-ui/core';
 const useStyles = makeStyles((theme) => ({
   // Status Text Colors
   running: {
-    color: theme.palette.status.running,
+    color: theme.palette.status.experiment.running,
   },
 
   failed: {
-    color: theme.palette.status.failed,
+    color: theme.palette.status.experiment.failed,
   },
 
   succeeded: {
-    color: theme.palette.status.completed,
+    color: theme.palette.status.experiment.completed,
   },
 
   pending: {
-    color: theme.palette.status.completed,
+    color: theme.palette.status.experiment.pending,
   },
 
   error: {
-    color: '#FFA600',
+    color: theme.palette.status.experiment.error,
   },
 
   skipped: {
-    color: '#0098DD',
+    color: theme.palette.status.experiment.skipped,
   },
 
   omitted: {
-    color: '#A93DDB',
+    color: theme.palette.status.experiment.omitted,
   },
 
   textBold: {