diff --git a/src/app/base/components/DhcpFormFields/DhcpFormFields.tsx b/src/app/base/components/DhcpFormFields/DhcpFormFields.tsx index b5945fc16c4..5796d10acef 100644 --- 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" ? ( - { - if (machine) { - formikProps.setFieldValue("entity", machine.system_id); - } else { - formikProps.setFieldValue("entity", ""); - } - }} - selected={formikProps.values.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 index aa620cc1f75..aaf09d0ecbe 100644 --- 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(); + renderWithMockStore( + + + + ); 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(); + renderWithMockStore( + + + + ); 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 index 2355d7fb6c9..0514c0a82be 100644 --- 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["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}
- {isOpen ? : null} + {isOpen ? ( + + ) : null}
diff --git a/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.tsx b/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.tsx index 8521d26e0d9..c35d20dfcf7 100644 --- a/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.tsx +++ b/src/app/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.tsx @@ -3,16 +3,18 @@ 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(""); @@ -20,7 +22,10 @@ const MachineSelectBox = ({ const { machines, machineCount, loading } = useFetchMachines({ currentPage, pageSize, - filters: { [FilterGroupKey.FreeText]: deboucedText }, + filters: { + [FilterGroupKey.FreeText]: deboucedText, + ...(filters ? filters : {}), + }, }); return (
diff --git a/src/app/dashboard/views/DiscoveriesList/_index.scss b/src/app/dashboard/views/DiscoveriesList/_index.scss index 8699e539f96..ec043a26f1a 100644 --- 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 index 610649a74be..5adacf1bef0 100644 --- 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,7 +131,9 @@ const DiscoveryAddFormFields = ({ /> ) : ( {Label.Parent}{" "} @@ -143,13 +141,6 @@ const DiscoveryAddFormFields = ({ } name="parent" - options={[ - { label: Label.SelectParent, value: "" }, - ...machines.map((machine) => ({ - label: machine.fqdn, - value: machine.system_id, - })), - ]} /> )}