From b1dd22ea0bbd92bef23bee2bf669b121ba9b039d Mon Sep 17 00:00:00 2001 From: William Wills Date: Fri, 5 Apr 2024 13:02:18 -0400 Subject: [PATCH 01/10] feat: added create organization modal prototype --- package-lock.json | 342 ++++++++---------- package.json | 10 +- .../blocks/buttons/QueryRefetchButton.tsx | 18 +- .../components/blocks/layout/LeftNav.tsx | 85 ++++- .../components/blocks/layout/Template.tsx | 2 +- .../components/blocks/layout/index.ts | 2 +- .../blocks/modals/CreateOrganizationModal.tsx | 138 +++++++ .../components/blocks/modals/index.ts | 3 +- .../components/blocks/widgets/OrgUidBadge.tsx | 4 +- .../components/blocks/widgets/SearchBox.tsx | 17 +- .../components/proxy/FloatingLabel.tsx | 7 + src/renderer/components/proxy/Toast.tsx | 7 + src/renderer/components/proxy/index.ts | 2 + src/renderer/pages/Audit/AuditPage.tsx | 91 +++-- src/renderer/pages/Error/ErrorBoundary.tsx | 12 +- .../pages/MyOrganization/MyOrganization.tsx | 12 + src/renderer/pages/MyOrganization/index.ts | 1 + src/renderer/pages/index.ts | 1 + src/renderer/routes/AppNavigator.tsx | 9 +- src/renderer/routes/route-constants.ts | 3 +- src/renderer/translations/tokens/en-US.json | 12 +- 21 files changed, 493 insertions(+), 285 deletions(-) create mode 100644 src/renderer/components/blocks/modals/CreateOrganizationModal.tsx create mode 100644 src/renderer/components/proxy/FloatingLabel.tsx create mode 100644 src/renderer/components/proxy/Toast.tsx create mode 100644 src/renderer/pages/MyOrganization/MyOrganization.tsx create mode 100644 src/renderer/pages/MyOrganization/index.ts diff --git a/package-lock.json b/package-lock.json index 3acd092a..1b2d6e5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "components": "^0.1.0", "express": "^4.19.2", "flowbite": "^2.3.0", - "flowbite-react": "^0.7.6", + "flowbite-react": "^0.7.8", "flowbite-typography": "^1.0.3", "lodash": "^4.17.21", "react": "^18.2.0", @@ -40,8 +40,8 @@ }, "devDependencies": { "@commitlint/config-conventional": "^19.1.0", - "@types/react": "^18.2.73", - "@types/react-dom": "^18.2.23", + "@types/react": "^18.2.74", + "@types/react-dom": "^18.2.24", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", @@ -49,7 +49,7 @@ "autoprefixer": "^10.4.19", "concurrently": "^8.2.2", "cross-env": "^7.0.3", - "electron": "^28.2.9", + "electron": "^28.2.10", "electron-builder": "^24.13.3", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", @@ -61,7 +61,7 @@ "standard-version": "^9.5.0", "tailwindcss": "^3.4.3", "typescript": "^5.4.3", - "vite": "^5.2.7", + "vite": "^5.2.8", "wait-on": "^7.2.0" }, "engines": { @@ -197,9 +197,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.1", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz", - "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==", + "version": "7.24.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", + "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -982,13 +982,13 @@ } }, "node_modules/@floating-ui/react": { - "version": "0.26.9", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.9.tgz", - "integrity": "sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==", + "version": "0.26.10", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.10.tgz", + "integrity": "sha512-sh6f9gVvWQdEzLObrWbJ97c0clJObiALsFe0LiR/kb3tDRKwEhObASEH2QyfdoO/ZBPzwxa9j+nYFo+sqgbioA==", "dependencies": { - "@floating-ui/react-dom": "^2.0.8", - "@floating-ui/utils": "^0.2.1", - "tabbable": "^6.0.1" + "@floating-ui/react-dom": "^2.0.0", + "@floating-ui/utils": "^0.2.0", + "tabbable": "^6.0.0" }, "peerDependencies": { "react": ">=16.8.0", @@ -1163,9 +1163,9 @@ } }, "node_modules/@humanwhocodes/object-schema": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz", - "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", + "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "dev": true }, "node_modules/@hutson/parse-repository-url": { @@ -1443,9 +1443,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.2.tgz", - "integrity": "sha512-3XFIDKWMFZrMnao1mJhnOT1h2g0169Os848NhhmGweEcfJ4rCi+3yMCOLG4zA61rbJdkcrM/DjVZm9Hg5p5w7g==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.0.tgz", + "integrity": "sha512-jwXtxYbRt1V+CdQSy6Z+uZti7JF5irRKF8hlKfEnF/xJpcNGuuiZMBvuoYM+x9sr9iWGnzrlM0+9hvQ1kgkf1w==", "cpu": [ "arm" ], @@ -1456,9 +1456,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.2.tgz", - "integrity": "sha512-GdxxXbAuM7Y/YQM9/TwwP+L0omeE/lJAR1J+olu36c3LqqZEBdsIWeQ91KBe6nxwOnb06Xh7JS2U5ooWU5/LgQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.0.tgz", + "integrity": "sha512-fI9nduZhCccjzlsA/OuAwtFGWocxA4gqXGTLvOyiF8d+8o0fZUeSztixkYjcGq1fGZY3Tkq4yRvHPFxU+jdZ9Q==", "cpu": [ "arm64" ], @@ -1469,9 +1469,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.2.tgz", - "integrity": "sha512-mCMlpzlBgOTdaFs83I4XRr8wNPveJiJX1RLfv4hggyIVhfB5mJfN4P8Z6yKh+oE4Luz+qq1P3kVdWrCKcMYrrA==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.0.tgz", + "integrity": "sha512-BcnSPRM76/cD2gQC+rQNGBN6GStBs2pl/FpweW8JYuz5J/IEa0Fr4AtrPv766DB/6b2MZ/AfSIOSGw3nEIP8SA==", "cpu": [ "arm64" ], @@ -1482,9 +1482,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.2.tgz", - "integrity": "sha512-yUoEvnH0FBef/NbB1u6d3HNGyruAKnN74LrPAfDQL3O32e3k3OSfLrPgSJmgb3PJrBZWfPyt6m4ZhAFa2nZp2A==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.0.tgz", + "integrity": "sha512-LDyFB9GRolGN7XI6955aFeI3wCdCUszFWumWU0deHA8VpR3nWRrjG6GtGjBrQxQKFevnUTHKCfPR4IvrW3kCgQ==", "cpu": [ "x64" ], @@ -1495,9 +1495,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.2.tgz", - "integrity": "sha512-GYbLs5ErswU/Xs7aGXqzc3RrdEjKdmoCrgzhJWyFL0r5fL3qd1NPcDKDowDnmcoSiGJeU68/Vy+OMUluRxPiLQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.0.tgz", + "integrity": "sha512-ygrGVhQP47mRh0AAD0zl6QqCbNsf0eTo+vgwkY6LunBcg0f2Jv365GXlDUECIyoXp1kKwL5WW6rsO429DBY/bA==", "cpu": [ "arm" ], @@ -1508,9 +1508,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.2.tgz", - "integrity": "sha512-L1+D8/wqGnKQIlh4Zre9i4R4b4noxzH5DDciyahX4oOz62CphY7WDWqJoQ66zNR4oScLNOqQJfNSIAe/6TPUmQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.0.tgz", + "integrity": "sha512-x+uJ6MAYRlHGe9wi4HQjxpaKHPM3d3JjqqCkeC5gpnnI6OWovLdXTpfa8trjxPLnWKyBsSi5kne+146GAxFt4A==", "cpu": [ "arm64" ], @@ -1521,9 +1521,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.2.tgz", - "integrity": "sha512-tK5eoKFkXdz6vjfkSTCupUzCo40xueTOiOO6PeEIadlNBkadH1wNOH8ILCPIl8by/Gmb5AGAeQOFeLev7iZDOA==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.0.tgz", + "integrity": "sha512-nrRw8ZTQKg6+Lttwqo6a2VxR9tOroa2m91XbdQ2sUUzHoedXlsyvY1fN4xWdqz8PKmf4orDwejxXHjh7YBGUCA==", "cpu": [ "arm64" ], @@ -1534,9 +1534,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.13.2.tgz", - "integrity": "sha512-zvXvAUGGEYi6tYhcDmb9wlOckVbuD+7z3mzInCSTACJ4DQrdSLPNUeDIcAQW39M3q6PDquqLWu7pnO39uSMRzQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.0.tgz", + "integrity": "sha512-xV0d5jDb4aFu84XKr+lcUJ9y3qpIWhttO3Qev97z8DKLXR62LC3cXT/bMZXrjLF9X+P5oSmJTzAhqwUbY96PnA==", "cpu": [ "ppc64le" ], @@ -1547,9 +1547,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.2.tgz", - "integrity": "sha512-C3GSKvMtdudHCN5HdmAMSRYR2kkhgdOfye4w0xzyii7lebVr4riCgmM6lRiSCnJn2w1Xz7ZZzHKuLrjx5620kw==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.0.tgz", + "integrity": "sha512-SDDhBQwZX6LPRoPYjAZWyL27LbcBo7WdBFWJi5PI9RPCzU8ijzkQn7tt8NXiXRiFMJCVpkuMkBf4OxSxVMizAw==", "cpu": [ "riscv64" ], @@ -1560,9 +1560,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.13.2.tgz", - "integrity": "sha512-l4U0KDFwzD36j7HdfJ5/TveEQ1fUTjFFQP5qIt9gBqBgu1G8/kCaq5Ok05kd5TG9F8Lltf3MoYsUMw3rNlJ0Yg==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.0.tgz", + "integrity": "sha512-RxB/qez8zIDshNJDufYlTT0ZTVut5eCpAZ3bdXDU9yTxBzui3KhbGjROK2OYTTor7alM7XBhssgoO3CZ0XD3qA==", "cpu": [ "s390x" ], @@ -1573,9 +1573,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.2.tgz", - "integrity": "sha512-xXMLUAMzrtsvh3cZ448vbXqlUa7ZL8z0MwHp63K2IIID2+DeP5iWIT6g1SN7hg1VxPzqx0xZdiDM9l4n9LRU1A==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.0.tgz", + "integrity": "sha512-C6y6z2eCNCfhZxT9u+jAM2Fup89ZjiG5pIzZIDycs1IwESviLxwkQcFRGLjnDrP+PT+v5i4YFvlcfAs+LnreXg==", "cpu": [ "x64" ], @@ -1586,9 +1586,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.2.tgz", - "integrity": "sha512-M/JYAWickafUijWPai4ehrjzVPKRCyDb1SLuO+ZyPfoXgeCEAlgPkNXewFZx0zcnoIe3ay4UjXIMdXQXOZXWqA==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.0.tgz", + "integrity": "sha512-i0QwbHYfnOMYsBEyjxcwGu5SMIi9sImDVjDg087hpzXqhBSosxkE7gyIYFHgfFl4mr7RrXksIBZ4DoLoP4FhJg==", "cpu": [ "x64" ], @@ -1599,9 +1599,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.2.tgz", - "integrity": "sha512-2YWwoVg9KRkIKaXSh0mz3NmfurpmYoBBTAXA9qt7VXk0Xy12PoOP40EFuau+ajgALbbhi4uTj3tSG3tVseCjuA==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.0.tgz", + "integrity": "sha512-Fq52EYb0riNHLBTAcL0cun+rRwyZ10S9vKzhGKKgeD+XbwunszSY0rVMco5KbOsTlwovP2rTOkiII/fQ4ih/zQ==", "cpu": [ "arm64" ], @@ -1612,9 +1612,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.2.tgz", - "integrity": "sha512-2FSsE9aQ6OWD20E498NYKEQLneShWes0NGMPQwxWOdws35qQXH+FplabOSP5zEe1pVjurSDOGEVCE2agFwSEsw==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.0.tgz", + "integrity": "sha512-e/PBHxPdJ00O9p5Ui43+vixSgVf4NlLsmV6QneGERJ3lnjIua/kim6PRFe3iDueT1rQcgSkYP8ZBBXa/h4iPvw==", "cpu": [ "ia32" ], @@ -1625,9 +1625,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.2.tgz", - "integrity": "sha512-7h7J2nokcdPePdKykd8wtc8QqqkqxIrUz7MHj6aNr8waBRU//NLDVnNjQnqQO6fqtjrtCdftpbTuOKAyrAQETQ==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.0.tgz", + "integrity": "sha512-aGg7iToJjdklmxlUlJh/PaPNa4PmqHfyRMLunbL3eaMO0gp656+q1zOKkpJ/CVe9CryJv6tAN1HDoR8cNGzkag==", "cpu": [ "x64" ], @@ -1671,9 +1671,9 @@ } }, "node_modules/@swc/core": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.11.tgz", - "integrity": "sha512-WKEakMZxkVwRdgMN4AMJ9K5nysY8g8npgQPczmjBeNK5In7QEAZAJwnyccrWwJZU0XjVeHn2uj+XbOKdDW17rg==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.4.12.tgz", + "integrity": "sha512-QljRxTaUajSLB9ui93cZ38/lmThwIw/BPxjn+TphrYN6LPU3vu9/ykjgHtlpmaXDDcngL4K5i396E7iwwEUxYg==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -1688,16 +1688,16 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.4.11", - "@swc/core-darwin-x64": "1.4.11", - "@swc/core-linux-arm-gnueabihf": "1.4.11", - "@swc/core-linux-arm64-gnu": "1.4.11", - "@swc/core-linux-arm64-musl": "1.4.11", - "@swc/core-linux-x64-gnu": "1.4.11", - "@swc/core-linux-x64-musl": "1.4.11", - "@swc/core-win32-arm64-msvc": "1.4.11", - "@swc/core-win32-ia32-msvc": "1.4.11", - "@swc/core-win32-x64-msvc": "1.4.11" + "@swc/core-darwin-arm64": "1.4.12", + "@swc/core-darwin-x64": "1.4.12", + "@swc/core-linux-arm-gnueabihf": "1.4.12", + "@swc/core-linux-arm64-gnu": "1.4.12", + "@swc/core-linux-arm64-musl": "1.4.12", + "@swc/core-linux-x64-gnu": "1.4.12", + "@swc/core-linux-x64-musl": "1.4.12", + "@swc/core-win32-arm64-msvc": "1.4.12", + "@swc/core-win32-ia32-msvc": "1.4.12", + "@swc/core-win32-x64-msvc": "1.4.12" }, "peerDependencies": { "@swc/helpers": "^0.5.0" @@ -1709,9 +1709,9 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.11.tgz", - "integrity": "sha512-C1j1Qp/IHSelVWdEnT7f0iONWxQz6FAqzjCF2iaL+0vFg4V5f2nlgrueY8vj5pNNzSGhrAlxsMxEIp4dj1MXkg==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.12.tgz", + "integrity": "sha512-BZUUq91LGJsLI2BQrhYL3yARkcdN4TS3YGNS6aRYUtyeWrGCTKHL90erF2BMU2rEwZLLkOC/U899R4o4oiSHfA==", "cpu": [ "arm64" ], @@ -1725,9 +1725,9 @@ } }, "node_modules/@swc/core-darwin-x64": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.11.tgz", - "integrity": "sha512-0TTy3Ni8ncgaMCchSQ7FK8ZXQLlamy0FXmGWbR58c+pVZWYZltYPTmheJUvVcR0H2+gPAymRKyfC0iLszDALjg==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.4.12.tgz", + "integrity": "sha512-Wkk8rq1RwCOgg5ybTlfVtOYXLZATZ+QjgiBNM7pIn03A5/zZicokNTYd8L26/mifly2e74Dz34tlIZBT4aTGDA==", "cpu": [ "x64" ], @@ -1741,9 +1741,9 @@ } }, "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.11.tgz", - "integrity": "sha512-XJLB71uw0rog4DjYAPxFGAuGCBQpgJDlPZZK6MTmZOvI/1t0+DelJ24IjHIxk500YYM26Yv47xPabqFPD7I2zQ==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.4.12.tgz", + "integrity": "sha512-8jb/SN67oTQ5KSThWlKLchhU6xnlAlnmnLCCOKK1xGtFS6vD+By9uL+qeEY2krV98UCRTf68WSmC0SLZhVoz5A==", "cpu": [ "arm" ], @@ -1757,9 +1757,9 @@ } }, "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.11.tgz", - "integrity": "sha512-vYQwzJvm/iu052d5Iw27UFALIN5xSrGkPZXxLNMHPySVko2QMNNBv35HLatkEQHbQ3X+VKSW9J9SkdtAvAVRAQ==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.4.12.tgz", + "integrity": "sha512-DhW47DQEZKCdSq92v5F03rqdpjRXdDMqxfu4uAlZ9Uo1wJEGvY23e1SNmhji2sVHsZbBjSvoXoBLk0v00nSG8w==", "cpu": [ "arm64" ], @@ -1773,9 +1773,9 @@ } }, "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.11.tgz", - "integrity": "sha512-eV+KduiRYUFjPsvbZuJ9aknQH9Tj0U2/G9oIZSzLx/18WsYi+upzHbgxmIIHJ2VJgfd7nN40RI/hMtxNsUzR/g==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.4.12.tgz", + "integrity": "sha512-PR57pT3TssnCRvdsaKNsxZy9N8rFg9AKA1U7W+LxbZ/7Z7PHc5PjxF0GgZpE/aLmU6xOn5VyQTlzjoamVkt05g==", "cpu": [ "arm64" ], @@ -1789,9 +1789,9 @@ } }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.11.tgz", - "integrity": "sha512-WA1iGXZ2HpqM1OR9VCQZJ8sQ1KP2or9O4bO8vWZo6HZJIeoQSo7aa9waaCLRpkZvkng1ct/TF/l6ymqSNFXIzQ==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.4.12.tgz", + "integrity": "sha512-HLZIWNHWuFIlH+LEmXr1lBiwGQeCshKOGcqbJyz7xpqTh7m2IPAxPWEhr/qmMTMsjluGxeIsLrcsgreTyXtgNA==", "cpu": [ "x64" ], @@ -1805,9 +1805,9 @@ } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.11.tgz", - "integrity": "sha512-UkVJToKf0owwQYRnGvjHAeYVDfeimCEcx0VQSbJoN7Iy0ckRZi7YPlmWJU31xtKvikE2bQWCOVe0qbSDqqcWXA==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.4.12.tgz", + "integrity": "sha512-M5fBAtoOcpz2YQAFtNemrPod5BqmzAJc8pYtT3dVTn1MJllhmLHlphU8BQytvoGr1PHgJL8ZJBlBGdt70LQ7Mw==", "cpu": [ "x64" ], @@ -1821,9 +1821,9 @@ } }, "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.11.tgz", - "integrity": "sha512-35khwkyly7lF5NDSyvIrukBMzxPorgc5iTSDfVO/LvnmN5+fm4lTlrDr4tUfTdOhv3Emy7CsKlsNAeFRJ+Pm+w==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.4.12.tgz", + "integrity": "sha512-K8LjjgZ7VQFtM+eXqjfAJ0z+TKVDng3r59QYn7CL6cyxZI2brLU3lNknZcUFSouZD+gsghZI/Zb8tQjVk7aKDQ==", "cpu": [ "arm64" ], @@ -1837,9 +1837,9 @@ } }, "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.11.tgz", - "integrity": "sha512-Wx8/6f0ufgQF2pbVPsJ2dAmFLwIOW+xBE5fxnb7VnEbGkTgP1qMDWiiAtD9rtvDSuODG3i1AEmAak/2HAc6i6A==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.4.12.tgz", + "integrity": "sha512-hflO5LCxozngoOmiQbDPyvt6ODc5Cu9AwTJP9uH/BSMPdEQ6PCnefuUOJLAKew2q9o+NmDORuJk+vgqQz9Uzpg==", "cpu": [ "ia32" ], @@ -1853,9 +1853,9 @@ } }, "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.11.tgz", - "integrity": "sha512-0xRFW6K9UZQH2NVC/0pVB0GJXS45lY24f+6XaPBF1YnMHd8A8GoHl7ugyM5yNUTe2AKhSgk5fJV00EJt/XBtdQ==", + "version": "1.4.12", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.4.12.tgz", + "integrity": "sha512-3A4qMtddBDbtprV5edTB/SgJn9L+X5TL7RGgS3eWtEgn/NG8gA80X/scjf1v2MMeOsrcxiYhnemI2gXCKuQN2g==", "cpu": [ "x64" ], @@ -2030,9 +2030,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.12.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz", - "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==", + "version": "20.12.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.4.tgz", + "integrity": "sha512-E+Fa9z3wSQpzgYQdYmme5X3OTuejnnTx88A6p6vkkJosR3KBz+HpE3kqNm98VE6cfLFcISx7zW7MsJkH6KwbTw==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -2061,18 +2061,18 @@ "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/react": { - "version": "18.2.73", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz", - "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==", + "version": "18.2.74", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.74.tgz", + "integrity": "sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==", "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "node_modules/@types/react-dom": { - "version": "18.2.23", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz", - "integrity": "sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==", + "version": "18.2.24", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.24.tgz", + "integrity": "sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==", "dev": true, "dependencies": { "@types/react": "*" @@ -3211,9 +3211,9 @@ "integrity": "sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ==" }, "node_modules/caniuse-lite": { - "version": "1.0.30001603", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001603.tgz", - "integrity": "sha512-iL2iSS0eDILMb9n5yKQoTBim9jMZ0Yrk8g0N9K7UzYyWnfIKzXBZD5ngpM37ZcL/cv0Mli8XtVMRYMQAfFpi5Q==", + "version": "1.0.30001605", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz", + "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==", "dev": true, "funding": [ { @@ -4651,11 +4651,6 @@ "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==" }, - "node_modules/easy-bem": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz", - "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==" - }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -4677,9 +4672,9 @@ } }, "node_modules/electron": { - "version": "28.2.9", - "resolved": "https://registry.npmjs.org/electron/-/electron-28.2.9.tgz", - "integrity": "sha512-6b6G6jq4ypKxdCRNjULmqWEott4GJe2kaAykLonaTaeFqoFFHbzOu4k6pAzurseFhv452aUob9DAH6eI7UlOUw==", + "version": "28.2.10", + "resolved": "https://registry.npmjs.org/electron/-/electron-28.2.10.tgz", + "integrity": "sha512-0rGBJNogcl2FIRxGRUv9zuMaBP78nSBJW+Bd1U7OGeg8IEkSIbHOhfn71XoGxgbOUSCEXjjyftq4mtAAVbUsZQ==", "dev": true, "hasInstallScript": true, "dependencies": { @@ -4848,15 +4843,15 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.722", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.722.tgz", - "integrity": "sha512-5nLE0TWFFpZ80Crhtp4pIp8LXCztjYX41yUcV6b+bKR2PqzjskTMOOlBi1VjBHlvHwS+4gar7kNKOrsbsewEZQ==", + "version": "1.4.726", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.726.tgz", + "integrity": "sha512-xtjfBXn53RORwkbyKvDfTajtnTp0OJoPOIBzXvkNbb7+YYvCHJflba3L7Txyx/6Fov3ov2bGPr/n5MTixmPhdQ==", "dev": true }, "node_modules/electron/node_modules/@types/node": { - "version": "18.19.28", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.28.tgz", - "integrity": "sha512-J5cOGD9n4x3YGgVuaND6khm5x07MMdAKkRyXnjVR6KFhLMNh2yONGiP7Z+4+tBOt5mK+GvDTiacTOVGGpqiecw==", + "version": "18.19.29", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.29.tgz", + "integrity": "sha512-5pAX7ggTmWZdhUrhRWLPf+5oM7F80bcKVCBbr0zwEkTNzTJL2CWQjznpFgHYy6GrzkYi2Yjy7DHKoynFxqPV8g==", "dev": true, "dependencies": { "undici-types": "~5.26.4" @@ -5572,23 +5567,21 @@ } }, "node_modules/flowbite-react": { - "version": "0.7.6", - "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.7.6.tgz", - "integrity": "sha512-myQm6KYNvOeuZXl6n4Tee2QIIn0URfalz+Ve2hVZfhw1FjPlXI4Hf1c4V7Ayh1Y9zlpRbFOb+87IQPbK8zXT7g==", - "hasInstallScript": true, + "version": "0.7.8", + "resolved": "https://registry.npmjs.org/flowbite-react/-/flowbite-react-0.7.8.tgz", + "integrity": "sha512-hYYPvIixokNgAlPbmxNAYFLlLi61z492v8hj1jQHykhuesPGTifDFeQcDxKgQvENqc4bRdBdjrKOvnq7D+pm7g==", "dependencies": { "@floating-ui/core": "1.6.0", - "@floating-ui/react": "0.26.9", + "@floating-ui/react": "0.26.10", "classnames": "2.5.1", "debounce": "2.0.0", "flowbite": "2.3.0", "react-icons": "5.0.1", - "react-indiana-drag-scroll": "2.2.0", "tailwind-merge": "2.2.2" }, "peerDependencies": { - "react": "^18", - "react-dom": "^18", + "react": ">=18", + "react-dom": ">=18", "tailwindcss": "^3" } }, @@ -6744,9 +6737,9 @@ } }, "node_modules/joi": { - "version": "17.12.2", - "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.2.tgz", - "integrity": "sha512-RonXAIzCiHLc8ss3Ibuz45u28GOsWE1UpfDXLbN/9NKbL4tCJf8TWYVKsoYuuh+sAUt7fsSNpA+r2+TBA6Wjmw==", + "version": "17.12.3", + "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.3.tgz", + "integrity": "sha512-2RRziagf555owrm9IRVtdKynOBeITiDpuZqIpgwqXShPncPKNiRQoiGsl/T8SQdq+8ugRzH2LqY67irr2y/d+g==", "dev": true, "dependencies": { "@hapi/hoek": "^9.3.0", @@ -8575,29 +8568,6 @@ "react": "*" } }, - "node_modules/react-indiana-drag-scroll": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.2.0.tgz", - "integrity": "sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==", - "dependencies": { - "classnames": "^2.2.6", - "debounce": "^1.2.0", - "easy-bem": "^1.1.1" - }, - "engines": { - "node": ">=8", - "npm": ">=5" - }, - "peerDependencies": { - "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/react-indiana-drag-scroll/node_modules/debounce": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", - "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" - }, "node_modules/react-intl": { "version": "6.6.4", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.6.4.tgz", @@ -9103,9 +9073,9 @@ } }, "node_modules/rollup": { - "version": "4.13.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.2.tgz", - "integrity": "sha512-MIlLgsdMprDBXC+4hsPgzWUasLO9CE4zOkj/u6j+Z6j5A4zRY+CtiXAdJyPtgCsc42g658Aeh1DlrdVEJhsL2g==", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.0.tgz", + "integrity": "sha512-Qe7w62TyawbDzB4yt32R0+AbIo6m1/sqO7UPzFS8Z/ksL5mrfhA0v4CavfdmFav3D+ub4QeAgsGEe84DoWe/nQ==", "dev": true, "dependencies": { "@types/estree": "1.0.5" @@ -9118,21 +9088,21 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.13.2", - "@rollup/rollup-android-arm64": "4.13.2", - "@rollup/rollup-darwin-arm64": "4.13.2", - "@rollup/rollup-darwin-x64": "4.13.2", - "@rollup/rollup-linux-arm-gnueabihf": "4.13.2", - "@rollup/rollup-linux-arm64-gnu": "4.13.2", - "@rollup/rollup-linux-arm64-musl": "4.13.2", - "@rollup/rollup-linux-powerpc64le-gnu": "4.13.2", - "@rollup/rollup-linux-riscv64-gnu": "4.13.2", - "@rollup/rollup-linux-s390x-gnu": "4.13.2", - "@rollup/rollup-linux-x64-gnu": "4.13.2", - "@rollup/rollup-linux-x64-musl": "4.13.2", - "@rollup/rollup-win32-arm64-msvc": "4.13.2", - "@rollup/rollup-win32-ia32-msvc": "4.13.2", - "@rollup/rollup-win32-x64-msvc": "4.13.2", + "@rollup/rollup-android-arm-eabi": "4.14.0", + "@rollup/rollup-android-arm64": "4.14.0", + "@rollup/rollup-darwin-arm64": "4.14.0", + "@rollup/rollup-darwin-x64": "4.14.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.14.0", + "@rollup/rollup-linux-arm64-gnu": "4.14.0", + "@rollup/rollup-linux-arm64-musl": "4.14.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.14.0", + "@rollup/rollup-linux-riscv64-gnu": "4.14.0", + "@rollup/rollup-linux-s390x-gnu": "4.14.0", + "@rollup/rollup-linux-x64-gnu": "4.14.0", + "@rollup/rollup-linux-x64-musl": "4.14.0", + "@rollup/rollup-win32-arm64-msvc": "4.14.0", + "@rollup/rollup-win32-ia32-msvc": "4.14.0", + "@rollup/rollup-win32-x64-msvc": "4.14.0", "fsevents": "~2.3.2" } }, @@ -10605,9 +10575,9 @@ } }, "node_modules/vite": { - "version": "5.2.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.7.tgz", - "integrity": "sha512-k14PWOKLI6pMaSzAuGtT+Cf0YmIx12z9YGon39onaJNy8DLBfBJrzg9FQEmkAM5lpHBZs9wksWAsyF/HkpEwJA==", + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz", + "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==", "dev": true, "dependencies": { "esbuild": "^0.20.1", diff --git a/package.json b/package.json index 5b2416cc..6a03e696 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "components": "^0.1.0", "express": "^4.19.2", "flowbite": "^2.3.0", - "flowbite-react": "^0.7.6", + "flowbite-react": "^0.7.8", "flowbite-typography": "^1.0.3", "lodash": "^4.17.21", "react": "^18.2.0", @@ -56,8 +56,8 @@ }, "devDependencies": { "@commitlint/config-conventional": "^19.1.0", - "@types/react": "^18.2.73", - "@types/react-dom": "^18.2.23", + "@types/react": "^18.2.74", + "@types/react-dom": "^18.2.24", "@types/react-router-dom": "^5.3.3", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", @@ -65,7 +65,7 @@ "autoprefixer": "^10.4.19", "concurrently": "^8.2.2", "cross-env": "^7.0.3", - "electron": "^28.2.9", + "electron": "^28.2.10", "electron-builder": "^24.13.3", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", @@ -77,7 +77,7 @@ "standard-version": "^9.5.0", "tailwindcss": "^3.4.3", "typescript": "^5.4.3", - "vite": "^5.2.7", + "vite": "^5.2.8", "wait-on": "^7.2.0" }, "standard-version": { diff --git a/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx b/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx index 4fd431fd..b9a316b3 100644 --- a/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx +++ b/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx @@ -1,19 +1,21 @@ -import React from "react"; -import {Button} from "@/components"; -import {FormattedMessage} from "react-intl"; +import React from 'react'; +import { Button } from '@/components'; +import { FormattedMessage } from 'react-intl'; interface QueryRefetchButtonProps { onRefetch: () => void; } -const QueryRefetchButton: React.FC = ({onRefetch}) => { +const QueryRefetchButton: React.FC = ({ onRefetch }) => { return ( ); -} +}; -export {QueryRefetchButton}; +export { QueryRefetchButton }; diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx index 476b7533..c7fe2b2a 100644 --- a/src/renderer/components/blocks/layout/LeftNav.tsx +++ b/src/renderer/components/blocks/layout/LeftNav.tsx @@ -1,17 +1,46 @@ -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { IoMenu } from 'react-icons/io5'; import { FormattedMessage } from 'react-intl'; -import {Sidebar, WarehouseIcon} from '@/components'; +import { Card, CreateOrganizationModal, Sidebar, Spinner, WarehouseIcon } from '@/components'; import ROUTES from '@/routes/route-constants'; -import {Card} from "@/components"; +import { MdListAlt } from 'react-icons/md'; +import { useGetOrganizationsListQuery } from '@/api'; +import { Organization } from '@/schemas/Organization.schema'; +import { useUrlHash } from '@/hooks'; const LeftNav = () => { const navigate = useNavigate(); const location = useLocation(); const [isOpen, setIsOpen] = useState(false); + const [myOrganization, setMyOrganization] = useState(undefined); + const [orgCreationPending, setOrgCreationPending] = useState(false); + + const [createOrgModalActive, setCreateOrgModalActive] = useUrlHash('create-organization'); + const getOrgRtkQueryOptions = myOrganization || createOrgModalActive ? {} : { pollingInterval: 10000 }; + const { data: organizationsListData, isLoading: organizationsListLoading } = useGetOrganizationsListQuery( + null, + getOrgRtkQueryOptions, + ); + + //console.log('left nav re-render'); + + useEffect(() => { + setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); + }, [organizationsListData]); + + useEffect(() => { + setOrgCreationPending(!myOrganization?.orgUid || myOrganization?.orgUid === 'pending'); + }, [myOrganization]); const isActive = useCallback((path: string) => location.pathname === path, [location]); + const handleClickMyOrganization = useCallback(() => { + if (myOrganization && !orgCreationPending) { + navigate(ROUTES.MY_ORGANIZATION); + } else { + setCreateOrgModalActive(true); + } + }, [myOrganization, navigate, orgCreationPending, setCreateOrgModalActive]); const toggleDropdown = () => setIsOpen(!isOpen); @@ -67,16 +96,16 @@ const LeftNav = () => { {/* Original Desktop LeftNav Layout */}
- -
- -
- -
-
- + +
+ +
+ +
+
+ { > - {/* Add more Sidebar.Item as needed */} + + + +
+ +
+ +
+
+ + + {myOrganization ? ( + <> + {orgCreationPending ? ( + <> + + {' ...'} + + + ) : ( + + )} + + ) : ( + + )} + + {createOrgModalActive && setCreateOrgModalActive(false)} />}
); diff --git a/src/renderer/components/blocks/layout/Template.tsx b/src/renderer/components/blocks/layout/Template.tsx index 329349e6..c596208c 100644 --- a/src/renderer/components/blocks/layout/Template.tsx +++ b/src/renderer/components/blocks/layout/Template.tsx @@ -1,7 +1,7 @@ import { ErrorBoundary } from '@/pages'; import { LeftNav } from './LeftNav'; import { Outlet } from 'react-router-dom'; -import { Header } from "@/components"; +import { Header } from '@/components'; const Template = () => { return ( diff --git a/src/renderer/components/blocks/layout/index.ts b/src/renderer/components/blocks/layout/index.ts index 9cf0fac4..e70c9e10 100644 --- a/src/renderer/components/blocks/layout/index.ts +++ b/src/renderer/components/blocks/layout/index.ts @@ -1,3 +1,3 @@ export * from './LeftNav'; export * from './Template'; -export * from './PageCounter'; \ No newline at end of file +export * from './PageCounter'; diff --git a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx new file mode 100644 index 00000000..40e2900e --- /dev/null +++ b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx @@ -0,0 +1,138 @@ +import React, { useState } from 'react'; +import { Button, Card, FloatingLabel, Modal, Spinner, Tabs } from '@/components'; +import { FormattedMessage, IntlShape, useIntl } from 'react-intl'; + +interface CreateOrganizationModalProps { + onClose: () => void; // onClose prop for closing the modal +} + +const CreateOrganizationModal: React.FC = ({ onClose }: CreateOrganizationModalProps) => { + const intl: IntlShape = useIntl(); + const [orgCreationPending, setOrgCreationPending] = useState(false); + + const CreateOrgLayoutBody: React.FC = () => { + const [orgName, setOrgName] = useState(''); + const [orgNameChanged, setOrgNameChanged] = useState(true); + + const handleOrgUidChanged = (event: React.ChangeEvent) => { + setOrgNameChanged(true); + setOrgName(event.target.value); + }; + + const accept = async () => { + setOrgNameChanged(false); + + if (!orgName) { + return; + } + + onClose(); + setOrgCreationPending(true); + }; + + return ( + <> +
+ {!orgNameChanged && !orgName &&

todo error

} + +
+ {/* Variation of Modal.Footer */} +
+ + +
+ + ); + }; + + const ImportByOrgUidLayoutBody: React.FC = () => { + const [orgUid, setOrgUid] = useState(''); + const [orgUidChanged, setOrgUidChanged] = useState(true); + + const handleOrgUidChanged = (event: React.ChangeEvent) => { + setOrgUidChanged(true); + setOrgUid(event.target.value); + }; + + const accept = async () => { + setOrgUidChanged(false); + + if (!orgUid) { + return; + } + + onClose(); + setOrgCreationPending(true); + }; + + return ( + <> +
+ {!orgUidChanged && !orgUid &&

todo error

} + +
+ {/* Variation of Modal.Footer */} +
+ + +
+ + ); + }; + + if (orgCreationPending) { + return ( + + + + + + +
+ + +
+ + + + ); + } + + return ( + + + + + + + }> + + + }> + + + + + + ); +}; + +export { CreateOrganizationModal }; diff --git a/src/renderer/components/blocks/modals/index.ts b/src/renderer/components/blocks/modals/index.ts index 64810459..1253a866 100644 --- a/src/renderer/components/blocks/modals/index.ts +++ b/src/renderer/components/blocks/modals/index.ts @@ -1 +1,2 @@ -export * from './ProjectModal'; \ No newline at end of file +export * from './ProjectModal'; +export * from './CreateOrganizationModal'; diff --git a/src/renderer/components/blocks/widgets/OrgUidBadge.tsx b/src/renderer/components/blocks/widgets/OrgUidBadge.tsx index 2af9c6fc..1cdfddc9 100644 --- a/src/renderer/components/blocks/widgets/OrgUidBadge.tsx +++ b/src/renderer/components/blocks/widgets/OrgUidBadge.tsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react'; -import { Toast, Tooltip } from 'flowbite-react'; +import React, { useEffect, useState } from 'react'; +import { Toast, Tooltip } from '@/components'; interface OrgUidBadgeProps { orgUid: string; diff --git a/src/renderer/components/blocks/widgets/SearchBox.tsx b/src/renderer/components/blocks/widgets/SearchBox.tsx index 85774e72..458f04a1 100644 --- a/src/renderer/components/blocks/widgets/SearchBox.tsx +++ b/src/renderer/components/blocks/widgets/SearchBox.tsx @@ -1,15 +1,15 @@ import { TextInput } from '@/components'; -import { IoSearchSharp } from "react-icons/io5"; -import React from "react"; -import { useIntl } from "react-intl"; +import { IoSearchSharp } from 'react-icons/io5'; +import React from 'react'; +import { IntlShape, useIntl } from 'react-intl'; interface SearchBoxProps { - defaultValue: string, - onChange: (event: any) => void + defaultValue: string; + onChange: (event: any) => void; } const SearchBox: React.FC = ({ defaultValue, onChange }) => { - const intl = useIntl(); + const intl: IntlShape = useIntl(); return (
@@ -18,9 +18,10 @@ const SearchBox: React.FC = ({ defaultValue, onChange }) => { icon={IoSearchSharp} defaultValue={defaultValue || ''} onChange={onChange} - placeholder={intl.formatMessage({id: "search"})} /> + placeholder={intl.formatMessage({ id: 'search' })} + />
); -} +}; export { SearchBox }; diff --git a/src/renderer/components/proxy/FloatingLabel.tsx b/src/renderer/components/proxy/FloatingLabel.tsx new file mode 100644 index 00000000..dd468bad --- /dev/null +++ b/src/renderer/components/proxy/FloatingLabel.tsx @@ -0,0 +1,7 @@ +import { FloatingLabel as FlowbiteFloatingLabel, FloatingLabelProps } from 'flowbite-react'; + +function FloatingLabel({ children, ...props }: FloatingLabelProps) { + return {children}; +} + +export { FloatingLabel }; diff --git a/src/renderer/components/proxy/Toast.tsx b/src/renderer/components/proxy/Toast.tsx new file mode 100644 index 00000000..864c7cd0 --- /dev/null +++ b/src/renderer/components/proxy/Toast.tsx @@ -0,0 +1,7 @@ +import { Toast as FlowbiteToast, ToastProps } from 'flowbite-react'; + +function Toast({ children, ...props }: ToastProps) { + return {children}; +} + +export { Toast }; diff --git a/src/renderer/components/proxy/index.ts b/src/renderer/components/proxy/index.ts index c08175cc..4867cf65 100644 --- a/src/renderer/components/proxy/index.ts +++ b/src/renderer/components/proxy/index.ts @@ -8,3 +8,5 @@ export * from './Tooltip'; export * from './Modal'; export * from './Tabs'; export * from './Card'; +export * from './FloatingLabel'; +export * from './Toast'; diff --git a/src/renderer/pages/Audit/AuditPage.tsx b/src/renderer/pages/Audit/AuditPage.tsx index 1d8e62ab..e679a4e6 100644 --- a/src/renderer/pages/Audit/AuditPage.tsx +++ b/src/renderer/pages/Audit/AuditPage.tsx @@ -1,16 +1,16 @@ import React, { useCallback } from 'react'; import { useGetAuditQuery } from '@/api'; import { useQueryParamState } from '@/hooks'; -import {debounce, DebouncedFunc} from 'lodash'; +import { debounce, DebouncedFunc } from 'lodash'; import { - OrganizationSelector, - IndeterminateProgressOverlay, - SkeletonTable, AuditsTable, + IndeterminateProgressOverlay, + OrganizationSelector, SearchBox, - SyncIndicator + SkeletonTable, + SyncIndicator, } from '@/components'; -import {FormattedMessage} from "react-intl"; +import { FormattedMessage } from 'react-intl'; const AuditPage: React.FC = () => { const [currentPage, setCurrentPage] = useQueryParamState('page', '1'); @@ -23,7 +23,7 @@ const AuditPage: React.FC = () => { isLoading: auditLoading, isFetching: auditFetching, error: auditError, - } = useGetAuditQuery({ page: Number(currentPage), orgUid, search, order }, {skip: !orgUid}); + } = useGetAuditQuery({ page: Number(currentPage), orgUid, search, order }, { skip: !orgUid }); const handlePageChange: DebouncedFunc = useCallback( debounce((page) => setCurrentPage(page), 800), @@ -47,72 +47,71 @@ const AuditPage: React.FC = () => { const handleSetOrder = useCallback(() => { const currentDirection = order; - // Cycle through 'ASC', 'DESC', and no order ('') - switch (currentDirection) { - case 'ASC': - setOrder(`DESC`); - break; - case 'DESC': - setOrder(''); - break; - default: - setOrder(`ASC`); - break; - } - + // Cycle through 'ASC', 'DESC', and no order ('') + switch (currentDirection) { + case 'ASC': + setOrder(`DESC`); + break; + case 'DESC': + setOrder(''); + break; + default: + setOrder(`ASC`); + break; + } }, [order, setOrder]); - if (!orgUid){ + if (!orgUid) { return ( <>
- +
- +
); } if (auditLoading) { - return ; + return ; } if (auditError) { - return ; + return ; } if (!auditData) { - return ; + return ; } return ( <> - {auditFetching && } + {auditFetching && }
- - + +
- <> - {auditLoading ? ( - - ) : ( - - )} - + <> + {auditLoading ? ( + + ) : ( + + )} + ); }; -export {AuditPage}; +export { AuditPage }; diff --git a/src/renderer/pages/Error/ErrorBoundary.tsx b/src/renderer/pages/Error/ErrorBoundary.tsx index 57cdba97..5ae4bf45 100644 --- a/src/renderer/pages/Error/ErrorBoundary.tsx +++ b/src/renderer/pages/Error/ErrorBoundary.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Modal} from "flowbite-react"; -import {FormattedMessage} from "react-intl"; +import { Modal } from '@/components'; +import { FormattedMessage } from 'react-intl'; class ErrorBoundary extends React.Component { constructor(props: any) { @@ -16,7 +16,7 @@ class ErrorBoundary extends React.Component { render() { const { hasError } = this.state as any; const { children } = this.props as any; - + if (!hasError) { return children; } @@ -33,11 +33,11 @@ class ErrorBoundary extends React.Component { > - +

- . + .

@@ -46,4 +46,4 @@ class ErrorBoundary extends React.Component { } } -export { ErrorBoundary }; \ No newline at end of file +export { ErrorBoundary }; diff --git a/src/renderer/pages/MyOrganization/MyOrganization.tsx b/src/renderer/pages/MyOrganization/MyOrganization.tsx new file mode 100644 index 00000000..b335064e --- /dev/null +++ b/src/renderer/pages/MyOrganization/MyOrganization.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +interface MyOrganizationProps {} + +const MyOrganization: React.FC = () => { + return ( +
+

this is the organization page

+
+ ); +}; +export { MyOrganization }; diff --git a/src/renderer/pages/MyOrganization/index.ts b/src/renderer/pages/MyOrganization/index.ts new file mode 100644 index 00000000..5e71c440 --- /dev/null +++ b/src/renderer/pages/MyOrganization/index.ts @@ -0,0 +1 @@ +export * from './MyOrganization'; diff --git a/src/renderer/pages/index.ts b/src/renderer/pages/index.ts index 5d6e41de..ef97d532 100644 --- a/src/renderer/pages/index.ts +++ b/src/renderer/pages/index.ts @@ -3,3 +3,4 @@ export * from './ProjectsList'; export * from './UnitsList'; export * from './Audit'; export * from './Glossary'; +export * from './MyOrganization'; diff --git a/src/renderer/routes/AppNavigator.tsx b/src/renderer/routes/AppNavigator.tsx index 0ec2c39d..cc530b00 100644 --- a/src/renderer/routes/AppNavigator.tsx +++ b/src/renderer/routes/AppNavigator.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import { - BrowserRouter as Router, - Routes, - Route, - Navigate, - redirect, -} from 'react-router-dom'; +import { BrowserRouter as Router, Navigate, redirect, Route, Routes } from 'react-router-dom'; import ROUTES from '@/routes/route-constants'; import * as Pages from '@/pages'; import { Template } from '@/components'; @@ -25,6 +19,7 @@ const AppNavigator: React.FC = () => { } /> } /> } /> + } /> } /> diff --git a/src/renderer/routes/route-constants.ts b/src/renderer/routes/route-constants.ts index e8877e5c..6986747d 100644 --- a/src/renderer/routes/route-constants.ts +++ b/src/renderer/routes/route-constants.ts @@ -3,4 +3,5 @@ export default { UNITS_LIST: '/units', AUDIT: '/audit', GLOSSARY: '/glossary', -}; \ No newline at end of file + MY_ORGANIZATION: '/my-organization', +}; diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json index 664889f5..75698922 100644 --- a/src/renderer/translations/tokens/en-US.json +++ b/src/renderer/translations/tokens/en-US.json @@ -40,10 +40,20 @@ "glossary": "Glossary", "term": "Term", "description": "Description", + "my-registry": "My Registry", + "my-organization": "My Organization", + "create-organization": "Create Organization", + "creating-organization": "Creating Organization", "detailed-project-view": "Detailed Project View", "project": "Project", "issuance": "Issuance", "project-locations": "Project Locations", "estimations": "Estimations", - "warehouse": "Warehouse" + "warehouse": "Warehouse", + "cancel": "Cancel", + "organization-creation-is-already-pending": "Organization creation is already pending", + "add-details": "Add Details", + "import-by-id": "Import By ID", + "organization-orguid": "Organization OrgUID", + "organization-name": "Organization Name" } From 82e4eec428531e42523e1b6ffb32d7497e68471b Mon Sep 17 00:00:00 2001 From: William Wills Date: Fri, 5 Apr 2024 13:02:18 -0400 Subject: [PATCH 02/10] feat: added create organization modal prototype --- .../blocks/buttons/QueryRefetchButton.tsx | 18 ++- .../components/blocks/layout/LeftNav.tsx | 85 +++++++++-- .../components/blocks/layout/Template.tsx | 2 +- .../components/blocks/layout/index.ts | 2 +- .../blocks/modals/CreateOrganizationModal.tsx | 138 ++++++++++++++++++ .../components/blocks/modals/index.ts | 3 +- .../components/blocks/widgets/SearchBox.tsx | 17 ++- .../components/proxy/FloatingLabel.tsx | 7 + src/renderer/components/proxy/index.ts | 2 + src/renderer/pages/Audit/AuditPage.tsx | 91 ++++++------ src/renderer/pages/Error/ErrorBoundary.tsx | 12 +- .../pages/MyOrganization/MyOrganization.tsx | 12 ++ src/renderer/pages/MyOrganization/index.ts | 1 + src/renderer/pages/index.ts | 1 + src/renderer/routes/AppNavigator.tsx | 9 +- src/renderer/routes/route-constants.ts | 3 +- src/renderer/translations/tokens/en-US.json | 12 +- 17 files changed, 323 insertions(+), 92 deletions(-) create mode 100644 src/renderer/components/blocks/modals/CreateOrganizationModal.tsx create mode 100644 src/renderer/components/proxy/FloatingLabel.tsx create mode 100644 src/renderer/pages/MyOrganization/MyOrganization.tsx create mode 100644 src/renderer/pages/MyOrganization/index.ts diff --git a/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx b/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx index 4fd431fd..b9a316b3 100644 --- a/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx +++ b/src/renderer/components/blocks/buttons/QueryRefetchButton.tsx @@ -1,19 +1,21 @@ -import React from "react"; -import {Button} from "@/components"; -import {FormattedMessage} from "react-intl"; +import React from 'react'; +import { Button } from '@/components'; +import { FormattedMessage } from 'react-intl'; interface QueryRefetchButtonProps { onRefetch: () => void; } -const QueryRefetchButton: React.FC = ({onRefetch}) => { +const QueryRefetchButton: React.FC = ({ onRefetch }) => { return ( ); -} +}; -export {QueryRefetchButton}; +export { QueryRefetchButton }; diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx index 476b7533..c7fe2b2a 100644 --- a/src/renderer/components/blocks/layout/LeftNav.tsx +++ b/src/renderer/components/blocks/layout/LeftNav.tsx @@ -1,17 +1,46 @@ -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { IoMenu } from 'react-icons/io5'; import { FormattedMessage } from 'react-intl'; -import {Sidebar, WarehouseIcon} from '@/components'; +import { Card, CreateOrganizationModal, Sidebar, Spinner, WarehouseIcon } from '@/components'; import ROUTES from '@/routes/route-constants'; -import {Card} from "@/components"; +import { MdListAlt } from 'react-icons/md'; +import { useGetOrganizationsListQuery } from '@/api'; +import { Organization } from '@/schemas/Organization.schema'; +import { useUrlHash } from '@/hooks'; const LeftNav = () => { const navigate = useNavigate(); const location = useLocation(); const [isOpen, setIsOpen] = useState(false); + const [myOrganization, setMyOrganization] = useState(undefined); + const [orgCreationPending, setOrgCreationPending] = useState(false); + + const [createOrgModalActive, setCreateOrgModalActive] = useUrlHash('create-organization'); + const getOrgRtkQueryOptions = myOrganization || createOrgModalActive ? {} : { pollingInterval: 10000 }; + const { data: organizationsListData, isLoading: organizationsListLoading } = useGetOrganizationsListQuery( + null, + getOrgRtkQueryOptions, + ); + + //console.log('left nav re-render'); + + useEffect(() => { + setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); + }, [organizationsListData]); + + useEffect(() => { + setOrgCreationPending(!myOrganization?.orgUid || myOrganization?.orgUid === 'pending'); + }, [myOrganization]); const isActive = useCallback((path: string) => location.pathname === path, [location]); + const handleClickMyOrganization = useCallback(() => { + if (myOrganization && !orgCreationPending) { + navigate(ROUTES.MY_ORGANIZATION); + } else { + setCreateOrgModalActive(true); + } + }, [myOrganization, navigate, orgCreationPending, setCreateOrgModalActive]); const toggleDropdown = () => setIsOpen(!isOpen); @@ -67,16 +96,16 @@ const LeftNav = () => { {/* Original Desktop LeftNav Layout */}
- -
- -
- -
-
- + +
+ +
+ +
+
+ { > - {/* Add more Sidebar.Item as needed */} + + + +
+ +
+ +
+
+ + + {myOrganization ? ( + <> + {orgCreationPending ? ( + <> + + {' ...'} + + + ) : ( + + )} + + ) : ( + + )} + + {createOrgModalActive && setCreateOrgModalActive(false)} />}
); diff --git a/src/renderer/components/blocks/layout/Template.tsx b/src/renderer/components/blocks/layout/Template.tsx index 329349e6..c596208c 100644 --- a/src/renderer/components/blocks/layout/Template.tsx +++ b/src/renderer/components/blocks/layout/Template.tsx @@ -1,7 +1,7 @@ import { ErrorBoundary } from '@/pages'; import { LeftNav } from './LeftNav'; import { Outlet } from 'react-router-dom'; -import { Header } from "@/components"; +import { Header } from '@/components'; const Template = () => { return ( diff --git a/src/renderer/components/blocks/layout/index.ts b/src/renderer/components/blocks/layout/index.ts index 9cf0fac4..e70c9e10 100644 --- a/src/renderer/components/blocks/layout/index.ts +++ b/src/renderer/components/blocks/layout/index.ts @@ -1,3 +1,3 @@ export * from './LeftNav'; export * from './Template'; -export * from './PageCounter'; \ No newline at end of file +export * from './PageCounter'; diff --git a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx new file mode 100644 index 00000000..40e2900e --- /dev/null +++ b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx @@ -0,0 +1,138 @@ +import React, { useState } from 'react'; +import { Button, Card, FloatingLabel, Modal, Spinner, Tabs } from '@/components'; +import { FormattedMessage, IntlShape, useIntl } from 'react-intl'; + +interface CreateOrganizationModalProps { + onClose: () => void; // onClose prop for closing the modal +} + +const CreateOrganizationModal: React.FC = ({ onClose }: CreateOrganizationModalProps) => { + const intl: IntlShape = useIntl(); + const [orgCreationPending, setOrgCreationPending] = useState(false); + + const CreateOrgLayoutBody: React.FC = () => { + const [orgName, setOrgName] = useState(''); + const [orgNameChanged, setOrgNameChanged] = useState(true); + + const handleOrgUidChanged = (event: React.ChangeEvent) => { + setOrgNameChanged(true); + setOrgName(event.target.value); + }; + + const accept = async () => { + setOrgNameChanged(false); + + if (!orgName) { + return; + } + + onClose(); + setOrgCreationPending(true); + }; + + return ( + <> +
+ {!orgNameChanged && !orgName &&

todo error

} + +
+ {/* Variation of Modal.Footer */} +
+ + +
+ + ); + }; + + const ImportByOrgUidLayoutBody: React.FC = () => { + const [orgUid, setOrgUid] = useState(''); + const [orgUidChanged, setOrgUidChanged] = useState(true); + + const handleOrgUidChanged = (event: React.ChangeEvent) => { + setOrgUidChanged(true); + setOrgUid(event.target.value); + }; + + const accept = async () => { + setOrgUidChanged(false); + + if (!orgUid) { + return; + } + + onClose(); + setOrgCreationPending(true); + }; + + return ( + <> +
+ {!orgUidChanged && !orgUid &&

todo error

} + +
+ {/* Variation of Modal.Footer */} +
+ + +
+ + ); + }; + + if (orgCreationPending) { + return ( + + + + + + +
+ + +
+ + + + ); + } + + return ( + + + + + + + }> + + + }> + + + + + + ); +}; + +export { CreateOrganizationModal }; diff --git a/src/renderer/components/blocks/modals/index.ts b/src/renderer/components/blocks/modals/index.ts index 64810459..1253a866 100644 --- a/src/renderer/components/blocks/modals/index.ts +++ b/src/renderer/components/blocks/modals/index.ts @@ -1 +1,2 @@ -export * from './ProjectModal'; \ No newline at end of file +export * from './ProjectModal'; +export * from './CreateOrganizationModal'; diff --git a/src/renderer/components/blocks/widgets/SearchBox.tsx b/src/renderer/components/blocks/widgets/SearchBox.tsx index 85774e72..458f04a1 100644 --- a/src/renderer/components/blocks/widgets/SearchBox.tsx +++ b/src/renderer/components/blocks/widgets/SearchBox.tsx @@ -1,15 +1,15 @@ import { TextInput } from '@/components'; -import { IoSearchSharp } from "react-icons/io5"; -import React from "react"; -import { useIntl } from "react-intl"; +import { IoSearchSharp } from 'react-icons/io5'; +import React from 'react'; +import { IntlShape, useIntl } from 'react-intl'; interface SearchBoxProps { - defaultValue: string, - onChange: (event: any) => void + defaultValue: string; + onChange: (event: any) => void; } const SearchBox: React.FC = ({ defaultValue, onChange }) => { - const intl = useIntl(); + const intl: IntlShape = useIntl(); return (
@@ -18,9 +18,10 @@ const SearchBox: React.FC = ({ defaultValue, onChange }) => { icon={IoSearchSharp} defaultValue={defaultValue || ''} onChange={onChange} - placeholder={intl.formatMessage({id: "search"})} /> + placeholder={intl.formatMessage({ id: 'search' })} + />
); -} +}; export { SearchBox }; diff --git a/src/renderer/components/proxy/FloatingLabel.tsx b/src/renderer/components/proxy/FloatingLabel.tsx new file mode 100644 index 00000000..dd468bad --- /dev/null +++ b/src/renderer/components/proxy/FloatingLabel.tsx @@ -0,0 +1,7 @@ +import { FloatingLabel as FlowbiteFloatingLabel, FloatingLabelProps } from 'flowbite-react'; + +function FloatingLabel({ children, ...props }: FloatingLabelProps) { + return {children}; +} + +export { FloatingLabel }; diff --git a/src/renderer/components/proxy/index.ts b/src/renderer/components/proxy/index.ts index d1a55a7d..22afbee9 100644 --- a/src/renderer/components/proxy/index.ts +++ b/src/renderer/components/proxy/index.ts @@ -8,6 +8,8 @@ export * from './Tooltip'; export * from './Modal'; export * from './Tabs'; export * from './Card'; +export * from './FloatingLabel'; +export * from './Toast'; export * from './Toast'; export * from './HelperText'; export * from './Label'; diff --git a/src/renderer/pages/Audit/AuditPage.tsx b/src/renderer/pages/Audit/AuditPage.tsx index 1d8e62ab..e679a4e6 100644 --- a/src/renderer/pages/Audit/AuditPage.tsx +++ b/src/renderer/pages/Audit/AuditPage.tsx @@ -1,16 +1,16 @@ import React, { useCallback } from 'react'; import { useGetAuditQuery } from '@/api'; import { useQueryParamState } from '@/hooks'; -import {debounce, DebouncedFunc} from 'lodash'; +import { debounce, DebouncedFunc } from 'lodash'; import { - OrganizationSelector, - IndeterminateProgressOverlay, - SkeletonTable, AuditsTable, + IndeterminateProgressOverlay, + OrganizationSelector, SearchBox, - SyncIndicator + SkeletonTable, + SyncIndicator, } from '@/components'; -import {FormattedMessage} from "react-intl"; +import { FormattedMessage } from 'react-intl'; const AuditPage: React.FC = () => { const [currentPage, setCurrentPage] = useQueryParamState('page', '1'); @@ -23,7 +23,7 @@ const AuditPage: React.FC = () => { isLoading: auditLoading, isFetching: auditFetching, error: auditError, - } = useGetAuditQuery({ page: Number(currentPage), orgUid, search, order }, {skip: !orgUid}); + } = useGetAuditQuery({ page: Number(currentPage), orgUid, search, order }, { skip: !orgUid }); const handlePageChange: DebouncedFunc = useCallback( debounce((page) => setCurrentPage(page), 800), @@ -47,72 +47,71 @@ const AuditPage: React.FC = () => { const handleSetOrder = useCallback(() => { const currentDirection = order; - // Cycle through 'ASC', 'DESC', and no order ('') - switch (currentDirection) { - case 'ASC': - setOrder(`DESC`); - break; - case 'DESC': - setOrder(''); - break; - default: - setOrder(`ASC`); - break; - } - + // Cycle through 'ASC', 'DESC', and no order ('') + switch (currentDirection) { + case 'ASC': + setOrder(`DESC`); + break; + case 'DESC': + setOrder(''); + break; + default: + setOrder(`ASC`); + break; + } }, [order, setOrder]); - if (!orgUid){ + if (!orgUid) { return ( <>
- +
- +
); } if (auditLoading) { - return ; + return ; } if (auditError) { - return ; + return ; } if (!auditData) { - return ; + return ; } return ( <> - {auditFetching && } + {auditFetching && }
- - + +
- <> - {auditLoading ? ( - - ) : ( - - )} - + <> + {auditLoading ? ( + + ) : ( + + )} + ); }; -export {AuditPage}; +export { AuditPage }; diff --git a/src/renderer/pages/Error/ErrorBoundary.tsx b/src/renderer/pages/Error/ErrorBoundary.tsx index 57cdba97..5ae4bf45 100644 --- a/src/renderer/pages/Error/ErrorBoundary.tsx +++ b/src/renderer/pages/Error/ErrorBoundary.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Modal} from "flowbite-react"; -import {FormattedMessage} from "react-intl"; +import { Modal } from '@/components'; +import { FormattedMessage } from 'react-intl'; class ErrorBoundary extends React.Component { constructor(props: any) { @@ -16,7 +16,7 @@ class ErrorBoundary extends React.Component { render() { const { hasError } = this.state as any; const { children } = this.props as any; - + if (!hasError) { return children; } @@ -33,11 +33,11 @@ class ErrorBoundary extends React.Component { > - +

- . + .

@@ -46,4 +46,4 @@ class ErrorBoundary extends React.Component { } } -export { ErrorBoundary }; \ No newline at end of file +export { ErrorBoundary }; diff --git a/src/renderer/pages/MyOrganization/MyOrganization.tsx b/src/renderer/pages/MyOrganization/MyOrganization.tsx new file mode 100644 index 00000000..b335064e --- /dev/null +++ b/src/renderer/pages/MyOrganization/MyOrganization.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +interface MyOrganizationProps {} + +const MyOrganization: React.FC = () => { + return ( +
+

this is the organization page

+
+ ); +}; +export { MyOrganization }; diff --git a/src/renderer/pages/MyOrganization/index.ts b/src/renderer/pages/MyOrganization/index.ts new file mode 100644 index 00000000..5e71c440 --- /dev/null +++ b/src/renderer/pages/MyOrganization/index.ts @@ -0,0 +1 @@ +export * from './MyOrganization'; diff --git a/src/renderer/pages/index.ts b/src/renderer/pages/index.ts index 5d6e41de..ef97d532 100644 --- a/src/renderer/pages/index.ts +++ b/src/renderer/pages/index.ts @@ -3,3 +3,4 @@ export * from './ProjectsList'; export * from './UnitsList'; export * from './Audit'; export * from './Glossary'; +export * from './MyOrganization'; diff --git a/src/renderer/routes/AppNavigator.tsx b/src/renderer/routes/AppNavigator.tsx index 0ec2c39d..cc530b00 100644 --- a/src/renderer/routes/AppNavigator.tsx +++ b/src/renderer/routes/AppNavigator.tsx @@ -1,11 +1,5 @@ import React from 'react'; -import { - BrowserRouter as Router, - Routes, - Route, - Navigate, - redirect, -} from 'react-router-dom'; +import { BrowserRouter as Router, Navigate, redirect, Route, Routes } from 'react-router-dom'; import ROUTES from '@/routes/route-constants'; import * as Pages from '@/pages'; import { Template } from '@/components'; @@ -25,6 +19,7 @@ const AppNavigator: React.FC = () => { } /> } /> } /> + } /> } /> diff --git a/src/renderer/routes/route-constants.ts b/src/renderer/routes/route-constants.ts index e8877e5c..6986747d 100644 --- a/src/renderer/routes/route-constants.ts +++ b/src/renderer/routes/route-constants.ts @@ -3,4 +3,5 @@ export default { UNITS_LIST: '/units', AUDIT: '/audit', GLOSSARY: '/glossary', -}; \ No newline at end of file + MY_ORGANIZATION: '/my-organization', +}; diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json index 664889f5..75698922 100644 --- a/src/renderer/translations/tokens/en-US.json +++ b/src/renderer/translations/tokens/en-US.json @@ -40,10 +40,20 @@ "glossary": "Glossary", "term": "Term", "description": "Description", + "my-registry": "My Registry", + "my-organization": "My Organization", + "create-organization": "Create Organization", + "creating-organization": "Creating Organization", "detailed-project-view": "Detailed Project View", "project": "Project", "issuance": "Issuance", "project-locations": "Project Locations", "estimations": "Estimations", - "warehouse": "Warehouse" + "warehouse": "Warehouse", + "cancel": "Cancel", + "organization-creation-is-already-pending": "Organization creation is already pending", + "add-details": "Add Details", + "import-by-id": "Import By ID", + "organization-orguid": "Organization OrgUID", + "organization-name": "Organization Name" } From 1bd937c13f74066fc8c2020420df56f249568611 Mon Sep 17 00:00:00 2001 From: William Wills Date: Mon, 8 Apr 2024 21:01:09 -0400 Subject: [PATCH 03/10] feat: complete formik forms feat: modal design complete --- .../v1/organizations/organizations.api.ts | 47 +++++-- .../blocks/forms/CreateOrganizationForm.tsx | 55 ++++++++ .../blocks/forms/ImportOrganizationForm.tsx | 57 ++++++++ src/renderer/components/blocks/forms/index.ts | 1 + src/renderer/components/blocks/index.ts | 3 +- .../components/blocks/layout/LeftNav.tsx | 11 +- .../blocks/modals/CreateOrganizationModal.tsx | 131 ++++++------------ src/renderer/components/form/_example.txt | 18 +-- src/renderer/translations/tokens/en-US.json | 5 +- 9 files changed, 205 insertions(+), 123 deletions(-) create mode 100644 src/renderer/components/blocks/forms/CreateOrganizationForm.tsx create mode 100644 src/renderer/components/blocks/forms/ImportOrganizationForm.tsx create mode 100644 src/renderer/components/blocks/forms/index.ts diff --git a/src/renderer/api/cadt/v1/organizations/organizations.api.ts b/src/renderer/api/cadt/v1/organizations/organizations.api.ts index b02ffb6b..a3800555 100644 --- a/src/renderer/api/cadt/v1/organizations/organizations.api.ts +++ b/src/renderer/api/cadt/v1/organizations/organizations.api.ts @@ -1,10 +1,15 @@ -import {cadtApi, organizationsTag} from "../"; +import { cadtApi, organizationsTag } from '../'; // @ts-ignore -import {BaseQueryResult} from "@reduxjs/toolkit/dist/query/baseQueryTypes"; -import {Organization} from "@/schemas/Organization.schema"; +import { BaseQueryResult } from '@reduxjs/toolkit/dist/query/baseQueryTypes'; +import { Organization } from '@/schemas/Organization.schema'; interface GetOrgnaizationsMapResponse { - [index: string]: Organization + [index: string]: Organization; +} + +interface CreateOrganizationResponse { + message: string; + orgId: string; } const organizationsApi = cadtApi.injectEndpoints({ @@ -15,9 +20,9 @@ const organizationsApi = cadtApi.injectEndpoints({ method: 'GET', }), providesTags: [organizationsTag], - transformResponse(baseQueryReturnValue: BaseQueryResult): Organization[]{ + transformResponse(baseQueryReturnValue: BaseQueryResult): Organization[] { return Object.values(baseQueryReturnValue); - } + }, }), getOrganizationsMap: builder.query({ @@ -26,12 +31,32 @@ const organizationsApi = cadtApi.injectEndpoints({ method: 'GET', }), providesTags: [organizationsTag], - }) - }) -}); + }), + + createOrganization: builder.mutation({ + query: (orgName: string) => { + return { + url: `/v1/organizations`, + method: 'POST', + body: { name: orgName }, + }; + }, + invalidatesTags: [organizationsTag], + }), + importOrganization: builder.mutation({ + query: () => ({ + url: `/v1/organizations`, + method: 'PUT', + }), + invalidatesTags: [organizationsTag], + }), + }), +}); export const { useGetOrganizationsListQuery, - useGetOrganizationsMapQuery -} = organizationsApi; \ No newline at end of file + useGetOrganizationsMapQuery, + useCreateOrganizationMutation, + useImportOrganizationMutation, +} = organizationsApi; diff --git a/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx b/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx new file mode 100644 index 00000000..bd1da354 --- /dev/null +++ b/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx @@ -0,0 +1,55 @@ +import React, { useCallback } from 'react'; +import { ErrorMessage, Field, Form, Formik } from 'formik'; +import * as yup from 'yup'; +import { Button, Spinner } from 'flowbite-react'; +import { IntlShape, useIntl } from 'react-intl'; +import { FloatingLabel } from '@/components'; + +const validationSchema = yup.object({ + name: yup.string().required('Name is required'), +}); + +interface FormProps { + onSubmit: (orgName: string) => Promise; +} + +const CreateOrganizationForm: React.FC = ({ onSubmit }) => { + const intl: IntlShape = useIntl(); + + const handleSubmit = useCallback( + async (values: { name: string }, { setSubmitting }) => { + await onSubmit(values.name); + setSubmitting(false); + }, + [onSubmit], + ); // Include onSuccess in the dependencies array + + return ( + + {({ errors, touched, isSubmitting }) => ( +
+
+ + {({ field }) => ( + + )} + + {touched.name && } +
+ +
+ )} + + ); +}; + +export { CreateOrganizationForm }; diff --git a/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx b/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx new file mode 100644 index 00000000..c01e837d --- /dev/null +++ b/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx @@ -0,0 +1,57 @@ +import React, { useCallback } from 'react'; +import { ErrorMessage, Field, Form, Formik } from 'formik'; +import * as yup from 'yup'; +import { Button, Spinner } from 'flowbite-react'; +import { IntlShape, useIntl } from 'react-intl'; +import { FloatingLabel } from '@/components'; + +const validationSchema = yup.object({ + orgUid: yup.string().length(64).required('OrgUid is required'), +}); + +interface FormProps { + onSubmit: (orgUid: string) => Promise; +} + +const ImportOrganizationForm: React.FC = ({ onSubmit }) => { + const intl: IntlShape = useIntl(); + + const handleSubmit = useCallback( + async (values: { orgUid: string }, { setSubmitting }) => { + await onSubmit(values.orgUid); + setSubmitting(false); + }, + [onSubmit], + ); // Include onSuccess in the dependencies array + + return ( + <> + + {({ errors, touched, isSubmitting }) => ( +
+
+ + {({ field }) => ( + + )} + + {touched.orgUid && } +
+ +
+ )} + + + ); +}; + +export { ImportOrganizationForm }; diff --git a/src/renderer/components/blocks/forms/index.ts b/src/renderer/components/blocks/forms/index.ts new file mode 100644 index 00000000..a97fc3a1 --- /dev/null +++ b/src/renderer/components/blocks/forms/index.ts @@ -0,0 +1 @@ +export * from './CreateOrganizationForm'; diff --git a/src/renderer/components/blocks/index.ts b/src/renderer/components/blocks/index.ts index f8501a4b..6395aebc 100644 --- a/src/renderer/components/blocks/index.ts +++ b/src/renderer/components/blocks/index.ts @@ -2,4 +2,5 @@ export * from './layout'; export * from './buttons'; export * from './modals'; export * from './tables'; -export * from './widgets'; \ No newline at end of file +export * from './widgets'; +export * from './forms'; diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx index c7fe2b2a..38dc9143 100644 --- a/src/renderer/components/blocks/layout/LeftNav.tsx +++ b/src/renderer/components/blocks/layout/LeftNav.tsx @@ -23,14 +23,12 @@ const LeftNav = () => { getOrgRtkQueryOptions, ); - //console.log('left nav re-render'); - useEffect(() => { setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); }, [organizationsListData]); useEffect(() => { - setOrgCreationPending(!myOrganization?.orgUid || myOrganization?.orgUid === 'pending'); + setOrgCreationPending(!myOrganization?.orgUid && myOrganization?.orgUid === 'pending'); }, [myOrganization]); const isActive = useCallback((path: string) => location.pathname === path, [location]); @@ -169,7 +167,12 @@ const LeftNav = () => { - {createOrgModalActive && setCreateOrgModalActive(false)} />} + {createOrgModalActive && ( + setCreateOrgModalActive(false)} + /> + )} ); diff --git a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx index 40e2900e..325fa48c 100644 --- a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx +++ b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx @@ -1,103 +1,47 @@ -import React, { useState } from 'react'; -import { Button, Card, FloatingLabel, Modal, Spinner, Tabs } from '@/components'; -import { FormattedMessage, IntlShape, useIntl } from 'react-intl'; +import { Card, CreateOrganizationForm, Modal, Spinner, Tabs } from '@/components'; +import { FormattedMessage } from 'react-intl'; +import { useCreateOrganizationMutation, useImportOrganizationMutation } from '@/api'; +import { ImportOrganizationForm } from '@/components/blocks/forms/ImportOrganizationForm'; +import React, { useEffect, useState } from 'react'; +import { Alert } from 'flowbite-react'; +import { HiInformationCircle } from 'react-icons/hi'; interface CreateOrganizationModalProps { + orgCreationPending: boolean; onClose: () => void; // onClose prop for closing the modal } -const CreateOrganizationModal: React.FC = ({ onClose }: CreateOrganizationModalProps) => { - const intl: IntlShape = useIntl(); - const [orgCreationPending, setOrgCreationPending] = useState(false); +const CreateOrganizationModal: React.FC = ({ + orgCreationPending, + onClose, +}: CreateOrganizationModalProps) => { + const [showCreateOrgError, setShowCreateOrgError] = useState(false); - const CreateOrgLayoutBody: React.FC = () => { - const [orgName, setOrgName] = useState(''); - const [orgNameChanged, setOrgNameChanged] = useState(true); - - const handleOrgUidChanged = (event: React.ChangeEvent) => { - setOrgNameChanged(true); - setOrgName(event.target.value); - }; - - const accept = async () => { - setOrgNameChanged(false); - - if (!orgName) { - return; - } + const [triggerCreateOrganization, { error: createOrgError }] = useCreateOrganizationMutation(); + const [triggerImportOrganization, { error: importOrgError }] = useImportOrganizationMutation(); + const handleSubmitCreateOrg = async (orgName: string) => { + const createOrgResult: any = await triggerCreateOrganization(orgName); + if (createOrgResult?.data.orgId) { onClose(); - setOrgCreationPending(true); - }; - - return ( - <> -
- {!orgNameChanged && !orgName &&

todo error

} - -
- {/* Variation of Modal.Footer */} -
- - -
- - ); + } else { + setShowCreateOrgError(true); + } }; - const ImportByOrgUidLayoutBody: React.FC = () => { - const [orgUid, setOrgUid] = useState(''); - const [orgUidChanged, setOrgUidChanged] = useState(true); - - const handleOrgUidChanged = (event: React.ChangeEvent) => { - setOrgUidChanged(true); - setOrgUid(event.target.value); - }; - - const accept = async () => { - setOrgUidChanged(false); - - if (!orgUid) { - return; - } - + const handleSubmitImportOrg = async (orgName: string) => { + const createOrgResult: any = await triggerImportOrganization({ orgUid: orgName }); + if (createOrgResult?.data.orgId) { onClose(); - setOrgCreationPending(true); - }; - - return ( - <> -
- {!orgUidChanged && !orgUid &&

todo error

} - -
- {/* Variation of Modal.Footer */} -
- - -
- - ); + } else { + setShowCreateOrgError(true); + } }; + useEffect(() => { + setShowCreateOrgError(Boolean(createOrgError || importOrgError)); + }, [createOrgError, importOrgError]); + if (orgCreationPending) { return ( @@ -122,12 +66,21 @@ const CreateOrganizationModal: React.FC = ({ onClo + {showCreateOrgError && ( + + + ! + {' '} + + + )} + }> - + }> - + diff --git a/src/renderer/components/form/_example.txt b/src/renderer/components/form/_example.txt index 743d9bfe..2703bcef 100644 --- a/src/renderer/components/form/_example.txt +++ b/src/renderer/components/form/_example.txt @@ -8,28 +8,12 @@ import AddressGroup from './_example.addressgroup.txt'; // Adjust import path import { useSubmitUserFormMutation } from './userService'; // Adjust import path // Define validation schemas for each tab -const userValidationSchema = Yup.object({ +const validationSchema = Yup.object({ firstName: Yup.string().max(15, 'Must be 15 characters or less').required('Required'), lastName: Yup.string().max(20, 'Must be 20 characters or less').required('Required'), email: Yup.string().email('Invalid email address').required('Required'), }); -const addressValidationSchema = Yup.array() - .of( - Yup.object({ - street: Yup.string().required('Required'), - city: Yup.string().required('Required'), - zipCode: Yup.string().required('Required'), - }), - ) - .min(1, 'At least one address is required'); - -// Combine the validation schemas for final form submission validation -const validationSchema = Yup.object({ - ...userValidationSchema.fields, - addresses: addressValidationSchema, -}); - // @ts-ignore const UserForm: React.FC = () => { const [submitUserForm, { isLoading }] = useSubmitUserFormMutation(); diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json index 75698922..fda4248a 100644 --- a/src/renderer/translations/tokens/en-US.json +++ b/src/renderer/translations/tokens/en-US.json @@ -55,5 +55,8 @@ "add-details": "Add Details", "import-by-id": "Import By ID", "organization-orguid": "Organization OrgUID", - "organization-name": "Organization Name" + "organization-name": "Organization Name", + "required": "Required", + "error": "Error", + "unable-to-create-organization": "Unable to create organization" } From 1bfbd19b04c5a35ac63d5d831acb74a1df4e7322 Mon Sep 17 00:00:00 2001 From: William Wills Date: Tue, 9 Apr 2024 10:33:05 -0400 Subject: [PATCH 04/10] fix: create org rtkQuery API endpoint fix: org creation pending behavior --- .../v1/organizations/organizations.api.ts | 13 ++++++++---- .../components/blocks/layout/LeftNav.tsx | 13 ++++++------ .../blocks/modals/CreateOrganizationModal.tsx | 20 ++++++++++++++----- src/renderer/translations/tokens/en-US.json | 4 +++- 4 files changed, 33 insertions(+), 17 deletions(-) diff --git a/src/renderer/api/cadt/v1/organizations/organizations.api.ts b/src/renderer/api/cadt/v1/organizations/organizations.api.ts index a3800555..fa4e1f8a 100644 --- a/src/renderer/api/cadt/v1/organizations/organizations.api.ts +++ b/src/renderer/api/cadt/v1/organizations/organizations.api.ts @@ -35,19 +35,24 @@ const organizationsApi = cadtApi.injectEndpoints({ createOrganization: builder.mutation({ query: (orgName: string) => { + const formData = new FormData(); + formData.append('name', orgName); + return { - url: `/v1/organizations`, + url: `/v1/organizations/create`, method: 'POST', - body: { name: orgName }, + body: formData, }; }, invalidatesTags: [organizationsTag], }), - importOrganization: builder.mutation({ - query: () => ({ + importOrganization: builder.mutation({ + query: (orgUid: string) => ({ url: `/v1/organizations`, method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: { orgId: orgUid }, }), invalidatesTags: [organizationsTag], }), diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx index 38dc9143..517cfcf4 100644 --- a/src/renderer/components/blocks/layout/LeftNav.tsx +++ b/src/renderer/components/blocks/layout/LeftNav.tsx @@ -23,13 +23,13 @@ const LeftNav = () => { getOrgRtkQueryOptions, ); - useEffect(() => { - setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); - }, [organizationsListData]); + console.log(organizationsListData); + console.log('my org', myOrganization); useEffect(() => { - setOrgCreationPending(!myOrganization?.orgUid && myOrganization?.orgUid === 'pending'); - }, [myOrganization]); + setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); + setOrgCreationPending(myOrganization?.orgUid === 'PENDING'); + }, [myOrganization?.orgUid, organizationsListData]); const isActive = useCallback((path: string) => location.pathname === path, [location]); const handleClickMyOrganization = useCallback(() => { @@ -153,8 +153,7 @@ const LeftNav = () => { {orgCreationPending ? ( <> - {' ...'} - + ) : ( diff --git a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx index 325fa48c..aea77026 100644 --- a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx +++ b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx @@ -22,7 +22,7 @@ const CreateOrganizationModal: React.FC = ({ const handleSubmitCreateOrg = async (orgName: string) => { const createOrgResult: any = await triggerCreateOrganization(orgName); - if (createOrgResult?.data.orgId) { + if (createOrgResult?.data.success) { onClose(); } else { setShowCreateOrgError(true); @@ -30,8 +30,8 @@ const CreateOrganizationModal: React.FC = ({ }; const handleSubmitImportOrg = async (orgName: string) => { - const createOrgResult: any = await triggerImportOrganization({ orgUid: orgName }); - if (createOrgResult?.data.orgId) { + const createOrgResult: any = await triggerImportOrganization(orgName); + if (createOrgResult?.data.success) { onClose(); } else { setShowCreateOrgError(true); @@ -61,7 +61,7 @@ const CreateOrganizationModal: React.FC = ({ } return ( - + @@ -77,9 +77,19 @@ const CreateOrganizationModal: React.FC = ({ }> - +
+ + + + +
}> +
+ + + +
diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json index fda4248a..733f177e 100644 --- a/src/renderer/translations/tokens/en-US.json +++ b/src/renderer/translations/tokens/en-US.json @@ -58,5 +58,7 @@ "organization-name": "Organization Name", "required": "Required", "error": "Error", - "unable-to-create-organization": "Unable to create organization" + "unable-to-create-organization": "Unable to create organization", + "use-this-tab-to-create-a-new-organization": "Use this tab to create a new organization", + "use-this-tab-to-import-an-existing-organization-into-CADT-from-datalayer": "Use this tab to import an existing organization into CADT from datalayer" } From 65c8e1c17510baa705513bc0facb4ea7829b1b38 Mon Sep 17 00:00:00 2001 From: William Wills Date: Tue, 9 Apr 2024 10:47:04 -0400 Subject: [PATCH 05/10] fix: import org rtkQuery API endpoint --- src/renderer/api/cadt/v1/organizations/organizations.api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/api/cadt/v1/organizations/organizations.api.ts b/src/renderer/api/cadt/v1/organizations/organizations.api.ts index fa4e1f8a..7241029a 100644 --- a/src/renderer/api/cadt/v1/organizations/organizations.api.ts +++ b/src/renderer/api/cadt/v1/organizations/organizations.api.ts @@ -52,7 +52,7 @@ const organizationsApi = cadtApi.injectEndpoints({ url: `/v1/organizations`, method: 'PUT', headers: { 'Content-Type': 'application/json' }, - body: { orgId: orgUid }, + body: { orgUid }, }), invalidatesTags: [organizationsTag], }), From 9e2a8c98c6a871fecabcfa20605ce326ff4f733b Mon Sep 17 00:00:00 2001 From: William Wills Date: Wed, 10 Apr 2024 10:16:49 -0400 Subject: [PATCH 06/10] feat: added wallet and organization data to the my organization page --- package-lock.json | 9 ++ package.json | 1 + .../blocks/forms/CreateOrganizationForm.tsx | 3 +- .../blocks/forms/ImportOrganizationForm.tsx | 3 +- .../components/blocks/layout/LeftNav.tsx | 3 - .../blocks/modals/CreateOrganizationModal.tsx | 10 +- .../tables/OrganizationSubscriptionsTable.tsx | 0 .../pages/MyOrganization/MyOrganization.tsx | 99 ++++++++++++++++++- src/renderer/schemas/Organization.schema.ts | 4 +- src/renderer/translations/tokens/en-US.json | 14 ++- 10 files changed, 132 insertions(+), 14 deletions(-) create mode 100644 src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx diff --git a/package-lock.json b/package-lock.json index f42a769e..2fb10741 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "flowbite-typography": "^1.0.3", "formik": "^2.4.5", "lodash": "^4.17.21", + "qrcode.react": "^3.1.0", "react": "^18.2.0", "react-content-loader": "^7.0.0", "react-dom": "^18.2.0", @@ -8487,6 +8488,14 @@ "teleport": ">=0.2.0" } }, + "node_modules/qrcode.react": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz", + "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", diff --git a/package.json b/package.json index 789edbf0..e4c5cd7a 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "flowbite-typography": "^1.0.3", "formik": "^2.4.5", "lodash": "^4.17.21", + "qrcode.react": "^3.1.0", "react": "^18.2.0", "react-content-loader": "^7.0.0", "react-dom": "^18.2.0", diff --git a/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx b/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx index bd1da354..2a48e162 100644 --- a/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx +++ b/src/renderer/components/blocks/forms/CreateOrganizationForm.tsx @@ -1,9 +1,8 @@ import React, { useCallback } from 'react'; import { ErrorMessage, Field, Form, Formik } from 'formik'; import * as yup from 'yup'; -import { Button, Spinner } from 'flowbite-react'; +import { Button, FloatingLabel, Spinner } from '@/components'; import { IntlShape, useIntl } from 'react-intl'; -import { FloatingLabel } from '@/components'; const validationSchema = yup.object({ name: yup.string().required('Name is required'), diff --git a/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx b/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx index c01e837d..74383b83 100644 --- a/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx +++ b/src/renderer/components/blocks/forms/ImportOrganizationForm.tsx @@ -1,9 +1,8 @@ import React, { useCallback } from 'react'; import { ErrorMessage, Field, Form, Formik } from 'formik'; import * as yup from 'yup'; -import { Button, Spinner } from 'flowbite-react'; +import { Button, FloatingLabel, Spinner } from '@/components'; import { IntlShape, useIntl } from 'react-intl'; -import { FloatingLabel } from '@/components'; const validationSchema = yup.object({ orgUid: yup.string().length(64).required('OrgUid is required'), diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx index 517cfcf4..f416fa0d 100644 --- a/src/renderer/components/blocks/layout/LeftNav.tsx +++ b/src/renderer/components/blocks/layout/LeftNav.tsx @@ -23,9 +23,6 @@ const LeftNav = () => { getOrgRtkQueryOptions, ); - console.log(organizationsListData); - console.log('my org', myOrganization); - useEffect(() => { setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); setOrgCreationPending(myOrganization?.orgUid === 'PENDING'); diff --git a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx index aea77026..2192e365 100644 --- a/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx +++ b/src/renderer/components/blocks/modals/CreateOrganizationModal.tsx @@ -8,11 +8,13 @@ import { HiInformationCircle } from 'react-icons/hi'; interface CreateOrganizationModalProps { orgCreationPending: boolean; + orgListLoading: boolean; onClose: () => void; // onClose prop for closing the modal } const CreateOrganizationModal: React.FC = ({ orgCreationPending, + orgListLoading, onClose, }: CreateOrganizationModalProps) => { const [showCreateOrgError, setShowCreateOrgError] = useState(false); @@ -42,7 +44,7 @@ const CreateOrganizationModal: React.FC = ({ setShowCreateOrgError(Boolean(createOrgError || importOrgError)); }, [createOrgError, importOrgError]); - if (orgCreationPending) { + if (orgCreationPending || orgListLoading) { return ( @@ -51,7 +53,11 @@ const CreateOrganizationModal: React.FC = ({
- + {orgListLoading ? ( + + ) : ( + + )}
diff --git a/src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx b/src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/renderer/pages/MyOrganization/MyOrganization.tsx b/src/renderer/pages/MyOrganization/MyOrganization.tsx index b335064e..f57aec1c 100644 --- a/src/renderer/pages/MyOrganization/MyOrganization.tsx +++ b/src/renderer/pages/MyOrganization/MyOrganization.tsx @@ -1,11 +1,104 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; +import { Card, Spinner } from '@/components'; +import { Organization } from '@/schemas/Organization.schema'; +import { useGetOrganizationsListQuery } from '@/api'; +import { FormattedMessage } from 'react-intl'; +import QRCode from 'qrcode.react'; interface MyOrganizationProps {} const MyOrganization: React.FC = () => { + const { data: organizationsListData, isLoading: organizationsListLoading } = useGetOrganizationsListQuery(); + + const [myOrganization, setMyOrganization] = useState(undefined); + + useEffect(() => { + setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); + }, [myOrganization?.orgUid, organizationsListData]); + + if (!myOrganization || organizationsListLoading) { + return ( +
+ +
+ ); + } + return ( -
-

this is the organization page

+
+ +
+

+ +

+
+
+

+ +

+

{myOrganization.name}

+
+
+

+ +

+

{myOrganization.orgUid}

+
+ + +
+

+ +

+
+
+

+ +

+ {myOrganization?.synced ? ( +

+ ✓ +

+ ) : ( +

+ ☓ +

+ )} +
+
+

+ +

+

+ {myOrganization.balance} + {' XCH'} +

+
+
+

+ +

+

+ {myOrganization.xchAddress} +

+
+ + {myOrganization?.xchAddress && ( +
+

+ +

+ +
+ )} + + +
+

+ +

+
+
); }; diff --git a/src/renderer/schemas/Organization.schema.ts b/src/renderer/schemas/Organization.schema.ts index 35ffafd9..499d20bb 100644 --- a/src/renderer/schemas/Organization.schema.ts +++ b/src/renderer/schemas/Organization.schema.ts @@ -17,6 +17,8 @@ export interface Organization { metadata?: string; synced?: boolean; sync_remaining?: number; + balance?: number; + xchAddress?: string; createdAt?: Date; updatedAt?: Date; -} \ No newline at end of file +} diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json index 733f177e..9c39e6af 100644 --- a/src/renderer/translations/tokens/en-US.json +++ b/src/renderer/translations/tokens/en-US.json @@ -60,5 +60,17 @@ "error": "Error", "unable-to-create-organization": "Unable to create organization", "use-this-tab-to-create-a-new-organization": "Use this tab to create a new organization", - "use-this-tab-to-import-an-existing-organization-into-CADT-from-datalayer": "Use this tab to import an existing organization into CADT from datalayer" + "use-this-tab-to-import-an-existing-organization-into-CADT-from-datalayer": "Use this tab to import an existing organization into CADT from datalayer", + "organization": "Organization", + "name": "Name", + "wallet": "Wallet", + "orguid": "OrgUID", + "wallet-sync-status": "Wallet Sync Status", + "synced": "Synced", + "not-synced": "Not Synced", + "spendable-balance": "Spendable Balance", + "public-address": "Public Address", + "public-address-qr-code": "Public Address QR Code", + "organization-subscriptions": "Organization Subscriptions", + "organization-data-loading": "Organization Data Loading" } From 0ded449e631b418e5361a16ba69a220e2111ff39 Mon Sep 17 00:00:00 2001 From: William Wills Date: Wed, 10 Apr 2024 12:16:41 -0400 Subject: [PATCH 07/10] feat: skeleton for organization subscriptions table --- .../api/cadt/v1/governance/governance.api.ts | 9 +++- .../tables/OrganizationSubscriptionsTable.tsx | 46 +++++++++++++++++++ .../OrganizationSubscriptionsManager.tsx | 41 +++++++++++++++++ 3 files changed, 95 insertions(+), 1 deletion(-) create mode 100644 src/renderer/components/blocks/widgets/OrganizationSubscriptionsManager.tsx diff --git a/src/renderer/api/cadt/v1/governance/governance.api.ts b/src/renderer/api/cadt/v1/governance/governance.api.ts index 615e8556..3c107b75 100644 --- a/src/renderer/api/cadt/v1/governance/governance.api.ts +++ b/src/renderer/api/cadt/v1/governance/governance.api.ts @@ -35,7 +35,14 @@ const governanceApi = cadtApi.injectEndpoints({ }); }, }), + + getDefaultOrgList: builder.query<{ orgUid: string }[], void>({ + query: () => ({ + url: `/v1/governance/meta/orgList`, + method: 'GET', + }), + }), }), }); -export const { useGetGlossaryQuery } = governanceApi; +export const { useGetGlossaryQuery, useGetDefaultOrgListQuery } = governanceApi; diff --git a/src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx b/src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx index e69de29b..d40b7b34 100644 --- a/src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx +++ b/src/renderer/components/blocks/tables/OrganizationSubscriptionsTable.tsx @@ -0,0 +1,46 @@ +import React, { useMemo } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { DebouncedFunc } from 'lodash'; +import { DataTable } from '@/components'; + +interface TableProps { + data: any[]; + isLoading: boolean; + currentPage?: number; + onPageChange?: DebouncedFunc<(page: any) => void>; + setOrder?: (sort: string) => void; + order?: string; + totalPages?: number; + totalCount?: number; +} + +const OrganizationSubscriptionsTable: React.FC = ({ data, isLoading, setOrder, order }) => { + const columns = useMemo( + () => [ + { + title: , + key: 'currentRegistry', + }, + { + title: , + key: 'projectId', + }, + ], + [], + ); + + return ( +
+ +
+ ); +}; + +export { OrganizationSubscriptionsTable }; diff --git a/src/renderer/components/blocks/widgets/OrganizationSubscriptionsManager.tsx b/src/renderer/components/blocks/widgets/OrganizationSubscriptionsManager.tsx new file mode 100644 index 00000000..ada7935d --- /dev/null +++ b/src/renderer/components/blocks/widgets/OrganizationSubscriptionsManager.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { IndeterminateProgressOverlay, SkeletonTable, Spinner } from '@/components'; +import { FormattedMessage } from 'react-intl'; +import { useGetDefaultOrgListQuery } from '@/api/cadt/v1/governance'; +import { OrganizationSubscriptionsTable } from '@/components/blocks/tables/OrganizationSubscriptionsTable'; + +const OrganizationSubscriptionsManager: React.FC = () => { + const { + data: orgList, + isLoading: orgListLoading, + isFetching: orgListFetching, + error: orgListError, + } = useGetDefaultOrgListQuery(); + + if (orgListLoading) { + return ; + } + + if (orgListError) { + return ; + } + + if (!orgList) { + return ; + } + + return ( +
+ {orgListFetching && } + {orgListLoading ? ( +
+ +
+ ) : ( + + )} +
+ ); +}; + +export { OrganizationSubscriptionsManager }; From 05bd9c4b1641e20664d9dd867f6d0544adfb2def Mon Sep 17 00:00:00 2001 From: William Wills Date: Wed, 10 Apr 2024 12:29:49 -0400 Subject: [PATCH 08/10] fix: post merge compile errors --- src/renderer/components/blocks/forms/index.ts | 2 ++ src/renderer/components/blocks/forms/index.tsx | 1 - src/renderer/components/blocks/layout/LeftNav.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) delete mode 100644 src/renderer/components/blocks/forms/index.tsx diff --git a/src/renderer/components/blocks/forms/index.ts b/src/renderer/components/blocks/forms/index.ts index a97fc3a1..5ac11a71 100644 --- a/src/renderer/components/blocks/forms/index.ts +++ b/src/renderer/components/blocks/forms/index.ts @@ -1 +1,3 @@ export * from './CreateOrganizationForm'; +export * from './ConnectForm'; +export * from './ImportOrganizationForm'; diff --git a/src/renderer/components/blocks/forms/index.tsx b/src/renderer/components/blocks/forms/index.tsx deleted file mode 100644 index f3ba8255..00000000 --- a/src/renderer/components/blocks/forms/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './ConnectForm'; \ No newline at end of file diff --git a/src/renderer/components/blocks/layout/LeftNav.tsx b/src/renderer/components/blocks/layout/LeftNav.tsx index f416fa0d..45b397de 100644 --- a/src/renderer/components/blocks/layout/LeftNav.tsx +++ b/src/renderer/components/blocks/layout/LeftNav.tsx @@ -166,6 +166,7 @@ const LeftNav = () => { {createOrgModalActive && ( setCreateOrgModalActive(false)} /> )} From 3783fd5ce000f5e205cceef28bb6689a4817746f Mon Sep 17 00:00:00 2001 From: William Wills Date: Wed, 10 Apr 2024 16:05:56 -0400 Subject: [PATCH 09/10] feat: added the delete organization button feat: added edit organization option --- .../v1/organizations/organizations.api.ts | 28 +++++- .../components/blocks/forms/ConnectForm.tsx | 5 +- .../blocks/forms/EditOrganizationForm.tsx | 87 +++++++++++++++++++ src/renderer/components/blocks/forms/index.ts | 1 + .../pages/MyOrganization/MyOrganization.tsx | 62 ++++++++++--- src/renderer/translations/tokens/en-US.json | 4 +- 6 files changed, 172 insertions(+), 15 deletions(-) create mode 100644 src/renderer/components/blocks/forms/EditOrganizationForm.tsx diff --git a/src/renderer/api/cadt/v1/organizations/organizations.api.ts b/src/renderer/api/cadt/v1/organizations/organizations.api.ts index 7241029a..ee5f4ebb 100644 --- a/src/renderer/api/cadt/v1/organizations/organizations.api.ts +++ b/src/renderer/api/cadt/v1/organizations/organizations.api.ts @@ -35,7 +35,7 @@ const organizationsApi = cadtApi.injectEndpoints({ createOrganization: builder.mutation({ query: (orgName: string) => { - const formData = new FormData(); + const formData: FormData = new FormData(); formData.append('name', orgName); return { @@ -56,6 +56,30 @@ const organizationsApi = cadtApi.injectEndpoints({ }), invalidatesTags: [organizationsTag], }), + + deleteOrganization: builder.mutation({ + query: (orgUid: string) => ({ + url: `/v1/organizations`, + method: 'DELETE', + headers: { 'Content-Type': 'application/json' }, + body: { orgUid }, + }), + invalidatesTags: [organizationsTag], + }), + + editOrganization: builder.mutation({ + query: ({ orgUid, orgName }) => { + const formData: FormData = new FormData(); + formData.append('orgUid', orgUid); + formData.append('name', orgName); + + return { + url: `/v1/organizations/edit`, + method: 'PUT', + body: formData, + }; + }, + }), }), }); @@ -64,4 +88,6 @@ export const { useGetOrganizationsMapQuery, useCreateOrganizationMutation, useImportOrganizationMutation, + useDeleteOrganizationMutation, + useEditOrganizationMutation, } = organizationsApi; diff --git a/src/renderer/components/blocks/forms/ConnectForm.tsx b/src/renderer/components/blocks/forms/ConnectForm.tsx index 017a6a40..8804841b 100644 --- a/src/renderer/components/blocks/forms/ConnectForm.tsx +++ b/src/renderer/components/blocks/forms/ConnectForm.tsx @@ -2,9 +2,9 @@ import React, { useCallback } from 'react'; import { noop } from 'lodash'; import { ErrorMessage, Field, Form, Formik } from 'formik'; import * as yup from 'yup'; -import { FloatingLabel, HelperText, Spacer, FormButton } from '@/components'; +import { FloatingLabel, FormButton, HelperText, Spacer } from '@/components'; import { Alert } from 'flowbite-react'; -import { IntlShape, useIntl, FormattedMessage } from 'react-intl'; +import { FormattedMessage, IntlShape, useIntl } from 'react-intl'; const validationSchema = yup.object({ apiHost: yup @@ -87,7 +87,6 @@ const ConnectForm: React.FC = ({ onSubmit, hasServerError, onClearErr type="text" {...field} onChange={(event) => handleChange(event, field)} - ccccccrjflurktedcrhvrbtgldlgnjicvleikebbgnju /> )} diff --git a/src/renderer/components/blocks/forms/EditOrganizationForm.tsx b/src/renderer/components/blocks/forms/EditOrganizationForm.tsx new file mode 100644 index 00000000..c92896a3 --- /dev/null +++ b/src/renderer/components/blocks/forms/EditOrganizationForm.tsx @@ -0,0 +1,87 @@ +import React, { useCallback } from 'react'; +import { ErrorMessage, Field, Form, Formik } from 'formik'; +import * as yup from 'yup'; +import { Button, FormButton, TextInput } from '@/components'; +import { FormattedMessage } from 'react-intl'; +import { Organization } from '@/schemas/Organization.schema'; + +const validationSchema = yup.object({ + organizationName: yup.string().required('The organization name must be at least 3 characters').min(3), +}); + +interface FormProps { + myOrganization: Organization; + onSubmit: (organizationName: string) => Promise; + onCancel: () => void; +} + +const EditOrganizationForm: React.FC = ({ myOrganization, onSubmit, onCancel }: FormProps) => { + const handleSubmit = useCallback( + async (values: { organizationName: string }, { setSubmitting }) => { + await onSubmit(values.organizationName); + setSubmitting(false); + }, + [onSubmit], + ); + + const handleChange = useCallback((event, field) => { + field.onChange(event); // Call Formik's original onChange + }, []); + + return ( + + {({ errors, touched, isSubmitting }) => ( +
+
+ + {({ field }) => ( +
+
+

+ +

+
+ handleChange(event, field)} + /> +
+ )} + + {touched.organizationName && ( + + )} +
+

+ +

+

+ {myOrganization.orgUid} +

+
+
+
+ + + + +
+
+ )} + + ); +}; + +export { EditOrganizationForm }; diff --git a/src/renderer/components/blocks/forms/index.ts b/src/renderer/components/blocks/forms/index.ts index 5ac11a71..e3e0f4f7 100644 --- a/src/renderer/components/blocks/forms/index.ts +++ b/src/renderer/components/blocks/forms/index.ts @@ -1,3 +1,4 @@ export * from './CreateOrganizationForm'; export * from './ConnectForm'; export * from './ImportOrganizationForm'; +export * from './EditOrganizationForm'; diff --git a/src/renderer/pages/MyOrganization/MyOrganization.tsx b/src/renderer/pages/MyOrganization/MyOrganization.tsx index f57aec1c..7b5ff2ed 100644 --- a/src/renderer/pages/MyOrganization/MyOrganization.tsx +++ b/src/renderer/pages/MyOrganization/MyOrganization.tsx @@ -1,21 +1,38 @@ import React, { useEffect, useState } from 'react'; -import { Card, Spinner } from '@/components'; +import { Button, Card, EditOrganizationForm, Spinner } from '@/components'; import { Organization } from '@/schemas/Organization.schema'; -import { useGetOrganizationsListQuery } from '@/api'; +import { useDeleteOrganizationMutation, useEditOrganizationMutation, useGetOrganizationsListQuery } from '@/api'; import { FormattedMessage } from 'react-intl'; import QRCode from 'qrcode.react'; +import { FiEdit } from 'react-icons/fi'; interface MyOrganizationProps {} const MyOrganization: React.FC = () => { const { data: organizationsListData, isLoading: organizationsListLoading } = useGetOrganizationsListQuery(); + const [triggerDeleteOrganization] = useDeleteOrganizationMutation(); + const [triggerEditOrganization] = useEditOrganizationMutation(); const [myOrganization, setMyOrganization] = useState(undefined); + const [editOrganization, setEditOrganization] = useState(false); useEffect(() => { setMyOrganization(organizationsListData?.find((org: Organization) => org.isHome)); }, [myOrganization?.orgUid, organizationsListData]); + const handleSubmitEditOrganization = async (orgName: string) => { + if (myOrganization) { + await triggerEditOrganization({ orgName, orgUid: myOrganization?.orgUid }); + } + }; + + const handleDeleteOrganization = () => { + setEditOrganization(false); + if (myOrganization) { + triggerDeleteOrganization(myOrganization.orgUid); + } + }; + if (!myOrganization || organizationsListLoading) { return (
@@ -24,14 +41,9 @@ const MyOrganization: React.FC = () => { ); } - return ( -
- -
-

- -

-
+ const MyOrganizationInformation: React.FC = () => { + return ( + <>

@@ -44,6 +56,36 @@ const MyOrganization: React.FC = () => {

{myOrganization.orgUid}

+ + ); + }; + + return ( +
+ +
+

+ +

+ {!editOrganization ? ( + + ) : ( + + )} +
+ {editOrganization ? ( + setEditOrganization(false)} + /> + ) : ( + + )}
diff --git a/src/renderer/translations/tokens/en-US.json b/src/renderer/translations/tokens/en-US.json index b094f57e..0367016a 100644 --- a/src/renderer/translations/tokens/en-US.json +++ b/src/renderer/translations/tokens/en-US.json @@ -80,5 +80,7 @@ "server-not-found": "The requested server was not found or was not detected as a valid CADT server", "disconnect": "Disconnect", "submit": "Submit", - "connect-to-remote-server": "Connect to Remote Server" + "connect-to-remote-server": "Connect to Remote Server", + "save": "Save", + "delete-organization": "Delete Organization" } From c479a0f37778c9bf500c0cb4622082f4e56783d9 Mon Sep 17 00:00:00 2001 From: William Wills Date: Wed, 10 Apr 2024 16:07:51 -0400 Subject: [PATCH 10/10] chore: removed unneeded code --- src/renderer/pages/MyOrganization/MyOrganization.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/renderer/pages/MyOrganization/MyOrganization.tsx b/src/renderer/pages/MyOrganization/MyOrganization.tsx index 7b5ff2ed..da326253 100644 --- a/src/renderer/pages/MyOrganization/MyOrganization.tsx +++ b/src/renderer/pages/MyOrganization/MyOrganization.tsx @@ -134,13 +134,6 @@ const MyOrganization: React.FC = () => {
)} - -
-

- -

-
-
); };