From 22c03628cece5c50924e87f82a3d0d40ca4e572e Mon Sep 17 00:00:00 2001
From: Martin Hradil <mhradil@redhat.com>
Date: Wed, 27 Sep 2023 00:57:54 +0000
Subject: [PATCH] Roles and role namespaces - functional components, cleanup

various changes that don't belong in #4283

No-Issue
---
 src/components/index.ts                       |   1 +
 .../legacy-namespace-item.tsx                 | 116 ++++++------
 .../legacy-namespace-provider.tsx             |  26 ---
 .../legacy-namespace-list/provider-link.tsx   |  21 +++
 .../legacy-role-list/legacy-role-item.tsx     | 168 ++++++++----------
 .../collection-dependencies.tsx               |   1 -
 .../legacy-namespaces/legacy-namespace.tsx    |  13 +-
 src/containers/legacy-roles/legacy-role.tsx   | 127 ++++++-------
 src/containers/legacy-roles/legacy-roles.tsx  |   2 -
 9 files changed, 216 insertions(+), 259 deletions(-)
 delete mode 100644 src/components/legacy-namespace-list/legacy-namespace-provider.tsx
 create mode 100644 src/components/legacy-namespace-list/provider-link.tsx

diff --git a/src/components/index.ts b/src/components/index.ts
index 1200567df2..4ad8c65146 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -35,6 +35,7 @@ export { PartnerHeader } from './headers/partner-header';
 export { HelperText } from './helper-text/helper-text';
 export { ImportModal } from './import-modal/import-modal';
 export { LegacyNamespaceListItem } from './legacy-namespace-list/legacy-namespace-item';
+export { ProviderLink } from './legacy-namespace-list/provider-link';
 export { LegacyRoleListItem } from './legacy-role-list/legacy-role-item';
 export { ListItemActions } from './list-item-actions/list-item-actions';
 export { LoadingPageSpinner } from './loading/loading-page-spinner';
diff --git a/src/components/legacy-namespace-list/legacy-namespace-item.tsx b/src/components/legacy-namespace-list/legacy-namespace-item.tsx
index d33f069f62..e02da00fe3 100644
--- a/src/components/legacy-namespace-list/legacy-namespace-item.tsx
+++ b/src/components/legacy-namespace-list/legacy-namespace-item.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { LegacyNamespaceDetailType } from 'src/api';
 import { Logo, StatefulDropdown } from 'src/components';
-import { AppContext } from 'src/loaders/app-context';
+import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
 import './legacy-namespace-item.scss';
 
@@ -19,72 +19,72 @@ interface LegacyNamespaceProps {
   openModal: (namespace) => void;
 }
 
