Icshwi 8184 ioc admin

src/api/SwaggerApi.js

@@ -558,4 +558,25 @@ export function useAllowedGitProjects() {
   const api = useContext(apiContext);
   const method = callAndUnpack((repoUrl) => api.apis.Git.listProjects(), unpackAllowedGitProjects)
   return useAsync({ fcn: method, call: false, init: [] });
+}
+
+export function useDeleteIOC(id) {
+  const api = useContext(apiContext);
+  const method = callAndUnpack(api.apis.IOCs.deleteIoc);
+  return useAsync({ fcn: method.bind(null, {iocId: id}), call: false });
+}
+
+export function useUpdateIoc(id) {
+  const api = useContext(apiContext);
+  const method = callAndUnpack(
+    body => api.apis.IOCs.updateIoc({ iocId: id }, { requestBody: body }),
+    unpackUpdateIoc
+  );
+  return useAsync({ fcn: method, call: false });
+}
+
+export function unpackUpdateIoc(updateIoc) {
+  const d = { ...updateIoc };
+  console.log(d);
+  return d;
 }
\ No newline at end of file

src/components/IOC/IOCAdmin.js

+import React from 'react';
+import IOCDelete from './IOCDelete';
+import IOCDetailAdmin from './IOCDetailAdmin';
+
+export default function IOCAdmin({ ioc, getIOC, resetTab }) {
+
+    return (
+        <>
+            <IOCDetailAdmin ioc={ioc} getIOC={getIOC} resetTab={resetTab}/>
+            <IOCDelete ioc={ioc} />
+        </>
+    );
+}
\ No newline at end of file

src/components/IOC/IOCDelete.js

+import React, { useState, useRef } from 'react';
+import { useHistory } from "react-router-dom";
+import { makeStyles } from '@material-ui/core/styles';
+import { Button, Typography } from "@material-ui/core";
+import { theme } from "../../Theme";
+import { useDeleteIOC } from '../../api/SwaggerApi';
+import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
+import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
+import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
+
+const useStyles = makeStyles({
+    deleteButton: {
+        backgroundColor: '#aa2e25',
+        color: '#FFFFFF',
+        "&:disabled": {
+            backgroundColor: '#8d8d8d',
+            color: '#FFFFFF',
+        },
+        "&:hover": {
+            backgroundColor: '#6c0000',
+            color: '#FFFFFF',
+        }
+    },
+});
+
+export default function IOCDelete({ ioc }) {
+    const classes = useStyles(theme);
+
+    const history = useHistory();
+
+    //for the dialog
+    const [adHocDialogOpen, setAdHocDialogOpen] = useState(false);
+    const [adHocDialogTitle, setAdHocDiatlogTitle] = useState();
+    const [adHocDialogDescription, setAdHocDialogDescription] = useState();
+    const callbackRef = useRef();
+
+    const [, deleteIOC] = useDeleteIOC(ioc.id);
+
+    //Setting up dialog properties
+    const openDeleteModal = () => {
+        setAdHocDiatlogTitle("Deleting IOC");
+        setAdHocDialogDescription(
+            <>
+                <Typography style={{ display: 'inline-block' }}>Are you sure want to delete &nbsp;</Typography>
+                <Typography style={{ fontFamily: "monospace", display: 'inline-block' }}> {ioc.namingName}? </Typography>
+            </>);
+        callbackRef.current = deleteIoc;
+        setAdHocDialogOpen(true);
+    }
+
+    //what to do when deleting IOC
+    const deleteIoc = async () => {
+
+        await deleteIOC();
+        history.goBack();
+    }
+
+
+    return (
+        <>
+            <SimpleModal open={adHocDialogOpen} setOpen={setAdHocDialogOpen}>
+                <ConfirmationDialog open={adHocDialogOpen} setOpen={setAdHocDialogOpen} title={adHocDialogTitle} description={adHocDialogDescription} callback={callbackRef.current} />
+            </SimpleModal>
+
+            <SimpleAccordion summary="Delete IOC" defaultExpanded>
+                <Button className={classes.deleteButton} onClick={openDeleteModal}>Delete IOC</Button>
+            </SimpleAccordion>
+        </>
+    );
+}
\ No newline at end of file

src/components/IOC/IOCDetailAdmin.js

