From 5aea523ff39b6f0a12896c2fd6749d03eca4e96b Mon Sep 17 00:00:00 2001
From: Ashton Galloway <ashton.galloway@hpe.com>
Date: Mon, 6 Nov 2023 14:50:06 -0500
Subject: [PATCH] feat: add hide column header menu item to explist

---
 .../F_ExpList/glide-table/GlideTable.tsx      | 75 +++++++++++--------
 1 file changed, 44 insertions(+), 31 deletions(-)

diff --git a/webui/react/src/pages/F_ExpList/glide-table/GlideTable.tsx b/webui/react/src/pages/F_ExpList/glide-table/GlideTable.tsx
index d311ed12a01..ec064b2307d 100644
--- a/webui/react/src/pages/F_ExpList/glide-table/GlideTable.tsx
+++ b/webui/react/src/pages/F_ExpList/glide-table/GlideTable.tsx
@@ -368,7 +368,51 @@ export const GlideTable: React.FC<GlideTableProps> = ({
         setMenuIsOpen(false);
       };
 
+      const isPinned = col <= pinnedColumnsCount + staticColumns.length - 1;
       const items: MenuItem[] = [
+        // Column is pinned if the index is inside of the frozen columns
+        col < staticColumns.length || isMobile
+          ? null
+          : !isPinned
+          ? {
+              icon: <Icon decorative name="pin" />,
+              key: 'pin',
+              label: 'Pin column',
+              onClick: () => {
+                const newSortableColumns = sortableColumnIds.filter((c) => c !== column.column);
+                newSortableColumns.splice(pinnedColumnsCount, 0, column.column);
+                onSortableColumnChange?.(newSortableColumns);
+                onPinnedColumnsCountChange?.(
+                  Math.min(pinnedColumnsCount + 1, sortableColumnIds.length),
+                );
+                setMenuIsOpen(false);
+              },
+            }
+          : {
+              disabled: pinnedColumnsCount <= 1,
+              key: 'unpin',
+              label: 'Unpin column',
+              onClick: () => {
+                const newSortableColumns = sortableColumnIds.filter((c) => c !== column.column);
+                newSortableColumns.splice(pinnedColumnsCount - 1, 0, column.column);
+                onSortableColumnChange?.(newSortableColumns);
+                onPinnedColumnsCountChange?.(Math.max(pinnedColumnsCount - 1, 0));
+                setMenuIsOpen(false);
+              },
+            },
+        {
+          icon: <Icon decorative name="eye-close" />,
+          key: 'hide',
+          label: 'Hide column',
+          onClick: () => {
+            const newSortableColumns = sortableColumnIds.filter((c) => c !== column.column);
+            onSortableColumnChange?.(newSortableColumns);
+            if (isPinned) {
+              onPinnedColumnsCountChange?.(Math.max(pinnedColumnsCount - 1, 0));
+            }
+          },
+        },
+        { type: 'divider' as const },
         ...(BANNED_FILTER_COLUMNS.includes(column.column)
           ? []
           : [
@@ -399,37 +443,6 @@ export const GlideTable: React.FC<GlideTableProps> = ({
               },
             }
           : null,
-        // Column is pinned if the index is inside of the frozen columns
-        col < staticColumns.length || isMobile
-          ? null
-          : col > pinnedColumnsCount + staticColumns.length - 1
-          ? {
-              icon: <Icon decorative name="pin" />,
-              key: 'pin',
-              label: 'Pin column',
-              onClick: () => {
-                const newSortableColumns = sortableColumnIds.filter((c) => c !== column.column);
-                newSortableColumns.splice(pinnedColumnsCount, 0, column.column);
-                onSortableColumnChange?.(newSortableColumns);
-                onPinnedColumnsCountChange?.(
-                  Math.min(pinnedColumnsCount + 1, sortableColumnIds.length),
-                );
-                setMenuIsOpen(false);
-              },
-            }
-          : {
-              disabled: pinnedColumnsCount <= 1,
-              icon: <Icon decorative name="pin" />,
-              key: 'unpin',
-              label: 'Unpin column',
-              onClick: () => {
-                const newSortableColumns = sortableColumnIds.filter((c) => c !== column.column);
-                newSortableColumns.splice(pinnedColumnsCount - 1, 0, column.column);
-                onSortableColumnChange?.(newSortableColumns);
-                onPinnedColumnsCountChange?.(Math.max(pinnedColumnsCount - 1, 0));
-                setMenuIsOpen(false);
-              },
-            },
       ];
       setMenuProps((prev) => ({ ...prev, bounds, items, title: `${columnId} menu` }));
       setMenuIsOpen(true);