sts-sponsors team mailing list archive

[Peter Makowski <mp+439847@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:fix-sitestablecontrols into maas-site-manager:main.

Commit message:
fix: SitesTableControls

Requested reviews:
  MAAS Committers (maas-committers)

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

fix SitesTableControls which lost layout styles after resolving some merge conflicts in a previous merge proposal


-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:fix-sitestablecontrols into maas-site-manager:main.

diff --git a/frontend/src/App.scss b/frontend/src/App.scss
index 2f94fa1..a41ec24 100644
--- a/frontend/src/App.scss
+++ b/frontend/src/App.scss
@@ -48,6 +48,7 @@
 @import "@/components/MainLayout/MainLayout";
 @import "@/components/Navigation/Navigation";
 @import "@/components/TokensCreate/TokensCreate";
+@import "@/components/SitesList/SitesTable/SitesTableControls/SitesTableControls";
 @import "@/components/SitesList/SitesTable/SitesTableControls/ColumnsVisibilityControl/ColumnsVisibilityControl";
 @import "@/components/SitesList/SitesTable/SitesTable";
 @import "@/components/Placeholder/Placeholder";
diff --git a/frontend/src/components/SitesList/SitesTable/SitesTableControls/SitesTableControls.tsx b/frontend/src/components/SitesList/SitesTable/SitesTableControls/SitesTableControls.tsx
index fe24b13..d3b78b1 100644
--- a/frontend/src/components/SitesList/SitesTable/SitesTableControls/SitesTableControls.tsx
+++ b/frontend/src/components/SitesList/SitesTable/SitesTableControls/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";
@@ -23,29 +23,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>
   );
 };