From 5046b88e272089552f66a0dde0376bc10d74dc3c Mon Sep 17 00:00:00 2001 From: Pavan Chindukuri Date: Thu, 18 Jan 2024 15:53:16 +0530 Subject: [PATCH 001/105] fixing bugs and modals issue and nested css issue --- package.json | 10 +- src/canvas/Flow.tsx | 1 + .../microservice/MicroserviceNode.node.tsx | 2 +- .../form/AddResourceModalContent.tsx | 9 +- .../microservice/form/GRPCConfigForm.tsx | 2 + .../form/MicroserviceNode.modal.form.tsx | 5 +- .../form/UpdateResourceModalContent.tsx | 35 +- src/components/common/modals/AddNodeModal.tsx | 85 +- .../NavBarLinksGroup.stories.ts | 39 + .../common/side-nav/SideNavbar.stories.ts | 16 + src/components/common/side-nav/SideNavbar.tsx | 61 +- src/components/common/side-nav/data.ts | 53 + src/pages/home/Home.tsx | 3 +- src/pages/profile/profile.module.css | 64 +- yarn.lock | 1619 ++++++++--------- 15 files changed, 1000 insertions(+), 1004 deletions(-) create mode 100644 src/components/common/nav-links-group/NavBarLinksGroup.stories.ts create mode 100644 src/components/common/side-nav/SideNavbar.stories.ts create mode 100644 src/components/common/side-nav/data.ts diff --git a/package.json b/package.json index c3430f9..0b5f1a3 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,10 @@ "dev": "vite --host", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" + "preview": "vite preview", + "storybook": "storybook dev -p 6006", + "sb": "yarn storybook", + "build-storybook": "storybook build" }, "dependencies": { "@hookform/resolvers": "^3.3.4", @@ -60,5 +63,8 @@ "typescript": "^5.2.2", "vite": "^5.0.8" }, - "packageManager": "yarn@4.0.2" + "packageManager": "yarn@4.0.2", + "resolutions": { + "jackspeak": "2.1.1" + } } diff --git a/src/canvas/Flow.tsx b/src/canvas/Flow.tsx index a05cdec..69b80ed 100644 --- a/src/canvas/Flow.tsx +++ b/src/canvas/Flow.tsx @@ -57,6 +57,7 @@ export default function Flow() { position='right' onClose={closeCodeViewDrawer} opened={isCodeViewDrawerOpen} + closeOnEscape={false} > diff --git a/src/canvas/nodes/microservice/MicroserviceNode.node.tsx b/src/canvas/nodes/microservice/MicroserviceNode.node.tsx index 33aafb8..0c02387 100644 --- a/src/canvas/nodes/microservice/MicroserviceNode.node.tsx +++ b/src/canvas/nodes/microservice/MicroserviceNode.node.tsx @@ -68,7 +68,7 @@ export default function MicroserviceNode(props: NodeProps) { { - e?.stopPropagation() - e?.preventDefault() + onSubmit={(e) => { + e.preventDefault() + e.stopPropagation() + const data = form.getValues() const resource: Resource = { name: data.name, allowedMethods: data.allowedMethods.map((method) => method.id), @@ -121,7 +122,7 @@ export default function AddResourceModalContent(props: Props) { }, {} as Record), } props.onResourceAdd(resource) - })} + }} > diff --git a/src/canvas/nodes/microservice/form/GRPCConfigForm.tsx b/src/canvas/nodes/microservice/form/GRPCConfigForm.tsx index 273ee62..421682e 100644 --- a/src/canvas/nodes/microservice/form/GRPCConfigForm.tsx +++ b/src/canvas/nodes/microservice/form/GRPCConfigForm.tsx @@ -144,6 +144,7 @@ export default function GRPCConfigForm({ form }: GRPCConfigFormProps) { onClose={closeAddResourceModal} title='Add Resources' size='lg' + closeOnEscape={false} > { @@ -153,6 +154,7 @@ export default function GRPCConfigForm({ form }: GRPCConfigFormProps) { /> ({ defaultValues: structuredClone(currentFormData), resolver: zodResolver(schema), + reValidateMode: 'onSubmit', }) const transformToNodeFormData = ( data: MicroServiceNodeFormDataUI @@ -49,7 +50,7 @@ export default function MicroServiceNodeDrawerForm( return ( <>
{ + onSubmit={(e) => { e?.stopPropagation() e?.preventDefault() setNodeFormData( @@ -57,7 +58,7 @@ export default function MicroServiceNodeDrawerForm( props.nodeId ) props.onSubmit(transformToNodeFormData(form.getValues())) - }, console.error)} + }} > { + const currentAllowedMethods = form.getValues('allowedMethods') + let newAllowedMethods + if (isChecked) { + // Add the method if not already in the list + newAllowedMethods = currentAllowedMethods.some((m) => m.id === method) + ? currentAllowedMethods + : [...currentAllowedMethods, { id: method }] + } else { + // Remove the method from the list + newAllowedMethods = currentAllowedMethods.filter((m) => m.id !== method) + } + + // Update the form state + form.setValue('allowedMethods', newAllowedMethods) + } return ( { + onSubmit={(e) => { e?.stopPropagation() e?.preventDefault() if (props.resourceIndex === undefined) { return } + const data = form.getValues() const resource: Resource = { name: data.name, allowedMethods: data.allowedMethods.map((method) => method.id), @@ -125,7 +138,7 @@ export default function UpdateResourceModalContent(props: Props) { }, {} as Record), } props.onResourceUpdate(resource, props.resourceIndex) - })} + }} > @@ -140,18 +153,16 @@ export default function UpdateResourceModalContent(props: Props) { - {getSupportedMethods().map((method, index) => ( + {getSupportedMethods().map((method) => ( { - allowedMethodsFieldArray.append({ id: method }) - }} + name={`allowedMethods.${method}`} + onChange={(e) => handleCheckboxChange(method, e.target.checked)} /> ))} diff --git a/src/components/common/modals/AddNodeModal.tsx b/src/components/common/modals/AddNodeModal.tsx index b623735..527ae2e 100644 --- a/src/components/common/modals/AddNodeModal.tsx +++ b/src/components/common/modals/AddNodeModal.tsx @@ -3,31 +3,8 @@ import { modals } from '@mantine/modals' import { getInitialMicroserviceNodeFormData } from 'src/canvas/nodes/microservice/Microservice.utils' import { useFlowStore } from 'src/canvas/store/flowstore' import { MicroServiceNode, NodeTypes } from 'src/canvas/store/types.store' -import { getRandomNodeId } from 'src/utils/nanoid' - -const testing = true export function AddNodeModal() { - const addDummyNode = () => { - const node: MicroServiceNode = { - data: { - ...getInitialMicroserviceNodeFormData(), - name: 'Dummy Node Name', - description: `Insanely large node description -Insanely large node description -written by me`, - type: NodeTypes.MICROSERVICE, - }, - type: NodeTypes.MICROSERVICE, - id: getRandomNodeId(), - position: { - x: (Math.random() * window.innerWidth) / 2, - y: (Math.random() * window.innerHeight) / 2, - }, - } - addNode(node) - modals.closeAll() - } const { addNode } = useFlowStore() const handleAddNodeClick = (name: string, description: string) => { const node: MicroServiceNode = { @@ -48,41 +25,39 @@ written by me`, } const openAddNodeModal = () => modals.open({ + id: 'add-node-modal', title: 'Add Node', children: ( - {testing ? ( - - ) : ( - { - e.preventDefault() - e.stopPropagation() - const target = e.target as unknown as { value: string }[] - handleAddNodeClick(target[0].value, target[1].value) - modals.closeAll() - }} - > - -