CE-2812: Replace fetching data banner with linear progress

Before job is started lineear progress is displayed instead of a banner saying Fetching data. Once the job is queued then a banner is visible stating the current job step (as before). Should correspond to stepper state, but they are out of sync. This issue is reported as a bug and out of this scope.

To test: Deploy or Undeploy one of our test IOC: s in Demo

src/components/IOC/CreateIOC/CreateIOC.js

 import React, { useMemo, useEffect, useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
+import { useCustomSnackbar } from "../../common/snackbar";
+import { RepositoryOptions, WITHOUT_REPO } from "./RepositoryOptions";
+import { RepositoryName } from "./RepositoryName";
 import { RootPaper } from "@ess-ics/ce-ui-common/dist/components/common/container/RootPaper";
 import {
   Alert,
@@ -24,10 +27,13 @@ const createRequestParams = (query) => {
 
 export function CreateIOC() {
   const navigate = useNavigate();
-  const [name, setName] = useState();
-  const [gitId, setGitId] = useState(null);
+  const showSnackBar = useCustomSnackbar();
+  const [namingEntity, setNamingEntity] = useState({});
+  const [gitProject, setGitProject] = useState({});
   const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
   const [repoQuery, onRepoKeyUp] = useTypingTimer({ interval: 500 });
+  const [selectedRepoOption, setSelectedRepoOption] = useState(WITHOUT_REPO);
+  const [repoName, setRepoName] = useState("");
 
   const client = useContext(apiContext);
 
@@ -65,11 +71,6 @@ export function CreateIOC() {
     call: false
   });
 
-  // Return home on cancel
-  const handleCancel = () => {
-    navigate("/");
-  };
-
   // create the ioc on form submit
   const onSubmit = (event) => {
     event.preventDefault();
@@ -77,13 +78,20 @@ export function CreateIOC() {
       {},
       {
         requestBody: {
-          gitProjectId: gitId,
-          namingUuid: name ? name.uuid : undefined
+          gitProjectId: gitProject.id,
+          namingUuid: namingEntity ? namingEntity.uuid : undefined,
+          repository_name: repoName ? repoName : undefined
         }
       }
     );
   };
 
+  const handleSelectRepoOption = (option) => {
+    setSelectedRepoOption(option);
+    setNamingEntity({});
+    setGitProject({});
+  };
+
   // fetch new names when name query changes
   useEffect(() => {
     if (nameQuery) {
@@ -100,9 +108,15 @@ export function CreateIOC() {
   // navigate home once ioc created
   useEffect(() => {
     if (ioc) {
-      navigate(`/iocs/${ioc.id}`);
+      showSnackBar(
+        selectedRepoOption === WITHOUT_REPO
+          ? "IOC created"
+          : "IOC created with a repository",
+        "success"
+      );
+      navigate(`/iocs/${ioc.id}?&tab=Management`);
     }
-  }, [ioc, navigate]);
+  }, [ioc, showSnackBar, selectedRepoOption, navigate]);
 
   return (
     <RootPaper
@@ -116,15 +130,18 @@ export function CreateIOC() {
         width="600px"
       >
         <Typography variant="h2">Create new IOC</Typography>
+        <RepositoryOptions
+          selectedRepoOption={selectedRepoOption}
+          onSelectRepoOption={handleSelectRepoOption}
+        />
         <Autocomplete
           autoHighlight
           id="nameAutocomplete"
+          value={namingEntity}
           options={nameQuery ? names ?? [] : []}
           loading={loadingNames}
           clearOnBlur={false}
-          getOptionLabel={(option) => {
-            return option?.name ?? "";
-          }}
+          getOptionLabel={(option) => option?.name ?? ""}
           renderInput={(params) => (
             <TextField
               {...params}
@@ -146,70 +163,74 @@ export function CreateIOC() {
                 )
               }}
               disabled={loading}
-              helperText={name ? name.description : ""}
+              helperText={namingEntity ? namingEntity.description : ""}
             />
           )}
-          onChange={(event, value, reason) => {
-            setName(value);
-          }}
-          onInputChange={(event) => {
-            event && onNameKeyUp(event.nativeEvent);
-          }}
+          onChange={(_, value) => setNamingEntity(value)}
+          onInputChange={(event) => event && onNameKeyUp(event.nativeEvent)}
           autoSelect
         />
+        {selectedRepoOption === WITHOUT_REPO ? (
+          <Autocomplete
+            autoHighlight
+            id="gitId"
+            value={gitProject}
+            options={repoQuery || gitProject ? allowedGitProjects ?? [] : []}
+            loading={loadingAllowedGitProjects}
+            clearOnBlur={false}
+            getOptionLabel={(option) => {
+              return option?.url ?? "";
+            }}
+            onChange={(_, value) => setGitProject(value)}
+            onInputChange={(event) => event && onRepoKeyUp(event.nativeEvent)}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label="Git repository"
+                variant="outlined"
+                fullWidth
+                required
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <React.Fragment>
+                      {loadingAllowedGitProjects ? (
+                        <CircularProgress
+                          color="inherit"
+                          size={20}
+                        />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </React.Fragment>
+                  )
+                }}
+                disabled={loading}
+              />
+            )}
+            autoSelect
+          />
+        ) : (
+          <RepositoryName
+            repoName={repoName}
+            onRepoNameChange={(name) => setRepoName(name)}
+          />
+        )}
 
-        <Autocomplete
-          autoHighlight
-          id="gitId"
-          options={repoQuery || gitId ? allowedGitProjects ?? [] : []}
-          loading={loadingAllowedGitProjects}
-          clearOnBlur={false}
-          getOptionLabel={(option) => {
-            return option?.url ?? "";
-          }}
-          onChange={(event, value, reason) => {
-            setGitId(value?.id);
-          }}
-          onInputChange={(event) => {
-            event && onRepoKeyUp(event.nativeEvent);
-          }}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Git repository"
-              variant="outlined"
-              fullWidth
-              required
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: (
-                  <React.Fragment>
-                    {loadingAllowedGitProjects ? (
-                      <CircularProgress
-                        color="inherit"
-                        size={20}
-                      />
-                    ) : null}
-                    {params.InputProps.endAdornment}
-                  </React.Fragment>
-                )
-              }}
-              disabled={loading}
-            />
-          )}
-          autoSelect
-        />
         {error ? (
           <Alert severity="error">{getErrorMessage(error)}</Alert>
-        ) : (
-          <></>
-        )}
+        ) : null}
+        {loading ? (
+          <LinearProgress
+            aria-busy="true"
+            aria-label="Creating IOC, please wait"
+          />
+        ) : null}
         <Stack
           direction="row"
           justifyContent="flex-end"
         >
           <Button
-            onClick={handleCancel}
+            onClick={() => navigate("/")}
             color="primary"
             disabled={loading}
           >
@@ -219,17 +240,15 @@ export function CreateIOC() {
             color="primary"
             variant="contained"
             type="submit"
-            disabled={!name || !gitId || loading}
+            disabled={
+              loading || !namingEntity || selectedRepoOption === WITHOUT_REPO
+                ? !gitProject
+                : !repoName
+            }
           >
             Create
           </Button>
         </Stack>
-        {loading ? (
-          <LinearProgress
-            aria-busy="true"
-            aria-label="Creating IOC, please wait"
-          />
-        ) : null}
       </Stack>
     </RootPaper>
   );