fix(stacks): conditionally hide node and namespace stacks [EE-6949] (#11527)

Co-authored-by: testa113 <testa113>

app/react/components/Badge/ExternalBadge.tsx

@@ -1,5 +1,5 @@
 import { Badge } from '@@/Badge';
 
 export function ExternalBadge() {
-  return <Badge type="info">external</Badge>;
+  return <Badge type="info">External</Badge>;
 }

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx

@@ -24,7 +24,6 @@ export function NodeApplicationsDatatable({
   onRefresh: () => void;
   isLoading: boolean;
 }) {
-  const columns = useColumns(true);
   const tableState = useTableStateWithStorage<TableSettings>(
     'kube-node-apps',
     'Name',
@@ -34,6 +33,8 @@ export function NodeApplicationsDatatable({
   );
   useRepeater(tableState.autoRefreshRate, onRefresh);
 
+  const columns = useColumns();
+
   return (
     <Datatable
       dataset={dataset}

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx

@@ -1,19 +1,25 @@
-import { useMemo } from 'react';
 import _ from 'lodash';
+import { useMemo } from 'react';
 
 import { humanize, truncate } from '@/portainer/filters/filters';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 import { Link } from '@@/Link';
 
 import { helper } from './columns.helper';
 import { name } from './columns.name';
 
-export function useColumns(areStacksVisible: boolean) {
+export function useColumns() {
+  const hideStacksQuery = usePublicSettings<boolean>({
+    select: (settings) =>
+      settings.GlobalDeploymentOptions.hideStacksFunctionality,
+  });
+
   return useMemo(
     () =>
       _.compact([
         name,
-        areStacksVisible &&
+        !hideStacksQuery.data &&
           helper.accessor('StackName', {
             header: 'Stack',
             cell: ({ getValue }) => getValue() || '-',
@@ -53,6 +59,6 @@ export function useColumns(areStacksVisible: boolean) {
           cell: ({ getValue }) => humanize(getValue()),
         }),
       ]),
-    [areStacksVisible]
+    [hideStacksQuery.data]
   );
 }

app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx

@@ -11,7 +11,7 @@ import {
 } from '@@/datatables/types';
 
 import { NamespaceApp } from './types';
-import { columns } from './columns';
+import { useColumns } from './columns';
 
 interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
 
@@ -32,6 +32,7 @@ export function NamespaceAppsDatatable({
     })
   );
   useRepeater(tableState.autoRefreshRate, onRefresh);
+  const columns = useColumns();
 
   return (
     <Datatable

app/react/kubernetes/namespaces/ItemView/columns.tsx

@@ -1,6 +1,9 @@
 import { createColumnHelper } from '@tanstack/react-table';
+import _ from 'lodash';
+import { useMemo } from 'react';
 
 import { humanize, truncate } from '@/portainer/filters/filters';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 import { Link } from '@@/Link';
 import { ExternalBadge } from '@@/Badge/ExternalBadge';
@@ -12,45 +15,59 @@ import { NamespaceApp } from './types';
 
 const columnHelper = createColumnHelper<NamespaceApp>();
 
-export const columns = [
+export function useColumns() {
-  columnHelper.accessor('Name', {
+  const hideStacksQuery = usePublicSettings<boolean>({
-    header: 'Name',
+    select: (settings) =>
-    cell: ({ row: { original: item } }) => (
+      settings.GlobalDeploymentOptions.hideStacksFunctionality,
-      <>
+  });
-        <Link
+
-          to="kubernetes.applications.application"
+  return useMemo(
-          params={{ name: item.Name, namespace: item.ResourcePool }}
+    () =>
-          data-cy={`application-link-${item.Name}`}
+      _.compact([
-        >
+        columnHelper.accessor('Name', {
-          {item.Name}
+          header: 'Name',
-        </Link>
+          cell: ({ row: { original: item } }) => (
-        {isExternalApplication({ metadata: item.Metadata }) && (
+            <>
-          <div className="ml-2">
+              <Link
-            <ExternalBadge />
+                to="kubernetes.applications.application"
-          </div>
+                params={{ name: item.Name, namespace: item.ResourcePool }}
-        )}
+                data-cy={`application-link-${item.Name}`}
-      </>
+              >
-    ),
+                {item.Name}
-  }),
+              </Link>
-  columnHelper.accessor('StackName', {
+              {isExternalApplication({ metadata: item.Metadata }) && (
-    header: 'Stack',
+                <div className="ml-2">
-    cell: ({ getValue }) => getValue() || '-',
+                  <ExternalBadge />
-  }),
+                </div>
-  columnHelper.accessor('Image', {
+              )}
-    header: 'Image',
+            </>
-    cell: ({ row: { original: item } }) => (
+          ),
-      <>
+        }),
-        {truncate(item.Image, 64)}
+        !hideStacksQuery.data &&
-        {item.Containers?.length > 1 && <>+ {item.Containers.length - 1}</>}
+          columnHelper.accessor('StackName', {
-      </>
+            header: 'Stack',
-    ),
+            cell: ({ getValue }) => getValue() || '-',
-  }),
+          }),
-  columnHelper.accessor('CPU', {
+        columnHelper.accessor('Image', {
-    header: 'CPU',
+          header: 'Image',
-    cell: ({ getValue }) => cpuHumanValue(getValue()),
+          cell: ({ row: { original: item } }) => (
-  }),
+            <>
-  columnHelper.accessor('Memory', {
+              {truncate(item.Image, 64)}
-    header: 'Memory',
+              {item.Containers?.length > 1 && (
-    cell: ({ getValue }) => humanize(getValue()),
+                <>+ {item.Containers.length - 1}</>
-  }),
+              )}
-];
+            </>
+          ),
+        }),
+        columnHelper.accessor('CPU', {
+          header: 'CPU',
+          cell: ({ getValue }) => cpuHumanValue(getValue()),
+        }),
+        columnHelper.accessor('Memory', {
+          header: 'Memory',
+          cell: ({ getValue }) => humanize(getValue()),
+        }),
+      ]),
+    [hideStacksQuery.data]
+  );
+}