[EuiDataGrid] use schema sorting labels instead of placeholder value (#…

…4199) * Modified datagrid column actions to use schema sorting labels instead of placeholder text * snapshot updates * changelog
elastic · Oct 30, 2020 · c067b3c · c067b3c
1 parent 9826570
commit c067b3c
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 **Bug fixes**
 
 - Fixed issue with `labelDisplay` not being passed to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180))
+- Fixed copy in `EuiDataGrid`'s header menu's sort actions ([#4199](https://github.com/elastic/eui/pull/4199))
 
 ## [`30.1.1`](https://github.com/elastic/eui/tree/v30.1.1)
 

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -224,8 +224,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
     key="title-1"
     label={
       <EuiI18n
-        default="Sort schema asc"
-        token="euiColumnActions.sortAsc"
+        default="Sort {schemaLabel}"
+        token="euiColumnActions.sort"
+        values={
+          Object {
+            "schemaLabel": <EuiI18n
+              default="A-Z"
+              token="euiColumnSortingDraggable.defaultSortAsc"
+            />,
+          }
+        }
       />
     }
     onClick={[Function]}
@@ -253,13 +261,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
         </EuiIcon>
         <span
           className="euiListGroupItem__label"
-          title="Sort schema asc"
+          title="Sort A-Z"
         >
           <EuiI18n
-            default="Sort schema asc"
-            token="euiColumnActions.sortAsc"
+            default="Sort {schemaLabel}"
+            token="euiColumnActions.sort"
+            values={
+              Object {
+                "schemaLabel": <EuiI18n
+                  default="A-Z"
+                  token="euiColumnSortingDraggable.defaultSortAsc"
+                />,
+              }
+            }
           >
-            Sort schema asc
+            <Component
+              schemaLabel={
+                <EuiI18n
+                  default="A-Z"
+                  token="euiColumnSortingDraggable.defaultSortAsc"
+                />
+              }
+            >
+              Sort 
+              <EuiI18n
+                default="A-Z"
+                key="1"
+                token="euiColumnSortingDraggable.defaultSortAsc"
+              >
+                A-Z
+              </EuiI18n>
+            </Component>
           </EuiI18n>
         </span>
       </button>
@@ -273,8 +305,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
     key="title-2"
     label={
       <EuiI18n
-        default="Sort schema desc"
-        token="euiColumnActions.sortDesc"
+        default="Sort {schemaLabel}"
+        token="euiColumnActions.sort"
+        values={
+          Object {
+            "schemaLabel": <EuiI18n
+              default="Z-A"
+              token="euiColumnSortingDraggable.defaultSortDesc"
+            />,
+          }
+        }
       />
     }
     onClick={[Function]}
@@ -302,13 +342,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
         </EuiIcon>
         <span
           className="euiListGroupItem__label"
-          title="Sort schema desc"
+          title="Sort Z-A"
         >
           <EuiI18n
-            default="Sort schema desc"
-            token="euiColumnActions.sortDesc"
+            default="Sort {schemaLabel}"
+            token="euiColumnActions.sort"
+            values={
+              Object {
+                "schemaLabel": <EuiI18n
+                  default="Z-A"
+                  token="euiColumnSortingDraggable.defaultSortDesc"
+                />,
+              }
+            }
           >
-            Sort schema desc
+            <Component
+              schemaLabel={
+                <EuiI18n
+                  default="Z-A"
+                  token="euiColumnSortingDraggable.defaultSortDesc"
+                />
+              }
+            >
+              Sort 
+              <EuiI18n
+                default="Z-A"
+                key="1"
+                token="euiColumnSortingDraggable.defaultSortDesc"
+              >
+                Z-A
+              </EuiI18n>
+            </Component>
           </EuiI18n>
         </span>
       </button>
@@ -459,8 +523,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
     key="title-0"
     label={
       <EuiI18n
-        default="Sort schema asc"
-        token="euiColumnActions.sortAsc"
+        default="Sort {schemaLabel}"
+        token="euiColumnActions.sort"
+        values={
+          Object {
+            "schemaLabel": <EuiI18n
+              default="A-Z"
+              token="euiColumnSortingDraggable.defaultSortAsc"
+            />,
+          }
+        }
       />
     }
     onClick={[Function]}
@@ -488,13 +560,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
         </EuiIcon>
         <span
           className="euiListGroupItem__label"
-          title="Sort schema asc"
+          title="Sort A-Z"
         >
           <EuiI18n
-            default="Sort schema asc"
-            token="euiColumnActions.sortAsc"
+            default="Sort {schemaLabel}"
+            token="euiColumnActions.sort"
+            values={
+              Object {
+                "schemaLabel": <EuiI18n
+                  default="A-Z"
+                  token="euiColumnSortingDraggable.defaultSortAsc"
+                />,
+              }
+            }
           >
-            Sort schema asc
+            <Component
+              schemaLabel={
+                <EuiI18n
+                  default="A-Z"
+                  token="euiColumnSortingDraggable.defaultSortAsc"
+                />
+              }
+            >
+              Sort 
+              <EuiI18n
+                default="A-Z"
+                key="1"
+                token="euiColumnSortingDraggable.defaultSortAsc"
+              >
+                A-Z
+              </EuiI18n>
+            </Component>
           </EuiI18n>
         </span>
       </button>
@@ -508,8 +604,16 @@ exports[`EuiDataGrid render column actions renders various column actions config
     key="title-1"
     label={
       <EuiI18n
-        default="Sort schema desc"
-        token="euiColumnActions.sortDesc"
+        default="Sort {schemaLabel}"
+        token="euiColumnActions.sort"
+        values={
+          Object {
+            "schemaLabel": <EuiI18n
+              default="Z-A"
+              token="euiColumnSortingDraggable.defaultSortDesc"
+            />,
+          }
+        }
       />
     }
     onClick={[Function]}
@@ -537,13 +641,37 @@ exports[`EuiDataGrid render column actions renders various column actions config
         </EuiIcon>
         <span
           className="euiListGroupItem__label"
-          title="Sort schema desc"
+          title="Sort Z-A"
         >
           <EuiI18n
-            default="Sort schema desc"
-            token="euiColumnActions.sortDesc"
+            default="Sort {schemaLabel}"
+            token="euiColumnActions.sort"
+            values={
+              Object {
+                "schemaLabel": <EuiI18n
+                  default="Z-A"
+                  token="euiColumnSortingDraggable.defaultSortDesc"
+                />,
+              }
+            }
           >
-            Sort schema desc
+            <Component
+              schemaLabel={
+                <EuiI18n
+                  default="Z-A"
+                  token="euiColumnSortingDraggable.defaultSortDesc"
+                />
+              }
+            >
+              Sort 
+              <EuiI18n
+                default="Z-A"
+                key="1"
+                token="euiColumnSortingDraggable.defaultSortDesc"
+              >
+                Z-A
+              </EuiI18n>
+            </Component>
           </EuiI18n>
         </span>
       </button>

diff --git a/src/components/datagrid/column_actions.tsx b/src/components/datagrid/column_actions.tsx
@@ -20,10 +20,21 @@ import React from 'react';
 import { EuiDataGridColumn, EuiDataGridSorting } from './data_grid_types';
 import { EuiI18n } from '../i18n';
 import { EuiListGroupItemProps } from '../list_group';
+import {
+  EuiDataGridSchema,
+  EuiDataGridSchemaDetector,
+  getDetailsForSchema,
+} from './data_grid_schema';
+import {
+  defaultSortAscLabel,
+  defaultSortDescLabel,
+} from './column_sorting_draggable';
 
 export function getColumnActions(
   column: EuiDataGridColumn,
   columns: EuiDataGridColumn[],
+  schema: EuiDataGridSchema,
+  schemaDetectors: EuiDataGridSchemaDetector[],
   setVisibleColumns: (columnId: string[]) => void,
   setIsPopoverOpen: (value: boolean) => void,
   sorting: EuiDataGridSorting | undefined,
@@ -118,10 +129,21 @@ export function getColumnActions(
     }
   }
 
+  const schemaDetails =
+    schema.hasOwnProperty(column.id) && schema[column.id].columnType != null
+      ? getDetailsForSchema(schemaDetectors, schema[column.id].columnType)
+      : null;
   if (column.actions?.showSortAsc !== false && sorting) {
+    const label = schemaDetails
+      ? schemaDetails.sortTextAsc
+      : defaultSortAscLabel;
     const option = {
       label: (
-        <EuiI18n token="euiColumnActions.sortAsc" default="Sort schema asc" />
+        <EuiI18n
+          token="euiColumnActions.sort"
+          default="Sort {schemaLabel}"
+          values={{ schemaLabel: label }}
+        />
       ),
       onClick: onClickSortAsc,
       isDisabled: column.isSortable === false,
@@ -141,9 +163,16 @@ export function getColumnActions(
   }
 
   if (column.actions?.showSortDesc !== false && sorting) {
+    const label = schemaDetails
+      ? schemaDetails.sortTextDesc
+      : defaultSortDescLabel;
     const option = {
       label: (
-        <EuiI18n token="euiColumnActions.sortDesc" default="Sort schema desc" />
+        <EuiI18n
+          token="euiColumnActions.sort"
+          default="Sort {schemaLabel}"
+          values={{ schemaLabel: label }}
+        />
       ),
       onClick: onClickSortDesc,
       isDisabled: column.isSortable === false,

diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx
@@ -46,6 +46,13 @@ export interface EuiDataGridColumnSortingDraggableProps {
   display: string;
 }
 
+export const defaultSortAscLabel = (
+  <EuiI18n token="euiColumnSortingDraggable.defaultSortAsc" default="A-Z" />
+);
+export const defaultSortDescLabel = (
+  <EuiI18n token="euiColumnSortingDraggable.defaultSortDesc" default="Z-A" />
+);
+
 export const EuiDataGridColumnSortingDraggable: FunctionComponent<EuiDataGridColumnSortingDraggableProps> = ({
   id,
   display,
@@ -62,21 +69,10 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<EuiDataGridCol
       : null;
 
   const textSortAsc =
-    schemaDetails != null ? (
-      schemaDetails.sortTextAsc
-    ) : (
-      <EuiI18n token="euiColumnSortingDraggable.defaultSortAsc" default="A-Z" />
-    );
+    schemaDetails != null ? schemaDetails.sortTextAsc : defaultSortAscLabel;
 
   const textSortDesc =
-    schemaDetails != null ? (
-      schemaDetails.sortTextDesc
-    ) : (
-      <EuiI18n
-        token="euiColumnSortingDraggable.defaultSortDesc"
-        default="Z-A"
-      />
-    );
+    schemaDetails != null ? schemaDetails.sortTextDesc : defaultSortDescLabel;
 
   const toggleOptions = [
     {

diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx
@@ -1066,6 +1066,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                                           setVisibleColumns={setVisibleColumns}
                                           switchColumnPos={switchColumnPos}
                                           schema={mergedSchema}
+                                          schemaDetectors={allSchemaDetectors}
                                           sorting={sorting}
                                           headerIsInteractive={
                                             headerIsInteractive

diff --git a/src/components/datagrid/data_grid_header_cell.tsx b/src/components/datagrid/data_grid_header_cell.tsx
@@ -59,6 +59,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
     columns,
     columnWidths,
     schema,
+    schemaDetectors,
     defaultColumnWidth,
     setColumnWidth,
     setVisibleColumns,
@@ -274,6 +275,8 @@ export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps
   const columnActions = getColumnActions(
     column,
     columns,
+    schema,
+    schemaDetectors,
     setVisibleColumns,
     setIsPopoverOpen,
     sorting,