Refactor: improve bootstrap usability
This commit is contained in:
MangoPig
@@ -559,8 +559,6 @@ export const getWorkspaceContextMenuSections = (
|
||||
id: "organize",
|
||||
label: undefined,
|
||||
items: [
|
||||
{ id: "duplicate-folder", label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
|
||||
{ id: "move-folder", label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
|
||||
{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
|
||||
],
|
||||
},
|
||||
@@ -582,8 +580,6 @@ export const getWorkspaceContextMenuSections = (
|
||||
id: "organize",
|
||||
label: undefined,
|
||||
items: [
|
||||
{ id: `duplicate-${actionPrefix}`, label: "Duplicate", shortcut: { modifiers: ["meta"], key: "d" } },
|
||||
{ id: `move-${actionPrefix}`, label: "Move", shortcut: { modifiers: ["meta"], key: "m" } },
|
||||
{ id: `delete-${actionPrefix}`, label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.data.ts
|
||||
|
||||
export type BootstrapStepKey = "persona" | "instance" | "mode" | "admin" | "structure";
|
||||
|
||||
export type BootstrapStepDefinition = {
|
||||
id: BootstrapStepKey;
|
||||
title: string;
|
||||
buttonLabel: string;
|
||||
};
|
||||
|
||||
export type InstanceForm = {
|
||||
protocol: "http" | "https";
|
||||
access: "local" | "remote";
|
||||
host: string;
|
||||
};
|
||||
|
||||
export type ModeForm = {
|
||||
mode: "personal" | "organizational";
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type AdminForm = {
|
||||
displayName: string;
|
||||
email: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export type StructureForm = {
|
||||
departmentName: string;
|
||||
teamName: string;
|
||||
projectName: string;
|
||||
};
|
||||
|
||||
export type BootstrapPersona = "personal" | "enthusiast" | "team" | "organization";
|
||||
|
||||
export type BootstrapPersonaDefinition = {
|
||||
id: BootstrapPersona;
|
||||
title: string;
|
||||
isAvailable: boolean;
|
||||
bestFor: string;
|
||||
bullets: readonly string[];
|
||||
defaults: {
|
||||
protocol: InstanceForm["protocol"];
|
||||
access: InstanceForm["access"];
|
||||
host: string;
|
||||
mode: ModeForm["mode"];
|
||||
namePlaceholder: string;
|
||||
departmentName: string;
|
||||
teamName: string;
|
||||
projectName: string;
|
||||
};
|
||||
};
|
||||
|
||||
export const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
|
||||
{ id: "persona", title: "What are you setting up your server for?", buttonLabel: "Continue" },
|
||||
{ id: "instance", title: "Connection details", buttonLabel: "Save and continue" },
|
||||
{ id: "mode", title: "Server identity", buttonLabel: "Save and continue" },
|
||||
{ id: "admin", title: "Admin account", buttonLabel: "Save and continue" },
|
||||
{ id: "structure", title: "Initial structure", buttonLabel: "Submit" },
|
||||
];
|
||||
|
||||
export const defaultInstanceForm: InstanceForm = {
|
||||
protocol: "http",
|
||||
access: "local",
|
||||
host: "localhost",
|
||||
};
|
||||
|
||||
export const defaultModeForm: ModeForm = {
|
||||
mode: "personal",
|
||||
name: "",
|
||||
};
|
||||
|
||||
export const defaultAdminForm: AdminForm = {
|
||||
displayName: "Admin",
|
||||
email: "admin@example.com",
|
||||
password: "",
|
||||
};
|
||||
|
||||
export const personalStructureDefaults = {
|
||||
departmentName: "Default",
|
||||
teamName: "Personal",
|
||||
};
|
||||
|
||||
export const organizationalStructureDefaults = {
|
||||
departmentName: "Department",
|
||||
teamName: "Team",
|
||||
};
|
||||
|
||||
export const defaultStructureForm: StructureForm = {
|
||||
...personalStructureDefaults,
|
||||
projectName: "Project",
|
||||
};
|
||||
|
||||
export const bootstrapPersonaDefinitions: readonly BootstrapPersonaDefinition[] = [
|
||||
{
|
||||
id: "personal",
|
||||
title: "Personal",
|
||||
isAvailable: true,
|
||||
bestFor: "Best for low maintenance, personal use",
|
||||
bullets: ["Preconfigured for personal use", "Low setup time", "Easy to manage"],
|
||||
defaults: {
|
||||
protocol: "http",
|
||||
access: "local",
|
||||
host: "localhost",
|
||||
mode: "personal",
|
||||
namePlaceholder: "Personal Server",
|
||||
departmentName: "Default",
|
||||
teamName: "Personal",
|
||||
projectName: "Project",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "enthusiast",
|
||||
title: "Self Hosted Enthusiast",
|
||||
isAvailable: true,
|
||||
bestFor: "Best for people who want to customize their server",
|
||||
bullets: ["Networking knowledge", "Comfortable with tinkering", "Willing to troubleshoot issues"],
|
||||
defaults: {
|
||||
protocol: "https",
|
||||
access: "remote",
|
||||
host: "moku.local",
|
||||
mode: "personal",
|
||||
namePlaceholder: "Personal Server",
|
||||
departmentName: "Default",
|
||||
teamName: "Personal",
|
||||
projectName: "Project",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "team",
|
||||
title: "Team",
|
||||
isAvailable: true,
|
||||
bestFor: "Best for low maintenance but for small team",
|
||||
bullets: ["Built-in collaboration with low setup time", "Keeps the shared structure simple", "Good for a small product, design, or delivery team"],
|
||||
defaults: {
|
||||
protocol: "http",
|
||||
access: "local",
|
||||
host: "localhost",
|
||||
mode: "organizational",
|
||||
namePlaceholder: "Team Server",
|
||||
departmentName: "Default",
|
||||
teamName: "Core Team",
|
||||
projectName: "Project",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "organization",
|
||||
title: "Organization",
|
||||
isAvailable: true,
|
||||
bestFor: "Best for multiple teams and shared ownership",
|
||||
bullets: ["SME to Organization", "Fine grained access control", "Better fit for teams with multiple departments"],
|
||||
defaults: {
|
||||
protocol: "https",
|
||||
access: "remote",
|
||||
host: "workspace.example.com",
|
||||
mode: "organizational",
|
||||
namePlaceholder: "Organization server name",
|
||||
departmentName: "Operations",
|
||||
teamName: "Platform Team",
|
||||
projectName: "Moku",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const workspaceHomeFieldTooltips = {
|
||||
protocol: "Usually people use http for a local-only setup and https when the server will be reached over a domain or reverse proxy.",
|
||||
access: "Usually people use local when Moku is only reached on the same machine or LAN, and remote when they plan to reach it from another network or public domain.",
|
||||
host: "Examples people usually set here are localhost, moku.local, or a real domain like workspace.example.com depending on how they plan to reach the server.",
|
||||
serverName: "This is the friendly name people usually give the server itself, for example Personal Server, Ronald's Server, Homelab, Studio, or Workspace.",
|
||||
department: "Departments are the highest-level grouping for work. People usually use names like Default, Operations, Product, Design, or Engineering.",
|
||||
team: "Teams sit inside a department. Common examples are Personal, Platform Team, Core Team, Delivery, or Design Systems.",
|
||||
project: "Projects are the workspace or initiative people work inside. Common examples are Project, Shared Workspace, Moku, Client Portal, or Website Redesign.",
|
||||
} as const;
|
||||
@@ -0,0 +1,542 @@
|
||||
// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.hook.ts
|
||||
|
||||
import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { resolveAPIBase } from "../../../lib/api";
|
||||
import {
|
||||
bootstrapPersonaDefinitions,
|
||||
bootstrapStepDefinitions,
|
||||
defaultAdminForm,
|
||||
defaultInstanceForm,
|
||||
defaultModeForm,
|
||||
defaultStructureForm,
|
||||
organizationalStructureDefaults,
|
||||
personalStructureDefaults,
|
||||
type AdminForm,
|
||||
type BootstrapPersona,
|
||||
type BootstrapPersonaDefinition,
|
||||
type BootstrapStepDefinition,
|
||||
type BootstrapStepKey,
|
||||
type InstanceForm,
|
||||
type ModeForm,
|
||||
type StructureForm,
|
||||
} from "./WorkspaceHome.data";
|
||||
|
||||
type AppShellBootstrapAdapter = {
|
||||
installation: () => { isBootstrapped?: boolean; materializationStatus?: string; materializationError?: string } | undefined;
|
||||
status: () => string;
|
||||
reload: () => Promise<void>;
|
||||
};
|
||||
|
||||
export type BootstrapSubmissionState = {
|
||||
status: "idle" | "submitting" | "success" | "error";
|
||||
error: string;
|
||||
};
|
||||
|
||||
export type MaterializationState = "not_started" | "pending" | "running" | "succeeded" | "failed";
|
||||
|
||||
export type FieldTooltipState = {
|
||||
text: string;
|
||||
left: number;
|
||||
top: number;
|
||||
placement: "top" | "bottom";
|
||||
};
|
||||
|
||||
const initialSubmissionState = (): BootstrapSubmissionState => ({
|
||||
status: "idle",
|
||||
error: "",
|
||||
});
|
||||
|
||||
const materializationPollIntervalMs = 2000;
|
||||
|
||||
const readResponseBody = async (response: Response): Promise<unknown> => {
|
||||
const raw = await response.text();
|
||||
|
||||
if (!raw.trim()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(raw);
|
||||
} catch {
|
||||
return raw;
|
||||
}
|
||||
};
|
||||
|
||||
const readResponseError = (step: BootstrapStepKey, data: unknown): string => {
|
||||
const fallback = `Bootstrap ${step} request failed.`;
|
||||
|
||||
if (typeof data === "string") {
|
||||
const message = data.trim();
|
||||
return message || fallback;
|
||||
}
|
||||
|
||||
if (!data || typeof data !== "object") {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const record = data as {
|
||||
error?: string;
|
||||
message?: string;
|
||||
requestId?: string;
|
||||
};
|
||||
const message = typeof record.message === "string" ? record.message.trim() : "";
|
||||
const errorCode = typeof record.error === "string" ? record.error.trim() : "";
|
||||
const requestId = typeof record.requestId === "string" ? record.requestId.trim() : "";
|
||||
|
||||
if (!message && !errorCode && !requestId) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const details: string[] = [];
|
||||
|
||||
if (errorCode) {
|
||||
details.push(`code: ${errorCode}`);
|
||||
}
|
||||
|
||||
if (requestId) {
|
||||
details.push(`request: ${requestId}`);
|
||||
}
|
||||
|
||||
if (message && details.length > 0) {
|
||||
return `${message} (${details.join(", ")})`;
|
||||
}
|
||||
|
||||
if (message) {
|
||||
return message;
|
||||
}
|
||||
|
||||
return `${fallback} (${details.join(", ")})`;
|
||||
};
|
||||
|
||||
export const useWorkspaceHomeWizard = (appShellData: AppShellBootstrapAdapter) => {
|
||||
const [instanceForm, setInstanceForm] = createStore<InstanceForm>({ ...defaultInstanceForm });
|
||||
const [modeForm, setModeForm] = createStore<ModeForm>({ ...defaultModeForm });
|
||||
const [adminForm, setAdminForm] = createStore<AdminForm>({ ...defaultAdminForm });
|
||||
const [structureForm, setStructureForm] = createStore<StructureForm>({ ...defaultStructureForm });
|
||||
const [selectedPersona, setSelectedPersona] = createSignal<BootstrapPersona>("enthusiast");
|
||||
const [hasChosenPersona, setHasChosenPersona] = createSignal(false);
|
||||
const [stepState, setStepState] = createStore<Record<BootstrapStepKey, BootstrapSubmissionState>>({
|
||||
persona: initialSubmissionState(),
|
||||
instance: initialSubmissionState(),
|
||||
mode: initialSubmissionState(),
|
||||
admin: initialSubmissionState(),
|
||||
structure: initialSubmissionState(),
|
||||
});
|
||||
const [isBootstrapStateResolved, setIsBootstrapStateResolved] = createSignal(false);
|
||||
const [isBootstrapComplete, setIsBootstrapComplete] = createSignal(false);
|
||||
const [isWizardOpen, setIsWizardOpen] = createSignal(false);
|
||||
const [isFinishingBootstrapFlow, setIsFinishingBootstrapFlow] = createSignal(false);
|
||||
const [currentStepIndex, setCurrentStepIndex] = createSignal(0);
|
||||
const [fieldTooltip, setFieldTooltip] = createSignal<FieldTooltipState | null>(null);
|
||||
|
||||
const installation = createMemo(() => appShellData.installation());
|
||||
const materializationState = createMemo<MaterializationState>(() => {
|
||||
const status = installation()?.materializationStatus;
|
||||
|
||||
switch (status) {
|
||||
case "pending":
|
||||
case "running":
|
||||
case "failed":
|
||||
case "succeeded":
|
||||
case "not_started":
|
||||
return status;
|
||||
default:
|
||||
return installation()?.isBootstrapped ? "succeeded" : "not_started";
|
||||
}
|
||||
});
|
||||
const isBootstrapPersisted = createMemo(() => installation()?.isBootstrapped ?? false);
|
||||
const isMaterializationInFlight = createMemo(() => materializationState() === "pending" || materializationState() === "running");
|
||||
const hasMaterializationFailed = createMemo(() => materializationState() === "failed");
|
||||
const showBootstrapFinishingState = createMemo(() => isFinishingBootstrapFlow() && (isMaterializationInFlight() || hasMaterializationFailed()));
|
||||
const materializationStatusLabel = createMemo(() => {
|
||||
switch (materializationState()) {
|
||||
case "pending":
|
||||
return "Materialization queued";
|
||||
case "running":
|
||||
return "Materialization running";
|
||||
case "failed":
|
||||
return "Materialization failed";
|
||||
case "succeeded":
|
||||
return "Ready";
|
||||
default:
|
||||
return "Not started";
|
||||
}
|
||||
});
|
||||
const materializationMessage = createMemo(() => {
|
||||
if (isMaterializationInFlight()) {
|
||||
return "Your bootstrap is saved. The worker is still creating the POSIX skeleton and rebuilding the app shell index.";
|
||||
}
|
||||
|
||||
if (hasMaterializationFailed()) {
|
||||
return installation()?.materializationError || "Bootstrap saved, but background materialization did not finish cleanly.";
|
||||
}
|
||||
|
||||
return "";
|
||||
});
|
||||
const personaDefinition = createMemo<BootstrapPersonaDefinition>(() => bootstrapPersonaDefinitions.find((persona) => persona.id === selectedPersona()) ?? bootstrapPersonaDefinitions[0]!);
|
||||
const selectedPersonaIsAvailable = createMemo(() => personaDefinition().isAvailable);
|
||||
const usesCondensedBootstrapFlow = createMemo(() => selectedPersona() === "personal" || selectedPersona() === "team");
|
||||
const activeBootstrapSteps = createMemo<readonly BootstrapStepDefinition[]>(() => {
|
||||
if (usesCondensedBootstrapFlow()) {
|
||||
return [bootstrapStepDefinitions[0]!, bootstrapStepDefinitions[2]!, bootstrapStepDefinitions[3]!];
|
||||
}
|
||||
|
||||
return bootstrapStepDefinitions;
|
||||
});
|
||||
const activeWizardSteps = createMemo(() => activeBootstrapSteps().filter((step) => step.id !== "persona"));
|
||||
|
||||
createEffect(() => {
|
||||
const defaults = personaDefinition().defaults;
|
||||
|
||||
setInstanceForm({
|
||||
protocol: defaults.protocol,
|
||||
access: defaults.access,
|
||||
host: defaults.host,
|
||||
});
|
||||
setModeForm("mode", defaults.mode);
|
||||
setStructureForm({
|
||||
departmentName: defaults.departmentName,
|
||||
teamName: defaults.teamName,
|
||||
projectName: defaults.projectName,
|
||||
});
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (modeForm.mode === "personal") {
|
||||
setStructureForm("departmentName", personalStructureDefaults.departmentName);
|
||||
setStructureForm("teamName", personalStructureDefaults.teamName);
|
||||
return;
|
||||
}
|
||||
|
||||
if (structureForm.departmentName === personalStructureDefaults.departmentName) {
|
||||
setStructureForm("departmentName", organizationalStructureDefaults.departmentName);
|
||||
}
|
||||
|
||||
if (structureForm.teamName === personalStructureDefaults.teamName) {
|
||||
setStructureForm("teamName", organizationalStructureDefaults.teamName);
|
||||
}
|
||||
});
|
||||
|
||||
const resetWizardState = (): void => {
|
||||
setSelectedPersona("enthusiast");
|
||||
setHasChosenPersona(false);
|
||||
setInstanceForm({ ...defaultInstanceForm });
|
||||
setModeForm({ ...defaultModeForm });
|
||||
setAdminForm({ ...defaultAdminForm });
|
||||
setStructureForm({ ...defaultStructureForm });
|
||||
setStepState({
|
||||
persona: initialSubmissionState(),
|
||||
instance: initialSubmissionState(),
|
||||
mode: initialSubmissionState(),
|
||||
admin: initialSubmissionState(),
|
||||
structure: initialSubmissionState(),
|
||||
});
|
||||
setCurrentStepIndex(0);
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
const shellStatus = appShellData.status();
|
||||
|
||||
if (shellStatus === "idle" || shellStatus === "loading") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (shellStatus !== "success") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isBootstrapPersisted()) {
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
resetWizardState();
|
||||
}
|
||||
|
||||
setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
|
||||
setIsWizardOpen(!isBootstrapPersisted() || showBootstrapFinishingState());
|
||||
setIsBootstrapStateResolved(true);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (!isFinishingBootstrapFlow()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isMaterializationInFlight() || hasMaterializationFailed()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
setIsWizardOpen(false);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (!isBootstrapPersisted() || !isMaterializationInFlight()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
let timeoutId: number | undefined;
|
||||
|
||||
const scheduleReload = (): void => {
|
||||
timeoutId = window.setTimeout(async () => {
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
|
||||
await appShellData.reload();
|
||||
|
||||
if (!cancelled && isBootstrapPersisted() && isMaterializationInFlight()) {
|
||||
scheduleReload();
|
||||
}
|
||||
}, materializationPollIntervalMs);
|
||||
};
|
||||
|
||||
scheduleReload();
|
||||
|
||||
onCleanup(() => {
|
||||
cancelled = true;
|
||||
|
||||
if (timeoutId !== undefined) {
|
||||
window.clearTimeout(timeoutId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const apiBase = (): string => resolveAPIBase();
|
||||
const bootstrapNamePlaceholder = (): string => personaDefinition().defaults.namePlaceholder;
|
||||
const bootstrapStepCount = createMemo(() => activeWizardSteps().length);
|
||||
const currentStep = createMemo<BootstrapStepDefinition>(() => activeBootstrapSteps()[currentStepIndex()] ?? activeBootstrapSteps()[0] ?? bootstrapStepDefinitions[0]!);
|
||||
const currentWizardStepIndex = createMemo(() => {
|
||||
const visibleIndex = activeWizardSteps().findIndex((step) => step.id === currentStep().id);
|
||||
|
||||
return visibleIndex >= 0 ? visibleIndex : 0;
|
||||
});
|
||||
const wizardProgressPercent = createMemo(() => {
|
||||
const totalSteps = bootstrapStepCount();
|
||||
const activeIndex = Math.max(currentWizardStepIndex(), 0);
|
||||
|
||||
if (totalSteps <= 1) {
|
||||
return 100;
|
||||
}
|
||||
|
||||
return (activeIndex / (totalSteps - 1)) * 100;
|
||||
});
|
||||
const wizardProgressFillWidth = createMemo(() => {
|
||||
if (currentStepIndex() <= 0) {
|
||||
return `${wizardProgressPercent()}%`;
|
||||
}
|
||||
|
||||
return `calc(${wizardProgressPercent()}% + ((var(--control-size-md) - var(--space-2)) / 2))`;
|
||||
});
|
||||
const currentStepState = createMemo<BootstrapSubmissionState>(() => stepState[currentStep().id]);
|
||||
const isFirstStep = (): boolean => currentStepIndex() === 0;
|
||||
const isLastStep = (): boolean => currentStepIndex() === activeBootstrapSteps().length - 1;
|
||||
const canDismissWizard = (): boolean => isBootstrapPersisted() && !isMaterializationInFlight();
|
||||
|
||||
createEffect(() => {
|
||||
setCurrentStepIndex((index) => Math.min(index, activeBootstrapSteps().length - 1));
|
||||
});
|
||||
|
||||
const submitStep = async (step: BootstrapStepKey, payload: unknown): Promise<boolean> => {
|
||||
setStepState(step, { status: "submitting", error: "" });
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiBase()}/bootstrap/steps/${step}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await readResponseBody(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(readResponseError(step, data));
|
||||
}
|
||||
|
||||
setStepState(step, {
|
||||
status: "success",
|
||||
error: "",
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
setStepState(step, {
|
||||
status: "error",
|
||||
error: error instanceof Error ? error.message : `Bootstrap ${step} request failed.`,
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const payloadForStep = (step: BootstrapStepKey): unknown => {
|
||||
switch (step) {
|
||||
case "instance":
|
||||
return instanceForm;
|
||||
case "mode":
|
||||
return modeForm;
|
||||
case "admin":
|
||||
return adminForm;
|
||||
case "structure":
|
||||
return structureForm;
|
||||
}
|
||||
};
|
||||
|
||||
const applyPersonaSelection = (persona: BootstrapPersona): void => {
|
||||
const definition = bootstrapPersonaDefinitions.find((candidate) => candidate.id === persona);
|
||||
|
||||
if (!definition?.isAvailable) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedPersona(persona);
|
||||
setHasChosenPersona(true);
|
||||
setStepState("persona", {
|
||||
status: "success",
|
||||
error: "",
|
||||
});
|
||||
setCurrentStepIndex((index) => Math.min(index + 1, activeBootstrapSteps().length - 1));
|
||||
};
|
||||
|
||||
const statusLabel = (state: BootstrapSubmissionState): string => {
|
||||
switch (state.status) {
|
||||
case "submitting":
|
||||
return "Sending";
|
||||
case "error":
|
||||
return "Request failed";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
const submitCurrentStep = async (): Promise<void> => {
|
||||
const step = currentStep().id;
|
||||
|
||||
if (step === "persona") {
|
||||
applyPersonaSelection(selectedPersona());
|
||||
return;
|
||||
}
|
||||
|
||||
if (step === "mode" && usesCondensedBootstrapFlow() && stepState.instance.status !== "success") {
|
||||
const didPersistInstanceDefaults = await submitStep("instance", instanceForm);
|
||||
|
||||
if (!didPersistInstanceDefaults) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const didSucceed = await submitStep(step, payloadForStep(step));
|
||||
|
||||
if (!didSucceed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (step === "admin" && usesCondensedBootstrapFlow()) {
|
||||
const didPersistStructureDefaults = await submitStep("structure", structureForm);
|
||||
|
||||
if (!didPersistStructureDefaults) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isLastStep()) {
|
||||
await appShellData.reload();
|
||||
|
||||
const shouldShowFinishingState = isBootstrapPersisted() && (isMaterializationInFlight() || hasMaterializationFailed());
|
||||
setIsFinishingBootstrapFlow(shouldShowFinishingState);
|
||||
setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
|
||||
setIsWizardOpen(!isBootstrapPersisted() || shouldShowFinishingState);
|
||||
setIsBootstrapStateResolved(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentStepIndex((index) => Math.min(index + 1, activeBootstrapSteps().length - 1));
|
||||
};
|
||||
|
||||
const showFieldTooltip = (target: HTMLElement, text: string): void => {
|
||||
const rect = target.getBoundingClientRect();
|
||||
const placement = rect.top > 96 ? "top" : "bottom";
|
||||
const viewportPadding = 20;
|
||||
const left = Math.min(Math.max(rect.left + rect.width / 2, viewportPadding), window.innerWidth - viewportPadding);
|
||||
const top = placement === "top" ? rect.top - 10 : rect.bottom + 10;
|
||||
|
||||
setFieldTooltip({ text, left, top, placement });
|
||||
};
|
||||
|
||||
const hideFieldTooltip = (): void => {
|
||||
setFieldTooltip(null);
|
||||
};
|
||||
|
||||
const stepStatusLabel = (step: BootstrapStepDefinition): string => {
|
||||
const state = stepState[step.id];
|
||||
|
||||
if (state.status === "success") {
|
||||
return "Done";
|
||||
}
|
||||
|
||||
if (state.status === "error") {
|
||||
return "Needs retry";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
return {
|
||||
instanceForm,
|
||||
setInstanceForm,
|
||||
modeForm,
|
||||
setModeForm,
|
||||
adminForm,
|
||||
setAdminForm,
|
||||
structureForm,
|
||||
setStructureForm,
|
||||
selectedPersona,
|
||||
setSelectedPersona,
|
||||
hasChosenPersona,
|
||||
stepState,
|
||||
isBootstrapStateResolved,
|
||||
isBootstrapComplete,
|
||||
isWizardOpen,
|
||||
setIsWizardOpen,
|
||||
isFinishingBootstrapFlow,
|
||||
setIsFinishingBootstrapFlow,
|
||||
fieldTooltip,
|
||||
materializationState,
|
||||
isMaterializationInFlight,
|
||||
hasMaterializationFailed,
|
||||
showBootstrapFinishingState,
|
||||
materializationStatusLabel,
|
||||
materializationMessage,
|
||||
personaDefinition,
|
||||
selectedPersonaIsAvailable,
|
||||
usesCondensedBootstrapFlow,
|
||||
activeWizardSteps,
|
||||
bootstrapNamePlaceholder,
|
||||
bootstrapStepCount,
|
||||
currentStep,
|
||||
currentWizardStepIndex,
|
||||
wizardProgressFillWidth,
|
||||
currentStepState,
|
||||
isFirstStep,
|
||||
canDismissWizard,
|
||||
resetWizardState,
|
||||
handleCurrentStepSubmit: (event: SubmitEvent & { currentTarget: HTMLFormElement; target: Element }): void => {
|
||||
event.preventDefault();
|
||||
void submitCurrentStep();
|
||||
},
|
||||
applyPersonaSelection,
|
||||
statusLabel,
|
||||
showFieldTooltip,
|
||||
hideFieldTooltip,
|
||||
stepStatusLabel,
|
||||
navigateBack: (): void => {
|
||||
setCurrentStepIndex((index) => Math.max(index - 1, 0));
|
||||
},
|
||||
navigateToVisibleStep: (index: number): void => {
|
||||
setCurrentStepIndex(index + 1);
|
||||
},
|
||||
};
|
||||
};
|
||||
@@ -1,3 +1,5 @@
|
||||
/* Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss */
|
||||
|
||||
.viewport,
|
||||
.wizardLayer {
|
||||
--workspace-content-max-width: var(--content-width-wide);
|
||||
@@ -19,14 +21,14 @@
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-height: calc(var(--control-size-md) - var(--space-3));
|
||||
padding: 0;
|
||||
gap: var(--space-2);
|
||||
min-height: calc(var(--control-size-md) - var(--space-3));
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.workspaceTopBarStart,
|
||||
.workspaceTopBarEnd {
|
||||
min-width: calc(var(--control-size-md) - 0.5rem);
|
||||
min-width: calc(var(--control-size-md) - 0.5rem);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -42,7 +44,7 @@
|
||||
}
|
||||
|
||||
.workspaceBreadcrumb {
|
||||
@include text-caption;
|
||||
@include text-caption;
|
||||
min-width: 0;
|
||||
color: var(--color-text-muted);
|
||||
white-space: nowrap;
|
||||
@@ -54,8 +56,8 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: calc(var(--control-size-md) - 0.5rem);
|
||||
height: calc(var(--control-size-md) - 0.5rem);
|
||||
width: calc(var(--control-size-md) - 0.5rem);
|
||||
height: calc(var(--control-size-md) - 0.5rem);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 44%, transparent);
|
||||
border-radius: var(--radius-pill);
|
||||
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
||||
@@ -93,18 +95,18 @@
|
||||
}
|
||||
|
||||
.heroStatus {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: start;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.heroStatusMessage {
|
||||
max-width: 64ch;
|
||||
color: var(--color-text-muted);
|
||||
max-width: 64ch;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.heroStatusMessage[data-status="failed"] {
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
}
|
||||
|
||||
.title {
|
||||
@@ -211,15 +213,15 @@
|
||||
|
||||
.statusBadge[data-status="pending"],
|
||||
.statusBadge[data-status="running"] {
|
||||
color: var(--bootstrap-accent);
|
||||
border-color: color-mix(in srgb, var(--bootstrap-accent) 38%, transparent);
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 10%, var(--color-surface-secondary));
|
||||
color: var(--bootstrap-accent);
|
||||
border-color: color-mix(in srgb, var(--bootstrap-accent) 38%, transparent);
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 10%, var(--color-surface-secondary));
|
||||
}
|
||||
|
||||
.statusBadge[data-status="failed"] {
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 68%, transparent);
|
||||
background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 80%, transparent);
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 68%, transparent);
|
||||
background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 80%, transparent);
|
||||
}
|
||||
|
||||
.statusBadge[data-status="error"] {
|
||||
@@ -268,11 +270,249 @@
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.fieldLabelRow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.fieldInfoButton {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: help;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.fieldInfoButton:hover,
|
||||
.fieldInfoButton:focus-visible {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.fieldTooltip {
|
||||
position: fixed;
|
||||
z-index: calc(var(--z-modal, 1000) + 4);
|
||||
pointer-events: none;
|
||||
transform: translateX(-50%);
|
||||
max-width: min(18rem, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
.fieldTooltip[data-placement="top"] {
|
||||
transform: translate(-50%, -100%);
|
||||
}
|
||||
|
||||
.fieldTooltip[data-placement="bottom"] {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.fieldTooltipBubble {
|
||||
position: relative;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--color-surface-elevated, var(--color-surface)) 96%, black 4%);
|
||||
box-shadow: var(--shadow-soft);
|
||||
color: var(--color-text);
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.fieldTooltipBubble::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
background: color-mix(in srgb, var(--color-surface-elevated, var(--color-surface)) 96%, black 4%);
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.fieldTooltip[data-placement="top"] .fieldTooltipBubble::after {
|
||||
top: calc(100% - 0.3rem);
|
||||
border-right: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
|
||||
}
|
||||
|
||||
.fieldTooltip[data-placement="bottom"] .fieldTooltipBubble::after {
|
||||
bottom: calc(100% - 0.3rem);
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
|
||||
border-left: 1px solid color-mix(in srgb, var(--color-border-strong) 48%, transparent);
|
||||
}
|
||||
|
||||
.fieldHelp {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.personaIntro {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.personaGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.personaCard {
|
||||
appearance: none;
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
|
||||
border-radius: var(--radius-xl);
|
||||
background: color-mix(in srgb, var(--color-surface-secondary) 84%, transparent);
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 180ms var(--easing-standard),
|
||||
border-color 160ms var(--easing-standard),
|
||||
background 160ms var(--easing-standard),
|
||||
box-shadow 160ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.personaCard:hover,
|
||||
.personaCard:focus-visible,
|
||||
.personaCard[data-selected="true"] {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--bootstrap-accent) 32%, var(--color-border));
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 7%, var(--color-surface));
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.personaCard:focus-visible {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
var(--shadow-soft),
|
||||
0 0 0 3px color-mix(in srgb, var(--bootstrap-accent) 16%, transparent);
|
||||
}
|
||||
|
||||
.personaCard[data-available="false"] {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.personaCard[data-available="false"]:hover,
|
||||
.personaCard[data-available="false"]:focus-visible,
|
||||
.personaCard[data-available="false"][data-selected="true"] {
|
||||
transform: none;
|
||||
border-color: color-mix(in srgb, var(--color-border) 88%, transparent);
|
||||
background: color-mix(in srgb, var(--color-surface-secondary) 84%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.personaCardMedia {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
width: min(100%, 16rem);
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1px dashed color-mix(in srgb, var(--color-border-strong) 40%, transparent);
|
||||
border-radius: calc(var(--radius-xl) - var(--space-1));
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--color-surface-elevated) 92%, transparent),
|
||||
color-mix(in srgb, var(--color-surface-secondary) 88%, transparent)
|
||||
);
|
||||
transition:
|
||||
filter 180ms var(--easing-standard),
|
||||
opacity 180ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.personaCardBody {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.personaCardTitle {
|
||||
@include text-title;
|
||||
margin: 0;
|
||||
max-width: min(100%, 14rem);
|
||||
padding: 0.35rem 0.65rem;
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--color-surface) 84%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.personaCardDetails {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
align-self: end;
|
||||
padding: var(--space-3);
|
||||
border-radius: var(--radius-lg);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--color-surface) 18%, transparent),
|
||||
color-mix(in srgb, var(--color-surface) 92%, transparent)
|
||||
);
|
||||
backdrop-filter: blur(12px);
|
||||
transition:
|
||||
max-height 180ms var(--easing-standard),
|
||||
opacity 160ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.personaCard:hover .personaCardMedia,
|
||||
.personaCard:focus-visible .personaCardMedia,
|
||||
.personaCard[data-selected="true"] .personaCardMedia {
|
||||
filter: brightness(0.72);
|
||||
opacity: 0.92;
|
||||
transform: scale(0.985);
|
||||
}
|
||||
|
||||
.personaCard:hover .personaCardDetails,
|
||||
.personaCard:focus-visible .personaCardDetails,
|
||||
.personaCard[data-selected="true"] .personaCardDetails {
|
||||
max-height: 12rem;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.personaCard[data-available="false"]:hover .personaCardMedia,
|
||||
.personaCard[data-available="false"]:focus-visible .personaCardMedia,
|
||||
.personaCard[data-available="false"][data-selected="true"] .personaCardMedia {
|
||||
filter: brightness(0.82);
|
||||
opacity: 0.96;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.personaBestFor,
|
||||
.personaBulletList {
|
||||
margin: 0;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.personaBulletList {
|
||||
padding-left: 1rem;
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.personaAvailability {
|
||||
@include text-caption;
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select {
|
||||
min-height: var(--control-size-md);
|
||||
@@ -370,7 +610,7 @@
|
||||
.primaryButton:hover,
|
||||
.secondaryButton:hover,
|
||||
.wizardCloseButton:hover,
|
||||
.wizardStepButton:hover {
|
||||
.wizardProgressStep:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -445,72 +685,93 @@
|
||||
|
||||
.wizardBody {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
|
||||
gap: var(--space-4);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.wizardSidebar {
|
||||
.wizardProgress {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.wizardSidebarSection {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.wizardSteps {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
.wizardProgressTrack {
|
||||
position: absolute;
|
||||
left: calc((var(--control-size-md) - var(--space-2)) / 2);
|
||||
right: calc((var(--control-size-md) - var(--space-2)) / 2);
|
||||
top: calc((var(--control-size-md) - var(--space-2)) / 2);
|
||||
height: 2px;
|
||||
background: color-mix(in srgb, var(--color-border) 72%, transparent);
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wizardStepButton {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
.wizardProgressFill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 72%, white 8%);
|
||||
transition: width 220ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.wizardProgressSteps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
|
||||
background: color-mix(in srgb, var(--color-surface-secondary) 84%, transparent);
|
||||
justify-content: space-between;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.wizardStepButton[data-active="true"] {
|
||||
border-color: color-mix(in srgb, var(--bootstrap-accent) 42%, transparent);
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 10%, var(--color-surface));
|
||||
.wizardProgressStep {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wizardStepButton:disabled {
|
||||
opacity: 0.56;
|
||||
.wizardProgressStep:disabled {
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wizardStepIndex {
|
||||
.wizardProgressIndex {
|
||||
width: calc(var(--control-size-md) - var(--space-2));
|
||||
height: calc(var(--control-size-md) - var(--space-2));
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-pill);
|
||||
background: color-mix(in srgb, var(--color-surface) 80%, transparent);
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
|
||||
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
color: var(--color-text-muted);
|
||||
transition:
|
||||
border-color 160ms var(--easing-standard),
|
||||
background 160ms var(--easing-standard),
|
||||
color 160ms var(--easing-standard),
|
||||
box-shadow 160ms var(--easing-standard),
|
||||
transform 180ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.wizardProgressStep[data-active="true"] .wizardProgressIndex,
|
||||
.wizardProgressStep[data-complete="true"] .wizardProgressIndex {
|
||||
border-color: color-mix(in srgb, var(--bootstrap-accent) 42%, transparent);
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 12%, var(--color-surface));
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.wizardStepCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.125rem;
|
||||
.wizardProgressStep[data-active="true"] .wizardProgressIndex {
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bootstrap-accent) 14%, transparent);
|
||||
}
|
||||
|
||||
.wizardStepCopy strong {
|
||||
@include text-label;
|
||||
}
|
||||
|
||||
.wizardStepCopy small {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
.wizardProgressStep:not(:disabled):hover .wizardProgressIndex,
|
||||
.wizardProgressStep:not(:disabled):focus-visible .wizardProgressIndex {
|
||||
transform: translateY(-1px);
|
||||
border-color: color-mix(in srgb, var(--bootstrap-accent) 36%, var(--color-border));
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.wizardStepPanel {
|
||||
@@ -519,111 +780,115 @@
|
||||
}
|
||||
|
||||
.wizardFinishPanel {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
justify-items: stretch;
|
||||
padding: var(--space-2) 0 0;
|
||||
min-height: min(14rem, 32dvh);
|
||||
align-content: center;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
justify-items: stretch;
|
||||
padding: var(--space-2) 0 0;
|
||||
min-height: min(14rem, 32dvh);
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.wizardFinishShell {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
width: min(100%, 40rem);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
width: min(100%, 40rem);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wizardFinishStatusRow {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: var(--space-3);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.wizardFinishIndicator {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 8%, transparent);
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
|
||||
background: color-mix(in srgb, var(--bootstrap-accent) 8%, transparent);
|
||||
}
|
||||
|
||||
.wizardFinishIndicator[data-status="failed"] {
|
||||
border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 44%, transparent);
|
||||
background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 36%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-danger-border, var(--color-border)) 44%, transparent);
|
||||
background: color-mix(in srgb, var(--color-danger-surface, var(--color-surface-secondary)) 36%, transparent);
|
||||
}
|
||||
|
||||
.wizardFinishSpinner {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 999px;
|
||||
border: 2px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
|
||||
border-top-color: var(--bootstrap-accent);
|
||||
animation: wizardFinishSpin 900ms linear infinite;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 999px;
|
||||
border: 2px solid color-mix(in srgb, var(--bootstrap-accent) 18%, transparent);
|
||||
border-top-color: var(--bootstrap-accent);
|
||||
animation: wizardFinishSpin 900ms linear infinite;
|
||||
}
|
||||
|
||||
.wizardFinishIndicator[data-status="failed"] .wizardFinishSpinner {
|
||||
border: 2px solid color-mix(in srgb, var(--color-danger-border, var(--color-border)) 22%, transparent);
|
||||
border-top-color: var(--color-danger-text, var(--color-text));
|
||||
animation: none;
|
||||
transform: rotate(45deg);
|
||||
border-radius: var(--radius-sm);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid color-mix(in srgb, var(--color-danger-border, var(--color-border)) 22%, transparent);
|
||||
border-top-color: var(--color-danger-text, var(--color-text));
|
||||
animation: none;
|
||||
transform: rotate(45deg);
|
||||
border-radius: var(--radius-sm);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.wizardFinishCopy {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.wizardFinishTitle {
|
||||
@include text-title;
|
||||
margin: 0;
|
||||
@include text-title;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wizardFinishDescription,
|
||||
.wizardFinishMessage,
|
||||
.wizardFinishHint {
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.wizardFinishMessage[data-status="failed"] {
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
color: var(--color-danger-text, var(--color-text));
|
||||
}
|
||||
|
||||
.wizardFinishHint {
|
||||
@include text-caption;
|
||||
@include text-caption;
|
||||
}
|
||||
|
||||
.wizardFinishActions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
padding-top: var(--space-1);
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
padding-top: var(--space-1);
|
||||
}
|
||||
|
||||
@keyframes wizardFinishSpin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-down(tablet) {
|
||||
.personaGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.summaryGrid,
|
||||
.wizardBody {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -669,21 +934,20 @@
|
||||
}
|
||||
|
||||
.wizardHeader,
|
||||
.wizardBody,
|
||||
.wizardSidebar {
|
||||
.wizardBody {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.wizardSteps {
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(10rem, 1fr);
|
||||
.wizardProgressSteps {
|
||||
justify-content: flex-start;
|
||||
gap: var(--space-8);
|
||||
overflow-x: auto;
|
||||
padding-bottom: var(--space-1);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.wizardStepButton {
|
||||
min-width: 10rem;
|
||||
.wizardProgressStep {
|
||||
min-width: calc(var(--control-size-md) - var(--space-2));
|
||||
}
|
||||
|
||||
.wizardFormActions {
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
import { For, Show, type JSX } from "solid-js";
|
||||
import { CircleHelp } from "../../../lib/icons";
|
||||
import {
|
||||
organizationalStructureDefaults,
|
||||
workspaceHomeFieldTooltips,
|
||||
type AdminForm,
|
||||
type BootstrapPersona,
|
||||
type BootstrapPersonaDefinition,
|
||||
type BootstrapStepDefinition,
|
||||
type BootstrapStepKey,
|
||||
type InstanceForm,
|
||||
type ModeForm,
|
||||
type StructureForm,
|
||||
} from "./WorkspaceHome.data";
|
||||
import styles from "./WorkspaceHome.module.scss";
|
||||
|
||||
type BootstrapSubmissionState = {
|
||||
status: "idle" | "submitting" | "success" | "error";
|
||||
error: string;
|
||||
};
|
||||
|
||||
type MaterializationState = "not_started" | "pending" | "running" | "succeeded" | "failed";
|
||||
|
||||
type TooltipHandlers = {
|
||||
onShowTooltip: (target: HTMLElement, text: string) => void;
|
||||
onHideTooltip: () => void;
|
||||
};
|
||||
|
||||
type FieldLabelWithTooltipProps = TooltipHandlers & {
|
||||
label: string;
|
||||
tooltip?: string;
|
||||
};
|
||||
|
||||
export const FieldLabelWithTooltip = (props: FieldLabelWithTooltipProps): JSX.Element => (
|
||||
<span class={styles.fieldLabelRow}>
|
||||
<span class={styles.fieldLabel}>{props.label}</span>
|
||||
<Show when={props.tooltip}>
|
||||
<button
|
||||
type="button"
|
||||
class={styles.fieldInfoButton}
|
||||
aria-label={`${props.label} help: ${props.tooltip}`}
|
||||
onMouseEnter={(event): void => props.onShowTooltip(event.currentTarget, props.tooltip!)}
|
||||
onMouseLeave={props.onHideTooltip}
|
||||
onFocus={(event): void => props.onShowTooltip(event.currentTarget, props.tooltip!)}
|
||||
onBlur={props.onHideTooltip}
|
||||
>
|
||||
<CircleHelp size={14} strokeWidth={2} />
|
||||
</button>
|
||||
</Show>
|
||||
</span>
|
||||
);
|
||||
|
||||
type BootstrapFinishingStateProps = {
|
||||
materializationState: MaterializationState;
|
||||
statusLabel: string;
|
||||
message: string;
|
||||
isInFlight: boolean;
|
||||
hasFailed: boolean;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const BootstrapFinishingState = (props: BootstrapFinishingStateProps): JSX.Element => (
|
||||
<div class={styles.wizardFinishPanel} data-slot="bootstrap-wizard-finishing-state">
|
||||
<div class={styles.wizardFinishShell}>
|
||||
<div class={styles.wizardFinishStatusRow}>
|
||||
<div class={styles.wizardFinishIndicator} data-status={props.materializationState} aria-hidden="true">
|
||||
<div class={styles.wizardFinishSpinner} />
|
||||
</div>
|
||||
<div class={styles.wizardFinishCopy}>
|
||||
<span class={styles.wizardStepEyebrow}>Bootstrap status</span>
|
||||
<h3 class={styles.wizardFinishTitle}>Finishing setup</h3>
|
||||
<p class={styles.wizardFinishDescription}>
|
||||
We saved your initial bootstrap. The server is finishing the last background setup steps now.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class={styles.statusBadge} data-status={props.materializationState}>{props.statusLabel}</div>
|
||||
<Show when={props.message}>
|
||||
<p class={styles.wizardFinishMessage} data-status={props.materializationState}>{props.message}</p>
|
||||
</Show>
|
||||
<Show when={props.isInFlight}>
|
||||
<p class={styles.wizardFinishHint}>This window will close automatically when setup is complete.</p>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={props.hasFailed}>
|
||||
<div class={styles.wizardFinishActions}>
|
||||
<button type="button" class={styles.secondaryButton} onClick={props.onClose}>Close</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
);
|
||||
|
||||
type BootstrapWizardProgressProps = {
|
||||
steps: readonly BootstrapStepDefinition[];
|
||||
currentStepId: BootstrapStepKey;
|
||||
currentWizardStepIndex: number;
|
||||
stepState: Record<BootstrapStepKey, BootstrapSubmissionState>;
|
||||
bootstrapStepCount: number;
|
||||
wizardProgressFillWidth: string;
|
||||
stepStatusLabel: (step: BootstrapStepDefinition) => string;
|
||||
onSelectStep: (index: number) => void;
|
||||
};
|
||||
|
||||
export const BootstrapWizardProgress = (props: BootstrapWizardProgressProps): JSX.Element => (
|
||||
<div class={styles.wizardProgress} data-slot="bootstrap-wizard-progress">
|
||||
<div class={styles.wizardProgressTrack} aria-hidden="true">
|
||||
<div class={styles.wizardProgressFill} style={{ width: props.wizardProgressFillWidth }} />
|
||||
</div>
|
||||
<nav class={styles.wizardProgressSteps} aria-label="Bootstrap steps" style={{ "--wizard-progress-step-count": props.bootstrapStepCount }}>
|
||||
<For each={props.steps}>
|
||||
{(step, index): JSX.Element => (
|
||||
<button
|
||||
type="button"
|
||||
class={styles.wizardProgressStep}
|
||||
data-active={step.id === props.currentStepId ? "true" : "false"}
|
||||
data-complete={props.stepState[step.id].status === "success" ? "true" : "false"}
|
||||
disabled={index() > props.currentWizardStepIndex}
|
||||
onClick={(): void => {
|
||||
if (index() <= props.currentWizardStepIndex) {
|
||||
props.onSelectStep(index());
|
||||
}
|
||||
}}
|
||||
aria-label={`Step ${index() + 1}${props.stepStatusLabel(step) ? `, ${props.stepStatusLabel(step)}` : ""}`}
|
||||
>
|
||||
<span class={styles.wizardProgressIndex}>{index() + 1}</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
||||
type BootstrapPersonaStepProps = {
|
||||
personas: readonly BootstrapPersonaDefinition[];
|
||||
hasChosenPersona: boolean;
|
||||
selectedPersona: BootstrapPersona;
|
||||
selectedPersonaIsAvailable: boolean;
|
||||
onSelectPersona: (persona: BootstrapPersona) => void;
|
||||
};
|
||||
|
||||
export const BootstrapPersonaStep = (props: BootstrapPersonaStepProps): JSX.Element => (
|
||||
<>
|
||||
<div class={styles.personaGrid}>
|
||||
<For each={props.personas}>
|
||||
{(persona): JSX.Element => (
|
||||
<button
|
||||
type="button"
|
||||
class={styles.personaCard}
|
||||
data-selected={props.hasChosenPersona && persona.id === props.selectedPersona ? "true" : "false"}
|
||||
data-available={persona.isAvailable ? "true" : "false"}
|
||||
aria-pressed={props.hasChosenPersona && persona.id === props.selectedPersona}
|
||||
onClick={(): void => props.onSelectPersona(persona.id)}
|
||||
>
|
||||
<div class={styles.personaCardMedia} aria-hidden="true" />
|
||||
<div class={styles.personaCardBody}>
|
||||
<h4 class={styles.personaCardTitle}>{persona.title}</h4>
|
||||
<div class={styles.personaCardDetails}>
|
||||
<p class={styles.personaBestFor}>{persona.bestFor}</p>
|
||||
<ul class={styles.personaBulletList}>
|
||||
<For each={persona.bullets}>{(bullet): JSX.Element => <li>{bullet}</li>}</For>
|
||||
</ul>
|
||||
<Show when={!persona.isAvailable}><p class={styles.personaAvailability}>Coming later</p></Show>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
<Show when={!props.selectedPersonaIsAvailable}>
|
||||
<p class={styles.fieldHelp}>Only <strong>Self Hosted Enthusiast</strong> is wired up right now. The other setup paths will come next.</p>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
|
||||
type BootstrapInstanceStepProps = TooltipHandlers & {
|
||||
instanceForm: InstanceForm;
|
||||
onProtocolChange: (value: InstanceForm["protocol"]) => void;
|
||||
onAccessChange: (value: InstanceForm["access"]) => void;
|
||||
onHostChange: (value: string) => void;
|
||||
};
|
||||
|
||||
export const BootstrapInstanceStep = (props: BootstrapInstanceStepProps): JSX.Element => (
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Protocol" tooltip={workspaceHomeFieldTooltips.protocol} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<select value={props.instanceForm.protocol} onInput={(event): void => props.onProtocolChange(event.currentTarget.value as InstanceForm["protocol"])}>
|
||||
<option value="http">http</option>
|
||||
<option value="https">https</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Access" tooltip={workspaceHomeFieldTooltips.access} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<select value={props.instanceForm.access} onInput={(event): void => props.onAccessChange(event.currentTarget.value as InstanceForm["access"])}>
|
||||
<option value="local">local</option>
|
||||
<option value="remote">remote</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Host" tooltip={workspaceHomeFieldTooltips.host} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.instanceForm.host} onInput={(event): void => props.onHostChange(event.currentTarget.value)} placeholder="localhost or app.example.com" />
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
|
||||
type BootstrapModeStepProps = TooltipHandlers & {
|
||||
modeForm: ModeForm;
|
||||
structureForm: StructureForm;
|
||||
usesCondensedBootstrapFlow: boolean;
|
||||
selectedPersona: BootstrapPersona;
|
||||
namePlaceholder: string;
|
||||
onNameChange: (value: string) => void;
|
||||
onProjectNameChange: (value: string) => void;
|
||||
onTeamNameChange: (value: string) => void;
|
||||
};
|
||||
|
||||
export const BootstrapModeStep = (props: BootstrapModeStepProps): JSX.Element => (
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Server name" tooltip={workspaceHomeFieldTooltips.serverName} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.modeForm.name} required onInput={(event): void => props.onNameChange(event.currentTarget.value)} placeholder={props.namePlaceholder} />
|
||||
</label>
|
||||
<Show when={props.usesCondensedBootstrapFlow}>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Default Project" tooltip={workspaceHomeFieldTooltips.project} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.structureForm.projectName} onInput={(event): void => props.onProjectNameChange(event.currentTarget.value)} placeholder="Project" />
|
||||
</label>
|
||||
</Show>
|
||||
<Show when={props.selectedPersona === "team"}>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Team name" tooltip={workspaceHomeFieldTooltips.team} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.structureForm.teamName} onInput={(event): void => props.onTeamNameChange(event.currentTarget.value)} placeholder="Core Team" />
|
||||
</label>
|
||||
</Show>
|
||||
</>
|
||||
);
|
||||
|
||||
type BootstrapAdminStepProps = {
|
||||
adminForm: AdminForm;
|
||||
onDisplayNameChange: (value: string) => void;
|
||||
onEmailChange: (value: string) => void;
|
||||
onPasswordChange: (value: string) => void;
|
||||
};
|
||||
|
||||
export const BootstrapAdminStep = (props: BootstrapAdminStepProps): JSX.Element => (
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Display name</span>
|
||||
<input type="text" value={props.adminForm.displayName} onInput={(event): void => props.onDisplayNameChange(event.currentTarget.value)} placeholder="Admin" />
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Email</span>
|
||||
<input type="email" value={props.adminForm.email} onInput={(event): void => props.onEmailChange(event.currentTarget.value)} placeholder="admin@example.com" />
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Password</span>
|
||||
<input type="password" value={props.adminForm.password} onInput={(event): void => props.onPasswordChange(event.currentTarget.value)} placeholder="Create a strong password" />
|
||||
<small class={styles.fieldHelp}>Use at least 12 characters with uppercase, lowercase, numbers, and symbols.</small>
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
|
||||
type BootstrapStructureStepProps = TooltipHandlers & {
|
||||
mode: ModeForm["mode"];
|
||||
structureForm: StructureForm;
|
||||
onDepartmentNameChange: (value: string) => void;
|
||||
onTeamNameChange: (value: string) => void;
|
||||
onProjectNameChange: (value: string) => void;
|
||||
};
|
||||
|
||||
export const BootstrapStructureStep = (props: BootstrapStructureStepProps): JSX.Element => (
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Department" tooltip={workspaceHomeFieldTooltips.department} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.structureForm.departmentName} disabled={props.mode === "personal"} onInput={(event): void => props.onDepartmentNameChange(event.currentTarget.value)} placeholder={organizationalStructureDefaults.departmentName} />
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Team" tooltip={workspaceHomeFieldTooltips.team} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.structureForm.teamName} disabled={props.mode === "personal"} onInput={(event): void => props.onTeamNameChange(event.currentTarget.value)} placeholder={organizationalStructureDefaults.teamName} />
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<FieldLabelWithTooltip label="Project" tooltip={workspaceHomeFieldTooltips.project} onShowTooltip={props.onShowTooltip} onHideTooltip={props.onHideTooltip} />
|
||||
<input type="text" value={props.structureForm.projectName} onInput={(event): void => props.onProjectNameChange(event.currentTarget.value)} placeholder="Moku" />
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
@@ -1,172 +1,13 @@
|
||||
// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx
|
||||
|
||||
import { For, Show, createEffect, createMemo, createSignal, onCleanup, type JSX } from "solid-js";
|
||||
import { Show, createMemo, type JSX } from "solid-js";
|
||||
import { Portal } from "solid-js/web";
|
||||
import { createStore } from "solid-js/store";
|
||||
import { resolveAPIBase } from "../../../lib/api";
|
||||
import { ChevronLeft, ChevronRight } from "../../../lib/icons";
|
||||
import { useAppShellData } from "../../shell/data/app-shell.context";
|
||||
import { bootstrapPersonaDefinitions } from "./WorkspaceHome.data";
|
||||
import { useWorkspaceHomeWizard } from "./WorkspaceHome.hook";
|
||||
import styles from "./WorkspaceHome.module.scss";
|
||||
|
||||
type BootstrapStepKey = "instance" | "mode" | "admin" | "structure";
|
||||
|
||||
type BootstrapStepDefinition = {
|
||||
id: BootstrapStepKey;
|
||||
title: string;
|
||||
buttonLabel: string;
|
||||
};
|
||||
|
||||
type BootstrapSubmissionState = {
|
||||
status: "idle" | "submitting" | "success" | "error";
|
||||
error: string;
|
||||
};
|
||||
|
||||
type InstanceForm = {
|
||||
protocol: "http" | "https";
|
||||
access: "local" | "remote";
|
||||
host: string;
|
||||
};
|
||||
|
||||
type ModeForm = {
|
||||
mode: "personal" | "organizational";
|
||||
name: string;
|
||||
};
|
||||
|
||||
type AdminForm = {
|
||||
displayName: string;
|
||||
email: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
type StructureForm = {
|
||||
departmentName: string;
|
||||
teamName: string;
|
||||
projectName: string;
|
||||
};
|
||||
|
||||
type MaterializationState = "not_started" | "pending" | "running" | "succeeded" | "failed";
|
||||
|
||||
const bootstrapStepDefinitions: readonly BootstrapStepDefinition[] = [
|
||||
{
|
||||
id: "instance",
|
||||
title: "Instance shape",
|
||||
buttonLabel: "Save and continue",
|
||||
},
|
||||
{
|
||||
id: "mode",
|
||||
title: "Server mode",
|
||||
buttonLabel: "Save and continue",
|
||||
},
|
||||
{
|
||||
id: "admin",
|
||||
title: "Admin account",
|
||||
buttonLabel: "Save and continue",
|
||||
},
|
||||
{
|
||||
id: "structure",
|
||||
title: "Initial structure",
|
||||
buttonLabel: "Submit",
|
||||
},
|
||||
];
|
||||
|
||||
const defaultInstanceForm: InstanceForm = {
|
||||
protocol: "http",
|
||||
access: "local",
|
||||
host: "localhost",
|
||||
};
|
||||
|
||||
const defaultModeForm: ModeForm = {
|
||||
mode: "personal",
|
||||
name: "",
|
||||
};
|
||||
|
||||
const defaultAdminForm: AdminForm = {
|
||||
displayName: "Admin",
|
||||
email: "admin@example.com",
|
||||
password: "",
|
||||
};
|
||||
|
||||
const personalStructureDefaults = {
|
||||
departmentName: "Default",
|
||||
teamName: "Personal",
|
||||
};
|
||||
|
||||
const organizationalStructureDefaults = {
|
||||
departmentName: "Department",
|
||||
teamName: "Team",
|
||||
};
|
||||
|
||||
const defaultStructureForm: StructureForm = {
|
||||
...personalStructureDefaults,
|
||||
projectName: "Project",
|
||||
};
|
||||
|
||||
const initialSubmissionState = (): BootstrapSubmissionState => ({
|
||||
status: "idle",
|
||||
error: "",
|
||||
});
|
||||
|
||||
const materializationPollIntervalMs = 2000;
|
||||
|
||||
const readResponseBody = async (response: Response): Promise<unknown> => {
|
||||
const raw = await response.text();
|
||||
|
||||
if (!raw.trim()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
try {
|
||||
return JSON.parse(raw);
|
||||
} catch {
|
||||
return raw;
|
||||
}
|
||||
};
|
||||
|
||||
const readResponseError = (step: BootstrapStepKey, data: unknown): string => {
|
||||
const fallback = `Bootstrap ${step} request failed.`;
|
||||
|
||||
if (typeof data === "string") {
|
||||
const message = data.trim();
|
||||
return message || fallback;
|
||||
}
|
||||
|
||||
if (!data || typeof data !== "object") {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const record = data as {
|
||||
error?: string;
|
||||
message?: string;
|
||||
requestId?: string;
|
||||
};
|
||||
const message = typeof record.message === "string" ? record.message.trim() : "";
|
||||
const errorCode = typeof record.error === "string" ? record.error.trim() : "";
|
||||
const requestId = typeof record.requestId === "string" ? record.requestId.trim() : "";
|
||||
|
||||
if (!message && !errorCode && !requestId) {
|
||||
return fallback;
|
||||
}
|
||||
|
||||
const details: string[] = [];
|
||||
|
||||
if (errorCode) {
|
||||
details.push(`code: ${errorCode}`);
|
||||
}
|
||||
|
||||
if (requestId) {
|
||||
details.push(`request: ${requestId}`);
|
||||
}
|
||||
|
||||
if (message && details.length > 0) {
|
||||
return `${message} (${details.join(", ")})`;
|
||||
}
|
||||
|
||||
if (message) {
|
||||
return message;
|
||||
}
|
||||
|
||||
return `${fallback} (${details.join(", ")})`;
|
||||
};
|
||||
import { BootstrapAdminStep, BootstrapFinishingState, BootstrapInstanceStep, BootstrapModeStep, BootstrapPersonaStep, BootstrapStructureStep, BootstrapWizardProgress } from "./WorkspaceHome.parts";
|
||||
|
||||
type WorkspaceHomeProps = {
|
||||
sidebarCollapsed: boolean;
|
||||
@@ -175,301 +16,61 @@ type WorkspaceHomeProps = {
|
||||
|
||||
export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
|
||||
const appShellData = useAppShellData();
|
||||
const [instanceForm, setInstanceForm] = createStore<InstanceForm>({ ...defaultInstanceForm });
|
||||
const [modeForm, setModeForm] = createStore<ModeForm>({ ...defaultModeForm });
|
||||
const [adminForm, setAdminForm] = createStore<AdminForm>({ ...defaultAdminForm });
|
||||
const [structureForm, setStructureForm] = createStore<StructureForm>({ ...defaultStructureForm });
|
||||
const [stepState, setStepState] = createStore<Record<BootstrapStepKey, BootstrapSubmissionState>>({
|
||||
instance: initialSubmissionState(),
|
||||
mode: initialSubmissionState(),
|
||||
admin: initialSubmissionState(),
|
||||
structure: initialSubmissionState(),
|
||||
});
|
||||
const [isBootstrapStateResolved, setIsBootstrapStateResolved] = createSignal(false);
|
||||
const [isBootstrapComplete, setIsBootstrapComplete] = createSignal(false);
|
||||
const [isWizardOpen, setIsWizardOpen] = createSignal(false);
|
||||
const [isFinishingBootstrapFlow, setIsFinishingBootstrapFlow] = createSignal(false);
|
||||
const [currentStepIndex, setCurrentStepIndex] = createSignal(0);
|
||||
const installation = createMemo(() => appShellData.installation());
|
||||
const materializationState = createMemo<MaterializationState>(() => {
|
||||
const status = installation()?.materializationStatus;
|
||||
const {
|
||||
instanceForm,
|
||||
setInstanceForm,
|
||||
modeForm,
|
||||
setModeForm,
|
||||
adminForm,
|
||||
setAdminForm,
|
||||
structureForm,
|
||||
setStructureForm,
|
||||
selectedPersona,
|
||||
hasChosenPersona,
|
||||
stepState,
|
||||
isBootstrapStateResolved,
|
||||
isWizardOpen,
|
||||
setIsWizardOpen,
|
||||
setIsFinishingBootstrapFlow,
|
||||
fieldTooltip,
|
||||
materializationState,
|
||||
isMaterializationInFlight,
|
||||
hasMaterializationFailed,
|
||||
showBootstrapFinishingState,
|
||||
materializationStatusLabel,
|
||||
materializationMessage,
|
||||
personaDefinition,
|
||||
selectedPersonaIsAvailable,
|
||||
usesCondensedBootstrapFlow,
|
||||
activeWizardSteps,
|
||||
bootstrapNamePlaceholder,
|
||||
bootstrapStepCount,
|
||||
currentStep,
|
||||
currentWizardStepIndex,
|
||||
wizardProgressFillWidth,
|
||||
currentStepState,
|
||||
isFirstStep,
|
||||
canDismissWizard,
|
||||
handleCurrentStepSubmit,
|
||||
applyPersonaSelection,
|
||||
statusLabel,
|
||||
showFieldTooltip,
|
||||
hideFieldTooltip,
|
||||
stepStatusLabel,
|
||||
navigateBack,
|
||||
navigateToVisibleStep,
|
||||
} = useWorkspaceHomeWizard(appShellData);
|
||||
const isBootstrapPersisted = createMemo(() => appShellData.installation()?.isBootstrapped ?? false);
|
||||
|
||||
switch (status) {
|
||||
case "pending":
|
||||
case "running":
|
||||
case "failed":
|
||||
case "succeeded":
|
||||
case "not_started":
|
||||
return status;
|
||||
default:
|
||||
return installation()?.isBootstrapped ? "succeeded" : "not_started";
|
||||
}
|
||||
});
|
||||
const isBootstrapPersisted = createMemo(() => installation()?.isBootstrapped ?? false);
|
||||
const isMaterializationInFlight = createMemo(
|
||||
() => materializationState() === "pending" || materializationState() === "running",
|
||||
);
|
||||
const hasMaterializationFailed = createMemo(() => materializationState() === "failed");
|
||||
const showBootstrapFinishingState = createMemo(
|
||||
() => isFinishingBootstrapFlow() && (isMaterializationInFlight() || hasMaterializationFailed()),
|
||||
);
|
||||
const materializationStatusLabel = createMemo(() => {
|
||||
switch (materializationState()) {
|
||||
case "pending":
|
||||
return "Materialization queued";
|
||||
case "running":
|
||||
return "Materialization running";
|
||||
case "failed":
|
||||
return "Materialization failed";
|
||||
case "succeeded":
|
||||
return "Ready";
|
||||
default:
|
||||
return "Not started";
|
||||
}
|
||||
});
|
||||
const materializationMessage = createMemo(() => {
|
||||
if (isMaterializationInFlight()) {
|
||||
return "Your bootstrap is saved. The worker is still creating the POSIX skeleton and rebuilding the app shell index.";
|
||||
}
|
||||
|
||||
if (hasMaterializationFailed()) {
|
||||
return installation()?.materializationError || "Bootstrap saved, but background materialization did not finish cleanly.";
|
||||
}
|
||||
|
||||
return "";
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (modeForm.mode === "personal") {
|
||||
setStructureForm("departmentName", personalStructureDefaults.departmentName);
|
||||
setStructureForm("teamName", personalStructureDefaults.teamName);
|
||||
return;
|
||||
}
|
||||
|
||||
if (structureForm.departmentName === personalStructureDefaults.departmentName) {
|
||||
setStructureForm("departmentName", organizationalStructureDefaults.departmentName);
|
||||
}
|
||||
|
||||
if (structureForm.teamName === personalStructureDefaults.teamName) {
|
||||
setStructureForm("teamName", organizationalStructureDefaults.teamName);
|
||||
}
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
const shellStatus = appShellData.status();
|
||||
|
||||
if (shellStatus === "idle" || shellStatus === "loading") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (shellStatus !== "success") {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isBootstrapPersisted()) {
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
resetWizardState();
|
||||
}
|
||||
|
||||
setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
|
||||
setIsWizardOpen(!isBootstrapPersisted() || showBootstrapFinishingState());
|
||||
setIsBootstrapStateResolved(true);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (!isFinishingBootstrapFlow()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isMaterializationInFlight() || hasMaterializationFailed()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
setIsWizardOpen(false);
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
if (!isBootstrapPersisted() || !isMaterializationInFlight()) {
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
let timeoutId: number | undefined;
|
||||
|
||||
const scheduleReload = (): void => {
|
||||
timeoutId = window.setTimeout(async () => {
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The final bootstrap step only persists relational state. Poll while the
|
||||
// worker is materializing the POSIX skeleton so the page can transition from
|
||||
// queued/running to ready/failed without a manual refresh.
|
||||
await appShellData.reload();
|
||||
|
||||
if (!cancelled && isBootstrapPersisted() && isMaterializationInFlight()) {
|
||||
scheduleReload();
|
||||
}
|
||||
}, materializationPollIntervalMs);
|
||||
};
|
||||
|
||||
scheduleReload();
|
||||
|
||||
onCleanup(() => {
|
||||
cancelled = true;
|
||||
|
||||
if (timeoutId !== undefined) {
|
||||
window.clearTimeout(timeoutId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const sidebarToggleLabel = (): string =>
|
||||
props.sidebarCollapsed ? "Expand left workspace sidebar" : "Collapse left workspace sidebar";
|
||||
const sidebarToggleLabel = (): string => (props.sidebarCollapsed ? "Expand left workspace sidebar" : "Collapse left workspace sidebar");
|
||||
const breadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
|
||||
const apiBase = (): string => resolveAPIBase();
|
||||
const bootstrapTargetLabel = (): string =>
|
||||
modeForm.mode === "personal" ? "Personal server" : "Organization server";
|
||||
const bootstrapNamePlaceholder = (): string =>
|
||||
modeForm.mode === "personal" ? "Personal server name" : "Organization server name";
|
||||
const currentStep = createMemo<BootstrapStepDefinition>(
|
||||
() => bootstrapStepDefinitions[currentStepIndex()] ?? bootstrapStepDefinitions[0]!,
|
||||
);
|
||||
const currentStepState = createMemo<BootstrapSubmissionState>(() => stepState[currentStep().id]);
|
||||
const isFirstStep = (): boolean => currentStepIndex() === 0;
|
||||
const isLastStep = (): boolean => currentStepIndex() === bootstrapStepDefinitions.length - 1;
|
||||
const canDismissWizard = (): boolean => isBootstrapPersisted() && !isMaterializationInFlight();
|
||||
|
||||
const resetWizardState = (): void => {
|
||||
setInstanceForm({ ...defaultInstanceForm });
|
||||
setModeForm({ ...defaultModeForm });
|
||||
setAdminForm({ ...defaultAdminForm });
|
||||
setStructureForm({ ...defaultStructureForm });
|
||||
setStepState({
|
||||
instance: initialSubmissionState(),
|
||||
mode: initialSubmissionState(),
|
||||
admin: initialSubmissionState(),
|
||||
structure: initialSubmissionState(),
|
||||
});
|
||||
setCurrentStepIndex(0);
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
};
|
||||
|
||||
const submitStep = async (step: BootstrapStepKey, payload: unknown): Promise<boolean> => {
|
||||
setStepState(step, { status: "submitting", error: "" });
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiBase()}/bootstrap/steps/${step}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await readResponseBody(response);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(readResponseError(step, data));
|
||||
}
|
||||
|
||||
setStepState(step, {
|
||||
status: "success",
|
||||
error: "",
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
setStepState(step, {
|
||||
status: "error",
|
||||
error: error instanceof Error ? error.message : `Bootstrap ${step} request failed.`,
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const payloadForStep = (step: BootstrapStepKey): unknown => {
|
||||
switch (step) {
|
||||
case "instance":
|
||||
return instanceForm;
|
||||
case "mode":
|
||||
return modeForm;
|
||||
case "admin":
|
||||
return adminForm;
|
||||
case "structure":
|
||||
return structureForm;
|
||||
}
|
||||
};
|
||||
|
||||
const submitCurrentStep = async (): Promise<void> => {
|
||||
const step = currentStep().id;
|
||||
const didSucceed = await submitStep(step, payloadForStep(step));
|
||||
|
||||
if (!didSucceed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isLastStep()) {
|
||||
await appShellData.reload();
|
||||
|
||||
const shouldShowFinishingState = isBootstrapPersisted() && (isMaterializationInFlight() || hasMaterializationFailed());
|
||||
setIsFinishingBootstrapFlow(shouldShowFinishingState);
|
||||
setIsBootstrapComplete(isBootstrapPersisted() && !isMaterializationInFlight());
|
||||
setIsWizardOpen(!isBootstrapPersisted() || shouldShowFinishingState);
|
||||
setIsBootstrapStateResolved(true);
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentStepIndex((index) => Math.min(index + 1, bootstrapStepDefinitions.length - 1));
|
||||
};
|
||||
|
||||
const handleCurrentStepSubmit: JSX.EventHandler<HTMLFormElement, SubmitEvent> = (event): void => {
|
||||
event.preventDefault();
|
||||
void submitCurrentStep();
|
||||
};
|
||||
|
||||
const statusLabel = (state: BootstrapSubmissionState): string => {
|
||||
switch (state.status) {
|
||||
case "submitting":
|
||||
return "Sending";
|
||||
case "success":
|
||||
return "Saved";
|
||||
case "error":
|
||||
return "Request failed";
|
||||
default:
|
||||
return "Ready";
|
||||
}
|
||||
};
|
||||
|
||||
const stepStatusLabel = (step: BootstrapStepDefinition): string => {
|
||||
const state = stepState[step.id];
|
||||
|
||||
if (state.status === "success") {
|
||||
return "Done";
|
||||
}
|
||||
|
||||
if (state.status === "error") {
|
||||
return "Needs retry";
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<main class={styles.viewport} data-ui="workspace-home">
|
||||
<div class={styles.workspaceTopBar} data-slot="workspace-home-top-bar">
|
||||
<div class={styles.workspaceTopBarStart} data-slot="workspace-home-top-bar-start">
|
||||
<button
|
||||
type="button"
|
||||
class={styles.workspaceCollapseButton}
|
||||
aria-label={sidebarToggleLabel()}
|
||||
title={sidebarToggleLabel()}
|
||||
data-slot="workspace-home-sidebar-toggle"
|
||||
onClick={props.onToggleSidebarCollapse}
|
||||
>
|
||||
<button type="button" class={styles.workspaceCollapseButton} aria-label={sidebarToggleLabel()} title={sidebarToggleLabel()} data-slot="workspace-home-sidebar-toggle" onClick={props.onToggleSidebarCollapse}>
|
||||
{props.sidebarCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
|
||||
</button>
|
||||
</div>
|
||||
@@ -482,20 +83,20 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
|
||||
</div>
|
||||
|
||||
<section class={styles.hero} data-slot="workspace-home-hero">
|
||||
<h1 class={styles.title}>{isBootstrapPersisted() ? appShellData.activeServer().name : bootstrapTargetLabel()}</h1>
|
||||
<Show when={isBootstrapStateResolved() && !isBootstrapPersisted()}>
|
||||
<div class={styles.heroActions}>
|
||||
<button
|
||||
type="button"
|
||||
class={styles.primaryButton}
|
||||
onClick={(): void => {
|
||||
setIsWizardOpen(true);
|
||||
}}
|
||||
>
|
||||
Open bootstrap wizard
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
<h1 class={styles.title}>{isBootstrapPersisted() ? appShellData.activeServer().name : "Server"}</h1>
|
||||
<Show when={isBootstrapStateResolved() && !isBootstrapPersisted()}>
|
||||
<div class={styles.heroActions}>
|
||||
<button
|
||||
type="button"
|
||||
class={styles.primaryButton}
|
||||
onClick={(): void => {
|
||||
setIsWizardOpen(true);
|
||||
}}
|
||||
>
|
||||
Open bootstrap wizard
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -508,7 +109,7 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
|
||||
<header class={styles.wizardHeader} data-slot="bootstrap-wizard-header">
|
||||
<div class={styles.wizardHeaderCopy}>
|
||||
<h2 id="bootstrap-wizard-title" class={styles.wizardTitle}>
|
||||
Bootstrap {bootstrapTargetLabel()}
|
||||
Bootstrap Server
|
||||
</h2>
|
||||
</div>
|
||||
<Show when={canDismissWizard()}>
|
||||
@@ -527,251 +128,141 @@ export const WorkspaceHome = (props: WorkspaceHomeProps): JSX.Element => {
|
||||
<Show
|
||||
when={!showBootstrapFinishingState()}
|
||||
fallback={
|
||||
<div class={styles.wizardFinishPanel} data-slot="bootstrap-wizard-finishing-state">
|
||||
<div class={styles.wizardFinishShell}>
|
||||
<div class={styles.wizardFinishStatusRow}>
|
||||
<div class={styles.wizardFinishIndicator} data-status={materializationState()} aria-hidden="true">
|
||||
<div class={styles.wizardFinishSpinner} />
|
||||
</div>
|
||||
<div class={styles.wizardFinishCopy}>
|
||||
<span class={styles.wizardStepEyebrow}>Bootstrap status</span>
|
||||
<h3 class={styles.wizardFinishTitle}>Finishing setup</h3>
|
||||
<p class={styles.wizardFinishDescription}>
|
||||
We saved your initial bootstrap. The server is finishing the last background setup steps now.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class={styles.statusBadge} data-status={materializationState()}>
|
||||
{materializationStatusLabel()}
|
||||
</div>
|
||||
<Show when={materializationMessage()}>
|
||||
<p class={styles.wizardFinishMessage} data-status={materializationState()}>
|
||||
{materializationMessage()}
|
||||
</p>
|
||||
</Show>
|
||||
<Show when={isMaterializationInFlight()}>
|
||||
<p class={styles.wizardFinishHint}>This window will close automatically when setup is complete.</p>
|
||||
</Show>
|
||||
</div>
|
||||
<Show when={hasMaterializationFailed()}>
|
||||
<div class={styles.wizardFinishActions}>
|
||||
<button
|
||||
type="button"
|
||||
class={styles.secondaryButton}
|
||||
onClick={(): void => {
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
setIsWizardOpen(false);
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
<BootstrapFinishingState
|
||||
materializationState={materializationState()}
|
||||
statusLabel={materializationStatusLabel()}
|
||||
message={materializationMessage()}
|
||||
isInFlight={isMaterializationInFlight()}
|
||||
hasFailed={hasMaterializationFailed()}
|
||||
onClose={(): void => {
|
||||
setIsFinishingBootstrapFlow(false);
|
||||
setIsWizardOpen(false);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div class={styles.wizardBody}>
|
||||
<aside class={styles.wizardSidebar} data-slot="bootstrap-wizard-sidebar">
|
||||
<nav class={styles.wizardSteps} aria-label="Bootstrap steps">
|
||||
<For each={bootstrapStepDefinitions}>
|
||||
{(step, index): JSX.Element => (
|
||||
<button
|
||||
type="button"
|
||||
class={styles.wizardStepButton}
|
||||
data-active={step.id === currentStep().id ? "true" : "false"}
|
||||
disabled={index() > currentStepIndex()}
|
||||
onClick={(): void => {
|
||||
if (index() <= currentStepIndex()) {
|
||||
setCurrentStepIndex(index());
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span class={styles.wizardStepIndex}>{index() + 1}</span>
|
||||
<span class={styles.wizardStepCopy}>
|
||||
<strong>{step.title}</strong>
|
||||
<Show when={stepStatusLabel(step)}>
|
||||
<small>{stepStatusLabel(step)}</small>
|
||||
</Show>
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</nav>
|
||||
</aside>
|
||||
<Show when={currentStep().id !== "persona"}>
|
||||
<BootstrapWizardProgress
|
||||
steps={activeWizardSteps()}
|
||||
currentStepId={currentStep().id}
|
||||
currentWizardStepIndex={currentWizardStepIndex()}
|
||||
stepState={stepState}
|
||||
bootstrapStepCount={bootstrapStepCount()}
|
||||
wizardProgressFillWidth={wizardProgressFillWidth()}
|
||||
stepStatusLabel={stepStatusLabel}
|
||||
onSelectStep={navigateToVisibleStep}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<div class={styles.wizardStepPanel} data-slot="bootstrap-wizard-step-panel">
|
||||
<div class={styles.sectionHeader}>
|
||||
<div>
|
||||
<span class={styles.wizardStepEyebrow}>{`Step ${currentStepIndex() + 1} of ${bootstrapStepDefinitions.length}`}</span>
|
||||
<h3 class={styles.sectionTitle}>{currentStep().title}</h3>
|
||||
</div>
|
||||
<div class={styles.statusBadge} data-status={currentStepState().status}>
|
||||
{statusLabel(currentStepState())}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class={styles.form} onSubmit={handleCurrentStepSubmit}>
|
||||
<Show when={currentStep().id === "instance"}>
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Protocol</span>
|
||||
<select
|
||||
value={instanceForm.protocol}
|
||||
onInput={(event): void =>
|
||||
setInstanceForm("protocol", event.currentTarget.value as InstanceForm["protocol"])
|
||||
}
|
||||
>
|
||||
<option value="http">http</option>
|
||||
<option value="https">https</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Access</span>
|
||||
<select
|
||||
value={instanceForm.access}
|
||||
onInput={(event): void =>
|
||||
setInstanceForm("access", event.currentTarget.value as InstanceForm["access"])
|
||||
}
|
||||
>
|
||||
<option value="local">local</option>
|
||||
<option value="remote">remote</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Host</span>
|
||||
<input
|
||||
type="text"
|
||||
value={instanceForm.host}
|
||||
onInput={(event): void => setInstanceForm("host", event.currentTarget.value)}
|
||||
placeholder="localhost or app.example.com"
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
<Show when={currentStep().id !== "persona" || statusLabel(currentStepState())}>
|
||||
<div class={styles.sectionHeader}>
|
||||
<Show when={currentStep().id !== "persona"}>
|
||||
<div>
|
||||
<span class={styles.wizardStepEyebrow}>{`Step ${currentWizardStepIndex() + 1} of ${bootstrapStepCount()}`}</span>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={statusLabel(currentStepState())}>
|
||||
<div class={styles.statusBadge} data-status={currentStepState().status}>
|
||||
{statusLabel(currentStepState())}
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "mode"}>
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Mode</span>
|
||||
<select
|
||||
value={modeForm.mode}
|
||||
onInput={(event): void => setModeForm("mode", event.currentTarget.value as ModeForm["mode"])}
|
||||
>
|
||||
<option value="personal">personal</option>
|
||||
<option value="organizational">organizational</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Server name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={modeForm.name}
|
||||
required
|
||||
onInput={(event): void => setModeForm("name", event.currentTarget.value)}
|
||||
placeholder={bootstrapNamePlaceholder()}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "admin"}>
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Display name</span>
|
||||
<input
|
||||
type="text"
|
||||
value={adminForm.displayName}
|
||||
onInput={(event): void => setAdminForm("displayName", event.currentTarget.value)}
|
||||
placeholder="Admin"
|
||||
/>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Email</span>
|
||||
<input
|
||||
type="email"
|
||||
value={adminForm.email}
|
||||
onInput={(event): void => setAdminForm("email", event.currentTarget.value)}
|
||||
placeholder="admin@example.com"
|
||||
/>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Password</span>
|
||||
<input
|
||||
type="password"
|
||||
value={adminForm.password}
|
||||
onInput={(event): void => setAdminForm("password", event.currentTarget.value)}
|
||||
placeholder="Create a strong password"
|
||||
<form class={styles.form} onSubmit={handleCurrentStepSubmit}>
|
||||
<Show when={currentStep().id === "persona"}>
|
||||
<BootstrapPersonaStep
|
||||
personas={bootstrapPersonaDefinitions}
|
||||
hasChosenPersona={hasChosenPersona()}
|
||||
selectedPersona={selectedPersona()}
|
||||
selectedPersonaIsAvailable={selectedPersonaIsAvailable()}
|
||||
onSelectPersona={applyPersonaSelection}
|
||||
/>
|
||||
<small class={styles.fieldHelp}>
|
||||
Use at least 12 characters with uppercase, lowercase, numbers, and symbols.
|
||||
</small>
|
||||
</label>
|
||||
</>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "instance"}>
|
||||
<BootstrapInstanceStep
|
||||
instanceForm={instanceForm}
|
||||
onProtocolChange={(value): void => setInstanceForm("protocol", value)}
|
||||
onAccessChange={(value): void => setInstanceForm("access", value)}
|
||||
onHostChange={(value): void => setInstanceForm("host", value)}
|
||||
onShowTooltip={showFieldTooltip}
|
||||
onHideTooltip={hideFieldTooltip}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "mode"}>
|
||||
<BootstrapModeStep
|
||||
modeForm={modeForm}
|
||||
structureForm={structureForm}
|
||||
usesCondensedBootstrapFlow={usesCondensedBootstrapFlow()}
|
||||
selectedPersona={selectedPersona()}
|
||||
namePlaceholder={bootstrapNamePlaceholder()}
|
||||
onNameChange={(value): void => setModeForm("name", value)}
|
||||
onProjectNameChange={(value): void => setStructureForm("projectName", value)}
|
||||
onTeamNameChange={(value): void => setStructureForm("teamName", value)}
|
||||
onShowTooltip={showFieldTooltip}
|
||||
onHideTooltip={hideFieldTooltip}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "admin"}>
|
||||
<BootstrapAdminStep
|
||||
adminForm={adminForm}
|
||||
onDisplayNameChange={(value): void => setAdminForm("displayName", value)}
|
||||
onEmailChange={(value): void => setAdminForm("email", value)}
|
||||
onPasswordChange={(value): void => setAdminForm("password", value)}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "structure"}>
|
||||
<BootstrapStructureStep
|
||||
mode={modeForm.mode}
|
||||
structureForm={structureForm}
|
||||
onDepartmentNameChange={(value): void => setStructureForm("departmentName", value)}
|
||||
onTeamNameChange={(value): void => setStructureForm("teamName", value)}
|
||||
onProjectNameChange={(value): void => setStructureForm("projectName", value)}
|
||||
onShowTooltip={showFieldTooltip}
|
||||
onHideTooltip={hideFieldTooltip}
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id !== "persona"}>
|
||||
<div class={styles.wizardFormActions}>
|
||||
<button type="button" class={styles.secondaryButton} disabled={isFirstStep()} onClick={navigateBack}>
|
||||
Back
|
||||
</button>
|
||||
<button type="submit" class={styles.primaryButton} disabled={currentStepState().status === "submitting"}>
|
||||
{currentStep().buttonLabel}
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</form>
|
||||
|
||||
<Show when={currentStepState().error}>
|
||||
<p class={styles.errorText}>{currentStepState().error}</p>
|
||||
</Show>
|
||||
|
||||
<Show when={currentStep().id === "structure"}>
|
||||
<>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Department</span>
|
||||
<input
|
||||
type="text"
|
||||
value={structureForm.departmentName}
|
||||
disabled={modeForm.mode === "personal"}
|
||||
onInput={(event): void => setStructureForm("departmentName", event.currentTarget.value)}
|
||||
placeholder={organizationalStructureDefaults.departmentName}
|
||||
/>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Team</span>
|
||||
<input
|
||||
type="text"
|
||||
value={structureForm.teamName}
|
||||
disabled={modeForm.mode === "personal"}
|
||||
onInput={(event): void => setStructureForm("teamName", event.currentTarget.value)}
|
||||
placeholder={organizationalStructureDefaults.teamName}
|
||||
/>
|
||||
</label>
|
||||
<label class={styles.field}>
|
||||
<span class={styles.fieldLabel}>Project</span>
|
||||
<input
|
||||
type="text"
|
||||
value={structureForm.projectName}
|
||||
onInput={(event): void => setStructureForm("projectName", event.currentTarget.value)}
|
||||
placeholder="Moku"
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
</Show>
|
||||
|
||||
<div class={styles.wizardFormActions}>
|
||||
<button
|
||||
type="button"
|
||||
class={styles.secondaryButton}
|
||||
disabled={isFirstStep()}
|
||||
onClick={(): void => {
|
||||
setCurrentStepIndex((index) => Math.max(index - 1, 0));
|
||||
}}
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class={styles.primaryButton}
|
||||
disabled={currentStepState().status === "submitting"}
|
||||
>
|
||||
{currentStep().buttonLabel}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<Show when={currentStepState().error}>
|
||||
<p class={styles.errorText}>{currentStepState().error}</p>
|
||||
</Show>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</section>
|
||||
|
||||
<Show when={fieldTooltip()}>
|
||||
{(tooltip): JSX.Element => (
|
||||
<div
|
||||
class={styles.fieldTooltip}
|
||||
data-placement={tooltip().placement}
|
||||
style={{
|
||||
left: `${tooltip().left}px`,
|
||||
top: `${tooltip().top}px`,
|
||||
}}
|
||||
>
|
||||
<div class={styles.fieldTooltipBubble}>{tooltip().text}</div>
|
||||
</div>
|
||||
)}
|
||||
</Show>
|
||||
</div>
|
||||
</Portal>
|
||||
</Show>
|
||||
|
||||
Reference in New Issue
Block a user