hub-toolbar, hub-toolbar-left - unify from .toolbar, .hub-toolbar-wrapper

Author: himdel

src/components/collection-list/collection-filter.scss

@@ -1,12 +1,4 @@
-.hub-toolbar-wrapper {
-  .toolbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .hub-pagination-container {
-      display: flex;
-      align-items: center;
-    }
-  }
+.hub-pagination-container {
+  display: flex;
+  align-items: center;
 }

src/components/copy-collection-to-repository-modal/copy-collection-to-repository-modal.tsx

@@ -362,7 +362,7 @@ export const CopyCollectionToRepositoryModal = (props: IProps) => {
       >
         <section className='modal-body' data-cy='modal-body'>
           {renderLabels(selectedRepos)}
-          <div className='toolbar hub-toolbar'>
+          <div className='hub-toolbar'>
             <Toolbar>
               <ToolbarGroup>
                 <ToolbarItem>{renderMultipleSelector()}</ToolbarItem>

src/components/repo-selector/multiple-repo-selector.tsx

@@ -279,7 +279,7 @@ export const MultipleRepoSelector = (props: IProps) => {
   return (
     <>
       {renderLabels()}
-      <div className='toolbar hub-toolbar'>
+      <div className='hub-toolbar'>
         <Toolbar>
           <ToolbarGroup>
             {!props.singleSelectionOnly && (

src/containers/certification-dashboard/certification-dashboard.tsx

@@ -212,7 +212,7 @@ class CertificationDashboard extends React.Component<RouteProps, IState> {
         ) : (
           <Main className='hub-certification-dashboard'>
             <section className='body' data-cy='body'>
-              <div className='toolbar hub-toolbar'>
+              <div className='hub-toolbar'>
                 <Toolbar>
                   <ToolbarContent>
                     <ToolbarGroup>

src/containers/collection-detail/collection-distributions.tsx

@@ -225,7 +225,7 @@ const CollectionDistributions = (props: RouteProps) => {
       />
       <Main>
         <section className='body'>
-          <div className='toolbar hub-toolbar'>
+          <div className='hub-toolbar'>
             <Toolbar>
               <ToolbarGroup>
                 <ToolbarItem>

src/containers/execution-environment-detail/execution_environment_detail_images.tsx

@@ -246,7 +246,7 @@ class ExecutionEnvironmentDetailImages extends React.Component<
           tag={publishToController?.tag}
         />
 
-        <div className='hub-toolbar toolbar'>
+        <div className='hub-toolbar'>
           <Toolbar>
             <ToolbarContent>
               <ToolbarGroup>

src/containers/group-management/group-detail.tsx

@@ -501,7 +501,7 @@ class GroupDetail extends React.Component<RouteProps, IState> {
 
     return (
       <section className='body'>
-        <div className='toolbar'>
+        <div className='hub-toolbar'>
           <Toolbar>
             <ToolbarContent>
               <ToolbarGroup>

src/containers/namespace-detail/namespace-detail.scss

@@ -1,9 +1,3 @@
-.namespace-detail {
-  .pf-c-toolbar__content {
-    padding-left: 0;
-  }
-}
-
 .delete-namespace-modal-message {
   padding-bottom: var(--pf-global--spacer--md);
 }

src/containers/namespace-detail/namespace-detail.tsx

@@ -407,8 +407,8 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
           pageControls={this.renderPageControls()}
           filters={
             tab === 'collections' ? (
-              <div className='hub-toolbar-wrapper namespace-detail'>
-                <div className='toolbar'>
+              <div>
+                <div className='hub-toolbar hub-toolbar-left'>
                   <CollectionFilter
                     ignoredParams={ignoredParams}
                     params={params}

src/containers/namespace-list/namespace-list.scss

@@ -20,15 +20,6 @@
     }
   }
 
-  .toolbar {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .pf-c-toolbar__content {
-    padding-left: 0;
-  }
-
   .footer {
     border-top: 1px solid #d8d8d8;
     flex-shrink: 0;

src/containers/namespace-list/namespace-list.tsx

@@ -200,7 +200,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
             </div>
           )}
           {noData ? null : (
-            <div className='toolbar'>
+            <div className='hub-toolbar hub-toolbar-left'>
               <Toolbar>
                 <ToolbarContent>
                   <ToolbarGroup style={{ marginLeft: 0 }}>

src/containers/search/search.scss

@@ -3,14 +3,10 @@
   display: flex;
   flex-direction: column;
 
-  .hub-toolbar-wrapper .toolbar .hub-pagination-container .card-list-switcher {
+  .hub-pagination-container .card-list-switcher {
     margin-right: 24px;
   }
 
-  .pf-c-toolbar__content {
-    padding-left: 0;
-  }
-
   .collection-container {
     padding-top: 24px;
     flex-grow: 1;

src/containers/search/search.tsx

@@ -214,8 +214,8 @@ class Search extends React.Component<RouteProps, IState> {
         )}
         <BaseHeader className='hub-header-bordered' title={t`Collections`}>
           {!noData && (
-            <div className='hub-toolbar-wrapper'>
-              <div className='toolbar'>
+            <div>
+              <div className='hub-toolbar hub-toolbar-left'>
                 <CollectionFilter
                   ignoredParams={['page', 'page_size', 'sort', 'view_type']}
                   params={params}

src/loaders/app.scss

@@ -53,9 +53,15 @@ body,
 }
 
 // list screen toolbars
-// FIXME: merge with search, namespace-list, namespace-details, hub-toolbar-wrapper
 .hub-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+
+// collections and namespaces - align with cards/lists, instead of table columns
+.hub-toolbar-left {
+  .pf-c-toolbar__content {
+    padding-left: 0;
+  }
+}

test/cypress/e2e/approval/approval_dashboard_list.js

@@ -126,11 +126,11 @@ describe('Approval Dashboard list tests for sorting, paging and filtering', () =
       '[data-cy="body"] [data-cy="compound_filter"] a',
       'Collection name',
     ).click();
-    cy.get('[data-cy="body"] .toolbar input').type(
+    cy.get('[data-cy="body"] .hub-toolbar input').type(
       'approval_dashboard_collection_test0{enter}',
     );
 
-    cy.get('[data-cy="body"] .toolbar button:first').click();
+    cy.get('[data-cy="body"] .hub-toolbar button:first').click();
     cy.contains(
       '[data-cy="body"] [data-cy="compound_filter"] a',
       'Namespace',

test/cypress/e2e/approval_modal/approval_multiple_repos.js

@@ -137,7 +137,7 @@ describe('Approval Dashboard process with multiple repos', () => {
     rejectItem('published');
 
     // 2 items should be left there
-    cy.contains('.toolbar', '1 - 2 of 2');
+    cy.contains('.hub-toolbar', '1 - 2 of 2');
     cy.get(
       '[data-cy="CertificationDashboard-row-rejected-namespace-collection1"]',
     );
@@ -164,7 +164,7 @@ describe('Approval Dashboard process with multiple repos', () => {
 
     cy.visit(`${uiPrefix}approval-dashboard`);
     cy.contains('Clear all filters').click();
-    cy.contains('.toolbar', '1 - 2 of 2');
+    cy.contains('.hub-toolbar', '1 - 2 of 2');
     cy.get(
       '[data-cy="CertificationDashboard-row-repo2-namespace-collection1"]',
     );

test/cypress/e2e/approval_modal/approval_multiple_repos_list.js

@@ -91,11 +91,11 @@ describe('Approval Dashboard process with multiple repos', () => {
 
   it('should test paging.', () => {
     openModal();
-    cy.contains('.modal-body .toolbar', '1 - 10 of 11');
+    cy.contains('.modal-body .hub-toolbar', '1 - 10 of 11');
     cy.contains('.modal-body', 'repo1');
     cy.contains('.modal-body', 'published');
-    cy.get('.modal-body .toolbar [data-action="next"]').click();
-    cy.contains('.modal-body .toolbar', '11 - 11 of 11');
+    cy.get('.modal-body .hub-toolbar [data-action="next"]').click();
+    cy.contains('.modal-body .hub-toolbar', '11 - 11 of 11');
     cy.contains('.modal-body', 'repo9');
   });
 
@@ -127,15 +127,15 @@ describe('Approval Dashboard process with multiple repos', () => {
     openModal();
 
     // select all
-    cy.get('.toolbar [aria-label="Select"] svg').click();
+    cy.get('.hub-toolbar [aria-label="Select"] svg').click();
     cy.contains('a', 'Select all (11 items)').click();
     cy.contains('[aria-label="Label group category"] button', '8 more').click();
     reposList.forEach((repo) => {
       cy.contains('[aria-label="Label group category"]', repo);
     });
 
     // deselect all
-    cy.get('.toolbar [aria-label="Select"] svg').click();
+    cy.get('.hub-toolbar [aria-label="Select"] svg').click();
     cy.contains('a', 'Deselect all (11 items)').click();
     reposList.forEach((repo) => {
       cy.contains('[aria-label="Label group category"]', repo).should(
@@ -144,7 +144,7 @@ describe('Approval Dashboard process with multiple repos', () => {
     });
 
     // select page
-    cy.get('.toolbar [aria-label="Select"] svg').click();
+    cy.get('.hub-toolbar [aria-label="Select"] svg').click();
     cy.contains('a', 'Select page (10 items)').click();
     reposList.forEach((repo) => {
       if (repo != 'repo9') {
@@ -161,7 +161,7 @@ describe('Approval Dashboard process with multiple repos', () => {
     cy.contains('Clear all filters').click();
 
     // deselect page and repo9 should remain here
-    cy.get('.toolbar [aria-label="Select"] svg').click();
+    cy.get('.hub-toolbar [aria-label="Select"] svg').click();
     cy.contains('a', 'Deselect page (10 items)').click();
     reposList.forEach((repo) => {
       if (repo != 'repo9') {

test/cypress/e2e/collections/collections_list.js

@@ -7,7 +7,7 @@ describe('Collections list Tests', () => {
   function deprecate(list) {
     const container = list ? '.hub-list' : '.hub-cards';
 
-    cy.get('.toolbar')
+    cy.get('.hub-toolbar')
       .get('[aria-label="keywords"]:first')
       .type('my_collection0{enter}');
     cy.get(container).contains('my_collection2').should('not.exist');
@@ -120,7 +120,7 @@ describe('Collections list Tests', () => {
 
   it('Can delete collection in collection list', () => {
     cy.get('[data-cy="view_type_list"] svg').click();
-    cy.get('.toolbar')
+    cy.get('.hub-toolbar')
       .get('[aria-label="keywords"]:first')
       .type('my_collection0{enter}');
     cy.get('.hub-list').contains('my_collection2').should('not.exist');
@@ -139,7 +139,7 @@ describe('Collections list Tests', () => {
 
   it('Can delete collection in namespace collection list', () => {
     cy.visit(`${uiPrefix}namespaces/my_namespace`);
-    cy.get('.toolbar')
+    cy.get('.hub-toolbar')
       .get('[aria-label="keywords"]:first')
       .type('my_collection1{enter}');
 

test/cypress/e2e/insights_collections/collections_list.js

@@ -6,7 +6,7 @@ describe('Collections list Tests', () => {
   function deprecate(list) {
     const container = list ? '.hub-list' : '.hub-cards';
 
-    cy.get('.toolbar')
+    cy.get('.hub-toolbar')
       .get('[aria-label="keywords"]:first')
       .type('my_collection0{enter}');
     cy.get(container).contains('my_collection2').should('not.exist');
@@ -103,7 +103,7 @@ describe('Collections list Tests', () => {
 
   it('Can delete collection in collection list', () => {
     cy.get('[data-cy="view_type_list"] svg').click();
-    cy.get('.toolbar')
+    cy.get('.hub-toolbar')
       .get('[aria-label="keywords"]:first')
       .type('my_collection0{enter}');
     cy.get('.hub-list').contains('my_collection2').should('not.exist');
@@ -122,7 +122,7 @@ describe('Collections list Tests', () => {
 
   it('Can delete collection in namespace collection list', () => {
     cy.visit(`${uiPrefix}namespaces/my_namespace`);
-    cy.get('.toolbar')
+    cy.get('.hub-toolbar')
       .get('[aria-label="keywords"]:first')
       .type('my_collection1{enter}');