Fix #207

PROCEED-Labs · Jan 5, 2024 · bdda624 · bdda624
1 parent d86ebe6
commit bdda624
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 96 deletions.
diff --git a/src/management-system-v2/app/(dashboard)/general-settings/settings-form.tsx b/src/management-system-v2/app/(dashboard)/general-settings/settings-form.tsx
@@ -31,6 +31,7 @@ const SettingsForm = ({ settings, updateSettings }: SettingsFormProps) => {
       <Table
         dataSource={[
           {
+            key: 'Log Level',
             title: 'Log Level',
             value: (
               <Form.Item

diff --git a/src/management-system-v2/components/confirmation-button.tsx b/src/management-system-v2/components/confirmation-button.tsx
@@ -1,7 +1,7 @@
-import { ComponentProps, FC, PropsWithChildren, useState } from 'react';
+import { ComponentProps, FC, PropsWithChildren, forwardRef, useState } from 'react';
 import { Button, Modal, Tooltip } from 'antd';
 
-type ConfirmationModalProps = {
+type ConfirmationModalProps = PropsWithChildren<{
   onConfirm: () => Promise<any> | any;
   title: string;
   description: string;
@@ -14,68 +14,74 @@ type ConfirmationModalProps = {
   tooltip?: string;
   externalOpen?: boolean;
   onExternalClose?: () => void;
-};
+}>;
 
-const ConfirmationButton: FC<PropsWithChildren<ConfirmationModalProps>> = ({
-  children,
-  onConfirm,
-  title,
-  description,
-  canCloseWhileLoading = false,
-  modalProps,
-  buttonProps,
-  tooltip,
-  externalOpen,
-  onExternalClose,
-}) => {
-  const [modalOpen, setModalOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
+const ConfirmationButton = forwardRef<HTMLElement, ConfirmationModalProps>(
+  (
+    {
+      children,
+      onConfirm,
+      title,
+      description,
+      canCloseWhileLoading = false,
+      modalProps,
+      buttonProps,
+      tooltip,
+      externalOpen,
+      onExternalClose,
+    },
+    ref,
+  ) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
 
-  const clearModal = () => {
-    setModalOpen(false);
-    onExternalClose?.();
-    setLoading(false);
-  };
+    const clearModal = () => {
+      setModalOpen(false);
+      onExternalClose?.();
+      setLoading(false);
+    };
 
-  const onConfirmWrapper = async () => {
-    setLoading(true);
+    const onConfirmWrapper = async () => {
+      setLoading(true);
 
-    try {
-      await onConfirm();
-    } catch (err) {}
+      try {
+        await onConfirm();
+      } catch (err) {}
 
-    clearModal();
-  };
+      clearModal();
+    };
 
-  return (
-    <>
-      <Modal
-        closeIcon={null}
-        {...modalProps}
-        title={title}
-        open={externalOpen || modalOpen}
-        onOk={onConfirmWrapper}
-        confirmLoading={loading}
-        onCancel={() =>
-          ((canCloseWhileLoading || !loading) && setModalOpen(false)) || onExternalClose?.()
-        }
-        cancelButtonProps={{ disabled: !canCloseWhileLoading && loading }}
-      >
-        <p>{description}</p>
-      </Modal>
-
-      <Tooltip title={tooltip}>
-        <Button
-          {...buttonProps}
-          onClick={() => setModalOpen(true)}
-          disabled={modalOpen || buttonProps?.disabled}
-          loading={loading}
+    return (
+      <>
+        <Modal
+          closeIcon={null}
+          {...modalProps}
+          title={title}
+          open={externalOpen || modalOpen}
+          onOk={onConfirmWrapper}
+          confirmLoading={loading}
+          onCancel={() =>
+            ((canCloseWhileLoading || !loading) && setModalOpen(false)) || onExternalClose?.()
+          }
+          cancelButtonProps={{ disabled: !canCloseWhileLoading && loading }}
         >
-          {children}
-        </Button>
-      </Tooltip>
-    </>
-  );
-};
+          <p>{description}</p>
+        </Modal>
+
+        <Tooltip title={tooltip}>
+          <Button
+            ref={ref}
+            {...buttonProps}
+            onClick={() => setModalOpen(true)}
+            disabled={modalOpen || buttonProps?.disabled}
+            loading={loading}
+          ></Button>
+        </Tooltip>
+      </>
+    );
+  },
+);
+
+ConfirmationButton.displayName = 'ConfirmationButton';
 
 export default ConfirmationButton;
diff --git a/src/management-system-v2/components/process-export.tsx b/src/management-system-v2/components/process-export.tsx
@@ -17,6 +17,7 @@ import type { CheckboxValueType } from 'antd/es/checkbox/Group';
 
 import { exportProcesses } from '@/lib/process-export';
 import { ProcessExportOptions, ExportProcessInfo } from '@/lib/process-export/export-preparation';
+import { R } from '@tanstack/react-query-devtools/build/legacy/devtools-0Hr18ibL';
 
 const exportTypeOptions = [
   { label: 'BPMN', value: 'bpmn' },
@@ -177,9 +178,11 @@ const ProcessExportModal: React.FC<ProcessExportModalProps> = ({
         <Space direction="vertical">
           {(selectedType ? getSubOptions(giveSelectionOption)[selectedType] : []).map(
             ({ label, value, tooltip }) => (
-              <Tooltip placement="left" title={tooltip} key={label}>
-                <Checkbox value={value}>{label}</Checkbox>
-              </Tooltip>
+              <Checkbox value={value} key={label}>
+                <Tooltip placement="right" title={tooltip}>
+                  {label}
+                </Tooltip>
+              </Checkbox>
             ),
           )}
         </Space>
@@ -194,15 +197,21 @@ const ProcessExportModal: React.FC<ProcessExportModalProps> = ({
             onChange={(e) => setPngScalingFactor(e.target.value)}
             value={pngScalingFactor}
           >
-            <Tooltip placement="bottom" title="Smallest resolution and smallest file size">
-              <Radio value={1.5}>Normal</Radio>
-            </Tooltip>
-            <Tooltip placement="bottom" title="Medium resolution and medium file size">
-              <Radio value={2.5}>Good</Radio>
-            </Tooltip>
-            <Tooltip placement="bottom" title="Highest resolution and biggest file size">
-              <Radio value={4}>Excellent</Radio>
-            </Tooltip>
+            <Radio value={1.5}>
+              <Tooltip placement="bottom" title="Smallest resolution and smallest file size">
+                Normal
+              </Tooltip>
+            </Radio>
+            <Radio value={2.5}>
+              <Tooltip placement="bottom" title="Medium resolution and medium file size">
+                Good
+              </Tooltip>
+            </Radio>
+            <Radio value={4}>
+              <Tooltip placement="bottom" title="Highest resolution and biggest file size">
+                Excellent
+              </Tooltip>
+            </Radio>
           </Radio.Group>
         </div>
       )}

diff --git a/src/management-system-v2/components/version-creation-button.tsx b/src/management-system-v2/components/version-creation-button.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 
 import { Button, Modal, Form, Input } from 'antd';
 import type { ButtonProps } from 'antd';
@@ -63,32 +63,34 @@ const VersionModal: React.FC<VersionModalProps> = ({ show, close }) => {
 type VersionCreationButtonProps = ButtonProps & {
   createVersion: (values: { versionName: string; versionDescription: string }) => any;
 };
-const VersionCreationButton: React.FC<VersionCreationButtonProps> = ({
-  createVersion,
-  ...props
-}) => {
-  const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
+const VersionCreationButton = forwardRef<HTMLElement, VersionCreationButtonProps>(
+  ({ createVersion, ...props }, ref) => {
+    const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
 
-  return (
-    <>
-      <Button
-        {...props}
-        onClick={() => {
-          setIsVersionModalOpen(true);
-        }}
-      ></Button>
-      <VersionModal
-        close={(values) => {
-          setIsVersionModalOpen(false);
+    return (
+      <>
+        <Button
+          ref={ref}
+          {...props}
+          onClick={() => {
+            setIsVersionModalOpen(true);
+          }}
+        ></Button>
+        <VersionModal
+          close={(values) => {
+            setIsVersionModalOpen(false);
 
-          if (values) {
-            createVersion(values);
-          }
-        }}
-        show={isVersionModalOpen}
-      ></VersionModal>
-    </>
-  );
-};
+            if (values) {
+              createVersion(values);
+            }
+          }}
+          show={isVersionModalOpen}
+        ></VersionModal>
+      </>
+    );
+  },
+);
+
+VersionCreationButton.displayName = 'VersionCreationButton';
 
 export default VersionCreationButton;