Onboarding Wizard (config creation via web UI) #3769

gememma · 2025-12-01T14:49:12Z

Main issue: COR-986 (see sub-issues for task lists)
Relevant Slack channel: #project-mirrord-wizard
Notion page: MBE-1451 mirrord onboarding wizard

Unfinished:

~~Backend endpoints - cluster and target details~~
~~Dev-facing docs~~
User-facing docs
Tests for backend

wizard-frontend/src/App.tsx

wizard-frontend/src/components/UserDataContext.tsx

meowjesty

Buncha comments for the Rust side.

I wonder if the wizard should be a separate crate/sub-crate of cli instead of just a mod, it has a whole js web app, so it for sure feels it deserves a bit more than just a mod wizard_yolo.

mirrord/cli/src/wizard.rs

mirrord/cli/src/main.rs

mirrord/cli/src/error.rs

mirrord/cli/src/config.rs

mirrord/cli/Cargo.toml

meowjesty · 2025-12-01T22:34:38Z

Buncha comments for the Rust side.

I wonder if the wizard should be a separate crate/sub-crate of cli instead of just a mod, it has a whole js web app, so it for sure feels it deserves a bit more than just a mod wizard_yolo.

@0x00A5

meowjesty

Started looking into the frontend, so far a bunch of minor issues and things I don't really know if we need? We might need them, but I don't know, do you know?

wizard-frontend/index.html

wizard-frontend/postcss.config.js

wizard-frontend/tsconfig.app.json

meowjesty · 2025-12-03T02:41:01Z

wizard-frontend/tsconfig.json

+    "noImplicitAny": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": false
+  }


Suggested change

"noImplicitAny": false,

"noUnusedParameters": false,

"skipLibCheck": true,

"allowJs": true,

"noUnusedLocals": false,

"strictNullChecks": false

}

"noImplicitAny": true,

"noUnusedParameters": true,

"skipLibCheck": true,

"allowJs": false,

"noUnusedLocals": true,

"strictNullChecks": true

}

Do we need both this and tsconfig.app.json?

meowjesty · 2025-12-03T02:41:53Z

wizard-frontend/tsconfig.node.json

+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },


Suggested change

"strict": true,

"noUnusedLocals": false,

"noUnusedParameters": false,

"noFallthroughCasesInSwitch": true

},

"strict": true,

"noUnusedLocals": true,

"noUnusedParameters": true,

"noFallthroughCasesInSwitch": true

},

Omg, how many tsconfig files do we need? Isn't there some bundler or whatever that takes it all from one place?

wizard-frontend/src/mirrord-schema.d.ts

meowjesty · 2025-12-03T02:55:47Z

wizard-frontend/src/App.tsx

