Namespace - show name, not company (outside insights)

for non-insights mode, just show namespace name always, instead of preferring namespace.company for the title Affects collection header (logo alt), collection list item, collection card, namespace header and namespace card. Issue: AAH-2722
ansible · Sep 26, 2023 · cee366e · cee366e
1 parent a7e781b
commit cee366e
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 32 deletions.
diff --git a/CHANGES/2722.fix b/CHANGES/2722.fix
@@ -0,0 +1 @@
+Show namespace name, not company
diff --git a/src/components/cards/collection-card.tsx b/src/components/cards/collection-card.tsx
@@ -18,7 +18,7 @@ import { CollectionNumericLabel, Logo, SignatureBadge } from 'src/components';
 import { Constants } from 'src/constants';
 import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
-import { convertContentSummaryCounts } from 'src/utilities';
+import { convertContentSummaryCounts, namespaceTitle } from 'src/utilities';
 
 interface IProps extends CollectionVersionSearch {
   className?: string;
@@ -40,14 +40,16 @@ export const CollectionCard = ({
   const { featureFlags } = useContext();
   const MAX_DESCRIPTION_LENGTH = 60;
 
-  const company = namespace?.company || collection_version.namespace;
+  const nsTitle = namespaceTitle(
+    namespace || { name: collection_version.namespace },
+  );
   const contentSummary = convertContentSummaryCounts(collection_version);
 
   return (
     <Card className={cx('hub-c-card-collection-container ', className)}>
       <CardHeader className='logo-row'>
         <Logo
-          alt={t`${company} logo`}
+          alt={t`${nsTitle} logo`}
           fallbackToDefault
           image={namespace?.avatar_url}
           size='40px'
@@ -103,7 +105,7 @@ export const CollectionCard = ({
                     namespace: collection_version.namespace,
                   })}
                 >
-                  {company}
+                  {nsTitle}
                 </Link>
               </Trans>
             </Text>

diff --git a/src/components/cards/namespace-card.tsx b/src/components/cards/namespace-card.tsx
@@ -11,45 +11,46 @@ import {
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Logo } from 'src/components';
+import { namespaceTitle } from 'src/utilities';
 import './cards.scss';
 
 // Use snake case to match field types provided py python API so that the
 // spread operator can be used.
 interface IProps {
-  avatar_url: string;
-  name: string;
-  company: string;
+  namespace: {
+    avatar_url: string;
+    name: string;
+    company: string;
+  };
   namespaceURL?: string;
 }
 
-export const NamespaceCard = ({
-  avatar_url,
-  name,
-  company,
-  namespaceURL,
-}: IProps) => {
+export const NamespaceCard = ({ namespace, namespaceURL }: IProps) => {
+  const { avatar_url, name } = namespace;
+  const title = namespaceTitle(namespace);
+
   const MAX_DESCRIPTION_LENGTH = 26;
   return (
     <Card className='hub-c-card-ns-container'>
       <CardHeader>
         <CardHeaderMain>
           <Logo
-            alt={t`${company} logo`}
+            alt={t`${title} logo`}
             fallbackToDefault
             image={avatar_url}
             size='40px'
             unlockWidth
           />
         </CardHeaderMain>
       </CardHeader>
-      <Tooltip content={company || name}>
-        <CardTitle>
-          {getDescription(company || name, MAX_DESCRIPTION_LENGTH)}
-        </CardTitle>
-      </Tooltip>
-      <Tooltip content={name}>
-        <CardBody>{getDescription(name, MAX_DESCRIPTION_LENGTH)}</CardBody>
+      <Tooltip content={title}>
+        <CardTitle>{getDescription(title, MAX_DESCRIPTION_LENGTH)}</CardTitle>
       </Tooltip>
+      {title !== name ? (
+        <Tooltip content={name}>
+          <CardBody>{getDescription(name, MAX_DESCRIPTION_LENGTH)}</CardBody>
+        </Tooltip>
+      ) : null}
 
       {namespaceURL && (
         <CardFooter>

diff --git a/src/components/collection-list/collection-list-item.tsx b/src/components/collection-list/collection-list-item.tsx
@@ -24,7 +24,11 @@ import {
 } from 'src/components';
 import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
-import { chipGroupProps, convertContentSummaryCounts } from 'src/utilities';
+import {
+  chipGroupProps,
+  convertContentSummaryCounts,
+  namespaceTitle,
+} from 'src/utilities';
 import { SignatureBadge } from '../signing';
 import './list-item.scss';
 
@@ -54,13 +58,15 @@ export const CollectionListItem = ({
   const { featureFlags } = useContext();
   const cells = [];
 
-  const company = namespace?.company || collection_version.namespace;
+  const nsTitle = namespaceTitle(
+    namespace || { name: collection_version.namespace },
+  );
 
   if (showNamespace) {
     cells.push(
       <DataListCell isFilled={false} alignRight={false} key='ns'>
         <Logo
-          alt={t`${company} logo`}
+          alt={t`${nsTitle} logo`}
           fallbackToDefault
           image={namespace?.avatar_url}
           size='130px'
@@ -97,7 +103,7 @@ export const CollectionListItem = ({
                     namespace: collection_version.namespace,
                   })}
                 >
-                  {company}
+                  {nsTitle}
                 </Link>
               </Trans>
             </Text>

diff --git a/src/components/headers/collection-header.tsx b/src/components/headers/collection-header.tsx
@@ -58,6 +58,7 @@ import {
   ParamHelper,
   canSignNamespace,
   errorMessage,
+  namespaceTitle,
   parsePulpIDFromURL,
   repositoryRemoveCollection,
   waitForTask,
@@ -225,7 +226,9 @@ export class CollectionHeader extends React.Component<IProps, IState> {
     const { collection_version, namespace_metadata: namespace } = collection;
     const { name: collectionName, version } = collection_version;
 
-    const company = namespace?.company || collection_version.namespace;
+    const nsTitle = namespaceTitle(
+      namespace || { name: collection_version.namespace },
+    );
 
     if (redirect) {
       return <Navigate to={redirect} />;
@@ -465,7 +468,7 @@ export class CollectionHeader extends React.Component<IProps, IState> {
           logo={
             namespace?.avatar_url && (
               <Logo
-                alt={t`${company} logo`}
+                alt={t`${nsTitle} logo`}
                 className='image'
                 fallbackToDefault
                 image={namespace.avatar_url}

diff --git a/src/components/headers/partner-header.tsx b/src/components/headers/partner-header.tsx
@@ -10,6 +10,7 @@ import {
   Tabs,
   TabsType,
 } from 'src/components';
+import { namespaceTitle } from 'src/utilities';
 
 interface IProps {
   namespace: NamespaceType;
@@ -34,15 +35,15 @@ export class PartnerHeader extends React.Component<IProps> {
       updateParams,
     } = this.props;
 
-    const company = namespace.company || namespace.name;
+    const title = namespaceTitle(namespace);
 
     return (
       <BaseHeader
-        title={company}
+        title={title}
         logo={
           namespace.avatar_url && (
             <Logo
-              alt={t`${company} logo`}
+              alt={t`${title} logo`}
               className='image'
               fallbackToDefault
               image={namespace.avatar_url}

diff --git a/src/components/namespace-form/namespace-form.tsx b/src/components/namespace-form/namespace-form.tsx
@@ -58,7 +58,7 @@ export class NamespaceForm extends React.Component<IProps> {
             </FormGroup>
           </div>
           <div className='card'>
-            <NamespaceCard {...namespace} />
+            <NamespaceCard namespace={namespace} />
           </div>
         </div>
 

diff --git a/src/containers/namespace-list/namespace-list.tsx b/src/containers/namespace-list/namespace-list.tsx
@@ -331,7 +331,7 @@ export class NamespaceList extends React.Component<IProps, IState> {
                 namespace: ns.name,
               })}
               key={i}
-              {...ns}
+              namespace={ns}
             />
           </div>
         ))}

diff --git a/src/utilities/index.ts b/src/utilities/index.ts
@@ -17,6 +17,7 @@ export {
   mapErrorMessages,
 } from './map-error-messages';
 export { mapNetworkErrors, validateInput } from './map-role-errors';
+export { namespaceTitle } from './namespace-title';
 export { ParamHelper, type ParamType } from './param-helper';
 export { parsePulpIDFromURL } from './parse-pulp-id';
 export { RepoSigningUtils } from './repo-signing';

diff --git a/src/utilities/namespace-title.ts b/src/utilities/namespace-title.ts
@@ -0,0 +1,13 @@
+import { Constants } from 'src/constants';
+
+export function namespaceTitle({
+  name,
+  company,
+}: {
+  name: string;
+  company?: string;
+}): string {
+  return DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE
+    ? company || name
+    : name;
+}