Remove sort, move, and remove buttons from Context app's table header (…

…elastic#42026)

Prior to elastic#41259 we intentionally did not show the sort, move, and remove column buttons in the doc table in the Context app. Context doesn't pass in handlers for these actions and in the old angular directive we conditionally showed the buttons depending on whether those handlers were passed in. So in this PR I've simply mimicked that behavior in the new React component.

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

@@ -28,9 +28,9 @@ interface Props {
   hideTimeColumn: boolean;
   indexPattern: IndexPatternEnhanced;
   isShortDots: boolean;
-  onChangeSortOrder: (name: string, direction: 'asc' | 'desc') => void;
-  onMoveColumn: (name: string, index: number) => void;
-  onRemoveColumn: (name: string) => void;
+  onChangeSortOrder?: (name: string, direction: 'asc' | 'desc') => void;
+  onMoveColumn?: (name: string, index: number) => void;
+  onRemoveColumn?: (name: string) => void;
   sortOrder: SortOrder;
 }
 

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

@@ -56,7 +56,7 @@ export function TableHeaderColumn({
   const buttons = [
     // Sort Button
     {
-      active: isSortable,
+      active: isSortable && typeof onChangeSortOrder === 'function',
       ariaLabel:
         sortDirection === 'asc'
           ? i18n.translate('kbn.docTable.tableHeader.sortByColumnDescendingAriaLabel', {
@@ -86,7 +86,7 @@ export function TableHeaderColumn({
     },
     // Remove Button
     {
-      active: isRemoveable,
+      active: isRemoveable && typeof onRemoveColumn === 'function',
       ariaLabel: i18n.translate('kbn.docTable.tableHeader.removeColumnButtonAriaLabel', {
         defaultMessage: 'Remove {columnName} column',
         values: { columnName: name },
@@ -100,7 +100,7 @@ export function TableHeaderColumn({
     },
     // Move Left Button
     {
-      active: colLeftIdx >= 0,
+      active: colLeftIdx >= 0 && typeof onMoveColumn === 'function',
       ariaLabel: i18n.translate('kbn.docTable.tableHeader.moveColumnLeftButtonAriaLabel', {
         defaultMessage: 'Move {columnName} column to the left',
         values: { columnName: name },
@@ -114,7 +114,7 @@ export function TableHeaderColumn({
     },
     // Move Right Button
     {
-      active: colRightIdx >= 0,
+      active: colRightIdx >= 0 && typeof onMoveColumn === 'function',
       ariaLabel: i18n.translate('kbn.docTable.tableHeader.moveColumnRightButtonAriaLabel', {
         defaultMessage: 'Move {columnName} column to the right',
         values: { columnName: name },