admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release/0.0.3'

Browse Source
This commit is contained in:
jwu-fisker
2022-11-02 09:35:34 -07:00
parent 8a9db1eeaa cbec038bd3
commit 8a90b890fd
29 changed files with 1090 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/App/__snapshots__/App.test.js.snap
View File

@@ -3187,6 +3187,29 @@ exports[`App Route /packages authenticated 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Type
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
@@ -3262,6 +3285,11 @@ exports[`App Route /packages authenticated 1`] = `
>
1.0
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
Standard
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -3293,6 +3321,24 @@ exports[`App Route /packages authenticated 1`] = `
/>
</svg>
</a>
<a
class=""
href="/package-update/1"
style="margin: 5px;"
title="Update \\"Test Manifest 1.0\\""
>
<svg
aria-hidden="true"
aria-label="Update Test Manifest 1.0"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
<a
class=""
href="/package-deploy/1"
@@ -4532,6 +4578,57 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
ICC
</span>
</label>
<label
class="MuiFormControlLabel-root"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-0"
name="cert-type"
type="radio"
value="Aftersales"
/>
<div
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
/>
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
/>
</svg>
</div>
</span>
<span
class="MuiTouchRipple-root"
/>
</span>
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
Aftersales
</span>
</label>
<label
class="MuiFormControlLabel-root"
>

34
src/components/Certificates/Add/CreateForm.jsx
View File

@@ -1,4 +1,3 @@
import React, { useRef, useState } from "react";
import {
Button,
FormControlLabel,
@@ -7,13 +6,15 @@ import {
RadioGroup,
TextField,
} from "@material-ui/core";
import React, { useRef, useState } from "react";
import { CertTypeData, CertTypes } from "../../../utils/certificates";
import useStyles from "../../useStyles";
import { CertTypes } from "../../Contexts/CertificateContext";
const getCertTypeLabel = (certtype) => {
if (certtype === CertTypes.Aftersales) return "Service Tool ID";
return "VIN";
const item = CertTypeData.find((item) => certtype === item.value);
if (item !== null) return item.inputlabel;
return "ID";
};
const CreateForm = ({ onCreate, busy }) => {
@@ -60,21 +61,16 @@ const CreateForm = ({ onCreate, busy }) => {
onChange={onCertTypeChange}
margin="normal"
>
<FormControlLabel
value={CertTypes.TBOX}
control={<Radio />}
label="TBOX"
/>
<FormControlLabel
value={CertTypes.ICC}
control={<Radio />}
label="ICC"
/>
<FormControlLabel
value={CertTypes.Charging}
control={<Radio />}
label="Charging"
/>
{CertTypeData.map((item, i) => {
return (
<FormControlLabel
key={i}
value={item.value}
label={item.label}
control={<Radio />}
/>
);
})}
</RadioGroup>
<Button
type="submit"

9
src/components/Certificates/Add/index.jsx
View File

@@ -1,12 +1,12 @@
import React, { useEffect, useState } from "react";
import { logger } from "../../../services/monitoring";
import {
useCertificateContext,
CertificateProvider,
useCertificateContext,
} from "../../Contexts/CertificateContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import { logger } from "../../../services/monitoring";
import CreateForm from "./CreateForm";
import DownloadCerts from "./DownloadCerts";
@@ -43,11 +43,12 @@ const MainForm = () => {
const onCreate = async (data) => {
try {
const result = await createCert(data, token);
const name = data.common_name || data.tool_id;
setCommonName(name);
setPubCert(result.public_key);
setPrivCert(result.private_key);
setCommonName(data.common_name);
setMessage(`Created ${data.common_name} certificate`);
setMessage(`Created ${name} certificate`);
setView(VIEW_DOWNLOAD);
} catch (e) {
setMessage(e.message);

21
src/components/Contexts/CertificateContext.jsx
View File

@@ -1,21 +1,25 @@
import React, { useContext, useState } from "react";
import api from "../../services/certificatesAPI";
import { CertTypes } from "../../utils/certificates";
const CertificateContext = React.createContext();
export const CertTypes = {
TBOX: "TBOX",
ICC: "ICC",
Charging: "Charging",
Aftersales: "Aftersales",
};
const validateCreate = (data) => {
if (!data.type) throw new Error("type is required");
if (!data.common_name) throw new Error("common name is required");
};
const callCreateCert = (data, token) => {
if (data.type === CertTypes.Aftersales) {
data.tool_id = data.common_name;
delete data.common_name;
return api.createAftersales(data, token);
}
return api.create(data, token);
};
export const CertificateProvider = ({ children }) => {
const [busy, setBusy] = useState(false);
@@ -25,7 +29,8 @@ export const CertificateProvider = ({ children }) => {
validateCreate(data);
const result = await api.create(data, token);
const result = await callCreateCert(data, token);
if (result.error) {
throw new Error(`Create certificate error. ${result.message}`);
}

105
src/components/Contexts/CertificateContext.test.jsx Normal file
View File

@@ -0,0 +1,105 @@
jest.mock("../../services/certificatesAPI");
import {
act,
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { useState } from "react";
import {
CertificateProvider,
useCertificateContext,
} from "./CertificateContext";
describe("CertificateContext", () => {
beforeEach(() => {
const TestComp = () => {
const { createCert } = useCertificateContext();
const [result, setResult] = useState(null);
const testCreate = async (data) => {
const x = await createCert(data);
setResult(JSON.stringify(x));
};
return (
<>
<div data-testid="output">{result}</div>
<button
data-testid="createCertTBOX"
onClick={async () => {
await testCreate({
common_name: "11111111111111111",
type: "TBOX",
});
}}
/>
<button
data-testid="createCertICC"
onClick={async () => {
await testCreate({
common_name: "11111111111111111",
type: "ICC",
});
}}
/>
<button
data-testid="createCertAftersales"
onClick={async () => {
await testCreate({
common_name: "11111111111111112",
type: "Aftersales",
});
}}
/>
</>
);
};
render(
<CertificateProvider>
<TestComp />
</CertificateProvider>
);
});
afterEach(() => {
cleanup();
});
it("TBOX certificate", async () => {
await act(async () => {
fireEvent.click(screen.getByTestId("createCertTBOX"));
await waitFor(() =>
expect(screen.getByTestId("output").innerHTML).toBe(
'{"private_key":"-----BEGIN RSA PRIVATE KEY-----DATA-----END RSA PRIVATE KEY-----","public_key":"-----BEGIN CERTIFICATE-----DATA-----END CERTIFICATE-----","serial_number":"00:76:d2:ca:86:35:8c:88:52:fd:94:8e:55:d3:b6:a8:2e:73:68:00","type":"TBOX"}'
)
);
});
});
it("ICC certificate", async () => {
await act(async () => {
fireEvent.click(screen.getByTestId("createCertICC"));
await waitFor(() =>
expect(screen.getByTestId("output").innerHTML).toBe(
'{"private_key":"-----BEGIN RSA PRIVATE KEY-----DATA-----END RSA PRIVATE KEY-----","public_key":"-----BEGIN CERTIFICATE-----DATA-----END CERTIFICATE-----","serial_number":"00:76:d2:ca:86:35:8c:88:52:fd:94:8e:55:d3:b6:a8:2e:73:68:00","type":"ICC"}'
)
);
});
});
it("Aftersales certificate", async () => {
await act(async () => {
fireEvent.click(screen.getByTestId("createCertAftersales"));
await waitFor(() =>
expect(screen.getByTestId("output").innerHTML).toBe(
'{"private_key":"-----BEGIN RSA PRIVATE KEY-----DATA-----END RSA PRIVATE KEY-----","public_key":"-----BEGIN CERTIFICATE-----DATA-----END CERTIFICATE-----","serial_number":"00:76:d2:ca:86:35:8c:88:52:fd:94:8e:55:d3:b6:a8:2e:73:68:00","type":"Aftersales"}'
)
);
});
});
});

28
src/components/Contexts/ManifestsContext.jsx
View File

@@ -43,6 +43,23 @@ export const ManifestsProvider = ({ children }) => {
return result;
};
const updateManifest = async (id, data, token) => {
validateManifestUpdate(data);
let result;
try {
setBusy(true);
result = await api.updateManifest(id, data, token);
if (result.error)
throw new Error(`Update manifest error. ${result.message}`);
} finally {
setBusy(false);
}
return result;
}
const deleteManifest = async (package_id, token) => {
let result;
@@ -69,6 +86,7 @@ export const ManifestsProvider = ({ children }) => {
busy,
manifests,
totalManifests,
updateManifest,
getManifest,
getManifests,
deleteManifest,
@@ -79,4 +97,14 @@ export const ManifestsProvider = ({ children }) => {
);
};
const validateManifestUpdate = (data) => {
if (data == null) throw new Error("No manifest data");
if (data.name == null || data.name.length>255) throw new Error("Invalid manifest name");
if (data.type == null || !["forced", "standard"].includes(data.type)) {
throw new Error("Invalid manifest type");
}
}
export const useManifestsContext = () => useContext(ManifestsContext);

109
src/components/Contexts/ManifestsContext.test.jsx Normal file
View File

@@ -0,0 +1,109 @@
jest.mock("../../services/manifestsAPI");
import {
render,
cleanup,
screen,
fireEvent,
waitFor,
} from "@testing-library/react";
import { ManifestsProvider, useManifestsContext } from "./ManifestsContext";
import { StatusProvider, useStatusContext } from "./StatusContext";
const checkBaseResults = (error, busy) => {
expect(screen.getByTestId("error").innerHTML).toEqual(error);
expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
};
describe("ManifestContext", () => {
describe("updateManifest", () => {
beforeEach(async () => {
const TestComp = () => {
const { busy, updateManifest } = useManifestsContext();
const { message, setMessage } = useStatusContext();
const update = async (data) => {
try {
await updateManifest(1, data);
} catch (e) {
setMessage(e.message);
}
};
return (
<>
<div data-testid="error">{message}</div>
<div data-testid="busy">{busy.toString()}</div>
<button
data-testid="updateManifestNull"
onClick={() => update(null)}
/>
<button
data-testid="updateManifestNoName"
onClick={() => update({type:"forced"})}
/>
<button
data-testid="updateManifestNoType"
onClick={() => update({name:"update"})}
/>
<button
data-testid="updateManifest"
onClick={() =>
update({
name: "new package",
type: "forced",
})
}
/>
</>
);
};
render(
<StatusProvider>
<ManifestsProvider>
<TestComp />
</ManifestsProvider>
</StatusProvider>
);
});
afterEach(() => {
cleanup();
});
it("initial state", () => {
checkBaseResults("", "false");
});
it("updateManifestNull", async () => {
fireEvent.click(screen.getByTestId("updateManifestNull"));
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("No manifest data", "false");
});
it("updateManifestNoName", async () => {
fireEvent.click(screen.getByTestId("updateManifestNoName"));
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("Invalid manifest name", "false");
});
it("updateManifestNoType", async () => {
fireEvent.click(screen.getByTestId("updateManifestNoType"));
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("Invalid manifest type", "false");
});
it("updateManifest", async () => {
fireEvent.click(screen.getByTestId("updateManifest"));
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("", "false");
});
});
});

1
src/components/Contexts/__mocks__/ManifestsContext.jsx
View File

@@ -75,4 +75,5 @@ export const useManifestsContext = () => ({
getManifest: jest.fn(() => manifest),
getManifests: jest.fn(() => manifests),
deleteManifest: jest.fn(),
updateManifest: jest.fn(() => manifest),
});

4
src/components/Dashboard/index.css Normal file
View File

@@ -0,0 +1,4 @@
iframe {
width: 100%;
height: 100%;
}

34
src/components/Dashboard/index.jsx
View File

@@ -1,27 +1,41 @@
import React, { useEffect } from "react";
import ResponsiveIFrame from "../Controls/ResponsiveIFrame";
import { SupersetDashboardURL } from "../../services/superset";
import api from "../../services/superset";
import { useStatusContext } from "../Contexts/StatusContext";
import useStyles from "../useStyles";
import { useUserContext } from "../Contexts/UserContext";
import './index.css'
import { embedDashboard } from "@superset-ui/embedded-sdk";
const Dashboard = () => {
const classes = useStyles();
const { setTitle, setSitePath } = useStatusContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
useEffect(() => {
setTitle("Datascope");
setSitePath([]);
embedDashboard({
id: api.SupersetDashboardID(), // given by the Superset embedding UI
supersetDomain: api.SupersetDashboardURL(),
mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
fetchGuestToken: () => api.getGuestToken(token),
dashboardUiConfig: { hideTab: true, hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<ResponsiveIFrame
src={SupersetDashboardURL}
title="Dashboard"
classes={classes}
fullscreen
/>
<div style={{
display: 'flex',
height: '85vh'
}} id="my-superset-container">
</div>
);
};
//style={{position:'absolute', top:0, left:0, bottom:0, right:0, width:'100%', height:'100%', border:'none', margin:0, padding:0, overflow:'hidden'}}
export default Dashboard;

21
src/components/Manifest/List/index.jsx
View File

@@ -31,6 +31,7 @@ import { Roles, hasRole } from "../../../utils/roles";
import { useLocalStorage } from "../../useLocalStorage";
import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
import DeleteConfirmation from "../../DeleteConfirmation";
import EditIcon from "@material-ui/icons/Edit";
const tableColumns = [
{
@@ -45,6 +46,10 @@ const tableColumns = [
id: "version",
label: "Version",
},
{
id: "type",
label: "Type",
},
{
id: "created_at",
label: "Created",
@@ -59,6 +64,15 @@ const tableColumns = [
},
];
const formatManifestType = (type) => {
switch (type) {
case "forced":
return "Forced";
default:
return "Standard";
}
}
const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
const MainForm = () => {
@@ -161,6 +175,12 @@ const MainForm = () => {
icon: (
<VisibilityIcon aria-label={`Status ${row.name} ${row.version}`} />
),
}, {
tip: `Update "${row.name} ${row.version}"`,
link: `/package-update/${row.id}`,
icon: (
<EditIcon aria-label={`Update ${row.name} ${row.version}`} />
),
});
}
if (hasRole([Roles.CREATE], groups)) {
@@ -237,6 +257,7 @@ const MainForm = () => {
)}
</TableCell>
<TableCell align="center">{row.version}</TableCell>
<TableCell align="center">{formatManifestType(row.type)}</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.created)}
</TableCell>

192
src/components/Manifest/Update/__snapshots__/index.test.jsx.snap Normal file
View File

@@ -0,0 +1,192 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Manifest Details Component Render 1`] = `
<div>
<div
data-testid="mocked-userprovider"
>
<div
data-testid="mocked-manifestsprovider"
>
<div
data-testid="mocked-manifestsprovider"
>
<div
class="makeStyles-paper-0"
>
<div
class="MuiFormControl-root makeStyles-form-0 MuiFormControl-fullWidth"
novalidate=""
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined Mui-disabled Mui-disabled MuiFormLabel-filled Mui-required Mui-required"
data-shrink="true"
for="id"
id="id-label"
>
ID
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
disabled=""
id="id"
maxlength="20"
name="id"
readonly=""
required=""
type="text"
value="1"
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
ID
 *
</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-shrink MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
data-shrink="true"
for="name"
id="name-label"
>
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="name"
maxlength="255"
name="name"
required=""
type="text"
value="Test Deployment"
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Name
 *
</span>
</legend>
</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-outlined"
data-shrink="false"
for="manifest-type"
>
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-type"
name="manifest-type"
>
<option
value="standard"
>
Standard
</option>
<option
value="forced"
>
Forced
</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"
tabindex="0"
type="submit"
>
<span
class="MuiButton-label"
>
Update
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;

185
src/components/Manifest/Update/index.jsx Normal file
View File

@@ -0,0 +1,185 @@
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";
const manifestTypes = [
{value: "standard", label: "Standard"},
{value: "forced", label: "Forced"},
];
const emptyManifest = {
name: "",
version: "",
};
const MainForm = () => {
const {manifest_id} = useParams();
const classes = useStyles();
const [manifest, setManifest] = useState(null);
const [redirect, setRedirect] = useState(null);
const {getManifest, busy, updateManifest} = useManifestsContext();
const {
token: {
idToken: {jwtToken: token},
},
} = useUserContext();
const {setMessage, setTitle, setSitePath} = useStatusContext();
const [name, setName] = useState("");
const [type, setType] = useState("");
const changeName = (e) => {
setName(e.target.value);
}
const changeType = (e) => {
setType(e.target.value);
};
const onSubmit = async (e) => {
e.preventDefault();
try {
const data = {name, type};
console.log(data);
const result = await updateManifest(manifest_id, data, token);
if (!result || result.error) return;
setMessage(`Updated manifest ${manifest_id}`);
setRedirect(`/package-status/${manifest_id}`);
} catch (e) {
setMessage(`Failed to update manifest ${manifest_id}`);
}
}
useEffect(() => {
(async () => {
try {
const result = await getManifest(manifest_id, token);
if (result.error) {
throw new Error(`Get manifest error. ${result.message}`);
} else {
setManifest(result);
setName(result.name);
setType(result.type);
}
} catch (e) {
setMessage(e.message);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
useEffect(() => {
const curManifest = manifest ? manifest : emptyManifest;
setTitle("Update Package");
setSitePath([
{
label: "Deployments",
link: "/packages",
},
{
label: `Update Package ${curManifest.name} ${curManifest.version}`,
},
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [manifest]);
if (redirect && redirect.length > 0) {
return <Redirect to={redirect} />;
}
if (manifest === null) return <div>Loading Manifest...</div>;
return (
<div className={classes.paper}>
<FormControl className={classes.form} fullWidth noValidate>
<TextField
id="id"
name="id"
label="ID"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "20",
readOnly: true,
}}
disabled
value={manifest.id}
required
fullWidth
/>
<TextField
id="name"
name="name"
label="Name"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
value={name}
required
fullWidth
onChange={changeName}
/>
<FormControl
className={classes.form}
variant="outlined"
fullWidth
margin="normal"
>
<InputLabel htmlFor="manifest-type" className={classes.whiteBackground}>
Type
</InputLabel>
<Select
native
value={type}
variant="outlined"
inputProps={{
name: "manifest-type",
id: "send-manifest-type",
}}
onChange={changeType}
>
{manifestTypes.map((item, index) => (
<option key={index} value={item.value}>{item.label}</option>
))}
</Select>
</FormControl>
<Button
type="submit"
aria-label="send command"
disabled={busy || manifest == null}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
{busy ? "Updating..." : "Update"}
</Button>
</FormControl>
</div>
);
}
const ManifestUpdate = () => (
<ManifestsProvider>
<MainForm/>
</ManifestsProvider>
);
export default ManifestUpdate;

45
src/components/Manifest/Update/index.test.jsx Normal file
View File

@@ -0,0 +1,45 @@
jest.mock("../../Contexts/ManifestsContext");
jest.mock("../../Contexts/UserContext");
import React from "react";
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import { ManifestsProvider } from "../../Contexts/ManifestsContext";
import { UserProvider, setToken } from "../../Contexts/UserContext";
import { StatusProvider } from "../../Contexts/StatusContext";
import ManifestUpdate from ".";
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
import addSnapshotSerializer from "../../../utils/snapshot";
const renderManifestUpdate = async () => {
const { container } = render(
<UserProvider>
<BrowserRouter>
<StatusProvider>
<ManifestsProvider>
<ManifestUpdate />
</ManifestsProvider>
</StatusProvider>
</BrowserRouter>
</UserProvider>);
await waitFor(() => {
/* render */
});
return container;
}
describe("Manifest Details Component", () => {
beforeAll(() => {
setToken(TEST_AUTH_OBJECT);
addSnapshotSerializer(expect);
});
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const view = await renderManifestUpdate();
expect(view).toMatchSnapshot();
});
});

9
src/components/Routes/SiteRoutes.jsx
View File

@@ -28,6 +28,7 @@ const Home = React.lazy(() => import("../Home"));
const Manifests = React.lazy(() => import("../Manifest/List"));
const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
const ManifestUpdate = React.lazy(() => import("../Manifest/Update"));
const PageNotFound = React.lazy(() => import("../404"));
const SSOForm = React.lazy(() => import("../SSOForm"));
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
@@ -152,6 +153,14 @@ const SiteRoutes = () => {
groups={groups}
roles={[Roles.READ, Roles.CREATE]}
/>
<AuthRoute
path="/package-update/:manifest_id"
render={() => <ManifestUpdate />}
type={TYPES.PROTECTED}
token={token}
groups={groups}
roles={[Roles.READ, Roles.CREATE]}
/>
<AuthRoute
path="/vehicles"
render={() => <CarsList />}

9
src/components/useStyles.jsx
View File

@@ -180,6 +180,15 @@ const useStyles = makeStyles((theme) => ({
width: "100%",
height: "100%",
},
iframe: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0,
width: "100%",
height: "100%",
},
embeddedWrapper: {
marginTop: 10,
position: "relative",