Effort to left align content filters that arent using pf-c-toolbar

https://bugzilla.redhat.com/show_bug.cgi?id=1866051
openshift · Aug 18, 2020 · e58affb · e58affb
1 parent ab20017
commit e58affb
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 36 deletions.
diff --git a/frontend/public/components/RBAC/_rbac.scss b/frontend/public/components/RBAC/_rbac.scss
@@ -1,7 +1,3 @@
-.rbac-rules-list {
-  margin: 30px 0;
-}
-
 .rbac-rule-resource {
   align-items: baseline;
   display: inline-flex;

diff --git a/frontend/public/components/RBAC/role.jsx b/frontend/public/components/RBAC/role.jsx
@@ -137,17 +137,16 @@ class Details extends React.Component {
         </div>
         <div className="co-m-pane__body">
           <SectionHeading text="Rules" />
-          <div className="co-m-pane__filter-bar co-m-pane__filter-bar--alt">
+          <div className="co-m-pane__filter-row">
             {/* This page is temporarily disabled until we update the safe resources list.
           <div className="co-m-pane__filter-bar-group">
             <Link to={addHref(name, namespace)} className="co-m-primary-action">
               <button className="btn btn-primary">Add Rule</button>
             </Link>
           </div>
           */}
-            <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--filter">
-              <TextFilter label="Rules by action or resource" onChange={this.changeFilter} />
-            </div>
+
+            <TextFilter label="Rules by action or resource" onChange={this.changeFilter} />
           </div>
           <RulesList rules={rules} name={name} namespace={namespace} />
         </div>

diff --git a/frontend/public/components/cluster-settings/global-config.tsx b/frontend/public/components/cluster-settings/global-config.tsx
@@ -134,23 +134,21 @@ class GlobalConfigPage_ extends React.Component<GlobalConfigPageProps, GlobalCon
     });
     return (
       <>
-        {!loading && (
-          <div className="co-m-pane__filter-bar co-m-pane__filter-bar--with-help-text">
-            <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--help-text">
+        <div className="co-m-pane__body">
+          {!loading && (
+            <div>
               <p className="co-help-text">
                 Edit the following resources to manage the configuration of your cluster.
               </p>
+              <div className="co-m-pane__filter-row">
+                <TextFilter
+                  value={textFilter}
+                  label="by name or description"
+                  onChange={(val) => this.setState({ textFilter: val })}
+                />
+              </div>
             </div>
-            <div className="co-m-pane__fiter-bar-group co-m-pane__filter-bar-group--filter">
-              <TextFilter
-                value={textFilter}
-                label="by name or description"
-                onChange={(val) => this.setState({ textFilter: val })}
-              />
-            </div>
-          </div>
-        )}
-        <div className="co-m-pane__body">
+          )}
           {!_.isEmpty(errors) && (
             <ExpandableAlert
               variant={AlertVariant.danger}

diff --git a/frontend/public/components/monitoring/alert-manager-config.tsx b/frontend/public/components/monitoring/alert-manager-config.tsx
@@ -376,21 +376,20 @@ const Receivers = () => {
   return (
     <div className="co-m-pane__body">
       <SectionHeading text="Receivers" />
-      <div className="co-m-pane__filter-bar co-m-pane__filter-bar--alt">
-        <div className="co-m-pane__filter-bar-group">
-          <Link className="co-m-primary-action" to="/monitoring/alertmanagerconfig/receivers/~new">
-            <Button variant="primary" data-test-id="create-receiver">
-              Create Receiver
-            </Button>
-          </Link>
-        </div>
-        <div className="co-m-pane__filter-bar-group co-m-pane__filter-bar-group--filter">
-          <TextFilter
-            defaultValue=""
-            label="Receivers by Name"
-            onChange={(val) => setReceiverFilter(val)}
-          />
-        </div>
+      <div className="co-m-pane__filter-row">
+        <TextFilter
+          defaultValue=""
+          label="Receivers by Name"
+          onChange={(val) => setReceiverFilter(val)}
+        />
+        <Link
+          className="co-m-primary-action co-m-pane__filter-row-action"
+          to="/monitoring/alertmanagerconfig/receivers/~new"
+        >
+          <Button variant="primary" data-test-id="create-receiver">
+            Create Receiver
+          </Button>
+        </Link>
       </div>
       {numOfIncompleteReceivers > 0 && (
         <Alert

diff --git a/frontend/public/style/_common.scss b/frontend/public/style/_common.scss
@@ -99,6 +99,20 @@ dl.co-inline {
   }
 }
 
+// Use to left align content filters that aren't using .pf-c-toolbar
+.co-m-pane__filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: $grid-gutter-width;
+}
+
+@media (max-width: $screen-xs-max) {
+  .co-m-pane__filter-row-action {
+    padding-top: ($grid-gutter-width / 2);
+  }
+}
+
 .co-m-pane__heading {
   display: flex;
   justify-content: space-between;