ms2: creation modals bug

src/management-system-v2/components/folder-creation.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { ComponentProps, FC, useTransition } from 'react';
+import { App } from 'antd';
+import { useParams, useRouter } from 'next/navigation';
+import { useEnvironment } from './auth-can';
+import { FolderUserInput } from '@/lib/data/folder-schema';
+import { createFolder as serverCreateFolder } from '@/lib/data/folders';
+import FolderModal from './folder-modal';
+import { wrapServerCall } from '@/lib/wrap-server-call';
+
+export const FolderCreationModal: FC<
+  Partial<ComponentProps<typeof FolderModal>> & { open: boolean; close: () => void }
+> = (props) => {
+  const { message } = App.useApp();
+  const router = useRouter();
+  const spaceId = useEnvironment().spaceId;
+  const folderId = useParams<{ folderId: string }>().folderId ?? '';
+  const [isLoading, startTransition] = useTransition();
+
+  const createFolder = (values: FolderUserInput) => {
+    startTransition(async () => {
+      await wrapServerCall({
+        fn: async () => serverCreateFolder(values),
+        onSuccess() {
+          router.refresh();
+          message.open({ type: 'success', content: 'Folder Created' });
+          props.close();
+        },
+      });
+    });
+  };
+
+  return (
+    <FolderModal
+      {...props}
+      open={props.open}
+      close={props.close}
+      spaceId={spaceId}
+      parentId={folderId}
+      onSubmit={createFolder}
+      modalProps={{
+        title: 'Create Folder',
+        okButtonProps: { loading: isLoading },
+      }}
+    />
+  );
+};

src/management-system-v2/components/process-creation-button.tsx

@@ -1,35 +1,20 @@
-'use client';
-
-import React, { ReactNode, useState } from 'react';
+import React, { ComponentProps, ReactNode, useState } from 'react';
 import { Button } from 'antd';
 import type { ButtonProps, ModalProps } from 'antd';
 import ProcessModal from './process-modal';
-import { createProcess } from '@/lib/helpers/processHelpers';
 import { addProcesses } from '@/lib/data/processes';
-import { useParams, useRouter, useSelectedLayoutSegments } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { useEnvironment } from './auth-can';
 import { useAddControlCallback } from '@/lib/controls-store';
 import { spaceURL } from '@/lib/utils';
 
