feat: make settings width consistent

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");
+    });
+  });
+});

src/app/base/components/ActionForm/ActionForm.tsx

@@ -33,7 +33,7 @@ const getLabel = (
 
 export type ActionFormProps<V extends object, E = null> = Omit<
   FormikFormProps<V, E>,
-  "buttonsAlign" | "saved" | "saving" | "savingLabel" | "submitLabel"
+  "saved" | "saving" | "savingLabel" | "submitLabel"
 > & {
   actionName: string;
   loaded?: boolean;
@@ -53,7 +53,6 @@ export enum Labels {
 const ActionForm = <V extends object, E = null>({
   actionErrors,
   actionName,
-  buttonsBordered = false,
   children,
   errors,
   loaded = true,
@@ -90,8 +89,6 @@ const ActionForm = <V extends object, E = null>({
 
   return (
     <FormikForm<V, E>
-      buttonsAlign="right"
-      buttonsBordered={buttonsBordered}
       onSubmit={(values?, formikHelpers?) => {
         onSubmit(values, formikHelpers);
         // Set selected count in component state once form is submitted, so

src/app/base/components/FormikForm/FormikForm.tsx

@@ -16,8 +16,6 @@ export type Props<V extends object, E = null> = ContentProps<V, E> &
 const FormikForm = <V extends object, E = null>({
   allowAllEmpty,
   allowUnchanged,
-  buttonsAlign,
-  buttonsBordered,
   buttonsClassName,
   buttonsHelpClassName,
   buttonsHelp,
@@ -55,8 +53,6 @@ const FormikForm = <V extends object, E = null>({
         allowAllEmpty={allowAllEmpty}
         allowUnchanged={allowUnchanged}
         aria-label={ariaLabel}
-        buttonsAlign={buttonsAlign}
-        buttonsBordered={buttonsBordered}
         buttonsClassName={buttonsClassName}
         buttonsHelp={buttonsHelp}
         buttonsHelpClassName={buttonsHelpClassName}

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(
-    <Formik initialValues={{}} onSubmit={jest.fn()}>
-      <FormikFormButtons buttonsBordered submitLabel="Save" />
-    </Formik>
-  );
-
-  expect(screen.getByTestId("buttons-wrapper")).toHaveClass("is-bordered");
-});
-
 it("displays inline if inline is true", () => {
   render(
     <Formik initialValues={{}} onSubmit={jest.fn()}>

src/app/base/components/FormikFormButtons/FormikFormButtons.tsx

@@ -12,8 +12,6 @@ export type FormikContextFunc<V, R = void> = (
 ) => R;
 
 export type Props<V> = {
-  buttonsAlign?: "left" | "right";
-  buttonsBordered?: boolean;
   buttonsClassName?: string;
   buttonsHelp?: ReactNode;
   buttonsHelpClassName?: string;
@@ -47,8 +45,6 @@ export enum Labels {
 }
 
 export const FormikFormButtons = <V,>({
-  buttonsAlign = "right",
-  buttonsBordered = true,
   buttonsClassName,
   buttonsHelp,
   buttonsHelpClassName,
@@ -111,7 +107,6 @@ export const FormikFormButtons = <V,>({
     <>
       <div
         className={classNames("formik-form-buttons", buttonsClassName, {
-          "is-bordered": buttonsBordered,
           "is-inline": inline,
         })}
         data-testid={TestIds.ButtonsWrapper}
@@ -127,37 +122,31 @@ export const FormikFormButtons = <V,>({
             {buttonsHelp}
           </div>
         )}
-        <div
-          className={classNames("formik-form-buttons__container", {
-            "u-align--right": buttonsAlign === "right",
-          })}
-        >
-          {onCancel && (
-            <Button
-              appearance="base"
-              className="formik-form-buttons__button"
-              data-testid={TestIds.CancelButton}
-              disabled={cancelDisabled}
-              onClick={
-                onCancel ? () => onCancel(values, formikContext) : undefined
-              }
-              type="button"
-            >
-              {cancelLabel}
-            </Button>
-          )}
-          {secondaryButton}
-          <ActionButton
-            appearance={submitAppearance}
+        {onCancel && (
+          <Button
+            appearance="base"
             className="formik-form-buttons__button"
-            disabled={submitDisabled}
-            loading={saving}
-            success={saved}
-            type="submit"
+            data-testid={TestIds.CancelButton}
+            disabled={cancelDisabled}
+            onClick={
+              onCancel ? () => onCancel(values, formikContext) : undefined
+            }
+            type="button"
           >
-            {submitLabel}
-          </ActionButton>
-        </div>
+            {cancelLabel}
+          </Button>
+        )}
+        {secondaryButton}
+        <ActionButton
+          appearance={submitAppearance}
+          className="formik-form-buttons__button"
+          disabled={submitDisabled}
+          loading={saving}
+          success={saved}
+          type="submit"
+        >
+          {submitLabel}
+        </ActionButton>
       </div>
       {saving && savingLabel && (
         <p

src/app/base/components/FormikFormContent/FormikFormContent.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode, AriaAttributes } from "react";
 import React, { useEffect, useRef } from "react";
 
+import { ContentSection } from "@canonical/maas-react-components";
 import { Form, Notification } from "@canonical/react-components";
 import type { FormikContextType } from "formik";
 import { useFormikContext } from "formik";
@@ -172,25 +173,33 @@ const FormikFormContent = <V extends object, E = null>({
       inline={inline}
       onSubmit={handleSubmit}
     >
-      {!!nonFieldError && (
-        <Notification severity="negative" title="Error:">
-          {nonFieldError}
-        </Notification>
-      )}
-      {typeof children === "function"
-        ? children({ ...formikContext })
-        : children}
-      {editable && (
-        <FormikFormButtons
-          {...buttonsProps}
-          cancelDisabled={cancelDisabled === false ? false : saving}
-          inline={inline}
-          saved={saved}
-          saving={saving}
-          submitDisabled={loading || saving || formDisabled || submitDisabled}
-        />
-      )}
-      {footer}
+      <ContentSection>
+        <ContentSection.Content>
+          {!!nonFieldError && (
+            <Notification severity="negative" title="Error:">
+              {nonFieldError}
+            </Notification>
+          )}
+          {typeof children === "function"
+            ? children({ ...formikContext })
+            : children}
+        </ContentSection.Content>
+        <ContentSection.Footer>
+          {editable && (
+            <FormikFormButtons
+              {...buttonsProps}
+              cancelDisabled={cancelDisabled === false ? false : saving}
+              inline={inline}
+              saved={saved}
+              saving={saving}
+              submitDisabled={
+                loading || saving || formDisabled || submitDisabled
+              }
+            />
+          )}
+          {footer}
+        </ContentSection.Footer>
+      </ContentSection>
     </Form>
   );
 };