[WEB-440] feat: create project feature selection modal. (#3909)

* [WEB-440] feat: create project feature selection modal.
* [WEB-399] chore: explain project identifier.

* chore: use `Link` component for redirection to project page.

web/components/project/create-project-form.tsx

@@ -0,0 +1,392 @@
+import { useState, FC, ChangeEvent } from "react";
+import { observer } from "mobx-react-lite";
+import { useForm, Controller } from "react-hook-form";
+import { Info, X } from "lucide-react";
+// ui
+import {
+  Button,
+  CustomEmojiIconPicker,
+  CustomSelect,
+  EmojiIconPickerTypes,
+  Input,
+  setToast,
+  TextArea,
+  TOAST_TYPE,
+  Tooltip,
+} from "@plane/ui";
+// components
+import { ImagePickerPopover } from "components/core";
+import { MemberDropdown } from "components/dropdowns";
+import { ProjectLogo } from "./project-logo";
+// constants
+import { PROJECT_CREATED } from "constants/event-tracker";
+import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
+// helpers
+import { convertHexEmojiToDecimal, getRandomEmoji } from "helpers/emoji.helper";
+import { cn } from "helpers/common.helper";
+import { projectIdentifierSanitizer } from "helpers/project.helper";
+// hooks
+import { useEventTracker, useProject } from "hooks/store";
+// types
+import { IProject } from "@plane/types";
+
+type Props = {
+  setToFavorite?: boolean;
+  workspaceSlug: string;
+  onClose: () => void;
+  handleNextStep: (projectId: string) => void;
+};
+
+const defaultValues: Partial<IProject> = {
+  cover_image: PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)],
+  description: "",
+  logo_props: {
+    in_use: "emoji",
+    emoji: {
+      value: getRandomEmoji(),
+    },
+  },
+  identifier: "",
+  name: "",
+  network: 2,
+  project_lead: null,
+};
+
+export const CreateProjectForm: FC<Props> = observer((props) => {
+  const { setToFavorite, workspaceSlug, onClose, handleNextStep } = props;
+  // store
+  const { captureProjectEvent } = useEventTracker();
+  const { addProjectToFavorites, createProject } = useProject();
+  // states
+  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
+  // form info
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    control,
+    watch,
+    setValue,
+  } = useForm<IProject>({
+    defaultValues,
+    reValidateMode: "onChange",
+  });
+
+  const handleAddToFavorites = (projectId: string) => {
+    if (!workspaceSlug) return;
+
+    addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const onSubmit = async (formData: Partial<IProject>) => {
+    // Upper case identifier
+    formData.identifier = formData.identifier?.toUpperCase();
+
+    return createProject(workspaceSlug.toString(), formData)
+      .then((res) => {
+        const newPayload = {
+          ...res,
+          state: "SUCCESS",
+        };
+        captureProjectEvent({
+          eventName: PROJECT_CREATED,
+          payload: newPayload,
+        });
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Project created successfully.",
+        });
+        if (setToFavorite) {
+          handleAddToFavorites(res.id);
+        }
+        handleNextStep(res.id);
+      })
+      .catch((err) => {
+        Object.keys(err.data).map((key) => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: err.data[key],
+          });
+          captureProjectEvent({
+            eventName: PROJECT_CREATED,
+            payload: {
+              ...formData,
+              state: "FAILED",
+            },
+          });
+        });
+      });
+  };
+
+  const handleNameChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    if (!isChangeInIdentifierRequired) {
+      onChange(e);
+      return;
+    }
+    if (e.target.value === "") setValue("identifier", "");
+    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 5));
+    onChange(e);
+  };
+
+  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const alphanumericValue = projectIdentifierSanitizer(value);
+    setIsChangeInIdentifierRequired(false);
+    onChange(alphanumericValue);
+  };
+
+  const handleClose = () => {
+    onClose();
+    setIsChangeInIdentifierRequired(true);
+    setTimeout(() => {
+      reset();
+    }, 300);
+  };
+
+  return (
+    <>
+      <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
+        {watch("cover_image") && (
+          <img
+            src={watch("cover_image")!}
+            className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+            alt="Cover image"
+          />
+        )}
+
+        <div className="absolute right-2 top-2 p-2">
+          <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={8}>
+            <X className="h-5 w-5 text-white" />
+          </button>
+        </div>
+        <div className="absolute bottom-2 right-2">
+          <Controller
+            name="cover_image"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <ImagePickerPopover
+                label="Change Cover"
+                onChange={onChange}
+                control={control}
+                value={value}
+                tabIndex={9}
+              />
+            )}
+          />
+        </div>
+        <div className="absolute -bottom-[22px] left-3">
+          <Controller
+            name="logo_props"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <CustomEmojiIconPicker
+                label={
+                  <span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
+                    <ProjectLogo logo={value} className="text-xl" />
+                  </span>
+                }
+                onChange={(val: any) => {
+                  let logoValue = {};
+
+                  if (val.type === "emoji")
+                    logoValue = {
+                      value: convertHexEmojiToDecimal(val.value.unified),
+                      url: val.value.imageUrl,
+                    };
+                  else if (val.type === "icon") logoValue = val.value;
+
+                  onChange({
+                    in_use: val.type,
+                    [val.type]: logoValue,
+                  });
+                }}
+                defaultIconColor={value.in_use === "icon" ? value.icon?.color : undefined}
+                defaultOpen={value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON}
+              />
+            )}
+          />
+        </div>
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className="px-3">
+        <div className="mt-9 space-y-6 pb-5">
+          <div className="grid grid-cols-1 gap-x-2 gap-y-3 md:grid-cols-4">
+            <div className="md:col-span-3">
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: "Title is required",
+                  maxLength: {
+                    value: 255,
+                    message: "Title should be less than 255 characters",
+                  },
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={value}
+                    onChange={handleNameChange(onChange)}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Project title"
+                    className="w-full focus:border-blue-400"
+                    tabIndex={1}
+                  />
+                )}
+              />
+              <span className="text-xs text-red-500">
+                <>{errors?.name?.message}</>
+              </span>
+            </div>
+            <div className="relative">
+              <Controller
+                control={control}
+                name="identifier"
+                rules={{
+                  required: "Project ID is required",
+                  // allow only alphanumeric & non-latin characters
+                  validate: (value) =>
+                    /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
+                    "Only Alphanumeric & Non-latin characters are allowed.",
+                  minLength: {
+                    value: 1,
+                    message: "Project ID must at least be of 1 character",
+                  },
+                  maxLength: {
+                    value: 5,
+                    message: "Project ID must at most be of 5 characters",
+                  },
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="identifier"
+                    name="identifier"
+                    type="text"
+                    value={value}
+                    onChange={handleIdentifierChange(onChange)}
+                    hasError={Boolean(errors.identifier)}
+                    placeholder="Project ID"
+                    className={cn("w-full text-xs focus:border-blue-400 pr-7", {
+                      uppercase: value,
+                    })}
+                    tabIndex={2}
+                  />
+                )}
+              />
+              <Tooltip
+                tooltipContent="Helps you identify issues in the project uniquely, (e.g. APP-123). Max 5 characters."
+                className="text-sm"
+                position="right-top"
+              >
+                <Info className="absolute right-2 top-2.5 h-3 w-3 text-custom-text-400" />
+              </Tooltip>
+              <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
+            </div>
+            <div className="md:col-span-4">
+              <Controller
+                name="description"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <TextArea
+                    id="description"
+                    name="description"
+                    value={value}
+                    placeholder="Description..."
+                    onChange={onChange}
+                    className="!h-24 text-sm focus:border-blue-400"
+                    hasError={Boolean(errors?.description)}
+                    tabIndex={3}
+                  />
+                )}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              name="network"
+              control={control}
+              render={({ field: { onChange, value } }) => {
+                const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+
+                return (
+                  <div className="flex-shrink-0" tabIndex={4}>
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={
+                        <div className="flex items-center gap-1">
+                          {currentNetwork ? (
+                            <>
+                              <currentNetwork.icon className="h-3 w-3" />
+                              {currentNetwork.label}
+                            </>
+                          ) : (
+                            <span className="text-custom-text-400">Select network</span>
+                          )}
+                        </div>
+                      }
+                      placement="bottom-start"
+                      noChevron
+                      tabIndex={4}
+                    >
+                      {NETWORK_CHOICES.map((network) => (
+                        <CustomSelect.Option key={network.key} value={network.key}>
+                          <div className="flex items-start gap-2">
+                            <network.icon className="h-3.5 w-3.5" />
+                            <div className="-mt-1">
+                              <p>{network.label}</p>
+                              <p className="text-xs text-custom-text-400">{network.description}</p>
+                            </div>
+                          </div>
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  </div>
+                );
+              }}
+            />
+            <Controller
+              name="project_lead"
+              control={control}
+              render={({ field: { value, onChange } }) => {
+                if (value === undefined || value === null || typeof value === "string")
+                  return (
+                    <div className="h-7 flex-shrink-0" tabIndex={5}>
+                      <MemberDropdown
+                        value={value}
+                        onChange={(lead) => onChange(lead === value ? null : lead)}
+                        placeholder="Lead"
+                        multiple={false}
+                        buttonVariant="border-with-text"
+                        tabIndex={5}
+                      />
+                    </div>
+                  );
+                else return <></>;
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-4 border-t border-custom-border-100">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
+            {isSubmitting ? "Creating" : "Create project"}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+});

web/components/project/create-project-modal.tsx

@@ -1,33 +1,15 @@
-import { useState, useEffect, Fragment, FC, ChangeEvent } from "react";
+import { useEffect, Fragment, FC, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { useForm, Controller } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
-import { X } from "lucide-react";
 // ui
-import {
-  Button,
-  CustomEmojiIconPicker,
-  CustomSelect,
-  EmojiIconPickerTypes,
-  Input,
-  setToast,
-  TextArea,
-  TOAST_TYPE,
-} from "@plane/ui";
+import { setToast, TOAST_TYPE } from "@plane/ui";
 // components
-import { ImagePickerPopover } from "components/core";
-import { MemberDropdown } from "components/dropdowns";
+import { CreateProjectForm } from "./create-project-form";
+import { ProjectFeatureUpdate } from "./project-feature-update";
 // constants
-import { PROJECT_CREATED } from "constants/event-tracker";
-import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
 import { EUserWorkspaceRoles } from "constants/workspace";
-// helpers
-import { convertHexEmojiToDecimal, getRandomEmoji } from "helpers/emoji.helper";
 // hooks
-import { useEventTracker, useProject, useUser } from "hooks/store";
-import { projectIdentifierSanitizer } from "helpers/project.helper";
-import { ProjectLogo } from "./project-logo";
-import { IProject } from "@plane/types";
+import { useUser } from "hooks/store";
 
 type Props = {
   isOpen: boolean;
@@ -36,25 +18,15 @@ type Props = {
   workspaceSlug: string;
 };
 
+enum EProjectCreationSteps {
+  CREATE_PROJECT = "CREATE_PROJECT",
+  FEATURE_SELECTION = "FEATURE_SELECTION",
+}
+
 interface IIsGuestCondition {
   onClose: () => void;
 }
 
-const defaultValues: Partial<IProject> = {
-  cover_image: PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)],
-  description: "",
-  logo_props: {
-    in_use: "emoji",
-    emoji: {
-      value: getRandomEmoji(),
-    },
-  },
-  identifier: "",
-  name: "",
-  network: 2,
-  project_lead: null,
-};
-
 const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
   useEffect(() => {
     onClose();
@@ -70,112 +42,33 @@ const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
 
 export const CreateProjectModal: FC<Props> = observer((props) => {
   const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
-  // store
-  const { captureProjectEvent } = useEventTracker();
+  // states
+  const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(EProjectCreationSteps.CREATE_PROJECT);
+  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
+  // hooks
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const { addProjectToFavorites, createProject } = useProject();
-  // states
-  const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
-  // form info
-  const {
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-    control,
-    watch,
-    setValue,
-  } = useForm<IProject>({
-    defaultValues,
-    reValidateMode: "onChange",
-  });
+
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentStep(EProjectCreationSteps.CREATE_PROJECT);
+      setCreatedProjectId(null);
+    }
+  }, [isOpen]);
 
   if (currentWorkspaceRole && isOpen)
     if (currentWorkspaceRole < EUserWorkspaceRoles.MEMBER) return <IsGuestCondition onClose={onClose} />;
 
-  const handleClose = () => {
-    onClose();
-    setIsChangeInIdentifierRequired(true);
-    setTimeout(() => {
-      reset();
-    }, 300);
-  };
-
-  const handleAddToFavorites = (projectId: string) => {
-    if (!workspaceSlug) return;
-
-    addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
-      });
-    });
-  };
-
-  const onSubmit = async (formData: Partial<IProject>) => {
-    // Upper case identifier
-    formData.identifier = formData.identifier?.toUpperCase();
-
-    return createProject(workspaceSlug.toString(), formData)
-      .then((res) => {
-        const newPayload = {
-          ...res,
-          state: "SUCCESS",
-        };
-        captureProjectEvent({
-          eventName: PROJECT_CREATED,
-          payload: newPayload,
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Project created successfully.",
-        });
-        if (setToFavorite) {
-          handleAddToFavorites(res.id);
-        }
-        handleClose();
-      })
-      .catch((err) => {
-        Object.keys(err.data).map((key) => {
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: err.data[key],
-          });
-          captureProjectEvent({
-            eventName: PROJECT_CREATED,
-            payload: {
-              ...formData,
-              state: "FAILED",
-            },
-          });
-        });
-      });
-  };
-
-  const handleNameChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
-    if (!isChangeInIdentifierRequired) {
-      onChange(e);
-      return;
-    }
-    if (e.target.value === "") setValue("identifier", "");
-    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 5));
-    onChange(e);
-  };
-
-  const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
-    const { value } = e.target;
-    const alphanumericValue = projectIdentifierSanitizer(value);
-    setIsChangeInIdentifierRequired(false);
-    onChange(alphanumericValue);
+  const handleNextStep = (projectId: string) => {
+    if (!projectId) return;
+    setCreatedProjectId(projectId);
+    setCurrentStep(EProjectCreationSteps.FEATURE_SELECTION);
   };
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-20" onClose={onClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -200,235 +93,17 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="w-full transform rounded-lg bg-custom-background-100 p-3 text-left shadow-custom-shadow-md transition-all sm:w-3/5 lg:w-1/2 xl:w-2/5">
-                <div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
-                  {watch("cover_image") && (
-                    <img
-                      src={watch("cover_image")!}
-                      className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-                      alt="Cover image"
-                    />
-                  )}
-
-                  <div className="absolute right-2 top-2 p-2">
-                    <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={8}>
-                      <X className="h-5 w-5 text-white" />
-                    </button>
-                  </div>
-                  <div className="absolute bottom-2 right-2">
-                    <Controller
-                      name="cover_image"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <ImagePickerPopover
-                          label="Change Cover"
-                          onChange={onChange}
-                          control={control}
-                          value={value}
-                          tabIndex={9}
-                        />
-                      )}
-                    />
-                  </div>
-                  <div className="absolute -bottom-[22px] left-3">
-                    <Controller
-                      name="logo_props"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomEmojiIconPicker
-                          label={
-                            <span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
-                              <ProjectLogo logo={value} className="text-xl" />
-                            </span>
-                          }
-                          onChange={(val: any) => {
-                            let logoValue = {};
-
-                            if (val.type === "emoji")
-                              logoValue = {
-                                value: convertHexEmojiToDecimal(val.value.unified),
-                                url: val.value.imageUrl,
-                              };
-                            else if (val.type === "icon") logoValue = val.value;
-
-                            onChange({
-                              in_use: val.type,
-                              [val.type]: logoValue,
-                            });
-                          }}
-                          defaultIconColor={value.in_use === "icon" ? value.icon?.color : undefined}
-                          defaultOpen={
-                            value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
-                          }
-                        />
-                      )}
-                    />
-                  </div>
-                </div>
-                <form onSubmit={handleSubmit(onSubmit)} className="divide-y-[0.5px] divide-custom-border-100 px-3">
-                  <div className="mt-9 space-y-6 pb-5">
-                    <div className="grid grid-cols-1 gap-x-2 gap-y-3 md:grid-cols-4">
-                      <div className="md:col-span-3">
-                        <Controller
-                          control={control}
-                          name="name"
-                          rules={{
-                            required: "Title is required",
-                            maxLength: {
-                              value: 255,
-                              message: "Title should be less than 255 characters",
-                            },
-                          }}
-                          render={({ field: { value, onChange } }) => (
-                            <Input
-                              id="name"
-                              name="name"
-                              type="text"
-                              value={value}
-                              onChange={handleNameChange(onChange)}
-                              hasError={Boolean(errors.name)}
-                              placeholder="Project Title"
-                              className="w-full focus:border-blue-400"
-                              tabIndex={1}
-                            />
-                          )}
-                        />
-                        <span className="text-xs text-red-500">
-                          <>{errors?.name?.message}</>
-                        </span>
-                      </div>
-                      <div>
-                        <Controller
-                          control={control}
-                          name="identifier"
-                          rules={{
-                            required: "Identifier is required",
-                            // allow only alphanumeric & non-latin characters
-                            validate: (value) =>
-                              /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
-                              "Only Alphanumeric & Non-latin characters are allowed.",
-                            minLength: {
-                              value: 1,
-                              message: "Identifier must at least be of 1 character",
-                            },
-                            maxLength: {
-                              value: 12,
-                              message: "Identifier must at most be of 12 characters",
-                            },
-                          }}
-                          render={({ field: { value, onChange } }) => (
-                            <Input
-                              id="identifier"
-                              name="identifier"
-                              type="text"
-                              value={value}
-                              onChange={handleIdentifierChange(onChange)}
-                              hasError={Boolean(errors.identifier)}
-                              placeholder="Identifier"
-                              className="w-full text-xs uppercase focus:border-blue-400"
-                              tabIndex={2}
-                            />
-                          )}
-                        />
-                        <span className="text-xs text-red-500">
-                          <>{errors?.identifier?.message}</>
-                        </span>
-                      </div>
-                      <div className="md:col-span-4">
-                        <Controller
-                          name="description"
-                          control={control}
-                          render={({ field: { value, onChange } }) => (
-                            <TextArea
-                              id="description"
-                              name="description"
-                              value={value}
-                              placeholder="Description..."
-                              onChange={onChange}
-                              className="!h-24 text-sm focus:border-blue-400"
-                              hasError={Boolean(errors?.description)}
-                              tabIndex={3}
-                            />
-                          )}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Controller
-                        name="network"
-                        control={control}
-                        render={({ field: { onChange, value } }) => {
-                          const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
-
-                          return (
-                            <div className="flex-shrink-0" tabIndex={4}>
-                              <CustomSelect
-                                value={value}
-                                onChange={onChange}
-                                label={
-                                  <div className="flex items-center gap-1">
-                                    {currentNetwork ? (
-                                      <>
-                                        <currentNetwork.icon className="h-3 w-3" />
-                                        {currentNetwork.label}
-                                      </>
-                                    ) : (
-                                      <span className="text-custom-text-400">Select network</span>
-                                    )}
-                                  </div>
-                                }
-                                placement="bottom-start"
-                                noChevron
-                                tabIndex={4}
-                              >
-                                {NETWORK_CHOICES.map((network) => (
-                                  <CustomSelect.Option key={network.key} value={network.key}>
-                                    <div className="flex items-start gap-2">
-                                      <network.icon className="h-3.5 w-3.5" />
-                                      <div className="-mt-1">
-                                        <p>{network.label}</p>
-                                        <p className="text-xs text-custom-text-400">{network.description}</p>
-                                      </div>
-                                    </div>
-                                  </CustomSelect.Option>
-                                ))}
-                              </CustomSelect>
-                            </div>
-                          );
-                        }}
-                      />
-                      <Controller
-                        name="project_lead"
-                        control={control}
-                        render={({ field: { value, onChange } }) => {
-                          if (value === undefined || value === null || typeof value === "string")
-                            return (
-                              <div className="h-7 flex-shrink-0" tabIndex={5}>
-                                <MemberDropdown
-                                  value={value}
-                                  onChange={(lead) => onChange(lead === value ? null : lead)}
-                                  placeholder="Lead"
-                                  multiple={false}
-                                  buttonVariant="border-with-text"
-                                  tabIndex={5}
-                                />
-                              </div>
-                            );
-                          else return <></>;
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex justify-end gap-2 pt-5">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
-                      Cancel
-                    </Button>
-                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
-                      {isSubmitting ? "Creating" : "Create project"}
-                    </Button>
-                  </div>
-                </form>
+                {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
+                  <CreateProjectForm
+                    setToFavorite={setToFavorite}
+                    workspaceSlug={workspaceSlug}
+                    onClose={onClose}
+                    handleNextStep={handleNextStep}
+                  />
+                )}
+                {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
+                  <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
+                )}
               </Dialog.Panel>
             </Transition.Child>
           </div>

