Fix

Author: krystian-panek-vmltech

ui.frontend/src/components/ExecutionAbortButton.tsx

@@ -63,36 +63,32 @@ const ExecutionAbortButton: React.FC<ExecutionAbortButtonProps> = ({ execution,
     }
   };
 
-  const renderAbortDialog = useCallback(() => (
-    <>
-      <Heading>
-        <Text>Confirmation</Text>
-      </Heading>
-      <Divider />
-      <Content>
-        <p>This action will abort current code execution.</p>
-        <p>Be aware that aborting execution may leave data in an inconsistent state.</p>
-      </Content>
-      <ButtonGroup>
-        <Button variant="secondary" onPress={() => setShowDialog(false)} isDisabled={isAborting}>
-          <Cancel />
-          <Text>Cancel</Text>
-        </Button>
-        <Button variant="negative" style="fill" onPress={onAbort} isPending={isAborting}>
-          <StopCircle />
-          <Text>Abort</Text>
-        </Button>
-      </ButtonGroup>
-    </>
-  );
-
   return (
     <DialogTrigger isOpen={showDialog} onOpenChange={setShowDialog}>
       <Button variant="negative" isDisabled={!execution || !isExecutionPending(execution.status) || isAborting} onPress={() => setShowDialog(true)}>
         <StopCircle />
         <Text>Abort</Text>
       </Button>
-      <Dialog>{renderAbortDialog()}</Dialog>
+      <Dialog>
+        <Heading>
+          <Text>Confirmation</Text>
+        </Heading>
+        <Divider />
+        <Content>
+          <p>This action will abort current code execution.</p>
+          <p>Be aware that aborting execution may leave data in an inconsistent state.</p>
+        </Content>
+        <ButtonGroup>
+          <Button variant="secondary" onPress={() => setShowDialog(false)} isDisabled={isAborting}>
+            <Cancel />
+            <Text>Cancel</Text>
+          </Button>
+          <Button variant="negative" style="fill" onPress={onAbort} isPending={isAborting}>
+            <StopCircle />
+            <Text>Abort</Text>
+          </Button>
+        </ButtonGroup>
+      </Dialog>
     </DialogTrigger>
   );
 };

ui.frontend/src/components/ScriptSynchronizeButton.tsx

@@ -31,40 +31,36 @@ const ScriptSynchronizeButton: React.FC<ScriptSynchronizeButtonProps> = ({ selec
     }
   };
 
-  const renderSyncDialog = () => (
-    <>
-      <Heading>
-        <Text>Confirmation</Text>
-      </Heading>
-      <Divider />
-      <Content>
-        <p>
-          This action will synchronize <strong>all scripts</strong> between the author and publish instances. This ensures consistency across the whole environment.
-        </p>
-        <p>
-          Notice that <strong>both enabled and disabled</strong> scripts will be synchronized.
-        </p>
-      </Content>
-      <ButtonGroup>
-        <Button variant="secondary" onPress={() => setSyncDialogOpen(false)} isDisabled={isLoading}>
-          <Cancel />
-          <Text>Cancel</Text>
-        </Button>
-        <Button variant="negative" style="fill" onPress={handleSyncConfirm} isPending={isLoading}>
-          <Checkmark />
-          <Text>Confirm</Text>
-        </Button>
-      </ButtonGroup>
-    </>
-  );
-
   return (
     <DialogTrigger isOpen={syncDialogOpen} onOpenChange={setSyncDialogOpen}>
       <Button variant="primary" onPress={() => setSyncDialogOpen(true)} isDisabled={selectedKeys.length > 0}>
         <UploadToCloud />
         <Text>Synchronize</Text>
       </Button>
-      <Dialog>{renderSyncDialog()}</Dialog>
+      <Dialog>
+        <Heading>
+          <Text>Confirmation</Text>
+        </Heading>
+        <Divider />
+        <Content>
+          <p>
+            This action will synchronize <strong>all scripts</strong> between the author and publish instances. This ensures consistency across the whole environment.
+          </p>
+          <p>
+            Notice that <strong>both enabled and disabled</strong> scripts will be synchronized.
+          </p>
+        </Content>
+        <ButtonGroup>
+          <Button variant="secondary" onPress={() => setSyncDialogOpen(false)} isDisabled={isLoading}>
+            <Cancel />
+            <Text>Cancel</Text>
+          </Button>
+          <Button variant="negative" style="fill" onPress={handleSyncConfirm} isPending={isLoading}>
+            <Checkmark />
+            <Text>Confirm</Text>
+          </Button>
+        </ButtonGroup>
+      </Dialog>
     </DialogTrigger>
   );
 };