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

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

diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentActions.tsx
index d34452ad1..56ebea423 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"
         >
           <Button color="none" title="Browse Snapshot">
             <Icon icon={Search} className="searchIcon" />
diff --git a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx b/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/EnvironmentsDatatable.tsx
index 955cc6f67..ab773ef5b 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 0886155ce..e29e7ec12 100644
--- a/app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/LogsActions.tsx
+++ b/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}