-export class LegacyNamespaceListItem extends React.Component<LegacyNamespaceProps> {
-  render() {
-    const { namespace } = this.props;
-    const namespace_url = formatPath(Paths.legacyNamespace, {
-      namespaceid: namespace.id,
-    });
+export function LegacyNamespaceListItem({
+  namespace,
+  openModal,
+}: LegacyNamespaceProps) {
+  const {
+    featureFlags: { ai_deny_index },
+    user: { username, is_superuser },
+  } = useContext();
+  const { id, avatar_url, name, summary_fields } = namespace;
 
-    const cells = [];
+  const namespace_url = formatPath(Paths.legacyNamespace, {
+    namespaceid: id,
+  });
 
-    cells.push(
-      <DataListCell isFilled={false} alignRight={false} key='ns'>
-        <Logo
-          alt='logo'
-          fallbackToDefault
-          image={namespace.avatar_url}
-          size='40px'
-          unlockWidth
-          width='97px'
-        />
-      </DataListCell>,
-    );
+  const cells = [];
 
-    cells.push(
-      <DataListCell key='content' size={10}>
-        <div>
-          <Link to={namespace_url}>{namespace.name}</Link>
-        </div>
-      </DataListCell>,
-    );
+  cells.push(
+    <DataListCell isFilled={false} alignRight={false} key='ns'>
+      <Logo
+        alt='logo'
+        fallbackToDefault
+        image={avatar_url}
+        size='40px'
+        unlockWidth
+        width='97px'
+      />
+    </DataListCell>,
+  );
 
-    const { ai_deny_index } = this.context.featureFlags;
-    const summary_fields = namespace.summary_fields;
-    const userOwnsLegacyNamespace = summary_fields?.owners?.filter(
-      (n) => n.username == this.context.user.username,
-    ).length;
+  cells.push(
+    <DataListCell key='content' size={10}>
+      <div>
+        <Link to={namespace_url}>{name}</Link>
+      </div>
+    </DataListCell>,
+  );
 
-    const showWisdom =
-      ai_deny_index &&
-      (this.context.user.is_superuser || userOwnsLegacyNamespace);
+  const userOwnsLegacyNamespace = !!summary_fields.owners.find(
+    (n) => n.username == username,
+  );
 
-    const dropdownItems = [];
+  const showWisdom = ai_deny_index && (is_superuser || userOwnsLegacyNamespace);
 
-    dropdownItems.push(
-      <DropdownItem
-        onClick={() => this.props.openModal(namespace)}
-      >{t`Ansible Lightspeed settings`}</DropdownItem>,
-    );
+  const dropdownItems = [];
 
-    if (showWisdom) {
-      cells.push(
-        <DataListCell key='menu' alignRight={true}>
-          <div style={{ float: 'right' }}>
-            <StatefulDropdown items={dropdownItems} />
-          </div>
-        </DataListCell>,
-      );
-    }
+  dropdownItems.push(
+    <DropdownItem
+      onClick={() => openModal(namespace)}
+    >{t`Ansible Lightspeed settings`}</DropdownItem>,
+  );
 
-    return (
-      <DataListItem data-cy='LegacyNamespaceListItem'>
-        <DataListItemRow>
-          <DataListItemCells dataListCells={cells} />
-        </DataListItemRow>
-      </DataListItem>
+  if (showWisdom) {
+    cells.push(
+      <DataListCell key='menu' alignRight={true}>
+        <div style={{ float: 'right' }}>
+          <StatefulDropdown items={dropdownItems} />
+        </div>
+      </DataListCell>,
     );
   }
-}
 
-LegacyNamespaceListItem.contextType = AppContext;
+  return (
+    <DataListItem data-cy='LegacyNamespaceListItem'>
+      <DataListItemRow>
+        <DataListItemCells dataListCells={cells} />
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
diff --git a/src/components/legacy-namespace-list/legacy-namespace-provider.tsx b/src/components/legacy-namespace-list/legacy-namespace-provider.tsx
deleted file mode 100644
index 6073792aab..0000000000
--- a/src/components/legacy-namespace-list/legacy-namespace-provider.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Trans } from '@lingui/macro';
-import { Text, TextContent, TextVariants } from '@patternfly/react-core';
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-interface IProps {
-  id: number;
-  name: string;
-  url: string;
-}
-
-export class ProviderLink extends React.Component<IProps> {
-  render() {
-    const { name, url } = this.props;
-
-    return (
-      <TextContent>
-        <Text component={TextVariants.small}>
-          <Trans>
-            Provided by <Link to={url}>{name}</Link>
-          </Trans>
-        </Text>
-      </TextContent>
-    );
-  }
-}
diff --git a/src/components/legacy-namespace-list/provider-link.tsx b/src/components/legacy-namespace-list/provider-link.tsx
new file mode 100644
index 0000000000..65f2316358
--- /dev/null
+++ b/src/components/legacy-namespace-list/provider-link.tsx
@@ -0,0 +1,21 @@
+import { Trans } from '@lingui/macro';
+import { Text, TextContent, TextVariants } from '@patternfly/react-core';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface IProps {
+  name: string;
+  url: string;
+}
+
+export function ProviderLink({ name, url }: IProps) {
+  return (
+    <TextContent>
+      <Text component={TextVariants.small}>
+        <Trans>
+          Provided by&nbsp;<Link to={url}>{name}</Link>
+        </Trans>
+      </Text>
+    </TextContent>
+  );
+}
diff --git a/src/components/legacy-role-list/legacy-role-item.tsx b/src/components/legacy-role-list/legacy-role-item.tsx
index e757a989ab..ec1421b2ea 100644
--- a/src/components/legacy-role-list/legacy-role-item.tsx
+++ b/src/components/legacy-role-list/legacy-role-item.tsx
@@ -9,11 +9,15 @@ import {
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { LegacyRoleDetailType } from 'src/api';
-import { DateComponent, DownloadCount, Logo, Tag } from 'src/components';
-import { ProviderLink } from 'src/components/legacy-namespace-list/legacy-namespace-provider';
+import {
+  DateComponent,
+  DownloadCount,
+  Logo,
+  ProviderLink,
+  Tag,
+} from 'src/components';
 import { Paths, formatPath } from 'src/paths';
-import { chipGroupProps } from 'src/utilities';
-import { getProviderInfo } from 'src/utilities';
+import { chipGroupProps, getProviderInfo } from 'src/utilities';
 import './legacy-role-item.scss';
 
 interface LegacyRoleProps {
@@ -21,101 +25,77 @@ interface LegacyRoleProps {
   show_thumbnail: boolean;
 }
 
-export class LegacyRoleListItem extends React.Component<LegacyRoleProps> {
-  render() {
-    const { role, show_thumbnail } = this.props;
-    const namespace = role.summary_fields.namespace;
-    const role_url = formatPath(Paths.legacyRole, {
-      username: role.github_user,
-      name: role.name,
-    });
-
-    let release_date = null;
-    let release_name = null;
-    const lv = role.summary_fields.versions[0];
-    if (lv !== undefined && lv !== null) {
-      release_date = lv.release_date;
-      release_name = lv.name;
-    }
-    if (
-      release_date === undefined ||
-      release_date === null ||
-      release_date === ''
-    ) {
-      release_date = role.modified;
-    }
-    if (
-      release_name === undefined ||
-      release_name === null ||
-      release_name === ''
-    ) {
-      release_name = '';
-    }
-
-    const provider = getProviderInfo(role);
-    console.log('PROVIDER', provider);
+export function LegacyRoleListItem({ role, show_thumbnail }: LegacyRoleProps) {
+  const {
+    description,
+    github_user,
+    modified,
+    name,
+    summary_fields: { namespace, versions, tags },
+  } = role;
+  const latest = versions[0];
 
-    const cells = [];
-
-    if (show_thumbnail !== false) {
-      cells.push(
-        <DataListCell isFilled={false} alignRight={false} key='ns'>
-          <Logo
-            alt={t`${role.github_user} logo`}
-            image={role.summary_fields.namespace.avatar_url}
-            size='70px'
-            unlockWidth
-            width='97px'
-          />
-        </DataListCell>,
-      );
-    }
+  const role_url = formatPath(Paths.legacyRole, {
+    username: github_user,
+    name,
+  });
+  const release_date = latest?.release_date || modified;
+  const release_name = latest?.name || '';
+  const provider = getProviderInfo(role);
+  const cells = [];
 
+  if (show_thumbnail !== false) {
     cells.push(
-      <DataListCell key='content'>
-        <div>
-          <Link to={role_url}>
-            {namespace.name}.{role.name}
-          </Link>
-          <ProviderLink
-            id={provider.id}
-            name={provider.name}
-            url={provider.url}
-          >
-            {provider.name}
-          </ProviderLink>
-        </div>
-        <div className='hub-entry'>{role.description}</div>
-        <div className='hub-entry'>
-          <LabelGroup {...chipGroupProps()}>
-            {role.summary_fields.tags.map((tag, index) => (
-              <Tag key={index}>{tag}</Tag>
-            ))}
-          </LabelGroup>
-        </div>
+      <DataListCell isFilled={false} alignRight={false} key='ns'>
+        <Logo
+          alt={t`${github_user} logo`}
+          image={namespace.avatar_url}
+          size='70px'
+          unlockWidth
+          width='97px'
+        />
       </DataListCell>,
     );
+  }
 
-    cells.push(
-      <DataListCell isFilled={false} alignRight key='stats'>
-        <div className='hub-right-col hub-entry'>
-          <Trans>
-            Updated <DateComponent date={release_date} />
-          </Trans>
-        </div>
-        <div className='hub-entry'>{release_name}</div>
-        <div className='hub-entry'>
-          <DownloadCount item={role} />
-        </div>
-      </DataListCell>,
-    );
+  cells.push(
+    <DataListCell key='content'>
+      <div>
+        <Link to={role_url}>
+          {namespace.name}.{name}
+        </Link>
+        <ProviderLink {...provider} />
+      </div>
+      <div className='hub-entry'>{description}</div>
+      <div className='hub-entry'>
+        <LabelGroup {...chipGroupProps()}>
+          {tags.map((tag, index) => (
+            <Tag key={index}>{tag}</Tag>
+          ))}
+        </LabelGroup>
+      </div>
+    </DataListCell>,
+  );
 
-    return (
-      <DataListItem data-cy='LegacyRoleListItem'>
-        <DataListItemRow>
-          <DataListItemCells dataListCells={cells} />
-        </DataListItemRow>
-      </DataListItem>
-    );
-  }
+  cells.push(
+    <DataListCell isFilled={false} alignRight key='stats'>
+      <div className='hub-right-col hub-entry'>
+        <Trans>
+          Updated <DateComponent date={release_date} />
+        </Trans>
+      </div>
+      <div className='hub-entry'>{release_name}</div>
+      <div className='hub-entry'>
+        <DownloadCount item={role} />
+      </div>
+    </DataListCell>,
+  );
+
+  return (
+    <DataListItem data-cy='LegacyRoleListItem'>
+      <DataListItemRow>
+        <DataListItemCells dataListCells={cells} />
+      </DataListItemRow>
+    </DataListItem>
+  );
 }
diff --git a/src/containers/collection-detail/collection-dependencies.tsx b/src/containers/collection-detail/collection-dependencies.tsx
index aa29bb72e6..23c9b556ab 100644
--- a/src/containers/collection-detail/collection-dependencies.tsx
+++ b/src/containers/collection-detail/collection-dependencies.tsx
@@ -258,7 +258,6 @@ class CollectionDependencies extends React.Component<RouteProps, IState> {
           });
         })
         .catch(({ response, message }) => {
-          // console.log(response, message);
           if (message !== 'request-canceled') {
             const { status, statusText } = response;
             this.setState({
diff --git a/src/containers/legacy-namespaces/legacy-namespace.tsx b/src/containers/legacy-namespaces/legacy-namespace.tsx
index a1a8e67bee..d82ce2135e 100644
--- a/src/containers/legacy-namespaces/legacy-namespace.tsx
+++ b/src/containers/legacy-namespaces/legacy-namespace.tsx
@@ -24,15 +24,14 @@ import {
   LoadingPageSpinner,
   Logo,
   Pagination,
+  ProviderLink,
   StatefulDropdown,
   WisdomModal,
   closeAlertMixin,
 } from 'src/components';
-import { ProviderLink } from 'src/components/legacy-namespace-list/legacy-namespace-provider';
 import { AppContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
-import { RouteProps, withRouter } from 'src/utilities';
-import { getProviderInfo } from 'src/utilities/legacy-namespace';
+import { RouteProps, getProviderInfo, withRouter } from 'src/utilities';
 import './legacy-namespace.scss';
 
 interface LegacyNamespaceRolesProps {
@@ -258,13 +257,7 @@ class LegacyNamespace extends React.Component<
             width='90px'
           />
           <Link to={namespace_url}>{this.state.namespace.name}</Link>
-          <ProviderLink
-            id={provider.id}
-            name={provider.name}
-            url={provider.url}
-          >
-            {provider.name}
-          </ProviderLink>
+          <ProviderLink {...provider} />
         </DataListCell>,
       );
 
diff --git a/src/containers/legacy-roles/legacy-role.tsx b/src/containers/legacy-roles/legacy-role.tsx
index 400ccd798c..eed71c5426 100644
--- a/src/containers/legacy-roles/legacy-role.tsx
+++ b/src/containers/legacy-roles/legacy-role.tsx
@@ -167,7 +167,7 @@ class LegacyRoleVersions extends React.Component<RoleMeta, RoleVersionsIProps> {
 
         <DataList aria-label={t`List of versions`}>
           {this.state.role_versions.reverse().map((rversion) => (
-            <DataListItem key={rversion.name} aria-labelledby='compact-item2'>
+            <DataListItem key={rversion.name}>
               <LegacyRoleVersion role_version={rversion} />
             </DataListItem>
           ))}
@@ -268,94 +268,85 @@ class LegacyRole extends React.Component<RouteProps, IProps> {
       release_name = '';
     }
 
-    const header_cells = [];
-    if (this.state.role !== undefined && this.state.role !== null) {
-      header_cells.push(
-        <DataListCell isFilled={false} alignRight={false} key='ns'>
-          <Logo
-            alt={t`${role.github_user} logo`}
-            fallbackToDefault
-            image={role.summary_fields.namespace.avatar_url}
-            size='70px'
-            unlockWidth
-            width='97px'
-          />
-          <Link to={namespace_url}>{namespace.name}</Link>
-        </DataListCell>,
-      );
-
-      header_cells.push(
-        <DataListCell key='content'>
-          <div>
-            <TextContent>
-              <Text component={TextVariants.h1}>
-                {namespace.name}.{this.state.role.name}
-              </Text>
-            </TextContent>
-          </div>
-          <div className='hub-entry'>{this.state.role.description}</div>
-          <div className='hub-entry'>
-            <LabelGroup {...chipGroupProps()}>
-              {this.state.role.summary_fields.tags.map((tag, index) => (
-                <Tag key={index}>{tag}</Tag>
-              ))}
-            </LabelGroup>
-          </div>
-        </DataListCell>,
-      );
-
-      header_cells.push(
-        <DataListCell isFilled={false} alignRight key='version'>
-          <div className='hub-right-col hub-entry'>
-            <Trans>
-              Updated <DateComponent date={release_date} />
-            </Trans>
-          </div>
-          {release_name && <div className='hub-entry'>{release_name}</div>}
-          <div className='hub-entry'>
-            <a href={repository}>
-              Github Repository <ExternalLinkAltIcon />
-            </a>
-          </div>
-          <div className='hub-entry'>
-            <DownloadCount item={role} />
-          </div>
-        </DataListCell>,
-      );
-    }
+    const header_cells = [
+      <DataListCell isFilled={false} alignRight={false} key='ns'>
+        <Logo
+          alt={t`${role.github_user} logo`}
+          fallbackToDefault
+          image={role.summary_fields.namespace.avatar_url}
+          size='70px'
+          unlockWidth
+          width='97px'
+        />
+        <Link to={namespace_url}>{namespace.name}</Link>
+      </DataListCell>,
+      <DataListCell key='content'>
+        <div>
+          <TextContent>
+            <Text component={TextVariants.h1}>
+              {namespace.name}.{role.name}
+            </Text>
+          </TextContent>
+        </div>
+        <div className='hub-entry'>{role.description}</div>
+        <div className='hub-entry'>
+          <LabelGroup {...chipGroupProps()}>
+            {role.summary_fields.tags.map((tag, index) => (
+              <Tag key={index}>{tag}</Tag>
+            ))}
+          </LabelGroup>
+        </div>
+      </DataListCell>,
+      <DataListCell isFilled={false} alignRight key='version'>
+        <div className='hub-right-col hub-entry'>
+          <Trans>
+            Updated <DateComponent date={release_date} />
+          </Trans>
+        </div>
+        {release_name && <div className='hub-entry'>{release_name}</div>}
+        <div className='hub-entry'>
+          <a href={repository}>
+            Github Repository <ExternalLinkAltIcon />
+          </a>
+        </div>
+        <div className='hub-entry'>
+          <DownloadCount item={role} />
+        </div>
+      </DataListCell>,
+    ];
 
     const table = {
-      install: { title: 'Install' },
-      documentation: { title: 'Documentation' },
-      versions: { title: 'Versions' },
+      install: { title: t`Install` },
+      documentation: { title: t`Documentation` },
+      versions: { title: t`Versions` },
     };
 
     const renderContent = () => {
       if (this.state.activeItem == 'install') {
         return (
           <LegacyRoleInstall
-            role={this.state.role}
+            role={role}
             github_user={this.state.github_user}
             name={this.state.name}
-            id={this.state.role.id}
+            id={role.id}
           />
         );
       } else if (this.state.activeItem === 'documentation') {
         return (
           <LegacyRoleDocs
-            role={this.state.role}
+            role={role}
             github_user={this.state.github_user}
             name={this.state.name}
-            id={this.state.role.id}
+            id={role.id}
           />
         );
       } else if (this.state.activeItem === 'versions') {
         return (
           <LegacyRoleVersions
-            role={this.state.role}
+            role={role}
             github_user={this.state.github_user}
             name={this.state.name}
-            id={this.state.role.id}
+            id={role.id}
           />
         );
       } else {
@@ -365,7 +356,7 @@ class LegacyRole extends React.Component<RouteProps, IProps> {
 
     const breadcrumbs = [
       {
-        name: 'Legacy Roles',
+        name: t`Roles`,
         url: formatPath(Paths.legacyRoles),
       },
       {
@@ -382,7 +373,7 @@ class LegacyRole extends React.Component<RouteProps, IProps> {
     ];
 
     return (
-      <React.Fragment>
+      <>
         <DataList aria-label={t`Role Header`}>
           <DataListItem data-cy='LegacyRoleListItem'>
             {/* This renders a bit too small ...? */}
@@ -418,7 +409,7 @@ class LegacyRole extends React.Component<RouteProps, IProps> {
         <Main>
           <section className='body'>{renderContent()}</section>
         </Main>
-      </React.Fragment>
+      </>
     );
   }
 }
diff --git a/src/containers/legacy-roles/legacy-roles.tsx b/src/containers/legacy-roles/legacy-roles.tsx
index 9d018aa3bd..75af3189f9 100644
--- a/src/containers/legacy-roles/legacy-roles.tsx
+++ b/src/containers/legacy-roles/legacy-roles.tsx
@@ -142,7 +142,6 @@ class LegacyRoles extends React.Component<RouteProps, IProps> {
 
               <Pagination
                 params={this.state.params}
-                //updateParams={(p) => this.updateParams(p)}
                 updateParams={this.updateParams}
                 count={this.state.count}
               />
@@ -160,7 +159,6 @@ class LegacyRoles extends React.Component<RouteProps, IProps> {
 
               <Pagination
                 params={this.state.params}
-                //updateParams={(p) => this.updateParams(p)}
                 updateParams={this.updateParams}
                 count={this.state.count}
               />