ICSHWI-7427: UI changes to use naming-names

src/api/SwaggerApi.js

@@ -139,7 +139,7 @@ function callAndUnpack(fcn, unpacker = x => x) {
 export function unpackIOC(ioc) {
   console.log(ioc);
   ioc = { ...ioc };
-  const { id, customName, description, owner, createdBy, active, configuredToHost, latestVersion, activeDeployment } = ioc;
+  const { id, description, owner, createdBy, active, configuredToHost, latestVersion, activeDeployment } = ioc;
   const deployedVersion = activeDeployment ? activeDeployment.version : null;
 
   let inflated = null;
@@ -148,7 +148,6 @@ export function unpackIOC(ioc) {
 
   let unpackedIOC = {
     id: id,
-    name: customName,
     description: description,
     owner: owner,
     createdBy: createdBy,
@@ -441,3 +440,18 @@ export function useStatistics() {
 
   return useAsync({ fcn: method, call: false });
 }
+
+export function unpackNaming(naming) {
+  return { ...naming };
+}
+
+export function unpackNamingList(naming) {
+  return naming.map(h => unpackNaming(h));
+}
+
+export function useNamingNames() {
+  const api = useContext(apiContext);
+  const method = callAndUnpack((iocName) => api.apis.Naming.fetchIOCByName({iocName: iocName}), unpackNamingList)
+
+  return useAsync({ fcn: method, call: false, init: [] });
+}
\ No newline at end of file

src/components/IOC/CreateIOC.js

@@ -3,11 +3,11 @@ import { Redirect } from "react-router-dom";
 import { IOCDialog } from "./IOCDialog";
 
 // Process component
-export function CreateIOC({ open, setOpen, submitCallback, hook, title, buttonText, init={}}) {
+export function CreateIOC({ open, setOpen, submitCallback, hook, title, buttonText, isUpdateIoc, init={}}) {
   const [ioc, action] = hook();
 
   if (!ioc) {
-    return (<IOCDialog open={open} setOpen={setOpen} submitCallback={action} init={init} title={title} buttonText={buttonText}/>);
+    return (<IOCDialog open={open} isUpdateIoc={isUpdateIoc} setOpen={setOpen} submitCallback={action} init={init} title={title} buttonText={buttonText}/>);
   }
   else {
     submitCallback(); // This works but throws a warning because I am changing state in the parent while the child is rerendering. Not sure yet how to fix.

src/components/IOC/IOCConfiguration.js

@@ -78,7 +78,7 @@ export function IOCConfiguration({ ioc, getIOC, deployment, createDeployment })
           </Fab>
         }
         <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
-          <CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} submitCallback={closeModal} title="Edit IOC" buttonText="Update" init={formInit} hook={useUpdateIOC.bind(null, ioc.id)} />
+          <CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} isUpdateIoc={true} submitCallback={closeModal} title="Edit IOC" buttonText="Update" init={formInit} hook={useUpdateIOC.bind(null, ioc.id)} />
         </SimpleModal>
       </>
     );

src/components/IOC/IOCDialog.js

 import React, { useEffect, useState } from "react";
 import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, makeStyles } from "@material-ui/core";
 import { Autocomplete } from "@material-ui/lab";
-import { useCSEntrySearch } from "../../api/SwaggerApi";
+import { useCSEntrySearch, useNamingNames } from "../../api/SwaggerApi";
 import { useTypingTimer } from "../common/SearchBoxFilter/TypingTimer";
 
 const useStyles = makeStyles((theme) => ({
@@ -10,11 +10,14 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export function IOCDialog({ open, setOpen, submitCallback, title, buttonText, init = {}}) {
+export function IOCDialog({ open, setOpen, isUpdateIoc, submitCallback, title, buttonText, init = {}}) {
   const classes = useStyles();
   const [hosts, getHosts] = useCSEntrySearch();
   const [host, setHost] = useState(init.host);
   const [query, onHostKeyUp] = useTypingTimer({interval: 500});
+  const [names, getNames] = useNamingNames();
+  const [name, setName] = useState("");
+  const [nameQuery, onNameKeyUp] = useTypingTimer({interval: 500});
 
   const handleClose = () => {
     setOpen(false);
@@ -23,24 +26,38 @@ export function IOCDialog({ open, setOpen, submitCallback, title, buttonText, in
   console.log({...init});
   console.log(hosts);
   console.log(host);
+  console.log(names);
+  console.log(name);
 
   useEffect(() => getHosts(`fqdn:"${query}"`), [query, getHosts]);
 
+  useEffect(() => getNames(nameQuery), [nameQuery, getNames]);
+
   const onSubmit = (event) => {
     event.preventDefault();
-    const { name: nameText, description: descriptionText, git: gitText, version: versionText } = event.currentTarget.elements;
-    const name = nameText.value;
+    const { description: descriptionText, git: gitText, version: versionText } = event.currentTarget.elements;
     const description = descriptionText.value;
     const git = gitText.value;
     const version = versionText.value;
     console.log(host);
-    submitCallback({ 
-      customName: name, 
-      description: description, 
-      owner: "dummyOwner", 
-      sourceUrl: git, 
-      sourceVersion: version, 
-      hostCSEntryId: host ? parseInt(host.csEntryHost.id) : undefined });
+
+    if (isUpdateIoc === true) {
+      submitCallback({  
+        description: description, 
+        owner: "dummyOwner", 
+        sourceUrl: git, 
+        sourceVersion: version, 
+        hostCSEntryId: host ? parseInt(host.csEntryHost.id) : undefined});
+      
+    } else {
+      submitCallback({  
+        description: description, 
+        owner: "dummyOwner", 
+        sourceUrl: git, 
+        sourceVersion: version, 
+        hostCSEntryId: host ? parseInt(host.csEntryHost.id) : undefined,
+        namingId: name ? parseInt(name.id) : undefined });
+    }
   };
 
   return (
@@ -48,7 +65,20 @@ export function IOCDialog({ open, setOpen, submitCallback, title, buttonText, in
       <form onSubmit={onSubmit}>
         <DialogTitle id="form-dialog-title">{title}</DialogTitle>
         <DialogContent>
-          <TextField autoComplete="off" className={classes.textField} required id="name" label="name" variant="outlined" defaultValue={init.name || ""} fullWidth />
+         {isUpdateIoc === false &&
+          <Autocomplete
+            className={classes.textField}
+            autoHighlight
+            id="nameAutocomplete"
+            options={names}
+            defaultValue = { init }
+            getOptionLabel={(option) => {console.log(option?.name); return option?.name}}
+            renderInput={(params) => <TextField {...params} label="IOC name" variant="outlined" />}
+            onChange={(event, value, reason) => setName(value)}
+            onInputChange={(event, value, reason) => {event && onNameKeyUp(event.nativeEvent)}}
+          />
+         }
+
           <TextField autoComplete="off" className={classes.textField} id="description" label="description" variant="outlined" defaultValue={init.description || ""} fullWidth />
           <TextField autoComplete="off" className={classes.textField} id="git" label="git" variant="outlined" defaultValue={init.git || ""} fullWidth />
           <TextField autoComplete="off" className={classes.textField} id="version" label="version" variant="outlined" defaultValue={init.version || ""} fullWidth />

src/views/IOC/IOCListView.js

@@ -18,7 +18,7 @@ export function IOCListView() {
 
   function preProcess(iocs) {
     console.log(iocs);
-    const abcIOCs = iocs.sort((a, b) => a.name.localeCompare(b.name));
+    const abcIOCs = iocs.sort((a, b) => a.latestVersion.namingName.localeCompare(b.latestVersion.namingName));
     return abcIOCs;
   }
 

src/views/home/HomeView.js

@@ -27,7 +27,7 @@ export function HomeView() {
 
   function preFilter(iocs) {
     console.log(iocs);
-    const abcIOCs = iocs.filter((ioc) => ioc.owner === user.loginName).sort((a, b) => a.name.localeCompare(b.name));
+    const abcIOCs = iocs.filter((ioc) => ioc.owner === user.loginName).sort((a, b) => a.latestVersion.namingName.localeCompare(b.latestVersion.namingName));
     return abcIOCs;
   }
 
@@ -62,7 +62,7 @@ export function HomeView() {
             {content}
           </Grid>
           <SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
-            <CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create"/>
+            <CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} isUpdateIoc={false} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create"/>
           </SimpleModal>
         </Grid>
       </Paper>