-type ProcessCreationButtonProps = ButtonProps & {
-  customAction?: (values: { name: string; description: string }) => Promise<any>;
-  wrapperElement?: ReactNode;
-  defaultOpen?: boolean;
-  modalProps?: ModalProps;
-};
-
-/**
- *
- * Button to create Processes including a Modal for inserting needed values. Alternatively, a custom wrapper element can be used instead of a button.
- */
-const ProcessCreationButton: React.FC<ProcessCreationButtonProps> = ({
-  wrapperElement,
-  customAction,
-  defaultOpen = false,
-  modalProps,
-  ...props
-}) => {
-  const [isProcessModalOpen, setIsProcessModalOpen] = useState(defaultOpen);
+export const ProcessCreationModal: React.FC<
+  Partial<ComponentProps<typeof ProcessModal>> & {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    customAction?: (values: { name: string; description: string }) => Promise<any>;
+  }
+> = ({ open, setOpen, customAction, ...props }) => {
   const router = useRouter();
   const environment = useEnvironment();
   const folderId = useParams<{ folderId: string }>().folderId ?? '';
@@ -41,10 +26,12 @@ const ProcessCreationButton: React.FC<ProcessCreationButtonProps> = ({
         values.map((value) => ({ ...value, folderId })),
         environment.spaceId,
       ).then((res) => (Array.isArray(res) ? res[0] : res)));
+
     if (process && 'error' in process) {
       return process;
     }
-    setIsProcessModalOpen(false);
+
+    setOpen(false);
 
     if (process && 'id' in process) {
       router.push(spaceURL(environment, `/processes/${process.id}`));
@@ -57,8 +44,8 @@ const ProcessCreationButton: React.FC<ProcessCreationButtonProps> = ({
     'process-list',
     ['control+enter', 'new'],
     () => {
-      if (!isProcessModalOpen) {
-        setIsProcessModalOpen(true);
+      if (!open) {
+        setOpen(true);
       }
     },
     {
@@ -67,30 +54,49 @@ const ProcessCreationButton: React.FC<ProcessCreationButtonProps> = ({
     },
   );
 
+  return (
+    <ProcessModal
+      {...props}
+      open={open}
+      title="Create Process"
+      okText="Create"
+      onCancel={() => setOpen(false)}
+      onSubmit={createNewProcess}
+    />
+  );
+};
+
+type ProcessCreationButtonProps = ButtonProps & {
+  customAction?: (values: { name: string; description: string }) => Promise<any>;
+  wrapperElement?: ReactNode;
+  defaultOpen?: boolean;
+  modalProps?: ModalProps;
+};
+
+/**
+ *
+ * Button to create Processes including a Modal for inserting needed values. Alternatively, a custom wrapper element can be used instead of a button.
+ */
+const ProcessCreationButton: React.FC<ProcessCreationButtonProps> = ({
+  wrapperElement,
+  customAction,
+  defaultOpen = false,
+  modalProps,
+  ...props
+}) => {
+  const [isProcessModalOpen, setIsProcessModalOpen] = useState(defaultOpen);
+
   return (
     <>
       {wrapperElement ? (
-        <div
-          onClick={() => {
-            setIsProcessModalOpen(true);
-          }}
-        >
-          {wrapperElement}
-        </div>
+        <div onClick={() => setIsProcessModalOpen(true)}>{wrapperElement}</div>
       ) : (
-        <Button
-          {...props}
-          onClick={() => {
-            setIsProcessModalOpen(true);
-          }}
-        ></Button>
+        <Button {...props} onClick={() => setIsProcessModalOpen(true)} />
       )}
-      <ProcessModal
+      <ProcessCreationModal
         open={isProcessModalOpen}
-        title="Create Process"
-        okText="Create"
-        onCancel={() => setIsProcessModalOpen(false)}
-        onSubmit={createNewProcess}
+        setOpen={setIsProcessModalOpen}
+        customAction={customAction}
         modalProps={modalProps}
       />
     </>

src/management-system-v2/components/processes/index.tsx

@@ -1,16 +1,8 @@
 'use client';
 
 import styles from './processes.module.scss';
-import {
-  ComponentProps,
-  Dispatch,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-  useTransition,
-} from 'react';
-import { Space, Button, Tooltip, Grid, App, Drawer, Dropdown, Card, Badge, Spin } from 'antd';
+import { ComponentProps, useRef, useState, useTransition } from 'react';
+import { Space, Button, Tooltip, Grid, App, Drawer, Dropdown, Card, Badge } from 'antd';
 import {
   CopyOutlined,
   EditOutlined,
@@ -26,7 +18,7 @@ import ProcessList from '@/components/process-list';
 import MetaData from '@/components/process-info-card';
 import ProcessExportModal from '@/components/process-export';
 import Bar from '@/components/bar';
-import ProcessCreationButton from '@/components/process-creation-button';
+import { ProcessCreationModal } from '@/components/process-creation-button';
 import { useUserPreferences } from '@/lib/user-preferences';
 import { useAbilityStore } from '@/lib/abilityStore';
 import useFuzySearch, { ReplaceKeysWithHighlighted } from '@/lib/useFuzySearch';
@@ -37,9 +29,9 @@ import ConfirmationButton from '@/components/confirmation-button';
 import ProcessImportButton from '@/components/process-import';
 import { ProcessMetadata } from '@/lib/data/process-schema';
 import MetaDataContent from '@/components/process-info-card-content';
-import { AuthCan, useEnvironment } from '@/components/auth-can';
+import { useEnvironment } from '@/components/auth-can';
 import { Folder } from '@/lib/data/folder-schema';
-import FolderCreationButton from '@/components/folder-creation-button';
+import { FolderCreationModal } from '@/components/folder-creation';
 import {
   deleteFolder,
   moveIntoFolder,
@@ -137,6 +129,11 @@ const Processes = ({
   const [updatingFolder, startUpdatingFolderTransition] = useTransition();
   const [updateFolderModal, setUpdateFolderModal] = useState<Folder | undefined>(undefined);
   const [movingItem, startMovingItemTransition] = useTransition();
+  const [openCreateProcessModal, setOpenCreateProcessModal] = useState(
+    typeof window !== 'undefined' &&
+      new URLSearchParams(document.location.search).has('createprocess'),
+  );
+  const [openCreateFolderModal, setOpenCreateFolderModal] = useState(false);
 
   const [copySelection, setCopySelection] = useState<ProcessListProcess[]>([]);
 
@@ -214,32 +211,21 @@ const Processes = ({
       );
     }
   }
-  const createProcessButton = (
-    <ProcessCreationButton
-      wrapperElement="Create Process"
-      defaultOpen={
-        typeof window !== 'undefined' &&
-        new URLSearchParams(document.location.search).has('createprocess')
-      }
-      modalProps={{
-        onCancel: deleteCreateProcessSearchParams,
-        onOk: deleteCreateProcessSearchParams,
-      }}
-    />
-  );
 
   const defaultDropdownItems = [];
   if (ability.can('create', 'Process'))
     defaultDropdownItems.push({
       key: 'create-process',
-      label: createProcessButton,
+      label: 'Create Process',
       icon: <FileOutlined />,
+      onClick: () => setOpenCreateProcessModal(true),
     });
 
   if (ability.can('create', 'Folder'))
     defaultDropdownItems.push({
       key: 'create-folder',
-      label: <FolderCreationButton wrapperElement="Create Folder" />,
+      label: 'Create Folder',
+      onClick: () => setOpenCreateFolderModal(true),
       icon: <FolderOutlined />,
     });
 
@@ -356,10 +342,12 @@ const Processes = ({
                             items: defaultDropdownItems.filter(
                               (item) => item.key !== 'create-process',
                             ),
+                            mode: 'inline',
                           }}
                           type="primary"
+                          onClick={() => setOpenCreateProcessModal(true)}
                         >
-                          {createProcessButton}
+                          Create Process
                         </Dropdown.Button>
                         <ProcessImportButton type="default">
                           {breakpoint.xl ? 'Import Process' : 'Import'}
@@ -619,7 +607,6 @@ const Processes = ({
           router.refresh();
         }}
       />
-      <AddUserControls name={'process-list'} />
       <FolderModal
         open={!!updateFolderModal}
         close={() => setUpdateFolderModal(undefined)}
@@ -629,6 +616,19 @@ const Processes = ({
         modalProps={{ title: 'Edit folder', okButtonProps: { loading: updatingFolder } }}
         initialValues={updateFolderModal}
       />
+      <ProcessCreationModal
+        open={openCreateProcessModal}
+        setOpen={setOpenCreateProcessModal}
+        modalProps={{
+          onCancel: deleteCreateProcessSearchParams,
+          onOk: deleteCreateProcessSearchParams,
+        }}
+      />
+      <FolderCreationModal
+        open={openCreateFolderModal}
+        close={() => setOpenCreateFolderModal(false)}
+      />
+      <AddUserControls name={'process-list'} />
     </>
   );
 };