type(ux): Added error texts and fixed the probes table (#2904)

* Added error texts and error handling
* Minor refactoring

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

litmus-portal/frontend/public/locales/en/translation.yaml

@@ -895,6 +895,7 @@ createWorkflow:
     selectHub: Select a hub and continue with a pre-defined workflow
     noPredefined: No Pre-defined experiments present
     addPredefined: Add a pre-defined workflow to continue scheduling.
+    searchTerm: Enter a correct search term
   reliabilityScore:
     header: Adjust the weights of the experiments in the workflow
     info: You have selected
@@ -1153,6 +1154,9 @@ workflowAgent:
     selectAgent: Select a target Kubernetes cluster to run this workflow
   search:
     placeholder: Search
+  connectAgent: Connect an agent to start scheduling workflows
+  noAgents: You have not connected any agents yet
+  noAgentSearch: No agents found
 
 workflows:
   browseWorkflows: Browse workflows

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

@@ -1,6 +1,12 @@
 import { useLazyQuery, useQuery } from '@apollo/client';
 import { RadioGroup, Typography, useTheme } from '@material-ui/core';
-import { LitmusCard, RadioButton, Search } from 'litmus-ui';
+import {
+  ButtonOutlined,
+  LitmusCard,
+  Modal,
+  RadioButton,
+  Search,
+} from 'litmus-ui';
 import React, {
   forwardRef,
   useEffect,
@@ -9,6 +15,8 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
+import { AgentDeployModal } from '../../../components/AgentDeployModal';
 import { constants } from '../../../constants';
 import {
   GET_CLUSTER,
@@ -49,6 +57,12 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
   const [currentlySelectedAgent, setCurrentlySelectedAgent] =
     useState<string>('');
 
+  const [modalOpen, setModalOpen] = useState<boolean>(false);
+
+  const toggleModel = () => {
+    setModalOpen(!modalOpen);
+  };
+
   const [getRegistryData] = useLazyQuery(GET_IMAGE_REGISTRY, {
     fetchPolicy: 'network-only',
     onCompleted: (data) => {
@@ -214,13 +228,49 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
         />
 
         {/* Cluster Data */}
+        {clusterData.length === 0 ? (
+          <div className={classes.noAgents}>
+            <Typography className={classes.noAgentsText}>
+              <strong>{t('workflowAgent.noAgents')}</strong>
+            </Typography>
+            <Typography className={classes.connectAgent}>
+              {t('workflowAgent.connectAgent')}
+            </Typography>
+            <div className={classes.connectBtn}>
+              <ButtonOutlined
+                onClick={toggleModel}
+                className={classes.infoContainerButton}
+              >
+                <Typography>
+                  <ArrowUpwardIcon />
+                  {t('homeViews.agentConfiguredHome.agentInfoContainer.deploy')}
+                </Typography>
+              </ButtonOutlined>
+
+              <Modal
+                height="50%"
+                width="50%"
+                open={modalOpen}
+                onClose={toggleModel}
+                modalActions={
+                  <ButtonOutlined onClick={toggleModel}>
+                    &#x2715;
+                  </ButtonOutlined>
+                }
+              >
+                <AgentDeployModal handleClose={toggleModel} />
+              </Modal>
+            </div>
+          </div>
+        ) : (
           <RadioGroup
             name="Agent Selection"
             value={currentlySelectedAgent}
             onChange={(e) => handleChange(e)}
           >
             <div className={classes.agentWrapperDiv} data-cy="AgentsRadioGroup">
-            {filteredCluster.map((cluster) => (
+              {filteredCluster?.length > 0 ? (
+                filteredCluster.map((cluster) => (
                   <LitmusCard
                     key={cluster.cluster_id}
                     glow={currentlySelectedAgent === cluster.cluster_id}
@@ -243,9 +293,17 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
                       </div>
                     </RadioButton>
                   </LitmusCard>
-            ))}
+                ))
+              ) : (
+                <div className={classes.noAgentsText}>
+                  <Typography>
+                    <strong>{t('workflowAgent.noAgentSearch')}</strong>
+                  </Typography>
+                </div>
+              )}
             </div>
           </RadioGroup>
+        )}
       </div>
     </div>
   );

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

@@ -55,6 +55,28 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(1),
     marginLeft: '5%',
   },
+  infoContainerButton: {
+    '& svg': {
+      margin: theme.spacing(0, 1, -0.625, 0),
+    },
+    '& p': {
+      fontWeight: 500,
+    },
+  },
+  noAgents: {
+    marginTop: theme.spacing(3.5),
+    margin: 'auto',
+    textAlign: 'center',
+  },
+  noAgentsText: {
+    fontSize: '1.25rem',
+  },
+  connectAgent: {
+    fontSize: '1rem',
+  },
+  connectBtn: {
+    marginTop: theme.spacing(2.5),
+  },
 }));
 
 export default useStyles;

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

@@ -40,6 +40,12 @@ const SelectMyHub = () => {
   useEffect(() => {
     if (data?.getHubStatus.length) {
       setAvailableHubs([...data.getHubStatus]);
+      data.getHubStatus.forEach((hubData) => {
+        if (hubData.HubName.toLowerCase() === 'chaos hub') {
+          setSelectedHub('Chaos Hub');
+          localforage.setItem('selectedHub', 'Chaos Hub');
+        }
+      });
     }
   }, [loading]);
 

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

@@ -144,7 +144,7 @@ const ChoosePreDefinedExperiments = () => {
                 {t('createWorkflow.chooseWorkflow.selectMyHub')}
               </InputLabel>
               <Select
-                data-cy="myHubDropDown"
+                data-cy="selectPreDefinedMyHub"
                 value={selectedHub}
                 onChange={(e) => {
                   handleMyHubChange(e);
@@ -153,12 +153,10 @@ const ChoosePreDefinedExperiments = () => {
                 MenuProps={MenuProps}
               >
                 {availableHubs.map((hubs) => (
-                  <MenuItem
+                  <MenuItem key={hubs.HubName} value={hubs.HubName}>
-                    key={hubs.HubName}
+                    <Typography data-cy="PreDefinedHubOption">
-                    data-cy="hubOption"
-                    value={hubs.HubName}
-                  >
                       {hubs.HubName}
+                    </Typography>
                   </MenuItem>
                 ))}
               </Select>
@@ -206,7 +204,8 @@ const ChoosePreDefinedExperiments = () => {
               data-cy="PredefinedWorkflowsRadioGroup"
               onChange={handleChange}
             >
-              {filteredPreDefinedWorkflows?.map((wfData) => (
+              {filteredPreDefinedWorkflows?.length > 0 ? (
+                filteredPreDefinedWorkflows?.map((wfData) => (
                   <LitmusCard
                     width="100%"
                     height="5rem"
@@ -224,14 +223,28 @@ const ChoosePreDefinedExperiments = () => {
                             src={`${config.grahqlEndpoint}/icon/${selectedProjectID}/${selectedHub}/predefined/${wfData}.png`}
                             alt="Experiment Icon"
                           />
-                        <Typography className={classes.predefinedWorkflowName}>
+                          <Typography
+                            className={classes.predefinedWorkflowName}
+                          >
                             {wfData}
                           </Typography>
                         </div>
                       </div>
                     </RadioButton>
                   </LitmusCard>
-              ))}
+                ))
+              ) : (
+                <div className={classes.noTemplatesDiv}>
+                  <Typography className={classes.noTemplatesText}>
+                    <strong>
+                      {t('createWorkflow.chooseWorkflow.noPredefined')}
+                    </strong>
+                  </Typography>
+                  <Typography className={classes.noTemplatesDesc}>
+                    {t('createWorkflow.chooseWorkflow.searchTerm')}
+                  </Typography>
+                </div>
+              )}
             </RadioGroup>
           )}
         </div>

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

@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
   // Probes Table
   table: {
-    minWidth: '40.625rem',
+    marginTop: theme.spacing(2.5),
     minHeight: '9rem',
   },