+import React, { useState, useEffect, useRef } from 'react';
+import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
+import { Button, makeStyles, TextField, Typography } from "@material-ui/core";
+import { Autocomplete } from "@material-ui/lab";
+import { useAllowedGitProjects, useNamingNames, useUpdateIoc } from "../../api/SwaggerApi";
+import { useTypingTimer } from "../common/SearchBoxFilter/TypingTimer";
+import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
+import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
+
+const useStyles = makeStyles((theme) => ({
+    textField: {
+        marginBottom: theme.spacing(1),
+    },
+}));
+
+export default function IOCDetailAdmin({ ioc, getIOC, resetTab }) {
+    const classes = useStyles();
+
+    const [gitUrl, setGitUrl] = useState(ioc.git);
+    const [allowedGitProjects, getAllowedGitProjects] = useAllowedGitProjects();
+    const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 });
+    const [names, getNames] = useNamingNames();
+    const [name, setName] = useState({ id: ioc.latestVersion.externalNameId, description: ioc.description, name: ioc.latestVersion.namingName });
+    const [owner, setOwner] = useState(ioc.owner);
+
+    //for the dialog
+    const [adHocDialogOpen, setAdHocDialogOpen] = useState(false);
+    const [adHocDialogTitle, setAdHocDiatlogTitle] = useState();
+    const [adHocDialogDescription, setAdHocDialogDescription] = useState();
+    const callbackRef = useRef();
+
+    const [uioc, actionUpdateIoc] = useUpdateIoc(ioc.id);
+
+    useEffect(() => {
+        getAllowedGitProjects();
+    }, [getAllowedGitProjects]);
+
+    useEffect(() => getNames(nameQuery), [nameQuery, getNames]);
+
+    //when user clicks Submit button a dialog should open
+    const onSubmit = (event) => {
+        event.preventDefault();
+
+        openModifyModal();
+    }
+
+    //Setting up dialog properties
+    const openModifyModal = () => {
+        setAdHocDiatlogTitle("Modifying IOC");
+        setAdHocDialogDescription(
+            <>
+                <Typography style={{ display: 'inline-block' }}>Are you sure want to modify &nbsp;</Typography>
+                <Typography style={{ fontFamily: "monospace", display: 'inline-block' }}> {ioc.namingName}? </Typography>
+            </>);
+        callbackRef.current = modifyIoc;
+        setAdHocDialogOpen(true);
+    }
+
+    //what to do when modifying IOC
+    const modifyIoc = () => {
+
+         actionUpdateIoc({
+            owner: owner,
+            sourceUrl: gitUrl,
+            externalNameId: name ? parseInt(name.id) : null
+        });
+    }
+
+    useEffect(() => 
+    {
+      if(uioc) {
+        getIOC();
+        resetTab();
+      }
+    }, [uioc, getIOC, resetTab]);
+
+    return (
+        <>
+            <SimpleModal open={adHocDialogOpen} setOpen={setAdHocDialogOpen}>
+                <ConfirmationDialog open={adHocDialogOpen} setOpen={setAdHocDialogOpen} title={adHocDialogTitle} description={adHocDialogDescription} callback={callbackRef.current} />
+            </SimpleModal>
+
+            <SimpleAccordion summary="Modify IOC" defaultExpanded>
+                <form onSubmit={onSubmit} style={{ width: "100%" }}>
+                    <Autocomplete
+                        className={classes.textField}
+                        autoHighlight
+                        id="namingName"
+                        options={names}
+                        defaultValue={name}
+                        getOptionLabel={(option) => { console.log(option?.name); return option?.name }}
+                        renderInput={(params) => <TextField {...params} label="IOC name" variant="outlined" required />}
+                        onChange={(event, value, reason) => setName(value)}
+                        onInputChange={(event, value, reason) => { event && onNameKeyUp(event.nativeEvent) }}
+                    />
+
+                    <Autocomplete
+                        className={classes.textField}
+                        autoHighlight
+                        id="gitUrl"
+                        options={allowedGitProjects}
+                        defaultValue={gitUrl}
+                        getOptionLabel={(option) => { return option }}
+                        onChange={(event, value, reason) => setGitUrl(value)}
+                        renderInput={(params) => <TextField {...params} label="Git repository" variant="outlined" fullWidth required />} />
+
+                    <TextField id="owner" label="Owner" variant="outlined" fullWidth required value={owner} onChange={(event) => setOwner(event.target.value)} />
+
+                    <br /><br />
+                    <Button color="primary" variant="contained" type="submit">Modify IOC</Button>
+                </form>
+            </SimpleAccordion>
+        </>
+    )
+}
\ No newline at end of file

src/components/IOC/IOCService.js

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, useContext } from "react";
 import { useStartIOC, useStopIOC } from "../../api/SwaggerApi";
 import { CommandJobStatus } from "./CommandJobStatus";
 import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
