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,38 +228,82 @@ const ChooseWorkflowAgent = forwardRef((_, ref) => {
         />
 
         {/* Cluster Data */}
-        <RadioGroup
+        {clusterData.length === 0 ? (
-          name="Agent Selection"
+          <div className={classes.noAgents}>
-          value={currentlySelectedAgent}
+            <Typography className={classes.noAgentsText}>
-          onChange={(e) => handleChange(e)}
+              <strong>{t('workflowAgent.noAgents')}</strong>
-        >
+            </Typography>
-          <div className={classes.agentWrapperDiv} data-cy="AgentsRadioGroup">
+            <Typography className={classes.connectAgent}>
-            {filteredCluster.map((cluster) => (
+              {t('workflowAgent.connectAgent')}
-              <LitmusCard
+            </Typography>
-                key={cluster.cluster_id}
+            <div className={classes.connectBtn}>
-                glow={currentlySelectedAgent === cluster.cluster_id}
+              <ButtonOutlined
-                width="40%"
+                onClick={toggleModel}
-                height="4rem"
+                className={classes.infoContainerButton}
-                className={classes.litmusCard}
+              >
-                borderColor={
+                <Typography>
-                  currentlySelectedAgent === cluster.cluster_id
+                  <ArrowUpwardIcon />
-                    ? palette.primary.main
+                  {t('homeViews.agentConfiguredHome.agentInfoContainer.deploy')}
-                    : palette.border.main
+                </Typography>
+              </ButtonOutlined>
+
+              <Modal
+                height="50%"
+                width="50%"
+                open={modalOpen}
+                onClose={toggleModel}
+                modalActions={
+                  <ButtonOutlined onClick={toggleModel}>
+                    &#x2715;
+                  </ButtonOutlined>
                 }
               >
-                <RadioButton
+                <AgentDeployModal handleClose={toggleModel} />
-                  value={cluster.cluster_id}
+              </Modal>
-                  className={classes.agentRadioButton}
+            </div>
-                >
-                  <div>
-                    <Typography>{cluster.cluster_name}</Typography>
-                    <Typography>{cluster.cluster_id}</Typography>
-                  </div>
-                </RadioButton>
-              </LitmusCard>
-            ))}
           </div>
-        </RadioGroup>
+        ) : (
+          <RadioGroup
+            name="Agent Selection"
+            value={currentlySelectedAgent}
+            onChange={(e) => handleChange(e)}
+          >
+            <div className={classes.agentWrapperDiv} data-cy="AgentsRadioGroup">
+              {filteredCluster?.length > 0 ? (
+                filteredCluster.map((cluster) => (
+                  <LitmusCard
+                    key={cluster.cluster_id}
+                    glow={currentlySelectedAgent === cluster.cluster_id}
+                    width="40%"
+                    height="4rem"
+                    className={classes.litmusCard}
+                    borderColor={
+                      currentlySelectedAgent === cluster.cluster_id
+                        ? palette.primary.main
+                        : palette.border.main
+                    }
+                  >
+                    <RadioButton
+                      value={cluster.cluster_id}
+                      className={classes.agentRadioButton}
+                    >
+                      <div>
+                        <Typography>{cluster.cluster_name}</Typography>
+                        <Typography>{cluster.cluster_id}</Typography>
+                      </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"
+                      {hubs.HubName}
-                    value={hubs.HubName}
+                    </Typography>
-                  >
-                    {hubs.HubName}
                   </MenuItem>
                 ))}
               </Select>
@@ -206,32 +204,47 @@ const ChoosePreDefinedExperiments = () => {
               data-cy="PredefinedWorkflowsRadioGroup"
               onChange={handleChange}
             >
-              {filteredPreDefinedWorkflows?.map((wfData) => (
+              {filteredPreDefinedWorkflows?.length > 0 ? (
-                <LitmusCard
+                filteredPreDefinedWorkflows?.map((wfData) => (
-                  width="100%"
+                  <LitmusCard
-                  height="5rem"
+                    width="100%"
-                  key={wfData}
+                    height="5rem"
-                  borderColor={palette.border.main}
+                    key={wfData}
-                  className={classes.predefinedWorkflowCard}
+                    borderColor={palette.border.main}
-                >
+                    className={classes.predefinedWorkflowCard}
-                  <RadioButton value={wfData}>
+                  >
-                    {/* Wrap the entire body with 100% width to divide into 40-60 */}
+                    <RadioButton value={wfData}>
-                    <div id="body">
+                      {/* Wrap the entire body with 100% width to divide into 40-60 */}
-                      {/* Left Div => Icon + Name of Workflow */}
+                      <div id="body">
-                      <div id="left-div">
+                        {/* Left Div => Icon + Name of Workflow */}
-                        <img
+                        <div id="left-div">
-                          className={classes.experimentIcon}
+                          <img
-                          src={`${config.grahqlEndpoint}/icon/${selectedProjectID}/${selectedHub}/predefined/${wfData}.png`}
+                            className={classes.experimentIcon}
-                          alt="Experiment Icon"
+                            src={`${config.grahqlEndpoint}/icon/${selectedProjectID}/${selectedHub}/predefined/${wfData}.png`}
-                        />
+                            alt="Experiment Icon"
-                        <Typography className={classes.predefinedWorkflowName}>
+                          />
-                          {wfData}
+                          <Typography
-                        </Typography>
+                            className={classes.predefinedWorkflowName}
+                          >
+                            {wfData}
+                          </Typography>
+                        </div>
                       </div>
-                    </div>
+                    </RadioButton>
-                  </RadioButton>
+                  </LitmusCard>
-                </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',
   },