fix(edge/stack): edge stack env table pagination and action [EE-6836] (#11836)

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx

@@ -19,12 +19,12 @@ export function EnvironmentActions({ environment }: Props) {
   } = useCurrentStateAndParams();
 
   return (
-    <div className="space-x-2">
+    <div>
-      {environment.Snapshots.length > 0 && (
+      {environment.Snapshots.length > 0 && environment.Edge.AsyncMode && (
         <Link
           to="edge.browse.containers"
           params={{ environmentId: environment.Id, edgeStackId }}
-          className="!text-inherit hover:!no-underline"
+          className="hover:!no-underline"
         >
           <Button color="none" title="Browse Snapshot">
             <Icon icon={Search} className="searchIcon" />

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx

@@ -9,14 +9,19 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { Datatable } from '@@/datatables';
-import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
 import { PortainerSelect } from '@@/form-components/PortainerSelect';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useEdgeStack } from '../../queries/useEdgeStack';
 
 import { EdgeStackEnvironment } from './types';
 import { columns } from './columns';
 
+const tableKey = 'edge-stacks-environment';
+
+const settingsStore = createPersistedStore(tableKey);
+
 export function EnvironmentsDatatable() {
   const {
     params: { stackId },
@@ -40,7 +45,7 @@ export function EnvironmentsDatatable() {
     'status',
     (value) => (value ? parseInt(value, 10) : undefined)
   );
-  const tableState = useTableStateWithoutStorage('name');
+  const tableState = useTableState(settingsStore, tableKey);
   const environmentsQuery = useEnvironmentList({
     pageLimit: tableState.pageSize,
     page: page + 1,

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx

@@ -34,7 +34,12 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
 
   return (
     <>
-      <Button color="none" title="Retrieve logs" onClick={handleCollectLogs}>
+      <Button
+        className="p-0"
+        color="link"
+        title="Retrieve logs"
+        onClick={handleCollectLogs}
+      >
         <Icon
           icon={clsx({
             'file-text': !collecting,
@@ -43,7 +48,8 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         />
       </Button>
       <Button
-        color="none"
+        className="p-0"
+        color="link"
         title="Download logs"
         disabled={status !== 'collected'}
         onClick={handleDownloadLogs}
@@ -56,7 +62,8 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         />
       </Button>
       <Button
-        color="none"
+        className="p-0"
+        color="link"
         title="Delete logs"
         disabled={status !== 'collected'}
         onClick={handleDeleteLogs}