update discovery form api

canonical · Sep 8, 2022 · e4ebc8c · e4ebc8c
1 parent 934218f
commit e4ebc8c
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 41 deletions.
diff --git a/src/app/base/components/DhcpFormFields/DhcpFormFields.tsx b/src/app/base/components/DhcpFormFields/DhcpFormFields.tsx
@@ -132,16 +132,7 @@ export const DhcpFormFields = ({ editing }: Props): JSX.Element => {
         ]}
       />
       {type === "machine" ? (
-        <MachineSelect
-          onSelect={(machine) => {
-            if (machine) {
-              formikProps.setFieldValue("entity", machine.system_id);
-            } else {
-              formikProps.setFieldValue("entity", "");
-            }
-          }}
-          selected={formikProps.values.entity}
-        />
+        <FormikField component={MachineSelect} name="entity" />
       ) : (
         type &&
         (isLoading || !hasLoaded ? (

diff --git a/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelect.test.tsx b/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelect.test.tsx
@@ -1,12 +1,17 @@
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { Formik } from "formik";
 
 import MachineSelect, { Labels } from "./MachineSelect";
 
 import { renderWithMockStore } from "testing/utils";
 
 it("can open select box on click", async () => {
-  renderWithMockStore(<MachineSelect onSelect={jest.fn()} />);
+  renderWithMockStore(
+    <Formik initialValues={{ machine: "" }} onSubmit={jest.fn()}>
+      <MachineSelect name="machine" />
+    </Formik>
+  );
 
   expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
   await userEvent.click(
@@ -16,7 +21,11 @@ it("can open select box on click", async () => {
 });
 
 it("sets focus on the input field on open", async () => {
-  renderWithMockStore(<MachineSelect onSelect={jest.fn()} />);
+  renderWithMockStore(
+    <Formik initialValues={{ machine: "" }} onSubmit={jest.fn()}>
+      <MachineSelect name="machine" />
+    </Formik>
+  );
 
   await userEvent.click(
     screen.getByRole("button", { name: Labels.ChooseMachine })

diff --git a/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelect.tsx b/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelect.tsx
@@ -1,7 +1,9 @@
+import type { HTMLProps } from "react";
 import { useEffect, useState } from "react";
 
 import { Label, useId, useOnEscapePressed } from "@canonical/react-components";
 import className from "classnames";
+import { useFormikContext } from "formik";
 import { useDispatch } from "react-redux";
 
 import SelectButton from "../../SelectButton";
@@ -10,7 +12,7 @@ import MachineSelectBox from "./MachineSelectBox/MachineSelectBox";
 
 import OutsideClickHandler from "app/base/components/OutsideClickHandler";
 import { usePreviousPersistent } from "app/base/hooks";
-import type { Machine } from "app/store/machine/types";
+import type { FetchFilters, Machine } from "app/store/machine/types";
 import { useFetchMachine } from "app/store/machine/utils/hooks";
 import { actions as tagActions } from "app/store/tag";
 
@@ -20,28 +22,34 @@ export enum Labels {
   ChooseMachine = "Choose machine",
 }
 
-type Props = {
-  label?: string;
-  onSelect: (machine: Machine | null) => void;
-  selected?: Machine["system_id"] | null;
+export type Props = {
+  label?: React.ReactNode;
+  defaultOption?: string;
+  filters?: FetchFilters;
+  displayError?: boolean;
+  name: string;
+  value?: HTMLProps<HTMLElement>["value"];
 };
 
 export const MachineSelect = ({
+  name,
+  filters,
   label = Labels.AppliesTo,
-  onSelect,
-  selected = null,
+  defaultOption = Labels.ChooseMachine,
+  value,
 }: Props): JSX.Element => {
+  const { setFieldValue } = useFormikContext();
   const dispatch = useDispatch();
   const [isOpen, setIsOpen] = useState(false);
   const selectId = useId();
   const handleSelect = (machine: Machine | null) => {
     setIsOpen(false);
-    onSelect(machine);
+    setFieldValue(name, machine?.system_id || null);
   };
-  const { machine } = useFetchMachine(selected);
+  useOnEscapePressed(() => setIsOpen(false));
+  const { machine } = useFetchMachine(value as string);
   const previousMachine = usePreviousPersistent(machine);
   const selectedMachine = machine || previousMachine;
-  useOnEscapePressed(() => setIsOpen(false));
 
   useEffect(() => {
     dispatch(tagActions.fetch());
@@ -58,18 +66,20 @@ export const MachineSelect = ({
           onClick={() => {
             setIsOpen(!isOpen);
             if (!isOpen) {
-              onSelect(null);
+              setFieldValue(name, "", false);
             }
           }}
         >
-          {selectedMachine?.hostname || Labels.ChooseMachine}
+          {selectedMachine?.hostname || defaultOption}
         </SelectButton>
         <div
           className={className("machine-select-box-wrapper", {
             "machine-select-box-wrapper--is-open": isOpen,
           })}
         >
-          {isOpen ? <MachineSelectBox onSelect={handleSelect} /> : null}
+          {isOpen ? (
+            <MachineSelectBox filters={filters} onSelect={handleSelect} />
+          ) : null}
         </div>
       </OutsideClickHandler>
     </div>

diff --git a/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.tsx b/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.tsx
@@ -3,24 +3,29 @@ import { useState } from "react";
 import DebounceSearchBox from "app/base/components/DebounceSearchBox";
 import { MachineSelectTable } from "app/base/components/MachineSelectTable/MachineSelectTable";
 import MachineListPagination from "app/machines/views/MachineList/MachineListTable/MachineListPagination";
-import type { Machine } from "app/store/machine/types";
+import type { FetchFilters, Machine } from "app/store/machine/types";
 import { FilterGroupKey } from "app/store/machine/types";
 import { useFetchMachines } from "app/store/machine/utils/hooks";
 
 const MachineSelectBox = ({
   onSelect,
   pageSize = 15,
+  filters,
 }: {
   pageSize?: number;
   onSelect: (machine: Machine | null) => void;
+  filters?: FetchFilters;
 }): JSX.Element => {
   const [searchText, setSearchText] = useState("");
   const [deboucedText, setDebouncedText] = useState("");
   const [currentPage, setPage] = useState(1);
   const { machines, machineCount, loading } = useFetchMachines({
     currentPage,
     pageSize,
-    filters: { [FilterGroupKey.FreeText]: deboucedText },
+    filters: {
+      [FilterGroupKey.FreeText]: deboucedText,
+      ...(filters ? filters : {}),
+    },
   });
   return (
     <div className="machine-select-box" role="listbox">

diff --git a/src/app/dashboard/views/DiscoveriesList/_index.scss b/src/app/dashboard/views/DiscoveriesList/_index.scss
@@ -1,5 +1,5 @@
 @mixin DiscoveriesList {
-  .p-table--network-discoveries {
+  .p-table--network-discoveries > tbody > {
     th,
     td {
       &:nth-child(1) {

diff --git a/src/app/dashboard/views/DiscoveryAddForm/DiscoveryAddFormFields/DiscoveryAddFormFields.tsx b/src/app/dashboard/views/DiscoveryAddForm/DiscoveryAddFormFields/DiscoveryAddFormFields.tsx
@@ -6,6 +6,7 @@ import { Link } from "react-router-dom-v5-compat";
 import type { DiscoveryAddValues } from "../types";
 import { DeviceType } from "../types";
 
+import MachineSelect from "app/base/components/DhcpFormFields/MachineSelect";
 import FormikField from "app/base/components/FormikField";
 import IpAssignmentSelect from "app/base/components/IpAssignmentSelect";
 import TooltipButton from "app/base/components/TooltipButton";
@@ -15,7 +16,6 @@ import type { Device } from "app/store/device/types";
 import { DeviceMeta } from "app/store/device/types";
 import type { Discovery } from "app/store/discovery/types";
 import domainSelectors from "app/store/domain/selectors";
-import { useFetchMachines } from "app/store/machine/utils/hooks";
 import type { RootState } from "app/store/root/types";
 import subnetSelectors from "app/store/subnet/selectors";
 import { getSubnetDisplay } from "app/store/subnet/utils";
@@ -51,10 +51,6 @@ const DiscoveryAddFormFields = ({
 }: Props): JSX.Element | null => {
   const devices = useSelector(deviceSelectors.all);
   const domains = useSelector(domainSelectors.all);
-  const { machines } = useFetchMachines({
-    filters: { status: FetchNodeStatus.DEPLOYED },
-  });
-
   const subnet = useSelector((state: RootState) =>
     subnetSelectors.getByCIDR(state, discovery.subnet_cidr)
   );
@@ -135,21 +131,16 @@ const DiscoveryAddFormFields = ({
             />
           ) : (
             <FormikField
-              component={Select}
+              component={MachineSelect}
+              defaultOption={Label.SelectParent}
+              filters={{ status: FetchNodeStatus.DEPLOYED }}
               label={
                 <>
                   {Label.Parent}{" "}
                   <TooltipButton message="Assign this device as a child of the parent machine." />
                 </>
               }
               name="parent"
-              options={[
-                { label: Label.SelectParent, value: "" },
-                ...machines.map((machine) => ({
-                  label: machine.fqdn,
-                  value: machine.system_id,
-                })),
-              ]}
             />
           )}
         </Col>