fix(docker): missing browse volume option [EE-7179] (#11901)

app/react/docker/components/FilesTable/FilesTable.tsx

@@ -8,6 +8,7 @@ import { BasicTableSettings } from '@@/datatables/types';
 import { Button } from '@@/buttons';
 import { TableState } from '@@/datatables/useTableState';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { FileData } from './types';
 import { columns } from './columns';
@@ -86,15 +87,17 @@ export function FilesTable({
           Dir: false,
         },
       }}
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
-        table: 'files',
+        withMeta({
-        isEdit,
+          table: 'files',
-        setIsEdit,
+          isEdit,
-        onRename,
+          setIsEdit,
-        onBrowse,
+          onRename,
-        onDownload,
+          onBrowse,
-        onDelete,
+          onDownload,
-      })}
+          onDelete,
+        })
+      )}
       disableSelect
       data-cy="files-datatable"
       renderTableActions={() => {

app/react/docker/containers/ItemView/ContainerNetworksDatatable/ContainerNetworksDatatable.tsx

@@ -6,6 +6,7 @@ import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
 import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { ContainerListViewModel } from '../../types';
 
@@ -60,10 +61,12 @@ export function ContainerNetworksDatatable({
           selectedNetworks={networks.map((n) => n.id)}
         />
       }
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
-        table: 'container-networks',
+        withMeta({
-        containerId: container.Id,
+          table: 'container-networks',
-      })}
+          containerId: container.Id,
+        })
+      )}
       data-cy="container-networks-datatable"
     />
   );

app/react/docker/swarm/SwarmView/NodesDatatable/NodesDatatable.tsx

@@ -13,6 +13,7 @@ import { useTableState } from '@@/datatables/useTableState';
 import { useRepeater } from '@@/datatables/useRepeater';
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { useColumns } from './columns';
 
@@ -52,10 +53,12 @@ export function NodesDatatable({
       dataset={dataset || []}
       isLoading={!dataset}
       settingsManager={tableState}
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
-        table: 'nodes',
+        withMeta({
-        haveAccessToNode,
+          table: 'nodes',
-      })}
+          haveAccessToNode,
+        })
+      )}
       renderTableSettings={() => (
         <TableSettingsMenu>
           <TableSettingsMenuAutoRefresh

app/react/docker/volumes/ListView/VolumesDatatable/VolumesDatatable.tsx

@@ -14,6 +14,7 @@ import { useRepeater } from '@@/datatables/useRepeater';
 import { useTableState } from '@@/datatables/useTableState';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
 import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { DecoratedVolume } from '../types';
 
@@ -69,16 +70,13 @@ export function VolumesDatatable({
           />
         </TableSettingsMenu>
       )}
-      extendTableOptions={
+      extendTableOptions={mergeOptions(
-        (withMeta({
+        withMeta({
           table: 'volumes',
           isBrowseVisible,
         }),
-        withColumnFilters(
+        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
-          tableState.columnFilters,
+      )}
-          tableState.setColumnFilters
-        ))
-      }
       data-cy="docker-volumes-datatable"
     />
   );

app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx

@@ -7,6 +7,7 @@ import { useEnvironmentList } from '@/react/portainer/environments/queries';
 import { Datatable } from '@@/datatables';
 import { useTableState } from '@@/datatables/useTableState';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { EdgeJob, JobResult, LogsStatus } from '../../types';
 import { useJobResults } from '../../queries/jobResults/useJobResults';
@@ -68,10 +69,12 @@ export function ResultsDatatable({ jobId }: { jobId: EdgeJob['Id'] }) {
       title="Results"
       titleIcon={List}
       settingsManager={tableState}
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
-        table: 'edge-job-results',
+        withMeta({
-        jobId,
+          table: 'edge-job-results',
-      })}
+          jobId,
+        })
+      )}
       data-cy="edge-job-results-datatable"
     />
   );

app/react/portainer/access-control/AccessManagement/AccessDatatable/AccessDatatable.tsx

@@ -14,6 +14,7 @@ import { useTableState } from '@@/datatables/useTableState';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
 import { Button } from '@@/buttons';
 import { TextTip } from '@@/Tip/TextTip';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { useColumns } from './columns/useColumns';
 import { Access } from './types';
@@ -55,10 +56,12 @@ export function AccessDatatable({
       isLoading={!dataset}
       columns={columns}
       settingsManager={tableState}
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
-        table: 'access-table',
+        withMeta({
-        roles: rolesState,
+          table: 'access-table',
-      })}
+          roles: rolesState,
+        })
+      )}
       isRowSelectable={({ original: item }) => !inheritFrom || !item.Inherited}
       renderTableActions={(selectedItems) => (
         <>

app/react/portainer/registries/CreateView/GitlabProjectsTable/GitlabProjectsTable.tsx

@@ -5,6 +5,7 @@ import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
 import { Datatable } from '@@/datatables';
 import { withControlledSelected } from '@@/datatables/extend-options/withControlledSelected';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { RegistryGitlabProject } from '../../types/gitlabProject';
 
@@ -40,9 +41,11 @@ export function GitlabProjectTable({
       settingsManager={tableState}
       title="Gitlab projects"
       titleIcon={ListIcon}
-      extendTableOptions={withControlledSelected(
+      extendTableOptions={mergeOptions(
-        (ids) => onChange(dataset.filter(({ Id }) => ids.includes(`${Id}`))),
+        withControlledSelected(
-        value.map(({ Id }) => `${Id}`)
+          (ids) => onChange(dataset.filter(({ Id }) => ids.includes(`${Id}`))),
+          value.map(({ Id }) => `${Id}`)
+        )
       )}
       isRowSelectable={({ original: item }) => item.RegistryEnabled}
       data-cy="gitlab-projects-datatable"

app/react/portainer/registries/repositories/ItemView/TagsDatatable/TagsDatatable.tsx

@@ -5,6 +5,7 @@ import { Datatable } from '@@/datatables';
 import { useTableStateWithStorage } from '@@/datatables/useTableState';
 import { DeleteButton } from '@@/buttons/DeleteButton';
 import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
 
 import { Tag } from './types';
 import { useColumns } from './columns/useColumns';
@@ -45,13 +46,15 @@ export function TagsDatatable({
         )
       }
       getRowId={(tag) => tag.Name}
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
-        onUpdate: async () => {
+        withMeta({
-          await onRetag(updatesState.updates);
+          onUpdate: async () => {
-          updatesState.clear();
+            await onRetag(updatesState.updates);
-        },
+            updatesState.clear();
-        table: 'registry-repository-tags',
+          },
-      })}
+          table: 'registry-repository-tags',
+        })
+      )}
       data-cy="registry-tags-datatable"
     />
   );