CEC-5436: add release_notes, update_duration, and max_attempts to manifest update form (#489)

2023-12-01 11:41:27 -08:00
parent 5ad467b116
commit 3c19a8d601
5 changed files with 266 additions and 10 deletions
--- a/src/components/Controls/NumberField/NumberField.jsx
+++ b/src/components/Controls/NumberField/NumberField.jsx
@@ -0,0 +1,44 @@
+import {
+  Box,
+  FormControl,
+  FormHelperText,
+  Input,
+  InputLabel,
+} from "@material-ui/core";
+
+const PREFIX = "number-field";
+
+function kebab(str) {
+  return str.replaceAll(" ", "-").toLowerCase();
+}
+
+export function NumberField({
+  name,
+  description,
+  value = 0,
+  setValue = () => { },
+  ...rest
+}) {
+  const inputId = `${PREFIX}-${kebab(name)}`;
+  const describeId = `${PREFIX}-${kebab(name)}-describe`;
+
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  }
+  return (
+    <Box sx={{ my: 2 }}>
+      <FormControl fullWidth>
+        <InputLabel htmlFor={inputId}>{name}</InputLabel>
+        <Input
+          id={inputId}
+          aria-describedby={describeId}
+          type="number"
+          value={value}
+          onChange={handleChange}
+          {...rest}
+        />
+        <FormHelperText id={describeId}>{description}</FormHelperText>
+      </FormControl>
+    </Box>
+  );
+}
--- a/src/components/Controls/NumberField/NumberField.test.jsx
+++ b/src/components/Controls/NumberField/NumberField.test.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react";
+
+import { NumberField } from "./index";
+
+describe("NumberField", () => {
+  it("renders with form label and aria describe", () => {
+    const { getByText } = render(
+      <NumberField
+        name="My First Field"
+        description="Some helper text"
+      />
+    );
+
+    const labelEl = getByText("My First Field");
+    const describeEl = getByText("Some helper text");
+
+    expect(labelEl.htmlFor).toEqual("number-field-my-first-field");
+    expect(describeEl.id).toEqual("number-field-my-first-field-describe");
+  });
+
+  it("input is of type number", () => {
+    const { getByLabelText } = render(
+      <NumberField
+        name="My First Field"
+        description="Some helper text"
+      />
+    );
+
+    const inputEl = getByLabelText("My First Field", { selector: "input" });
+
+    expect(inputEl.type).toEqual("number");
+  });
+
+  it("updates parent state", () => {
+    let mockState = 0;
+    const mockSetState = jest.fn((value) => mockState = value);
+
+    const { getByLabelText } = render(
+      <NumberField
+        name="My First Field"
+        description="Enter a number"
+        value={mockState}
+        setValue={mockSetState}
+      />
+    );
+
+    const inputEl = getByLabelText("My First Field", { selector: "input" });
+
+    fireEvent.change(inputEl, { target: { value: "1" } });
+
+    expect(mockState).toEqual("1");
+    expect(mockSetState.mock.calls.length).toEqual(1);
+  });
+})
--- a/src/components/Controls/NumberField/index.jsx
+++ b/src/components/Controls/NumberField/index.jsx
@@ -0,0 +1 @@
+export * from "./NumberField";
--- a/src/components/Manifest/Update/snapshots/index.test.jsx.snap
+++ b/src/components/Manifest/Update/snapshots/index.test.jsx.snap
@@ -112,6 +112,43 @@ exports[`Manifest Details Component Render 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"
+                data-shrink="true"
+                for="release_notes"
+                id="release_notes-label"
+              >
+                Release Notes
+              </label>
+              <div
+                class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiOutlinedInput-input"
+                  id="release_notes"
+                  maxlength="255"
+                  name="release_notes"
+                  type="text"
+                  value="https://releasenotes.com"
+                />
+                <fieldset
+                  aria-hidden="true"
+                  class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                >
+                  <legend
+                    class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
+                  >
+                    <span>
+                      Release Notes
+                    </span>
+                  </legend>
+                </fieldset>
+              </div>
+            </div>
            <div
              class="MuiFormControl-root MuiFormControl-marginNormal"
            >
@@ -334,6 +371,68 @@ exports[`Manifest Details Component Render 1`] = `
                </fieldset>
              </div>
            </div>
+            <div
+              class="MuiBox-root MuiBox-root-0"
+            >
+              <div
+                class="MuiFormControl-root MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                  data-shrink="true"
+                  for="number-field-update-duration"
+                >
+                  Update Duration
+                </label>
+                <div
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                >
+                  <input
+                    aria-describedby="number-field-update-duration-describe"
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiInput-input"
+                    id="number-field-update-duration"
+                    type="number"
+                    value="0"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root MuiFormHelperText-filled"
+                  id="number-field-update-duration-describe"
+                />
+              </div>
+            </div>
+            <div
+              class="MuiBox-root MuiBox-root-0"
+            >
+              <div
+                class="MuiFormControl-root MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                  data-shrink="true"
+                  for="number-field-max-attempts"
+                >
+                  Max Attempts
+                </label>
+                <div
+                  class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
+                >
+                  <input
+                    aria-describedby="number-field-max-attempts-describe"
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiInput-input"
+                    id="number-field-max-attempts"
+                    type="number"
+                    value="0"
+                  />
+                </div>
+                <p
+                  class="MuiFormHelperText-root MuiFormHelperText-filled"
+                  id="number-field-max-attempts-describe"
+                />
+              </div>
+            </div>
            <button
              aria-label="send command"
              class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
--- a/src/components/Manifest/Update/index.jsx
+++ b/src/components/Manifest/Update/index.jsx
@@ -10,6 +10,7 @@ import { DropDownList } from "../../Controls/DropDownList";
 import { RoleWrap } from "../../Controls/RoleWrap";
 import { Permissions } from "../../../utils/roles";
 import useStyles from "../../useStyles";
+import { NumberField } from "../../Controls/NumberField";

 const manifestTypes = [
  { value: "standard", label: "Standard" },
@@ -17,13 +18,13 @@ const manifestTypes = [
 ];

 const activeStates = [
-  {value: true, label: "Active" },
-  {value: false, label: "Archived" },
+  { value: true, label: "Active" },
+  { value: false, label: "Archived" },
 ];

 const booleanStates = [
-  {value: true, label: "True" },
-  {value: false, label: "False" },
+  { value: true, label: "True" },
+  { value: false, label: "False" },
 ];

 const emptyManifest = {
@@ -51,15 +52,22 @@ const MainForm = () => {
  const { setMessage, setTitle, setSitePath } = useStatusContext();

  const [name, setName] = useState("");
+  const [releaseNotes, setReleaseNotes] = useState("");
  const [type, setType] = useState("");
  const [active, setActive] = useState(true); // So !active = archived
  const [rollback, setRollback] = useState(true);
  const [env, setEnv] = useState("current");
+  const [updateDuration, setUpdateDuration] = useState(0);
+  const [maxAttempts, setMaxAttempts] = useState(0);

  const changeName = (e) => {
    setName(e.target.value);
  }

+  const changeReleaseNotes = (e) => {
+    setReleaseNotes(e.target.value);
+  }
+
  const changeType = (e) => {
    setType(e.target.value);
  };
@@ -76,10 +84,33 @@ const MainForm = () => {
    setEnv(e.target.value)
  }

+  const changeUpdateDuration = (value) => {
+    if (value < 0) {
+      return;
+    }
+    setUpdateDuration(value);
+  }
+
+  const changeMaxAttempts = (value) => {
+    if (value < 0) {
+      return;
+    }
+    setMaxAttempts(value);
+  }
+
  const onSubmit = async (e) => {
    e.preventDefault();
    try {
-      const result = await updateManifest(manifest_id, { name, type, active, rollback, env }, token);
+      const result = await updateManifest(manifest_id, {
+        name,
+        release_notes: releaseNotes,
+        type,
+        active,
+        rollback,
+        env,
+        update_duration: parseInt(updateDuration),
+        max_attempts: parseInt(maxAttempts),
+      }, token);
      if (!result || result.error) return;

      setMessage(`Updated manifest ${manifest_id}`);
@@ -92,11 +123,11 @@ const MainForm = () => {

  const manifestMigrate = async (e) => {
    e.preventDefault();
-    try{
+    try {
      const result = await migrateManifest(manifest_id, token)
      if (!result || result.error) return;
      setMessage(`Manifest Migrated ${manifest_id}`)
-    } catch(e) {
+    } catch (e) {
      setMessage(`Failed to update manifest ${manifest_id}`)
    }
  }
@@ -110,10 +141,13 @@ const MainForm = () => {
        } else {
          setManifest(result);
          setName(result.name);
+          setReleaseNotes(result.release_notes);
          setType(result.type);
          setActive(result.active);
          setRollback(result.rollback);
          setEnv(result.env ?? "current");
+          setUpdateDuration(result.update_duration);
+          setMaxAttempts(result.max_attempts);
        }
      } catch (e) {
        setMessage(e.message);
@@ -176,12 +210,35 @@ const MainForm = () => {
          fullWidth
          onChange={changeName}
        />
+        <TextField
+          id="release_notes"
+          name="release_notes"
+          label="Release Notes"
+          variant="outlined"
+          margin="normal"
+          inputProps={{
+            maxLength: "255",
+          }}
+          value={releaseNotes}
+          fullWidth
+          onChange={changeReleaseNotes}
+        />
        <DropDownList label="Type" data={manifestTypes} classes={classes} onChange={changeType} value={type} />
-        <DropDownList label="Active" data={activeStates} classes={classes} onChange={changeActive} value={active}/>
-        <DropDownList label="Rollback" data={booleanStates} classes={classes} onChange={changeRollback} value={rollback}/>
+        <DropDownList label="Active" data={activeStates} classes={classes} onChange={changeActive} value={active} />
+        <DropDownList label="Rollback" data={booleanStates} classes={classes} onChange={changeRollback} value={rollback} />
        {
-          ENVS.length > 1 && <DropDownList label="ECC Keys" data={ENVS} classes={classes} onChange={changeEnv} value={env}/>
+          ENVS.length > 1 && <DropDownList label="ECC Keys" data={ENVS} classes={classes} onChange={changeEnv} value={env} />
        }
+        <NumberField
+          name="Update Duration"
+          value={updateDuration}
+          setValue={changeUpdateDuration}
+        />
+        <NumberField
+          name="Max Attempts"
+          value={maxAttempts}
+          setValue={changeMaxAttempts}
+        />
        <Button
          type="submit"
          aria-label="send command"