From 659abe553d1059c035e67a76173bcde77650c6d7 Mon Sep 17 00:00:00 2001
From: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Date: Tue, 21 May 2024 09:40:11 +1200
Subject: [PATCH] fix(edge/stack): edge stack env table pagination and action
 [EE-6836] (#11837)

---
 .../EnvironmentsDatatable/EnvironmentActions.tsx      |  6 +++---
 .../EnvironmentsDatatable/EnvironmentsDatatable.tsx   |  9 +++++++--
 .../ItemView/EnvironmentsDatatable/LogsActions.tsx    | 11 +++++++----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
index 170c485eb..15db06875 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
+++ b/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">
-      {environment.Snapshots.length > 0 && (
+    <div>
+      {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"
           data-cy="browse-snapshot-link"
         >
           <Button
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
index 4e9cbe1c3..d53f3fa00 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
+++ b/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,
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
index cc714e369..35bc7d143 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
+++ b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
@@ -35,7 +35,8 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
   return (
     <>
       <Button
-        color="none"
+        className="p-0"
+        color="link"
         title="Retrieve logs"
         onClick={handleCollectLogs}
         data-cy="edge-stack-logs-collect-button"
@@ -48,11 +49,12 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         />
       </Button>
       <Button
-        color="none"
-        data-cy="edge-stack-logs-download-button"
+        className="p-0"
+        color="link"
         title="Download logs"
         disabled={status !== 'collected'}
         onClick={handleDownloadLogs}
+        data-cy="edge-stack-logs-download-button"
       >
         <Icon
           icon={clsx({
@@ -62,7 +64,8 @@ export function LogsActions({ environmentId, edgeStackId }: Props) {
         />
       </Button>
       <Button
-        color="none"
+        className="p-0"
+        color="link"
         title="Delete logs"
         disabled={status !== 'collected'}
         onClick={handleDeleteLogs}