Merge pull request #1671 from jetstreamapp/feat/show-name-as-record-popover

Add NameLinkRenderer for clickable popover and update column types

Author: paustint

libs/ui/src/lib/data-table/DataTableRenderers.tsx

@@ -2,12 +2,13 @@
 import { css } from '@emotion/react';
 import { IconName } from '@jetstream/icon-factory';
 import { isValidSalesforceRecordId, useDebounce } from '@jetstream/shared/ui-utils';
-import { multiWordStringFilter } from '@jetstream/shared/utils';
+import { getIdFromRecordUrl, multiWordStringFilter } from '@jetstream/shared/utils';
 import { CloneEditView, ListItem, SalesforceOrgUi } from '@jetstream/types';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
 import { formatISO } from 'date-fns/formatISO';
 import { parseISO } from 'date-fns/parseISO';
+import lodashGet from 'lodash/get';
 import isBoolean from 'lodash/isBoolean';
 import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
@@ -599,6 +600,43 @@ export const IdLinkRenderer = ({ column, row }: RenderCellProps<RowWithKey, unkn
 };
 dataTableRenderFnMap.set(IdLinkRenderer, 'IdLinkRenderer');
 
+/**
+ * Render a Name field (primary or via relationship like Account.Name) as a clickable
+ * record-lookup popover, showing the Name text as the cell content instead of the id.
+ * Falls back to plain text when no related record id can be resolved.
+ */
+export const NameLinkRenderer = ({ column, row }: RenderCellProps<RowWithKey, unknown>): ReactNode => {
+  const { onRecordAction } = useContext(DataTableGenericContext) as {
+    onRecordAction?: (action: CloneEditView, recordId: string, sobjectName: string) => void;
+  };
+  const nameValue = row[column.key];
+  // For "Account.Owner.Name" the parent path is "Account.Owner"; for bare "Name" it is the row's record itself.
+  const parentPath = column.key.includes('.') ? column.key.split('.').slice(0, -1).join('.') : '';
+  const relatedRecord = parentPath ? lodashGet(row._record, parentPath) : row._record;
+  const relatedRecordUrl = relatedRecord?.attributes?.url;
+  const recordId: string | undefined = relatedRecord?.Id || (relatedRecordUrl ? getIdFromRecordUrl(relatedRecordUrl) : undefined);
+
+  if (nameValue == null || !recordId) {
+    return <div className="slds-truncate">{nameValue}</div>;
+  }
+
+  const { skipFrontDoorAuth, url } = getSfdcRetUrl(relatedRecord, recordId, _skipFrontdoorLogin);
+
+  return (
+    <RecordLookupPopover
+      org={_org}
+      serverUrl={_serverUrl}
+      recordId={recordId}
+      skipFrontDoorAuth={skipFrontDoorAuth}
+      returnUrl={url}
+      isTooling={false}
+      onRecordAction={onRecordAction}
+      displayValue={<span className="slds-truncate">{nameValue}</span>}
+    />
+  );
+};
+dataTableRenderFnMap.set(NameLinkRenderer, 'NameLinkRenderer');
+
 export function TextOrIdLinkRenderer(RenderCellProps: RenderCellProps<RowWithKey>): ReactNode {
   const { column, row } = RenderCellProps;
 

libs/ui/src/lib/data-table/data-table-types.ts

@@ -21,6 +21,7 @@ export type ColumnType =
   | 'boolean'
   | 'address'
   | 'salesforceId'
+  | 'salesforceName'
   | 'textOrSalesforceId';
 export type FilterType = 'TEXT' | 'NUMBER' | 'DATE' | 'TIME' | 'SET' | 'BOOLEAN_SET';
 export const FILTER_SET_TYPES = new Set<FilterType>(['SET', 'BOOLEAN_SET']);

libs/ui/src/lib/data-table/data-table-utils.tsx

@@ -34,6 +34,7 @@ import {
   GenericRenderer,
   HeaderFilter,
   IdLinkRenderer,
+  NameLinkRenderer,
   TextOrIdLinkRenderer,
 } from './DataTableRenderers';
 import { SubqueryRenderer } from './DataTableSubqueryRenderer';
@@ -280,22 +281,38 @@ function getQueryResultColumn({
   if (subqueryRelationshipName) {
     fieldLowercase = `${subqueryRelationshipName.toLowerCase()}.${fieldLowercase}`;
   }
-  if (queryColumnsByPath[fieldLowercase]) {
-    const col = queryColumnsByPath[fieldLowercase];
-    column.name = col.columnFullPath;
-    column.key = col.columnFullPath;
-    updateColumnFromType(column, getColumnTypeFromQueryResultsColumn(col));
+  const queryResultColumn = queryColumnsByPath[fieldLowercase];
+  let resolvedType: ColumnType = 'text';
+  if (queryResultColumn) {
+    column.name = queryResultColumn.columnFullPath;
+    column.key = queryResultColumn.columnFullPath;
+    resolvedType = getColumnTypeFromQueryResultsColumn(queryResultColumn);
+    updateColumnFromType(column, resolvedType);
     // exclude related records from edit mode
-    if (allowEdit && !col.columnFullPath?.includes('.')) {
-      updateColumnWithEditMode(column, col, fieldMetadata);
-    }
-  } else {
-    if (field.endsWith('Id')) {
-      updateColumnFromType(column, 'salesforceId');
-    } else if (isSubquery) {
-      updateColumnFromType(column, 'subquery');
+    if (allowEdit && !queryResultColumn.columnFullPath?.includes('.')) {
+      updateColumnWithEditMode(column, queryResultColumn, fieldMetadata);
     }
+  } else if (field.endsWith('Id')) {
+    resolvedType = 'salesforceId';
+    updateColumnFromType(column, 'salesforceId');
+  } else if (isSubquery) {
+    resolvedType = 'subquery';
+    updateColumnFromType(column, 'subquery');
+  }
+
+  // Upgrade plain-text Name / relationship Name columns (e.g. Name, Account.Name, Account.Owner.Name)
+  // to a clickable record-lookup popover, mirroring the IdLinkRenderer behavior.
+  // Skipped for subquery child columns, aggregate (GROUP BY) columns, and anything that already
+  // resolved to a non-text type (salesforceId, boolean, date, etc).
+  // Use the canonical resolved column path when available so Name-field detection does not depend
+  // on the original query casing from getFlattenedFields(results.parsedQuery).
+  const canonicalColumnPath = queryResultColumn?.columnFullPath ?? column.key;
+  const isNameField =
+    !!fieldMetadata?.[field.toLowerCase()]?.nameField || canonicalColumnPath === 'Name' || canonicalColumnPath.endsWith('.Name');
+  if (!subqueryRelationshipName && !queryResultColumn?.aggregate && resolvedType === 'text' && isNameField) {
+    updateColumnFromType(column, 'salesforceName');
   }
+
   return column;
 }
 
@@ -416,6 +433,9 @@ export function updateColumnFromType(column: Mutable<ColumnWithFilter<any>>, fie
       column.renderCell = IdLinkRenderer;
       column.width = 175;
       break;
+    case 'salesforceName':
+      column.renderCell = NameLinkRenderer;
+      break;
     case 'textOrSalesforceId':
       column.renderCell = TextOrIdLinkRenderer;
       column.width = 175;

libs/ui/src/lib/widgets/RecordLookupPopover.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { describeGlobal, describeSObject, queryWithCache } from '@jetstream/shared/data';
 import { appActionObservable, useNonInitialEffect } from '@jetstream/shared/ui-utils';
 import { CloneEditView, RecordWithAuditFields, SalesforceOrgUi } from '@jetstream/types';
-import { FunctionComponent, useEffect, useRef, useState } from 'react';
+import { FunctionComponent, ReactNode, useEffect, useRef, useState } from 'react';
 import { dataTableDateFormatter } from '../data-table/data-table-formatters';
 import ReadOnlyFormElement from '../form/readonly-form-element/ReadOnlyFormElement';
 import Grid from '../grid/Grid';
@@ -21,6 +21,8 @@ export interface RecordLookupPopoverProps {
   skipFrontDoorAuth?: boolean;
   returnUrl?: string;
   isTooling?: boolean;
+  /** Custom content to render as the popover trigger. Defaults to the recordId. */
+  displayValue?: ReactNode;
   onRecordAction?: (action: CloneEditView, recordId: string, sobjectName: string) => void;
 }
 
@@ -31,6 +33,7 @@ export const RecordLookupPopover: FunctionComponent<RecordLookupPopoverProps> =
   skipFrontDoorAuth,
   returnUrl,
   isTooling,
+  displayValue,
   onRecordAction,
 }) => {
   const isMounted = useRef(true);
@@ -250,7 +253,7 @@ export const RecordLookupPopover: FunctionComponent<RecordLookupPopoverProps> =
           }
         }}
       >
-        {recordId}
+        {displayValue ?? recordId}
       </span>
     </Popover>
   );