feat: Self hosted onboarding (#22102)
* intro work * update wixard form to have content callback to remove preset navigation * more fixes to deployment * fix calling static service * fix save license key text * ensure default steps work as expected * fix conditional for rendering step * skip step * add on next step for free license * refactor wizard form to use nuqs * fix styles * merge base param with step config * fix next stepo text * use deployment Signature token * decrypt signature token * fix: resolve type errors and test failures from wizard form refactor - Fix signatureToken field name to signatureTokenEncrypted in deployment repository - Add missing getSignatureToken method to verifyApiKey test mock - Fix WizardForm import from default to named export in test file - Add missing nextStep prop to Steps component in WizardForm Resolves TypeScript type check errors and unit test failures without changing functionality. Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix: add missing getDeploymentSignatureToken mock in LicenseKeyService test Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix: add nuqs library mock for WizardForm test Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix: add missing nav prop to AdminAppsList component with eslint disable Co-Authored-By: sean@cal.com <Sean@brydon.io> * Apply suggestions from code review Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * Update apps/web/modules/auth/setup-view.tsx Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * fix license schema changes * revret schema generation * fix eslint errors * remove required nav type + add use client * fix types * Update packages/ui/components/form/wizard/useWizardState.ts Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * fix controller issue * add checks for deployment key being null - add more tests * fix tests * add deployment key tests * fix: resolve crypto mock to handle empty encryption keys gracefully - Updated symmetricDecrypt mock to return null instead of throwing 'Invalid key' error when encryption key is empty - All getDeploymentKey tests now pass including the previously failing 'should return null when decryption fails due to missing encryption key' test - Fixes mocking issues in PR 22102 self-hosted onboarding wizard form refactor Co-Authored-By: sean@cal.com <Sean@brydon.io> * fix label * add i18n to error * use enum for steps * add as const * fix test env issues --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
This commit is contained in:
36 files changed
+982
-263
No files matched your search
@@ -1,104 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState } from "react";
|
||||
|
||||
import AdminAppsList from "@calcom/features/apps/AdminAppsList";
|
||||
import { APP_NAME } from "@calcom/lib/constants";
|
||||
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import type { inferSSRProps } from "@calcom/types/inferSSRProps";
|
||||
import { WizardForm } from "@calcom/ui/components/form";
|
||||
import type { WizardStep } from "@calcom/ui/components/form/wizard/WizardForm";
|
||||
|
||||
import { AdminUserContainer as AdminUser } from "@components/setup/AdminUser";
|
||||
import ChooseLicense from "@components/setup/ChooseLicense";
|
||||
import EnterpriseLicense from "@components/setup/EnterpriseLicense";
|
||||
import LicenseSelection from "@components/setup/LicenseSelection";
|
||||
|
||||
import type { getServerSideProps } from "@server/lib/setup/getServerSideProps";
|
||||
|
||||
function useSetStep() {
|
||||
const router = useRouter();
|
||||
const searchParams = useCompatSearchParams();
|
||||
const pathname = usePathname();
|
||||
const setStep = (newStep = 1) => {
|
||||
const _searchParams = new URLSearchParams(searchParams ?? undefined);
|
||||
_searchParams.set("step", newStep.toString());
|
||||
router.replace(`${pathname}?${_searchParams.toString()}`);
|
||||
};
|
||||
return setStep;
|
||||
}
|
||||
const SETUP_VIEW_SETPS = {
|
||||
ADMIN_USER: 1,
|
||||
LICENSE: 2,
|
||||
APPS: 3,
|
||||
} as const;
|
||||
|
||||
export type PageProps = inferSSRProps<typeof getServerSideProps>;
|
||||
export function Setup(props: PageProps) {
|
||||
const [hasPickedAGPLv3, setHasPickedAGPLv3] = useState(false);
|
||||
const { t } = useLocale();
|
||||
const router = useRouter();
|
||||
const [value, setValue] = useState(props.isFreeLicense ? "FREE" : "EE");
|
||||
const isFreeLicense = value === "FREE";
|
||||
const [isEnabledEE, setIsEnabledEE] = useState(!props.isFreeLicense);
|
||||
const setStep = useSetStep();
|
||||
const [licenseOption, setLicenseOption] = useState<"FREE" | "EXISTING">(
|
||||
props.hasValidLicense ? "EXISTING" : "FREE"
|
||||
);
|
||||
|
||||
const steps: React.ComponentProps<typeof WizardForm>["steps"] = [
|
||||
const defaultStep = useMemo(() => {
|
||||
if (props.userCount > 0) {
|
||||
if (!props.hasValidLicense && !hasPickedAGPLv3) {
|
||||
return SETUP_VIEW_SETPS.LICENSE;
|
||||
} else {
|
||||
return SETUP_VIEW_SETPS.APPS;
|
||||
}
|
||||
}
|
||||
return SETUP_VIEW_SETPS.ADMIN_USER;
|
||||
}, [props.userCount, props.hasValidLicense, hasPickedAGPLv3]);
|
||||
|
||||
const steps: WizardStep[] = [
|
||||
{
|
||||
title: t("administrator_user"),
|
||||
description: t("lets_create_first_administrator_user"),
|
||||
content: (setIsPending) => (
|
||||
customActions: true,
|
||||
content: (setIsPending, nav) => (
|
||||
<AdminUser
|
||||
onSubmit={() => {
|
||||
setIsPending(true);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setStep(2);
|
||||
// If there's already a valid license or user picked AGPLv3, skip to apps step
|
||||
if (props.hasValidLicense || hasPickedAGPLv3) {
|
||||
nav.onNext();
|
||||
nav.onNext(); // Skip license step
|
||||
} else {
|
||||
nav.onNext();
|
||||
}
|
||||
}}
|
||||
onError={() => {
|
||||
setIsPending(false);
|
||||
}}
|
||||
userCount={props.userCount}
|
||||
nav={nav}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t("choose_a_license"),
|
||||
description: t("choose_license_description"),
|
||||
content: (setIsPending) => {
|
||||
return (
|
||||
<ChooseLicense
|
||||
id="wizard-step-2"
|
||||
name="wizard-step-2"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
onSubmit={() => {
|
||||
setIsPending(true);
|
||||
setStep(3);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
if (!isFreeLicense) {
|
||||
// Only show license selection step if there's no valid license already and AGPLv3 wasn't picked
|
||||
if (!props.hasValidLicense && !hasPickedAGPLv3) {
|
||||
steps.push({
|
||||
title: t("step_enterprise_license"),
|
||||
description: t("step_enterprise_license_description"),
|
||||
content: (setIsPending) => {
|
||||
const currentStep = 3;
|
||||
title: t("choose_a_license"),
|
||||
description: t("choose_license_description"),
|
||||
customActions: true,
|
||||
content: (setIsPending, nav) => {
|
||||
return (
|
||||
<EnterpriseLicense
|
||||
id={`wizard-step-${currentStep}`}
|
||||
name={`wizard-step-${currentStep}`}
|
||||
onSubmit={() => {
|
||||
<LicenseSelection
|
||||
id="wizard-step-2"
|
||||
name="wizard-step-2"
|
||||
value={licenseOption}
|
||||
onChange={setLicenseOption}
|
||||
onSubmit={(values) => {
|
||||
setIsPending(true);
|
||||
if (licenseOption === "FREE") {
|
||||
setHasPickedAGPLv3(true);
|
||||
nav.onNext();
|
||||
} else if (licenseOption === "EXISTING" && values.licenseKey) {
|
||||
nav.onNext();
|
||||
}
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setStep(currentStep + 1);
|
||||
}}
|
||||
onSuccessValidate={() => {
|
||||
setIsEnabledEE(true);
|
||||
}}
|
||||
onPrevStep={nav.onPrev}
|
||||
onNextStep={nav.onNext}
|
||||
/>
|
||||
);
|
||||
},
|
||||
isEnabled: isEnabledEE,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -106,23 +104,24 @@ export function Setup(props: PageProps) {
|
||||
title: t("enable_apps"),
|
||||
description: t("enable_apps_description", { appName: APP_NAME }),
|
||||
contentClassname: "!pb-0 mb-[-1px]",
|
||||
content: (setIsPending) => {
|
||||
const currentStep = isFreeLicense ? 3 : 4;
|
||||
customActions: true,
|
||||
content: (setIsPending, nav) => {
|
||||
return (
|
||||
<AdminAppsList
|
||||
id={`wizard-step-${currentStep}`}
|
||||
name={`wizard-step-${currentStep}`}
|
||||
id={`wizard-step-${steps.length}`}
|
||||
name={`wizard-step-${steps.length}`}
|
||||
classNames={{
|
||||
form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
|
||||
appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
|
||||
verticalTabsItem: "!w-48 md:p-4",
|
||||
}}
|
||||
baseURL={`/auth/setup?step=${currentStep}`}
|
||||
baseURL={`/auth/setup?step=${steps.length}`}
|
||||
useQueryParam={true}
|
||||
onSubmit={() => {
|
||||
setIsPending(true);
|
||||
router.replace("/");
|
||||
}}
|
||||
nav={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
@@ -131,7 +130,7 @@ export function Setup(props: PageProps) {
|
||||
return (
|
||||
<main className="bg-subtle flex items-center print:h-full md:h-screen">
|
||||
<WizardForm
|
||||
href="/auth/setup"
|
||||
defaultStep={defaultStep}
|
||||
steps={steps}
|
||||
nextLabel={t("next_step_text")}
|
||||
finishLabel={t("finish")}
|
||||
|
||||
Reference in new issue
Block a user