-import { ConfirmAdHocDialog } from "./ConfirmAdHocDialog";
+import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
 import { notificationContext } from "../../components/common/notification/Notifications";
 import { theme } from "../../Theme";
 
@@ -148,7 +148,7 @@ export function IOCService({ ioc, getIOC, ongoingCommand, getCommands }) {
   return (
     <>
       <SimpleModal open={adHocDialogOpen} setOpen={setAdHocDialogOpen}>
-        <ConfirmAdHocDialog open={adHocDialogOpen} setOpen={setAdHocDialogOpen} title={adHocDialogTitle} description={adHocDialogDescription} callback={callbackRef.current} />
+        <ConfirmationDialog open={adHocDialogOpen} setOpen={setAdHocDialogOpen} title={adHocDialogTitle} description={adHocDialogDescription} callback={callbackRef.current} />
       </SimpleModal>
 
       <Grid container spacing={1}>

src/components/IOC/ConfirmAdHocDialog.js → src/components/dialog/ConfirmationDialog.js

@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme) => ({
      }
  }));
 
-export function ConfirmAdHocDialog({ open, setOpen, title, description, callback }) {
+export function ConfirmationDialog({ open, setOpen, title, description, callback }) {
     const classes = useStyles();
 
     const handleClose = () => {

src/views/IOC/IOCDetailsView.js

@@ -5,6 +5,8 @@ import { useIOC } from "../../api/SwaggerApi";
 import { IOCLiveStatus } from "../../components/IOC/IOCLiveStatus";
 import { IOCManage } from "../../components/IOC/IOCManage";
 import { useHistory } from "react-router-dom";
+import IOCAdmin from "../../components/IOC/IOCAdmin";
+import AccessControl from "../../components/auth/AccessControl";
 
 export function IOCDetailsView({ id }) {
   const [selectedTab, setSelectedTab] = useState("Manage deployment");
@@ -28,6 +30,14 @@ export function IOCDetailsView({ id }) {
     history.goBack();
   };
 
+  function resetTab() {
+    if (ioc && ioc.activeDeployment) {
+      setSelectedTab("Live Status");
+    } else {
+      setSelectedTab("Manage deployment");
+    }
+  }
+
   return (
     <Paper>
       <Grid container spacing={1}>
@@ -38,20 +48,36 @@ export function IOCDetailsView({ id }) {
         </Grid>
         <Grid item xs={11}>
           <Grid container justify="center">
-            <Tabs
-              value={selectedTab}
-              onChange={handleTabChange}
-              indicatorColor="primary"
-              textColor="primary"
-            >
-              {ioc && ioc.activeDeployment && <Tab label={<Typography variant="h5">Live Status</Typography>} value="Live Status" />}
-              {ioc && <Tab label={<Typography variant="h5">Manage deployment</Typography>} value="Manage deployment" />}
-            </Tabs>
+            <AccessControl allowedRoles={["DeploymentToolAdmin"]}
+              renderNoAccess={() =>
+                <Tabs
+                  value={selectedTab}
+                  onChange={handleTabChange}
+                  indicatorColor="primary"
+                  textColor="primary"
+                >
+                  {ioc && ioc.activeDeployment && <Tab label={<Typography variant="h5">Live Status</Typography>} value="Live Status" />}
+                  {ioc && <Tab label={<Typography variant="h5">Manage deployment</Typography>} value="Manage deployment" />}
+                </Tabs>
+              }>
+                
+              <Tabs
+                value={selectedTab}
+                onChange={handleTabChange}
+                indicatorColor="primary"
+                textColor="primary"
+              >
+                {ioc && ioc.activeDeployment && <Tab label={<Typography variant="h5">Live Status</Typography>} value="Live Status" />}
+                {ioc && <Tab label={<Typography variant="h5">Manage deployment</Typography>} value="Manage deployment" />}
+                {ioc && <Tab label={<Typography variant="h5">IOC Admin</Typography>} value="IOC Admin" />}
+              </Tabs>
+            </AccessControl>
           </Grid>
         </Grid>
-        <Grid item xs={12} style={{paddingBottom: 0}}>
+        <Grid item xs={12} style={{ paddingBottom: 0 }}>
           {selectedTab === "Live Status" && <IOCLiveStatus ioc={ioc} getIOC={getIOC} />}
           {selectedTab === "Manage deployment" && <IOCManage ioc={ioc} getIOC={getIOC} />}
+          {selectedTab === "IOC Admin" && <IOCAdmin ioc={ioc} getIOC={getIOC} resetTab={resetTab}/>}
         </Grid>
       </Grid>
     </Paper>