From 4792c1cdf564ce3c19664a0ff905c80cc86910d2 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 12 Aug 2024 19:17:10 +0530
Subject: [PATCH] fix: project modal shortcut (#5353)

---
 .../command-palette/command-palette.tsx       | 18 +++---
 .../project/create-project-modal.tsx          | 63 +++++--------------
 .../project/create/project-create-buttons.tsx |  2 +-
 3 files changed, 29 insertions(+), 54 deletions(-)

diff --git a/web/core/components/command-palette/command-palette.tsx b/web/core/components/command-palette/command-palette.tsx
index 099d53f90..7427fabee 100644
--- a/web/core/components/command-palette/command-palette.tsx
+++ b/web/core/components/command-palette/command-palette.tsx
@@ -212,7 +212,6 @@ export const CommandPalette: FC = observer(() => {
       toggleCreatePageModal,
       toggleCreateProjectModal,
       toggleCreateViewModal,
-      toggleShortcutModal,
     ]
   );
 
@@ -261,15 +260,18 @@ export const CommandPalette: FC = observer(() => {
         if (
           Object.keys(shortcutsList.global).includes(keyPressed) &&
           ((!projectId && performAnyProjectCreateActions()) || performProjectCreateActions())
-        )
+        ) {
           shortcutsList.global[keyPressed].action();
+        }
         // workspace authorized actions
         else if (
           Object.keys(shortcutsList.workspace).includes(keyPressed) &&
           workspaceSlug &&
           performWorkspaceCreateActions()
-        )
+        ) {
+          e.preventDefault();
           shortcutsList.workspace[keyPressed].action();
+        }
         // project authorized actions
         else if (
           Object.keys(shortcutsList.project).includes(keyPressed) &&
@@ -283,16 +285,18 @@ export const CommandPalette: FC = observer(() => {
       }
     },
     [
-      performAnyProjectCreateActions,
-      performProjectCreateActions,
-      performProjectBulkDeleteActions,
-      performWorkspaceCreateActions,
       copyIssueUrlToClipboard,
       isAnyModalOpen,
+      platform,
+      performAnyProjectCreateActions,
+      performProjectBulkDeleteActions,
+      performProjectCreateActions,
+      performWorkspaceCreateActions,
       projectId,
       setTrackElement,
       shortcutsList,
       toggleCommandPaletteModal,
+      toggleShortcutModal,
       toggleSidebar,
       workspaceSlug,
     ]
diff --git a/web/core/components/project/create-project-modal.tsx b/web/core/components/project/create-project-modal.tsx
index 6fbe08cbc..b5e44fe40 100644
--- a/web/core/components/project/create-project-modal.tsx
+++ b/web/core/components/project/create-project-modal.tsx
@@ -1,5 +1,6 @@
-import { useEffect, Fragment, FC, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+import { useEffect, FC, useState } from "react";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { CreateProjectForm } from "@/plane-web/components/projects/create/root";
 import { TProject } from "@/plane-web/types/projects";
@@ -38,49 +39,19 @@ export const CreateProjectModal: FC<Props> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              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">
-                {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
-                  <CreateProjectForm
-                    setToFavorite={setToFavorite}
-                    workspaceSlug={workspaceSlug}
-                    onClose={onClose}
-                    handleNextStep={handleNextStep}
-                    data={data}
-                  />
-                )}
-                {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
-                  <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
-                )}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
+        <CreateProjectForm
+          setToFavorite={setToFavorite}
+          workspaceSlug={workspaceSlug}
+          onClose={onClose}
+          handleNextStep={handleNextStep}
+          data={data}
+        />
+      )}
+      {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
+        <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
+      )}
+    </ModalCore>
   );
 };
diff --git a/web/core/components/project/create/project-create-buttons.tsx b/web/core/components/project/create/project-create-buttons.tsx
index 8816a5454..7eac09583 100644
--- a/web/core/components/project/create/project-create-buttons.tsx
+++ b/web/core/components/project/create/project-create-buttons.tsx
@@ -12,7 +12,7 @@ const ProjectCreateButtons: React.FC<Props> = (props) => {
   } = useFormContext<IProject>();
 
   return (
-    <div className="flex justify-end gap-2 pt-4 border-t border-custom-border-100">
+    <div className="flex justify-end gap-2 py-4 border-t border-custom-border-100">
       <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={6}>
         Cancel
       </Button>