add refresh confirm dialog (#6309)

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

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>