From 9061a24267f0b562c5304f0d897813fed88055c7 Mon Sep 17 00:00:00 2001
From: Cyrus Goh <hello@cyrusgoh.com>
Date: Thu, 19 Dec 2024 19:20:16 -0800
Subject: [PATCH] add refresh confirm dialog (#6309)

---
 .../projects/status/ProjectResources.svelte   | 11 ++++-
 .../status/RefreshConfirmDialog.svelte        | 49 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 web-admin/src/features/projects/status/RefreshConfirmDialog.svelte

diff --git a/web-admin/src/features/projects/status/ProjectResources.svelte b/web-admin/src/features/projects/status/ProjectResources.svelte
index 01e468c41c5..e90f87fbfd8 100644
--- a/web-admin/src/features/projects/status/ProjectResources.svelte
+++ b/web-admin/src/features/projects/status/ProjectResources.svelte
@@ -10,11 +10,13 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import Button from "web-common/src/components/button/Button.svelte";
   import ProjectResourcesTable from "./ProjectResourcesTable.svelte";
+  import RefreshConfirmDialog from "./RefreshConfirmDialog.svelte";
 
   const queryClient = useQueryClient();
   const createTrigger = createRuntimeServiceCreateTrigger();
 
   let isReconciling = false;
+  let isRefreshConfirmDialogOpen = false;
 
   $: ({ instanceId } = $runtime);
 
@@ -75,7 +77,9 @@
     <h2 class="text-lg font-medium">Resources</h2>
     <Button
       type="secondary"
-      on:click={refreshAllSourcesAndModels}
+      on:click={() => {
+        isRefreshConfirmDialogOpen = true;
+      }}
       disabled={isReconciling}
     >
       {#if isReconciling}
@@ -95,3 +99,8 @@
     <ProjectResourcesTable data={$resources.data} />
   {/if}
 </section>
+
+<RefreshConfirmDialog
+  bind:open={isRefreshConfirmDialogOpen}
+  onRefresh={refreshAllSourcesAndModels}
+/>
diff --git a/web-admin/src/features/projects/status/RefreshConfirmDialog.svelte b/web-admin/src/features/projects/status/RefreshConfirmDialog.svelte
new file mode 100644
index 00000000000..a07892f18a5
--- /dev/null
+++ b/web-admin/src/features/projects/status/RefreshConfirmDialog.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+  } from "@rilldata/web-common/components/alert-dialog/index.js";
+  import { Button } from "@rilldata/web-common/components/button/index.js";
+
+  export let open = false;
+  export let onRefresh: () => void;
+
+  async function handleRefresh() {
+    try {
+      onRefresh();
+      open = false;
+    } catch (error) {
+      console.error("Failed to refresh resource:", error);
+    }
+  }
+</script>
+
+<AlertDialog bind:open>
+  <AlertDialogTrigger asChild>
+    <div class="hidden"></div>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Refresh all sources and models?</AlertDialogTitle>
+      <AlertDialogDescription>
+        <div class="mt-1">
+          This will refresh all sources and models in the project.
+        </div>
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <Button
+        type="plain"
+        on:click={() => {
+          open = false;
+        }}>Cancel</Button
+      >
+      <Button type="primary" on:click={handleRefresh}>Yes, refresh</Button>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>