@futo-org/backups-orchestrator-ui 0.3.1 → 0.4.0

package/dist/components/integrations/immich/ImmichOnboardingRestoreFlow.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
   import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
+  import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
   import RestorePointFlow from "../../onboarding/restore-point-flow/RestorePointFlow.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
   import {
@@ -19,6 +21,7 @@
 
   let status: OnboardingStatusResponseDto | undefined = $state();
   let stage:
+    | "telemetry"
     | "key-import"
     | "backup-service"
     | "restore-point"
@@ -28,48 +31,55 @@
     handleOnboardingStatus().then((data) => {
       status = data;
 
-      if (data.hasOnboardedKey) {
-        if (data.hasBackend) {
-          stage = "restore-point";
-        } else {
-          stage = "backup-service";
-        }
+      if (data.status !== "ready") {
+        return;
+      }
+
+      if (data.hasTelemetry === "none") {
+        stage = "telemetry";
+      } else if (data.hasOnboardedKey) {
+        stage = data.hasBackend ? "restore-point" : "backup-service";
       }
     });
   });
 
   const onKeyImported = async () => {
     await handleConfirmRecoveryKey();
-
-    if (status?.hasBackend) {
-      stage = "restore-point";
-    } else {
-      stage = "backup-service";
-    }
+    stage = status?.hasBackend ? "restore-point" : "backup-service";
   };
 </script>
 
