[Lens] Add reset and hide actions to columns on dashboard (elastic#10…

…2025)
cuff-links · Jun 15, 2021 · dfda2de · dfda2de
1 parent 1fedbae
commit dfda2de
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 28 deletions.
diff --git a/...ns/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap b/...ns/lens/public/datatable_visualization/components/__snapshots__/table_basic.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx
@@ -152,31 +152,33 @@ export const createGridColumns = (
 
     const additionalActions: EuiListGroupItemProps[] = [];
 
-    if (!isReadOnly) {
+    additionalActions.push({
+      color: 'text',
+      size: 'xs',
+      onClick: () => onColumnResize({ columnId: originalColumnId || field, width: undefined }),
+      iconType: 'empty',
+      label: i18n.translate('xpack.lens.table.resize.reset', {
+        defaultMessage: 'Reset width',
+      }),
+      'data-test-subj': 'lensDatatableResetWidth',
+      isDisabled: initialWidth == null,
+    });
+    if (!isTransposed) {
       additionalActions.push({
         color: 'text',
         size: 'xs',
-        onClick: () => onColumnResize({ columnId: originalColumnId || field, width: undefined }),
-        iconType: 'empty',
-        label: i18n.translate('xpack.lens.table.resize.reset', {
-          defaultMessage: 'Reset width',
+        onClick: () => onColumnHide({ columnId: originalColumnId || field }),
+        iconType: 'eyeClosed',
+        label: i18n.translate('xpack.lens.table.hide.hideLabel', {
+          defaultMessage: 'Hide',
         }),
-        'data-test-subj': 'lensDatatableResetWidth',
-        isDisabled: initialWidth == null,
+        'data-test-subj': 'lensDatatableHide',
+        isDisabled: !isHidden && visibleColumns.length <= 1,
       });
-      if (!isTransposed) {
-        additionalActions.push({
-          color: 'text',
-          size: 'xs',
-          onClick: () => onColumnHide({ columnId: originalColumnId || field }),
-          iconType: 'eyeClosed',
-          label: i18n.translate('xpack.lens.table.hide.hideLabel', {
-            defaultMessage: 'Hide',
-          }),
-          'data-test-subj': 'lensDatatableHide',
-          isDisabled: !isHidden && visibleColumns.length <= 1,
-        });
-      } else if (columnArgs?.bucketValues) {
+    }
+
+    if (!isReadOnly) {
+      if (isTransposed && columnArgs?.bucketValues) {
         const bucketValues = columnArgs?.bucketValues;
         additionalActions.push({
           color: 'text',

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.test.tsx
@@ -129,7 +129,7 @@ describe('DatatableComponent', () => {
     ).toMatchSnapshot();
   });
 
-  test('it should not render actions on header when it is in read only mode', () => {
+  test('it should render hide and reset actions on header even when it is in read only mode', () => {
     const { data, args } = sampleArgs();
 
     expect(

diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx
@@ -280,9 +280,13 @@ export const DatatableComponent = (props: DatatableRenderProps) => {
     [formatters, columnConfig, props.uiSettings]
   );
 
-  const columnVisibility = useMemo(() => ({ visibleColumns, setVisibleColumns: () => {} }), [
-    visibleColumns,
-  ]);
+  const columnVisibility = useMemo(
+    () => ({
+      visibleColumns,
+      setVisibleColumns: () => {},
+    }),
+    [visibleColumns]
+  );
 
   const sorting = useMemo<EuiDataGridSorting>(
     () => createGridSortingConfig(sortBy, sortDirection as LensGridDirection, onEditAction),