feat: Guided Tours Framework (Secrets)

src/components/Learn/tours/registry.ts

@@ -6,6 +6,7 @@ import { publicAsset } from "@/utils/publicAsset";
 export type TourStep = StepType &
   TourAction & {
     ringSelectors?: string[];
+    tourPanel?: "secrets-manager";
     resetLibrarySearch?: boolean;
     ensureWindowRestored?: string;
     requiresTaskSelected?: string;
@@ -17,6 +18,7 @@ export interface TourDefinition {
   displayName?: string;
   requiresEditor?: boolean;
   starterPipelineUrl?: string;
+  mockBackend?: boolean;
   steps: TourStep[];
 }
 

src/components/shared/SecretsManagement/SelectSecretDialog.tsx

@@ -16,8 +16,11 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Spinner } from "@/components/ui/spinner";
 import { Text } from "@/components/ui/typography";
+import { useBackend } from "@/providers/BackendProvider";
+import { useTourMockBackend } from "@/providers/TourProvider/tourMockBackend";
 
 import { AddSecretForm } from "./components/AddSecretForm";
+import { SecretsBackendUnavailable } from "./components/SecretsBackendUnavailable";
 import { fetchSecretsList } from "./secretsStorage";
 import { type Secret, SecretsQueryKeys } from "./types";
 
