From 530b4b32911251449839bbd503ac0c50ec380950 Mon Sep 17 00:00:00 2001 From: Rachit Singh Date: Thu, 16 May 2024 11:45:58 +0530 Subject: [PATCH] UI/UX improvements --- package.json | 1 + pnpm-lock.yaml | 55 +++ .../molecules/modals/flow/NewFlowTestModal.js | 355 +++++++++--------- .../workspace/EmptyWorkSpaceContent.js | 28 +- 4 files changed, 249 insertions(+), 190 deletions(-) diff --git a/package.json b/package.json index 1e605a0..89f56d2 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "notistack": "^3.0.1", "postcss": "^8.4.35", "react": "^18.2.0", + "react-custom-scrollbars": "^4.2.1", "react-dom": "^18.2.0", "react-edit-text": "^5.1.1", "react-icons": "^5.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7499bd1..fe8c885 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: react: specifier: ^18.2.0 version: 18.3.1 + react-custom-scrollbars: + specifier: ^4.2.1 + version: 4.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-dom: specifier: ^18.2.0 version: 18.3.1(react@18.3.1) @@ -2539,6 +2542,9 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + add-px-to-style@1.0.0: + resolution: {integrity: sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew==} + address@1.2.2: resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==} engines: {node: '>= 10.0.0'} @@ -3695,6 +3701,9 @@ packages: dom-converter@0.2.0: resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==} + dom-css@2.1.0: + resolution: {integrity: sha512-w9kU7FAbaSh3QKijL6n59ofAhkkmMJ31GclJIz/vyQdjogfyxcB6Zf8CZyibOERI5o0Hxz30VmJS7+7r5fEj2Q==} + dom-serializer@0.2.2: resolution: {integrity: sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==} @@ -6608,6 +6617,9 @@ packages: resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==} engines: {node: '>=10'} + prefix-style@2.0.1: + resolution: {integrity: sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ==} + prelude-ls@1.1.2: resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==} engines: {node: '>= 0.8.0'} @@ -6793,6 +6805,12 @@ packages: resolution: {integrity: sha512-sZ41cxiU5llIB003yxxQBYrARBqe0repqPTTYBTmMqTz9szeBbE37BehCE891NZsmdZqqP+xWKdT3eo3vOzN8w==} engines: {node: '>=14'} + react-custom-scrollbars@4.2.1: + resolution: {integrity: sha512-VtJTUvZ7kPh/auZWIbBRceGPkE30XBYe+HktFxuMWBR2eVQQ+Ur6yFJMoaYcNpyGq22uYJ9Wx4UAEcC0K+LNPQ==} + peerDependencies: + react: ^0.14.0 || ^15.0.0 || ^16.0.0 + react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0 + react-dev-utils@12.0.1: resolution: {integrity: sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==} engines: {node: '>=14'} @@ -7631,14 +7649,23 @@ packages: tmpl@1.0.5: resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==} + to-camel-case@1.0.0: + resolution: {integrity: sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q==} + to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} + to-no-case@1.0.2: + resolution: {integrity: sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==} + to-regex-range@5.0.1: resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} engines: {node: '>=8.0'} + to-space-case@1.0.0: + resolution: {integrity: sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==} + toidentifier@1.0.1: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} engines: {node: '>=0.6'} @@ -11018,6 +11045,8 @@ snapshots: acorn@8.11.3: {} + add-px-to-style@1.0.0: {} + address@1.2.2: {} adjust-sourcemap-loader@4.0.0: @@ -12387,6 +12416,12 @@ snapshots: dependencies: utila: 0.4.0 + dom-css@2.1.0: + dependencies: + add-px-to-style: 1.0.0 + prefix-style: 2.0.1 + to-camel-case: 1.0.0 + dom-serializer@0.2.2: dependencies: domelementtype: 2.3.0 @@ -15874,6 +15909,8 @@ snapshots: path-exists: 4.0.0 which-pm: 2.0.0 + prefix-style@2.0.1: {} + prelude-ls@1.1.2: {} prelude-ls@1.2.1: {} @@ -16006,6 +16043,14 @@ snapshots: regenerator-runtime: 0.13.11 whatwg-fetch: 3.6.20 + react-custom-scrollbars@4.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + dom-css: 2.1.0 + prop-types: 15.8.1 + raf: 3.4.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-dev-utils@12.0.1(eslint@8.57.0)(typescript@4.9.5)(webpack@5.91.0): dependencies: '@babel/code-frame': 7.24.2 @@ -17081,12 +17126,22 @@ snapshots: tmpl@1.0.5: {} + to-camel-case@1.0.0: + dependencies: + to-space-case: 1.0.0 + to-fast-properties@2.0.0: {} + to-no-case@1.0.2: {} + to-regex-range@5.0.1: dependencies: is-number: 7.0.0 + to-space-case@1.0.0: + dependencies: + to-no-case: 1.0.2 + toidentifier@1.0.1: {} tough-cookie@4.1.4: diff --git a/src/components/molecules/modals/flow/NewFlowTestModal.js b/src/components/molecules/modals/flow/NewFlowTestModal.js index dfc2032..e3cc347 100644 --- a/src/components/molecules/modals/flow/NewFlowTestModal.js +++ b/src/components/molecules/modals/flow/NewFlowTestModal.js @@ -10,6 +10,7 @@ import useCollectionStore from 'stores/CollectionStore'; import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'; import { isEmpty } from 'lodash'; import { flattenItems } from 'stores/utils'; +import { Scrollbars } from 'react-custom-scrollbars'; const NewFlowTestModal = ({ closeFn = () => null, open = false }) => { const { ipcRenderer } = window; @@ -67,7 +68,7 @@ const NewFlowTestModal = ({ closeFn = () => null, open = false }) => {
-
+
null, open = false }) => { leaveFrom='opacity-100 scale-100' leaveTo='opacity-0 scale-95' > - - + + {`Create a new Flowtest`} -
-
- { - const flowtestName = event.target.value; - setFlowtestName(flowtestName); - }} - name={'flowtest-name'} - /> - {flowtestName.trim() === '' && showFlowtestNameError ? ( -
Please provide a name for your new flowtest
- ) : ( - '' - )} -
-
-
- { - setSelectionCollection(value); - // setSelectionCollectionId(value.id); + +
+
+ { + const flowtestName = event.target.value; + setFlowtestName(flowtestName); }} - > -
- - {!isEmpty(selectedCollection) ? selectedCollection.name : 'Select Collection'} - - - - {collections.map((collection, index) => { - return ( - - `relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${ - active ? 'bg-background-light text-slate-900' : '' - }` - } - value={collection} - > - {({ selected }) => ( - <> - - {collection.name} - - {selected ? ( - - - ) : null} - - )} - - ); - })} - - -
- + name={'flowtest-name'} + /> + {flowtestName.trim() === '' && showFlowtestNameError ? ( +
Please provide a name for your new flowtest
+ ) : ( + '' + )}
- {isEmpty(selectedCollection) && showCollectionSelectionError ? ( -
- Please provide a collection in which you wants to create your new flowtest -
- ) : ( - '' - )} -
- - {!isEmpty(selectedCollection) && containsFolder(selectedCollection) ? (
-
+
{ - setSelectedFolder(value); + setSelectionCollection(value); + // setSelectionCollectionId(value.id); }} > -
+
- {!isEmpty(selectedFolder) ? selectedFolder.name : 'Select Folder'} - null, open = false }) => { leaveFrom='opacity-100' leaveTo='opacity-0' > - - {flattenItems(selectedCollection.items).map((collectionItem, index) => { - if (collectionItem.type === OBJ_TYPES.folder) { - return ( - - `relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${ - active ? 'bg-background-light text-slate-900' : '' - }` - } - value={collectionItem} - > - {({ selected }) => ( - <> - - {ipcRenderer.relative( - selectedCollection.pathname, - collectionItem.pathname, - )} + + {collections.map((collection, index) => { + return ( + + `relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${ + active ? 'bg-background text-slate-900' : '' + }` + } + value={collection} + > + {({ selected }) => ( + <> + + {collection.name} + + {selected ? ( + + - {selected ? ( - - - ) : null} - - )} - - ); - } + ) : null} + + )} + + ); })}
- {/* {selectedFolder.trim() === '' && showFolderSelectionError ? ( + {isEmpty(selectedCollection) && showCollectionSelectionError ? ( +
+ Please provide a collection in which you wants to create your new flowtest +
+ ) : ( + '' + )} +
+ + {!isEmpty(selectedCollection) && containsFolder(selectedCollection) ? ( +
+
+ { + setSelectedFolder(value); + }} + > +
+ + {!isEmpty(selectedFolder) ? selectedFolder.name : 'Select Folder'} + + + + {flattenItems(selectedCollection.items).map((collectionItem, index) => { + if (collectionItem.type === OBJ_TYPES.folder) { + return ( + + `relative cursor-default select-none py-2 pl-10 pr-4 hover:font-semibold ${ + active ? 'bg-background text-slate-900' : '' + }` + } + value={collectionItem} + > + {({ selected }) => ( + <> + + {ipcRenderer.relative( + selectedCollection.pathname, + collectionItem.pathname, + )} + + {selected ? ( + + + ) : null} + + )} + + ); + } + })} + + +
+ +
+ {/* {selectedFolder.trim() === '' && showFolderSelectionError ? (
Please provide a folder in which you want to create your new flowtest
) : ( '' )} */} -
- ) : ( - '' - )} -
-
- -
+ ) : ( + '' + )} +
+
+ + -
+ createFlowTest(flowtestName, pathName, selectedCollection.id) + .then((result) => { + toast.success(`Created a new flowtest: ${flowtestName}`); + }) + .catch((error) => { + console.log(`Error creating new flowtest: ${error}`); + toast.error(`Error creating new flowtest`); + closeFn(); + }); + resetFields(); + closeFn(); + }} + fullWidth={true} + > + Create + +
+
diff --git a/src/components/molecules/workspace/EmptyWorkSpaceContent.js b/src/components/molecules/workspace/EmptyWorkSpaceContent.js index 38933c5..9d173c3 100644 --- a/src/components/molecules/workspace/EmptyWorkSpaceContent.js +++ b/src/components/molecules/workspace/EmptyWorkSpaceContent.js @@ -19,22 +19,22 @@ const EmptyWorkSpaceContent = () => { const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false); const [newEnvironmentFileModal, setNewEnvironmentFileModal] = useState(false); return ( -
-
-
+
+
+
- +
-

- A Collection is a ... +

+ A Collection is a ...

-

+

A Collection is a set of flows where each flow is a set of API requests chained together, along with each endpoint‘s authorization type, parameters, headers, request bodies, and settings. A collection enables you to organize your flows into folders or subfolders directly on your local file system. You can then collaborate on these collections with team members using git or any version control system.

-
+
{collections.length ? ( <>