feat(ui): tag form three column layout (#3665)

Set up the three column layout in the tag form. Includes placeholder states that will be replaced with proper content. Fixes: canonical/app-tribe#684.
canonical · Mar 9, 2022 · 72cbe91 · 72cbe91
1 parent a19d5dd
commit 72cbe91
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 33 deletions.
diff --git a/ui/src/app/base/components/ActionForm/ActionForm.test.tsx b/ui/src/app/base/components/ActionForm/ActionForm.test.tsx
@@ -53,6 +53,25 @@ describe("ActionForm", () => {
     expect(wrapper.find("ActionButton").text()).toBe("Process machine");
   });
 
+  it("can override the submit label", () => {
+    const store = mockStore(state);
+    const wrapper = mount(
+      <Provider store={store}>
+        <ActionForm
+          actionName="action"
+          initialValues={{}}
+          modelName="machine"
+          onSubmit={jest.fn()}
+          processingCount={0}
+          selectedCount={1}
+          submitLabel="Special save"
+        />
+      </Provider>
+    );
+
+    expect(wrapper.find("ActionButton").text()).toBe("Special save");
+  });
+
   it("can show the correct saving state", () => {
     const store = mockStore(state);
     const wrapper = mount(

diff --git a/ui/src/app/base/components/ActionForm/ActionForm.tsx b/ui/src/app/base/components/ActionForm/ActionForm.tsx
@@ -103,6 +103,7 @@ export type Props<V, E = null> = Omit<
   modelName: string;
   processingCount: number;
   selectedCount: number;
+  submitLabel?: string;
 };
 
 const ActionForm = <V, E = null>({
@@ -115,6 +116,7 @@ const ActionForm = <V, E = null>({
   onSubmit,
   processingCount,
   selectedCount,
+  submitLabel,
   ...formikFormProps
 }: Props<V, E>): JSX.Element | null => {
   const [selectedOnSubmit, setSelectedOnSubmit] = useState(selectedCount);
@@ -151,7 +153,9 @@ const ActionForm = <V, E = null>({
         selectedOnSubmit,
         processingCount
       )}...`}
-      submitLabel={getLabel(modelName, actionName, selectedCount)}
+      submitLabel={
+        submitLabel ?? getLabel(modelName, actionName, selectedCount)
+      }
       {...formikFormProps}
     >
       {children}

diff --git a/ui/src/app/machines/components/MachineHeaderForms/ActionFormWrapper/TagForm/TagForm.tsx b/ui/src/app/machines/components/MachineHeaderForms/ActionFormWrapper/TagForm/TagForm.tsx
@@ -81,6 +81,7 @@ export const TagForm = ({
       }}
       onSuccess={clearHeaderContent}
       processingCount={processingCount}
+      submitLabel="Save"
       selectedCount={machines.length}
       validationSchema={TagFormSchema}
     >

diff --git a/...s/components/MachineHeaderForms/ActionFormWrapper/TagForm/TagFormFields/TagFormFields.tsx b/...s/components/MachineHeaderForms/ActionFormWrapper/TagForm/TagFormFields/TagFormFields.tsx
@@ -1,4 +1,3 @@
-import { Col, Row } from "@canonical/react-components";
 import { useSelector } from "react-redux";
 
 import TagNameField from "app/base/components/TagNameField";
@@ -7,11 +6,21 @@ import tagSelectors from "app/store/tag/selectors";
 export const TagFormFields = (): JSX.Element => {
   const tags = useSelector(tagSelectors.all);
   return (
-    <Row>
-      <Col size={6}>
+    <div className="tag-form">
+      <div className="tag-form__search">
         <TagNameField required tagList={tags.map(({ name }) => name)} />
-      </Col>
-    </Row>
+      </div>
+      <div className="tag-form__changes">
+        <p className="u-text--muted">
+          Tags for selected machines will appear here.
+        </p>
+      </div>
+      <div className="tag-form__details">
+        <p className="u-text--muted">
+          Select a tag to view information about it.
+        </p>
+      </div>
+    </div>
   );
 };
 

diff --git a/ui/src/app/machines/components/MachineHeaderForms/ActionFormWrapper/TagForm/_index.scss b/ui/src/app/machines/components/MachineHeaderForms/ActionFormWrapper/TagForm/_index.scss
@@ -0,0 +1,70 @@
+@mixin move-border-top {
+  @include pseudo-border(top);
+  padding-top: $spv-inner--small;
+  margin-top: $spv-inner--large;
+
+  &::after {
+    // Remove the left border.
+    display: none;
+  }
+}
+
+@mixin TagForm {
+  .tag-form {
+    @extend %base-grid;
+    border-bottom: 1px solid $color-mid-light;
+    padding-bottom: $spv-inner--large;
+    grid:
+      [row1-start] "search changes details" min-content [row1-end]
+      / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
+
+    .tag-form__search {
+      grid-area: search;
+
+      &::after {
+        top: $spv-inner--small;
+      }
+    }
+
+    .tag-form__changes {
+      @include pseudo-border(left);
+      grid-area: changes;
+
+      &::after {
+        top: $spv-inner--small;
+      }
+    }
+
+    .tag-form__details {
+      @include pseudo-border(left);
+      grid-area: details;
+
+      &::after {
+        top: $spv-inner--small;
+      }
+    }
+
+    @media only screen and (max-width: $breakpoint-large) {
+      grid:
+        [row1-start] "search changes" min-content [row1-end]
+        [row2-start] "details details" min-content [row2-end]
+        / minmax(0, 1fr) minmax(0, 1fr);
+
+      .tag-form__details {
+        @include move-border-top;
+      }
+    }
+
+    @media only screen and (max-width: $breakpoint-medium) {
+      grid:
+        [row1-start] "search" min-content [row1-end]
+        [row2-start] "changes" min-content [row2-end]
+        [row3-start] "details" min-content [row3-end]
+        / minmax(0, 1fr);
+
+      .tag-form__changes {
+        @include move-border-top;
+      }
+    }
+  }
+}
diff --git a/ui/src/app/machines/views/MachineDetails/MachineSummary/OverviewCard/_index.scss b/ui/src/app/machines/views/MachineDetails/MachineSummary/OverviewCard/_index.scss
@@ -1,30 +1,3 @@
-@mixin pseudo-border($pos) {
-  position: relative;
-
-  &::after,
-  &::before {
-    background-color: $color-mid-light;
-    content: "";
-    position: absolute;
-  }
-
-  @if $pos == top {
-    &::before {
-      height: 1px;
-      left: 0;
-      right: 0;
-      top: 0;
-    }
-  } @else if $pos == left {
-    &::after {
-      bottom: 0;
-      left: -#{math.div(map-get($grid-gutter-widths, large), 2)};
-      top: 0;
-      width: 1px;
-    }
-  }
-}
-
 @mixin OverviewCard {
   .overview-card {
     @extend %base-grid;

diff --git a/ui/src/scss/_pseudo-border.scss b/ui/src/scss/_pseudo-border.scss
@@ -0,0 +1,26 @@
+@mixin pseudo-border($pos) {
+  position: relative;
+
+  &::after,
+  &::before {
+    background-color: $color-mid-light;
+    content: "";
+    position: absolute;
+  }
+
+  @if $pos == top {
+    &::before {
+      height: 1px;
+      left: 0;
+      right: 0;
+      top: 0;
+    }
+  } @else if $pos == left {
+    &::after {
+      bottom: 0;
+      left: -#{math.div(map-get($grid-gutter-widths, large), 2)};
+      top: 0;
+      width: 1px;
+    }
+  }
+}
diff --git a/ui/src/scss/index.scss b/ui/src/scss/index.scss
@@ -48,6 +48,7 @@
 @import "./patterns_tables";
 @import "./patterns_tabs";
 @import "./patterns_typography";
+@import "./pseudo-border";
 @import "./utilities";
 @include maas-buttons;
 @include maas-cards;
@@ -207,6 +208,7 @@
 @import "~app/machines/components/MachineHeaderForms/ActionFormWrapper/CloneForm/CloneFormFields/SourceMachineSelect";
 @import "~app/machines/components/MachineHeaderForms/ActionFormWrapper/CloneForm/CloneResults";
 @import "~app/machines/components/MachineHeaderForms/ActionFormWrapper/MarkBrokenForm/MarkBrokenFormFields";
+@import "~app/machines/components/MachineHeaderForms/ActionFormWrapper/TagForm";
 @import "~app/machines/views/MachineDetails/MachineLogs/DownloadMenu";
 @import "~app/machines/views/MachineDetails/MachineLogs/EventLogs/EventLogsTable";
 @import "~app/machines/views/MachineDetails/MachineNetwork/NetworkTable";
@@ -231,6 +233,7 @@
 @include NumaCard;
 @include OverviewCard;
 @include SourceMachineSelect;
+@include TagForm;
 
 // preferences
 @import "~app/preferences/views/APIKeys/APIKeyList";