Allow sorting on multiple columns in Discover

src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header.tsx

@@ -28,10 +28,10 @@ interface Props {
   hideTimeColumn: boolean;
   indexPattern: IndexPatternEnhanced;
   isShortDots: boolean;
-  onChangeSortOrder: (name: string, direction: 'asc' | 'desc') => void;
+  onChangeSortOrder: (sortOrder: SortOrder[]) => void;
   onMoveColumn: (name: string, index: number) => void;
   onRemoveColumn: (name: string) => void;
-  sortOrder: SortOrder;
+  sortOrder: SortOrder[];
 }
 
 export function TableHeader({
@@ -45,7 +45,6 @@ export function TableHeader({
   sortOrder,
 }: Props) {
   const displayedColumns = getDisplayedColumns(columns, indexPattern, hideTimeColumn, isShortDots);
-  const [currColumnName, currDirection = 'asc'] = sortOrder;
 
   return (
     <tr data-test-subj="docTableHeader" className="kbnDocTableHeader">
@@ -55,7 +54,7 @@ export function TableHeader({
           <TableHeaderColumn
             key={col.name}
             {...col}
-            sortDirection={col.name === currColumnName ? currDirection : ''}
+            sortOrder={sortOrder}
             onMoveColumn={onMoveColumn}
             onRemoveColumn={onRemoveColumn}
             onChangeSortOrder={onChangeSortOrder}

src/legacy/core_plugins/kibana/public/discover/doc_table/components/table_header/table_header_column.tsx

@@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiToolTip } from '@elastic/eui';
 // @ts-ignore
 import { shortenDottedString } from '../../../../../common/utils/shorten_dotted_string';
+import { SortOrder } from './helpers';
 
 interface Props {
   colLeftIdx: number; // idx of the column to the left, -1 if moving is not possible
@@ -30,12 +31,18 @@ interface Props {
   isRemoveable: boolean;
   isSortable: boolean;
   name: string;
-  onChangeSortOrder?: (name: string, direction: 'asc' | 'desc') => void;
+  onChangeSortOrder: (sortOrder: SortOrder[]) => void;
   onMoveColumn?: (name: string, idx: number) => void;
   onRemoveColumn?: (name: string) => void;
-  sortDirection: 'asc' | 'desc' | ''; // asc|desc -> field is sorted in this direction, else ''
+  sortOrder: SortOrder[];
 }
 
+const sortDirectionToIcon = {
+  desc: 'fa fa-sort-down',
+  asc: 'fa fa-sort-up',
+  '': 'fa fa-sort',
+};
+
 export function TableHeaderColumn({
   colLeftIdx,
   colRightIdx,
@@ -46,38 +53,74 @@ export function TableHeaderColumn({
   onChangeSortOrder,
   onMoveColumn,
   onRemoveColumn,
-  sortDirection,
+  sortOrder,
 }: Props) {
-  const btnSortIcon = sortDirection === 'desc' ? 'fa fa-sort-down' : 'fa fa-sort-up';
+  const [, sortDirection = ''] = sortOrder.find(sortPair => name === sortPair[0]) || [];
+  const currentSortWithoutColumn = sortOrder.filter(pair => pair[0] !== name);
+  const currentColumnSort = sortOrder.find(pair => pair[0] === name);
+  const currentColumnSortDirection = (currentColumnSort && currentColumnSort[1]) || '';
+
+  const btnSortIcon = sortDirectionToIcon[sortDirection];
   const btnSortClassName =
     sortDirection !== '' ? btnSortIcon : `kbnDocTableHeader__sortChange ${btnSortIcon}`;
 
+  const handleChangeSortOrder = () => {
+    // Cycle goes Unsorted -> Asc -> Desc -> Unsorted
+    if (currentColumnSort === undefined) {
+      onChangeSortOrder([[name, 'asc'], ...currentSortWithoutColumn]);
+    } else if (currentColumnSortDirection === 'asc') {
+      onChangeSortOrder([[name, 'desc'], ...currentSortWithoutColumn]);
+    } else if (currentColumnSortDirection === 'desc' && currentSortWithoutColumn.length === 0) {
+      // If we're at the end of the cycle and this is the only existing sort, we switch
+      // back to ascending sort instead of removing it.
+      onChangeSortOrder([[name, 'asc']]);
+    } else {
+      onChangeSortOrder(currentSortWithoutColumn);
+    }
+  };
+
+  const getAriaLabel = () => {
+    const sortAscendingMessage = i18n.translate(
+      'kbn.docTable.tableHeader.sortByColumnAscendingAriaLabel',
+      {
+        defaultMessage: 'Sort {columnName} ascending',
+        values: { columnName: name },
+      }
+    );
+    const sortDescendingMessage = i18n.translate(
+      'kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel',
+      {
+        defaultMessage: 'Sort {columnName} descending',
+        values: { columnName: name },
+      }
+    );
+    const stopSortingMessage = i18n.translate(
+      'kbn.docTable.tableHeader.sortByColumnUnsortedAriaLabel',
+      {
+        defaultMessage: 'Stop sorting on {columnName}',
+        values: { columnName: name },
+      }
+    );
+
+    if (currentColumnSort === undefined) {
+      return sortAscendingMessage;
+    } else if (sortDirection === 'asc') {
+      return sortDescendingMessage;
+    } else if (sortDirection === 'desc' && currentSortWithoutColumn.length === 0) {
+      return sortAscendingMessage;
+    } else {
+      return stopSortingMessage;
+    }
+  };
+
   // action buttons displayed on the right side of the column name
   const buttons = [
     // Sort Button
     {
       active: isSortable,
-      ariaLabel:
-        sortDirection === 'asc'
-          ? i18n.translate('kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel', {
-              defaultMessage: 'Sort {columnName} descending',
-              values: { columnName: name },
-            })
-          : i18n.translate('kbn.docTable.tableHeader.sortByColumnAscendingAriaLabel', {
-              defaultMessage: 'Sort {columnName} ascending',
-              values: { columnName: name },
-            }),
+      ariaLabel: getAriaLabel(),
       className: btnSortClassName,
-      onClick: () => {
-        /**
-         * cycle sorting direction
-         * asc -> desc, desc -> asc, default: asc
-         */
-        if (typeof onChangeSortOrder === 'function') {
-          const newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-          onChangeSortOrder(name, newDirection);
-        }
-      },
+      onClick: handleChangeSortOrder,
       testSubject: `docTableHeaderFieldSort_${name}`,
       tooltip: i18n.translate('kbn.docTable.tableHeader.sortByColumnTooltip', {
         defaultMessage: 'Sort by {columnName}',