diff --git a/cypress/e2e/with-users/settings/headings.spec.ts b/cypress/e2e/with-users/settings/headings.spec.ts new file mode 100644 index 0000000000..a401d8fb4e --- /dev/null +++ b/cypress/e2e/with-users/settings/headings.spec.ts @@ -0,0 +1,109 @@ +import { generateMAASURL } from "../../utils"; + +const settingsPages = [ + { + path: "/settings/configuration/general", + label: "General", + }, + { + path: "/settings/configuration/commissioning", + label: "Commissioning", + }, + { + path: "/settings/configuration/deploy", + label: "Deploy", + }, + { + path: "/settings/configuration/kernel-parameters", + label: "Kernel parameters", + }, + { + path: "/settings/security/security-protocols", + label: "Security protocols", + }, + { + path: "/settings/security/secret-storage", + label: "Secret storage", + }, + { + path: "/settings/security/session-timeout", + label: "Session timeout", + }, + { + path: "/settings/security/ipmi-settings", + label: "IPMI settings", + }, + { + path: "/settings/users", + label: "Users", + }, + { + path: "/settings/images/ubuntu", + label: "Ubuntu", + }, + { + path: "/settings/images/windows", + label: "Windows", + }, + { + path: "/settings/images/vmware", + label: "VMware", + }, + { + path: "/settings/license-keys", + label: "License keys", + }, + { + path: "/settings/storage", + label: "Storage", + }, + { + path: "/settings/network/proxy", + label: "Proxy", + }, + { + path: "/settings/network/dns", + label: "DNS", + }, + { + path: "/settings/network/ntp", + label: "NTP", + }, + { + path: "/settings/network/syslog", + label: "Syslog", + }, + { + path: "/settings/network/network-discovery", + label: "Network discovery", + }, + { + path: "/settings/scripts/commissioning", + label: "Commissioning scripts", + }, + { + path: "/settings/scripts/testing", + label: "Testing scripts", + }, + { + path: "/settings/dhcp", + label: "DHCP snippets", + }, + { + path: "/settings/repositories", + label: "Package repos", + }, +]; + +context("settings pages titles", () => { + beforeEach(() => { + cy.login(); + }); + + settingsPages.forEach((page) => { + it(`${page.label} page`, () => { + cy.visit(generateMAASURL(page.path)); + cy.findByRole("heading", { name: page.label }).should("exist"); + }); + }); +}); diff --git a/src/app/base/components/ActionForm/ActionForm.tsx b/src/app/base/components/ActionForm/ActionForm.tsx index 5cada0709b..4a69649fec 100644 --- a/src/app/base/components/ActionForm/ActionForm.tsx +++ b/src/app/base/components/ActionForm/ActionForm.tsx @@ -33,7 +33,7 @@ const getLabel = ( export type ActionFormProps = Omit< FormikFormProps, - "buttonsAlign" | "saved" | "saving" | "savingLabel" | "submitLabel" + "saved" | "saving" | "savingLabel" | "submitLabel" > & { actionName: string; loaded?: boolean; @@ -53,7 +53,6 @@ export enum Labels { const ActionForm = ({ actionErrors, actionName, - buttonsBordered = false, children, errors, loaded = true, @@ -90,8 +89,6 @@ const ActionForm = ({ return ( - buttonsAlign="right" - buttonsBordered={buttonsBordered} onSubmit={(values?, formikHelpers?) => { onSubmit(values, formikHelpers); // Set selected count in component state once form is submitted, so diff --git a/src/app/base/components/FormikForm/FormikForm.tsx b/src/app/base/components/FormikForm/FormikForm.tsx index fdf9cfeaa6..cf5d183f66 100644 --- a/src/app/base/components/FormikForm/FormikForm.tsx +++ b/src/app/base/components/FormikForm/FormikForm.tsx @@ -16,8 +16,6 @@ export type Props = ContentProps & const FormikForm = ({ allowAllEmpty, allowUnchanged, - buttonsAlign, - buttonsBordered, buttonsClassName, buttonsHelpClassName, buttonsHelp, @@ -55,8 +53,6 @@ const FormikForm = ({ allowAllEmpty={allowAllEmpty} allowUnchanged={allowUnchanged} aria-label={ariaLabel} - buttonsAlign={buttonsAlign} - buttonsBordered={buttonsBordered} buttonsClassName={buttonsClassName} buttonsHelp={buttonsHelp} buttonsHelpClassName={buttonsHelpClassName} diff --git a/src/app/base/components/FormikFormButtons/FormikFormButtons.test.tsx b/src/app/base/components/FormikFormButtons/FormikFormButtons.test.tsx index 0ba579af1e..c13b6a6690 100644 --- a/src/app/base/components/FormikFormButtons/FormikFormButtons.test.tsx +++ b/src/app/base/components/FormikFormButtons/FormikFormButtons.test.tsx @@ -73,16 +73,6 @@ it("can display a tooltip for the secondary submit action", async () => { ).toBeInTheDocument(); }); -it("displays a border if bordered is true", () => { - render( - - - - ); - - expect(screen.getByTestId("buttons-wrapper")).toHaveClass("is-bordered"); -}); - it("displays inline if inline is true", () => { render( diff --git a/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx b/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx index dac8c911f0..201d8a334f 100644 --- a/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx +++ b/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx @@ -12,8 +12,6 @@ export type FormikContextFunc = ( ) => R; export type Props = { - buttonsAlign?: "left" | "right"; - buttonsBordered?: boolean; buttonsClassName?: string; buttonsHelp?: ReactNode; buttonsHelpClassName?: string; @@ -47,8 +45,6 @@ export enum Labels { } export const FormikFormButtons = ({ - buttonsAlign = "right", - buttonsBordered = true, buttonsClassName, buttonsHelp, buttonsHelpClassName, @@ -111,7 +107,6 @@ export const FormikFormButtons = ({ <>
({ {buttonsHelp}
)} -
- {onCancel && ( - - )} - {secondaryButton} - onCancel(values, formikContext) : undefined + } + type="button" > - {submitLabel} - -
+ {cancelLabel} + + )} + {secondaryButton} + + {submitLabel} + {saving && savingLabel && (

({ inline={inline} onSubmit={handleSubmit} > - {!!nonFieldError && ( - - {nonFieldError} - - )} - {typeof children === "function" - ? children({ ...formikContext }) - : children} - {editable && ( - - )} - {footer} + + + {!!nonFieldError && ( + + {nonFieldError} + + )} + {typeof children === "function" + ? children({ ...formikContext }) + : children} + + + {editable && ( + + )} + {footer} + + ); }; diff --git a/src/app/base/components/MainContentSection/MainContentSection.tsx b/src/app/base/components/MainContentSection/MainContentSection.tsx index 1970d7012e..e3e58cf8cb 100644 --- a/src/app/base/components/MainContentSection/MainContentSection.tsx +++ b/src/app/base/components/MainContentSection/MainContentSection.tsx @@ -1,6 +1,6 @@ import type { HTMLProps, ReactNode } from "react"; -import { Col, Strip } from "@canonical/react-components"; +import { Col, Row } from "@canonical/react-components"; import type { ColSize } from "@canonical/react-components"; import NotificationList from "app/base/components/NotificationList"; @@ -29,7 +29,7 @@ const MainContentSection = ({ {header} ) : null} - + {sidebar && ( {sidebar} @@ -39,7 +39,7 @@ const MainContentSection = ({ {!isNotificationListHidden && } {children} - + ); diff --git a/src/app/base/components/NodeName/NodeName.tsx b/src/app/base/components/NodeName/NodeName.tsx index d608c0752f..b74d4f2e81 100644 --- a/src/app/base/components/NodeName/NodeName.tsx +++ b/src/app/base/components/NodeName/NodeName.tsx @@ -78,8 +78,6 @@ const NodeName = ({ } return ( - buttonsAlign="right" - buttonsBordered={false} className="node-name" footer={ hostnameError ? ( diff --git a/src/app/base/views/NotFound/NotFound.test.tsx b/src/app/base/views/NotFound/NotFound.test.tsx index 121b2ef8ad..600fae9e1d 100644 --- a/src/app/base/views/NotFound/NotFound.test.tsx +++ b/src/app/base/views/NotFound/NotFound.test.tsx @@ -13,10 +13,10 @@ describe("NotFound ", () => { expect(container.querySelector("section")).not.toBeInTheDocument(); }); - it("can render in a section", () => { + it("can render in a row", () => { const { container } = renderWithBrowserRouter(, { route: "/404", }); - expect(container.querySelector("section")).toBeInTheDocument(); + expect(container.querySelector(".row")).toBeInTheDocument(); }); }); diff --git a/src/app/domains/views/DomainDetails/DomainDetailsHeader/AddRecordForm/AddRecordForm.tsx b/src/app/domains/views/DomainDetails/DomainDetailsHeader/AddRecordForm/AddRecordForm.tsx index 9a66caf3b4..8f626ebdc1 100644 --- a/src/app/domains/views/DomainDetails/DomainDetailsHeader/AddRecordForm/AddRecordForm.tsx +++ b/src/app/domains/views/DomainDetails/DomainDetailsHeader/AddRecordForm/AddRecordForm.tsx @@ -50,7 +50,6 @@ const AddRecordForm = ({ closeForm, id }: Props): JSX.Element => { return ( - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{ diff --git a/src/app/domains/views/DomainDetails/DomainDetailsHeader/DeleteDomainForm/DeleteDomainForm.tsx b/src/app/domains/views/DomainDetails/DomainDetailsHeader/DeleteDomainForm/DeleteDomainForm.tsx index 3e395a7ba9..d81d0af536 100644 --- a/src/app/domains/views/DomainDetails/DomainDetailsHeader/DeleteDomainForm/DeleteDomainForm.tsx +++ b/src/app/domains/views/DomainDetails/DomainDetailsHeader/DeleteDomainForm/DeleteDomainForm.tsx @@ -44,7 +44,6 @@ const DeleteDomainForm = ({ closeForm, id }: Props): JSX.Element | null => { return ( - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{}} diff --git a/src/app/domains/views/DomainDetails/DomainSummary/DomainSummary.tsx b/src/app/domains/views/DomainDetails/DomainSummary/DomainSummary.tsx index 50870ffdb4..220f4fd962 100644 --- a/src/app/domains/views/DomainDetails/DomainSummary/DomainSummary.tsx +++ b/src/app/domains/views/DomainDetails/DomainSummary/DomainSummary.tsx @@ -64,8 +64,6 @@ const DomainSummary = ({ id }: Props): JSX.Element | null => { editing ? ( aria-label={Labels.FormLabel} - buttonsAlign="right" - buttonsBordered={false} cleanup={cleanup} data-testid="domain-summary-form" errors={errors} diff --git a/src/app/domains/views/DomainDetails/ResourceRecords/DeleteRecordForm/DeleteRecordForm.tsx b/src/app/domains/views/DomainDetails/ResourceRecords/DeleteRecordForm/DeleteRecordForm.tsx index b2fae4f2cd..133240f823 100644 --- a/src/app/domains/views/DomainDetails/ResourceRecords/DeleteRecordForm/DeleteRecordForm.tsx +++ b/src/app/domains/views/DomainDetails/ResourceRecords/DeleteRecordForm/DeleteRecordForm.tsx @@ -49,7 +49,6 @@ const DeleteRecordForm = ({ return ( aria-label={Labels.FormLabel} - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{}} diff --git a/src/app/domains/views/DomainDetails/ResourceRecords/EditRecordForm/EditRecordForm.tsx b/src/app/domains/views/DomainDetails/ResourceRecords/EditRecordForm/EditRecordForm.tsx index 11df923120..4b0636f8b0 100644 --- a/src/app/domains/views/DomainDetails/ResourceRecords/EditRecordForm/EditRecordForm.tsx +++ b/src/app/domains/views/DomainDetails/ResourceRecords/EditRecordForm/EditRecordForm.tsx @@ -48,7 +48,6 @@ const EditRecordForm = ({ closeForm, id, resource }: Props): JSX.Element => { return ( aria-label={Labels.FormLabel} - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{ diff --git a/src/app/domains/views/DomainsList/DomainListHeaderForm/DomainListHeaderForm.tsx b/src/app/domains/views/DomainsList/DomainListHeaderForm/DomainListHeaderForm.tsx index 1a79aa2a4a..f5483d2f65 100644 --- a/src/app/domains/views/DomainsList/DomainListHeaderForm/DomainListHeaderForm.tsx +++ b/src/app/domains/views/DomainsList/DomainListHeaderForm/DomainListHeaderForm.tsx @@ -61,7 +61,6 @@ const DomainListHeaderForm = ({ closeForm }: Props): JSX.Element => { return ( aria-label={Labels.FormLabel} - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{ diff --git a/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx b/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx index 892481168e..89eaff0386 100644 --- a/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx +++ b/src/app/images/views/ImageList/SyncedImages/ChangeSource/FetchedImages/FetchedImages.tsx @@ -89,7 +89,6 @@ const FetchedImages = ({ closeForm, source }: Props): JSX.Element | null => {

allowUnchanged - buttonsBordered={false} cleanup={cleanup} enableReinitialize errors={error} diff --git a/src/app/images/views/ImageList/SyncedImages/OtherImages/OtherImages.tsx b/src/app/images/views/ImageList/SyncedImages/OtherImages/OtherImages.tsx index 47544e3197..d3993184f1 100644 --- a/src/app/images/views/ImageList/SyncedImages/OtherImages/OtherImages.tsx +++ b/src/app/images/views/ImageList/SyncedImages/OtherImages/OtherImages.tsx @@ -94,7 +94,6 @@ const OtherImages = (): JSX.Element | null => {

{Labels.OtherImages}

allowUnchanged - buttonsBordered={false} cleanup={cleanup} enableReinitialize errors={error} diff --git a/src/app/images/views/ImageList/SyncedImages/UbuntuCoreImages/UbuntuCoreImages.tsx b/src/app/images/views/ImageList/SyncedImages/UbuntuCoreImages/UbuntuCoreImages.tsx index 2d8b193bf9..333ec9bb71 100644 --- a/src/app/images/views/ImageList/SyncedImages/UbuntuCoreImages/UbuntuCoreImages.tsx +++ b/src/app/images/views/ImageList/SyncedImages/UbuntuCoreImages/UbuntuCoreImages.tsx @@ -94,7 +94,6 @@ const UbuntuCoreImages = (): JSX.Element | null => {

{Labels.CoreImages}

allowUnchanged - buttonsBordered={false} cleanup={cleanup} enableReinitialize errors={error} diff --git a/src/app/images/views/ImageList/SyncedImages/UbuntuImages/UbuntuImages.tsx b/src/app/images/views/ImageList/SyncedImages/UbuntuImages/UbuntuImages.tsx index 0780499cce..9f779bbd82 100644 --- a/src/app/images/views/ImageList/SyncedImages/UbuntuImages/UbuntuImages.tsx +++ b/src/app/images/views/ImageList/SyncedImages/UbuntuImages/UbuntuImages.tsx @@ -102,7 +102,6 @@ const UbuntuImages = ({ sources }: Props): JSX.Element | null => { allowUnchanged - buttonsBordered={false} cleanup={cleanup} editable={!tooManySources} enableReinitialize diff --git a/src/app/intro/views/MaasIntro/MaasIntro.tsx b/src/app/intro/views/MaasIntro/MaasIntro.tsx index 4e6eb44e69..fc298ee67b 100644 --- a/src/app/intro/views/MaasIntro/MaasIntro.tsx +++ b/src/app/intro/views/MaasIntro/MaasIntro.tsx @@ -76,7 +76,6 @@ const MaasIntro = (): JSX.Element => { <> allowUnchanged - buttonsBordered={false} cleanup={configActions.cleanup} editable={!showSkip} errors={errors} diff --git a/src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.tsx b/src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.tsx index 989d03946b..6c61d2bd90 100644 --- a/src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.tsx +++ b/src/app/machines/components/MachineForms/MachineActionFormWrapper/CloneForm/CloneForm.tsx @@ -85,7 +85,6 @@ export const CloneForm = ({ ) : ( actionName={NodeActions.CLONE} - buttonsBordered buttonsHelp={

The clone function allows you to apply storage and/or network diff --git a/src/app/networkDiscovery/views/NetworkDiscoveryConfigurationForm/NetworkDiscoveryConfigurationSubnetForm/NetworkDiscoveryConfigurationSubnetForm.tsx b/src/app/networkDiscovery/views/NetworkDiscoveryConfigurationForm/NetworkDiscoveryConfigurationSubnetForm/NetworkDiscoveryConfigurationSubnetForm.tsx index 5f213f2469..cc5651ab20 100644 --- a/src/app/networkDiscovery/views/NetworkDiscoveryConfigurationForm/NetworkDiscoveryConfigurationSubnetForm/NetworkDiscoveryConfigurationSubnetForm.tsx +++ b/src/app/networkDiscovery/views/NetworkDiscoveryConfigurationForm/NetworkDiscoveryConfigurationSubnetForm/NetworkDiscoveryConfigurationSubnetForm.tsx @@ -50,8 +50,6 @@ const NetworkDiscoveryConfigurationSubnetForm = (): JSX.Element => { content = ( aria-label={Labels.FormLabel} - buttonsAlign="left" - buttonsBordered={false} initialValues={initialValues} onSubmit={(values, { resetForm }) => { subnets.forEach((subnet) => { diff --git a/src/app/networkDiscovery/views/NetworkDiscoveryHeader/ClearAllForm/ClearAllForm.tsx b/src/app/networkDiscovery/views/NetworkDiscoveryHeader/ClearAllForm/ClearAllForm.tsx index b13798c3a8..90552e24df 100644 --- a/src/app/networkDiscovery/views/NetworkDiscoveryHeader/ClearAllForm/ClearAllForm.tsx +++ b/src/app/networkDiscovery/views/NetworkDiscoveryHeader/ClearAllForm/ClearAllForm.tsx @@ -63,7 +63,6 @@ const ClearAllForm = ({ closeForm }: Props): JSX.Element => { } return ( - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{}} diff --git a/src/app/preferences/views/Details/Details.tsx b/src/app/preferences/views/Details/Details.tsx index e8bc05431a..4fb728b4aa 100644 --- a/src/app/preferences/views/Details/Details.tsx +++ b/src/app/preferences/views/Details/Details.tsx @@ -46,8 +46,6 @@ export const Details = (): JSX.Element => { { return (

-
- {searchOnChange ? ( - - ) : ( -
- )} - {buttons?.map(({ label, url, disabled = false, tooltip }) => - tooltip ? ( - - + + ) : ( + - - ) : ( - - ) - )} -
+ ) + )} + + {loading && (
)} { }, [dispatch, loaded]); return ( - - + + + Commissioning + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Configuration/CommissioningForm/CommissioningForm.tsx b/src/app/settings/views/Configuration/CommissioningForm/CommissioningForm.tsx index 4543b6753d..917f21c05e 100644 --- a/src/app/settings/views/Configuration/CommissioningForm/CommissioningForm.tsx +++ b/src/app/settings/views/Configuration/CommissioningForm/CommissioningForm.tsx @@ -36,8 +36,6 @@ const CommissioningForm = (): JSX.Element => { return ( aria-label={Labels.FormLabel} - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/settings/views/Configuration/Deploy/Deploy.tsx b/src/app/settings/views/Configuration/Deploy/Deploy.tsx index 64e80eccb5..6ee66466c7 100644 --- a/src/app/settings/views/Configuration/Deploy/Deploy.tsx +++ b/src/app/settings/views/Configuration/Deploy/Deploy.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useSelector, useDispatch } from "react-redux"; import { useWindowTitle } from "app/base/hooks"; @@ -29,12 +30,15 @@ const Deploy = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + Deploy + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Configuration/DeployForm/DeployForm.tsx b/src/app/settings/views/Configuration/DeployForm/DeployForm.tsx index 4498074013..131d032180 100644 --- a/src/app/settings/views/Configuration/DeployForm/DeployForm.tsx +++ b/src/app/settings/views/Configuration/DeployForm/DeployForm.tsx @@ -36,8 +36,6 @@ const DeployForm = (): JSX.Element => { return ( aria-label="deploy configuration" - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/settings/views/Configuration/General/General.tsx b/src/app/settings/views/Configuration/General/General.tsx index 4989694052..f976c2554f 100644 --- a/src/app/settings/views/Configuration/General/General.tsx +++ b/src/app/settings/views/Configuration/General/General.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import GeneralForm from "../GeneralForm"; @@ -27,12 +28,15 @@ const General = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + General + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Configuration/GeneralForm/GeneralForm.tsx b/src/app/settings/views/Configuration/GeneralForm/GeneralForm.tsx index 2a53973176..fda7a09749 100644 --- a/src/app/settings/views/Configuration/GeneralForm/GeneralForm.tsx +++ b/src/app/settings/views/Configuration/GeneralForm/GeneralForm.tsx @@ -78,8 +78,6 @@ const GeneralForm = (): JSX.Element => { return ( aria-label="Configuration - General" - buttonsAlign="right" - buttonsBordered={true} cleanup={configActions.cleanup} errors={errors} initialValues={{ @@ -156,7 +154,7 @@ const GeneralForm = (): JSX.Element => { { value: ColorValues.Magenta, label: "Magenta" }, { value: ColorValues.Red, label: "Red" }, ].map((color, i) => ( - + { }, [dispatch, loaded]); return ( - - + + + Kernel parameters + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Configuration/KernelParametersForm/KernelParametersForm.tsx b/src/app/settings/views/Configuration/KernelParametersForm/KernelParametersForm.tsx index 7f7790ad0b..7fee740b3e 100644 --- a/src/app/settings/views/Configuration/KernelParametersForm/KernelParametersForm.tsx +++ b/src/app/settings/views/Configuration/KernelParametersForm/KernelParametersForm.tsx @@ -34,8 +34,6 @@ const KernelParametersForm = (): JSX.Element => { return ( aria-label={Labels.FormLabel} - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/settings/views/Dhcp/DhcpList/DhcpList.test.tsx b/src/app/settings/views/Dhcp/DhcpList/DhcpList.test.tsx index af644b71ba..774a999fc3 100644 --- a/src/app/settings/views/Dhcp/DhcpList/DhcpList.test.tsx +++ b/src/app/settings/views/Dhcp/DhcpList/DhcpList.test.tsx @@ -202,7 +202,7 @@ describe("DhcpList", () => { expect(rows.length).toBe(3); await userEvent.type( - screen.getByRole("searchbox", { name: "Search DHCP snippets" }), + screen.getAllByPlaceholderText("Search DHCP snippets")[0], "lease" ); diff --git a/src/app/settings/views/Dhcp/DhcpList/DhcpList.tsx b/src/app/settings/views/Dhcp/DhcpList/DhcpList.tsx index 57f842f423..22d225dd11 100644 --- a/src/app/settings/views/Dhcp/DhcpList/DhcpList.tsx +++ b/src/app/settings/views/Dhcp/DhcpList/DhcpList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; +import { ContentSection } from "@canonical/maas-react-components"; import { Code, Col, Row } from "@canonical/react-components"; import { format, parse } from "date-fns"; import { useDispatch, useSelector } from "react-redux"; @@ -230,64 +231,69 @@ const DhcpList = (): JSX.Element => { }, [dispatch]); return ( - + + + + + ); }; diff --git a/src/app/settings/views/Images/ThirdPartyDrivers/ThirdPartyDrivers.tsx b/src/app/settings/views/Images/ThirdPartyDrivers/ThirdPartyDrivers.tsx index 617639e0c7..f027cac625 100644 --- a/src/app/settings/views/Images/ThirdPartyDrivers/ThirdPartyDrivers.tsx +++ b/src/app/settings/views/Images/ThirdPartyDrivers/ThirdPartyDrivers.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import ThirdPartyDriversForm from "../ThirdPartyDriversForm"; @@ -27,12 +28,15 @@ const ThirdPartyDrivers = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + Ubuntu + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Images/ThirdPartyDriversForm/ThirdPartyDriversForm.tsx b/src/app/settings/views/Images/ThirdPartyDriversForm/ThirdPartyDriversForm.tsx index b0cc4fc834..099e635312 100644 --- a/src/app/settings/views/Images/ThirdPartyDriversForm/ThirdPartyDriversForm.tsx +++ b/src/app/settings/views/Images/ThirdPartyDriversForm/ThirdPartyDriversForm.tsx @@ -30,8 +30,6 @@ const ThirdPartyDriversForm = (): JSX.Element => { return ( { }, [dispatch, loaded]); return ( - - + + + VMware + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Images/VMWareForm/VMWareForm.tsx b/src/app/settings/views/Images/VMWareForm/VMWareForm.tsx index 6477da5f42..cd422824e1 100644 --- a/src/app/settings/views/Images/VMWareForm/VMWareForm.tsx +++ b/src/app/settings/views/Images/VMWareForm/VMWareForm.tsx @@ -37,8 +37,6 @@ const VMWareForm = (): JSX.Element => { return ( { }, [dispatch, loaded]); return ( - - + + + Windows + + {loading && } {loaded && } - - + + ); }; diff --git a/src/app/settings/views/Images/WindowsForm/WindowsForm.tsx b/src/app/settings/views/Images/WindowsForm/WindowsForm.tsx index 63284d71d7..9606702024 100644 --- a/src/app/settings/views/Images/WindowsForm/WindowsForm.tsx +++ b/src/app/settings/views/Images/WindowsForm/WindowsForm.tsx @@ -28,8 +28,6 @@ const WindowsForm = (): JSX.Element => { return ( { : null; return ( - + + + + + ); }; diff --git a/src/app/settings/views/Network/DnsForm/DnsForm.tsx b/src/app/settings/views/Network/DnsForm/DnsForm.tsx index 0024b57624..83d5e674ff 100644 --- a/src/app/settings/views/Network/DnsForm/DnsForm.tsx +++ b/src/app/settings/views/Network/DnsForm/DnsForm.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row, Select } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner, Select } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -42,13 +43,14 @@ const DnsForm = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + DNS + + {loading && } {loaded && ( { /> )} - - + + ); }; diff --git a/src/app/settings/views/Network/NetworkDiscoveryForm/NetworkDiscoveryForm.tsx b/src/app/settings/views/Network/NetworkDiscoveryForm/NetworkDiscoveryForm.tsx index d70e526f76..3e9f9ca610 100644 --- a/src/app/settings/views/Network/NetworkDiscoveryForm/NetworkDiscoveryForm.tsx +++ b/src/app/settings/views/Network/NetworkDiscoveryForm/NetworkDiscoveryForm.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -42,13 +43,14 @@ const NetworkDiscoveryForm = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + Network discovery + + {loading && } {loaded && ( - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ @@ -75,8 +77,8 @@ const NetworkDiscoveryForm = (): JSX.Element => { )} - - + + ); }; diff --git a/src/app/settings/views/Network/NtpForm/NtpForm.tsx b/src/app/settings/views/Network/NtpForm/NtpForm.tsx index cd80dddc79..9e10438b23 100644 --- a/src/app/settings/views/Network/NtpForm/NtpForm.tsx +++ b/src/app/settings/views/Network/NtpForm/NtpForm.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -37,13 +38,14 @@ const NtpForm = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + NTP + + {loading && } {loaded && ( { /> )} - - + + ); }; diff --git a/src/app/settings/views/Network/ProxyForm/ProxyForm.tsx b/src/app/settings/views/Network/ProxyForm/ProxyForm.tsx index c0491f1929..0366351023 100644 --- a/src/app/settings/views/Network/ProxyForm/ProxyForm.tsx +++ b/src/app/settings/views/Network/ProxyForm/ProxyForm.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -44,13 +45,14 @@ const ProxyForm = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + Proxy + + {loading && } {loaded && ( - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ @@ -107,8 +109,8 @@ const ProxyForm = (): JSX.Element => { )} - - + + ); }; diff --git a/src/app/settings/views/Network/SyslogForm/SyslogForm.tsx b/src/app/settings/views/Network/SyslogForm/SyslogForm.tsx index 7ad2b40e22..c7b78ee6ca 100644 --- a/src/app/settings/views/Network/SyslogForm/SyslogForm.tsx +++ b/src/app/settings/views/Network/SyslogForm/SyslogForm.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -35,13 +36,14 @@ const SyslogForm = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + Syslog + + {loading && } {loaded && ( { /> )} - - + + ); }; diff --git a/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.test.tsx b/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.test.tsx index e216972d48..202d16780c 100644 --- a/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.test.tsx +++ b/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.test.tsx @@ -207,9 +207,9 @@ describe("RepositoriesList", () => { expect(rows.length).toBe(state.packagerepository.items.length); await userEvent.type( - screen.getByRole("searchbox", { - name: RepositoriesListLabels.SearchboxPlaceholder, - }), + screen.getAllByPlaceholderText( + RepositoriesListLabels.SearchboxPlaceholder + )[0], "secret" ); diff --git a/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.tsx b/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.tsx index 95e292d67d..9bc901ac91 100644 --- a/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.tsx +++ b/src/app/settings/views/Repositories/RepositoriesList/RepositoriesList.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; +import { ContentSection } from "@canonical/maas-react-components"; import { useDispatch, useSelector } from "react-redux"; import type { Dispatch } from "redux"; @@ -123,42 +124,47 @@ export const RepositoriesList = (): JSX.Element => { useFetchActions([repositoryActions.cleanup]); return ( - + + + + + ); }; diff --git a/src/app/settings/views/Scripts/ScriptsList/ScriptsList.tsx b/src/app/settings/views/Scripts/ScriptsList/ScriptsList.tsx index 58e58169f9..b34e9a32c8 100644 --- a/src/app/settings/views/Scripts/ScriptsList/ScriptsList.tsx +++ b/src/app/settings/views/Scripts/ScriptsList/ScriptsList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; +import { ContentSection } from "@canonical/maas-react-components"; import { format } from "date-fns"; import { useDispatch, useSelector } from "react-redux"; import type { Dispatch } from "redux"; @@ -182,52 +183,59 @@ const ScriptsList = ({ type = "commissioning" }: Props): JSX.Element => { }); return ( - + + + + + ); }; diff --git a/src/app/settings/views/Security/IpmiSettings/IpmiSettings.tsx b/src/app/settings/views/Security/IpmiSettings/IpmiSettings.tsx index 2f5bdf1bd8..d88f0118c2 100644 --- a/src/app/settings/views/Security/IpmiSettings/IpmiSettings.tsx +++ b/src/app/settings/views/Security/IpmiSettings/IpmiSettings.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Row, Spinner } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -58,14 +59,15 @@ const IpmiSettings = (): JSX.Element => { }, [dispatch, configLoaded]); return ( - - + + + IPMI settings + + {configLoading && } {configLoaded && ( aria-label={Labels.FormLabel} - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ @@ -90,8 +92,8 @@ const IpmiSettings = (): JSX.Element => { )} - - + + ); }; diff --git a/src/app/settings/views/Security/SecretStorage/SecretStorage.tsx b/src/app/settings/views/Security/SecretStorage/SecretStorage.tsx index 804a9a881e..2be70cc177 100644 --- a/src/app/settings/views/Security/SecretStorage/SecretStorage.tsx +++ b/src/app/settings/views/Security/SecretStorage/SecretStorage.tsx @@ -1,4 +1,5 @@ -import { Col, Row, Spinner } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useSelector } from "react-redux"; import VaultSettings from "./VaultSettings"; @@ -18,13 +19,14 @@ const SecretStorage = (): JSX.Element => { } return ( - <> - - - - - - + + + Secret storage + + + + + ); }; diff --git a/src/app/settings/views/Security/SecurityProtocols/SecurityProtocols.tsx b/src/app/settings/views/Security/SecurityProtocols/SecurityProtocols.tsx index b0ec1a740a..1d3838cdb6 100644 --- a/src/app/settings/views/Security/SecurityProtocols/SecurityProtocols.tsx +++ b/src/app/settings/views/Security/SecurityProtocols/SecurityProtocols.tsx @@ -1,4 +1,5 @@ -import { Col, Row, Spinner } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useSelector } from "react-redux"; import TLSDisabled from "./TLSDisabled"; @@ -19,19 +20,20 @@ const SecurityProtocols = (): JSX.Element => { } return ( - <> - - - {!tlsCertificateLoaded ? ( - - ) : tlsCertificate ? ( - - ) : ( - - )} - - - + + + Security protocols + + + {!tlsCertificateLoaded ? ( + + ) : tlsCertificate ? ( + + ) : ( + + )} + + ); }; diff --git a/src/app/settings/views/Security/SecurityProtocols/TLSEnabled/TLSEnabled.tsx b/src/app/settings/views/Security/SecurityProtocols/TLSEnabled/TLSEnabled.tsx index 07a731b595..dee39a1476 100644 --- a/src/app/settings/views/Security/SecurityProtocols/TLSEnabled/TLSEnabled.tsx +++ b/src/app/settings/views/Security/SecurityProtocols/TLSEnabled/TLSEnabled.tsx @@ -82,8 +82,6 @@ const TLSEnabled = (): JSX.Element | null => { /> allowUnchanged - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} initialValues={{ notificationEnabled: notificationEnabled || false, diff --git a/src/app/settings/views/Security/SessionTimeout/SessionTimeout.tsx b/src/app/settings/views/Security/SessionTimeout/SessionTimeout.tsx index 2041bfaf86..3c934765a1 100644 --- a/src/app/settings/views/Security/SessionTimeout/SessionTimeout.tsx +++ b/src/app/settings/views/Security/SessionTimeout/SessionTimeout.tsx @@ -1,3 +1,4 @@ +import { ContentSection } from "@canonical/maas-react-components"; import { Icon, Spinner } from "@canonical/react-components"; import { formatDuration } from "date-fns"; import { useDispatch, useSelector } from "react-redux"; @@ -64,57 +65,60 @@ const SessionTimeout = (): JSX.Element => { } return ( - <> - - aria-label={Labels.ConfigureSessionTimeout} - buttonsAlign="left" - buttonsBordered={false} - cleanup={configActions.cleanup} - errors={errors} - initialValues={{ - session_length: formatDuration(secondsToDuration(sessionLength)), - }} - onSaveAnalytics={{ - action: "Saved", - category: "Security settings", - label: "Session timeout form", - }} - onSubmit={(values, { resetForm }) => { - const sessionLengthInSeconds = humanReadableToSeconds( - values.session_length - ); - sessionLengthInSeconds && - dispatch( - configActions.update({ - session_length: sessionLengthInSeconds, - }) + + + Session timeout + + + + aria-label={Labels.ConfigureSessionTimeout} + cleanup={configActions.cleanup} + errors={errors} + initialValues={{ + session_length: formatDuration(secondsToDuration(sessionLength)), + }} + onSaveAnalytics={{ + action: "Saved", + category: "Security settings", + label: "Session timeout form", + }} + onSubmit={(values, { resetForm }) => { + const sessionLengthInSeconds = humanReadableToSeconds( + values.session_length ); - resetForm({ values }); - }} - resetOnSave - saved={saved} - saving={saving} - validationSchema={SessionTimeoutSchema} - > - - Maximum session length is 14 days / 2 weeks. Format options are - weeks, days, hours, and/or minutes. -
-
- MAAS will automatically log out all users - after changing the session expiration time. New session timeout - applies after login. - - } - label={Labels.Expiration} - name="session_length" - required={true} - type="text" - /> - - + sessionLengthInSeconds && + dispatch( + configActions.update({ + session_length: sessionLengthInSeconds, + }) + ); + resetForm({ values }); + }} + resetOnSave + saved={saved} + saving={saving} + validationSchema={SessionTimeoutSchema} + > + + Maximum session length is 14 days / 2 weeks. Format options are + weeks, days, hours, and/or minutes. +
+
+ MAAS will automatically log out all + users after changing the session expiration time. New session + timeout applies after login. + + } + label={Labels.Expiration} + name="session_length" + required={true} + type="text" + /> + + + ); }; diff --git a/src/app/settings/views/Storage/StorageForm/StorageForm.tsx b/src/app/settings/views/Storage/StorageForm/StorageForm.tsx index 89ef2ea7f0..dddec597bb 100644 --- a/src/app/settings/views/Storage/StorageForm/StorageForm.tsx +++ b/src/app/settings/views/Storage/StorageForm/StorageForm.tsx @@ -1,6 +1,7 @@ import { useEffect } from "react"; -import { Col, Spinner, Row } from "@canonical/react-components"; +import { ContentSection } from "@canonical/maas-react-components"; +import { Spinner } from "@canonical/react-components"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; @@ -43,13 +44,14 @@ const StorageForm = (): JSX.Element => { }, [dispatch, loaded]); return ( - - + + + Storage + + {loading && } {loaded && ( - buttonsAlign="left" - buttonsBordered={false} cleanup={configActions.cleanup} errors={errors} initialValues={{ @@ -74,8 +76,8 @@ const StorageForm = (): JSX.Element => { )} - - + + ); }; diff --git a/src/app/settings/views/Users/UserForm/UserForm.tsx b/src/app/settings/views/Users/UserForm/UserForm.tsx index 3ced3d80a5..535f210065 100644 --- a/src/app/settings/views/Users/UserForm/UserForm.tsx +++ b/src/app/settings/views/Users/UserForm/UserForm.tsx @@ -43,8 +43,6 @@ export const UserForm = ({ user }: PropTypes): JSX.Element => { navigate(-1)} diff --git a/src/app/settings/views/Users/UsersList/UsersList.test.tsx b/src/app/settings/views/Users/UsersList/UsersList.test.tsx index 74b45a63d4..85dd60cbd8 100644 --- a/src/app/settings/views/Users/UsersList/UsersList.test.tsx +++ b/src/app/settings/views/Users/UsersList/UsersList.test.tsx @@ -215,7 +215,7 @@ describe("UsersList", () => { expect(rows.length).toBe(2); await userEvent.type( - screen.getByRole("searchbox", { name: "Search users" }), + screen.getAllByPlaceholderText("Search users")[0], "admin" ); diff --git a/src/app/settings/views/Users/UsersList/UsersList.tsx b/src/app/settings/views/Users/UsersList/UsersList.tsx index fc5af8faa3..1356b0e1ae 100644 --- a/src/app/settings/views/Users/UsersList/UsersList.tsx +++ b/src/app/settings/views/Users/UsersList/UsersList.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; +import { ContentSection } from "@canonical/maas-react-components"; import { Notification } from "@canonical/react-components"; import { format, parse } from "date-fns"; import { useDispatch, useSelector } from "react-redux"; @@ -173,100 +174,105 @@ const UsersList = (): JSX.Element => { } return ( - - { - setDisplayUsername(true); - updateSort("username"); - }} - sortKey="username" - > - Username - -  |  - { - setDisplayUsername(false); - updateSort("last_name"); - }} - sortKey="last_name" - > - Real name - - - ), - }, - { - content: ( - updateSort("email")} - sortKey="email" - > - Email - - ), - }, - { - content: ( - updateSort("machines_count")} - sortKey="machines_count" - > - Machines - - ), - className: "u-align--right u-no-wrap", - }, - { - content: "Type", - }, - { - content: "Last seen", - }, - { - content: "Role", - }, - { - content: "MAAS keys", - className: "u-align--right u-no-wrap", - }, - { - content: "Actions", - className: "u-align--right", - }, - ]} - loaded={loaded} - loading={loading} - rows={generateUserRows( - sortedUsers, - authUser, - expandedId, - setExpandedId, - dispatch, - displayUsername, - setDeleting, - saved, - saving - )} - searchOnChange={setSearchText} - searchPlaceholder="Search users" - searchText={searchText} - tableClassName="user-list" - /> + + + + { + setDisplayUsername(true); + updateSort("username"); + }} + sortKey="username" + > + Username + +  |  + { + setDisplayUsername(false); + updateSort("last_name"); + }} + sortKey="last_name" + > + Real name + + + ), + }, + { + content: ( + updateSort("email")} + sortKey="email" + > + Email + + ), + }, + { + content: ( + updateSort("machines_count")} + sortKey="machines_count" + > + Machines + + ), + className: "u-align--right u-no-wrap", + }, + { + content: "Type", + }, + { + content: "Last seen", + }, + { + content: "Role", + }, + { + content: "MAAS keys", + className: "u-align--right u-no-wrap", + }, + { + content: "Actions", + className: "u-align--right", + }, + ]} + loaded={loaded} + loading={loading} + rows={generateUserRows( + sortedUsers, + authUser, + expandedId, + setExpandedId, + dispatch, + displayUsername, + setDeleting, + saved, + saving + )} + searchOnChange={setSearchText} + searchPlaceholder="Search users" + searchText={searchText} + tableClassName="user-list" + title="Users" + /> + + ); }; diff --git a/src/app/subnets/views/FabricDetails/FabricDetailsHeader/FabricDeleteForm/FabricDeleteForm.tsx b/src/app/subnets/views/FabricDetails/FabricDetailsHeader/FabricDeleteForm/FabricDeleteForm.tsx index abf1973c55..3edcc63376 100644 --- a/src/app/subnets/views/FabricDetails/FabricDetailsHeader/FabricDeleteForm/FabricDeleteForm.tsx +++ b/src/app/subnets/views/FabricDetails/FabricDetailsHeader/FabricDeleteForm/FabricDeleteForm.tsx @@ -62,7 +62,6 @@ const FabricDeleteForm = ({ closeForm, id }: Props): JSX.Element | null => { } return ( - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{}} diff --git a/src/app/subnets/views/FormActions/components/AddFabric.tsx b/src/app/subnets/views/FormActions/components/AddFabric.tsx index 64fd3fc148..199e4ced92 100644 --- a/src/app/subnets/views/FormActions/components/AddFabric.tsx +++ b/src/app/subnets/views/FormActions/components/AddFabric.tsx @@ -26,7 +26,6 @@ const AddFabric = ({ allowAllEmpty aria-label="Add fabric" - buttonsBordered={false} cleanup={fabricActions.cleanup} errors={errors} initialValues={{ name: "", description: "" }} diff --git a/src/app/subnets/views/FormActions/components/AddSpace.tsx b/src/app/subnets/views/FormActions/components/AddSpace.tsx index 6b508e9683..8054811b3b 100644 --- a/src/app/subnets/views/FormActions/components/AddSpace.tsx +++ b/src/app/subnets/views/FormActions/components/AddSpace.tsx @@ -25,7 +25,6 @@ const AddSpace = ({ allowAllEmpty aria-label="Add space" - buttonsBordered={false} cleanup={spaceActions.cleanup} errors={errors} initialValues={{ name: "" }} diff --git a/src/app/subnets/views/FormActions/components/AddSubnet.tsx b/src/app/subnets/views/FormActions/components/AddSubnet.tsx index 13d50b4c91..b9e7c9f634 100644 --- a/src/app/subnets/views/FormActions/components/AddSubnet.tsx +++ b/src/app/subnets/views/FormActions/components/AddSubnet.tsx @@ -119,7 +119,6 @@ const AddSubnet = ({ return ( aria-label="Add subnet" - buttonsBordered={false} cleanup={subnetActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/subnets/views/FormActions/components/AddVlan.tsx b/src/app/subnets/views/FormActions/components/AddVlan.tsx index 53a95d177f..6c90e83b43 100644 --- a/src/app/subnets/views/FormActions/components/AddVlan.tsx +++ b/src/app/subnets/views/FormActions/components/AddVlan.tsx @@ -60,7 +60,6 @@ const AddVlan = ({ return ( aria-label="Add VLAN" - buttonsBordered={false} cleanup={vlanActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/subnets/views/SpaceDetails/SpaceDetailsHeader/SpaceDelete/SpaceDelete.tsx b/src/app/subnets/views/SpaceDetails/SpaceDetailsHeader/SpaceDelete/SpaceDelete.tsx index 7c6e81ee54..bd0136d384 100644 --- a/src/app/subnets/views/SpaceDetails/SpaceDetailsHeader/SpaceDelete/SpaceDelete.tsx +++ b/src/app/subnets/views/SpaceDetails/SpaceDetailsHeader/SpaceDelete/SpaceDelete.tsx @@ -26,7 +26,6 @@ export const SpaceDelete = ({ return ( - buttonsBordered={false} cleanup={spaceActions.cleanup} errors={errors} initialValues={{}} diff --git a/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/DeleteSubnet/DeleteSubnet.tsx b/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/DeleteSubnet/DeleteSubnet.tsx index 2ec125008d..1b24bb8d28 100644 --- a/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/DeleteSubnet/DeleteSubnet.tsx +++ b/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/DeleteSubnet/DeleteSubnet.tsx @@ -33,7 +33,6 @@ export const DeleteSubnet = ({ > aria-label="Delete subnet" - buttonsBordered={false} cleanup={subnetActions.cleanup} errors={errors} initialValues={{}} diff --git a/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/EditBootArchitectures/EditBootArchitectures.tsx b/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/EditBootArchitectures/EditBootArchitectures.tsx index 50cdbd1a5d..4d5678a901 100644 --- a/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/EditBootArchitectures/EditBootArchitectures.tsx +++ b/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/EditBootArchitectures/EditBootArchitectures.tsx @@ -53,7 +53,6 @@ export const EditBootArchitectures = ({ const closeForm = () => setActiveForm(null); return ( - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{ diff --git a/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/MapSubnet/MapSubnet.tsx b/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/MapSubnet/MapSubnet.tsx index 6d9b6a816a..ed06ddc122 100644 --- a/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/MapSubnet/MapSubnet.tsx +++ b/src/app/subnets/views/SubnetDetails/SubnetDetailsHeader/SubnetActionForms/components/MapSubnet/MapSubnet.tsx @@ -43,7 +43,6 @@ export const MapSubnet = ({ const isIPv4 = subnet.version === 4; return ( - buttonsBordered={false} cleanup={cleanup} errors={scanError} initialValues={{}} diff --git a/src/app/subnets/views/VLANDetails/VLANDeleteForm/VLANDeleteForm.tsx b/src/app/subnets/views/VLANDetails/VLANDeleteForm/VLANDeleteForm.tsx index baa6a06cfe..7a3fbc2ea2 100644 --- a/src/app/subnets/views/VLANDetails/VLANDeleteForm/VLANDeleteForm.tsx +++ b/src/app/subnets/views/VLANDetails/VLANDeleteForm/VLANDeleteForm.tsx @@ -39,7 +39,6 @@ const VLANDeleteForm = ({ closeForm, id }: Props): JSX.Element | null => { const isDefaultVLAN = vlan.id === fabric.default_vlan_id; return ( - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{}} diff --git a/src/app/tags/components/AddTagForm/AddTagForm.tsx b/src/app/tags/components/AddTagForm/AddTagForm.tsx index dfb45be986..84246c333c 100644 --- a/src/app/tags/components/AddTagForm/AddTagForm.tsx +++ b/src/app/tags/components/AddTagForm/AddTagForm.tsx @@ -66,8 +66,6 @@ export const AddTagForm = ({ allowUnchanged aria-label={Label.Form} - buttonsAlign="left" - buttonsBordered={false} cleanup={tagActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/tags/components/TagsHeader/AddTagForm/AddTagForm.tsx b/src/app/tags/components/TagsHeader/AddTagForm/AddTagForm.tsx index b35f50a93c..cdcce99130 100644 --- a/src/app/tags/components/TagsHeader/AddTagForm/AddTagForm.tsx +++ b/src/app/tags/components/TagsHeader/AddTagForm/AddTagForm.tsx @@ -67,8 +67,6 @@ export const AddTagForm = ({ onClose }: Props): JSX.Element => { return ( aria-label="Create tag" - buttonsAlign="right" - buttonsBordered={true} cleanup={tagActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/tags/components/TagsHeader/DeleteTagForm/DeleteTagForm.tsx b/src/app/tags/components/TagsHeader/DeleteTagForm/DeleteTagForm.tsx index 606bbcb88c..f7c152c2b6 100644 --- a/src/app/tags/components/TagsHeader/DeleteTagForm/DeleteTagForm.tsx +++ b/src/app/tags/components/TagsHeader/DeleteTagForm/DeleteTagForm.tsx @@ -61,8 +61,6 @@ export const DeleteTagForm = ({ return ( aria-label="Delete tag" - buttonsAlign="right" - buttonsBordered={true} cleanup={tagActions.cleanup} errors={errors} initialValues={{}} diff --git a/src/app/tags/views/TagUpdate/TagUpdate.tsx b/src/app/tags/views/TagUpdate/TagUpdate.tsx index 8c9aa7a700..4742603e86 100644 --- a/src/app/tags/views/TagUpdate/TagUpdate.tsx +++ b/src/app/tags/views/TagUpdate/TagUpdate.tsx @@ -73,8 +73,6 @@ const TagUpdate = ({ id }: Props): JSX.Element => { return ( aria-label="Update tag" - buttonsAlign="right" - buttonsBordered={true} cleanup={tagActions.cleanup} errors={errors} initialValues={{ diff --git a/src/app/zones/views/ZonesList/ZonesListForm/ZonesListForm.tsx b/src/app/zones/views/ZonesList/ZonesListForm/ZonesListForm.tsx index 8cde9d8f6b..8c724253c4 100644 --- a/src/app/zones/views/ZonesList/ZonesListForm/ZonesListForm.tsx +++ b/src/app/zones/views/ZonesList/ZonesListForm/ZonesListForm.tsx @@ -34,8 +34,6 @@ const ZonesListForm = ({ closeForm }: Props): JSX.Element => { return ( aria-label="Add AZ" - buttonsAlign="right" - buttonsBordered={false} cleanup={cleanup} errors={errors} initialValues={{ diff --git a/src/scss/_patterns_application.scss b/src/scss/_patterns_application.scss index 686e8ef1c4..d3f3a8b3fb 100644 --- a/src/scss/_patterns_application.scss +++ b/src/scss/_patterns_application.scss @@ -47,19 +47,4 @@ grid-area: navbar; height: 3.5rem; } - .l-aside .formik-form-buttons { - padding: $spv--small $spv--small; - flex-direction: column; - - .formik-form-buttons__container { - width: 100%; - } - - .formik-form-buttons__help { - @extend %vf-grid-container-padding; - padding-right: unset; - padding-left: unset; - width: 100%; - } - } } diff --git a/src/scss/_patterns_table-actions.scss b/src/scss/_patterns_table-actions.scss deleted file mode 100644 index 8277838071..0000000000 --- a/src/scss/_patterns_table-actions.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin maas-table-actions { - @media screen and (min-width: $breakpoint-x-small) { - .p-table-actions { - display: flex; - margin-bottom: $spv--large; - } - - .p-table-actions__space-left, - .p-table-actions .p-search-box { - flex: 1 1 auto; - margin: 0; - } - - // But default Vanilla adds a space between forms and the top of the first - // button. Because this form is displayed horizontally the space needs to be - // to the left of the first button. - .p-table-actions [class*="p-button"]:first-of-type { - margin-left: $sph--large; - margin-top: 0; - } - } -} diff --git a/src/scss/index.scss b/src/scss/index.scss index 9474a153b0..cf9c1d0a8c 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -50,7 +50,6 @@ @import "./patterns_navigation"; @import "./patterns_status-bar"; @import "./patterns_switches"; -@import "./patterns_table-actions"; @import "./patterns_tables"; @import "./patterns_tabs"; @import "./patterns_typography"; @@ -69,7 +68,6 @@ @include maas-navigation; @include maas-status-bar; @include maas-switches; -@include maas-table-actions; @include maas-tables; @include maas-tabs; @include maas-typography; @@ -90,7 +88,6 @@ @import "~app/base/components/DoughnutChart"; @import "~app/base/components/FilterAccordion"; @import "~app/base/components/FormCard"; -@import "~app/base/components/FormikFormButtons"; @import "~app/base/components/LabelledList"; @import "~app/base/components/Login"; @import "~app/base/components/MachineSelectTable"; @@ -128,7 +125,6 @@ @include EventLogsTable; @include FilterAccordion; @include FormCard; -@include FormikFormButtons; @include HardwareCard; @include LabelledList; @include Login;