sts-sponsors team mailing list archive

[Peter Makowski <mp+439615@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:sites-controls-layout into maas-site-manager:main.

Commit message:
update sites controls layout to match designs
- add flex css utils

Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/439615

QA Steps
1. Go to /sites
2. verify that elements in the controls row (where the search input is located) are displayed correctly across all breakpoints

Note that there's a slight discrepancy between implementation and the design:
- margins between elements are smaller than in the design as I opted for using the default vanilla margin for consistency
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:sites-controls-layout into maas-site-manager:main.

diff --git a/frontend/src/_utils.scss b/frontend/src/_utils.scss
index 0ff7a85..59a93da 100644
--- a/frontend/src/_utils.scss
+++ b/frontend/src/_utils.scss
@@ -1,6 +1,11 @@
 .u-flex {
   display: flex !important;
 }
+.u-flex--large {
+  @media (min-width: $breakpoint-large) {
+    display: flex !important;
+  }
+}
 .u-flex--align-end {
   align-items: flex-end !important;
 }
@@ -10,6 +15,9 @@
 .u-flex--column {
   flex-direction: column !important;
 }
+.u-flex--grow {
+  flex-grow: 1 !important;
+}
 .u-capitalize {
   text-transform: capitalize !important;
 }
diff --git a/frontend/src/components/SitesList/components/SitesTableControls.scss b/frontend/src/components/SitesList/components/SitesTableControls.scss
new file mode 100644
index 0000000..631f8c0
--- /dev/null
+++ b/frontend/src/components/SitesList/components/SitesTableControls.scss
@@ -0,0 +1,11 @@
+.sites-table-controls {
+  .sites-table-controls__search {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    @media (min-width: $breakpoint-large) {
+      width: auto;
+      margin: 0 1rem;
+    }
+  }
+}
diff --git a/frontend/src/components/SitesList/components/SitesTableControls.tsx b/frontend/src/components/SitesList/components/SitesTableControls.tsx
index 76f1831..5f97bce 100644
--- a/frontend/src/components/SitesList/components/SitesTableControls.tsx
+++ b/frontend/src/components/SitesList/components/SitesTableControls.tsx
@@ -1,4 +1,4 @@
-import { Row, Col, SearchBox, Button, Icon } from "@canonical/react-components";
+import { SearchBox, Button, Icon } from "@canonical/react-components";
 
 import ColumnsVisibilityControl from "./ColumnsVisibilityControl";
 import SitesCount from "./SitesCount";
@@ -7,6 +7,8 @@ import type { SitesColumn } from "./SitesTable";
 import { useAppContext } from "@/context";
 import type { UseSitesQueryResult } from "@/hooks/api";
 
+import "./SitesTableControls.scss";
+
 const SitesTableControls = ({
   data,
   isLoading,
@@ -23,29 +25,34 @@ const SitesTableControls = ({
   const isRemoveDisabled = Object.keys(rowSelection).length <= 0;
 
   return (
-    <Row>
-      <Col size={2}>
-        <h2 className="p-heading--4">
-          <SitesCount data={data} isLoading={isLoading} />
-        </h2>
-      </Col>
-      <Col size={6}>
-        <SearchBox externallyControlled onChange={handleSearchInput} placeholder="Search and filter" />
-      </Col>
-      <Col className="u-flex u-flex--align-end u-flex--column" size={2}>
-        <Button
-          appearance="negative"
-          disabled={isRemoveDisabled}
-          onClick={() => setSidebar("removeRegions")}
-          type="button"
-        >
-          <Icon light name="delete" /> Remove
-        </Button>
-      </Col>
-      <Col className="u-flex u-flex--align-end u-flex--column" size={2}>
-        <ColumnsVisibilityControl columns={allColumns} />
-      </Col>
-    </Row>
+    <div className="u-fixed-width sites-table-controls">
+      <div className="u-flex--large">
+        <div>
+          <h2 className="p-heading--4">
+            <SitesCount data={data} isLoading={isLoading} />
+          </h2>
+        </div>
+        <div className="u-flex--grow">
+          <SearchBox
+            className="sites-table-controls__search"
+            externallyControlled
+            onChange={handleSearchInput}
+            placeholder="Search and filter"
+          />
+        </div>
+        <div className="u-flex u-flex--justify-end">
+          <Button
+            appearance="negative"
+            disabled={isRemoveDisabled}
+            onClick={() => setSidebar("removeRegions")}
+            type="button"
+          >
+            <Icon light name="delete" /> Remove
+          </Button>
+          <ColumnsVisibilityControl columns={allColumns} />
+        </div>
+      </div>
+    </div>
   );
 };