Update comparison tooltips and column headers

elastic · Apr 6, 2024 · 9e63710 · 9e63710
1 parent ca6755c
commit 9e63710
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 26 deletions.
diff --git a/...unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx b/...unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.test.tsx
@@ -125,14 +125,15 @@ describe('useComparisonColumns', () => {
         column: {
           id: selectedDocs[0],
           display: expect.anything(),
-          displayAsText: selectedDocs[0],
+          displayAsText: `Pinned document: ${selectedDocs[0]}`,
         },
         includeRemoveAction: true,
       }),
       getComparisonColumn({
         column: {
           id: selectedDocs[1],
-          displayAsText: selectedDocs[1],
+          display: `Document: ${selectedDocs[1]}`,
+          displayAsText: `Comparison document: ${selectedDocs[1]}`,
           actions: {
             showMoveRight: true,
           },
@@ -143,7 +144,8 @@ describe('useComparisonColumns', () => {
       getComparisonColumn({
         column: {
           id: selectedDocs[2],
-          displayAsText: selectedDocs[2],
+          display: `Document: ${selectedDocs[2]}`,
+          displayAsText: `Comparison document: ${selectedDocs[2]}`,
           actions: {
             showMoveLeft: true,
             showMoveRight: true,
@@ -155,7 +157,8 @@ describe('useComparisonColumns', () => {
       getComparisonColumn({
         column: {
           id: selectedDocs[3],
-          displayAsText: selectedDocs[3],
+          display: `Document: ${selectedDocs[3]}`,
+          displayAsText: `Comparison document: ${selectedDocs[3]}`,
           actions: {
             showMoveLeft: true,
           },
@@ -180,7 +183,7 @@ describe('useComparisonColumns', () => {
         <EuiFlexItem
           grow={false}
         >
-          0
+          Document: 0
         </EuiFlexItem>
       </EuiFlexGroup>
     `);
@@ -210,18 +213,18 @@ describe('useComparisonColumns', () => {
 
   it('should use result column display for plain records', () => {
     const { columns } = renderColumns({ isPlainRecord: true });
-    expect(columns[1].displayAsText).toBe('Result 1');
-    expect(columns[2].displayAsText).toBe('Result 2');
-    expect(columns[3].displayAsText).toBe('Result 3');
-    expect(columns[4].displayAsText).toBe('Result 4');
+    expect(columns[1].displayAsText).toBe(`Pinned result: 1`);
+    expect(columns[2].displayAsText).toBe(`Comparison result: 2`);
+    expect(columns[3].displayAsText).toBe(`Comparison result: 3`);
+    expect(columns[4].displayAsText).toBe(`Comparison result: 4`);
   });
 
   it('should skip columns for missing docs', () => {
     const getDocById = (id: string) => (id === selectedDocs[1] ? undefined : defaultGetDocById(id));
     const { columns } = renderColumns({ getDocById });
     expect(columns).toHaveLength(4);
-    expect(columns[1].displayAsText).toBe(selectedDocs[0]);
-    expect(columns[2].displayAsText).toBe(selectedDocs[2]);
-    expect(columns[3].displayAsText).toBe(selectedDocs[3]);
+    expect(columns[1].displayAsText).toBe(`Pinned document: ${selectedDocs[0]}`);
+    expect(columns[2].displayAsText).toBe(`Comparison document: ${selectedDocs[2]}`);
+    expect(columns[3].displayAsText).toBe(`Comparison document: ${selectedDocs[3]}`);
   });
 });
diff --git a/.../kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.tsx b/.../kbn-unified-data-table/src/components/compare_documents/hooks/use_comparison_columns.tsx
@@ -100,25 +100,54 @@ export const useComparisonColumns = ({
         });
       }
 
-      const columnDisplay = isPlainRecord
+      const resultNumber = isPlainRecord ? Number(docId || 0) + 1 : undefined;
+      const columnTitle = isPlainRecord
         ? i18n.translate('unifiedDataTable.comparisonColumnResultDisplay', {
             defaultMessage: 'Result {resultNumber}',
-            values: { resultNumber: Number(docId || 0) + 1 },
+            values: { resultNumber },
           })
-        : doc.raw._id;
+        : i18n.translate('unifiedDataTable.comparisonColumnDisplay', {
+            defaultMessage: 'Document: {documentId}',
+            values: { documentId: doc.raw._id },
+          });
+
+      const display =
+        docIndex === 0 ? (
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiIcon type="pinFilled" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>{columnTitle}</EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          columnTitle
+        );
+
+      const displayAsText =
+        docIndex === 0
+          ? isPlainRecord
+            ? i18n.translate('unifiedDataTable.comparisonColumnResultPinnedTooltip', {
+                defaultMessage: 'Pinned result: {resultNumber}',
+                values: { resultNumber },
+              })
+            : i18n.translate('unifiedDataTable.comparisonColumnPinnedTooltip', {
+                defaultMessage: 'Pinned document: {documentId}',
+                values: { documentId: doc.raw._id },
+              })
+          : isPlainRecord
+          ? i18n.translate('unifiedDataTable.comparisonColumnResultTooltip', {
+              defaultMessage: 'Comparison result: {resultNumber}',
+              values: { resultNumber },
+            })
+          : i18n.translate('unifiedDataTable.comparisonColumnTooltip', {
+              defaultMessage: 'Comparison document: {documentId}',
+              values: { documentId: doc.raw._id },
+            });
 
       currentColumns.push({
         id: docId,
-        display:
-          docIndex === 0 ? (
-            <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
-              <EuiFlexItem grow={false}>
-                <EuiIcon type="pinFilled" />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>{columnDisplay}</EuiFlexItem>
-            </EuiFlexGroup>
-          ) : undefined,
-        displayAsText: columnDisplay,
+        display,
+        displayAsText,
         initialWidth: columnWidth,
         isSortable: false,
         isExpandable: false,

diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -817,7 +817,7 @@ describe('UnifiedDataTable', () => {
     it('should allow comparison if 2 or more documents are selected and comparison mode is enabled', async () => {
       renderDataTable({ enableComparisonMode: true });
       await goToComparisonMode();
-      expect(getColumnHeaders()).toEqual(['Field', '1', '2']);
+      expect(getColumnHeaders()).toEqual(['Field', 'Document: 1', 'Document: 2']);
       expect(getCellValues()).toEqual(['', '', 'i', 'i', '20', '', '', 'jpg', 'test1', '']);
     });