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,7 +15,15 @@ import { NamespaceApp } from './types';
 
 const columnHelper = createColumnHelper<NamespaceApp>();
 
-export const columns = [
+export function useColumns() {
+  const hideStacksQuery = usePublicSettings<boolean>({
+    select: (settings) =>
+      settings.GlobalDeploymentOptions.hideStacksFunctionality,
+  });
+
+  return useMemo(
+    () =>
+      _.compact([
         columnHelper.accessor('Name', {
           header: 'Name',
           cell: ({ row: { original: item } }) => (
@@ -32,6 +43,7 @@ export const columns = [
             </>
           ),
         }),
+        !hideStacksQuery.data &&
           columnHelper.accessor('StackName', {
             header: 'Stack',
             cell: ({ getValue }) => getValue() || '-',
@@ -41,7 +53,9 @@ export const columns = [
           cell: ({ row: { original: item } }) => (
             <>
               {truncate(item.Image, 64)}
-        {item.Containers?.length > 1 && <>+ {item.Containers.length - 1}</>}
+              {item.Containers?.length > 1 && (
+                <>+ {item.Containers.length - 1}</>
+              )}
             </>
           ),
         }),
@@ -53,4 +67,7 @@ export const columns = [
           header: 'Memory',
           cell: ({ getValue }) => humanize(getValue()),
         }),
-];
+      ]),
+    [hideStacksQuery.data]
+  );
+}