Fix collection detail global css (#4143) (#4148)

* Collection dependencies - reduce custom css, add missing space before helpertext

moving CollectionUsedbyDependenciesList outside the pf-c-content section removes the need for custom pagination styling
(we'll now get 2 different empty states for deps & rdeps when both are missing)

No-Issue

* Collection docs - rename css classes to hub-docs-{container,content,main,sidebar}, remove global toolbar margin

affects the new insights breadcrumbs, this fixed it

* hub-nav-title

* duplicate/unused legacy role scss

* hub-header-bordered: replace old header class

* header-bottom -> hub-header-bottom

* merge hub-toolbar and hub-list-toolbar css

now that `.pf-c-toolbar__group { margin-left: 16px }` is limite to `.hub-docs-sidebar`, changing the left padding is no longer needed .. which makes hub-toolbar and hub-list-toolbar identical, merging

* approvals: use ToolbarContent, add missing niceNames

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

(cherry picked from commit b051f84)

Author: himdel

src/components/collection-dependencies-list/collection-dependencies-list.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
-import { List, ListItem, ListVariant } from '@patternfly/react-core';
-import * as React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import React from 'react';
 import { Link } from 'react-router-dom';
 import { CollectionVersion, CollectionVersionSearch } from 'src/api';
 import { EmptyStateNoData, HelperText } from 'src/components';
@@ -29,7 +29,7 @@ export const CollectionDependenciesList = ({
   }
 
   return (
-    <List variant={ListVariant.inline} className='hub-c-list-dependencies'>
+    <List className='hub-c-list-dependencies'>
       {dependencies_repos.map((dependency, i) =>
         listDep(dependency, i, dependencies),
       )}
@@ -50,7 +50,7 @@ const listDep = (dependency, i, dependencies) => {
   } else {
     return (
       <ListItem key={i} style={{ marginRight: '70px' }}>
-        {fqn}: {version_range}
+        {fqn}: {version_range}{' '}
         <HelperText
           content={t`No version of ${fqn} exists that matches ${version_range}.`}
         />

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/headers/base-header.tsx

@@ -52,7 +52,7 @@ export class BaseHeader extends React.Component<IProps> {
         {versionControl || null}
 
         {children ? (
-          <div className='header-bottom'>{children}</div>
+          <div className='hub-header-bottom'>{children}</div>
         ) : (
           <div className='placeholder' />
         )}

src/components/headers/collection-header.tsx

@@ -62,7 +62,6 @@ import {
 } from 'src/utilities';
 import { DateComponent } from '../date-component/date-component';
 import { SignatureBadge } from '../signing';
-import './header.scss';
 
 interface IProps {
   collections: CollectionVersionSearch[];
@@ -924,7 +923,7 @@ export class CollectionHeader extends React.Component<IProps, IState> {
     if (deleteAll) {
       promise = CollectionAPI.deleteCollectionVersion(deleteCollection);
     } else {
-      promise = promise = RepositoriesUtils.deleteCollection(
+      promise = RepositoriesUtils.deleteCollection(
         deleteCollection.repository.name,
         deleteCollection.collection_version.pulp_href,
       );

src/components/headers/header.scss

@@ -1,5 +1,9 @@
 $breakpoint-md: 1000px;
 
+.hub-header-bordered {
+  border-bottom: 1px solid #d8d8d8;
+}
+
 .image {
   padding-right: 16px;
 }
@@ -42,7 +46,7 @@ $breakpoint-md: 1000px;
   padding-bottom: 10px;
 }
 
-.header-bottom {
+.hub-header-bottom {
   padding-top: 10px;
 }
 

src/components/headers/partner-header.tsx

@@ -10,7 +10,6 @@ import {
   Tabs,
   TabsType,
 } from 'src/components';
-import './header.scss';
 
 interface IProps {
   namespace: NamespaceType;
@@ -54,7 +53,7 @@ export class PartnerHeader extends React.Component<IProps> {
         }
         breadcrumbs={<Breadcrumbs links={breadcrumbs} />}
         pageControls={pageControls}
-        className='header'
+        className='hub-header-bordered'
       >
         {namespace.description ? <div>{namespace.description}</div> : null}
 

src/components/page/list-page.tsx

@@ -270,7 +270,7 @@ export const ListPage = function <T>({
                 <LoadingPageSpinner />
               ) : (
                 <section className='body' data-cy={`ListPage-${displayName}`}>
-                  <div className='hub-list-toolbar'>
+                  <div className='hub-toolbar'>
                     <Toolbar>
                       <ToolbarContent>
                         <ToolbarGroup>

src/components/page/page-with-tabs.tsx

@@ -194,7 +194,7 @@ export const PageWithTabs = function <
             }
             pageControls={
               loading ? null : (
-                <div className='hub-list-toolbar'>
+                <div className='hub-toolbar'>
                   <Toolbar>
                     <ToolbarContent>
                       <ToolbarGroup>

src/components/page/page.tsx

@@ -156,7 +156,7 @@ export const Page = function <
               />
             }
             pageControls={
-              <div className='hub-list-toolbar'>
+              <div className='hub-toolbar'>
                 <Toolbar>
                   <ToolbarContent>
                     <ToolbarGroup>

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/components/shared/detail-list.tsx

@@ -113,7 +113,7 @@ export function DetailList<T>({
         <LoadingPageSpinner />
       ) : (
         <>
-          <div className='hub-list-toolbar' data-cy={`DetailList`}>
+          <div className='hub-toolbar' data-cy={`DetailList`}>
             <Toolbar>
               <ToolbarContent>
                 <ToolbarGroup>

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

@@ -6,6 +6,7 @@ import {
   Label,
   LabelGroup,
   Toolbar,
+  ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
@@ -211,53 +212,55 @@ 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>
-                  <ToolbarGroup>
-                    <ToolbarItem>
-                      <CompoundFilter
-                        inputText={this.state.inputText}
-                        onChange={(text) => {
-                          this.setState({ inputText: text });
-                        }}
-                        updateParams={(p) =>
-                          this.updateParams(p, () =>
-                            this.queryCollections(true),
-                          )
-                        }
-                        params={params}
-                        filterConfig={[
-                          {
-                            id: 'namespace',
-                            title: t`Namespace`,
-                          },
-                          {
-                            id: 'name',
-                            title: t`Collection Name`,
-                          },
-                          {
-                            id: 'repository_label',
-                            title: t`Status`,
-                            inputType: 'select',
-                            options: [
-                              {
-                                id: `pipeline=${Constants.NOTCERTIFIED}`,
-                                title: t`Rejected`,
-                              },
-                              {
-                                id: `pipeline=${Constants.NEEDSREVIEW}`,
-                                title: t`Needs Review`,
-                              },
-                              {
-                                id: `pipeline=${Constants.APPROVED}`,
-                                title: t`Approved`,
-                              },
-                            ],
-                          },
-                        ]}
-                      />
-                    </ToolbarItem>
-                  </ToolbarGroup>
+                  <ToolbarContent>
+                    <ToolbarGroup>
+                      <ToolbarItem>
+                        <CompoundFilter
+                          inputText={this.state.inputText}
+                          onChange={(text) => {
+                            this.setState({ inputText: text });
+                          }}
+                          updateParams={(p) =>
+                            this.updateParams(p, () =>
+                              this.queryCollections(true),
+                            )
+                          }
+                          params={params}
+                          filterConfig={[
+                            {
+                              id: 'namespace',
+                              title: t`Namespace`,
+                            },
+                            {
+                              id: 'name',
+                              title: t`Collection name`,
+                            },
+                            {
+                              id: 'repository_label',
+                              title: t`Status`,
+                              inputType: 'select',
+                              options: [
+                                {
+                                  id: `pipeline=${Constants.NOTCERTIFIED}`,
+                                  title: t`Rejected`,
+                                },
+                                {
+                                  id: `pipeline=${Constants.NEEDSREVIEW}`,
+                                  title: t`Needs Review`,
+                                },
+                                {
+                                  id: `pipeline=${Constants.APPROVED}`,
+                                  title: t`Approved`,
+                                },
+                              ],
+                            },
+                          ]}
+                        />
+                      </ToolbarItem>
+                    </ToolbarGroup>
+                  </ToolbarContent>
                 </Toolbar>
 
                 <Pagination
@@ -285,6 +288,8 @@ class CertificationDashboard extends React.Component<RouteProps, IState> {
                     },
                   }}
                   niceNames={{
+                    name: t`Collection name`,
+                    namespace: t`Namespace`,
                     repository_label: t`Status`,
                   }}
                 />

src/containers/collection-detail/collection-dependencies.scss

@@ -1,10 +1,4 @@
-// resets to default, possible bug pagination shows disc list-style-type with 'pf-c-content' className
-.pf-c-options-menu__menu {
-  padding-left: 0 !important;
-  margin-left: 0 !important;
-  list-style: none !important;
-}
-
+// CollectionDependenciesList
 .hub-c-list-dependencies li {
   list-style: disc;
 }

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

@@ -19,7 +19,7 @@ import {
 import { AppContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
 import { RouteProps, withRouter } from 'src/utilities';
-import { ParamHelper, errorMessage, filterIsSet } from 'src/utilities';
+import { ParamHelper, errorMessage } from 'src/utilities';
 import { IBaseCollectionState, loadCollection } from './base';
 import './collection-dependencies.scss';
 
@@ -136,43 +136,34 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
           <section className='body'>
             <div className='pf-c-content collection-dependencies'>
               <h1>{t`Dependencies`}</h1>
-              {noDependencies &&
-              !usedByDependenciesCount &&
-              !filterIsSet(params, ['name__icontains']) ? (
+              <p>{t`This collections requires the following collections for use`}</p>
+
+              {noDependencies ? (
                 <EmptyStateNoData
                   title={t`No dependencies`}
                   description={t`Collection does not have any dependencies.`}
                 />
               ) : (
-                <>
-                  <p>{t`This collections requires the following collections for use`}</p>
-                  {noDependencies ? (
-                    <EmptyStateNoData
-                      title={t`No dependencies`}
-                      description={t`Collection does not have any dependencies.`}
-                    />
-                  ) : (
-                    <CollectionDependenciesList
-                      collection={this.state.collection}
-                      dependencies_repos={this.state.dependencies_repos}
-                    />
-                  )}
-                  <p>{t`This collection is being used by`}</p>
-                  <CollectionUsedbyDependenciesList
-                    usedByDependencies={usedByDependencies}
-                    itemCount={usedByDependenciesCount}
-                    params={dependenciesParams}
-                    usedByDependenciesLoading={usedByDependenciesLoading}
-                    updateParams={(p) =>
-                      this.updateParams(
-                        this.combineParams(this.state.params, p),
-                        () => this.loadUsedByDependencies(),
-                      )
-                    }
-                  />
-                </>
+                <CollectionDependenciesList
+                  collection={this.state.collection}
+                  dependencies_repos={this.state.dependencies_repos}
+                />
               )}
+
+              <p>{t`This collection is being used by`}</p>
             </div>
+            <CollectionUsedbyDependenciesList
+              usedByDependencies={usedByDependencies}
+              itemCount={usedByDependenciesCount}
+              params={dependenciesParams}
+              usedByDependenciesLoading={usedByDependenciesLoading}
+              updateParams={(p) =>
+                this.updateParams(
+                  this.combineParams(this.state.params, p),
+                  () => this.loadUsedByDependencies(),
+                )
+              }
+            />
           </section>
         </Main>
       </React.Fragment>