Add package updates, car updates, and vehicle screens (#25)
This commit is contained in:
John Wu
20
src/components/UpdatePackages/Create/Create.test.js
Normal file
20
src/components/UpdatePackages/Create/Create.test.js
Normal file
@@ -0,0 +1,20 @@
|
||||
jest.mock("../../Contexts/UserContext");
|
||||
jest.mock("../../Contexts/FileUploadContext");
|
||||
jest.mock("../../Contexts/VehicleContext");
|
||||
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { render, cleanup, waitFor } from "@testing-library/react";
|
||||
import FileUploadForm from "./index";
|
||||
import { setToken } from "../../Contexts/UserContext";
|
||||
import { StatusProvider } from "../../Contexts/StatusContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../utils/testing"
|
||||
|
||||
describe("File Upload Form", () => {
|
||||
it("Should render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const { container } = render(<StatusProvider><BrowserRouter><FileUploadForm /></BrowserRouter></StatusProvider>);
|
||||
await waitFor(() => {});
|
||||
expect(container).toMatchSnapshot();
|
||||
cleanup();
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,237 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`File Upload Form Should render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fileuploadprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-1"
|
||||
>
|
||||
<h1
|
||||
class="MuiTypography-root MuiTypography-h5"
|
||||
>
|
||||
Upload Update Package
|
||||
</h1>
|
||||
<form
|
||||
action="{onSubmit}"
|
||||
class="makeStyles-form-3"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="packagename"
|
||||
id="packagename-label"
|
||||
>
|
||||
Package name
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="packagename"
|
||||
maxlength="255"
|
||||
name="packagename"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-23"
|
||||
>
|
||||
<span>
|
||||
Package name
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="version"
|
||||
id="version-label"
|
||||
>
|
||||
Version
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="version"
|
||||
maxlength="255"
|
||||
name="version"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-23"
|
||||
>
|
||||
<span>
|
||||
Version
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
|
||||
data-shrink="false"
|
||||
for="description"
|
||||
id="description-label"
|
||||
>
|
||||
Description
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
|
||||
>
|
||||
<textarea
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
|
||||
id="description"
|
||||
maxlength="5120"
|
||||
name="description"
|
||||
placeholder="Package description"
|
||||
rows="4"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-23"
|
||||
>
|
||||
<span>
|
||||
Description
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
|
||||
data-shrink="false"
|
||||
for="releasenotes"
|
||||
id="releasenotes-label"
|
||||
>
|
||||
Release Notes URL
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="releasenotes"
|
||||
maxlength="1024"
|
||||
name="releasenotes"
|
||||
placeholder="Release Notes URL"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-21 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-23"
|
||||
>
|
||||
<span>
|
||||
Release Notes URL
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiDropzoneArea-root"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
autocomplete="off"
|
||||
style="display: none;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="MuiDropzoneArea-textContainer"
|
||||
>
|
||||
<p
|
||||
class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
|
||||
>
|
||||
Drag and drop a file here or click
|
||||
</p>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiDropzoneArea-icon"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
152
src/components/UpdatePackages/Create/index.jsx
Normal file
152
src/components/UpdatePackages/Create/index.jsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React, { useRef } from "react";
|
||||
import { Button, TextField, Typography } from "@material-ui/core";
|
||||
import { DropzoneArea } from "material-ui-dropzone";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import {
|
||||
useFileUploadContext,
|
||||
FileUploadProvider,
|
||||
} from "../../Contexts/FileUploadContext";
|
||||
import ModalProgressBar from "../../ModalProgressBar";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const FileUploadZone = ({ classes, token }) => {
|
||||
const { setFiles } = useFileUploadContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropzoneArea
|
||||
id="dropzone"
|
||||
showPreviews={true}
|
||||
showPreviewsInDropzone={false}
|
||||
useChipsForPreview
|
||||
previewGridProps={{ container: { spacing: 1, direction: "row" } }}
|
||||
previewChipProps={{ classes: { root: classes.previewChip } }}
|
||||
previewText="Selected files"
|
||||
maxFileSize={1e9}
|
||||
filesLimit={1}
|
||||
showAlerts={false}
|
||||
onChange={(files) => setFiles(files)}
|
||||
onDelete={(files) => setFiles(files)}
|
||||
onDropRejected={(files) => {
|
||||
setMessage(`Rejected ${files[0].name} too large`);
|
||||
}}
|
||||
/>
|
||||
<ModalProgressBar />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const MainForm = () => {
|
||||
const { uploading, upload, files } = useFileUploadContext();
|
||||
const { token } = useUserContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const classes = useStyles();
|
||||
const packagenameEl = useRef(null);
|
||||
const versionEl = useRef(null);
|
||||
const descEl = useRef(null);
|
||||
const releasenotesEl = useRef(null);
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const {
|
||||
idToken: { jwtToken: authToken },
|
||||
} = token;
|
||||
const formData = {
|
||||
packagename: packagenameEl.current.value,
|
||||
version: versionEl.current.value,
|
||||
description: descEl.current.value,
|
||||
releasenotes: releasenotesEl.current.value,
|
||||
};
|
||||
|
||||
await upload(formData, authToken, files);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<Typography component="h1" variant="h5">
|
||||
Upload Update Package
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<TextField
|
||||
id="packagename"
|
||||
name="packagename"
|
||||
label="Package name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={packagenameEl}
|
||||
/>
|
||||
<TextField
|
||||
id="version"
|
||||
name="version"
|
||||
label="Version"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={versionEl}
|
||||
/>
|
||||
<TextField
|
||||
id="description"
|
||||
name="description"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "5120",
|
||||
}}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
placeholder="Package description"
|
||||
inputRef={descEl}
|
||||
/>
|
||||
<TextField
|
||||
id="releasenotes"
|
||||
name="releasenotes"
|
||||
label="Release Notes URL"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "1024",
|
||||
}}
|
||||
fullWidth
|
||||
placeholder="Release Notes URL"
|
||||
inputRef={releasenotesEl}
|
||||
/>
|
||||
<FileUploadZone classes={classes} />
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={uploading}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{uploading ? "Uploading..." : "Submit"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FileUploadForm() {
|
||||
return (
|
||||
<FileUploadProvider>
|
||||
<MainForm />
|
||||
</FileUploadProvider>
|
||||
);
|
||||
}
|
||||
198
src/components/UpdatePackages/Edit/index.jsx
Normal file
198
src/components/UpdatePackages/Edit/index.jsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { Button, TextField, Typography } from "@material-ui/core";
|
||||
|
||||
import {
|
||||
UpdatesProvider,
|
||||
useUpdatesContext,
|
||||
} from "../../Contexts/UpdatesContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { tsLocalDateTimeString } from "../../../utils/dates";
|
||||
|
||||
const MainForm = () => {
|
||||
const { id } = useParams();
|
||||
const { getPackages, updatePackage, packages, busy } = useUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const [packageName, setPackageName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [link, setLink] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [releaseNotesLink, setReleaseNotesLink] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
const classes = useStyles();
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
id: parseInt(id),
|
||||
package_name: packageName,
|
||||
version,
|
||||
link,
|
||||
desc: description,
|
||||
release_notes: releaseNotesLink,
|
||||
};
|
||||
await updatePackage(data, token);
|
||||
setMessage(`Updated ${packageName} ${version}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
const getData = async () => {
|
||||
try {
|
||||
getPackages({ id: parseInt(id) }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
const handleChange = (event) => {
|
||||
const field = event.target.id;
|
||||
const value = event.target.value;
|
||||
|
||||
if (field === "packagename") {
|
||||
setPackageName(value);
|
||||
} else if (field === "version") {
|
||||
setVersion(value);
|
||||
} else if (field === "link") {
|
||||
setLink(value);
|
||||
} else if (field === "description") {
|
||||
setDescription(value);
|
||||
} else if (field === "releasenotes") {
|
||||
setReleaseNotesLink(value);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
useEffect(() => {
|
||||
if (!packages || packages.length === 0) return;
|
||||
var data = packages[0];
|
||||
|
||||
setPackageName(data.package_name);
|
||||
setVersion(data.version);
|
||||
setLink(data.link);
|
||||
setDescription(data.desc || "");
|
||||
setReleaseNotesLink(data.release_notes || "");
|
||||
setCreateDate(tsLocalDateTimeString(data.timestamp));
|
||||
}, [packages]);
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<Typography component="h1" variant="h5">
|
||||
Update Package {id}
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<TextField
|
||||
label="Create Date"
|
||||
variant="filled"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
readOnly: true,
|
||||
maxLength: "1024",
|
||||
}}
|
||||
value={createDate}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="packagename"
|
||||
name="packagename"
|
||||
label="Package name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
value={packageName}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="version"
|
||||
name="version"
|
||||
label="Version"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
value={version}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="link"
|
||||
name="link"
|
||||
label="Package link"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "1024",
|
||||
}}
|
||||
value={link}
|
||||
onChange={handleChange}
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="description"
|
||||
name="description"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "5120",
|
||||
}}
|
||||
value={description}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
placeholder="Package description"
|
||||
/>
|
||||
<TextField
|
||||
id="releasenotes"
|
||||
name="releasenotes"
|
||||
label="Release Notes URL"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "1024",
|
||||
}}
|
||||
value={releaseNotesLink}
|
||||
onChange={handleChange}
|
||||
fullWidth
|
||||
placeholder="Release Notes URL"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Updating..." : "Submit"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UpdatePackageEditForm = () => (
|
||||
<UpdatesProvider>
|
||||
<MainForm />
|
||||
</UpdatesProvider>
|
||||
);
|
||||
|
||||
export default UpdatePackageEditForm;
|
||||
156
src/components/UpdatePackages/List/index.jsx
Normal file
156
src/components/UpdatePackages/List/index.jsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
import EditIcon from "@material-ui/icons/Edit";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
import VisibilityIcon from "@material-ui/icons/Visibility";
|
||||
import useStyles from "../../useStyles";
|
||||
import {
|
||||
UpdatesProvider,
|
||||
useUpdatesContext,
|
||||
} from "../../Contexts/UpdatesContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { tsLocalDateTimeString } from "../../../utils/dates";
|
||||
import { Roles, hasRole } from "../../../utils/roles";
|
||||
|
||||
const UpdatePackagesList = () => {
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(5);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const { getPackages, packages, totalPackages } = useUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
groups,
|
||||
} = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
getPackages({ limit: pageSize, offset: pageSize * pageIndex }, token);
|
||||
// eslint-disable-next-line
|
||||
}, [pageIndex, pageSize, token]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const Actions = (row) => {
|
||||
let actions = [];
|
||||
if (hasRole([Roles.CREATE, Roles.READ], groups)) {
|
||||
actions.push({
|
||||
tip: `Status "${row.package_name} ${row.version}"`,
|
||||
link: `/carupdate-status/${row.id}`,
|
||||
icon: (
|
||||
<VisibilityIcon
|
||||
aria-label={`Status ${row.package_name} ${row.version}`}
|
||||
/>
|
||||
),
|
||||
});
|
||||
}
|
||||
if (hasRole([Roles.CREATE], groups)) {
|
||||
actions = actions.concat([
|
||||
{
|
||||
tip: `Edit "${row.package_name} ${row.version}"`,
|
||||
link: `/update/${row.id}`,
|
||||
icon: (
|
||||
<EditIcon aria-label={`Edit ${row.package_name} ${row.version}`} />
|
||||
),
|
||||
},
|
||||
{
|
||||
tip: `Deploy "${row.package_name} ${row.version}"`,
|
||||
link: `/carupdate-deploy/${row.id}`,
|
||||
icon: (
|
||||
<SendIcon
|
||||
aria-label={`Deploy ${row.package_name} ${row.version}`}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
if (actions.length === 0) return "No actions";
|
||||
|
||||
return actions.map((action) => (
|
||||
<Tooltip key={action.link} title={action.tip}>
|
||||
<Link to={action.link} style={{ margin: 5 }}>
|
||||
{action.icon}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Typography component="h1" variant="h5">
|
||||
Updates
|
||||
</Typography>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">ID</TableCell>
|
||||
<TableCell align="center">Name</TableCell>
|
||||
<TableCell align="center">Version</TableCell>
|
||||
<TableCell align="center">Created</TableCell>
|
||||
<TableCell align="right">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{packages.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">{row.package_name}</TableCell>
|
||||
<TableCell align="center">{row.version}</TableCell>
|
||||
<TableCell align="center">
|
||||
{tsLocalDateTimeString(row.timestamp)}
|
||||
</TableCell>
|
||||
<TableCell align="right">{Actions(row)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
colSpan={5}
|
||||
count={totalPackages}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UpdatePackagesForm = () => (
|
||||
<UpdatesProvider>
|
||||
<UpdatePackagesList />
|
||||
</UpdatesProvider>
|
||||
);
|
||||
|
||||
export default UpdatePackagesForm;
|
||||
Reference in New Issue
Block a user