Add package updates, car updates, and vehicle screens (#25)
This commit is contained in:
John Wu
20
package-lock.json
generated
20
package-lock.json
generated
@@ -7361,9 +7361,9 @@
|
||||
"integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
|
||||
},
|
||||
"immer": {
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
|
||||
"integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
|
||||
"integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
|
||||
},
|
||||
"import-cwd": {
|
||||
"version": "2.1.0",
|
||||
@@ -9969,9 +9969,9 @@
|
||||
}
|
||||
},
|
||||
"open": {
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/open/-/open-7.4.0.tgz",
|
||||
"integrity": "sha512-PGoBCX/lclIWlpS/R2PQuIR4NJoXh6X5AwVzE7WXnWRGvHg7+4TBCgsujUgiPpm0K1y4qvQeWnCWVTpTKZBtvA==",
|
||||
"version": "7.4.2",
|
||||
"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
|
||||
"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
|
||||
"requires": {
|
||||
"is-docker": "^2.0.0",
|
||||
"is-wsl": "^2.1.1"
|
||||
@@ -11697,9 +11697,9 @@
|
||||
}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "11.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.2.tgz",
|
||||
"integrity": "sha512-xG7GlMoYkrgc2M1kDCHKRywXMDbFnjOB+/VzpytQyYBusEzR8NlGTMmUbvN86k94yyKu5XReHB8eZC2JZrNchQ==",
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
|
||||
"integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "7.10.4",
|
||||
"address": "1.1.2",
|
||||
@@ -11714,7 +11714,7 @@
|
||||
"global-modules": "2.0.0",
|
||||
"globby": "11.0.1",
|
||||
"gzip-size": "5.1.1",
|
||||
"immer": "7.0.9",
|
||||
"immer": "8.0.1",
|
||||
"is-root": "2.1.0",
|
||||
"loader-utils": "2.0.0",
|
||||
"open": "^7.0.2",
|
||||
|
||||
@@ -120,6 +120,28 @@ exports[`App Route / authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/updates"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
@@ -134,7 +156,29 @@ exports[`App Route / authenticated 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
Create Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@@ -174,7 +218,7 @@ exports[`App Route / authenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-97"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-81"
|
||||
@@ -220,7 +264,7 @@ exports[`App Route / unauthenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-17"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-1"
|
||||
@@ -369,6 +413,28 @@ exports[`App Route /home authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/updates"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
@@ -383,7 +449,29 @@ exports[`App Route /home authenticated 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
Create Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@@ -423,7 +511,7 @@ exports[`App Route /home authenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-117"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-101"
|
||||
@@ -469,7 +557,7 @@ exports[`App Route /home unauthenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-37"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-21"
|
||||
@@ -618,6 +706,28 @@ exports[`App Route /package-upload authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/updates"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
@@ -632,7 +742,29 @@ exports[`App Route /package-upload authenticated 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
Create Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@@ -672,287 +804,237 @@ exports[`App Route /package-upload authenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-137"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-vehicleprovider"
|
||||
data-testid="mocked-fileuploadprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fileuploadprovider"
|
||||
class="makeStyles-paper-121"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-121"
|
||||
<h1
|
||||
class="MuiTypography-root MuiTypography-h5"
|
||||
>
|
||||
<h1
|
||||
class="MuiTypography-root MuiTypography-h5"
|
||||
Upload Update Package
|
||||
</h1>
|
||||
<form
|
||||
action="{onSubmit}"
|
||||
class="makeStyles-form-123"
|
||||
novalidate=""
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
Upload Update Package
|
||||
</h1>
|
||||
<form
|
||||
action="{onSubmit}"
|
||||
class="makeStyles-form-123"
|
||||
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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
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-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<span>
|
||||
Package name
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<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-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<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-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<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-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<span>
|
||||
Release Notes URL
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root makeStyles-formControl-125 MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
|
||||
data-shrink="false"
|
||||
for="vehicles"
|
||||
>
|
||||
Vehicles
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-menuProps-128 MuiInputBase-formControl MuiInput-formControl"
|
||||
>
|
||||
<div
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="vehicles"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiInput-input"
|
||||
id="vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
class="MuiSelect-nativeInput"
|
||||
id="select-multiple-chip"
|
||||
name="vehicles"
|
||||
placeholder="Select vehicles"
|
||||
tabindex="-1"
|
||||
value=""
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiDropzoneArea-root"
|
||||
tabindex="0"
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
autocomplete="off"
|
||||
style="display: none;"
|
||||
tabindex="-1"
|
||||
type="file"
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="packagename"
|
||||
maxlength="255"
|
||||
name="packagename"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="MuiDropzoneArea-textContainer"
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<p
|
||||
class="MuiTypography-root MuiDropzoneArea-text MuiTypography-h5"
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
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>
|
||||
<span>
|
||||
Package name
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-124 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
</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
|
||||
class="MuiButton-label"
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
Submit
|
||||
|
||||
*
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
</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=""
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<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-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<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-141 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-143"
|
||||
>
|
||||
<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-124 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -990,7 +1072,7 @@ exports[`App Route /package-upload unauthenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-57"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-41"
|
||||
@@ -1139,6 +1221,28 @@ exports[`App Route /page-not-found authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/updates"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
@@ -1153,7 +1257,29 @@ exports[`App Route /page-not-found authenticated 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
Create Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@@ -1193,7 +1319,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-205"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-189"
|
||||
@@ -1239,7 +1365,7 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-185"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-169"
|
||||
@@ -1377,6 +1503,28 @@ exports[`App Route /vehicle-add authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/updates"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
@@ -1391,7 +1539,29 @@ exports[`App Route /vehicle-add authenticated 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
Create Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@@ -1431,7 +1601,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-161"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-vehicleprovider"
|
||||
@@ -1495,6 +1665,99 @@ exports[`App Route /vehicle-add authenticated 1`] = `
|
||||
</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="model"
|
||||
id="model-label"
|
||||
>
|
||||
Model
|
||||
<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="model"
|
||||
maxlength="255"
|
||||
name="model"
|
||||
required=""
|
||||
type="text"
|
||||
value="Ocean"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-165 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-167 PrivateNotchedOutline-legendNotched-168"
|
||||
>
|
||||
<span>
|
||||
Model
|
||||
*
|
||||
</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="year"
|
||||
id="year-label"
|
||||
>
|
||||
Year
|
||||
<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="year"
|
||||
maxlength="4"
|
||||
minlength="4"
|
||||
name="year"
|
||||
required=""
|
||||
type="number"
|
||||
value="2022"
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-165 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-167 PrivateNotchedOutline-legendNotched-168"
|
||||
>
|
||||
<span>
|
||||
Year
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-148 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
@@ -1547,7 +1810,7 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
|
||||
class="makeStyles-drawerHeader-77"
|
||||
/>
|
||||
<main
|
||||
class="MuiContainer-root MuiContainer-maxWidthMd"
|
||||
class="MuiContainer-root MuiContainer-maxWidthLg"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-61"
|
||||
|
||||
225
src/components/CarUpdates/Deploy/index.jsx
Normal file
225
src/components/CarUpdates/Deploy/index.jsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import {
|
||||
Button,
|
||||
Chip,
|
||||
FormControl,
|
||||
Input,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import {
|
||||
UpdatesProvider,
|
||||
useUpdatesContext,
|
||||
} from "../../Contexts/UpdatesContext";
|
||||
import {
|
||||
useVehicleContext,
|
||||
VehicleProvider,
|
||||
} from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { tsLocalDateTimeString } from "../../../utils/dates";
|
||||
import menuItemStyle from "../../menuItemStyle";
|
||||
|
||||
const MainForm = () => {
|
||||
const { packageid } = useParams();
|
||||
const { getPackages, createCarUpdates, packages, busy } = useUpdatesContext();
|
||||
const { getVehicles, vehicles } = useVehicleContext();
|
||||
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 [selectedVehicles, setSelectedVehicles] = useState([]);
|
||||
const classes = useStyles();
|
||||
const theme = useTheme();
|
||||
const handleVehiclesChange = (event) => {
|
||||
setSelectedVehicles(event.target.value);
|
||||
};
|
||||
const getCarIDs = () => {
|
||||
if (!selectedVehicles) return [];
|
||||
return selectedVehicles.map((vin) => {
|
||||
return vehicles.find((vehicle) => vehicle.vin === vin).id;
|
||||
});
|
||||
};
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
package_id: parseInt(packageid),
|
||||
car_ids: getCarIDs(),
|
||||
};
|
||||
await createCarUpdates(data, token);
|
||||
setMessage(
|
||||
`Deployed ${packageName} ${version} to ${selectedVehicles.length} cars`
|
||||
);
|
||||
setSelectedVehicles([]);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
const getData = async () => {
|
||||
try {
|
||||
getPackages({ id: parseInt(packageid) }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
const handleCarOpen = async () => {
|
||||
try {
|
||||
await getVehicles(null, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
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">
|
||||
{`[${packageid}] ${packageName} ${version}`}
|
||||
</Typography>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<TextField
|
||||
label="Create Date"
|
||||
variant="filled"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
value={createDate}
|
||||
size="small"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="link"
|
||||
name="link"
|
||||
label="Package link"
|
||||
variant="filled"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
value={link}
|
||||
size="small"
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
id="description"
|
||||
name="description"
|
||||
label="Description"
|
||||
variant="filled"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
value={description}
|
||||
size="small"
|
||||
fullWidth
|
||||
multiline
|
||||
rows={4}
|
||||
placeholder="Package description"
|
||||
/>
|
||||
<TextField
|
||||
id="releasenotes"
|
||||
name="releasenotes"
|
||||
label="Release Notes URL"
|
||||
variant="filled"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
readOnly: true,
|
||||
}}
|
||||
value={releaseNotesLink}
|
||||
size="small"
|
||||
fullWidth
|
||||
placeholder="Release Notes URL"
|
||||
/>
|
||||
<FormControl
|
||||
className={classes.formControl}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel htmlFor="vehicles">Vehicles</InputLabel>
|
||||
<Select
|
||||
label="Vehicles"
|
||||
placeholder="Select vehicles"
|
||||
id="vehicles"
|
||||
name="vehicles"
|
||||
multiple
|
||||
className={classes.menuProps}
|
||||
variant="outlined"
|
||||
onOpen={handleCarOpen}
|
||||
onChange={handleVehiclesChange}
|
||||
value={selectedVehicles}
|
||||
input={<Input id="select-multiple-chip" />}
|
||||
renderValue={(selected) => (
|
||||
<div className={classes.chips}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} className={classes.chip} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{vehicles.map((vehicle) => (
|
||||
<MenuItem
|
||||
key={vehicle.vin}
|
||||
value={vehicle.vin}
|
||||
style={menuItemStyle(vehicle, selectedVehicles, theme)}
|
||||
>
|
||||
{vehicle.vin}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const UpdatePackageDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<UpdatesProvider>
|
||||
<MainForm />
|
||||
</UpdatesProvider>
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default UpdatePackageDeployForm;
|
||||
139
src/components/CarUpdates/Status/index.jsx
Normal file
139
src/components/CarUpdates/Status/index.jsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
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 { LocalDateTimeString } from "../../../utils/dates";
|
||||
|
||||
const MainForm = () => {
|
||||
const { packageid } = useParams();
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const {
|
||||
getCarUpdates,
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
getPackages,
|
||||
packages,
|
||||
} = useUpdatesContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
getPackages({ id: packageid }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
getCarUpdates(
|
||||
{
|
||||
packageid,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [pageIndex, pageSize, token]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Typography component="h1" variant="h5">
|
||||
{packages &&
|
||||
packages.length > 0 &&
|
||||
`${packages[0].package_name} ${packages[0].version}`}
|
||||
</Typography>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">ID</TableCell>
|
||||
<TableCell align="center">Vehicle</TableCell>
|
||||
<TableCell align="center">Status</TableCell>
|
||||
<TableCell align="center">Created</TableCell>
|
||||
<TableCell align="center">Updated</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{carUpdates.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">{`${row.car.vin} ${row.car.model} ${row.car.year}`}</TableCell>
|
||||
<TableCell align="center">{row.status}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
colSpan={5}
|
||||
count={totalCarUpdates}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CarUpdatesStatus = () => (
|
||||
<UpdatesProvider>
|
||||
<MainForm />
|
||||
</UpdatesProvider>
|
||||
);
|
||||
|
||||
export default CarUpdatesStatus;
|
||||
@@ -1,30 +1,38 @@
|
||||
import React, { useRef } from "react";
|
||||
|
||||
import useStyles from "../useStyles";
|
||||
import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
|
||||
import { useStatusContext } from "../Contexts/StatusContext";
|
||||
import { useUserContext } from "../Contexts/UserContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import {
|
||||
useVehicleContext,
|
||||
VehicleProvider,
|
||||
} from "../../Contexts/VehicleContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { Button, TextField, Typography } from "@material-ui/core";
|
||||
|
||||
const MainForm = () => {
|
||||
const { addVehicle, busy } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { token } = useUserContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const classes = useStyles();
|
||||
const vinEl = useRef(null);
|
||||
const modelEl = useRef(null);
|
||||
const yearEl = useRef(null);
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
|
||||
const {
|
||||
idToken: { jwtToken: authToken },
|
||||
} = token;
|
||||
const formData = {
|
||||
vin: vinEl.current.value,
|
||||
model: modelEl.current.value,
|
||||
year: parseInt(yearEl.current.value),
|
||||
};
|
||||
|
||||
const result = await addVehicle(formData, authToken);
|
||||
const result = await addVehicle(formData, token);
|
||||
|
||||
setMessage(`Added ${result.vin}`);
|
||||
vinEl.current.value = "";
|
||||
@@ -52,6 +60,36 @@ const MainForm = () => {
|
||||
fullWidth
|
||||
inputRef={vinEl}
|
||||
/>
|
||||
<TextField
|
||||
id="model"
|
||||
name="model"
|
||||
label="Model"
|
||||
defaultValue="Ocean"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={modelEl}
|
||||
/>
|
||||
<TextField
|
||||
id="year"
|
||||
name="year"
|
||||
label="Year"
|
||||
type="number"
|
||||
defaultValue="2022"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "4",
|
||||
minLength: "4",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={yearEl}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
121
src/components/Cars/List/index.jsx
Normal file
121
src/components/Cars/List/index.jsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import {
|
||||
useVehicleContext,
|
||||
VehicleProvider,
|
||||
} from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
|
||||
const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(5);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
getVehicles(
|
||||
{
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [pageIndex, pageSize, token]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Typography component="h1" variant="h5">
|
||||
Vehicles
|
||||
</Typography>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">ID</TableCell>
|
||||
<TableCell align="center">VIN</TableCell>
|
||||
<TableCell align="center">Model</TableCell>
|
||||
<TableCell align="center">Year</TableCell>
|
||||
<TableCell align="center">Created</TableCell>
|
||||
<TableCell align="center">Updated</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{vehicles.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">{row.vin}</TableCell>
|
||||
<TableCell align="center">{row.model}</TableCell>
|
||||
<TableCell align="center">{row.year}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
colSpan={6}
|
||||
count={totalVehicles}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const VehiclesList = () => (
|
||||
<VehicleProvider>
|
||||
<MainForm />
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default VehiclesList;
|
||||
@@ -38,10 +38,6 @@ export const FileUploadProvider = ({ children }) => {
|
||||
throw new Error("Package update version required");
|
||||
}
|
||||
|
||||
if (!formData.vehicles || formData.vehicles.length === 0) {
|
||||
throw new Error("Vehicles required");
|
||||
}
|
||||
|
||||
if (!uploadFiles || uploadFiles.length === 0) {
|
||||
throw new Error("File required");
|
||||
}
|
||||
@@ -64,7 +60,7 @@ export const FileUploadProvider = ({ children }) => {
|
||||
setStatus(`Uploading ${filename}`);
|
||||
setCancelUpload(getCancelToken());
|
||||
|
||||
const { data } = await uploadFile(
|
||||
const data = await uploadFile(
|
||||
file,
|
||||
formData,
|
||||
accessToken,
|
||||
|
||||
@@ -33,7 +33,6 @@ describe("FileUploadContext", () => {
|
||||
linkURL,
|
||||
upload,
|
||||
cancel,
|
||||
setFiles,
|
||||
} = useFileUploadContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const TEST_FILE = [{ name: "test.jpg", size: 0 }];
|
||||
|
||||
291
src/components/Contexts/UpdateContext.test.jsx
Normal file
291
src/components/Contexts/UpdateContext.test.jsx
Normal file
@@ -0,0 +1,291 @@
|
||||
jest.mock("../../services/updates");
|
||||
|
||||
import {
|
||||
render,
|
||||
cleanup,
|
||||
screen,
|
||||
fireEvent,
|
||||
waitFor,
|
||||
} from "@testing-library/react";
|
||||
import { UpdatesProvider, useUpdatesContext } from "../Contexts/UpdatesContext";
|
||||
import { StatusProvider, useStatusContext } from "../Contexts/StatusContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../utils/testing";
|
||||
|
||||
describe("UpdatesContext", () => {
|
||||
describe("getPackages", () => {
|
||||
const expectedData = `[{"id":1,"package_name":"Test","version":"1.0","link":"http://cloudfront.com/download"},{"id":2,"package_name":"Test","version":"1.1","link":"http://cloudfront.com/download"},{"id":3,"package_name":"Test","version":"1.2","link":"http://cloudfront.com/download"}]`;
|
||||
const checkState = (busy, packages, message) => {
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
|
||||
expect(screen.getByTestId("packages").innerHTML).toEqual(packages);
|
||||
expect(screen.getByTestId("message").innerHTML).toEqual(message);
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
const TestComp = () => {
|
||||
const { busy, packages, getPackages } = useUpdatesContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const exec = async (data, token) => {
|
||||
try {
|
||||
await getPackages(data, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<div data-testid="packages">{JSON.stringify(packages)}</div>
|
||||
<div data-testid="message">{message}</div>
|
||||
<button
|
||||
data-testid="no-filter"
|
||||
onClick={() => {
|
||||
exec(null, TEST_AUTH_OBJECT);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
data-testid="with-filter"
|
||||
onClick={() => {
|
||||
exec({ package_name: "Test" }, TEST_AUTH_OBJECT);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
render(
|
||||
<StatusProvider>
|
||||
<UpdatesProvider>
|
||||
<TestComp />
|
||||
</UpdatesProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("Initial state", async () => {
|
||||
checkState("false", "[]", "");
|
||||
});
|
||||
|
||||
it("getPackages no filter", async () => {
|
||||
fireEvent.click(screen.getByTestId("no-filter"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", expectedData, "");
|
||||
});
|
||||
|
||||
it("getPackages with filter", async () => {
|
||||
fireEvent.click(screen.getByTestId("with-filter"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", expectedData, "");
|
||||
});
|
||||
});
|
||||
|
||||
describe("updatePackage", () => {
|
||||
let result = null;
|
||||
const checkState = (busy, message, data) => {
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
|
||||
expect(screen.getByTestId("message").innerHTML).toEqual(message);
|
||||
expect(result).toEqual(data);
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
const TestComp = () => {
|
||||
const { busy, updatePackage } = useUpdatesContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const exec = async (data, token) => {
|
||||
var r = null;
|
||||
|
||||
try {
|
||||
r = await updatePackage(data, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
|
||||
return r;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<div data-testid="message">{message}</div>
|
||||
<button
|
||||
data-testid="no-data"
|
||||
onClick={async () => {
|
||||
result = await exec(null, TEST_AUTH_OBJECT);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
data-testid="with-bad-data"
|
||||
onClick={async () => {
|
||||
result = await exec({ package_name: "Test" }, TEST_AUTH_OBJECT);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
data-testid="with-good-data"
|
||||
onClick={async () => {
|
||||
result = await exec(
|
||||
{
|
||||
package_name: "Test",
|
||||
version: "1.0",
|
||||
},
|
||||
TEST_AUTH_OBJECT
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
render(
|
||||
<StatusProvider>
|
||||
<UpdatesProvider>
|
||||
<TestComp />
|
||||
</UpdatesProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
result = null;
|
||||
});
|
||||
|
||||
it("Initial state", () => {
|
||||
checkState("false", "", null);
|
||||
});
|
||||
|
||||
it("no-data", async () => {
|
||||
fireEvent.click(screen.getByTestId("no-data"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", "No update data", null);
|
||||
});
|
||||
|
||||
it("with-bad-data", async () => {
|
||||
fireEvent.click(screen.getByTestId("with-bad-data"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", "Version required", null);
|
||||
});
|
||||
|
||||
it("with-good-data", async () => {
|
||||
fireEvent.click(screen.getByTestId("with-good-data"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", "", { package_name: "Test", version: "1.0" });
|
||||
});
|
||||
});
|
||||
|
||||
describe("createCarUpdates", () => {
|
||||
let result = null;
|
||||
const checkState = (busy, message, data) => {
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
|
||||
expect(screen.getByTestId("message").innerHTML).toEqual(message);
|
||||
expect(result).toEqual(data);
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
const TestComp = () => {
|
||||
const { busy, createCarUpdates } = useUpdatesContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const exec = async (data, token) => {
|
||||
var r = null;
|
||||
|
||||
try {
|
||||
r = await createCarUpdates(data, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
|
||||
return r;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<div data-testid="message">{message}</div>
|
||||
<button
|
||||
data-testid="no-data"
|
||||
onClick={async () => {
|
||||
result = await exec(null, TEST_AUTH_OBJECT);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
data-testid="with-bad-data"
|
||||
onClick={async () => {
|
||||
result = await exec(
|
||||
{ package_id: 1, car_ids: [] },
|
||||
TEST_AUTH_OBJECT
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
data-testid="with-good-data"
|
||||
onClick={async () => {
|
||||
result = await exec(
|
||||
{
|
||||
package_id: 1,
|
||||
car_ids: [1, 2, 3],
|
||||
},
|
||||
TEST_AUTH_OBJECT
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
render(
|
||||
<StatusProvider>
|
||||
<UpdatesProvider>
|
||||
<TestComp />
|
||||
</UpdatesProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
result = null;
|
||||
});
|
||||
|
||||
it("Initial state", () => {
|
||||
checkState("false", "", null);
|
||||
});
|
||||
|
||||
it("no-data", async () => {
|
||||
fireEvent.click(screen.getByTestId("no-data"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", "No car update data", null);
|
||||
});
|
||||
|
||||
it("with-bad-data", async () => {
|
||||
fireEvent.click(screen.getByTestId("with-bad-data"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", "Car ids required", null);
|
||||
});
|
||||
|
||||
it("with-good-data", async () => {
|
||||
fireEvent.click(screen.getByTestId("with-good-data"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toBe("false")
|
||||
);
|
||||
checkState("false", "", {
|
||||
id: 1,
|
||||
package_id: 1,
|
||||
car_ids: [1, 2, 3],
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
131
src/components/Contexts/UpdatesContext.jsx
Normal file
131
src/components/Contexts/UpdatesContext.jsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
|
||||
import api from "../../services/updates";
|
||||
|
||||
const UpdatesContext = React.createContext();
|
||||
|
||||
export const UpdatesProvider = ({ children }) => {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [packages, setPackages] = useState([]);
|
||||
const [carUpdates, setCarUpdates] = useState([]);
|
||||
const [totalPackages, setTotalPackages] = useState(0);
|
||||
const [totalCarUpdates, setTotalCarUpdates] = useState(0);
|
||||
|
||||
const getPackages = async (search, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
result = await api.getPackages(search, token);
|
||||
if (result.error)
|
||||
throw new Error(`Get packages error. ${result.message}`);
|
||||
setPackages(result.data);
|
||||
if (search && search.offset === 0 && result.total) {
|
||||
setTotalPackages(result.total);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const updatePackage = async (data, token) => {
|
||||
let result = null;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
validateUpdatePackage(data);
|
||||
result = await api.updatePackage(data, token);
|
||||
if (result.error)
|
||||
throw new Error(`Update package error. ${result.message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const createCarUpdates = async (data, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
validateCreateCarUpdates(data);
|
||||
result = await api.createCarUpdates(data, token);
|
||||
if (result.error)
|
||||
throw new Error(`Create car updates error. ${result.message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const getCarUpdates = async (search, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
result = await api.getCarUpdates(search, token);
|
||||
if (result.error)
|
||||
throw new Error(`Get packages error. ${result.message}`);
|
||||
setCarUpdates(result.data);
|
||||
if (search && search.offset === 0 && result.total) {
|
||||
setTotalCarUpdates(result.total);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return (
|
||||
<UpdatesContext.Provider
|
||||
value={{
|
||||
busy,
|
||||
packages,
|
||||
totalPackages,
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
getPackages,
|
||||
updatePackage,
|
||||
createCarUpdates,
|
||||
getCarUpdates,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</UpdatesContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useUpdatesContext = () => useContext(UpdatesContext);
|
||||
|
||||
const validateUpdatePackage = (data) => {
|
||||
if (data === null) {
|
||||
throw new Error("No update data");
|
||||
}
|
||||
|
||||
if (!data.package_name) {
|
||||
throw new Error("Package name required");
|
||||
}
|
||||
|
||||
if (!data.version) {
|
||||
throw new Error("Version required");
|
||||
}
|
||||
};
|
||||
|
||||
const validateCreateCarUpdates = (data) => {
|
||||
if (data === null) {
|
||||
throw new Error("No car update data");
|
||||
}
|
||||
|
||||
if (!data.package_id || data.package_id === 0) {
|
||||
throw new Error("Package id required");
|
||||
}
|
||||
|
||||
if (!data.car_ids || data.car_ids.length === 0) {
|
||||
throw new Error("Car ids required");
|
||||
}
|
||||
};
|
||||
@@ -79,8 +79,6 @@ export const UserProvider = ({ children }) => {
|
||||
setError(`Verify error. ${e.message}`);
|
||||
document.location = signOut();
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const signIn = async (code) => {
|
||||
@@ -89,13 +87,6 @@ export const UserProvider = ({ children }) => {
|
||||
try {
|
||||
if (!code) return;
|
||||
|
||||
const refresh = async (value) => {
|
||||
let result = null;
|
||||
|
||||
try {
|
||||
if (!value) {
|
||||
throw new Error("Token required");
|
||||
}
|
||||
setFetching(true);
|
||||
setError(null);
|
||||
|
||||
|
||||
@@ -15,11 +15,20 @@ const validateAdd = (vehicle) => {
|
||||
if (vehicle.vin.length > 17) {
|
||||
throw new Error("VIN cannot be larger than 17 characters");
|
||||
}
|
||||
|
||||
if (!vehicle.model || vehicle.model.length === 0) {
|
||||
throw new Error("model required");
|
||||
}
|
||||
|
||||
if (!vehicle.year || vehicle.year < 2000 || vehicle.year > 9999) {
|
||||
throw new Error("year required");
|
||||
}
|
||||
};
|
||||
|
||||
export const VehicleProvider = ({ children }) => {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [vehicles, setVehicles] = useState([]);
|
||||
const [totalVehicles, setTotalVehicles] = useState(0);
|
||||
|
||||
const getVehicles = async (search, token) => {
|
||||
try {
|
||||
@@ -30,6 +39,9 @@ export const VehicleProvider = ({ children }) => {
|
||||
throw new Error(`Get vehicles error. ${result.message}`);
|
||||
} else {
|
||||
setVehicles(result.data);
|
||||
if (result.total) {
|
||||
setTotalVehicles(result.total);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
@@ -53,6 +65,7 @@ export const VehicleProvider = ({ children }) => {
|
||||
value={{
|
||||
busy,
|
||||
vehicles,
|
||||
totalVehicles,
|
||||
getVehicles,
|
||||
addVehicle,
|
||||
}}
|
||||
|
||||
@@ -83,7 +83,9 @@ describe("VehicleContext", () => {
|
||||
<button data-testid="addVehiclesNoVIN" onClick={() => add({})} />
|
||||
<button
|
||||
data-testid="addVehicles"
|
||||
onClick={() => add({ vin: "XXXXXXXXXXX" })}
|
||||
onClick={() =>
|
||||
add({ vin: "XXXXXXXXXXX", model: "Ocean", year: 3000 })
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,287 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`File Upload Form Should render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-vehicleprovider"
|
||||
>
|
||||
<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="MuiFormControl-root makeStyles-formControl-5 MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
|
||||
data-shrink="false"
|
||||
for="vehicles"
|
||||
>
|
||||
Vehicles
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiInput-root MuiInput-underline makeStyles-menuProps-8 MuiInputBase-formControl MuiInput-formControl"
|
||||
>
|
||||
<div
|
||||
aria-haspopup="listbox"
|
||||
aria-labelledby="vehicles"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiInput-input"
|
||||
id="vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
class="MuiSelect-nativeInput"
|
||||
id="select-multiple-chip"
|
||||
name="vehicles"
|
||||
placeholder="Select vehicles"
|
||||
tabindex="-1"
|
||||
value=""
|
||||
/>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
`;
|
||||
@@ -100,7 +100,7 @@ export default function MenuDrawer({ children }) {
|
||||
})}
|
||||
>
|
||||
<div className={classes.drawerHeader} />
|
||||
<Container component="main" maxWidth="md">
|
||||
<Container component="main" maxWidth="lg">
|
||||
{children}
|
||||
</Container>
|
||||
</main>
|
||||
|
||||
@@ -11,10 +11,20 @@ const menuData = [
|
||||
roles: [],
|
||||
},
|
||||
{
|
||||
label: "Upload Update Package",
|
||||
label: "View Updates",
|
||||
to: "/updates",
|
||||
roles: [Roles.CREATE, Roles.READ],
|
||||
},
|
||||
{
|
||||
label: "Create Updates",
|
||||
to: "/package-upload",
|
||||
roles: [Roles.CREATE],
|
||||
},
|
||||
{
|
||||
label: "View Vehicles",
|
||||
to: "/vehicles",
|
||||
roles: [Roles.CREATE, Roles.READ],
|
||||
},
|
||||
{
|
||||
label: "Add Vehicles",
|
||||
to: "/vehicle-add",
|
||||
|
||||
@@ -30,6 +30,28 @@ exports[`SideMenu Authenticated 1`] = `
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/updates"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
@@ -44,7 +66,29 @@ exports[`SideMenu Authenticated 1`] = `
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
Upload Update Package
|
||||
Create Updates
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
|
||||
href="/vehicles"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="MuiListItemText-root"
|
||||
>
|
||||
<span
|
||||
class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
|
||||
>
|
||||
View Vehicles
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@@ -8,9 +8,14 @@ import { Roles } from "../../utils/roles";
|
||||
|
||||
const SSOForm = React.lazy(() => import("../SSOForm"));
|
||||
const Home = React.lazy(() => import("../Home"));
|
||||
const FileUploadForm = React.lazy(() => import("../FileUploadForm"));
|
||||
const VehicleAddForm = React.lazy(() => import("../VehicleAddForm"));
|
||||
const FileUploadForm = React.lazy(() => import("../UpdatePackages/Create"));
|
||||
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
|
||||
const PageNotFound = React.lazy(() => import("../404"));
|
||||
const UpdatePackagesForm = React.lazy(() => import("../UpdatePackages/List"));
|
||||
const UpdatePackageEdit = React.lazy(() => import("../UpdatePackages/Edit"));
|
||||
const CarUpdatesDeploy = React.lazy(() => import("../CarUpdates/Deploy"));
|
||||
const CarUpdatesStatus = React.lazy(() => import("../CarUpdates/Status"));
|
||||
const VehiclesList = React.lazy(() => import("../Cars/List"));
|
||||
|
||||
const SiteRoutes = () => {
|
||||
const { token, groups } = useUserContext();
|
||||
@@ -39,6 +44,46 @@ const SiteRoutes = () => {
|
||||
groups={groups}
|
||||
roles={[Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/updates"
|
||||
render={() => <UpdatePackagesForm />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/update/:id"
|
||||
render={() => <UpdatePackageEdit />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/carupdate-deploy/:packageid"
|
||||
render={() => <CarUpdatesDeploy />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/carupdate-status/:packageid"
|
||||
render={() => <CarUpdatesStatus />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/vehicles"
|
||||
render={() => <VehiclesList />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/vehicle-add"
|
||||
render={() => <VehicleAddForm />}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
jest.mock("../Contexts/UserContext");
|
||||
jest.mock("../Contexts/FileUploadContext");
|
||||
jest.mock("../Contexts/VehicleContext");
|
||||
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"
|
||||
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 () => {
|
||||
@@ -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>
|
||||
`;
|
||||
@@ -1,27 +1,14 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Chip,
|
||||
FormControl,
|
||||
Input,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
TextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from "@material-ui/core";
|
||||
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 { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import {
|
||||
useFileUploadContext,
|
||||
FileUploadProvider,
|
||||
} from "../Contexts/FileUploadContext";
|
||||
import ModalProgressBar from "../ModalProgressBar";
|
||||
import useStyles from "../useStyles";
|
||||
import menuItemStyle from "../menuItemStyle";
|
||||
} from "../../Contexts/FileUploadContext";
|
||||
import ModalProgressBar from "../../ModalProgressBar";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const FileUploadZone = ({ classes, token }) => {
|
||||
const { setFiles } = useFileUploadContext();
|
||||
@@ -54,18 +41,12 @@ const FileUploadZone = ({ classes, token }) => {
|
||||
const MainForm = () => {
|
||||
const { uploading, upload, files } = useFileUploadContext();
|
||||
const { token } = useUserContext();
|
||||
const { getVehicles, vehicles } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const [selectedVehicles, setSelectedVehicles] = useState([]);
|
||||
const theme = useTheme();
|
||||
const classes = useStyles();
|
||||
const packagenameEl = useRef(null);
|
||||
const versionEl = useRef(null);
|
||||
const descEl = useRef(null);
|
||||
const releasenotesEl = useRef(null);
|
||||
const handleVehiclesChange = (event) => {
|
||||
setSelectedVehicles(event.target.value);
|
||||
};
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
@@ -77,7 +58,6 @@ const MainForm = () => {
|
||||
version: versionEl.current.value,
|
||||
description: descEl.current.value,
|
||||
releasenotes: releasenotesEl.current.value,
|
||||
vehicles: selectedVehicles,
|
||||
};
|
||||
|
||||
await upload(formData, authToken, files);
|
||||
@@ -86,18 +66,6 @@ const MainForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCarOpen = async () => {
|
||||
const {
|
||||
idToken: { jwtToken: authToken },
|
||||
} = token;
|
||||
|
||||
try {
|
||||
await getVehicles(null, authToken);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<Typography component="h1" variant="h5">
|
||||
@@ -158,42 +126,6 @@ const MainForm = () => {
|
||||
placeholder="Release Notes URL"
|
||||
inputRef={releasenotesEl}
|
||||
/>
|
||||
<FormControl
|
||||
className={classes.formControl}
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
>
|
||||
<InputLabel htmlFor="vehicles">Vehicles</InputLabel>
|
||||
<Select
|
||||
label="Vehicles"
|
||||
placeholder="Select vehicles"
|
||||
id="vehicles"
|
||||
name="vehicles"
|
||||
multiple
|
||||
className={classes.menuProps}
|
||||
onOpen={handleCarOpen}
|
||||
onChange={handleVehiclesChange}
|
||||
value={selectedVehicles}
|
||||
input={<Input id="select-multiple-chip" />}
|
||||
renderValue={(selected) => (
|
||||
<div className={classes.chips}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} className={classes.chip} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
{vehicles.map((vehicle) => (
|
||||
<MenuItem
|
||||
key={vehicle.vin}
|
||||
value={vehicle.vin}
|
||||
style={menuItemStyle(vehicle, selectedVehicles, theme)}
|
||||
>
|
||||
{vehicle.vin}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FileUploadZone classes={classes} />
|
||||
<Button
|
||||
type="submit"
|
||||
@@ -213,10 +145,8 @@ const MainForm = () => {
|
||||
|
||||
export default function FileUploadForm() {
|
||||
return (
|
||||
<VehicleProvider>
|
||||
<FileUploadProvider>
|
||||
<MainForm />
|
||||
</FileUploadProvider>
|
||||
</VehicleProvider>
|
||||
<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;
|
||||
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
textAlign: "center",
|
||||
},
|
||||
formControl: {
|
||||
margin: theme.spacing(1),
|
||||
margin: theme.spacing(3, 0, 2),
|
||||
width: "100%",
|
||||
minWidth: 120,
|
||||
},
|
||||
|
||||
48
src/services/__mocks__/updates.js
Normal file
48
src/services/__mocks__/updates.js
Normal file
@@ -0,0 +1,48 @@
|
||||
|
||||
|
||||
const updatesAPI = {
|
||||
createCarUpdates: async (data, token) => {
|
||||
if (!data.id) data.id = 0;
|
||||
data.id++;
|
||||
return data;
|
||||
},
|
||||
|
||||
getPackages: async (search, token) => {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
package_name: "Test",
|
||||
version: "1.0",
|
||||
link: "http://cloudfront.com/download"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
package_name: "Test",
|
||||
version: "1.1",
|
||||
link: "http://cloudfront.com/download"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
package_name: "Test",
|
||||
version: "1.2",
|
||||
link: "http://cloudfront.com/download"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
updatePackage: async (data, token) => {
|
||||
return data;
|
||||
},
|
||||
|
||||
deployPackage: async (data, token) => {
|
||||
return data;
|
||||
},
|
||||
|
||||
getCarUpdates: async (filter, token) => {
|
||||
return [];
|
||||
},
|
||||
};
|
||||
|
||||
export default updatesAPI;
|
||||
@@ -1,6 +1,6 @@
|
||||
import delay from "../../utils/delay";
|
||||
|
||||
let uploadFileResponse = { data: { link: "CLOUDFRONT_URL" } };
|
||||
let uploadFileResponse = { link: "CLOUDFRONT_URL" };
|
||||
let uploadFileDelay = false;
|
||||
let issuedCancelToken = null;
|
||||
|
||||
|
||||
42
src/services/updates.js
Normal file
42
src/services/updates.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { getAuthHeaderOptions, fetchRespHandler, addQueryParams } from "../utils/http";
|
||||
|
||||
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "https://gw-dev.fiskerdps.com/ota_update";
|
||||
|
||||
const updatesAPI = {
|
||||
createCarUpdates: async (data, token) => fetch(`${API_ENDPOINT}/carupdate`, {
|
||||
method: "POST",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then(fetchRespHandler),
|
||||
|
||||
getPackages: async (search, token) => {
|
||||
var u = addQueryParams(`${API_ENDPOINT}/updates`, search);
|
||||
return fetch(u, {
|
||||
method: "GET",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
|
||||
})
|
||||
.then(fetchRespHandler);
|
||||
},
|
||||
|
||||
updatePackage: async (update, token) => fetch(`${API_ENDPOINT}/update`, {
|
||||
method: "PUT",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
body: JSON.stringify(update),
|
||||
})
|
||||
.then(fetchRespHandler),
|
||||
|
||||
|
||||
getCarUpdates: async (search, token) => {
|
||||
var u = addQueryParams(`${API_ENDPOINT}/carupdates`, search);
|
||||
return fetch(u, {
|
||||
method: "GET",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
})
|
||||
.then(fetchRespHandler);
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default updatesAPI;
|
||||
@@ -29,5 +29,15 @@ export const uploadFile = (file, data, token, onProgress, cancelToken) => {
|
||||
form.append(key, data[key]);
|
||||
}
|
||||
form.append("file", file);
|
||||
return axios.post(`${UPLOAD_ENDPOINT}/upload`, form, options);
|
||||
return axios.post(`${UPLOAD_ENDPOINT}/update`, form, options)
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
if (typeof error.response.data === "string") {
|
||||
return {
|
||||
error: error.response.statusText,
|
||||
message: error.response.data,
|
||||
};
|
||||
}
|
||||
return error.response.data;
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { getAuthHeaderOptions, fetchRespHandler } from "../utils/http"
|
||||
import { getAuthHeaderOptions, fetchRespHandler, addQueryParams } from "../utils/http"
|
||||
|
||||
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL || "https://gw-dev.fiskerdps.com/ota_update";
|
||||
|
||||
@@ -9,12 +9,16 @@ const vehiclesAPI = {
|
||||
body: JSON.stringify(vehicle),
|
||||
})
|
||||
.then(fetchRespHandler),
|
||||
getVehicles: async (search, token) => fetch(`${API_ENDPOINT}/vehicles`, {
|
||||
method: "GET",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
|
||||
})
|
||||
.then(fetchRespHandler)
|
||||
getVehicles: async (search, token) => {
|
||||
const u = addQueryParams(`${API_ENDPOINT}/vehicles`, search);
|
||||
return fetch(u, {
|
||||
method: "GET",
|
||||
headers: Object.assign({ "Content-Type": "application/json" }, getAuthHeaderOptions(token)),
|
||||
|
||||
})
|
||||
.then(fetchRespHandler);
|
||||
},
|
||||
};
|
||||
|
||||
export default vehiclesAPI;
|
||||
|
||||
13
src/utils/dates.js
Normal file
13
src/utils/dates.js
Normal file
@@ -0,0 +1,13 @@
|
||||
export const ts2DateTime = (timestamp) => {
|
||||
return new Date(timestamp * 1000);
|
||||
}
|
||||
|
||||
export const tsLocalDateTimeString = (timestamp) => {
|
||||
const date = ts2DateTime(timestamp);
|
||||
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
|
||||
}
|
||||
|
||||
export const LocalDateTimeString = (datestring) => {
|
||||
const date = new Date(datestring.replace(' ', 'T'));
|
||||
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
|
||||
}
|
||||
@@ -12,3 +12,13 @@ export const fetchRespHandler = (response) => {
|
||||
message: `${response.status} ${response.statusText}`,
|
||||
}))
|
||||
}
|
||||
|
||||
export const addQueryParams = (url, params) => {
|
||||
if (!params) return url;
|
||||
|
||||
var u = new URL(url);
|
||||
|
||||
Object.keys(params).forEach(key => u.searchParams.append(key, params[key]))
|
||||
|
||||
return u.toString();
|
||||
}
|
||||
|
||||
42
src/utils/http.test.js
Normal file
42
src/utils/http.test.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { getAuthHeaderOptions, addQueryParams } from "./http";
|
||||
|
||||
describe("HTTP Helper", () => {
|
||||
it("Authorization header", () => {
|
||||
const result = getAuthHeaderOptions("TEST_TOKEN");
|
||||
|
||||
expect(result).toBeTruthy();
|
||||
expect(result.Authorization).toBeTruthy();
|
||||
expect(result.Authorization).toEqual("Bearer TEST_TOKEN");
|
||||
});
|
||||
|
||||
describe("addQueryParams", () => {
|
||||
it("String and number params", () => {
|
||||
const params = {
|
||||
a: "a",
|
||||
b: "b",
|
||||
c: 1,
|
||||
d: 3.14,
|
||||
}
|
||||
const result = addQueryParams("http://example.com", params);
|
||||
|
||||
expect(result).toEqual("http://example.com/?a=a&b=b&c=1&d=3.14");
|
||||
});
|
||||
|
||||
it("Null params", () => {
|
||||
const params = null;
|
||||
const result = addQueryParams("http://example.com", params);
|
||||
|
||||
expect(result).toEqual("http://example.com");
|
||||
});
|
||||
|
||||
it("Undefined params", () => {
|
||||
const result = addQueryParams("http://example.com");
|
||||
expect(result).toEqual("http://example.com");
|
||||
});
|
||||
|
||||
it("Empty params", () => {
|
||||
const result = addQueryParams("http://example.com", {});
|
||||
expect(result).toEqual("http://example.com/");
|
||||
});
|
||||
})
|
||||
});
|
||||
@@ -12,4 +12,3 @@ describe("JWT Helper", () => {
|
||||
expect(v.exp).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user