added input for git repository name

src/components/IOC/CreateIOC/CreateIOC.js

@@ -2,6 +2,7 @@ import React, { useMemo, useEffect, useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
 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,
@@ -30,6 +31,7 @@ export function CreateIOC() {
   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);
 
@@ -205,7 +207,12 @@ export function CreateIOC() {
             )}
             autoSelect
           />
-        ) : null}
+        ) : (
+          <RepositoryName
+            repoName={repoName}
+            onRepoNameChange={(name) => setRepoName(name)}
+          />
+        )}
 
         {error ? (
           <Alert severity="error">{getErrorMessage(error)}</Alert>

src/components/IOC/CreateIOC/RepositoryName.js

+import React, { useState, useCallback } from "react";
+import { Box, Stack, TextField, Typography } from "@mui/material";
+import { string, func } from "prop-types";
+
+const propTypes = {
+  repoName: string,
+  onRepoNameChange: func
+};
+
+const REPO_NAME_REGEX = "^(?=.{4,20}$)[a-z0-9]+([a-z0-9_-]+)*[a-z0-9]$";
+
+export const RepositoryName = ({ repoName, onRepoNameChange }) => {
+  const [valid, setValid] = useState(repoName || repoName.length === 0);
+
+  const handleNameChange = useCallback(
+    (e) => {
+      const reg = new RegExp(REPO_NAME_REGEX);
+      const valid = reg.test(e.target.value);
+      setValid(valid);
+
+      if (valid) {
+        onRepoNameChange(e.target.value);
+      } else {
+        onRepoNameChange("");
+      }
+    },
+    [onRepoNameChange]
+  );
+
+  return (
+    <Stack
+      width="100%"
+      gap={1}
+    >
+      <Box>
+        <TextField
+          autoComplete="off"
+          id="repositoryName"
+          label="Git repository name"
+          variant="outlined"
+          fullWidth
+          onChange={handleNameChange}
+          error={!valid}
+          helperText={
+            !valid
+              ? "Only lowercase alphanumeric chars, hyphens and underscores are allowed in Git repository name (min 4 and max 20 chars)"
+              : null
+          }
+        />
+        <Typography
+          variant="body2"
+          fontStyle="italic"
+          id="iocTypeName-name-preview"
+        >
+          The Git repository name will follow the pattern: &nbsp;
+          <Box
+            sx={{ fontFamily: "Monospace" }}
+            component="span"
+          >
+            e3-ioc-
+            <Box
+              sx={{ fontWeight: "bold", display: "inline" }}
+              component="span"
+            >
+              {repoName ? repoName : "{git repository name}"}
+            </Box>
+          </Box>
+        </Typography>
+      </Box>
+    </Stack>
+  );
+};
+
+RepositoryName.propTypes = propTypes;