CEC-3149: Archive Manifest option (#241)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>
This commit is contained in:
Alexander Andrews
2022-11-29 13:44:44 -05:00
committed by GitHub
parent eb82c178ca
commit 8e33ca6b7d
9 changed files with 693 additions and 139 deletions

View File

@@ -3423,6 +3423,36 @@ exports[`App Route /packages authenticated 1`] = `
</div>
</div>
</div>
<div
aria-label="Active"
class="MuiToggleButtonGroup-root css-1gjgmky-MuiToggleButtonGroup-root"
role="group"
>
<button
aria-pressed="true"
class="MuiButtonBase-root MuiToggleButton-root Mui-selected MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
tabindex="0"
type="button"
value="true"
>
Active
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
<button
aria-pressed="false"
class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
tabindex="0"
type="button"
value="false"
>
Archived
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"

View File

@@ -105,6 +105,8 @@ const validateManifestUpdate = (data) => {
if (data.type == null || !["forced", "standard"].includes(data.type)) {
throw new Error("Invalid manifest type");
}
if (data.active == null || typeof data.active !== "boolean") throw new Error("Invalid active boolean")
}
export const useManifestsContext = () => useContext(ManifestsContext);

View File

@@ -51,6 +51,7 @@ describe("ManifestContext", () => {
update({
name: "new package",
type: "forced",
active: true,
})
}
/>

View File

@@ -52,6 +52,7 @@ let manifest = {
],
created: "2021-12-09T22:38:11.679943Z",
updated: "2022-01-14T00:47:08.996451Z",
active: true,
};
let manifests = [
{
@@ -60,6 +61,7 @@ let manifests = [
version: "1.0",
created: "2021-07-01T22:40:07.778509Z",
updated: "2021-07-12T18:22:13.736755Z",
active: true,
},
];
let totalManifests = 1;

View File

@@ -8,6 +8,10 @@ import {
TableRow,
Tooltip,
} from "@material-ui/core";
import {
ToggleButton,
ToggleButtonGroup
} from "@mui/material"
import DeleteIcon from "@material-ui/icons/Delete";
import SendIcon from "@material-ui/icons/Send";
import VisibilityIcon from "@material-ui/icons/Visibility";
@@ -82,6 +86,7 @@ const MainForm = () => {
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("asc");
const [search, setSearch] = useState("");
const [active, setActive] = useState(true);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState("");
@@ -127,6 +132,7 @@ const MainForm = () => {
order: `${orderBy} ${order}`,
manifest_type: TYPE_MANIFEST_SOFTWARE,
search,
active: active,
},
token
);
@@ -136,7 +142,7 @@ const MainForm = () => {
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [pageIndex, pageSize, token, orderBy, order, search]);
}, [pageIndex, pageSize, token, orderBy, order, search, active]);
const handleChangePageIndex = (_event, newIndex) => {
setPageIndex(newIndex);
@@ -152,6 +158,12 @@ const MainForm = () => {
setSearch(query);
};
const handleActiveChange = (event, newAlignment) => {
if (newAlignment !== null){
setActive(newAlignment)
}
}
const setDeletePopup = (id, row) => {
setDeleteId(id);
setDeleteRowName(`${row.name} ${row.version}`);
@@ -230,6 +242,15 @@ const MainForm = () => {
<Grid item md={4} className={classes.textJustifyAlign}></Grid>
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
<ToggleButtonGroup
value={active}
exclusive
aria-label="Active"
onChange={handleActiveChange}
>
<ToggleButton value={true}>Active</ToggleButton>
<ToggleButton value={false}>Archived</ToggleButton>
</ToggleButtonGroup>
</Grid>
<Grid item md={4} className={classes.textRightAlign}></Grid>
</Grid>

View File

@@ -168,6 +168,62 @@ exports[`Manifest Details Component Render 1`] = `
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root makeStyles-form-0 MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
for="manifest-active"
>
Type
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
>
<select
aria-invalid="false"
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
id="send-manifest-active"
name="manifest-active"
>
<option
value="true"
>
active
</option>
<option
value="false"
>
archived
</option>
</select>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-0"
style="width: 0.01px;"
>
<span>
</span>
</legend>
</fieldset>
</div>
</div>
<button
aria-label="send command"
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"

View File

@@ -1,15 +1,15 @@
import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Redirect } from "react-router";
import useStyles from "../../useStyles";
import {ManifestsProvider, useManifestsContext} from "../../Contexts/ManifestsContext";
import {useUserContext} from "../../Contexts/UserContext";
import {useStatusContext} from "../../Contexts/StatusContext";
import {Button, FormControl, InputLabel, Select, TextField} from "@material-ui/core";
import { ManifestsProvider, useManifestsContext } from "../../Contexts/ManifestsContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { Button, FormControl, InputLabel, Select, TextField } from "@material-ui/core";
const manifestTypes = [
{value: "standard", label: "Standard"},
{value: "forced", label: "Forced"},
{ value: "standard", label: "Standard" },
{ value: "forced", label: "Forced" },
];
const emptyManifest = {
@@ -19,23 +19,24 @@ const emptyManifest = {
const MainForm = () => {
const {manifest_id} = useParams();
const { manifest_id } = useParams();
const classes = useStyles();
const [manifest, setManifest] = useState(null);
const [redirect, setRedirect] = useState(null);
const {getManifest, busy, updateManifest} = useManifestsContext();
const { getManifest, busy, updateManifest } = useManifestsContext();
const {
token: {
idToken: {jwtToken: token},
idToken: { jwtToken: token },
},
} = useUserContext();
const {setMessage, setTitle, setSitePath} = useStatusContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [name, setName] = useState("");
const [type, setType] = useState("");
const [active, setActive] = useState(true); // So !active = archived
const changeName = (e) => {
@@ -46,10 +47,14 @@ const MainForm = () => {
setType(e.target.value);
};
const changeActive = (e) => {
setActive(e.target.value === 'true')
}
const onSubmit = async (e) => {
e.preventDefault();
try {
const result = await updateManifest(manifest_id, {name, type}, token);
const result = await updateManifest(manifest_id, { name, type, active }, token);
if (!result || result.error) return;
setMessage(`Updated manifest ${manifest_id}`);
@@ -70,6 +75,7 @@ const MainForm = () => {
setManifest(result);
setName(result.name);
setType(result.type);
setActive(result.active)
}
} catch (e) {
setMessage(e.message);
@@ -156,6 +162,29 @@ const MainForm = () => {
))}
</Select>
</FormControl>
<FormControl
className={classes.form}
variant="outlined"
fullWidth
margin="normal"
>
<InputLabel htmlFor="manifest-active" className={classes.whiteBackground}>
Type
</InputLabel>
<Select
native
value={active}
variant="outlined"
inputProps={{
name: "manifest-active",
id: "send-manifest-active",
}}
onChange={changeActive}
>
<option key={0} value={true}>active</option>
<option key={1} value={false}>archived</option>
</Select>
</FormControl>
<Button
type="submit"
aria-label="send command"
@@ -176,7 +205,7 @@ const MainForm = () => {
const ManifestUpdate = () => (
<ManifestsProvider>
<MainForm/>
<MainForm />
</ManifestsProvider>
);