diff --git a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
index dd29a0b784..65ef0399bc 100644
--- a/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/ArchiveRepo.tsx
@@ -62,30 +62,29 @@ const ArchiveRepo: FC<Props> = ({ confirmDialog = true, repository, archiveRepo,
     return null;
   }
 
-  if (showConfirmAlert) {
-    return (
-      <ConfirmAlert
-        title={t("archiveRepo.confirmAlert.title")}
-        message={t("archiveRepo.confirmAlert.message")}
-        buttons={[
-          {
-            className: "is-outlined",
-            label: t("archiveRepo.confirmAlert.submit"),
-            onClick: () => archiveRepoCallback(),
-          },
-          {
-            label: t("archiveRepo.confirmAlert.cancel"),
-            onClick: () => null,
-          },
-        ]}
-        close={() => setShowConfirmAlert(false)}
-      />
-    );
-  }
+  const confirmAlert = (
+    <ConfirmAlert
+      title={t("archiveRepo.confirmAlert.title")}
+      message={t("archiveRepo.confirmAlert.message")}
+      buttons={[
+        {
+          className: "is-outlined",
+          label: t("archiveRepo.confirmAlert.submit"),
+          onClick: () => archiveRepoCallback(),
+        },
+        {
+          label: t("archiveRepo.confirmAlert.cancel"),
+          onClick: () => null,
+        },
+      ]}
+      close={() => setShowConfirmAlert(false)}
+    />
+  );
 
   return (
     <>
       <ErrorNotification error={error} />
+      {showConfirmAlert && confirmAlert}
       <Level
         left={
           <p>
diff --git a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
index e6fdac7edc..c7524b4c7a 100644
--- a/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/UnarchiveRepo.tsx
@@ -62,30 +62,29 @@ const UnarchiveRepo: FC<Props> = ({ confirmDialog = true, repository, unarchiveR
     return null;
   }
 
-  if (showConfirmAlert) {
-    return (
-      <ConfirmAlert
-        title={t("unarchiveRepo.confirmAlert.title")}
-        message={t("unarchiveRepo.confirmAlert.message")}
-        buttons={[
-          {
-            className: "is-outlined",
-            label: t("unarchiveRepo.confirmAlert.submit"),
-            onClick: () => unarchiveRepoCallback(),
-          },
-          {
-            label: t("unarchiveRepo.confirmAlert.cancel"),
-            onClick: () => null,
-          },
-        ]}
-        close={() => setShowConfirmAlert(false)}
-      />
-    );
-  }
+  const confirmAlert = (
+    <ConfirmAlert
+      title={t("unarchiveRepo.confirmAlert.title")}
+      message={t("unarchiveRepo.confirmAlert.message")}
+      buttons={[
+        {
+          className: "is-outlined",
+          label: t("unarchiveRepo.confirmAlert.submit"),
+          onClick: () => unarchiveRepoCallback(),
+        },
+        {
+          label: t("unarchiveRepo.confirmAlert.cancel"),
+          onClick: () => null,
+        },
+      ]}
+      close={() => setShowConfirmAlert(false)}
+    />
+  );
 
   return (
     <>
       <ErrorNotification error={error} />
+      {showConfirmAlert && confirmAlert}
       <Level
         left={
           <p>