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

https://bugzilla.redhat.com/show_bug.cgi?id=1866051
openshift · Aug 19, 2020 · 74b3f9a · 74b3f9a
1 parent 0e7b47f
commit 74b3f9a
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 61 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/RBAC/rules.jsx b/frontend/public/components/RBAC/rules.jsx
@@ -11,7 +11,7 @@ export const RulesList = ({ rules, name, namespace }) =>
   _.isEmpty(rules) ? (
     <EmptyBox label="Rules" />
   ) : (
-    <div className="co-m-table-grid co-m-table-grid--bordered rbac-rules-list">
+    <div className="co-m-table-grid co-m-table-grid--bordered">
       <div className="row co-m-table-grid__head">
         <div className="col-xs-5 col-sm-4 col-md-3 col-lg-2">Actions</div>
         <div className="hidden-xs col-sm-4 col-md-3 col-lg-3">API Groups</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 && (
+            <>
               <p className="co-help-text">
                 Edit the following resources to manage the configuration of your cluster.
               </p>
-            </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">
+              <div className="co-m-pane__filter-row">
+                <TextFilter
+                  value={textFilter}
+                  label="by name or description"
+                  onChange={(val) => this.setState({ textFilter: val })}
+                />
+              </div>
+            </>
+          )}
           {!_.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
@@ -48,17 +48,6 @@ dl.co-inline {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  &--alt {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  &--with-help-text {
-    align-items: baseline;
-    flex-wrap: nowrap;
-    @media (max-width: $grid-float-breakpoint-max) {
-      display: block;
-    }
-  }
   .btn-group,
   .co-m-primary-action,
   .pf-c-form-control {
@@ -77,25 +66,25 @@ dl.co-inline {
   min-width: 0;
 }
 
-.co-m-pane__filter-bar-group--badge {
-  // Don't fill the available height.
-  align-self: start;
-}
-
-.co-m-pane__filter-bar-group--badge,
 .co-m-pane__filter-bar-group--filter {
   @media (min-width: $screen-xs-min) {
     flex: 1 0 auto;
     justify-content: flex-end;
   }
 }
 
-.co-m-pane__filter-bar-group--help-text {
-  @media (min-width: $screen-sm-min) {
-    margin-right: 20px;
-    > p {
-      margin-bottom: 0;
-    }
+// 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;
+}
+
+.co-m-pane__filter-row-action {
+  padding-top: ($grid-gutter-width / 2);
+  @media (min-width: $screen-xs-min) {
+    padding-top: 0;
   }
 }