web/components/project/index.ts

@@ -3,6 +3,8 @@ export * from "./settings";
 export * from "./card-list";
 export * from "./card";
 export * from "./create-project-modal";
+export * from "./create-project-form";
+export * from "./project-feature-update";
 export * from "./delete-project-modal";
 export * from "./form-loader";
 export * from "./form";

web/components/project/project-feature-update.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// hooks
+import { useProject } from "hooks/store";
+// ui
+import { Button, getButtonStyling } from "@plane/ui";
+// components
+import { ProjectFeaturesList } from "./settings";
+import { ProjectLogo } from "./project-logo";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string | null;
+  onClose: () => void;
+};
+
+export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, onClose } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+
+  if (!workspaceSlug || !projectId) return null;
+  const currentProjectDetails = getProjectById(projectId);
+  if (!currentProjectDetails) return null;
+
+  return (
+    <>
+      <div className="px-4 py-2">
+        <h3 className="text-base font-medium leading-6">Toggle project features</h3>
+        <div className="text-sm tracking-tight text-custom-text-200 leading-5">
+          Turn on features which help you manage and run your project.
+        </div>
+      </div>
+      <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
+      <div className="flex items-center justify-between gap-2 mt-4 px-4 pt-4 pb-2 border-t border-custom-border-100">
+        <div className="text-sm text-custom-text-300 font-medium">
+          Congrats! Project <ProjectLogo logo={currentProjectDetails.logo_props} /> {currentProjectDetails.name}{" "}
+          created.
+        </div>
+        <div className="flex gap-2">
+          <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={1}>
+            Close
+          </Button>
+          <Link
+            href={`/${workspaceSlug}/projects/${projectId}/issues`}
+            onClick={onClose}
+            className={getButtonStyling("primary", "sm")}
+            tabIndex={2}
+          >
+            Open project
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+});

