Add report unsubscribe path

web-admin/src/features/scheduled-reports/unsubscribe-report-using-token.ts

@@ -0,0 +1,93 @@
+/**
+ * This file implements a variant of the `UnsubscribeReport` client code that authenticates using a bearer token.
+ *
+ * Modifications from the original Orval-generated code in `/web-admin/src/client/gen/admin-service/admin-service.ts` include:
+ * - `queryFn`: Authentication via `Authorization: Bearer ${token}` header, replacing cookie-based authentication.
+ * - `queryOptions`: Conditional enabling of the query based on the presence of `token`.
+ */
+
+import {
+  createMutation,
+  type CreateMutationOptions,
+  type MutationFunction,
+} from "@rilldata/svelte-query";
+import {
+  type AdminServiceTriggerReconcileBodyBody,
+  type RpcStatus,
+  type V1UnsubscribeReportResponse,
+} from "@rilldata/web-admin/client";
+import httpClient from "@rilldata/web-admin/client/http-client";
+
+const adminServiceUnsubscribeReportWithToken = (
+  organization: string,
+  project: string,
+  name: string,
+  token: string,
+  adminServiceTriggerReconcileBodyBody: AdminServiceTriggerReconcileBodyBody,
+) => {
+  return httpClient<V1UnsubscribeReportResponse>({
+    url: `/v1/organizations/${organization}/projects/${project}/reports/${name}/unsubscribe`,
+    method: "post",
+    data: adminServiceTriggerReconcileBodyBody,
+    // We use the bearer token to authenticate the request
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    // To be explicit, we don't need to send credentials (cookies) with the request
+    withCredentials: false,
+  });
+};
+
+export const createAdminServiceUnsubscribeReportUsingToken = <
+  TError = RpcStatus,
+  TContext = unknown,
+>(options?: {
+  mutation?: CreateMutationOptions<
+    Awaited<ReturnType<typeof adminServiceUnsubscribeReportWithToken>>,
+    TError,
+    {
+      organization: string;
+      project: string;
+      name: string;
+      token: string;
+      data: AdminServiceTriggerReconcileBodyBody;
+    },
+    TContext
+  >;
+}) => {
+  const { mutation: mutationOptions } = options ?? {};
+
+  const mutationFn: MutationFunction<
+    Awaited<ReturnType<typeof adminServiceUnsubscribeReportWithToken>>,
+    {
+      organization: string;
+      project: string;
+      name: string;
+      token: string;
+      data: AdminServiceTriggerReconcileBodyBody;
+    }
+  > = (props) => {
+    const { organization, project, name, token, data } = props ?? {};
+
+    return adminServiceUnsubscribeReportWithToken(
+      organization,
+      project,
+      name,
+      token,
+      data,
+    );
+  };
+
+  return createMutation<
+    Awaited<ReturnType<typeof adminServiceUnsubscribeReportWithToken>>,
+    TError,
+    {
+      organization: string;
+      project: string;
+      name: string;
+      token: string;
+      data: AdminServiceTriggerReconcileBodyBody;
+    },
+    TContext
+  >(mutationFn, mutationOptions);
+};

web-admin/src/routes/[organization]/[project]/-/reports/[report]/unsubscribe/+page.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { page } from "$app/stores";
+  import { type RpcStatus } from "@rilldata/web-admin/client";
+  import { createAdminServiceUnsubscribeReportUsingToken } from "@rilldata/web-admin/features/scheduled-reports/unsubscribe-report-using-token";
+  import CtaContentContainer from "@rilldata/web-common/components/calls-to-action/CTAContentContainer.svelte";
+  import CtaLayoutContainer from "@rilldata/web-common/components/calls-to-action/CTALayoutContainer.svelte";
+  import CtaMessage from "@rilldata/web-common/components/calls-to-action/CTAMessage.svelte";
+  import type { AxiosError } from "axios";
+  import { onMount } from "svelte";
+
+  $: organization = $page.params.organization;
+  $: project = $page.params.project;
+  $: report = $page.params.report;
+  $: token = $page.url.searchParams.get("token");
+
+  // using this instead of reportUnsubscriber to avoid a flicker before reportUnsubscriber is triggered
+  let loading = true;
+
+  const reportUnsubscriber = createAdminServiceUnsubscribeReportUsingToken();
+
+  $: error =
+    ($reportUnsubscriber.error as unknown as AxiosError<RpcStatus>)?.response
+      ?.data?.message ?? $reportUnsubscriber.error?.message;
+
+  async function unsubscribe() {
+    await $reportUnsubscriber.mutateAsync({
+      organization,
+      project,
+      name: report,
+      token,
+      data: {},
+    });
+    loading = false;
+  }
+
+  onMount(() => unsubscribe());
+</script>
+
+<CtaLayoutContainer>
+  <CtaContentContainer>
+    <div class="flex flex-col gap-y-2">
+      {#if error}
+        <h2 class="text-lg font-semibold">Failed to unsubscribe.</h2>
+        <CtaMessage>
+          {error}
+        </CtaMessage>
+      {:else if loading}
+        <h2 class="text-lg font-semibold">Unsubscribing...</h2>
+      {:else}
+        <h2 class="text-lg font-semibold">Unsubscribed from report.</h2>
+      {/if}
+    </div>
+  </CtaContentContainer>
+</CtaLayoutContainer>