-{#if typeof status === "object"}
-  {#if stage === "key-import"}
-    <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
-  {:else if stage === "backup-service"}
-    <OnboardingStageBackupServices
-      onNext={() => (stage = "restore-point")}
-      onCancel={onExit}
-      restore
-    />
-  {:else if stage === "key-reimport"}
-    <OnboardingStageKeyImport
-      onImported={() => (stage = "restore-point")}
-      onCancel={() => (stage = "restore-point")}
-    />
-  {:else if stage === "restore-point"}
-    <RestorePointFlow
-      onImportKey={() => (stage = "key-reimport")}
-      onCancel={onExit}
-      {onFinish}
-    />
-  {/if}
-{:else}
+{#if status === undefined || status.status === "not-ready"}
   <LoadingSpinner />
+{:else if status.status === "error"}
+  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+{:else if stage === "telemetry"}
+  <OnboardingStageTelemetry
+    onContinue={() =>
+      (stage = status?.hasOnboardedKey
+        ? status.hasBackend
+          ? "restore-point"
+          : "backup-service"
+        : "key-import")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-import"}
+  <OnboardingStageKeyImport onImported={onKeyImported} onCancel={onExit} />
+{:else if stage === "backup-service"}
+  <OnboardingStageBackupServices
+    onNext={() => (stage = "restore-point")}
+    onCancel={onExit}
+    restore
+  />
+{:else if stage === "key-reimport"}
+  <OnboardingStageKeyImport
+    onImported={() => (stage = "restore-point")}
+    onCancel={() => (stage = "restore-point")}
+  />
+{:else if stage === "restore-point"}
+  <RestorePointFlow
+    onImportKey={() => (stage = "key-reimport")}
+    onCancel={onExit}
+    {onFinish}
+  />
 {/if}

package/dist/components/integrations/immich/ImmichOnboardingSetupFlow.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import OnboardingBootstrapError from "../../onboarding/OnboardingBootstrapError.svelte";
   import OnboardingStageBackupServices from "../../onboarding/stages/OnboardingStageBackupServices.svelte";
   import OnboardingStageKeyConfirm from "../../onboarding/stages/OnboardingStageKeyConfirm.svelte";
   import OnboardingStageKeyImport from "../../onboarding/stages/OnboardingStageKeyImport.svelte";
   import OnboardingStageKeyIntro from "../../onboarding/stages/OnboardingStageKeyIntro.svelte";
   import OnboardingStageSaveKey from "../../onboarding/stages/OnboardingStageKeySave.svelte";
+  import OnboardingStageTelemetry from "../../onboarding/stages/OnboardingStageTelemetry.svelte";
   import OnboardingStageWelcome from "../../onboarding/stages/OnboardingStageWelcome.svelte";
   import type { OnboardingStatusResponseDto } from "../../../fetch-client";
   import {
@@ -28,6 +30,7 @@
   let status: OnboardingStatusResponseDto | undefined = $state();
   let stage:
     | `welcome`
+    | `telemetry`
     | `key-${"intro" | "save" | "confirm" | "import"}`
     | `backup-${"service" | "confirm" | "create"}`
     | `finished` = $state("welcome");
@@ -36,12 +39,17 @@
     handleOnboardingStatus().then(async (data) => {
       status = data;
 
+      if (data.status !== "ready") {
+        return;
+      }
+
       if (data.hasOnboardedKey) {
-        if (data.hasBackup) {
-          stage = "finished";
-        } else {
-          stage = "backup-service";
-        }
+        stage =
+          data.hasTelemetry === "none"
+            ? "telemetry"
+            : data.hasBackup
+              ? "finished"
+              : "backup-service";
       } else {
         const { recoveryKey } = await handleCurrentRecoveryKey();
         code = recoveryKey;
@@ -60,54 +68,64 @@
   };
 </script>
 
-{#if typeof status === "object"}
-  {#if stage === "finished"}
-    {@render children()}
-  {:else if stage === "welcome"}
-    <OnboardingStageWelcome
-      onNext={() => (stage = "key-intro")}
-      onImportKey={() => (stage = "key-import")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-import"}
-    <OnboardingStageKeyImport
-      onStart={() => (stage = "welcome")}
-      onImported={() => (stage = "key-confirm")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-intro"}
-    <OnboardingStageKeyIntro
-      onNext={() => (stage = "key-save")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-save"}
-    <OnboardingStageSaveKey
-      {code}
-      onNext={() => (stage = "key-confirm")}
-      onCancel={onExit}
-    />
-  {:else if stage === "key-confirm"}
-    <OnboardingStageKeyConfirm
-      {code}
-      onBack={() => (stage = "key-save")}
-      onCancel={onExit}
-      {onConfirmKey}
-    />
-  {:else if stage === "backup-service"}
-    <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
-  {:else if stage === "backup-confirm"}
-    <ImmichConfirmDefaultBackup
-      onCustomize={() => (stage = "backup-create")}
-      onConfirm={() => (stage = "finished")}
-      onCancel={onExit}
-    />
-  {:else if stage === "backup-create"}
-    <ImmichConfigureBackup
-      onFinish={() => (stage = "finished")}
-      onCancel={onExit}
-      {backendId}
-    />
-  {/if}
-{:else}
+{#if status === undefined || status.status === "not-ready"}
   <LoadingSpinner />
+{:else if status.status === "error"}
+  <OnboardingBootstrapError error={status.error} onQuit={onExit} />
+{:else if stage === "finished"}
+  {@render children()}
+{:else if stage === "welcome"}
+  <OnboardingStageWelcome
+    onNext={() => (stage = status?.hasTelemetry === "none" ? "telemetry" : "key-intro")}
+    onImportKey={() => (stage = "key-import")}
+    onCancel={onExit}
+  />
+{:else if stage === "telemetry"}
+  <OnboardingStageTelemetry
+    onContinue={() =>
+      (stage = status?.hasOnboardedKey
+        ? status.hasBackup
+          ? "finished"
+          : "backup-service"
+        : "key-intro")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-import"}
+  <OnboardingStageKeyImport
+    onStart={() => (stage = "welcome")}
+    onImported={() => (stage = "key-confirm")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-intro"}
+  <OnboardingStageKeyIntro
+    onNext={() => (stage = "key-save")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-save"}
+  <OnboardingStageSaveKey
+    {code}
+    onNext={() => (stage = "key-confirm")}
+    onCancel={onExit}
+  />
+{:else if stage === "key-confirm"}
+  <OnboardingStageKeyConfirm
+    {code}
+    onBack={() => (stage = "key-save")}
+    onCancel={onExit}
+    {onConfirmKey}
+  />
+{:else if stage === "backup-service"}
+  <OnboardingStageBackupServices onNext={onSelectBackend} onCancel={onExit} />
+{:else if stage === "backup-confirm"}
+  <ImmichConfirmDefaultBackup
+    onCustomize={() => (stage = "backup-create")}
+    onConfirm={() => (stage = "finished")}
+    onCancel={onExit}
+  />
+{:else if stage === "backup-create"}
+  <ImmichConfigureBackup
+    onFinish={() => (stage = "finished")}
+    onCancel={onExit}
+    {backendId}
+  />
 {/if}

package/dist/components/onboarding/OnboardingBootstrapError.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { useReportError } from "../../services/onboarding.service";
+
+  type Props = {
+    error?: string;
+    onQuit: () => void;
+  };
+
+  const { error, onQuit }: Props = $props();
+
+  const mutation = useReportError();
+
+  const onReportAndQuit = () =>
+    mutation.mutate(undefined, { onSuccess: onQuit });
+</script>
+
+<Modal size="small" title="Something went wrong" onClose={onQuit} icon={false}>
+  <ModalBody>
+    <Stack>
+      <Text>We ran into an error setting up backups...</Text>
+      {#if error}
+        <Text size="small" color="danger" class="font-mono whitespace-pre-wrap"
+          >{error}</Text
+        >
+      {/if}
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button
+        color="danger"
+        onclick={onReportAndQuit}
+        loading={mutation.isPending}>Report error and quit</Button
+      >
+      <Button variant="ghost" onclick={onQuit} disabled={mutation.isPending}
+        >Go back</Button
+      >
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/OnboardingBootstrapError.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    error?: string;
+    onQuit: () => void;
+};
+declare const OnboardingBootstrapError: import("svelte").Component<Props, {}, "">;
+type OnboardingBootstrapError = ReturnType<typeof OnboardingBootstrapError>;
+export default OnboardingBootstrapError;

package/dist/components/onboarding/OnboardingGate.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { LoadingSpinner } from "@immich/ui";
   import { onMount, type Snippet } from "svelte";
+  import OnboardingBootstrapError from "./OnboardingBootstrapError.svelte";
   import SampleOnboarding from "./SampleOnboarding.svelte";
   import type { OnboardingStatusResponseDto } from "../../fetch-client";
   import { handleOnboardingStatus } from "../../services/onboarding.service";
@@ -13,14 +14,16 @@
 
   const { onExit, onFinish, children }: Props = $props();
 
-  let status: OnboardingStatusResponseDto | undefined = $state();
+  let onboarding: OnboardingStatusResponseDto | undefined = $state();
 
   onMount(() => {
-    handleOnboardingStatus().then((data) => (status = data));
+    handleOnboardingStatus().then((data) => (onboarding = data));
   });
 
   function onSkip() {
-    status = {
+    onboarding = {
+      status: "ready",
+      hasTelemetry: "full",
       hasBackend: true,
       hasOnboardedKey: true,
       hasBackup: true,
@@ -30,19 +33,19 @@
   }
 </script>
 
-{#if typeof status === "object"}
-  {#if !(status.hasBackend && status.hasOnboardedKey && (status.hasSkippedExtraConfig || (status.hasBackup && status.hasSchedule)))}
-    <SampleOnboarding
-      {status}
-      onFinish={() => (onFinish ? onFinish() : onSkip())}
-      onCancel={() => {
-        onSkip();
-        onExit();
-      }}
-    />
-  {:else}
-    {@render children()}
-  {/if}
-{:else}
+{#if onboarding === undefined || onboarding.status === "not-ready"}
   <LoadingSpinner />
+{:else if onboarding.status === "error"}
+  <OnboardingBootstrapError error={onboarding.error} onQuit={onExit} />
+{:else if onboarding.hasTelemetry === "none" || !(onboarding.hasBackend && onboarding.hasOnboardedKey && (onboarding.hasSkippedExtraConfig || (onboarding.hasBackup && onboarding.hasSchedule)))}
+  <SampleOnboarding
+    status={onboarding}
+    onFinish={() => (onFinish ? onFinish() : onSkip())}
+    onCancel={() => {
+      onSkip();
+      onExit();
+    }}
+  />
+{:else}
+  {@render children()}
 {/if}

package/dist/components/onboarding/SampleOnboarding.svelte

@@ -13,6 +13,7 @@
   import ImportKey from "./stages/OnboardingStageKeyImport.svelte";
   import KeyIntro from "./stages/OnboardingStageKeyIntro.svelte";
   import SaveKey from "./stages/OnboardingStageKeySave.svelte";
+  import Telemetry from "./stages/OnboardingStageTelemetry.svelte";
   import Welcome from "./stages/OnboardingStageWelcome.svelte";
 
   type Props = {
@@ -28,17 +29,20 @@
   // svelte-ignore state_referenced_locally
   let stage:
     | "welcome"
+    | "telemetry"
     | `key-${"intro" | "save" | "confirm" | "import"}`
     | "backup-service"
     | "backup-create"
     | "schedule-create" = $state(
     !status.hasOnboardedKey
       ? "welcome"
-      : !status.hasBackend
-        ? "backup-service"
-        : !status.hasBackup
-          ? "backup-create"
-          : "schedule-create",
+      : status.hasTelemetry === "none"
+        ? "telemetry"
+        : !status.hasBackend
+          ? "backup-service"
+          : !status.hasBackup
+            ? "backup-create"
+            : "schedule-create",
   );
 
   onMount(() => {
@@ -65,10 +69,22 @@
 
 {#if stage === "welcome"}
   <Welcome
-    onNext={() => (stage = "key-intro")}
+    onNext={() => (stage = status.hasTelemetry === "none" ? "telemetry" : "key-intro")}
     onImportKey={() => (stage = "key-import")}
     {onCancel}
   />
+{:else if stage === "telemetry"}
+  <Telemetry
+    onContinue={() =>
+      (stage = !status.hasOnboardedKey
+        ? "key-intro"
+        : !status.hasBackend
+          ? "backup-service"
+          : !status.hasBackup
+            ? "backup-create"
+            : "schedule-create")}
+    {onCancel}
+  />
 {:else if stage === "key-intro"}
   <KeyIntro onNext={() => (stage = "key-save")} {onCancel} />
 {:else if stage === "key-save"}

package/dist/components/onboarding/stages/OnboardingStageTelemetry.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import {
+    Button,
+    HStack,
+    Icon,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    Stack,
+    Text,
+  } from "@immich/ui";
+  import { useEnableTelemetry } from "../../../services/onboarding.service";
+  import { mdiChartBox, mdiEyeOff } from "@mdi/js";
+
+  type Props = {
+    onContinue: () => void;
+    onCancel: () => void;
+  };
+
+  const { onContinue, onCancel }: Props = $props();
+
+  const mutation = useEnableTelemetry();
+
+  const onConfirm = () => mutation.mutate(undefined, { onSuccess: onContinue });
+</script>
+
+<Modal
+  size="small"
+  title="Telemetry required for closed beta"
+  onClose={onCancel}
+>
+  <ModalBody>
+    <Stack>
+      <HStack>
+        <Icon icon={mdiChartBox} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          We collect usage and diagnostic data to understand how FUTO Backups is
+          used and to find problems.</Text
+        >
+      </HStack>
+      <HStack>
+        <Icon icon={mdiEyeOff} class="shrink-0 place-self-start mt-1" />
+        <Text>
+          Your photos, files, and recovery key are never collected and never
+          leave your device unencrypted.</Text
+        >
+      </HStack>
+    </Stack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack>
+      <Button onclick={onConfirm} loading={mutation.isPending}>Continue</Button>
+      <Button
+        variant="ghost"
+        onclick={onCancel}
+        disabled={mutation.isPending}>Cancel</Button
+      >
+    </HStack>
+  </ModalFooter>
+</Modal>

package/dist/components/onboarding/stages/OnboardingStageTelemetry.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    onContinue: () => void;
+    onCancel: () => void;
+};
+declare const OnboardingStageTelemetry: import("svelte").Component<Props, {}, "">;
+type OnboardingStageTelemetry = ReturnType<typeof OnboardingStageTelemetry>;
+export default OnboardingStageTelemetry;

package/dist/fetch-client.d.ts

@@ -82,7 +82,12 @@ export type ConfigureImmichIntegrationRequestDto = {
     libraries: "all" | string[];
     retentionPolicy?: (RetentionPolicyDto) | null;
 };
+export type BootstrapStatus = "not-ready" | "ready" | "error";
+export type TelemetryLevel = "full" | "none";
 export type OnboardingStatusResponseDto = {
+    status: BootstrapStatus;
+    error?: string;
+    hasTelemetry: TelemetryLevel;
     hasOnboardedKey: boolean;
     hasBackend: boolean;
     hasBackup: boolean;
@@ -269,6 +274,8 @@ export declare function currentRecoveryKey(opts?: Oazapfts.RequestOpts): Promise
 export declare function importRecoveryKey(importRecoveryKeyRequest: ImportRecoveryKeyRequest, opts?: Oazapfts.RequestOpts): Promise<never>;
 export declare function confirmRecoveryKey(opts?: Oazapfts.RequestOpts): Promise<never>;
 export declare function skipOnboardingExtraConfig(opts?: Oazapfts.RequestOpts): Promise<never>;
+export declare function enableTelemetry(opts?: Oazapfts.RequestOpts): Promise<never>;
+export declare function reportError(opts?: Oazapfts.RequestOpts): Promise<never>;
 export declare function createRepository(repositoryCreateRequestDto: RepositoryCreateRequestDto, { backend }?: {
     backend?: string;
 }, opts?: Oazapfts.RequestOpts): Promise<RepositoryCreateResponseDto>;

package/dist/fetch-client.js

@@ -85,6 +85,18 @@ export function skipOnboardingExtraConfig(opts) {
         method: "POST"
     }));
 }
+export function enableTelemetry(opts) {
+    return oazapfts.ok(oazapfts.fetchText("/api/yucca/onboarding/telemetry", {
+        ...opts,
+        method: "POST"
+    }));
+}
+export function reportError(opts) {
+    return oazapfts.ok(oazapfts.fetchText("/api/yucca/onboarding/report-error", {
+        ...opts,
+        method: "POST"
+    }));
+}
 export function createRepository(repositoryCreateRequestDto, { backend } = {}, opts) {
     return oazapfts.ok(oazapfts.fetchJson(`/api/yucca/repository${QS.query(QS.explode({
         backend

package/dist/services/onboarding.service.d.ts

@@ -9,3 +9,5 @@ export declare const handleCurrentRecoveryKey: () => Promise<sdk.CurrentRecovery
 export declare const handleConfirmRecoveryKey: () => Promise<void>;
 export declare const handleImportRecoveryKey: (dto: ImportRecoveryKeyRequest) => Promise<void>;
 export declare const handleSkipOnboardingExtraConfig: () => Promise<void>;
+export declare const useEnableTelemetry: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, void, unknown>;
+export declare const useReportError: () => import("@tanstack/svelte-query").CreateMutationResult<never, Error, void, unknown>;

package/dist/services/onboarding.service.js

@@ -1,7 +1,7 @@
 import { sdk } from '..';
 import { queryClient } from '../query-client';
 import { handleError } from '../utils/handle-error';
-import { createQuery } from '@tanstack/svelte-query';
+import { createMutation, createQuery } from '@tanstack/svelte-query';
 export const recoveryKeyKeys = {
     all: ['recovery-key'],
 };
@@ -54,3 +54,11 @@ export const handleSkipOnboardingExtraConfig = async () => {
         throw error;
     }
 };
+export const useEnableTelemetry = () => createMutation(() => ({
+    mutationFn: () => sdk.enableTelemetry(),
+    onError: (error) => handleError(error, 'Failed to save preferences'),
+}), () => queryClient);
+export const useReportError = () => createMutation(() => ({
+    mutationFn: () => sdk.reportError(),
+    onError: (error) => handleError(error, 'Failed to report error'),
+}), () => queryClient);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@futo-org/backups-orchestrator-ui",
   "repository": "https://github.com/immich-app/yucca",
   "description": "Backups orchestrator (UI library)",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "Source First License 1.1",
   "files": [
     "dist",
@@ -64,7 +64,7 @@
     "lodash.debounce": "^4.0.8",
     "luxon": "^3.7.2",
     "socket.io-client": "^4.8.3",
-    "@futo-org/backups-api-client": "^0.3.1"
+    "@futo-org/backups-api-client": "^0.4.0"
   },
   "scripts": {
     "dev": "vite dev --port 5174",