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,7 +87,8 @@ export function FilesTable({
           Dir: false,
         },
       }}
-      extendTableOptions={withMeta({
+      extendTableOptions={mergeOptions(
+        withMeta({
           table: 'files',
           isEdit,
           setIsEdit,
@@ -94,7 +96,8 @@ export function FilesTable({
           onBrowse,
           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(
+        withMeta({
           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(
+        withMeta({
           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(
+        withMeta({
           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(
+        withMeta({
           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(
+        withControlledSelected(
           (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(
+        withMeta({
           onUpdate: async () => {
             await onRetag(updatesState.updates);
             updatesState.clear();
           },
           table: 'registry-repository-tags',
-      })}
+        })
+      )}
       data-cy="registry-tags-datatable"
     />
   );