Namespace, my namespaces merge (#396) (#427)

* namespaceBreadcrumb: move the "Namespaces" vs "Partners" logic to a helper export and switch from string computation to having strings for both terms * Remove My Namespaces from menu, breadcrumb and tests edit-namespace: use namespaceBreadcrumb menu: remove My Namespaces tests: don't expect My Namespaces in menu * namespace-detail: use MyNamespaceAPI to determine showControls, not url before: ManageNamespace = NamespaceDetail with showControls=true PartnerDetail = NamespaceDetail with showControls=false after: both removed, route changed to use NamespaceDetail directly NamespaceDetail - move showControls from props to state, set from MyNamespaceAPI * LinkTabs: move CollectionHeader tabs to separate component that's the only tab component we have that supports links in tabs, switching to that one, so moving into a LinkTabs component * namespace-list: merge MyNamespaces & Partners list screens before: MyNamespaces = NamespaceList with filterOwner true, title, and namespacePath myCollectionsByRepo Partners = NamespaceList with filterOwner false, title, and namespacePath namespaceByRepo after: the same, except title is always the same, the Create button only depends on permissions, not filterOwner anymore and added tabs to switch between * NamespaceList - unify conditions for Create button ; LinkTabs - export props type the original logic used filterOwner + rights for the toolbar Create button, and filterOwner + a constant for the empty state Create button now, we're using isStandalone + rights for both * Toolbar (wrapper): call updateParams with page:1 in the new state so that searching always goes to the first page * NamespaceList - drop isStandalone, Create uses rights, adjust EmptyState messages dropping the "No managed namespaces" title altogether, in favor of "No namespaces yet", changing the logic for both Create buttons to just use the `add_namespace` user permission and the "Namespaces will appear once created" vs "This accound is not set up to manage any namespaces" changes from standalone vs cloud to namespaces vs my namespaces tab. (cherry picked from commit 25f72e2) Co-authored-by: Martin Hradil <[email protected]>
ansible · May 11, 2021 · c3968d2 · c3968d2
1 parent ac63f64
commit c3968d2
Show file tree

Hide file tree

Showing 22 changed files with 191 additions and 205 deletions.
diff --git a/src/components/headers/collection-header.tsx b/src/components/headers/collection-header.tsx
@@ -2,11 +2,15 @@ import * as React from 'react';
 import cx from 'classnames';
 import './header.scss';
 
-import { Link } from 'react-router-dom';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { FormSelect, FormSelectOption, Alert } from '@patternfly/react-core';
 
-import { BaseHeader, Breadcrumbs, RepoSelector } from 'src/components';
+import {
+  BaseHeader,
+  Breadcrumbs,
+  LinkTabs,
+  RepoSelector,
+} from 'src/components';
 import { CollectionDetailType } from 'src/api';
 import { Paths, formatPath } from 'src/paths';
 import { ParamHelper } from 'src/utilities/param-helper';
@@ -27,7 +31,7 @@ interface IProps {
 }
 
 export class CollectionHeader extends React.Component<IProps> {
-  ignorParams = ['showing', 'keyords'];
+  ignoreParams = ['showing', 'keyords'];
 
   render() {
     const {
@@ -114,7 +118,7 @@ export class CollectionHeader extends React.Component<IProps> {
 
               return (
                 <div className='link' key={link.key}>
-                  <a href={l} target='blank'>
+                  <a href={l} target='_blank'>
                     {link.name}
                   </a>
                 </div>
@@ -127,85 +131,42 @@ export class CollectionHeader extends React.Component<IProps> {
   }
 
   private renderTabs(active) {
-    // We're not using the Tab react component because they don't support
-    // links.
     const { params, repo } = this.props;
 
-    return (
-      <div className='pf-c-tabs' id='primary'>
-        <ul className='pf-c-tabs__list'>
-          {this.renderTab(
-            active === 'details',
-            'Details',
-            formatPath(
-              Paths.collectionByRepo,
-              {
-                namespace: this.props.collection.namespace.name,
-                collection: this.props.collection.name,
-                repo: repo,
-              },
-              ParamHelper.getReduced(params, this.ignorParams),
-            ),
-          )}
-
-          {this.renderTab(
-            active === 'documentation',
-            'Documentation',
-            formatPath(
-              Paths.collectionDocsIndexByRepo,
-              {
-                namespace: this.props.collection.namespace.name,
-                collection: this.props.collection.name,
-                repo: repo,
-              },
-              ParamHelper.getReduced(params, this.ignorParams),
-            ),
-          )}
-
-          {this.renderTab(
-            active === 'contents',
-            'Contents',
-            formatPath(
-              Paths.collectionContentListByRepo,
-              {
-                namespace: this.props.collection.namespace.name,
-                collection: this.props.collection.name,
-                repo: repo,
-              },
-              ParamHelper.getReduced(params, this.ignorParams),
-            ),
-          )}
-
-          {this.renderTab(
-            active === 'import-log',
-            'Import log',
-            formatPath(
-              Paths.collectionImportLogByRepo,
-              {
-                namespace: this.props.collection.namespace.name,
-                collection: this.props.collection.name,
-                repo: repo,
-              },
-              ParamHelper.getReduced(params, this.ignorParams),
-            ),
-          )}
-        </ul>
-      </div>
-    );
-  }
+    const pathParams = {
+      namespace: this.props.collection.namespace.name,
+      collection: this.props.collection.name,
+      repo: repo,
+    };
+    const reduced = ParamHelper.getReduced(params, this.ignoreParams);
+
+    const tabs = [
+      {
+        active: active === 'details',
+        title: 'Details',
+        link: formatPath(Paths.collectionByRepo, pathParams, reduced),
+      },
+      {
+        active: active === 'documentation',
+        title: 'Documentation',
+        link: formatPath(Paths.collectionDocsIndexByRepo, pathParams, reduced),
+      },
+      {
+        active: active === 'contents',
+        title: 'Contents',
+        link: formatPath(
+          Paths.collectionContentListByRepo,
+          pathParams,
+          reduced,
+        ),
+      },
+      {
+        active: active === 'import-log',
+        title: 'Import log',
+        link: formatPath(Paths.collectionImportLogByRepo, pathParams, reduced),
+      },
+    ];
 
-  private renderTab(active, title, link) {
-    return (
-      <li
-        className={cx({
-          'pf-c-tabs__item': true,
-          'pf-m-current': active,
-        })}
-      >
-        <Link to={link} className='pf-c-tabs__link' id='details-tab'>
-          <span className='pf-c-tabs__item-text'>{title}</span>
-        </Link>
-      </li>
-    );
+    return <LinkTabs tabs={tabs} />;
   }
 }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -11,6 +11,7 @@ export { NamespaceCard } from './cards/namespace-card';
 export { Breadcrumbs } from './patternfly-wrappers/breadcrumbs';
 export { Sort, SortFieldType } from './patternfly-wrappers/sort';
 export { Tabs } from './patternfly-wrappers/tabs';
+export { LinkTabs } from './patternfly-wrappers/link-tabs';
 export { StatefulDropdown } from './patternfly-wrappers/stateful-dropdown';
 export { Toolbar } from './patternfly-wrappers/toolbar';
 export { ImportConsole } from './my-imports/import-console';

diff --git a/src/components/patternfly-wrappers/link-tabs.tsx b/src/components/patternfly-wrappers/link-tabs.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import cx from 'classnames';
+
+import { Link } from 'react-router-dom';
+
+export interface IProps {
+  /** List of tabs */
+  tabs: {
+    active?: boolean;
+    link: string;
+    title: string;
+  }[];
+}
+
+// We're not using the Tab react component because they don't support links.
+export class LinkTabs extends React.Component<IProps> {
+  render() {
+    return (
+      <div className='pf-c-tabs'>
+        <ul className='pf-c-tabs__list'>
+          {this.props.tabs.map(tab => this.renderTab(tab))}
+        </ul>
+      </div>
+    );
+  }
+
+  private renderTab({ link, title, active = false }) {
+    return (
+      <li
+        className={cx({
+          'pf-c-tabs__item': true,
+          'pf-m-current': active,
+        })}
+        key={title}
+      >
+        <Link to={link} className='pf-c-tabs__link'>
+          <span className='pf-c-tabs__item-text'>{title}</span>
+        </Link>
+      </li>
+    );
+  }
+}
diff --git a/src/components/patternfly-wrappers/tabs.tsx b/src/components/patternfly-wrappers/tabs.tsx
@@ -19,6 +19,7 @@ interface IProps {
   disabledTitle?: string;
 }
 
+// FIXME: use LinkTabs, switch from ?tab to routes, rename to Tabs
 export class Tabs extends React.Component<IProps> {
   render() {
     const {

diff --git a/src/components/patternfly-wrappers/toolbar.tsx b/src/components/patternfly-wrappers/toolbar.tsx
@@ -42,6 +42,7 @@ interface IState {
   kwField: string;
 }
 
+// FIXME: only used in collection-list & namespace-list, other Toolbar is unrelated; merge
 export class Toolbar extends React.Component<IProps, IState> {
   static defaultProps = {
     extraInputs: [],
@@ -111,8 +112,13 @@ export class Toolbar extends React.Component<IProps, IState> {
   }
 
   private submitKeywords() {
-    this.props.updateParams(
-      ParamHelper.setParam(this.props.params, 'keywords', this.state.kwField),
-    );
+    this.props.updateParams({
+      ...ParamHelper.setParam(
+        this.props.params,
+        'keywords',
+        this.state.kwField,
+      ),
+      page: 1, // always reset the page when searching
+    });
   }
 }
diff --git a/src/containers/collection-detail/collection-content.tsx b/src/containers/collection-detail/collection-content.tsx
@@ -11,7 +11,7 @@ import {
 } from 'src/components';
 import { loadCollection, IBaseCollectionState } from './base';
 import { ParamHelper } from 'src/utilities/param-helper';
-import { formatPath, Paths } from 'src/paths';
+import { formatPath, namespaceBreadcrumb, Paths } from 'src/paths';
 import { AppContext } from 'src/loaders/app-context';
 
 // renders list of contents in a collection
@@ -36,15 +36,13 @@ class CollectionContent extends React.Component<
 
   render() {
     const { collection, params } = this.state;
-    const name =
-      NAMESPACE_TERM.charAt(0).toUpperCase() + NAMESPACE_TERM.slice(1);
 
     if (!collection) {
       return <LoadingPageWithHeader></LoadingPageWithHeader>;
     }
 
     const breadcrumbs = [
-      { url: Paths[NAMESPACE_TERM], name: name },
+      namespaceBreadcrumb,
       {
         url: formatPath(Paths.namespaceByRepo, {
           namespace: collection.namespace.name,

diff --git a/src/containers/collection-detail/collection-detail.tsx b/src/containers/collection-detail/collection-detail.tsx
@@ -11,7 +11,7 @@ import {
 } from 'src/components';
 import { loadCollection, IBaseCollectionState } from './base';
 import { ParamHelper } from 'src/utilities/param-helper';
-import { formatPath, Paths } from 'src/paths';
+import { formatPath, namespaceBreadcrumb, Paths } from 'src/paths';
 import { AppContext } from 'src/loaders/app-context';
 
 // renders collection level information
@@ -36,15 +36,13 @@ class CollectionDetail extends React.Component<
 
   render() {
     const { collection, params } = this.state;
-    const name =
-      NAMESPACE_TERM.charAt(0).toUpperCase() + NAMESPACE_TERM.slice(1);
 
     if (!collection) {
       return <LoadingPageWithHeader></LoadingPageWithHeader>;
     }
 
     const breadcrumbs = [
-      { url: Paths[NAMESPACE_TERM], name: name },
+      namespaceBreadcrumb,
       {
         url: formatPath(Paths.namespaceByRepo, {
           namespace: collection.namespace.name,

diff --git a/src/containers/collection-detail/collection-docs.tsx b/src/containers/collection-detail/collection-docs.tsx
@@ -19,7 +19,7 @@ import { RenderPluginDoc } from '@ansible/galaxy-doc-builder';
 
 import { loadCollection, IBaseCollectionState } from './base';
 import { ParamHelper, sanitizeDocsUrls } from 'src/utilities';
-import { formatPath, Paths } from 'src/paths';
+import { formatPath, namespaceBreadcrumb, Paths } from 'src/paths';
 import { AppContext } from 'src/loaders/app-context';
 
 import { ExclamationCircleIcon } from '@patternfly/react-icons';
@@ -50,8 +50,6 @@ class CollectionDocs extends React.Component<
   render() {
     const { params, collection } = this.state;
     const urlFields = this.props.match.params;
-    const name =
-      NAMESPACE_TERM.charAt(0).toUpperCase() + NAMESPACE_TERM.slice(1);
 
     if (!collection) {
       return <LoadingPageWithHeader></LoadingPageWithHeader>;
@@ -98,7 +96,7 @@ class CollectionDocs extends React.Component<
     }
 
     const breadcrumbs = [
-      { url: Paths[NAMESPACE_TERM], name: name },
+      namespaceBreadcrumb,
       {
         url: formatPath(Paths.namespaceByRepo, {
           namespace: collection.namespace.name,

diff --git a/src/containers/collection-detail/collection-import-log.tsx b/src/containers/collection-detail/collection-import-log.tsx
@@ -13,7 +13,7 @@ import {
 
 import { loadCollection, IBaseCollectionState } from './base';
 import { ParamHelper } from 'src/utilities/param-helper';
-import { formatPath, Paths } from 'src/paths';
+import { formatPath, namespaceBreadcrumb, Paths } from 'src/paths';
 import { AppContext } from 'src/loaders/app-context';
 
 interface IState extends IBaseCollectionState {
@@ -52,15 +52,13 @@ class CollectionImportLog extends React.Component<RouteComponentProps, IState> {
       selectedImport,
       apiError,
     } = this.state;
-    const name =
-      NAMESPACE_TERM.charAt(0).toUpperCase() + NAMESPACE_TERM.slice(1);
 
     if (!collection) {
       return <LoadingPageWithHeader></LoadingPageWithHeader>;
     }
 
     const breadcrumbs = [
-      { url: Paths[NAMESPACE_TERM], name: name },
+      namespaceBreadcrumb,
       {
         url: formatPath(Paths.namespaceByRepo, {
           namespace: collection.namespace.name,

diff --git a/src/containers/edit-namespace/edit-namespace.tsx b/src/containers/edit-namespace/edit-namespace.tsx
@@ -22,7 +22,7 @@ import {
 
 import { Form, ActionGroup, Button } from '@patternfly/react-core';
 
-import { Paths, formatPath } from 'src/paths';
+import { formatPath, namespaceBreadcrumb, Paths } from 'src/paths';
 import { ParamHelper, mapErrorMessages } from 'src/utilities';
 
 interface IState {
@@ -99,7 +99,7 @@ class EditNamespace extends React.Component<RouteComponentProps, IState> {
         <PartnerHeader
           namespace={namespace}
           breadcrumbs={[
-            { name: 'My namespaces', url: Paths.myNamespaces },
+            namespaceBreadcrumb,
             {
               name: namespace.name,
               url: formatPath(Paths.myCollections, {

diff --git a/src/containers/index.ts b/src/containers/index.ts
@@ -6,8 +6,7 @@ export { default as CollectionImportLog } from './collection-detail/collection-i
 export { default as EditNamespace } from './edit-namespace/edit-namespace';
 export { default as LoginPage } from './login/login';
 export { default as MyImports } from './my-imports/my-imports';
-export { default as ManageNamespace } from './namespace-detail/manage-namespace';
-export { default as PartnerDetail } from './namespace-detail/partner-detail';
+export { default as NamespaceDetail } from './namespace-detail/namespace-detail';
 export { default as MyNamespaces } from './namespace-list/my-namespaces';
 export { default as Partners } from './namespace-list/partners';
 export { default as NotFound } from './not-found/not-found';

diff --git a/src/containers/namespace-detail/manage-namespace.tsx b/src/containers/namespace-detail/manage-namespace.tsx