address truncation of names in connection type tables (#3210)

opendatahub-io · Sep 13, 2024 · f130d33 · f130d33
1 parent 353a156
commit f130d33
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 25 deletions.
diff --git a/frontend/src/components/ResourceNameTooltip.tsx b/frontend/src/components/ResourceNameTooltip.tsx
@@ -17,13 +17,18 @@ import DashboardPopupIconButton from '~/concepts/dashboard/DashboardPopupIconBut
 type ResourceNameTooltipProps = {
   resource: K8sResourceCommon;
   children: React.ReactNode;
+  wrap?: boolean;
 };
 
-const ResourceNameTooltip: React.FC<ResourceNameTooltipProps> = ({ children, resource }) => (
-  <div>
-    {children}{' '}
+const ResourceNameTooltip: React.FC<ResourceNameTooltipProps> = ({
+  children,
+  resource,
+  wrap = true,
+}) => (
+  <div style={{ display: wrap ? 'block' : 'inline-flex' }}>
+    <span>{children}</span>
     {resource.metadata?.name && (
-      <div style={{ display: 'inline-block' }}>
+      <div style={{ display: 'inline-block', marginLeft: 'var(--pf-v5-global--spacer--xs)' }}>
         <Popover
           position="right"
           bodyContent={

diff --git a/frontend/src/components/table/TableRowTitleDescription.tsx b/frontend/src/components/table/TableRowTitleDescription.tsx
@@ -13,6 +13,7 @@ type TableRowTitleDescriptionProps = {
   descriptionAsMarkdown?: boolean;
   truncateDescriptionLines?: number;
   label?: React.ReactNode;
+  wrapResourceTitle?: boolean;
 };
 
 const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
@@ -24,6 +25,7 @@ const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
   descriptionAsMarkdown,
   truncateDescriptionLines,
   label,
+  wrapResourceTitle = true,
 }) => {
   let descriptionNode: React.ReactNode;
   if (description) {
@@ -46,7 +48,13 @@ const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
   return (
     <>
       <div data-testid="table-row-title" className={boldTitle ? 'pf-v5-u-font-weight-bold' : ''}>
-        {resource ? <ResourceNameTooltip resource={resource}>{title}</ResourceNameTooltip> : title}
+        {resource ? (
+          <ResourceNameTooltip resource={resource} wrap={wrapResourceTitle}>
+            {title}
+          </ResourceNameTooltip>
+        ) : (
+          title
+        )}
       </div>
       {subtitle}
       {descriptionNode}

diff --git a/frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx b/frontend/src/pages/connectionTypes/ConnectionTypesTable.tsx
@@ -62,7 +62,6 @@ const ConnectionTypesTable: React.FC<Props> = ({ connectionTypes, onUpdate }) =>
     <>
       <Table
         isStriped
-        variant="compact"
         style={{ tableLayout: 'fixed' }}
         data={filteredConnectionTypes}
         columns={connectionTypeColumns}

diff --git a/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx b/frontend/src/pages/connectionTypes/ConnectionTypesTableRow.tsx
@@ -7,6 +7,7 @@ import {
   Switch,
   Timestamp,
   TimestampTooltipVariant,
+  Truncate,
 } from '@patternfly/react-core';
 import { ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
 import { relativeTime } from '~/utilities/time';
@@ -81,7 +82,8 @@ const ConnectionTypesTableRow: React.FC<ConnectionTypesTableRowProps> = ({
     <Tr>
       <Td dataLabel={connectionTypeColumns[0].label}>
         <TableRowTitleDescription
-          title={getDisplayNameFromK8sResource(obj)}
+          boldTitle={false}
+          title={<Truncate content={getDisplayNameFromK8sResource(obj)} />}
           description={getDescriptionFromK8sResource(obj)}
           truncateDescriptionLines={2}
         />

diff --git a/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx b/frontend/src/pages/connectionTypes/manage/ManageConnectionTypeFieldsTableRow.tsx
@@ -10,9 +10,9 @@ import {
 } from '~/concepts/connectionTypes/types';
 import { defaultValueToString, fieldTypeToString } from '~/concepts/connectionTypes/utils';
 import type { RowProps } from '~/utilities/useDraggableTableControlled';
-import TruncatedText from '~/components/TruncatedText';
 import { columns } from '~/pages/connectionTypes/manage/fieldTableColumns';
 import { ConnectionTypeFieldRemoveModal } from '~/pages/connectionTypes/manage/ConnectionTypeFieldRemoveModal';
+import { TableRowTitleDescription } from '~/components/table';
 
 type Props = {
   row: ConnectionTypeField;
@@ -67,15 +67,23 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
           }}
         />
         <Td dataLabel={columns[0].label} data-testid="field-name">
-          <div>
-            {row.name}{' '}
-            <Label color="blue" data-testid="section-heading">
-              Section heading
-            </Label>
-            <div className="pf-v5-u-color-200">
-              <TruncatedText content={row.description ?? ''} maxLines={2} />
-            </div>
-          </div>
+          <TableRowTitleDescription
+            boldTitle={false}
+            title={
+              <Flex gap={{ default: 'gapSm' }} flexWrap={{ default: 'nowrap' }}>
+                <FlexItem>
+                  <Truncate content={row.name} />
+                </FlexItem>
+                <FlexItem>
+                  <Label color="blue" data-testid="section-heading">
+                    Section heading
+                  </Label>
+                </FlexItem>
+              </Flex>
+            }
+            description={row.description}
+            truncateDescriptionLines={2}
+          />
         </Td>
         <Td colSpan={4} />
         <Td isActionCell modifier="nowrap">
@@ -123,12 +131,12 @@ const ManageConnectionTypeFieldsTableRow: React.FC<Props> = ({
         }}
       />
       <Td dataLabel={columns[0].label} data-testid="field-name">
-        <div>
-          {row.name}
-          <div className="pf-v5-u-color-200">
-            <TruncatedText content={row.description ?? ''} maxLines={2} />
-          </div>
-        </div>
+        <TableRowTitleDescription
+          boldTitle={false}
+          title={<Truncate content={row.name} />}
+          description={row.description}
+          truncateDescriptionLines={2}
+        />
       </Td>
       <Td dataLabel={columns[1].label} data-testid="field-type">
         {fieldTypeToString(row.type)}

diff --git a/frontend/src/pages/projects/screens/detail/connections/ConnectionsTableRow.tsx b/frontend/src/pages/projects/screens/detail/connections/ConnectionsTableRow.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
+import { Truncate } from '@patternfly/react-core';
 import { Connection, ConnectionTypeConfigMapObj } from '~/concepts/connectionTypes/types';
 import { TableRowTitleDescription } from '~/components/table';
+import { getDescriptionFromK8sResource, getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
 
 type ConnectionsTableRowProps = {
   obj: Connection;
@@ -30,10 +32,12 @@ const ConnectionsTableRow: React.FC<ConnectionsTableRowProps> = ({
     <Tr>
       <Td dataLabel="Name">
         <TableRowTitleDescription
-          title={obj.metadata.annotations['openshift.io/display-name'] || obj.metadata.name}
+          title={<Truncate content={getDisplayNameFromK8sResource(obj)} />}
           boldTitle={false}
           resource={obj}
-          description={obj.metadata.annotations['openshift.io/description']}
+          description={getDescriptionFromK8sResource(obj)}
+          truncateDescriptionLines={2}
+          wrapResourceTitle={false}
         />
       </Td>
       <Td dataLabel="Type">{connectionTypeDisplayName}</Td>