6712389766
* refactor: migrate web icons to @makeplane/propel Replace confirmed icon symbols across apps/web with their audited @makeplane/propel/icons targets. Unresolved symbols and the State, Priority and Brand icons stay on their existing imports. Lucide size props become explicit width/height, including the two relation icons and the inbox status icon that forward a size variable. Two aliased imports resolve to targets the file already imported, so the aliases are dropped rather than importing the same symbol twice. Widen the member dropdown chain and the AI menu from LucideIcon to ComponentType<SVGProps<SVGSVGElement>> so both Lucide and Propel icons satisfy them; both only ever render the icon with a className. CycleGroupIcon is deliberately not migrated: it dispatches a different glyph and color per cycle status, which CyclesOutline cannot express. apps/web already declared @makeplane/propel, so no dependency change was needed. * fix: address icon migration review on web Restore the six user-facing strings the identifier rename overwrote. The migration replaced every occurrence of a source symbol name, including ones inside string literals and JSX text, so the GitHub empty state read "StarOutline us on GitHub", the exporter column key, header and button label became "DownloadOutline", the project card action title became "SettingsOutline" and a tooltip became "PinOutline". Drop 122 strokeWidth props and 10 text-2 classes. Propel glyphs paint with fill="currentColor", so strokeWidth never changed weight, and text-2 was a bad conversion of stroke-2, which is a stroke width rather than a colour and has no meaning on a fill path. Use StarFilled for the two favorited sidebar stars. Lucide's Star with fill-yellow-500 was a solid star, and StarOutline is a ring path, so filling it does not reproduce that shape.
93 lines
3.6 KiB
TypeScript
93 lines
3.6 KiB
TypeScript
/**
|
|
* Copyright (c) 2023-present Plane Software, Inc. and contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
* See the LICENSE file for details.
|
|
*/
|
|
|
|
import { observer } from "mobx-react";
|
|
// plane imports
|
|
import { PlaneLockup } from "@plane/propel/icons";
|
|
import { ChevronLeftOutline } from "@makeplane/propel/icons";
|
|
import { Tooltip } from "@makeplane/propel/components/tooltip";
|
|
import type { TOnboardingStep } from "@plane/types";
|
|
import { EOnboardingSteps } from "@plane/types";
|
|
import { cn } from "@plane/utils";
|
|
// hooks
|
|
import { useInstance } from "@/hooks/store/use-instance";
|
|
import { useUser } from "@/hooks/store/user";
|
|
// local imports
|
|
import { SwitchAccountDropdown } from "./switch-account-dropdown";
|
|
|
|
type OnboardingHeaderProps = {
|
|
currentStep: EOnboardingSteps;
|
|
updateCurrentStep: (step: EOnboardingSteps) => void;
|
|
hasInvitations: boolean;
|
|
};
|
|
|
|
export const OnboardingHeader = observer(function OnboardingHeader(props: OnboardingHeaderProps) {
|
|
const { currentStep, updateCurrentStep, hasInvitations } = props;
|
|
// store hooks
|
|
const { data: user } = useUser();
|
|
const { config: instanceConfig } = useInstance();
|
|
const isSelfManaged = instanceConfig?.is_self_managed;
|
|
|
|
// handle step back
|
|
const handleStepBack = () => {
|
|
switch (currentStep) {
|
|
case EOnboardingSteps.ROLE_SETUP:
|
|
updateCurrentStep(EOnboardingSteps.PROFILE_SETUP);
|
|
break;
|
|
case EOnboardingSteps.USE_CASE_SETUP:
|
|
updateCurrentStep(EOnboardingSteps.ROLE_SETUP);
|
|
break;
|
|
case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
|
|
updateCurrentStep(isSelfManaged ? EOnboardingSteps.PROFILE_SETUP : EOnboardingSteps.USE_CASE_SETUP);
|
|
break;
|
|
}
|
|
};
|
|
|
|
// can go back
|
|
const canGoBack = ![EOnboardingSteps.PROFILE_SETUP, EOnboardingSteps.INVITE_MEMBERS].includes(currentStep);
|
|
|
|
// step order for progress tracking — include INVITE_MEMBERS if user is currently on it
|
|
const showInviteStep = !hasInvitations || currentStep === EOnboardingSteps.INVITE_MEMBERS;
|
|
const stepOrder: TOnboardingStep[] = [
|
|
EOnboardingSteps.PROFILE_SETUP,
|
|
...(isSelfManaged ? [] : [EOnboardingSteps.ROLE_SETUP, EOnboardingSteps.USE_CASE_SETUP]),
|
|
EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN,
|
|
...(showInviteStep ? [EOnboardingSteps.INVITE_MEMBERS] : []),
|
|
];
|
|
|
|
// derived values
|
|
const currentStepNumber = stepOrder.indexOf(currentStep) + 1;
|
|
const totalSteps = stepOrder.length;
|
|
const userName = user?.display_name
|
|
? user?.display_name
|
|
: user?.first_name
|
|
? `${user?.first_name} ${user?.last_name ?? ""}`
|
|
: user?.email;
|
|
|
|
return (
|
|
<div className="sticky top-0 z-10 flex flex-col gap-4">
|
|
<div className="h-1.5 w-full cursor-pointer overflow-hidden rounded-t-lg bg-surface-1">
|
|
<Tooltip label={`${currentStepNumber}/${totalSteps}`} side="bottom" align="end">
|
|
<div
|
|
className="h-full bg-accent-primary transition-all duration-700 ease-out"
|
|
style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
<div className={cn("flex w-full items-center justify-between gap-6 px-6", canGoBack && "pr-6 pl-4")}>
|
|
<div className="flex items-center gap-2.5">
|
|
{canGoBack && (
|
|
<button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
|
|
<ChevronLeftOutline className="size-6 text-placeholder" />
|
|
</button>
|
|
)}
|
|
<PlaneLockup height={20} width={95} className="text-primary" />
|
|
</div>
|
|
<SwitchAccountDropdown fullName={userName} />
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|