web/components/project/settings/features-list.tsx

@@ -1,86 +1,91 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
-import { useRouter } from "next/router";
-import { ContrastIcon, FileText, Inbox, Layers } from "lucide-react";
+import { FileText, Inbox } from "lucide-react";
 // ui
-import { DiceIcon, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { EUserProjectRoles } from "constants/project";
+import { ContrastIcon, DiceIcon, PhotoFilterIcon, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // hooks
 import { useEventTracker, useProject, useUser } from "hooks/store";
 // types
 import { IProject } from "@plane/types";
 
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  isAdmin: boolean;
+};
+
 const PROJECT_FEATURES_LIST = [
   {
     title: "Cycles",
-    description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    description: "Time-box issues and boost momentum, similar to sprints in scrum.",
     icon: <ContrastIcon className="h-4 w-4 flex-shrink-0 rotate-180 text-purple-500" />,
     property: "cycle_view",
   },
   {
     title: "Modules",
-    description: "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <DiceIcon width={16} height={16} className="flex-shrink-0" />,
+    description: "Group multiple issues together and track the progress.",
+    icon: <DiceIcon width={16} height={16} className="flex-shrink-0 text-red-500" />,
     property: "module_view",
   },
   {
     title: "Views",
-    description: "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <Layers className="h-4 w-4 flex-shrink-0 text-cyan-500" />,
+    description: "Apply filters to issues and save them to analyse and investigate work.",
+    icon: <PhotoFilterIcon className="h-4 w-4 flex-shrink-0 text-cyan-500" />,
     property: "issue_views_view",
   },
   {
     title: "Pages",
-    description: "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
+    description: "Document ideas, feature requirements, discussions within your project.",
     icon: <FileText className="h-4 w-4 flex-shrink-0 text-red-400" />,
     property: "page_view",
   },
   {
     title: "Inbox",
-    description: "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
+    description: "Capture external inputs, move valid issues to workflow.",
     icon: <Inbox className="h-4 w-4 flex-shrink-0 text-fuchsia-500" />,
     property: "inbox_view",
   },
 ];
 
-export const ProjectFeaturesList: FC = observer(() => {
-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+export const ProjectFeaturesList: FC<Props> = observer((props) => {
+  const { workspaceSlug, projectId, isAdmin } = props;
   // store hooks
   const { captureEvent } = useEventTracker();
-  const {
-    currentUser,
-    membership: { currentProjectRole },
-  } = useUser();
-  const { currentProjectDetails, updateProject } = useProject();
-  const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
+  const { currentUser } = useUser();
+  const { getProjectById, updateProject } = useProject();
+  // derived values
+  const currentProjectDetails = getProjectById(projectId);
 
   const handleSubmit = async (formData: Partial<IProject>) => {
     if (!workspaceSlug || !projectId || !currentProjectDetails) return;
-    setToast({
-      type: TOAST_TYPE.SUCCESS,
-      title: "Success!",
-      message: "Project feature updated successfully.",
+    const updateProjectPromise = updateProject(workspaceSlug, projectId, formData);
+    setPromiseToast(updateProjectPromise, {
+      loading: "Updating project feature...",
+      success: {
+        title: "Success!",
+        message: () => "Project feature updated successfully.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Something went wrong while updating project feature. Please try again.",
+      },
     });
-    updateProject(workspaceSlug.toString(), projectId.toString(), formData);
   };
 
   if (!currentUser) return <></>;
 
   return (
-    <div>
+    <div className="mx-4">
       {PROJECT_FEATURES_LIST.map((feature) => (
         <div
           key={feature.property}
-          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 p-4"
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 pt-4 pb-2 last:border-b-0"
         >
           <div className="flex items-start gap-3">
-            <div className="flex items-center justify-center rounded bg-custom-background-90 p-3">{feature.icon}</div>
+            <div className="flex items-center justify-center rounded bg-custom-primary-50/10 p-3">{feature.icon}</div>
             <div className="">
-              <h4 className="text-sm font-medium">{feature.title}</h4>
-              <p className="text-sm tracking-tight text-custom-text-200">{feature.description}</p>
+              <h4 className="text-sm font-medium leading-5">{feature.title}</h4>
+              <p className="text-sm tracking-tight text-custom-text-300 leading-5">{feature.description}</p>
             </div>
           </div>
           <ToggleSwitch

web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -13,6 +13,8 @@ import { ProjectSettingLayout } from "layouts/settings-layout";
 // components
 // types
 import { NextPageWithLayout } from "lib/types";
+// constants
+import { EUserProjectRoles } from "constants/project";
 
 const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
   const router = useRouter();
@@ -28,9 +30,11 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
     workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug.toString(), projectId.toString()) : null
   );
   // derived values
-  const isAdmin = memberDetails?.role === 20;
+  const isAdmin = memberDetails?.role === EUserProjectRoles.ADMIN;
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Features` : undefined;
 
+  if (!workspaceSlug || !projectId) return null;
+
   return (
     <>
       <PageHead title={pageTitle} />
@@ -38,7 +42,11 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
         <div className="flex items-center border-b border-custom-border-100 py-3.5">
           <h3 className="text-xl font-medium">Features</h3>
         </div>
-        <ProjectFeaturesList />
+        <ProjectFeaturesList
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          isAdmin={isAdmin}
+        />
       </section>
     </>
   );