+  });
+
+  if (error) {
+    console.log(error)


No notification anywhere that we have an error? I think we should have something, maybe there's something wrong with the user setup, and this might leave them confused until they randomly check the browser console.

Also, this won't just display [Object object], right?

And lastly, console.error(error) (I think that's the correct one?).

meowjesty · 2025-12-03T03:00:27Z

wizard-frontend/src/App.tsx

+  const { error, isLoading, data } = useQuery({
+    queryKey: ["userIsReturning"],
+    queryFn: () =>
+      fetch(window.location.href + "api/v1/is-returning").then(async (res) =>


AI said to use https://developer.mozilla.org/en-US/docs/Web/API/Location/origin instead of href, cause href may or may not contain a trailling /.

Can we also get a global/const json object with all the backend routes? Something like:

const ALL_THE_ROUTES = { isReturning: "/api/v1/is-returning, };

Something along these lines, so we can have a central point to define all of this strings (muh grpc).

wizard-frontend/src/App.tsx

wizard-frontend/src/lib/utils.ts

meowjesty

Some more small stuff (I want to refresh the page and am scared of losing some of the comments, so here they are).

mirrord/cli/src/error.rs

meowjesty · 2025-12-03T17:54:11Z

wizard-frontend/src/pages/NotFound.tsx

+        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
+        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
+          Return to Home
+        </a>
+      </div>


No metalbear bear funny image? Like the bear confused, searching for something that they can't find.

no time for whimsy, this wizard is SERIOUS

meowjesty · 2025-12-03T17:55:12Z

wizard-frontend/src/pages/Homepage.tsx

+import HomepageReturning from "@/components/HomepageReturning";
+import HomepageNewUser from "../components/HomepageNewUser";
+import { useContext } from "react";


Why @ for returning and ../ for new?

dear lord this is cursed

meowjesty

Some more frontend comments.

We use some strings here and there as id/type-ish-like, and I wonder if we could use something else, maybe an enum or the types variant thingy that ts supports.

meowjesty · 2025-12-03T18:14:08Z

wizard-frontend/src/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+import * as React from "react"


Am I (color)blind, or does this file not contain a single ; at the end of its lines?

Adding some formatter config fixes this (I think), and it would be nice in general, so we don't end up with formatting changes in future PRs.

meowjesty · 2025-12-03T18:19:06Z

wizard-frontend/src/hooks/use-toast.ts

+
+type ActionType = typeof actionTypes
+
+type Action =


react 19 introduced something to deal with actions https://react.dev/blog/2024/12/05/react-19#actions wonder if it would be applicable here (making this comment before I checked where this gets used).

meowjesty · 2025-12-03T21:44:28Z

wizard-frontend/src/components/steps/BoilerplateStep.tsx

+const BoilerplateStep: () => WizardStep = () => {
+  const boilerplateConfigs: BoilerplateCardProps[] = [
+    {
+      id: "steal",


Nit: These id thingies kinda look like variants, so maybe they should be represented as such? Some sort of

enum Mode { Mirrord = "mirror", Steal = "steal", ... } id: FilterMode.Steal

meowjesty · 2025-12-03T22:10:33Z

wizard-frontend/src/components/JsonUtils.tsx

+  scale_down: boolean,
+  config: LayerFileConfig
+) => {
+  if (typeof config !== "object") {


How is this possible? I mean, how would this not be an object, since the function is taking a LayerFileConfig?

wizard-frontend/src/components/UserDataContext.tsx

meowjesty · 2025-12-03T22:29:49Z

wizard-frontend/src/components/steps/BoilerplateStep.tsx

+    },
+  ];
+
+  const { config, setConfig } = useContext(ConfigDataContext);


I'm seeing config and setConfig in vscode as any, is that right, or it's just my setup?

meowjesty · 2025-12-03T22:31:32Z

wizard-frontend/src/components/steps/BoilerplateStep.tsx

+  const [selectedBoilerplate, setSelectedBoilerplate] = useState<string>("");
+  const handleBoilerplateSelect = (boilerplateId: string) => {
+    setSelectedBoilerplate(boilerplateId);
+    if (boilerplateId === "replace") {


Would be nice if these things were not just strings we have to type and match correctly, such as enum or maybe just one of those ts variant types mirror | steal | replace that gives a compilation error if you have a typo, since they're a match on a sort of type.

meowjesty · 2025-12-03T22:36:52Z

wizard-frontend/src/components/steps/BoilerplateStep.tsx

+    id: "boilerplate",
+    title: "mirrord configuration",
+    content: (
+      <div className="space-y-6">


meowjesty · 2025-12-03T22:38:47Z

wizard-frontend/src/components/steps/ConfigTabs.tsx

+const ConfigTabs = () => {
+  const { config } = useContext(ConfigDataContext);
+  const [currentTab, setCurrentTab] = useState<string>("target");
+  const [savedIncoming, setSavedIncoming] = useState<any>(readIncoming(config));


any? 😿

meowjesty · 2025-12-03T22:48:55Z

wizard-frontend/src/components/steps/ConfigTabs.tsx

+  };
+
+  const nextTab = () => {
+    if (currentTab === "target") setCurrentTab("network");


Who doesn't love having a bunch of strings control navigation!

Is it feasible to have these tab strings as variants? Maybe setCurrentTab gets some sort of Tab enum thingy?

meowjesty

Couple more small stuff.

meowjesty · 2025-12-05T21:43:29Z

wizard-frontend/src/components/steps/BoilerplateStep.tsx

+import { updateConfigCopyTarget, updateConfigMode } from "../JsonUtils";
+
+export interface BoilerplateCardProps {
+  id: string;


Oh, I guess the enum or the variant typescritiroo thingy would go here, like:

type IdThingy = "steal" | "mirror" | "replace"; id: IdThingy

wizard-frontend/src/components/steps/BoilerplateStep.tsx

Set http_filter ports iff filters are set

…or to resource listing

meowjesty reviewed Dec 1, 2025

View reviewed changes

wizard-frontend/src/App.tsx Show resolved Hide resolved

meowjesty reviewed Dec 1, 2025

View reviewed changes

wizard-frontend/src/components/UserDataContext.tsx Show resolved Hide resolved

0x00A5 requested review from 0x00A5 and meowjesty December 1, 2025 16:38

meowjesty requested changes Dec 1, 2025

View reviewed changes

meowjesty requested changes Dec 3, 2025

View reviewed changes

meowjesty requested changes Dec 5, 2025

View reviewed changes

gememma added 20 commits December 8, 2025 15:40

Add frontend code, command, feature and CI checks

403ada7

Serve frontend, unpack and decode gzipped archive

4b951c5

Initial frontend refactoring and cleanup

7c22ab3

Config and Wizard refactors

892b15e

Generate types from mirrord schema file

cebc830

Add config type generation to CI

4b9af79

WizardStep cleanup

38e4946

Fix diagram

2fcfaaf

Refactoring config tabs for target and network

ab8844c

Remove functionality to edit config in export tab

6c30d1b

Network tab

ac2e9bd

Network tab refactor: toggle sections

9e8ff9a

Tweak steps

0ecf1f8

Remove unused

8378770

Toggles and misc

260e3d5

ConfigTabs cleanup, move network tab to separate component

da888e9

NetworkTab - new layout

78c7a9b

Change the way filters are expressed between UI and config

68f8e7d

Filter and ports UI

bb4d430

Change filter add buttons to add new filter form

bd6421d

gememma added 17 commits December 8, 2025 15:40

Enforce local port uniqueness

0042af0

Set http_filter ports iff filters are set

Set http_filter ports iff filters are set

58d9ef9

Wizard: Special network tab behaviour when replace mode

5149135

Wizard frontend: post-demo requested changes

ef2e30f

Wizard backend: fix bad caching behaviour

c7606d1

Wizard backend: add returning bool to UserData

8ee5d1f

Wizard backend: specify routes individually

2e9abf0

Wizard frontend: query backend for isReturning

f78c3cf

Wizard: return mock info from backend, query endpoints in frontend

f6f37b1

Wizard backend: replace mock data with cluster data

d2995d4

Wizard backend: replace unwraps with ? and expect

4bc61f5

Wizard backend: Fix service port detection, add optional label select…

07cd75f

…or to resource listing

Add changelog

d00c0bb

Wizard backend: Add developer documentation

4005b87

Wizard frontend: Add developer documentation

418476d

lint, formatting: Fix formatting and unused import

6ed3125

ci: allow wizard feature to pass lint with dummy compressed frontend

e8cd304

gememma force-pushed the gemma/cor-986-onboarding-wizard-via-ui branch 2 times, most recently from c35c511 to 6ce0461 Compare December 8, 2025 15:45

clippy: fix clippy warnings on backend wizard

61cd707

gememma force-pushed the gemma/cor-986-onboarding-wizard-via-ui branch 2 times, most recently from d3d7caf to 72e8a2a Compare December 9, 2025 11:42

ci: move wizard sanity test to e2e workflow

32f517b

gememma force-pushed the gemma/cor-986-onboarding-wizard-via-ui branch from 72e8a2a to 32f517b Compare December 9, 2025 12:07

gememma added 3 commits December 9, 2025 14:41

cli: Use opener crate instead of OS-specific Command to open browser

e70d18a

cli: replace println with progress for wizard command

efd6845

cli: fix UserData doc and wizard doc

894d39a

gememma force-pushed the gemma/cor-986-onboarding-wizard-via-ui branch from f2ca4cd to 894d39a Compare December 9, 2025 18:11

cli, deps: small fixes and improvements

e519bef

gememma force-pushed the gemma/cor-986-onboarding-wizard-via-ui branch from eca3897 to e519bef Compare December 10, 2025 11:26

Onboarding Wizard (config creation via web UI) #3769

Are you sure you want to change the base?

Onboarding Wizard (config creation via web UI) #3769

Uh oh!

Conversation

gememma commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

meowjesty left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

meowjesty commented Dec 1, 2025

Uh oh!

meowjesty left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

meowjesty left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

meowjesty left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gememma commented Dec 1, 2025 •

edited

Loading