Skip to content
Snippets Groups Projects
Commit f7cab17b authored by Zoltan Runyo's avatar Zoltan Runyo
Browse files

IOC Dialogs

parent fc23a0dd
No related branches found
No related tags found
1 merge request!28Structural UI changes
Hide whitespace changes
Inline Side-by-side
src/components/IOC/CreateIOC.js
+ 3
− 3
View file @ f7cab17b
import React from "react";
import { Redirect } from "react-router-dom";
import { IOCForm } from "./IOCForm";
import { IOCDialog } from "./IOCDialog";
// Process component
export function CreateIOC({ submitCallback, hook, buttonText, init={}}) {
export function CreateIOC({ open, setOpen, submitCallback, hook, title, buttonText, init={}}) {
const [ioc, action] = hook();
if (!ioc) {
return (<IOCForm submitCallback={action} init={init} buttonText={buttonText}/>);
return (<IOCDialog open={open} 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
+ 6
− 11
View file @ f7cab17b
import { Container, Fab, IconButton, useTheme } from "@material-ui/core";
import { DirectionsBoat, Edit } from "@material-ui/icons";
import { Container, Fab, Button } from "@material-ui/core";
import { DirectionsBoat } from "@material-ui/icons";
import React, { useState } from "react";
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { IOCDetails } from "../../components/IOC/IOCDetails";
......@@ -10,15 +10,9 @@ import { Alert } from "@material-ui/lab";
export function IOCConfiguration({ ioc, getIOC, deployment, createDeployment }) {
const [iocFormOpen, setIOCFormOpen] = useState(false);
const theme = useTheme();
console.log(deployment);
useGlobalAppBar(
"IOC Details",
<IconButton onClick={() => { setIOCFormOpen(true) }}>
<Edit style={{ fill: theme.palette.primary.contrastText }} />
</IconButton>
);
useGlobalAppBar("IOC Details");
const closeModal = () => {
setIOCFormOpen(false);
......@@ -76,7 +70,8 @@ export function IOCConfiguration({ ioc, getIOC, deployment, createDeployment })
content = (
<>
<IOCDetails ioc={ioc} getSubset={getSubset} alert={alert} />
<IOCDetails ioc={ioc} getSubset={getSubset} alert={alert}
button={<Button variant="contained" color="secondary" onClick={() => { setIOCFormOpen(true) }}>Edit IOC</Button>} />
{
(ioc && ioc.host) &&
<Fab color={undeployedChanges ? "secondary" : "primary"} variant="extended" style={{
......@@ -91,7 +86,7 @@ export function IOCConfiguration({ ioc, getIOC, deployment, createDeployment })
</Fab>
}
<SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
<CreateIOC submitCallback={closeModal} buttonText="Update" init={formInit} hook={useUpdateIOC.bind(null, ioc.id)} />
<CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} submitCallback={closeModal} title="Edit IOC" buttonText="Update" init={formInit} hook={useUpdateIOC.bind(null, ioc.id)} />
</SimpleModal>
</>
);
......
src/components/IOC/IOCDetails.js
+ 7
− 2
View file @ f7cab17b
import { Grid, Link as MuiLink, Typography } from "@material-ui/core";
import { Grid, Link as MuiLink, Typography, Box } from "@material-ui/core";
import React from "react";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
......@@ -17,7 +17,7 @@ export function diff(o1, o2) {
const defaultSubset = ({ name, description, host, active, status, git, version }) => ({ name, description, host, active, status, git, version });
export function IOCDetails({ ioc, getSubset=defaultSubset, alert }) {
export function IOCDetails({ ioc, getSubset=defaultSubset, alert, button }) {
ioc = { ...ioc };
const subset = getSubset(ioc);
// subset.git = <a href={ioc.git} target="_blank" rel="noreferrer">{ioc.git}</a>
......@@ -28,6 +28,11 @@ export function IOCDetails({ ioc, getSubset=defaultSubset, alert }) {
{alert && <Grid item xs={12}>
{alert}
</Grid>}
<Grid item xs={12}>
<Box display="flex" flexDirection="row-reverse" p={2} m={1}>
{button}
</Box>
</Grid>
<Grid item xs={12}>
<SimpleAccordion defaultExpanded summary={<IOCBadge ioc={ioc} />} >
<KeyValueTable obj={subset} variant="overline" />
......
src/components/IOC/IOCForm.js → src/components/IOC/IOCDialog.js
+ 74
− 0
View file @ f7cab17b
import React, { useEffect, useState } from "react";
import { Button, TextField } from "@material-ui/core";
import { Button, TextField, Dialog, DialogActions, DialogContent, DialogTitle, makeStyles } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";
import { useCSEntrySearch } from "../../api/SwaggerApi";
import { useTypingTimer } from "../common/SearchBoxFilter/TypingTimer";
export function IOCForm({ submitCallback, buttonText, init = {}}) {
const useStyles = makeStyles((theme) => ({
textField: {
marginBottom: theme.spacing(1),
},
}));
export function IOCDialog({ open, setOpen, submitCallback, title, buttonText, init = {}}) {
const classes = useStyles();
const [hosts, getHosts] = useCSEntrySearch();
const [host, setHost] = useState(init.host);
const [query, onHostKeyUp] = useTypingTimer({interval: 500});
const handleClose = () => {
setOpen(false);
};
console.log({...init});
console.log(hosts);
console.log(host);
......@@ -32,23 +44,31 @@ export function IOCForm({ submitCallback, buttonText, init = {}}) {
};
return (
<form onSubmit={onSubmit}>
<TextField autoComplete="off" required id="name" label="name" variant="outlined" defaultValue={init.name || ""} fullWidth />
<TextField autoComplete="off" required id="description" label="description" variant="outlined" defaultValue={init.description || ""} fullWidth />
<TextField autoComplete="off" required id="git" label="git" variant="outlined" defaultValue={init.git || ""} fullWidth />
<TextField autoComplete="off" required id="version" label="version" variant="outlined" defaultValue={init.version || ""} fullWidth />
{/* <TextField autoComplete="off" id = "host" label="host (optional)" variant="outlined" defaultValue={init.host || ""} fullWidth /> */}
<Autocomplete
autoHighlight
id="host"
options={hosts}
defaultValue = { init }
getOptionLabel={option => {console.log(option); return option?.csEntryHost?.fqdn}}
renderInput={(params) => <TextField {...params} required label="host" variant="outlined" />}
onChange={(event, value, reason) => setHost(value)}
onInputChange={(event, value, reason) => {console.log("onInputChange", event, value, reason); event && onHostKeyUp(event.nativeEvent)}}
/>
<Button variant="contained" color="primary" fullWidth type="submit">{buttonText}</Button>
</form>
<Dialog open={open} onClose={handleClose}>
<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 />
<TextField autoComplete="off" className={classes.textField} required id="description" label="description" variant="outlined" defaultValue={init.description || ""} fullWidth />
<TextField autoComplete="off" className={classes.textField} required id="git" label="git" variant="outlined" defaultValue={init.git || ""} fullWidth />
<TextField autoComplete="off" className={classes.textField} required id="version" label="version" variant="outlined" defaultValue={init.version || ""} fullWidth />
<Autocomplete
className={classes.textField}
autoHighlight
id="host"
options={hosts}
defaultValue = { init }
getOptionLabel={option => {console.log(option); return option?.csEntryHost?.fqdn}}
renderInput={(params) => <TextField {...params} required label="host" variant="outlined" />}
onChange={(event, value, reason) => setHost(value)}
onInputChange={(event, value, reason) => {event && onHostKeyUp(event.nativeEvent)}}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">Cancel</Button>
<Button color="primary" variant="contained" type="submit">{buttonText}</Button>
</DialogActions>
</form>
</Dialog>
);
}
\ No newline at end of file
src/components/common/SimpleModal/SimpleModal.js
+ 3
− 3
View file @ f7cab17b
import React from "react";
import { makeStyles, Modal } from "@material-ui/core";
import { makeStyles, Dialog } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({
paper: {
......@@ -34,7 +34,7 @@ export function SimpleModal({ open, setOpen, children }) {
return (
<div>
<Modal
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
......@@ -43,7 +43,7 @@ export function SimpleModal({ open, setOpen, children }) {
<div style={modalStyle} className={classes.paper}>
{children}
</div>
</Modal>
</Dialog>
</div>
);
}
\ No newline at end of file
src/components/navigation/Menu/MenuDrawer.js
+ 6
− 4
View file @ f7cab17b
import React from "react";
import clsx from 'clsx';
import { Container, Drawer, IconButton, Box, makeStyles, useTheme } from "@material-ui/core";
import { Container, Drawer, IconButton, Box, Tooltip, makeStyles, useTheme } from "@material-ui/core";
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
......@@ -80,9 +80,11 @@ export function MenuDrawer({ open, toggleDrawer, children }) {
[classes.drawerClose]: !open,
})}
flexDirection="row-reverse" p={1} m={1}>
<IconButton onClick={handleDrawerClose} className={classes.toggleButton}>
{open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
<Tooltip title={open ? "Collapse sidebar" : "Expand sidebar"} placement="right" arrow>
<IconButton onClick={handleDrawerClose} className={classes.toggleButton}>
{open ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</Tooltip>
</Box>
</div>
</Container>
......
src/views/home/HomeView.js
+ 11
− 13
View file @ f7cab17b
import { Container, Grid, Hidden, IconButton, Paper, useTheme } from "@material-ui/core";
import { AddBox } from "@material-ui/icons";
import { Container, Grid, Hidden, Paper, Button, Box } from "@material-ui/core";
import React, { useContext, useState, useEffect } from "react"
import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
import { SearchableIOCList } from "../../components/IOC/IOCList";
import { CreateIOC } from "../../components/IOC/CreateIOC";
import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
import { SearchableIOCTable } from "../../components/IOC/IOCTable";
import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
import { useCreateIOC, useIOCSearch, userContext } from "../../api/SwaggerApi";
......@@ -19,18 +18,12 @@ export function HomeView() {
console.log("rendering Own IOCs")
const theme = useTheme();
const title = "CCCE / My IOCs";
const button = (
<IconButton color="inherit" onClick={() => { setIOCFormOpen(true) }}>
<AddBox style={{ fill: theme.palette.primary.contrastText }} />
</IconButton>
);
useGlobalAppBar(title, button);
useGlobalAppBar(title);
const closeModal = () => {
setIOCFormOpen(false);
}
}
function preFilter(iocs) {
console.log(iocs);
......@@ -52,12 +45,17 @@ export function HomeView() {
return (
<Container>
<Paper>
<Grid container spacing={1}>
<Grid container spacing={1} justify="flex-end">
<Grid item xs={2}>
<Box display="flex" flexDirection="row-reverse" p={2} m={1}>
<Button variant="contained" color="secondary" onClick={() => { setIOCFormOpen(true) }}>New IOC</Button>
</Box>
</Grid>
<Grid item xs={12}>
{content}
</Grid>
<SimpleModal open={iocFormOpen} setOpen={setIOCFormOpen}>
<CreateIOC submitCallback={closeModal} hook={useCreateIOC} buttonText="Create"/>
<CreateIOC open={iocFormOpen} setOpen={setIOCFormOpen} submitCallback={closeModal} hook={useCreateIOC} title="Create new IOC" buttonText="Create"/>
</SimpleModal>
</Grid>
</Paper>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment