From 3f78bee2b3e0812f053bfefbd16778bd305e3f9e Mon Sep 17 00:00:00 2001
From: Future-Outlier <eric901201@gmail.com>
Date: Wed, 27 Nov 2024 22:02:55 +0800
Subject: [PATCH 1/6] "Use Yi-Cheng Lu's code"

Signed-off-by: Future-Outlier <eric901201@gmail.com>
Co-authored-by: Yicheng-Lu-llll <luyc58576@gmail.com>
---
 .../ExecutionDetailsActions/FlyteDeckButton.tsx |  1 -
 .../ExecutionDetails/ExecutionNodeDeck.tsx      | 17 +++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
index dbff7814a..b4e7c23b8 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
@@ -58,7 +58,6 @@ export const FlyteDeckButton: FC<FlyteDeckButtonProps> = ({
         variant="outlined"
         color="primary"
         onClick={() => setShowDeck(true)}
-        disabled={phase !== NodeExecutionPhase.SUCCEEDED}
       >
         {flyteDeckText || t('flyteDeck')}
       </Button>
diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
index 105c05f1a..857a74984 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Core from '@clients/common/flyteidl/core';
+import NotFoundError from '@clients/common/Errors/NotFoundError';
 import { LoadingSpinner } from '@clients/primitives/LoadingSpinner';
 import { useDownloadLink } from '../../hooks/useDataProxy';
 import { WaitForData } from '../../common/WaitForData';
@@ -27,6 +28,22 @@ export const ExecutionNodeDeck: React.FC<{
     'allow-downloads',
   ].join(' ');
 
+  if (downloadLink?.lastError instanceof NotFoundError) {
+    return (
+      <div style={{ textAlign: 'center' }}>
+        <h1>The deck will be ready soon. Please try again later.</h1>
+        <p>
+          If you're using the real-time deck, it's because the 'publish'
+          function has not been invoked yet.
+        </p>
+        <p>
+          If you're not using the real-time deck, it's because the corresponding
+          task is still in progress.
+        </p>
+      </div>
+    );
+  }
+
   return (
     <WaitForData {...downloadLink} loadingComponent={LoadingSpinner}>
       <iframe

From 5401c88da717fd4d35a3d0ba194d3e0f3bfdd80e Mon Sep 17 00:00:00 2001
From: Future-Outlier <eric901201@gmail.com>
Date: Tue, 3 Dec 2024 17:27:09 +0800
Subject: [PATCH 2/6] Add Refresh Bottom

Signed-off-by: Future-Outlier <eric901201@gmail.com>
---
 .../ExecutionDetails/ExecutionNodeDeck.tsx       | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
index 857a74984..5b7fcf0fc 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
@@ -40,6 +40,22 @@ export const ExecutionNodeDeck: React.FC<{
           If you're not using the real-time deck, it's because the corresponding
           task is still in progress.
         </p>
+        <button
+          onClick={() => window.location.reload()}
+          style={{
+            marginTop: '20px',
+            padding: '10px 20px',
+            fontSize: '16px',
+            fontWeight: 'bold',
+            color: '#fff',
+            backgroundColor: '#a31aff',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+          }}
+        >
+          Refresh
+        </button>
       </div>
     );
   }

From f5d884feaf3175ddb15126efadcbae1cfeaac8ed Mon Sep 17 00:00:00 2001
From: Lyon Lu <lyon@union.ai>
Date: Thu, 5 Dec 2024 09:51:40 +0800
Subject: [PATCH 3/6] refresh fix

Signed-off-by: Lyon Lu <lyon@union.ai>
---
 .../Executions/ExecutionDetails/ExecutionNodeDeck.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
index 5b7fcf0fc..d19b5f7af 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
@@ -33,15 +33,15 @@ export const ExecutionNodeDeck: React.FC<{
       <div style={{ textAlign: 'center' }}>
         <h1>The deck will be ready soon. Please try again later.</h1>
         <p>
-          If you're using the real-time deck, it's because the 'publish'
-          function has not been invoked yet.
+          If you're using the real-time deck, it's because the 'publish' function has not been
+          invoked yet.
         </p>
         <p>
-          If you're not using the real-time deck, it's because the corresponding
-          task is still in progress.
+          If you're not using the real-time deck, it's because the corresponding task is still in
+          progress.
         </p>
         <button
-          onClick={() => window.location.reload()}
+          onClick={() => downloadLink.fetch()}
           style={{
             marginTop: '20px',
             padding: '10px 20px',

From 290f3aee67a00d132c0d2d18a9b030f4ae133c30 Mon Sep 17 00:00:00 2001
From: Lyon Lu <lyon@union.ai>
Date: Thu, 5 Dec 2024 10:41:50 +0800
Subject: [PATCH 4/6] move refresh button out

Signed-off-by: Lyon Lu <lyon@union.ai>
---
 .../FlyteDeckButton.tsx                       | 19 ++++++++++++------
 .../ExecutionDetails/ExecutionNodeDeck.tsx    | 20 ++-----------------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
index b4e7c23b8..9ed232123 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
@@ -8,6 +8,8 @@ import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import DialogContent from '@mui/material/DialogContent';
+import { useDownloadLink } from '@clients/oss-console/components/hooks/useDataProxy';
+import RefreshIcon from '@mui/icons-material/Refresh';
 import t from '../strings';
 import { WorkflowNodeExecution } from '../../contexts';
 import { NodeExecutionPhase } from '../../../../models/Execution/enums';
@@ -52,13 +54,11 @@ export const FlyteDeckButton: FC<FlyteDeckButtonProps> = ({
     setSetFullScreen(!fullScreen);
   };
 
+  const downloadLink = useDownloadLink(nodeExecution?.id);
+
   return nodeExecution?.closure?.deckUri ? (
     <>
-      <Button
-        variant="outlined"
-        color="primary"
-        onClick={() => setShowDeck(true)}
-      >
+      <Button variant="outlined" color="primary" onClick={() => setShowDeck(true)}>
         {flyteDeckText || t('flyteDeck')}
       </Button>
       <Dialog
@@ -90,10 +90,17 @@ export const FlyteDeckButton: FC<FlyteDeckButtonProps> = ({
                 fontSize: '24px',
                 lineHeight: '32px',
                 marginBlock: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: 1,
               }}
               py={2}
             >
               {t('flyteDeck')}
+              <IconButton onClick={() => downloadLink.fetch()}>
+                <RefreshIcon />
+              </IconButton>
             </Typography>
           </Grid>
           <Grid item>
@@ -108,7 +115,7 @@ export const FlyteDeckButton: FC<FlyteDeckButtonProps> = ({
             overflow: 'hidden',
           }}
         >
-          <ExecutionNodeDeck nodeExecutionId={nodeExecution.id} />
+          <ExecutionNodeDeck nodeExecutionId={nodeExecution.id} downloadLink={downloadLink} />
         </DialogContent>
       </Dialog>
     </>
diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
index d19b5f7af..d37419f1a 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
@@ -9,8 +9,8 @@ import { WaitForData } from '../../common/WaitForData';
 export const ExecutionNodeDeck: React.FC<{
   nodeExecutionId: Core.NodeExecutionIdentifier;
   className?: string;
-}> = ({ nodeExecutionId, className = '' }) => {
-  const downloadLink = useDownloadLink(nodeExecutionId);
+  downloadLink: ReturnType<typeof useDownloadLink>;
+}> = ({ className = '', downloadLink }) => {
   const iFrameSrc = downloadLink?.value?.signedUrl?.[0];
 
   // Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox
@@ -40,22 +40,6 @@ export const ExecutionNodeDeck: React.FC<{
           If you're not using the real-time deck, it's because the corresponding task is still in
           progress.
         </p>
-        <button
-          onClick={() => downloadLink.fetch()}
-          style={{
-            marginTop: '20px',
-            padding: '10px 20px',
-            fontSize: '16px',
-            fontWeight: 'bold',
-            color: '#fff',
-            backgroundColor: '#a31aff',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-          }}
-        >
-          Refresh
-        </button>
       </div>
     );
   }

From 8a322373e835161d14a702fbac1348fb2174d7ab Mon Sep 17 00:00:00 2001
From: Future-Outlier <eric901201@gmail.com>
Date: Wed, 22 Jan 2025 11:04:18 +0800
Subject: [PATCH 5/6] update my code

Signed-off-by: Future-Outlier <eric901201@gmail.com>
---
 .../ExecutionDetailsActions/FlyteDeckButton.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
index 9ed232123..110699a94 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions/FlyteDeckButton.tsx
@@ -97,7 +97,7 @@ export const FlyteDeckButton: FC<FlyteDeckButtonProps> = ({
               }}
               py={2}
             >
-              {t('flyteDeck')}
+              {flyteDeckText || t('flyteDeck')}
               <IconButton onClick={() => downloadLink.fetch()}>
                 <RefreshIcon />
               </IconButton>

From bb436758990e272a371378eed2ff98759dff6dc1 Mon Sep 17 00:00:00 2001
From: Carina Ursu <carina@union.ai>
Date: Thu, 30 Jan 2025 10:33:05 -0800
Subject: [PATCH 6/6] handle 404 vs 500 error rendering

Signed-off-by: Carina Ursu <carina@union.ai>
---
 .../Executions/ExecutionDetails/ExecutionNodeDeck.tsx      | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
index d37419f1a..dbafc5ca6 100644
--- a/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
+++ b/packages/oss-console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx
@@ -28,7 +28,11 @@ export const ExecutionNodeDeck: React.FC<{
     'allow-downloads',
   ].join(' ');
 
-  if (downloadLink?.lastError instanceof NotFoundError) {
+  /**
+   * if the download link query has an error other than 404, we show a 'pretty' message to the user.
+   * else: we show the built in DataError handler passed to the WaitForQuery component.
+   */
+  if (downloadLink?.lastError && !(downloadLink?.lastError instanceof NotFoundError)) {
     return (
       <div style={{ textAlign: 'center' }}>
         <h1>The deck will be ready soon. Please try again later.</h1>
@@ -44,6 +48,7 @@ export const ExecutionNodeDeck: React.FC<{
     );
   }
 
+  // 404 or no error case
   return (
     <WaitForData {...downloadLink} loadingComponent={LoadingSpinner}>
       <iframe