From 4ae25603da2b29f38a170210fbee8e4fa563163c Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 14:47:17 -0500
Subject: [PATCH 01/10] Fix header padding

---
 src/containers/namespace-list/namespace-list.scss | 2 +-
 src/containers/search/search.scss                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/namespace-list/namespace-list.scss b/src/containers/namespace-list/namespace-list.scss
index a065539f54..425f2d6fe1 100644
--- a/src/containers/namespace-list/namespace-list.scss
+++ b/src/containers/namespace-list/namespace-list.scss
@@ -9,7 +9,7 @@
 }
 
 .toolbar {
-    padding-bottom: 16px;
+    padding-bottom: 24px;
     display: flex;
     justify-content: space-between;
 }
diff --git a/src/containers/search/search.scss b/src/containers/search/search.scss
index 3ff8833e28..b538679011 100644
--- a/src/containers/search/search.scss
+++ b/src/containers/search/search.scss
@@ -1,7 +1,7 @@
 @import '../../global-variables.scss';
 
 .toolbar {
-    margin-bottom: 16px;
+    padding-bottom: 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;

From 913be3449fce87ac4957bbed7650f5b4d51efb94 Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 14:49:09 -0500
Subject: [PATCH 02/10] Adjust padding on search sidebar

---
 src/containers/search/search.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/search/search.scss b/src/containers/search/search.scss
index b538679011..a56daa943d 100644
--- a/src/containers/search/search.scss
+++ b/src/containers/search/search.scss
@@ -25,7 +25,7 @@
         margin-top: -24px;
         background-color: white;
         min-width: 190px;
-        padding: 16px;
+        padding: 24px;
         padding-top: 24px;
 
         @media (max-width: $breakpoint-md) {

From c8e95d62344ca41b29392adeaa0f115d9b5f5527 Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 15:04:26 -0500
Subject: [PATCH 03/10] Make Tags use h4 header.

---
 src/components/tags/tag-filter.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/tags/tag-filter.tsx b/src/components/tags/tag-filter.tsx
index 7f4fe8b650..89fa5d55a0 100644
--- a/src/components/tags/tag-filter.tsx
+++ b/src/components/tags/tag-filter.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Checkbox } from '@patternfly/react-core';
 
 import { ParamHelper } from '../../utilities/param-helper';
-import { NumericLabel } from '../../components';
 
 interface IProps {
     tags: string[];
@@ -19,7 +18,9 @@ export class TagFilter extends React.Component<IProps> {
         const { tags, params } = this.props;
         return (
             <div>
-                <div>Tags</div>
+                <div className='pf-c-content'>
+                    <h4>Tags</h4>
+                </div>
                 {tags.map(t => (
                     <div
                         key={t}

From 1b1ea52b1081b9cf100342afed7ff72200068890 Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 15:11:12 -0500
Subject: [PATCH 04/10] Lower card list switcher to toolbar

---
 src/containers/search/search.scss |  9 ++++
 src/containers/search/search.tsx  | 72 +++++++++++++++----------------
 2 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/src/containers/search/search.scss b/src/containers/search/search.scss
index a56daa943d..615bc996ed 100644
--- a/src/containers/search/search.scss
+++ b/src/containers/search/search.scss
@@ -5,6 +5,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    .pagination-container {
+        display: flex;
+        align-items: center;
+
+        .card-list-switcher {
+            margin-right: 16px;
+        }
+    }
 }
 
 .header {
diff --git a/src/containers/search/search.tsx b/src/containers/search/search.tsx
index b1ae3fcf42..7157b3fad0 100644
--- a/src/containers/search/search.tsx
+++ b/src/containers/search/search.tsx
@@ -100,29 +100,7 @@ class Search extends React.Component<RouteComponentProps, IState> {
 
         return (
             <React.Fragment>
-                <BaseHeader
-                    className='header'
-                    title='Collections'
-                    pageControls={
-                        <CardListSwitcher
-                            size='sm'
-                            params={params}
-                            updateParams={p =>
-                                this.updateParams(p, () =>
-                                    // Note, we have to use this.state.params instead
-                                    // of params in the callback because the callback
-                                    // executes before the page can re-run render
-                                    // which means params doesn't contain the most
-                                    // up to date state
-                                    localStorage.setItem(
-                                        Constants.SEARCH_VIEW_TYPE_LOCAL_KEY,
-                                        this.state.params.view_type,
-                                    ),
-                                )
-                            }
-                        />
-                    }
-                >
+                <BaseHeader className='header' title='Collections'>
                     <div className='toolbar'>
                         <Toolbar
                             params={params}
@@ -134,19 +112,41 @@ class Search extends React.Component<RouteComponentProps, IState> {
                             searchPlaceholder='Search collections'
                         />
 
-                        <Pagination
-                            params={params}
-                            updateParams={p =>
-                                this.updateParams(p, () =>
-                                    this.queryCollections(),
-                                )
-                            }
-                            count={numberOfResults}
-                            perPageOptions={
-                                Constants.CARD_DEFAULT_PAGINATION_OPTIONS
-                            }
-                            isTop
-                        />
+                        <div className='pagination-container'>
+                            <div className='card-list-switcher'>
+                                <CardListSwitcher
+                                    size='sm'
+                                    params={params}
+                                    updateParams={p =>
+                                        this.updateParams(p, () =>
+                                            // Note, we have to use this.state.params instead
+                                            // of params in the callback because the callback
+                                            // executes before the page can re-run render
+                                            // which means params doesn't contain the most
+                                            // up to date state
+                                            localStorage.setItem(
+                                                Constants.SEARCH_VIEW_TYPE_LOCAL_KEY,
+                                                this.state.params.view_type,
+                                            ),
+                                        )
+                                    }
+                                />
+                            </div>
+
+                            <Pagination
+                                params={params}
+                                updateParams={p =>
+                                    this.updateParams(p, () =>
+                                        this.queryCollections(),
+                                    )
+                                }
+                                count={numberOfResults}
+                                perPageOptions={
+                                    Constants.CARD_DEFAULT_PAGINATION_OPTIONS
+                                }
+                                isTop
+                            />
+                        </div>
                     </div>
                 </BaseHeader>
                 <Main>

From 50110ce5ccbb7ac37ba139111ccca355bd434cbf Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 15:23:03 -0500
Subject: [PATCH 05/10] Update empty state with remove filters button.

---
 src/containers/search/search.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/containers/search/search.tsx b/src/containers/search/search.tsx
index 7157b3fad0..6e4f7b3874 100644
--- a/src/containers/search/search.tsx
+++ b/src/containers/search/search.tsx
@@ -10,9 +10,11 @@ import {
     Title,
     EmptyStateBody,
     EmptyStateVariant,
+    EmptyStateSecondaryActions,
+    Button,
 } from '@patternfly/react-core';
 
-import { WarningTriangleIcon } from '@patternfly/react-icons';
+import { SearchIcon } from '@patternfly/react-icons';
 
 import {
     BaseHeader,
@@ -201,13 +203,22 @@ class Search extends React.Component<RouteComponentProps, IState> {
     private renderEmpty() {
         return (
             <EmptyState className='empty' variant={EmptyStateVariant.full}>
-                <EmptyStateIcon icon={WarningTriangleIcon} />
+                <EmptyStateIcon icon={SearchIcon} />
                 <Title headingLevel='h2' size='lg'>
-                    No matches
+                    No results found
                 </Title>
                 <EmptyStateBody>
-                    Please try adjusting your search query.
+                    No results match the filter criteria. Remove all filters or
+                    clear all filters to show results.
                 </EmptyStateBody>
+                <Button
+                    variant='link'
+                    onClick={() =>
+                        this.updateParams({}, () => this.queryCollections())
+                    }
+                >
+                    Clear all filters
+                </Button>
             </EmptyState>
         );
     }

From 3d8f44b1da19cdf03533a2243102487d4d3ab261 Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 16:32:49 -0500
Subject: [PATCH 06/10] Remove padding on search list.

---
 src/containers/search/search.scss | 3 ++-
 src/containers/search/search.tsx  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/containers/search/search.scss b/src/containers/search/search.scss
index 615bc996ed..1574b496ae 100644
--- a/src/containers/search/search.scss
+++ b/src/containers/search/search.scss
@@ -61,7 +61,8 @@
     .list {
         margin-bottom: 24px;
         margin-left: 24px;
-        // padding: 15px;
+        padding-top: 16px;
+        padding-bottom: 16px;
 
         // Hack to hide the annoying line at the top of the data list.
         overflow: hidden;
diff --git a/src/containers/search/search.tsx b/src/containers/search/search.tsx
index 6e4f7b3874..263e56c7df 100644
--- a/src/containers/search/search.tsx
+++ b/src/containers/search/search.tsx
@@ -238,7 +238,7 @@ class Search extends React.Component<RouteComponentProps, IState> {
     private renderList(collections) {
         return (
             <div className='list-container'>
-                <div className='body list'>
+                <div className='list'>
                     <DataList
                         className='data-list'
                         aria-label={'List of Collections'}

From faf33b25d6634cccdd1bd4e4d531d34a4925cc28 Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 16:40:13 -0500
Subject: [PATCH 07/10] update tags to use chip component.

---
 src/components/tags/tag.scss |  3 +++
 src/components/tags/tag.tsx  | 19 +++++--------------
 2 files changed, 8 insertions(+), 14 deletions(-)
 create mode 100644 src/components/tags/tag.scss

diff --git a/src/components/tags/tag.scss b/src/components/tags/tag.scss
new file mode 100644
index 0000000000..5a2d195424
--- /dev/null
+++ b/src/components/tags/tag.scss
@@ -0,0 +1,3 @@
+.tag {
+    margin: 4px;
+}
diff --git a/src/components/tags/tag.tsx b/src/components/tags/tag.tsx
index 0a6c9f0722..ed5a35cdd2 100644
--- a/src/components/tags/tag.tsx
+++ b/src/components/tags/tag.tsx
@@ -1,4 +1,7 @@
 import * as React from 'react';
+import './tag.scss';
+
+import { Chip } from '@patternfly/react-core';
 
 interface IProps {
     children: string;
@@ -7,21 +10,9 @@ interface IProps {
 export class Tag extends React.Component<IProps, {}> {
     render() {
         return (
-            <div
-                style={{
-                    display: 'inline-block',
-                    margin: '4px',
-                    backgroundColor: '#E8E6E6',
-                    fontSize: '14px',
-                    paddingLeft: '5px',
-                    paddingRight: '5px',
-                    paddingBottom: '2px',
-                    paddingTop: '2px',
-                    borderRadius: '3px',
-                }}
-            >
+            <Chip className='tag' isReadOnly>
                 {this.props.children}
-            </div>
+            </Chip>
         );
     }
 }

From 9a7a4b40e3ae73aab78c9d2e3a1b4bebbe9782f2 Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Wed, 5 Feb 2020 16:42:02 -0500
Subject: [PATCH 08/10] Swap order of content summary and tags.

---
 .../collection-list/collection-list-item.tsx           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/collection-list/collection-list-item.tsx b/src/components/collection-list/collection-list-item.tsx
index 6e5aa6a6fc..ff5ae0fcaa 100644
--- a/src/components/collection-list/collection-list-item.tsx
+++ b/src/components/collection-list/collection-list-item.tsx
@@ -79,11 +79,6 @@ export class CollectionListItem extends React.Component<IProps, {}> {
                 <div className='entry'>
                     {latest_version.metadata.description}
                 </div>
-                <div className='entry pf-l-flex pf-m-wrap'>
-                    {latest_version.metadata.tags.map((tag, index) => (
-                        <Tag key={index}>{tag}</Tag>
-                    ))}
-                </div>
                 <div className='entry pf-l-flex pf-m-wrap content'>
                     {Object.keys(contentSummary.contents).map(k => (
                         <div key={k}>
@@ -94,6 +89,11 @@ export class CollectionListItem extends React.Component<IProps, {}> {
                         </div>
                     ))}
                 </div>
+                <div className='entry pf-l-flex pf-m-wrap'>
+                    {latest_version.metadata.tags.map((tag, index) => (
+                        <Tag key={index}>{tag}</Tag>
+                    ))}
+                </div>
             </DataListCell>,
         );
 

From 2c1dee2f606802090355ef0a36d173bb86aa785f Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Thu, 13 Feb 2020 15:50:30 -0500
Subject: [PATCH 09/10] Fix empty states and other minutia.

---
 .../collection-list/collection-list.tsx       | 15 +++++--
 .../namespace-detail/namespace-detail.tsx     | 15 ++-----
 .../namespace-list/namespace-list.tsx         | 45 ++++++++++++++-----
 src/containers/search/search.scss             |  2 +-
 src/containers/search/search.tsx              |  7 ++-
 5 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/components/collection-list/collection-list.tsx b/src/components/collection-list/collection-list.tsx
index acaea024fb..b97bd0aee3 100644
--- a/src/components/collection-list/collection-list.tsx
+++ b/src/components/collection-list/collection-list.tsx
@@ -12,7 +12,7 @@ import {
     EmptyStateVariant,
     EmptyStateBody,
 } from '@patternfly/react-core';
-import { WarningTriangleIcon } from '@patternfly/react-icons';
+import { SearchIcon } from '@patternfly/react-icons';
 
 import { CollectionListType } from '../../api';
 import {
@@ -94,13 +94,20 @@ export class CollectionList extends React.Component<IProps, IState> {
                             className='empty'
                             variant={EmptyStateVariant.full}
                         >
-                            <EmptyStateIcon icon={WarningTriangleIcon} />
+                            <EmptyStateIcon icon={SearchIcon} />
                             <Title headingLevel='h2' size='lg'>
-                                No collections found
+                                No results found
                             </Title>
                             <EmptyStateBody>
-                                Please try adjusting your search query.
+                                No results match the filter criteria. Remove all
+                                filters or clear all filters to show results.
                             </EmptyStateBody>
+                            <Button
+                                variant='link'
+                                onClick={() => updateParams({})}
+                            >
+                                Clear all filters
+                            </Button>
                         </EmptyState>
                     )}
                 </DataList>
diff --git a/src/containers/namespace-detail/namespace-detail.tsx b/src/containers/namespace-detail/namespace-detail.tsx
index fb3d604726..b236179d88 100644
--- a/src/containers/namespace-detail/namespace-detail.tsx
+++ b/src/containers/namespace-detail/namespace-detail.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
 
-import {
-    withRouter,
-    RouteComponentProps,
-    Redirect,
-    Link,
-} from 'react-router-dom';
+import { RouteComponentProps, Redirect, Link } from 'react-router-dom';
 import { Section } from '@redhat-cloud-services/frontend-components';
 import {
     Button,
@@ -76,10 +71,6 @@ export class NamespaceDetail extends React.Component<IProps, IState> {
             'page_size',
         ]);
 
-        if (!params['tab']) {
-            params['tab'] = 'collections';
-        }
-
         params['namespace'] = props.match.params['namespace'];
 
         this.state = {
@@ -122,6 +113,8 @@ export class NamespaceDetail extends React.Component<IProps, IState> {
 
         const tabs = ['Collections'];
 
+        const tab = params['tab'] || 'collections';
+
         if (namespace.resources) {
             tabs.push('Resources');
         }
@@ -175,7 +168,7 @@ export class NamespaceDetail extends React.Component<IProps, IState> {
                 ></PartnerHeader>
                 <Main>
                     <Section className='body'>
-                        {params.tab.toLowerCase() === 'collections' ? (
+                        {tab.toLowerCase() === 'collections' ? (
                             <CollectionList
                                 updateParams={params =>
                                     this.updateParams(params, () =>
diff --git a/src/containers/namespace-list/namespace-list.tsx b/src/containers/namespace-list/namespace-list.tsx
index d55cbcc57d..117c31c805 100644
--- a/src/containers/namespace-list/namespace-list.tsx
+++ b/src/containers/namespace-list/namespace-list.tsx
@@ -10,7 +10,7 @@ import {
     EmptyStateBody,
     EmptyStateVariant,
 } from '@patternfly/react-core';
-import { WarningTriangleIcon } from '@patternfly/react-icons';
+import { SearchIcon } from '@patternfly/react-icons';
 
 import { ParamHelper } from '../../utilities/param-helper';
 import {
@@ -201,17 +201,38 @@ export class NamespaceList extends React.Component<IProps, IState> {
 
         if (namespaces.length === 0) {
             return (
-                <EmptyState className='empty' variant={EmptyStateVariant.full}>
-                    <EmptyStateIcon icon={WarningTriangleIcon} />
-                    <Title headingLevel='h2' size='lg'>
-                        {hasPermission ? 'No matches' : 'No managed namespaces'}
-                    </Title>
-                    <EmptyStateBody>
-                        {hasPermission
-                            ? 'Please try adjusting your search query.'
-                            : 'This account is not set up to manage any namespaces.'}
-                    </EmptyStateBody>
-                </EmptyState>
+                <Section>
+                    <EmptyState
+                        className='empty'
+                        variant={EmptyStateVariant.full}
+                    >
+                        <EmptyStateIcon icon={SearchIcon} />
+                        <Title headingLevel='h2' size='lg'>
+                            {hasPermission
+                                ? 'No results found'
+                                : 'No managed namespaces'}
+                        </Title>
+                        <EmptyStateBody>
+                            {hasPermission
+                                ? 'No results match the filter criteria.' +
+                                  ' Remove all filters or clear all filters' +
+                                  ' to show results.'
+                                : 'This account is not set up to manage any namespaces.'}
+                        </EmptyStateBody>
+                        {hasPermission && (
+                            <Button
+                                variant='link'
+                                onClick={() =>
+                                    this.updateParams({}, () =>
+                                        this.loadNamespaces(),
+                                    )
+                                }
+                            >
+                                Clear all filters
+                            </Button>
+                        )}
+                    </EmptyState>
+                </Section>
             );
         }
 
diff --git a/src/containers/search/search.scss b/src/containers/search/search.scss
index 1574b496ae..a330c6bc89 100644
--- a/src/containers/search/search.scss
+++ b/src/containers/search/search.scss
@@ -11,7 +11,7 @@
         align-items: center;
 
         .card-list-switcher {
-            margin-right: 16px;
+            margin-right: 24px;
         }
     }
 }
diff --git a/src/containers/search/search.tsx b/src/containers/search/search.tsx
index 263e56c7df..e93b47776c 100644
--- a/src/containers/search/search.tsx
+++ b/src/containers/search/search.tsx
@@ -10,7 +10,6 @@ import {
     Title,
     EmptyStateBody,
     EmptyStateVariant,
-    EmptyStateSecondaryActions,
     Button,
 } from '@patternfly/react-core';
 
@@ -208,8 +207,8 @@ class Search extends React.Component<RouteComponentProps, IState> {
                     No results found
                 </Title>
                 <EmptyStateBody>
-                    No results match the filter criteria. Remove all filters or
-                    clear all filters to show results.
+                    No results match the search criteria. Remove all filters to
+                    show results.
                 </EmptyStateBody>
                 <Button
                     variant='link'
@@ -217,7 +216,7 @@ class Search extends React.Component<RouteComponentProps, IState> {
                         this.updateParams({}, () => this.queryCollections())
                     }
                 >
-                    Clear all filters
+                    Clear search
                 </Button>
             </EmptyState>
         );

From dec5d668a4094364ecdf7a2cf37bd36b344fca9b Mon Sep 17 00:00:00 2001
From: David Newswanger <dnewswan@redhat.com>
Date: Thu, 13 Feb 2020 16:16:50 -0500
Subject: [PATCH 10/10] fix sentence case on search filter

---
 src/containers/namespace-list/namespace-list.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/namespace-list/namespace-list.tsx b/src/containers/namespace-list/namespace-list.tsx
index 117c31c805..3e6962e3f7 100644
--- a/src/containers/namespace-list/namespace-list.tsx
+++ b/src/containers/namespace-list/namespace-list.tsx
@@ -143,7 +143,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
                             sortOptions={[
                                 { title: 'Name', id: 'name', type: 'alpha' },
                             ]}
-                            searchPlaceholder={'Search ' + title}
+                            searchPlaceholder={'Search ' + title.toLowerCase()}
                             updateParams={p =>
                                 this.updateParams(p, () =>
                                     this.loadNamespaces(),