binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5472] refactor: components of project creation flow (#8462)

Browse source
This commit is contained in:
Jayash Tripathy 2025-12-30 14:32:48 +05:30 • committed by GitHub
parent 866338289e
commit 9141a9377f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 70 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/web/core/components/project/create-project-modal.tsx
View file

@ -60,7 +60,7 @@ export function CreateProjectModal(props: Props) {
});
return (
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXXXL}>
{currentStep === EProjectCreationSteps.CREATE_PROJECT && (
<CreateProjectForm
setToFavorite={setToFavorite}

30
apps/web/core/components/project/create/common-attributes.tsx
View file

@ -17,14 +17,13 @@ import type { TProject } from "@/plane-web/types/projects";
type Props = {
setValue: UseFormSetValue<TProject>;
isMobile: boolean;
isChangeInIdentifierRequired: boolean;
setIsChangeInIdentifierRequired: (value: boolean) => void;
shouldAutoSyncIdentifier: boolean;
setShouldAutoSyncIdentifier: (value: boolean) => void;
handleFormOnChange?: () => void;
};
function ProjectCommonAttributes(props: Props) {
const { setValue, isMobile, isChangeInIdentifierRequired, setIsChangeInIdentifierRequired, handleFormOnChange } =
props;
const { setValue, isMobile, shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier, handleFormOnChange } = props;
const {
formState: { errors },
control,
@ -33,21 +32,22 @@ function ProjectCommonAttributes(props: Props) {
const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
const { t } = useTranslation();
const handleNameChange = (onChange: (...event: any[]) => void) => (e: ChangeEvent<HTMLInputElement>) => {
if (!isChangeInIdentifierRequired) {
const handleNameChange =
(onChange: (event: ChangeEvent<HTMLInputElement>) => void) => (e: ChangeEvent<HTMLInputElement>) => {
if (!shouldAutoSyncIdentifier) {
onChange(e);
return;
}
if (e.target.value === "") setValue("identifier", "");
else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
onChange(e);
return;
}
if (e.target.value === "") setValue("identifier", "");
else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
onChange(e);
handleFormOnChange?.();
};
handleFormOnChange?.();
};
const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
const handleIdentifierChange = (onChange: (value: string) => void) => (e: ChangeEvent<HTMLInputElement>) => {
const { value } = e.target;
const alphanumericValue = projectIdentifierSanitizer(value);
setIsChangeInIdentifierRequired(false);
setShouldAutoSyncIdentifier(false);
onChange(alphanumericValue);
handleFormOnChange?.();
};

39
apps/web/core/components/project/create/header.tsx
View file

@ -18,11 +18,14 @@ import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/te
type Props = {
handleClose: () => void;
isMobile?: boolean;
handleFormChange?: () => void;
isClosable?: boolean;
handleTemplateSelect?: () => void;
};
function ProjectCreateHeader(props: Props) {
const { handleClose, isMobile = false } = props;
const { watch, control } = useFormContext<IProject>();
const { handleClose, isMobile = false, handleFormChange, isClosable = true, handleTemplateSelect } = props;
const { watch, control, setValue } = useFormContext<IProject>();
const { t } = useTranslation();
// derived values
const coverImage = watch("cover_image_url");
@ -38,13 +41,15 @@ function ProjectCreateHeader(props: Props) {
className="absolute left-0 top-0 h-full w-full rounded-lg"
/>
<div className="absolute left-2.5 top-2.5">
<ProjectTemplateSelect handleModalClose={handleClose} />
</div>
<div className="absolute right-2 top-2 p-2">
<button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
<CloseIcon className="h-5 w-5 text-on-color" />
</button>
<ProjectTemplateSelect onClick={handleTemplateSelect} />
</div>
{isClosable && (
<div className="absolute right-2 top-2 p-2">
<button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
<CloseIcon className="h-5 w-5 text-on-color" />
</button>
</div>
)}
<div className="absolute bottom-2 right-2">
<Controller
name="cover_image_url"
@ -52,8 +57,11 @@ function ProjectCreateHeader(props: Props) {
render={({ field: { value, onChange } }) => (
<ImagePickerPopover
label={t("change_cover")}
onChange={(data) => {
onChange(data);
handleFormChange?.();
}}
control={control}
onChange={onChange}
value={value ?? null}
tabIndex={getIndex("cover_image")}
/>
@ -72,7 +80,7 @@ function ProjectCreateHeader(props: Props) {
className="flex items-center justify-center"
buttonClassName="flex items-center justify-center"
label={
<span className="grid h-11 w-11 place-items-center rounded-md bg-layer-1">
<span className="grid h-11 w-11 place-items-center bg-layer-2 rounded-md border border-subtle">
<Logo logo={value} size={20} />
</span>
}
@ -85,15 +93,20 @@ function ProjectCreateHeader(props: Props) {
};
else if (val?.type === "icon") logoValue = val.value;
onChange({
const newLogoProps = {
in_use: val?.type,
[val?.type]: logoValue,
};
setValue("logo_props", newLogoProps, {
shouldDirty: true,
});
onChange(newLogoProps);
handleFormChange?.();
setIsOpen(false);
}}
defaultIconColor={value.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
defaultIconColor={value?.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
defaultOpen={
value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
value?.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
}
/>
)}