Merge pull request #37 from CybercentreCanada/hotfix/conditional_sub_…

…params Hotfix/conditional sub params
CybercentreCanada · Mar 23, 2021 · 953a5ff · 953a5ff
2 parents a7bc1f9 + fd36f3d
commit 953a5ff
Showing 1 changed file with 91 additions and 68 deletions.
diff --git a/src/components/routes/submit.tsx b/src/components/routes/submit.tsx
@@ -204,6 +204,23 @@ function Submit() {
     flow.upload();
   };
 
+  const isSelected = service_name => {
+    let selected = false;
+    settings.services.forEach(cat => {
+      cat.services.forEach(srv => {
+        if (srv.name === service_name) {
+          selected = srv.selected;
+        }
+      });
+    });
+    return selected;
+  };
+
+  const anySelected = () => {
+    const serviceList = settings.service_spec.map(srv => srv.name);
+    return serviceList.some(isSelected);
+  };
+
   const setFileDropperFile = selectedFile => {
     setFile(selectedFile);
   };
@@ -621,82 +638,88 @@ function Submit() {
                 </div>
               </div>
 
-              {settings && settings.service_spec.length !== 0 ? (
+              {settings && settings.service_spec.length !== 0 && anySelected() ? (
                 <div style={{ textAlign: 'left', marginTop: sp4 }}>
                   <Typography variant="h6" gutterBottom>
                     {t('options.service_spec')}
                   </Typography>
                   {settings.service_spec.map((service, idx) => {
                     return (
-                      <div key={idx} style={{ paddingTop: sp1, paddingBottom: sp1 }}>
-                        <Typography variant="subtitle1" gutterBottom>
-                          {service.name}
-                        </Typography>
-                        {service.params.map((param, pidx) => {
-                          return (
-                            <div key={pidx} style={{ paddingBottom: sp1 }}>
-                              {param.type === 'bool' ? (
-                                <div style={{ paddingLeft: sp1 }}>
-                                  <FormControlLabel
-                                    control={
-                                      <Checkbox
-                                        size="small"
-                                        checked={param.value === 'true' || param.value === true}
-                                        name="label"
-                                        onChange={() => setParam(idx, pidx, !param.value)}
-                                      />
-                                    }
-                                    label={
-                                      <Typography variant="body2" style={{ textTransform: 'capitalize' }}>
+                      isSelected(service.name) && (
+                        <div key={idx} style={{ paddingTop: sp1, paddingBottom: sp1 }}>
+                          <Typography variant="subtitle1" gutterBottom>
+                            {service.name}
+                          </Typography>
+                          {service.params.map((param, pidx) => {
+                            return (
+                              <div key={pidx} style={{ paddingBottom: sp1 }}>
+                                {param.type === 'bool' ? (
+                                  <div style={{ paddingLeft: sp1 }}>
+                                    <FormControlLabel
+                                      control={
+                                        <Checkbox
+                                          size="small"
+                                          checked={param.value === 'true' || param.value === true}
+                                          name="label"
+                                          onChange={() => setParam(idx, pidx, !param.value)}
+                                        />
+                                      }
+                                      label={
+                                        <Typography variant="body2" style={{ textTransform: 'capitalize' }}>
+                                          {param.name.replace(/_/g, ' ')}
+                                        </Typography>
+                                      }
+                                      className={classes.item}
+                                    />
+                                  </div>
+                                ) : (
+                                  <>
+                                    <div>
+                                      <Typography
+                                        variant="caption"
+                                        gutterBottom
+                                        style={{ textTransform: 'capitalize' }}
+                                      >
                                         {param.name.replace(/_/g, ' ')}
                                       </Typography>
-                                    }
-                                    className={classes.item}
-                                  />
-                                </div>
-                              ) : (
-                                <>
-                                  <div>
-                                    <Typography variant="caption" gutterBottom style={{ textTransform: 'capitalize' }}>
-                                      {param.name.replace(/_/g, ' ')}
-                                    </Typography>
-                                  </div>
-                                  {param.type === 'list' ? (
-                                    <Select
-                                      margin="dense"
-                                      value={param.value}
-                                      variant="outlined"
-                                      onChange={event => setParam(idx, pidx, event.target.value)}
-                                      fullWidth
-                                    >
-                                      {param.list ? (
-                                        param.list.map((item, i) => {
-                                          return (
-                                            <MenuItem key={i} value={item}>
-                                              {item}
-                                            </MenuItem>
-                                          );
-                                        })
-                                      ) : (
-                                        <MenuItem value="" />
-                                      )}
-                                    </Select>
-                                  ) : (
-                                    <TextField
-                                      variant="outlined"
-                                      type={param.type === 'int' ? 'number' : 'text'}
-                                      size="small"
-                                      fullWidth
-                                      defaultValue={param.value}
-                                      onChange={event => setParamAsync(idx, pidx, event.target.value)}
-                                    />
-                                  )}
-                                </>
-                              )}
-                            </div>
-                          );
-                        })}
-                      </div>
+                                    </div>
+                                    {param.type === 'list' ? (
+                                      <Select
+                                        margin="dense"
+                                        value={param.value}
+                                        variant="outlined"
+                                        onChange={event => setParam(idx, pidx, event.target.value)}
+                                        fullWidth
+                                      >
+                                        {param.list ? (
+                                          param.list.map((item, i) => {
+                                            return (
+                                              <MenuItem key={i} value={item}>
+                                                {item}
+                                              </MenuItem>
+                                            );
+                                          })
+                                        ) : (
+                                          <MenuItem value="" />
+                                        )}
+                                      </Select>
+                                    ) : (
+                                      <TextField
+                                        variant="outlined"
+                                        type={param.type === 'int' ? 'number' : 'text'}
+                                        size="small"
+                                        fullWidth
+                                        defaultValue={param.value}
+                                        onChange={event => setParamAsync(idx, pidx, event.target.value)}
+                                      />
+                                    )}
+                                  </>
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )
                     );
                   })}
                 </div>