Skip to content

Commit 9141a93

Browse files
JayashTripathyJayashTripathy
authored
[WEB-5472] refactor: components of project creation flow (#8462)
1 parent 8663382 commit 9141a93

File tree

8 files changed

+69
-47
lines changed

8 files changed

+69
-47
lines changed

‎apps/web/ce/components/projects/create/attributes.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import type { FC } from "react";
21
import { Controller, useFormContext } from "react-hook-form";
32
// plane imports
43
import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
@@ -79,7 +78,7 @@ function ProjectAttributes(props: Props) {
7978
placeholder={t("lead")}
8079
multiple={false}
8180
buttonVariant="border-with-text"
82-
tabIndex={5}
81+
tabIndex={getIndex("lead")}
8382
/>
8483
</div>
8584
);

‎apps/web/ce/components/projects/create/root.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
import { useState } from "react";
1+
import { PROJECT_TRACKER_EVENTS } from "@plane/constants";
2+
import { useTranslation } from "@plane/i18n";
23
import { observer } from "mobx-react";
4+
import { useState } from "react";
35
import { FormProvider, useForm } from "react-hook-form";
4-
import { PROJECT_TRACKER_EVENTS, RANDOM_EMOJI_CODES } from "@plane/constants";
5-
import { useTranslation } from "@plane/i18n";
66
// ui
77
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
88
import { EFileAssetType } from "@plane/types";
9-
import type { IProject } from "@plane/types";
109
// constants
1110
import ProjectCommonAttributes from "@/components/project/create/common-attributes";
1211
import ProjectCreateHeader from "@/components/project/create/header";
1312
import ProjectCreateButtons from "@/components/project/create/project-create-buttons";
1413
// hooks
15-
import { DEFAULT_COVER_IMAGE_URL, getCoverImageType, uploadCoverImage } from "@/helpers/cover-image.helper";
14+
import { getCoverImageType, uploadCoverImage } from "@/helpers/cover-image.helper";
1615
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
1716
import { useProject } from "@/hooks/store/use-project";
1817
import { usePlatformOS } from "@/hooks/use-platform-os";
1918
// plane web types
2019
import type { TProject } from "@/plane-web/types/projects";
21-
import ProjectAttributes from "./attributes";
20+
import { ProjectAttributes } from "./attributes";
2221
import { getProjectFormValues } from "./utils";
2322

2423
export type TCreateProjectFormProps = {
@@ -37,7 +36,7 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
3736
const { t } = useTranslation();
3837
const { addProjectToFavorites, createProject, updateProject } = useProject();
3938
// states
40-
const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
39+
const [shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier] = useState(true);
4140
// form info
4241
const methods = useForm<TProject>({
4342
defaultValues: { ...getProjectFormValues(), ...data },
@@ -167,7 +166,7 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
167166

168167
const handleClose = () => {
169168
onClose();
170-
setIsChangeInIdentifierRequired(true);
169+
setShouldAutoSyncIdentifier(true);
171170
setTimeout(() => {
172171
reset();
173172
}, 300);
@@ -182,8 +181,8 @@ export const CreateProjectForm = observer(function CreateProjectForm(props: TCre
182181
<ProjectCommonAttributes
183182
setValue={setValue}
184183
isMobile={isMobile}
185-
isChangeInIdentifierRequired={isChangeInIdentifierRequired}
186-
setIsChangeInIdentifierRequired={setIsChangeInIdentifierRequired}
184+
shouldAutoSyncIdentifier={shouldAutoSyncIdentifier}
185+
setShouldAutoSyncIdentifier={setShouldAutoSyncIdentifier}
187186
/>
188187
<ProjectAttributes isMobile={isMobile} />
189188
</div>

‎apps/web/ce/components/projects/create/template-select.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
type TProjectTemplateDropdownSize = "xs" | "sm";
2-
31
export type TProjectTemplateSelect = {
42
disabled?: boolean;
5-
size?: TProjectTemplateDropdownSize;
6-
placeholder?: string;
7-
dropDownContainerClassName?: string;
8-
handleModalClose: () => void;
3+
onClick?: () => void;
94
};
105

116
// eslint-disable-next-line @typescript-eslint/no-unused-vars

‎apps/web/core/components/project/create-project-modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export function CreateProjectModal(props: Props) {
6060
});
6161

6262
return (
63-
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
63+
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXXXL}>
6464
{currentStep === EProjectCreationSteps.CREATE_PROJECT && (
6565
<CreateProjectForm
6666
setToFavorite={setToFavorite}

‎apps/web/core/components/project/create/common-attributes.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,13 @@ import type { TProject } from "@/plane-web/types/projects";
1717
type Props = {
1818
setValue: UseFormSetValue<TProject>;
1919
isMobile: boolean;
20-
isChangeInIdentifierRequired: boolean;
21-
setIsChangeInIdentifierRequired: (value: boolean) => void;
20+
shouldAutoSyncIdentifier: boolean;
21+
setShouldAutoSyncIdentifier: (value: boolean) => void;
2222
handleFormOnChange?: () => void;
2323
};
2424

2525
function ProjectCommonAttributes(props: Props) {
26-
const { setValue, isMobile, isChangeInIdentifierRequired, setIsChangeInIdentifierRequired, handleFormOnChange } =
27-
props;
26+
const { setValue, isMobile, shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier, handleFormOnChange } = props;
2827
const {
2928
formState: { errors },
3029
control,
@@ -33,21 +32,22 @@ function ProjectCommonAttributes(props: Props) {
3332
const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
3433
const { t } = useTranslation();
3534

36-
const handleNameChange = (onChange: (...event: any[]) => void) => (e: ChangeEvent<HTMLInputElement>) => {
37-
if (!isChangeInIdentifierRequired) {
35+
const handleNameChange =
36+
(onChange: (event: ChangeEvent<HTMLInputElement>) => void) => (e: ChangeEvent<HTMLInputElement>) => {
37+
if (!shouldAutoSyncIdentifier) {
38+
onChange(e);
39+
return;
40+
}
41+
if (e.target.value === "") setValue("identifier", "");
42+
else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
3843
onChange(e);
39-
return;
40-
}
41-
if (e.target.value === "") setValue("identifier", "");
42-
else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
43-
onChange(e);
44-
handleFormOnChange?.();
45-
};
44+
handleFormOnChange?.();
45+
};
4646

47-
const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
47+
const handleIdentifierChange = (onChange: (value: string) => void) => (e: ChangeEvent<HTMLInputElement>) => {
4848
const { value } = e.target;
4949
const alphanumericValue = projectIdentifierSanitizer(value);
50-
setIsChangeInIdentifierRequired(false);
50+
setShouldAutoSyncIdentifier(false);
5151
onChange(alphanumericValue);
5252
handleFormOnChange?.();
5353
};

‎apps/web/core/components/project/create/header.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@ import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/te
1818
type Props = {
1919
handleClose: () => void;
2020
isMobile?: boolean;
21+
handleFormChange?: () => void;
22+
isClosable?: boolean;
23+
handleTemplateSelect?: () => void;
2124
};
2225

2326
function ProjectCreateHeader(props: Props) {
24-
const { handleClose, isMobile = false } = props;
25-
const { watch, control } = useFormContext<IProject>();
27+
const { handleClose, isMobile = false, handleFormChange, isClosable = true, handleTemplateSelect } = props;
28+
const { watch, control, setValue } = useFormContext<IProject>();
2629
const { t } = useTranslation();
2730
// derived values
2831
const coverImage = watch("cover_image_url");
@@ -38,22 +41,27 @@ function ProjectCreateHeader(props: Props) {
3841
className="absolute left-0 top-0 h-full w-full rounded-lg"
3942
/>
4043
<div className="absolute left-2.5 top-2.5">
41-
<ProjectTemplateSelect handleModalClose={handleClose} />
42-
</div>
43-
<div className="absolute right-2 top-2 p-2">
44-
<button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
45-
<CloseIcon className="h-5 w-5 text-on-color" />
46-
</button>
44+
<ProjectTemplateSelect onClick={handleTemplateSelect} />
4745
</div>
46+
{isClosable && (
47+
<div className="absolute right-2 top-2 p-2">
48+
<button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
49+
<CloseIcon className="h-5 w-5 text-on-color" />
50+
</button>
51+
</div>
52+
)}
4853
<div className="absolute bottom-2 right-2">
4954
<Controller
5055
name="cover_image_url"
5156
control={control}
5257
render={({ field: { value, onChange } }) => (
5358
<ImagePickerPopover
5459
label={t("change_cover")}
60+
onChange={(data) => {
61+
onChange(data);
62+
handleFormChange?.();
63+
}}
5564
control={control}
56-
onChange={onChange}
5765
value={value ?? null}
5866
tabIndex={getIndex("cover_image")}
5967
/>
@@ -72,7 +80,7 @@ function ProjectCreateHeader(props: Props) {
7280
className="flex items-center justify-center"
7381
buttonClassName="flex items-center justify-center"
7482
label={
75-
<span className="grid h-11 w-11 place-items-center rounded-md bg-layer-1">
83+
<span className="grid h-11 w-11 place-items-center bg-layer-2 rounded-md border border-subtle">
7684
<Logo logo={value} size={20} />
7785
</span>
7886
}
@@ -85,15 +93,20 @@ function ProjectCreateHeader(props: Props) {
8593
};
8694
else if (val?.type === "icon") logoValue = val.value;
8795

88-
onChange({
96+
const newLogoProps = {
8997
in_use: val?.type,
9098
[val?.type]: logoValue,
99+
};
100+
setValue("logo_props", newLogoProps, {
101+
shouldDirty: true,
91102
});
103+
onChange(newLogoProps);
104+
handleFormChange?.();
92105
setIsOpen(false);
93106
}}
94-
defaultIconColor={value.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
107+
defaultIconColor={value?.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
95108
defaultOpen={
96-
value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
109+
value?.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
97110
}
98111
/>
99112
)}

‎packages/types/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,4 @@ export * from "./workspace-draft-issues/base";
5050
export * from "./workspace-notifications";
5151
export * from "./workspace-views";
5252
export * from "./base-layouts";
53+
export * from "./pagination";

‎packages/types/src/pagination.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// Generic paginated response type for API responses
2+
export type TPaginatedResponse<T> = {
3+
results: T;
4+
grouped_by?: string | null;
5+
sub_grouped_by?: string | null;
6+
total_count?: number;
7+
next_cursor?: string;
8+
prev_cursor?: string;
9+
next_page_results?: boolean;
10+
prev_page_results?: boolean;
11+
count?: number;
12+
total_pages?: number;
13+
total_results?: number;
14+
extra_stats?: string | null;
15+
};

0 commit comments

Comments
 (0)