move refresh button out

Signed-off-by: Lyon Lu <lyon@union.ai>

Author: lyonlu13

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>
     </>

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>
     );
   }