convert select component, consolidate bookmark dialog (#5545)

* convert select component

* styling and type fix

* styling updates

* bookmark related cleanup

* type fixes

* binding fix, cron parsing, proto error

* remove log

* bookmark fix

* revert

* cleanup

* type fix

* cleanup

web-admin/src/features/bookmarks/BaseBookmarkForm.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { page } from "$app/stores";
-  import { useQueryClient } from "@rilldata/svelte-query";
   import type { BookmarkFormValues } from "@rilldata/web-admin/features/bookmarks/form-utils";
   import { getPrettySelectedTimeRange } from "@rilldata/web-admin/features/bookmarks/selectors";
   import ProjectAccessControls from "@rilldata/web-admin/features/projects/ProjectAccessControls.svelte";
@@ -16,11 +15,11 @@
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import type { createForm } from "svelte-forms-lib";
   import { InfoIcon } from "lucide-svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
 
   export let metricsViewName: string;
   export let formState: ReturnType<typeof createForm<BookmarkFormValues>>;
 
-  const queryClient = useQueryClient();
   $: dashboardStore = useDashboardStore(metricsViewName);
 
   let timeRange: V1TimeRange;
@@ -54,7 +53,7 @@ Managed bookmarks will be available to all viewers of this dashboard.`;
     bind:value={$form["displayName"]}
     errors={$errors["displayName"]}
     id="displayName"
-    label="Name"
+    label="Label"
   />
   <Input
     bind:value={$form["description"]}

web-admin/src/features/bookmarks/BookmarkDialog.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import BaseBookmarkForm from "@rilldata/web-admin/features/bookmarks/BaseBookmarkForm.svelte";
+  import type { BookmarkFormValues } from "@rilldata/web-admin/features/bookmarks/form-utils";
+  import { useProjectId } from "@rilldata/web-admin/features/projects/selectors";
+  import * as Dialog from "@rilldata/web-common/components/dialog-v2";
+  import {
+    createAdminServiceCreateBookmark,
+    createAdminServiceUpdateBookmark,
+    getAdminServiceListBookmarksQueryKey,
+  } from "@rilldata/web-admin/client";
+  import { Button } from "@rilldata/web-common/components/button";
+  import { getBookmarkDataForDashboard } from "@rilldata/web-admin/features/bookmarks/getBookmarkDataForDashboard";
+  import { eventBus } from "@rilldata/web-common/lib/event-bus/event-bus";
+  import { useDashboardStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
+  import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import type { BookmarkEntry } from "@rilldata/web-admin/features/bookmarks/selectors";
+  import { createForm } from "svelte-forms-lib";
+  import * as yup from "yup";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
+  import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
+
+  export let metricsViewName: string;
+  export let bookmark: BookmarkEntry | null = null;
+  export let onClose = () => {};
+
+  const StateManagers = getStateManagers();
+
+  const bookmarkCreator = createAdminServiceCreateBookmark();
+  const bookmarkUpdater = createAdminServiceUpdateBookmark();
+  const timeControlsStore = useTimeControlStore(StateManagers);
+
+  const formState = createForm<BookmarkFormValues>({
+    initialValues: {
+      displayName: bookmark?.resource.displayName ?? "Default Label",
+      description: bookmark?.resource.description ?? "",
+      shared: bookmark?.resource.shared ? "true" : "false",
+      filtersOnly: bookmark?.filtersOnly ?? false,
+      absoluteTimeRange: bookmark?.absoluteTimeRange ?? false,
+    },
+    validationSchema: yup.object({
+      displayName: yup.string().required("Required"),
+      description: yup.string(),
+    }),
+    onSubmit: async (values) => {
+      if (bookmark) {
+        await $bookmarkUpdater.mutateAsync({
+          data: {
+            bookmarkId: bookmark.resource.id,
+            displayName: values.displayName,
+            description: values.description,
+            shared: values.shared === "true",
+            data: getBookmarkDataForDashboard(
+              $dashboardStore,
+              values.filtersOnly,
+              values.absoluteTimeRange,
+              $timeControlsStore,
+            ),
+          },
+        });
+      } else {
+        await $bookmarkCreator.mutateAsync({
+          data: {
+            displayName: values.displayName,
+            description: values.description,
+            projectId: $projectId.data ?? "",
+            resourceKind: ResourceKind.MetricsView,
+            resourceName: metricsViewName,
+            shared: values.shared === "true",
+            data: getBookmarkDataForDashboard(
+              $dashboardStore,
+              values.filtersOnly,
+              values.absoluteTimeRange,
+              $timeControlsStore,
+            ),
+          },
+        });
+        handleReset();
+      }
+      onClose();
+
+      await queryClient.refetchQueries(
+        getAdminServiceListBookmarksQueryKey({
+          projectId: $projectId.data ?? "",
+          resourceKind: ResourceKind.MetricsView,
+          resourceName: metricsViewName,
+        }),
+      );
+      eventBus.emit("notification", {
+        message: bookmark ? "Bookmark updated" : "Bookmark created",
+      });
+    },
+  });
+
+  const { handleSubmit, handleReset } = formState;
+
+  $: ({ params } = $page);
+  $: dashboardStore = useDashboardStore(metricsViewName);
+  $: projectId = useProjectId(params.organization, params.project);
+</script>
+
+<Dialog.Root
+  open
+  onOpenChange={(o) => {
+    if (!o) onClose();
+  }}
+>
+  <Dialog.Content>
+    <Dialog.Header>
+      <Dialog.Title>
+        {bookmark ? "Edit bookmark" : "Bookmark current view"}
+      </Dialog.Title>
+    </Dialog.Header>
+
+    <BaseBookmarkForm {formState} {metricsViewName} />
+
+    <div class="flex flex-row mt-4 gap-2">
+      <div class="grow" />
+      <Button on:click={onClose} type="secondary">Cancel</Button>
+      <Button on:click={handleSubmit} type="primary">Save</Button>
+    </div>
+  </Dialog.Content>
+</Dialog.Root>

web-admin/src/features/bookmarks/Bookmarks.svelte

@@ -12,9 +12,8 @@
   } from "@rilldata/web-common/components/dropdown-menu";
   import { createBookmarkApplier } from "@rilldata/web-admin/features/bookmarks/applyBookmark";
   import BookmarksContent from "@rilldata/web-admin/features/bookmarks/BookmarksDropdownMenuContent.svelte";
-  import CreateBookmarkDialog from "@rilldata/web-admin/features/bookmarks/CreateBookmarkDialog.svelte";
+  import BookmarkDialog from "@rilldata/web-admin/features/bookmarks/BookmarkDialog.svelte";
   import { createHomeBookmarkModifier } from "@rilldata/web-admin/features/bookmarks/createOrUpdateHomeBookmark";
-  import EditBookmarkDialog from "@rilldata/web-admin/features/bookmarks/EditBookmarkDialog.svelte";
   import { getBookmarkDataForDashboard } from "@rilldata/web-admin/features/bookmarks/getBookmarkDataForDashboard";
   import type { BookmarkEntry } from "@rilldata/web-admin/features/bookmarks/selectors";
   import { useDashboardStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
@@ -26,9 +25,8 @@
 
   export let metricsViewName: string;
 
-  let createBookmark = false;
-  let editBookmark = false;
-  let bookmark: BookmarkEntry;
+  let showDialog = false;
+  let bookmark: BookmarkEntry | null = null;
 
   $: bookmarkApplier = createBookmarkApplier(
     $runtime?.instanceId,
@@ -47,9 +45,7 @@
   }
 
   async function createHomeBookmark() {
-    await homeBookmarkModifier(
-      getBookmarkDataForDashboard($dashboardStore, false, false),
-    );
+    await homeBookmarkModifier(getBookmarkDataForDashboard($dashboardStore));
     eventBus.emit("notification", {
       message: "Home bookmark created",
     });
@@ -93,22 +89,25 @@
     </Button>
   </DropdownMenuTrigger>
   <BookmarksContent
-    on:create={() => (createBookmark = true)}
+    on:create={() => (showDialog = true)}
     on:create-home={() => createHomeBookmark()}
     on:delete={({ detail }) => deleteBookmark(detail)}
     on:edit={({ detail }) => {
-      editBookmark = true;
+      showDialog = true;
       bookmark = detail;
     }}
     on:select={({ detail }) => selectBookmark(detail)}
     {metricsViewName}
   />
 </DropdownMenu>
 
-<CreateBookmarkDialog bind:open={createBookmark} {metricsViewName} />
-
-{#if bookmark}
-  {#key bookmark.resource.id}
-    <EditBookmarkDialog {bookmark} bind:open={editBookmark} {metricsViewName} />
-  {/key}
+{#if showDialog}
+  <BookmarkDialog
+    {bookmark}
+    {metricsViewName}
+    onClose={() => {
+      showDialog = false;
+      bookmark = null;
+    }}
+  />
 {/if}