Fixed portal ux issues and minor style changes (#2940)

Signed-off-by: Amit Kumar Das <amit@chaosnative.com>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/SaveTemplateModal.tsx

@@ -14,6 +14,7 @@ import useStyles from './styles';
 import { getProjectID } from '../../../utils/getSearchParams';
 import Loader from '../../../components/Loader';
 import { constants } from '../../../constants';
+import { validateWorkflowName } from '../../../utils/validate';
 
 interface SaveTemplateModalProps {
   closeTemplate: () => void;
@@ -89,9 +90,14 @@ const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
         label="Name of the template"
         value={templateName}
         data-cy="WorkflowName"
-        helperText=""
         required
-        onChange={(e) => setTemplateName(e.target.value)}
+        onChange={(e) => setTemplateName(e.target.value.toLowerCase())}
+        helperText={
+          validateWorkflowName(templateName)
+            ? t('createWorkflow.chooseWorkflow.validate')
+            : ''
+        }
+        variant={validateWorkflowName(templateName) ? 'error' : 'primary'}
         className={classes.InputFieldTemplate}
       />
       <br />
@@ -133,6 +139,7 @@ const SaveTemplateModal: React.FC<SaveTemplateModalProps> = ({
               cloneResult.type === constants.success ||
               templateName.trim().length === 0 ||
               templateDesc.trim().length === 0 ||
+              validateWorkflowName(templateName) ||
               !yamlValid
             }
           >

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx

@@ -169,6 +169,7 @@ const TableData: React.FC<TableDataProps> = ({
         width="60%"
         open={isTemplateModalOpen}
         onClose={handleCloseTemplate}
+        disableBackdropClick
         modalActions={
           <ButtonOutlined onClick={handleCloseTemplate}>
             &#x2715;

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

@@ -59,8 +59,10 @@ const useStyles = makeStyles((theme) => ({
     '& p': {
       fontSize: '0.8125rem',
       fontWeight: 'bold',
+      color: theme.palette.text.hint,
     },
     '& th': {
+      color: theme.palette.text.hint,
       backgroundColor: theme.palette.cards.background,
     },
   },

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

@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => ({
     '& th': {
       fontWeight: 'bold',
       fontSize: '0.8125rem',
-      color: theme.palette.text.disabled,
+      color: theme.palette.text.hint,
       backgroundColor: theme.palette.cards.background,
     },
   },

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/SelectMyHub.tsx

@@ -17,7 +17,7 @@ const SelectMyHub = () => {
   const [availableHubs, setAvailableHubs] = useState<MyHubDetail[]>([]);
 
   // Get all MyHubs with status
-  const { data, loading } = useQuery<HubStatus>(GET_HUB_STATUS, {
+  const { data } = useQuery<HubStatus>(GET_HUB_STATUS, {
     variables: { data: selectedProjectID },
     fetchPolicy: 'cache-and-network',
   });
@@ -38,8 +38,23 @@ const SelectMyHub = () => {
   };
 
   useEffect(() => {
-    if (data?.getHubStatus.length) {
+    if (data?.getHubStatus !== undefined) {
-      setAvailableHubs([...data.getHubStatus]);
+      if (data.getHubStatus.length) {
+        const hubDetails: MyHubDetail[] = [];
+        data.getHubStatus.forEach((hub) => {
+          /**
+           * Push only available hubs
+           */
+          if (hub.IsAvailable) {
+            hubDetails.push({
+              id: hub.id,
+              HubName: hub.HubName,
+              RepoBranch: hub.RepoBranch,
+              RepoURL: hub.RepoURL,
+            });
+          }
+        });
+        setAvailableHubs(hubDetails);
         data.getHubStatus.forEach((hubData) => {
           if (hubData.HubName.toLowerCase() === 'chaos hub') {
             setSelectedHub('Chaos Hub');
@@ -48,7 +63,8 @@ const SelectMyHub = () => {
           }
         });
       }
-  }, [loading]);
+    }
+  }, [data]);
 
   const classes = useStyles();
   return (

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/choosePreDefinedExperiments.tsx

@@ -45,7 +45,7 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
     const [workflowList, setWorkflowlist] = useState([]);
 
     // Get all MyHubs with status
-    const { data, loading } = useQuery<HubStatus>(GET_HUB_STATUS, {
+    const { data } = useQuery<HubStatus>(GET_HUB_STATUS, {
       variables: { data: selectedProjectID },
       fetchPolicy: 'cache-and-network',
     });
@@ -111,7 +111,21 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
     useEffect(() => {
       if (data?.getHubStatus !== undefined) {
         if (data.getHubStatus.length) {
-          setAvailableHubs([...data.getHubStatus]);
+          const hubDetails: MyHubDetail[] = [];
+          data.getHubStatus.forEach((hub) => {
+            /**
+             * Push only available hub
+             */
+            if (hub.IsAvailable) {
+              hubDetails.push({
+                id: hub.id,
+                HubName: hub.HubName,
+                RepoBranch: hub.RepoBranch,
+                RepoURL: hub.RepoURL,
+              });
+            }
+          });
+          setAvailableHubs(hubDetails);
         }
         data.getHubStatus.forEach((hubData) => {
           if (hubData.HubName.toLowerCase() === 'chaos hub') {
@@ -126,7 +140,7 @@ const ChoosePreDefinedExperiments: React.FC<ChoosePreDefinedExperimentsProps> =
           }
         });
       }
-    }, [loading]);
+    }, [data]);
 
     return (
       <AccordionDetails>

litmus-portal/frontend/src/views/CreateWorkflow/TuneWorkflow/index.tsx

@@ -279,11 +279,13 @@ const TuneWorkflow = forwardRef((_, ref) => {
    */
   const getSelectedWorkflowDetails = () => {
     localforage.getItem('workflow').then((workflow) => {
+      if (workflow) {
         setWorkflow({
           name: (workflow as WorkflowDetailsProps).name,
           crd: (workflow as WorkflowDetailsProps).CRDLink,
           description: (workflow as WorkflowDetailsProps).description,
         });
+      }
     });
     localforage.getItem('selectedScheduleOption').then((value) => {
       /**