From e88780ee78180e515140e0b04e755af3f15c012f Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Fri, 21 Jul 2023 22:47:17 +0530 Subject: [PATCH 01/53] ui: drawer component implementation start --- .../src/components/drawer/Drawer.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 platform/firecamp-ui/src/components/drawer/Drawer.tsx diff --git a/platform/firecamp-ui/src/components/drawer/Drawer.tsx b/platform/firecamp-ui/src/components/drawer/Drawer.tsx new file mode 100644 index 00000000..890ceedf --- /dev/null +++ b/platform/firecamp-ui/src/components/drawer/Drawer.tsx @@ -0,0 +1,18 @@ +import { useDisclosure } from '@mantine/hooks'; +import { Drawer, Button, Group } from '@mantine/core'; + +function Demo() { + const [opened, { open, close }] = useDisclosure(false); + + return ( + <> + + {/* Drawer content */} + + + + + + + ); +} \ No newline at end of file From d45ed8841b761297d1cc47043aa5f65ef6766839 Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Sat, 22 Jul 2023 14:55:59 +0530 Subject: [PATCH 02/53] feat: component added in ui-kit --- .vscode/settings.json | 1 + .../src/components/drawer/Drawer.tsx | 98 ++++++++++++++++--- platform/firecamp-ui/src/ui-kit.ts | 4 + 3 files changed, 90 insertions(+), 13 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 89725ab4..829c596c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,6 +3,7 @@ "Auths", "firecamp", "initialise", + "Mantine", "plgs", "resizer", "testid" diff --git a/platform/firecamp-ui/src/components/drawer/Drawer.tsx b/platform/firecamp-ui/src/components/drawer/Drawer.tsx index 890ceedf..960fa918 100644 --- a/platform/firecamp-ui/src/components/drawer/Drawer.tsx +++ b/platform/firecamp-ui/src/components/drawer/Drawer.tsx @@ -1,18 +1,90 @@ +import { FC } from 'react'; +import { Drawer as MantineDrawer, DrawerProps, ScrollArea, createStyles } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; -import { Drawer, Button, Group } from '@mantine/core'; -function Demo() { - const [opened, { open, close }] = useDisclosure(false); +export interface IDrawer extends DrawerProps { } + +const useStyles = createStyles((theme, { title }: IDrawer) => ({ + content: { + borderRadius: '0px', + backgroundColor: + theme.colorScheme === 'light' + ? theme.colors.gray[1] + : theme.colors.dark[6], + color: + theme.colorScheme === 'light' + ? theme.colors.dark[5] + : theme.colors.gray[4], + maxWidth: '48rem', + minHeight: '400px', + }, + header: { + backgroundColor: 'transparent', + color: + theme.colorScheme === 'light' + ? theme.colors.dark[5] + : theme.colors.gray[4], + paddingRight: '1rem', + paddingTop: '1rem', + paddingBottom: !!title ? '1rem' : '0px', + ...(!!title + ? { + borderBottom: `1px solid ${theme.colorScheme === 'light' + ? theme.colors.gray[4] + : theme.colors.dark[4] + }`, + backgroundColor: + theme.colorScheme === 'light' + ? theme.colors.gray[1] + : theme.colors.dark[6], + } + : {}), + }, + body: { + paddingLeft: '2rem', + paddingRight: '2rem', + paddingBottom: '2rem', + position: 'relative', + }, +})); + +const Drawer: FC = ({ + id = '', + opened = false, + classNames = {}, + onClose = () => { }, + children = <>, + ...props +}) => { + const { classes, cx, theme } = useStyles({ + title: props.title, + opened, + onClose: () => { }, + }); return ( - <> - - {/* Drawer content */} - - - - - - + onClose()} + id={id} + classNames={{ + ...classNames, + content: cx('invisible-scrollbar', classes.content, classNames.content), + header: cx(classes.header, classNames.header), + body: cx(classes.body, classNames.body), + }} + scrollAreaComponent={ScrollArea.Autosize} + closeButtonProps={{ + bg: + theme.colorScheme === 'light' + ? theme.colors.gray[1] + : theme.colors.dark[6], + }} + {...props} + > + {children} + ); -} \ No newline at end of file +}; + +export default Drawer; \ No newline at end of file diff --git a/platform/firecamp-ui/src/ui-kit.ts b/platform/firecamp-ui/src/ui-kit.ts index dc34dca0..e7655208 100644 --- a/platform/firecamp-ui/src/ui-kit.ts +++ b/platform/firecamp-ui/src/ui-kit.ts @@ -32,6 +32,10 @@ export { default as FileInput } from './components/input/FileInput'; export { default as Modal } from './components/modal/Modal'; export type { IModal } from './components/modal/Modal'; +// Drawer +export { default as Drawer } from './components/drawer/Drawer'; +export type { IDrawer } from './components/drawer/Drawer'; + export { default as SplitView } from './components/split-view/SplitView'; export { default as Tabs } from './components/tabs/Tabs'; From 92b74337d359a74f0dea26e696cb461529aad962 Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Sat, 22 Jul 2023 19:55:54 +0530 Subject: [PATCH 03/53] feat: ModalsProvider added --- platform/firecamp-ui/package.json | 1 + .../theme/FirecampThemeProvider.tsx | 5 ++- pnpm-lock.yaml | 32 +++++++++++++++++-- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/platform/firecamp-ui/package.json b/platform/firecamp-ui/package.json index 56b3189a..d7dd7bad 100644 --- a/platform/firecamp-ui/package.json +++ b/platform/firecamp-ui/package.json @@ -90,6 +90,7 @@ "@firecamp/utils": "^0.0.24", "@mantine/core": "^6.0.14", "@mantine/hooks": "^6.0.14", + "@mantine/modals": "^6.0.17", "@monaco-editor/react": "4.4.5", "@radix-ui/react-dropdown-menu": "^2.0.1", "@radix-ui/react-scroll-area": "^1.0.2", diff --git a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx index 144e4d95..4394d90f 100644 --- a/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx +++ b/platform/firecamp-ui/src/components/theme/FirecampThemeProvider.tsx @@ -5,6 +5,7 @@ import { MantineProvider, createStyles, } from '@mantine/core'; +import { ModalsProvider } from '@mantine/modals'; import { EFirecampThemeVariant, ColorType, @@ -451,7 +452,9 @@ const FirecampThemeProvider: FC = ({ withNormalizeCSS {...props} > - {children} + + {children} + ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6ad63d1..f7f4997f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -616,6 +616,9 @@ importers: '@mantine/hooks': specifier: ^6.0.14 version: 6.0.14(react@17.0.2) + '@mantine/modals': + specifier: ^6.0.17 + version: 6.0.17(@mantine/core@6.0.14)(@mantine/hooks@6.0.14)(react-dom@17.0.2)(react@17.0.2) '@monaco-editor/react': specifier: 4.4.5 version: 4.4.5(monaco-editor@0.34.1)(react-dom@17.0.2)(react@17.0.2) @@ -4565,6 +4568,21 @@ packages: react: 17.0.2 dev: false + /@mantine/modals@6.0.17(@mantine/core@6.0.14)(@mantine/hooks@6.0.14)(react-dom@17.0.2)(react@17.0.2): + resolution: {integrity: sha512-57S4+G7+iPZOd6utzx3aYRKA1FcfJX7tfnbPafk303gSbZ9KQ3UWKJn9bk1HWev8AQsrNDyPH1zhjxVGpnqTZA==} + peerDependencies: + '@mantine/core': 6.0.17 + '@mantine/hooks': 6.0.17 + react: '>=16.8.0' + react-dom: '>=16.8.0' + dependencies: + '@mantine/core': 6.0.14(@emotion/react@11.11.1)(@mantine/hooks@6.0.14)(@types/react@17.0.53)(react-dom@17.0.2)(react@17.0.2) + '@mantine/hooks': 6.0.14(react@17.0.2) + '@mantine/utils': 6.0.17(react@17.0.2) + react: 17.0.2 + react-dom: 17.0.2(react@17.0.2) + dev: false + /@mantine/styles@6.0.14(@emotion/react@11.11.1)(react-dom@17.0.2)(react@17.0.2): resolution: {integrity: sha512-qkqUodvVPzthmVzWQHYe/yWrc8UZcz8A5KfegK2Ps67bZzfoZs/NBVcEx6REq8HTsISjYw3jJyMRxAE3G7Ms4Q==} peerDependencies: @@ -4587,6 +4605,14 @@ packages: react: 17.0.2 dev: false + /@mantine/utils@6.0.17(react@17.0.2): + resolution: {integrity: sha512-U6SWV/asYE6NhiHx4ltmVZdQR3HwGVqJxVulhOylMcV1tX/P1LMQUCbGV2Oe4O9jbX4/YW5B/CBb4BbEhENQFQ==} + peerDependencies: + react: '>=16.8.0' + dependencies: + react: 17.0.2 + dev: false + /@mdx-js/mdx@1.6.22: resolution: {integrity: sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA==} dependencies: @@ -15029,7 +15055,7 @@ packages: jest: ^26.0.1 || ^27.0.0 dependencies: '@types/chrome': 0.0.114 - jest: 28.1.3(@types/node@18.15.11)(ts-node@10.9.1) + jest: 28.1.3(@types/node@18.11.18)(ts-node@10.9.1) dev: true /jest-circus@28.1.3: @@ -15313,7 +15339,7 @@ packages: pretty-format: 28.1.3 slash: 3.0.0 strip-json-comments: 3.1.1 - ts-node: 10.9.1(@types/node@18.15.11)(typescript@4.9.4) + ts-node: 10.9.1(@types/node@18.11.18)(typescript@4.9.4) transitivePeerDependencies: - supports-color dev: true @@ -18680,7 +18706,7 @@ packages: dependencies: lilconfig: 2.1.0 postcss: 8.4.21 - ts-node: 10.9.1(@types/node@18.15.11)(typescript@4.9.4) + ts-node: 10.9.1(@types/node@18.15.11)(typescript@5.0.2) yaml: 1.10.2 dev: true From 50a3621d8d89f2defd9f5c01d1110e83da030954 Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Sat, 22 Jul 2023 22:24:17 +0530 Subject: [PATCH 04/53] feat: confirm component and apis are refactored and improved with mantine components --- .../explorer/menus/CollectionMenu.tsx | 22 ++-- .../sidebar/EnvironmentSidebar.tsx | 12 +- .../modals/workspace/tabs/MembersTab.tsx | 24 ++-- .../src/components/prompt/Confirm.tsx | 115 +++++------------- .../components/tabs/TabContainerHeader.tsx | 12 +- .../src/services/platform-context/index.ts | 1 + .../platform-context/prompt.service.tsx | 41 +++++-- .../src/components/modal/modal.service.ts | 1 + platform/firecamp-ui/src/ui-kit.ts | 1 + .../sidebar-panel/tabs/CollectionTab.tsx | 6 +- .../panes/collection-tree/CollectionPane.tsx | 12 +- .../src/store/slices/playgrounds.slice.ts | 12 +- .../sidebar-panel/tabs/CollectionTab.tsx | 12 +- .../src/store/slices/playgrounds.slice.ts | 6 +- 14 files changed, 112 insertions(+), 165 deletions(-) create mode 100644 platform/firecamp-ui/src/components/modal/modal.service.ts diff --git a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx index 134620dd..85c16da4 100644 --- a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx +++ b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx @@ -33,7 +33,7 @@ const CollectionMenu = ({ const renameMenu = { prefix: () => ( - + ), name: 'Rename', onClick: (e) => { @@ -43,7 +43,7 @@ const CollectionMenu = ({ const addFolderMenu = { prefix: () => ( - + ), name: 'Add Folder', onClick: () => { @@ -95,17 +95,17 @@ const CollectionMenu = ({ const addRequestMenu = { prefix: () => ( - + ), name: 'Add Request', - onClick: () => {}, + onClick: () => { }, }; - const openEnv = (env) => {}; + const openEnv = (env) => { }; const viewDetailMenu = { prefix: () => ( - + ), name: 'View Details', onClick: () => { @@ -119,16 +119,14 @@ const CollectionMenu = ({ const deleteMenu = { prefix: () => ( - + ), name: 'Delete', onClick: () => { platformContext.window .confirm({ - title: `Are you sure to delete the ${menuType}?`, - texts: { - btnConfirm: 'Yes, delete it.', - }, + message: `Are you sure to delete the ${menuType}?`, + labels: { confirm: 'Yes, delete it.' }, }) .then((isConfirmed) => { if (isConfirmed) { @@ -166,7 +164,7 @@ const CollectionMenu = ({ }} sm /> - + ); }; diff --git a/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx b/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx index 894062fd..65419903 100644 --- a/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx +++ b/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx @@ -56,8 +56,8 @@ const EnvironmentCollection = () => { const openEnv = (env) => { openTab(env, { id: env.__ref.id, type: ETabEntityTypes.Environment }); }; - const openCreateColEnv = () => {}; - const deleteEnv = () => {}; + const openCreateColEnv = () => { }; + const deleteEnv = () => { }; if (!envTdpInstance) return <>; return ( @@ -135,15 +135,13 @@ const CollectionScopedEnvCollection = () => { }); }; - const openCreateColEnv = () => {}; + const openCreateColEnv = () => { }; const deleteEnv = (envId: string) => { platformContext.window .confirm({ - title: 'Are you sure to delete the environment?', - texts: { - btnConfirm: 'Yes, delete it.', - }, + message: 'Are you sure to delete the environment?', + labels: { confirm: 'Yes, delete it.' }, }) .then(() => { deleteEnvironment(envId) diff --git a/platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx b/platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx index 8cff4af2..04249d12 100644 --- a/platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx +++ b/platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx @@ -65,11 +65,10 @@ const MembersTab = ({ members = [], isFetchingMembers = false }) => { const onRemoveMember = (row) => { platformContext.window.confirm({ - title: `You're sure to remove ${row.name} from the workspace?`, - message: '', - texts: { - btnCancel: 'Cancel', - btnConfirm: 'Yes, remove the member.', + message: `You're sure to remove ${row.name} from the workspace?`, + labels: { + cancel: 'Cancel', + confirm: 'Yes, remove the member.', }, onConfirm: () => { Rest.workspace @@ -85,19 +84,16 @@ const MembersTab = ({ members = [], isFetchingMembers = false }) => { e.response?.data.message || e.message ); }); - }, - onCancel: () => {}, - onClose: () => {}, + } }); }; const onChangeRole = (row) => { platformContext.window.confirm({ - title: `Please confirm, You're assigning ${row.role.name} role to ${row.name}, right?`, - message: '', - texts: { - btnCancel: 'Cancel', - btnConfirm: 'Yes, change the role.', + message: `Please confirm, You're assigning ${row.role.name} role to ${row.name}, right?`, + labels: { + cancel: 'Cancel', + confirm: 'Yes, change the role.', }, onConfirm: () => { Rest.workspace @@ -114,8 +110,6 @@ const MembersTab = ({ members = [], isFetchingMembers = false }) => { ); }); }, - onCancel: () => {}, - onClose: () => {}, }); }; diff --git a/platform/firecamp-platform/src/components/prompt/Confirm.tsx b/platform/firecamp-platform/src/components/prompt/Confirm.tsx index 27f8bf72..b391f6c7 100644 --- a/platform/firecamp-platform/src/components/prompt/Confirm.tsx +++ b/platform/firecamp-platform/src/components/prompt/Confirm.tsx @@ -1,106 +1,57 @@ -import { FC, useState } from 'react'; -import { Button, Modal, TabHeader } from '@firecamp/ui'; +import { FC } from 'react'; +import { Button, TabHeader } from '@firecamp/ui'; -const _texts: IConfirm['texts'] = { - btnConfirm: 'Create', - btnCancel: 'Cancel', +const _labels: IConfirm['labels'] = { + confirm: 'Create', + cancel: 'Cancel', }; const ConfirmationModal: FC = ({ - title = '', message = '', - texts = { - btnCancel: 'Cancel', - btnConfirm: 'Confirm', - }, - onConfirm = () => {}, - onCancel = () => {}, - onClose = () => {}, - onResolve, + labels = { confirm: 'Confirm', cancel: 'Cancel' }, + onConfirm = () => { }, + onCancel = () => { }, }) => { - const [state, setState] = useState({ - isOpen: true, - }); - const _close = (e) => { - if (e) e.preventDefault(); - setState((s) => ({ ...s, isOpen: false })); - setTimeout(() => { - onClose(e); - }, 500); - }; - const _onConfirm = (e) => { - if (e) e.preventDefault(); - onConfirm(); - _close(false); - onResolve && onResolve("I am confirming that It'll work perfectly."); - }; - texts = { ..._texts, ...texts }; + const l = { ..._labels, ...labels }; return ( - - {`CONFIRMATION Required.`} - - } - > -
-
{title}
- - -
- +
+
{message}
+ + +
); }; export default ConfirmationModal; export interface IConfirm { - /** title for the confirmation popup */ - title: string; - - /** the confirmation messsage texts */ + /** message for the confirmation popup */ message: string; - /** btn texts */ - texts?: { - btnConfirm?: string; - btnCancel?: string; - }; + /** btn labels */ + labels?: { confirm?: string; cancel?: string; }; /** show a specific note in eye caching note box */ note?: string; - /** callback fucntion on successfull confirmation */ + /** callback function on successful confirmation */ onConfirm: () => any; - /** callback fucntion on rejected confirmation */ + /** callback function on rejected confirmation */ onCancel: () => any; - - /** callback fn on close the confirmation */ - onClose: Function; - - onResolve: (res: any) => void; } diff --git a/platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx b/platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx index 0bc7078d..8a7d0c9b 100644 --- a/platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx +++ b/platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx @@ -72,18 +72,14 @@ const TabHeaderContainer = () => { if (!tab.__meta.hasChange) emitter.emit(EPlatformTabs.Close, tabId); else { platformContext.window.confirm({ - title: - 'Changes to this request are not saved; you may forcefully close it by ignoring the changes.', - message: '', - texts: { - btnCancel: 'Cancel', - btnConfirm: 'Ignore Changes & Close Request', + message: 'Changes to this request are not saved; you may forcefully close it by ignoring the changes.', + labels: { + cancel: 'Cancel', + confirm: 'Ignore Changes & Close Request', }, onConfirm: () => { emitter.emit(EPlatformTabs.Close, tabId); }, - onCancel: () => {}, - onClose: () => {}, }); } }; diff --git a/platform/firecamp-platform/src/services/platform-context/index.ts b/platform/firecamp-platform/src/services/platform-context/index.ts index 98e00e42..b880fce4 100644 --- a/platform/firecamp-platform/src/services/platform-context/index.ts +++ b/platform/firecamp-platform/src/services/platform-context/index.ts @@ -6,6 +6,7 @@ import { collection } from './collection'; import { environment } from './environment'; import { platform } from './platform'; + export default { app: AppService, request, diff --git a/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx b/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx index cead317a..c7e695b0 100644 --- a/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx +++ b/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx @@ -1,5 +1,6 @@ import ReactDOM from 'react-dom'; -import Confirm from '../../components/prompt/Confirm'; +import { modals, IModal } from '@firecamp/ui'; +import Confirm, { IConfirm } from '../../components/prompt/Confirm'; import { PromptInput } from '../../components/prompt/PromptInput'; import { PromptSaveItem } from '../../components/prompt/PromptSaveItem'; import { IPromptInput, IPromptSaveItem } from '../../components/prompt/types'; @@ -54,16 +55,36 @@ const promptSaveItem: TOpenPromptSaveItem = (props) => { }); }; -const confirm = (props: any) => { - const confirmContainer = document.createElement('div'); - const onClose = () => { - ReactDOM.unmountComponentAtNode(confirmContainer); - }; + + +const confirm = (props: IModal & IConfirm) => { + return new Promise((rs, rj) => { - ReactDOM.render( - rs(bool)} />, - confirmContainer - ); + modals.open({ + title: ( + + ), + children: ( + { + props?.onCancel?.(); + modals.closeAll() + }} + onConfirm={() => { + props?.onConfirm?.(); + rs(true) + }} /> + ), + size: 400, + classNames: { + header: 'border-0', + body: 'px-6', + content: 'min-h-0', + }, + }); }); }; diff --git a/platform/firecamp-ui/src/components/modal/modal.service.ts b/platform/firecamp-ui/src/components/modal/modal.service.ts new file mode 100644 index 00000000..e2ab4c85 --- /dev/null +++ b/platform/firecamp-ui/src/components/modal/modal.service.ts @@ -0,0 +1 @@ +export * from '@mantine/modals'; diff --git a/platform/firecamp-ui/src/ui-kit.ts b/platform/firecamp-ui/src/ui-kit.ts index e7655208..c6aba09b 100644 --- a/platform/firecamp-ui/src/ui-kit.ts +++ b/platform/firecamp-ui/src/ui-kit.ts @@ -31,6 +31,7 @@ export { default as FileInput } from './components/input/FileInput'; // Modal export { default as Modal } from './components/modal/Modal'; export type { IModal } from './components/modal/Modal'; +export * from './components/modal/modal.service'; // Drawer export { default as Drawer } from './components/drawer/Drawer'; diff --git a/playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/CollectionTab.tsx b/playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/CollectionTab.tsx index 3837a437..019d95f0 100644 --- a/playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/CollectionTab.tsx +++ b/playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/CollectionTab.tsx @@ -66,9 +66,9 @@ const Collection = () => { const deletePlg = (plgId: string) => { context.window .confirm({ - title: 'Are you sure to delete the playground?', - texts: { - btnConfirm: 'Yes, delete it.', + message: 'Are you sure to delete the playground?', + labels: { + confirm: 'Yes, delete it.', }, }) .then((s) => { diff --git a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx index b50f88b5..c4479b76 100644 --- a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx +++ b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx @@ -69,10 +69,8 @@ const Collection = ({ openCreateFolderPrompt }) => { const _deleteFolder = (id: string) => { context.window .confirm({ - title: 'Are you sure to delete the Folder?', - texts: { - btnConfirm: 'Yes, delete it.', - }, + message: 'Are you sure to delete the Folder?', + labels: { confirm: 'Yes, delete it.', }, }) .then((yes) => { if (yes) deleteFolder(id); @@ -82,10 +80,8 @@ const Collection = ({ openCreateFolderPrompt }) => { const deleteEmitter = (emtId: string) => { context.window .confirm({ - title: 'Are you sure to delete the emitter?', - texts: { - btnConfirm: 'Yes, delete it.', - }, + message: 'Are you sure to delete the emitter?', + labels: { confirm: 'Yes, delete it.', }, }) .then((yes) => { if (yes) deleteItem(emtId); diff --git a/playgrounds/firecamp-socket-io/src/store/slices/playgrounds.slice.ts b/playgrounds/firecamp-socket-io/src/store/slices/playgrounds.slice.ts index 8ea1441e..40eff73b 100644 --- a/playgrounds/firecamp-socket-io/src/store/slices/playgrounds.slice.ts +++ b/playgrounds/firecamp-socket-io/src/store/slices/playgrounds.slice.ts @@ -98,11 +98,9 @@ const createPlaygroundsSlice: TStoreSlice = ( context.window .confirm({ - title: + message: 'The current emitter has unsaved changes. Do you want to continue without saving them?', - texts: { - btnConfirm: 'Yes, open it.', - }, + labels: { confirm: 'Yes, open it.' }, }) .then((s) => { openEmitterInPlg(); @@ -284,11 +282,9 @@ const createPlaygroundsSlice: TStoreSlice = ( else { context.window .confirm({ - title: + message: 'The current emitter has unsaved changes. Do you want to continue without saving them?', - texts: { - btnConfirm: 'Yes, reset it.', - }, + labels: { confirm: 'Yes, reset it.' }, }) .then((s) => { resetPlg(); diff --git a/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx b/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx index e92298be..158ff091 100644 --- a/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx +++ b/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx @@ -67,10 +67,8 @@ const Collection = ({ openCreateFolderPrompt }) => { const _deleteFolder = (id: string) => { context.window .confirm({ - title: 'Are you sure to delete the Folder?', - texts: { - btnConfirm: 'Yes, delete it.', - }, + message: 'Are you sure to delete the Folder?', + labels: { confirm: 'Yes, delete it.', }, }) .then((yes) => { if (yes) deleteFolder(id); @@ -80,10 +78,8 @@ const Collection = ({ openCreateFolderPrompt }) => { const deleteMsg = (msgId: string) => { context.window .confirm({ - title: 'Are you sure to delete the message?', - texts: { - btnConfirm: 'Yes, delete it.', - }, + message: 'Are you sure to delete the message?', + labels: { confirm: 'Yes, delete it.', }, }) .then((yes) => { if (yes) deleteItem(msgId); diff --git a/playgrounds/firecamp-websocket/src/store/slices/playgrounds.slice.ts b/playgrounds/firecamp-websocket/src/store/slices/playgrounds.slice.ts index 5e7869c5..e65ca7da 100644 --- a/playgrounds/firecamp-websocket/src/store/slices/playgrounds.slice.ts +++ b/playgrounds/firecamp-websocket/src/store/slices/playgrounds.slice.ts @@ -129,11 +129,9 @@ const createPlaygroundsSlice: TStoreSlice = ( context.window .confirm({ - title: + message: 'The current message has unsaved changes. Do you want to continue without saving them?', - texts: { - btnConfirm: 'Yes, open it.', - }, + labels: { confirm: 'Yes, open it.' }, }) .then((s) => { openMsgInPlg(); From 725c3b4fc6b2803a8d7e1895cb7bb1eb589cb41c Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Sat, 22 Jul 2023 22:26:16 +0530 Subject: [PATCH 05/53] fix: close on confirm issue fixed --- .../src/services/platform-context/prompt.service.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx b/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx index c7e695b0..c6ff6395 100644 --- a/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx +++ b/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx @@ -71,11 +71,12 @@ const confirm = (props: IModal & IConfirm) => { {...props} onCancel={() => { props?.onCancel?.(); - modals.closeAll() + modals.closeAll(); }} onConfirm={() => { props?.onConfirm?.(); - rs(true) + rs(true); + modals.closeAll(); }} /> ), size: 400, From ab01887edfcdaad91c3b97d46a3b3127adf53402 Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Sat, 22 Jul 2023 23:05:21 +0530 Subject: [PATCH 06/53] feat: input prompts and apis are refactored with mantine components --- .../explorer/menus/CollectionMenu.tsx | 2 +- .../common/environment/tabs/Environment.tsx | 2 +- .../src/components/prompt/PromptInput.tsx | 23 ++--------- .../src/components/prompt/types.ts | 1 - .../src/services/platform-context/platform.ts | 8 ++-- .../platform-context/prompt.service.tsx | 41 ++++++++++++------- .../src/services/platform-context/request.ts | 2 +- .../src/store/environment.ts | 2 +- .../request/statusbar/EditPlaygroundName.tsx | 2 +- .../request/statusbar/ReqStatusbar.tsx | 4 +- 10 files changed, 41 insertions(+), 46 deletions(-) diff --git a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx index 85c16da4..80e145c9 100644 --- a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx +++ b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx @@ -53,7 +53,7 @@ const CollectionMenu = ({ } platformContext.window .promptInput({ - header: 'Create New Folder', + title: 'Create New Folder', label: 'Folder Name', placeholder: 'type folder name', texts: { btnOking: 'Creating...' }, diff --git a/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx b/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx index a9ecafea..a40df820 100644 --- a/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx +++ b/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx @@ -118,7 +118,7 @@ const EnvironmentTab = ({ tab, platformContext: context }) => { const rename = () => { context.window .promptInput({ - header: 'Rename Environment', + title: 'Rename Environment', label: 'Environment Name', placeholder: '', texts: { btnOk: 'Rename', btnOking: 'Renaming...' }, diff --git a/platform/firecamp-platform/src/components/prompt/PromptInput.tsx b/platform/firecamp-platform/src/components/prompt/PromptInput.tsx index 844d1280..b69c6603 100644 --- a/platform/firecamp-platform/src/components/prompt/PromptInput.tsx +++ b/platform/firecamp-platform/src/components/prompt/PromptInput.tsx @@ -1,5 +1,5 @@ import { FC, useState } from 'react'; -import { Button, Input, Modal, ProgressBar, TabHeader } from '@firecamp/ui'; +import { Button, Input, ProgressBar, TabHeader } from '@firecamp/ui'; import { IPromptInput } from './types'; const _texts: IPromptInput['texts'] = { @@ -9,7 +9,6 @@ const _texts: IPromptInput['texts'] = { }; export const PromptInput: FC = ({ - header, label = 'Name', placeholder, texts, @@ -80,21 +79,7 @@ export const PromptInput: FC = ({ texts = { ..._texts, ...texts }; return ( - - {header || `THIS IS A HEADER PLACE`} - - } - > + <>
@@ -106,7 +91,7 @@ export const PromptInput: FC = ({ value={state.value} onChange={_onChangeValue} onKeyDown={_onKeyDown} - onBlur={() => {}} + onBlur={() => { }} error={state.error} />
@@ -130,6 +115,6 @@ export const PromptInput: FC = ({
- + ); }; diff --git a/platform/firecamp-platform/src/components/prompt/types.ts b/platform/firecamp-platform/src/components/prompt/types.ts index f55d1711..021d3e9c 100644 --- a/platform/firecamp-platform/src/components/prompt/types.ts +++ b/platform/firecamp-platform/src/components/prompt/types.ts @@ -1,7 +1,6 @@ import { TId } from '@firecamp/types'; export interface IPromptInput { - header: string; label?: string; placeholder?: string; texts?: { diff --git a/platform/firecamp-platform/src/services/platform-context/platform.ts b/platform/firecamp-platform/src/services/platform-context/platform.ts index 002b64ad..e61923e6 100644 --- a/platform/firecamp-platform/src/services/platform-context/platform.ts +++ b/platform/firecamp-platform/src/services/platform-context/platform.ts @@ -20,7 +20,7 @@ const platform = { } platformContext.window .promptInput({ - header: 'Create New Workspace', + title: 'Create New Workspace', label: 'Workspace Name', placeholder: 'type workspace name', texts: { btnOking: 'Creating...' }, @@ -75,7 +75,7 @@ const platform = { } platformContext.window .promptInput({ - header: 'Create your own organization', + title: 'Create your own organization', label: 'Organization Name', placeholder: 'type org name', texts: { btnOking: 'Creating...' }, @@ -129,7 +129,7 @@ const platform = { } platformContext.window .promptInput({ - header: 'Create New Collection', + title: 'Create New Collection', label: 'Collection Name', placeholder: 'type collection name', texts: { btnOking: 'Creating...' }, @@ -169,7 +169,7 @@ const platform = { const { createEnvironment } = useEnvStore.getState(); platformContext.window .promptInput({ - header: 'Create New Environment', + title: 'Create New Environment', label: 'Environment Name', placeholder: 'type environment name', texts: { btnOking: 'Creating...' }, diff --git a/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx b/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx index c6ff6395..61f13666 100644 --- a/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx +++ b/platform/firecamp-platform/src/services/platform-context/prompt.service.tsx @@ -6,7 +6,6 @@ import { PromptSaveItem } from '../../components/prompt/PromptSaveItem'; import { IPromptInput, IPromptSaveItem } from '../../components/prompt/types'; type TPropKeys = - | 'header' | 'label' | 'placeholder' | 'texts' @@ -15,22 +14,34 @@ type TPropKeys = | 'executor' | 'onError'; type TPromptInputOpenProps = Pick; -type TOpenPromptInput = (props: TPromptInputOpenProps) => Promise; +type TOpenPromptInput = (props: TPromptInputOpenProps & IModal) => Promise; const promptInput: TOpenPromptInput = (props) => { - // @ts-ignore - const promptContainer = document.createElement('div'); - const onClose = () => { - ReactDOM.unmountComponentAtNode(promptContainer); - }; + return new Promise((rs, rj) => { - ReactDOM.render( - rs(res)} //resolve for executor - />, - promptContainer - ); + modals.open({ + title: ( + + ), + children: ( + modals.closeAll()} + //resolve for executor + onResolve={(res) => { + rs(res); + modals.closeAll(); + }} + /> + ), + size: 400, + classNames: { + header: 'border-0 pb-0', + body: 'px-6', + content: 'min-h-0', + } + }); }); }; diff --git a/platform/firecamp-platform/src/services/platform-context/request.ts b/platform/firecamp-platform/src/services/platform-context/request.ts index 491ba560..8c4d18a3 100644 --- a/platform/firecamp-platform/src/services/platform-context/request.ts +++ b/platform/firecamp-platform/src/services/platform-context/request.ts @@ -261,7 +261,7 @@ const request: IPlatformRequestService = { createRequestFolderPrompt: async (folder, tabId) => { return platformContext.window .promptInput({ - header: 'Create A New Folder', + title: 'Create A New Folder', label: 'Folder Name', placeholder: '', texts: { btnOking: 'Creating...' }, diff --git a/platform/firecamp-platform/src/store/environment.ts b/platform/firecamp-platform/src/store/environment.ts index 0a460a22..4dfcc37a 100644 --- a/platform/firecamp-platform/src/store/environment.ts +++ b/platform/firecamp-platform/src/store/environment.ts @@ -305,7 +305,7 @@ export const useEnvStore = create((set, get) => ({ const state = get(); return platformContext.window .promptInput({ - header: 'Delete Environment', + title: 'Delete Environment', label: `Please enter the name \`${env.name}\``, placeholder: '', texts: { btnOk: 'Delete', btnOking: 'Deleting...' }, diff --git a/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx b/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx index 27f48ba4..7d7df856 100644 --- a/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx +++ b/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx @@ -19,7 +19,7 @@ const EditPlaygroundName: FC = ({}) => { if (!isRequestSaved) return; context.window .promptInput({ - header: 'Update Playground Info', + title: 'Update Playground Info', value: playground.request?.name, texts: { btnOk: 'Update' }, validator: (value) => { diff --git a/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/ReqStatusbar.tsx b/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/ReqStatusbar.tsx index 71108a90..fd805dd2 100644 --- a/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/ReqStatusbar.tsx +++ b/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/ReqStatusbar.tsx @@ -14,7 +14,7 @@ import EditPlaygroundName from './EditPlaygroundName'; import { IStore, useStore } from '../../../../../store'; import { isValid } from '../../../../../services/GraphQLservice'; -const ReqStatusBar = ({}) => { +const ReqStatusBar = ({ }) => { const { context, isRequestSaved, @@ -65,7 +65,7 @@ const ReqStatusBar = ({}) => { const plgName = getPlgNameSuggestion(); context.window .promptInput({ - header: 'SAVE PLAYGROUND', + title: 'SAVE PLAYGROUND', value: plgName, validator: (value) => { const name = value.trim(); From 779f7a7e179dd2152b335de18ef6da09942649ef Mon Sep 17 00:00:00 2001 From: Nishchit Dhanani Date: Sun, 23 Jul 2023 13:16:56 +0530 Subject: [PATCH 07/53] feat: propt input and prompt saveItem cpomponents and apis are refactored and improved with Mantine lib --- .../explorer/menus/CollectionMenu.tsx | 2 +- .../common/environment/tabs/Environment.tsx | 2 +- .../src/components/prompt/Confirm.tsx | 6 +- .../src/components/prompt/PromptInput.tsx | 17 +++--- .../src/components/prompt/PromptSaveItem.tsx | 57 ++++++------------- .../src/components/prompt/types.ts | 8 +-- .../src/services/platform-context/platform.ts | 20 +++---- .../platform-context/prompt.service.tsx | 56 ++++++++++-------- .../src/services/platform-context/request.ts | 10 ++-- .../src/store/environment.ts | 2 +- .../request/statusbar/EditPlaygroundName.tsx | 4 +- 11 files changed, 86 insertions(+), 98 deletions(-) diff --git a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx index 80e145c9..91c89047 100644 --- a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx +++ b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx @@ -56,7 +56,7 @@ const CollectionMenu = ({ title: 'Create New Folder', label: 'Folder Name', placeholder: 'type folder name', - texts: { btnOking: 'Creating...' }, + btnLabels: { oking: 'Creating...' }, value: '', validator: (val) => { if (!val || val.length < 3) { diff --git a/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx b/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx index a40df820..3ab5d725 100644 --- a/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx +++ b/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx @@ -121,7 +121,7 @@ const EnvironmentTab = ({ tab, platformContext: context }) => { title: 'Rename Environment', label: 'Environment Name', placeholder: '', - texts: { btnOk: 'Rename', btnOking: 'Renaming...' }, + btnLabels: { ok: 'Rename', oking: 'Renaming...' }, value: runtimeEnv.name, validator: (val) => { if (val == runtimeEnv.name) { diff --git a/platform/firecamp-platform/src/components/prompt/Confirm.tsx b/platform/firecamp-platform/src/components/prompt/Confirm.tsx index b391f6c7..4663047b 100644 --- a/platform/firecamp-platform/src/components/prompt/Confirm.tsx +++ b/platform/firecamp-platform/src/components/prompt/Confirm.tsx @@ -8,7 +8,7 @@ const _labels: IConfirm['labels'] = { const ConfirmationModal: FC = ({ message = '', - labels = { confirm: 'Confirm', cancel: 'Cancel' }, + labels, onConfirm = () => { }, onCancel = () => { }, }) => { @@ -50,8 +50,8 @@ export interface IConfirm { note?: string; /** callback function on successful confirmation */ - onConfirm: () => any; + onConfirm?: () => any; /** callback function on rejected confirmation */ - onCancel: () => any; + onCancel?: () => any; } diff --git a/platform/firecamp-platform/src/components/prompt/PromptInput.tsx b/platform/firecamp-platform/src/components/prompt/PromptInput.tsx index b69c6603..ab82919d 100644 --- a/platform/firecamp-platform/src/components/prompt/PromptInput.tsx +++ b/platform/firecamp-platform/src/components/prompt/PromptInput.tsx @@ -2,16 +2,16 @@ import { FC, useState } from 'react'; import { Button, Input, ProgressBar, TabHeader } from '@firecamp/ui'; import { IPromptInput } from './types'; -const _texts: IPromptInput['texts'] = { - btnOk: 'Create', - btnOking: 'Creating...', - btnCancel: 'Cancel', +const _btnLabels: IPromptInput['btnLabels'] = { + ok: 'Create', + oking: 'Creating...', + cancel: 'Cancel', }; export const PromptInput: FC = ({ label = 'Name', placeholder, - texts, + btnLabels, value, onClose, validator, @@ -76,7 +76,8 @@ export const PromptInput: FC = ({ _onClickOk(e); } }; - texts = { ..._texts, ...texts }; + + const l = { ..._btnLabels, ...btnLabels }; return ( <> @@ -98,14 +99,14 @@ export const PromptInput: FC = ({