@@ -189,6 +192,8 @@ export function SelectSecretDialog({
   onOpenChange,
   onSelect,
 }: SelectSecretDialogProps) {
+  const { available } = useBackend();
+  const mockBackend = useTourMockBackend();
   const handleSelect = (secretName: string) => {
     onSelect(secretName);
     onOpenChange(false);
@@ -198,7 +203,11 @@ export function SelectSecretDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       {open && (
         <DialogContent data-testid="select-secret-dialog">
-          <SelectSecretDialogContent onSelect={handleSelect} />
+          {available || mockBackend ? (
+            <SelectSecretDialogContent onSelect={handleSelect} />
+          ) : (
+            <SecretsBackendUnavailable />
+          )}
         </DialogContent>
       )}
     </Dialog>

src/components/shared/SecretsManagement/components/SecretsBackendUnavailable.tsx

@@ -0,0 +1,20 @@
+import { Icon } from "@/components/ui/icon";
+import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+
+export function SecretsBackendUnavailable() {
+  return (
+    <BlockStack
+      align="center"
+      className="py-8"
+      data-testid="secrets-backend-unavailable"
+    >
+      <Icon name="DatabaseZap" size="lg" className="text-subdued" />
+      <Text tone="subdued">Backend not connected</Text>
+      <Text size="xs" tone="subdued">
+        Secrets are stored on your Tangle backend. Connect one in Settings to
+        manage secrets.
+      </Text>
+    </BlockStack>
+  );
+}

src/components/shared/SecretsManagement/components/SecretsList.tsx

@@ -6,18 +6,25 @@ import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Text } from "@/components/ui/typography";
+import { useBackend } from "@/providers/BackendProvider";
+import { useTourMockBackend } from "@/providers/TourProvider/tourMockBackend";
 import { formatRelativeTime } from "@/utils/date";
 
 import { withSuspenseWrapper } from "../../SuspenseWrapper";
 import { fetchSecretsList } from "../secretsStorage";
-import { SecretsQueryKeys } from "../types";
+import { type Secret, SecretsQueryKeys } from "../types";
 import { RemoveSecretButton } from "./RemoveSecretButton";
+import { SecretsBackendUnavailable } from "./SecretsBackendUnavailable";
 
 interface SecretsListProps {
   onRemoveSuccess?: () => void;
+  onEditSecret?: (secret: Secret) => void;
 }
 
-function SecretsListInternal({ onRemoveSuccess }: SecretsListProps) {
+function SecretsListInternal({
+  onRemoveSuccess,
+  onEditSecret,
+}: SecretsListProps) {
   const { data: secrets } = useSuspenseQuery({
     queryKey: SecretsQueryKeys.All(),
     queryFn: fetchSecretsList,
@@ -67,16 +74,27 @@ function SecretsListInternal({ onRemoveSuccess }: SecretsListProps) {
             </InlineStack>
 
             <InlineStack gap="1">
-              <Link
-                to="/settings/secrets/$secretId/replace"
-                params={{ secretId: secret.id }}
-                replace
-                data-testid="secret-edit-button"
-              >
-                <Button variant="ghost" size="xs">
+              {onEditSecret ? (
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  data-testid="secret-edit-button"
+                  onClick={() => onEditSecret(secret)}
+                >
                   <Icon name="Pencil" size="sm" />
                 </Button>
-              </Link>
+              ) : (
+                <Link
+                  to="/settings/secrets/$secretId/replace"
+                  params={{ secretId: secret.id }}
+                  replace
+                  data-testid="secret-edit-button"
+                >
+                  <Button variant="ghost" size="xs">
+                    <Icon name="Pencil" size="sm" />
+                  </Button>
+                </Link>
+              )}
               <RemoveSecretButton secret={secret} onSuccess={onRemoveSuccess} />
             </InlineStack>
           </InlineStack>
@@ -96,7 +114,16 @@ function SecretsListSkeleton() {
   );
 }
 
-export const SecretsList = withSuspenseWrapper(
+const SecretsListWithSuspense = withSuspenseWrapper(
   SecretsListInternal,
   SecretsListSkeleton,
 );
+
+export function SecretsList(props: SecretsListProps) {
+  const { available } = useBackend();
+  const mockBackend = useTourMockBackend();
+  if (!available && !mockBackend) {
+    return <SecretsBackendUnavailable />;
+  }
+  return <SecretsListWithSuspense {...props} />;
+}

src/components/shared/SecretsManagement/components/SecretsListView.tsx

@@ -9,9 +9,18 @@ import useToastNotification from "@/hooks/useToastNotification";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
 import { tracking } from "@/utils/tracking";
 
+import type { Secret } from "../types";
 import { SecretsList } from "./SecretsList";
 
-export function SecretsListView() {
+interface SecretsListViewProps {
+  onAddSecret?: () => void;
+  onEditSecret?: (secret: Secret) => void;
+}
+
+export function SecretsListView({
+  onAddSecret,
+  onEditSecret,
+}: SecretsListViewProps = {}) {
   const notify = useToastNotification();
   const { track } = useAnalytics();
 
@@ -32,22 +41,36 @@ export function SecretsListView() {
 
       <Separator />
 
-      <SecretsList onRemoveSuccess={handleRemoveSuccess} />
+      <SecretsList
+        onRemoveSuccess={handleRemoveSuccess}
+        onEditSecret={onEditSecret}
+      />
 
       <Separator />
 
       <InlineStack align="end" fill>
-        <Link
-          to="/settings/secrets/add"
-          replace
-          data-testid="add-secret-link"
-          {...tracking("settings.secrets.add_secret")}
-        >
-          <Button variant="secondary">
+        {onAddSecret ? (
+          <Button
+            variant="secondary"
+            data-testid="add-secret-link"
+            onClick={onAddSecret}
+          >
             <Icon name="Plus" />
             Add Secret
           </Button>
-        </Link>
+        ) : (
+          <Link
+            to="/settings/secrets/add"
+            replace
+            data-testid="add-secret-link"
+            {...tracking("settings.secrets.add_secret")}
+          >
+            <Button variant="secondary">
+              <Icon name="Plus" />
+              Add Secret
+            </Button>
+          </Link>
+        )}
       </InlineStack>
     </BlockStack>
   );

src/components/shared/SecretsManagement/secretsStorage.ts

@@ -4,6 +4,13 @@ import {
   listSecretsApiSecretsGet,
   updateSecretApiSecretsSecretNamePut,
 } from "@/api/sdk.gen";
+import {
+  isTourMockActive,
+  mockAddSecret,
+  mockListSecrets,
+  mockRemoveSecret,
+  mockUpdateSecret,
+} from "@/providers/TourProvider/tourMockBackend";
 
 import type { Secret } from "./types";
 
@@ -33,6 +40,10 @@ function parseAsUtc(dateString: string): Date {
 }
 
 export async function fetchSecretsList() {
+  if (isTourMockActive()) {
+    return mockListSecrets();
+  }
+
   const response = await listSecretsApiSecretsGet();
 
   if (response.response.status !== 200) {
@@ -60,6 +71,11 @@ export async function updateSecret(
   secretId: string,
   secret: Partial<Secret> & Pick<Secret, "value">,
 ) {
+  if (isTourMockActive()) {
+    mockUpdateSecret(secretId, secret.value);
+    return true;
+  }
+
   const response = await updateSecretApiSecretsSecretNamePut({
     path: {
       secret_name: secretId,
@@ -79,6 +95,11 @@ export async function updateSecret(
 export async function addSecret(
   secret: Partial<Secret> & Pick<Secret, "name" | "value">,
 ) {
+  if (isTourMockActive()) {
+    mockAddSecret(secret.name ?? "", secret.value);
+    return true;
+  }
+
   const response = await createSecretApiSecretsPost({
     query: {
       secret_name: secret.name ?? "",
@@ -96,6 +117,11 @@ export async function addSecret(
 }
 
 export async function removeSecret(secretId: string) {
+  if (isTourMockActive()) {
+    mockRemoveSecret(secretId);
+    return true;
+  }
+
   const response = await deleteSecretApiSecretsSecretNameDelete({
     path: {
       secret_name: secretId,

src/components/shared/Submitters/Tangle/TangleSubmitter.tsx

@@ -12,6 +12,7 @@ import useCooldownTimer from "@/hooks/useCooldownTimer";
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
 import { useBackend } from "@/providers/BackendProvider";
+import { useTourMockBackend } from "@/providers/TourProvider/tourMockBackend";
 import { APP_ROUTES } from "@/routes/router";
 import { updateRunAnnotation } from "@/services/pipelineRunService";
 import type { PipelineRun } from "@/types/pipelineRun";
@@ -102,6 +103,7 @@ const TangleSubmitter = ({
 }: TangleSubmitterProps) => {
   const { isAuthorized } = useAwaitAuthorization();
   const { backendUrl, configured, available } = useBackend();
+  const mockBackend = useTourMockBackend();
   const { mutate: submit, isPending: isSubmitting } = useSubmitPipeline();
   const isAutoRedirect = useFlagValue("redirect-on-new-pipeline-run");
 
@@ -310,7 +312,7 @@ const TangleSubmitter = ({
             size="icon"
             data-testid="run-with-arguments-button"
             onClick={() => setIsArgumentsDialogOpen(true)}
-            disabled={!available}
+            disabled={!available && !mockBackend}
           >
             <Icon name="Split" className="rotate-90" />
           </TooltipButton>

src/components/shared/Submitters/Tangle/components/SubmitTaskArgumentsDialog.tsx

@@ -36,6 +36,8 @@ import { Paragraph } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { cn } from "@/lib/utils";
 import { useBackend } from "@/providers/BackendProvider";
+import { useTourMockBackend } from "@/providers/TourProvider/tourMockBackend";
+import { useTourMode } from "@/providers/TourProvider/TourModeContext";
 import {
   fetchExecutionDetails,
   fetchPipelineRun,
@@ -66,6 +68,8 @@ export const SubmitTaskArgumentsDialog = ({
   componentSpec,
 }: SubmitTaskArgumentsDialogProps) => {
   const notify = useToastNotification();
+  const tourMode = useTourMode();
+  const mockBackend = useTourMockBackend();
   const initialArgs = getArgumentsFromInputs(componentSpec);
 
   const [runNotes, setRunNotes] = useState<string>("");
@@ -135,8 +139,16 @@ export const SubmitTaskArgumentsDialog = ({
   const hasInputs = inputs.length > 0;
 
   return (
-    <Dialog open={open} onOpenChange={handleCancel}>
-      <DialogContent className="sm:max-w-lg">
+    <Dialog open={open} onOpenChange={handleCancel} modal={!tourMode}>
+      <DialogContent
+        className="sm:max-w-lg"
+        {...(tourMode
+          ? {
+              onInteractOutside: (event) => event.preventDefault(),
+              onEscapeKeyDown: (event) => event.preventDefault(),
+            }
+          : {})}
+      >
         <DialogHeader>
           <DialogTitle>Submit Run with Arguments</DialogTitle>
           <DialogDescription className="hidden">
@@ -199,7 +211,10 @@ export const SubmitTaskArgumentsDialog = ({
           <Button variant="outline" onClick={handleCancel}>
             Cancel
           </Button>
-          <Button onClick={handleConfirm} disabled={!isValidToSubmit}>
+          <Button
+            onClick={handleConfirm}
+            disabled={!isValidToSubmit || mockBackend}
+          >
             Submit Run
           </Button>
         </DialogFooter>

src/providers/TourProvider/TourPopover.tsx

@@ -87,9 +87,6 @@ export function computeDefaultPopoverPosition(
   const isTallStrip = targetHeight > props.windowHeight * 0.5;
   const margin = 16;
 
-  // Right-anchored full-height strip (e.g. right sidebar): place popover to
-  // its LEFT. Reactour's "left" fallback can swap to "top"/"bottom" for tall
-  // targets, so we return explicit coords.
   if (isTallStrip && props.right >= props.windowWidth - 4) {
     const popoverWidth = props.width || 380;
     return [
@@ -98,16 +95,22 @@ export function computeDefaultPopoverPosition(
     ];
   }
 
-  // Left-anchored full-height strip (e.g. left dock): place popover to its
-  // RIGHT. Same reason — reactour's "right" fallback drops to "top" for tall
-  // targets even when there's plenty of room horizontally. We test the
-  // target's right edge against the viewport midline rather than its left
-  // edge against zero, so a dock that isn't flush to the window edge still
-  // qualifies.
   if (isTallStrip && props.right < props.windowWidth * 0.5) {
     return [props.right + margin, Math.max(props.top + margin, 64)];
   }
 
+  if (
+    isTallStrip &&
+    props.left > margin &&
+    props.right < props.windowWidth - margin
+  ) {
+    const popoverWidth = props.width || 380;
+    return [
+      Math.max(margin, props.left - popoverWidth - margin),
+      Math.max(props.top, margin),
+    ];
+  }
+
   return "bottom";
 }