From 707097e7918d9197d5ab830051b292a6d5003c40 Mon Sep 17 00:00:00 2001 From: xudaotutou <13435638964@163.com> Date: Tue, 5 Dec 2023 16:36:37 +0800 Subject: [PATCH] fix(template):fix deps, fix styles --- frontend/plugins/kubepanel/src/api/delete.ts | 1 - .../components/drawer/drawer-title.tsx | 4 +- frontend/pnpm-lock.yaml | 299 +++++++++++++----- frontend/providers/template/next.config.js | 3 +- frontend/providers/template/package.json | 7 +- .../template/src/components/YamlCode/hljs.ts | 115 ------- .../src/components/YamlCode/index.module.scss | 6 - .../src/components/YamlCode/index.tsx | 46 --- .../providers/template/src/constants/theme.ts | 3 +- .../src/pages/deploy/components/Yaml.tsx | 10 +- .../src/pages/develop/components/Editor.tsx | 48 +++ .../src/pages/develop/components/YamlList.tsx | 30 +- .../template/src/pages/develop/index.tsx | 82 +++-- 13 files changed, 341 insertions(+), 313 deletions(-) delete mode 100644 frontend/providers/template/src/components/YamlCode/hljs.ts delete mode 100644 frontend/providers/template/src/components/YamlCode/index.module.scss delete mode 100644 frontend/providers/template/src/components/YamlCode/index.tsx create mode 100644 frontend/providers/template/src/pages/develop/components/Editor.tsx diff --git a/frontend/plugins/kubepanel/src/api/delete.ts b/frontend/plugins/kubepanel/src/api/delete.ts index 60e215b2919..94f2347d4c6 100644 --- a/frontend/plugins/kubepanel/src/api/delete.ts +++ b/frontend/plugins/kubepanel/src/api/delete.ts @@ -2,6 +2,5 @@ import { Resources } from '@/constants/kube-object'; import { ApiResp } from '@/services/kubernet'; import { DELETE } from '@/services/request'; - export const deleteResource = (name: string, resource: Resources) => DELETE(`/api/delete?resource=${resource}&name=${name}`); diff --git a/frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer-title.tsx b/frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer-title.tsx index 41acffcbc65..2a2f24c8fb0 100644 --- a/frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer-title.tsx +++ b/frontend/plugins/kubepanel/src/pages/kubepanel/components/drawer/drawer-title.tsx @@ -3,7 +3,9 @@ interface Props { } const DrawerTitle = ({ children }: Props) => { - return
{children}
; + return ( +
{children}
+ ); }; export default DrawerTitle; diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 29fffb646b6..1c16884cb39 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -131,13 +131,13 @@ importers: version: 4.0.2 next: specifier: 13.3.0 - version: 13.3.0(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) + version: 13.3.0(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) next-i18next: specifier: ^13.3.0 version: 13.3.0(i18next@22.5.1)(next@13.3.0)(react-i18next@12.3.1)(react@18.2.0) next-pwa: specifier: ^5.6.0 - version: 5.6.0(@babel/core@7.23.3)(next@13.3.0)(webpack@5.89.0) + version: 5.6.0(@babel/core@7.23.5)(next@13.3.0)(webpack@5.89.0) nprogress: specifier: ^0.2.0 version: 0.2.0 @@ -1259,7 +1259,7 @@ importers: version: 4.17.21 next: specifier: 13.5.6 - version: 13.5.6(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.6(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0) next-i18next: specifier: ^13.3.0 version: 13.3.0(i18next@22.5.1)(next@13.5.6)(react-i18next@12.3.1)(react@18.2.0) @@ -1339,12 +1339,21 @@ importers: '@chakra-ui/system': specifier: ^2.6.1 version: 2.6.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0) + '@codemirror/commands': + specifier: ^6.3.2 + version: 6.3.2 '@codemirror/language': specifier: ^6.9.1 version: 6.9.3 '@codemirror/legacy-modes': specifier: ^6.3.3 version: 6.3.3 + '@codemirror/state': + specifier: ^6.3.2 + version: 6.3.2 + '@codemirror/view': + specifier: ^6.22.1 + version: 6.22.1 '@emotion/react': specifier: ^11.11.1 version: 11.11.1(@types/react@18.2.37)(react@18.2.0) @@ -1357,15 +1366,21 @@ importers: '@next/font': specifier: 13.1.6 version: 13.1.6 + '@replit/codemirror-vscode-keymap': + specifier: ^6.0.2 + version: 6.0.2(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.2)(@codemirror/language@6.9.3)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1) + '@sealos/ui': + specifier: workspace:^ + version: link:../../packages/ui '@tanstack/react-query': specifier: ^4.35.3 version: 4.36.1(react-dom@18.2.0)(react@18.2.0) - '@uiw/react-codemirror': - specifier: 4.21.20 - version: 4.21.20(@babel/runtime@7.23.4)(@codemirror/autocomplete@6.11.1)(@codemirror/language@6.9.3)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.3.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.22.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0) axios: specifier: ^1.5.1 version: 1.6.2 + codemirror: + specifier: ^6.0.1 + version: 6.0.1(@lezer/common@1.1.1) cron-parser: specifier: ^4.9.0 version: 4.9.0 @@ -2330,6 +2345,13 @@ packages: '@babel/highlight': 7.23.4 chalk: 2.4.2 + /@babel/code-frame@7.23.5: + resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/highlight': 7.23.4 + chalk: 2.4.2 + /@babel/compat-data@7.23.3: resolution: {integrity: sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ==} engines: {node: '>=6.9.0'} @@ -2356,6 +2378,29 @@ packages: transitivePeerDependencies: - supports-color + /@babel/core@7.23.5: + resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==} + engines: {node: '>=6.9.0'} + dependencies: + '@ampproject/remapping': 2.2.1 + '@babel/code-frame': 7.23.5 + '@babel/generator': 7.23.5 + '@babel/helper-compilation-targets': 7.22.15 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5) + '@babel/helpers': 7.23.5 + '@babel/parser': 7.23.5 + '@babel/template': 7.22.15 + '@babel/traverse': 7.23.5 + '@babel/types': 7.23.5 + convert-source-map: 2.0.0 + debug: 4.3.4 + gensync: 1.0.0-beta.2 + json5: 2.2.3 + semver: 6.3.1 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/generator@7.23.4: resolution: {integrity: sha512-esuS49Cga3HcThFNebGhlgsrVLkvhqvYDTzgjfFFlHJcIfLe5jFmRRfCQ1KuBfc4Jrtn3ndLgKWAKjBE+IraYQ==} engines: {node: '>=6.9.0'} @@ -2365,6 +2410,16 @@ packages: '@jridgewell/trace-mapping': 0.3.20 jsesc: 2.5.2 + /@babel/generator@7.23.5: + resolution: {integrity: sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/types': 7.23.5 + '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/trace-mapping': 0.3.20 + jsesc: 2.5.2 + dev: false + /@babel/helper-annotate-as-pure@7.22.5: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} @@ -2471,6 +2526,20 @@ packages: '@babel/helper-split-export-declaration': 7.22.6 '@babel/helper-validator-identifier': 7.22.20 + /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5): + resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.23.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-module-imports': 7.22.15 + '@babel/helper-simple-access': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/helper-validator-identifier': 7.22.20 + dev: false + /@babel/helper-optimise-call-expression@7.22.5: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} @@ -2551,6 +2620,17 @@ packages: transitivePeerDependencies: - supports-color + /@babel/helpers@7.23.5: + resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/template': 7.22.15 + '@babel/traverse': 7.23.5 + '@babel/types': 7.23.5 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/highlight@7.23.4: resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==} engines: {node: '>=6.9.0'} @@ -2566,6 +2646,14 @@ packages: dependencies: '@babel/types': 7.23.4 + /@babel/parser@7.23.5: + resolution: {integrity: sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==} + engines: {node: '>=6.0.0'} + hasBin: true + dependencies: + '@babel/types': 7.23.5 + dev: false + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.3): resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==} engines: {node: '>=6.9.0'} @@ -3478,7 +3566,7 @@ packages: resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.23.4 + '@babel/code-frame': 7.23.5 '@babel/parser': 7.23.4 '@babel/types': 7.23.4 @@ -3499,6 +3587,24 @@ packages: transitivePeerDependencies: - supports-color + /@babel/traverse@7.23.5: + resolution: {integrity: sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/code-frame': 7.23.5 + '@babel/generator': 7.23.5 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-function-name': 7.23.0 + '@babel/helper-hoist-variables': 7.22.5 + '@babel/helper-split-export-declaration': 7.22.6 + '@babel/parser': 7.23.5 + '@babel/types': 7.23.5 + debug: 4.3.4 + globals: 11.12.0 + transitivePeerDependencies: + - supports-color + dev: false + /@babel/types@7.23.4: resolution: {integrity: sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ==} engines: {node: '>=6.9.0'} @@ -3507,6 +3613,15 @@ packages: '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 + /@babel/types@7.23.5: + resolution: {integrity: sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==} + engines: {node: '>=6.9.0'} + dependencies: + '@babel/helper-string-parser': 7.23.4 + '@babel/helper-validator-identifier': 7.22.20 + to-fast-properties: 2.0.0 + dev: false + /@bcoe/v8-coverage@0.2.3: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true @@ -3946,7 +4061,7 @@ packages: '@chakra-ui/react': 2.8.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(framer-motion@10.16.5)(react-dom@18.2.0)(react@18.2.0) '@emotion/cache': 11.11.0 '@emotion/react': 11.11.1(@types/react@18.2.37)(react@18.2.0) - next: 13.3.0(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) + next: 13.3.0(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) react: 18.2.0 dev: false @@ -3961,7 +4076,7 @@ packages: '@chakra-ui/react': 2.8.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.37)(framer-motion@10.16.5)(react-dom@18.2.0)(react@18.2.0) '@emotion/cache': 11.11.0 '@emotion/react': 11.11.1(@types/react@18.2.37)(react@18.2.0) - next: 13.5.6(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0) + next: 13.5.6(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 dev: false @@ -4727,15 +4842,6 @@ packages: resolution: {integrity: sha512-5jEikOfU0r9y+OTlZn5AEQB15mibu3deLBUp+GnLzVUNezEEuPt/JdSeniQNi+0YviblAvOPO2JQAlgJ3SYYaA==} dev: false - /@codemirror/theme-one-dark@6.1.2: - resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==} - dependencies: - '@codemirror/language': 6.9.3 - '@codemirror/state': 6.3.2 - '@codemirror/view': 6.22.1 - '@lezer/highlight': 1.2.0 - dev: false - /@codemirror/view@6.22.1: resolution: {integrity: sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==} dependencies: @@ -6348,6 +6454,26 @@ packages: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} dev: false + /@replit/codemirror-vscode-keymap@6.0.2(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.2)(@codemirror/language@6.9.3)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1): + resolution: {integrity: sha512-j45qTwGxzpsv82lMD/NreGDORFKSctMDVkGRopaP+OrzSzv+pXDQuU3LnFvKpasyjVT0lf+PKG1v2DSCn/vxxg==} + peerDependencies: + '@codemirror/autocomplete': ^6.0.0 + '@codemirror/commands': ^6.0.0 + '@codemirror/language': ^6.0.0 + '@codemirror/lint': ^6.0.0 + '@codemirror/search': ^6.0.0 + '@codemirror/state': ^6.0.0 + '@codemirror/view': ^6.0.0 + dependencies: + '@codemirror/autocomplete': 6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1)(@lezer/common@1.1.1) + '@codemirror/commands': 6.3.2 + '@codemirror/language': 6.9.3 + '@codemirror/lint': 6.4.2 + '@codemirror/search': 6.5.5 + '@codemirror/state': 6.3.2 + '@codemirror/view': 6.22.1 + dev: false + /@rollup/plugin-babel@5.3.1(@babel/core@7.23.3)(rollup@2.79.1): resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'} @@ -7336,12 +7462,12 @@ packages: /@types/eslint-scope@3.7.7: resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} dependencies: - '@types/eslint': 8.44.7 + '@types/eslint': 8.44.8 '@types/estree': 1.0.5 dev: false - /@types/eslint@8.44.7: - resolution: {integrity: sha512-f5ORu2hcBbKei97U73mf+l9t4zTGl74IqZ0GQk4oVea/VS8tQZYkUveSYojk+frraAVYId0V2WC9O4PTNru2FQ==} + /@types/eslint@8.44.8: + resolution: {integrity: sha512-4K8GavROwhrYl2QXDXm0Rv9epkA8GBFu0EI+XrrnnuCl7u8CWBRusX7fXJfanhZTDWSAL24gDI/UqXyUM0Injw==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 @@ -7845,53 +7971,6 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@uiw/codemirror-extensions-basic-setup@4.21.20(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.2)(@codemirror/language@6.9.3)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1): - resolution: {integrity: sha512-Wyi9q4uw0xGYd/tJ6bULG7tkCLqcUsQT0AQBfCDtnkV3LdiLU0LceTrzJoHJyIKSHsKDJxFQxa1qg3QLt4gIUA==} - peerDependencies: - '@codemirror/autocomplete': '>=6.0.0' - '@codemirror/commands': '>=6.0.0' - '@codemirror/language': '>=6.0.0' - '@codemirror/lint': '>=6.0.0' - '@codemirror/search': '>=6.0.0' - '@codemirror/state': '>=6.0.0' - '@codemirror/view': '>=6.0.0' - dependencies: - '@codemirror/autocomplete': 6.11.1(@codemirror/language@6.9.3)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1)(@lezer/common@1.1.1) - '@codemirror/commands': 6.3.2 - '@codemirror/language': 6.9.3 - '@codemirror/lint': 6.4.2 - '@codemirror/search': 6.5.5 - '@codemirror/state': 6.3.2 - '@codemirror/view': 6.22.1 - dev: false - - /@uiw/react-codemirror@4.21.20(@babel/runtime@7.23.4)(@codemirror/autocomplete@6.11.1)(@codemirror/language@6.9.3)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.3.2)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.22.1)(codemirror@6.0.1)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-PdyewPvNXnvT3JHj888yjpbWsAGw5qlxW6w1sMdsqJ0R6vPV++ob1iZXCGrM1FVpbqPK0DNfpXvjzp2gIr3lYw==} - peerDependencies: - '@babel/runtime': '>=7.11.0' - '@codemirror/state': '>=6.0.0' - '@codemirror/theme-one-dark': '>=6.0.0' - '@codemirror/view': '>=6.0.0' - codemirror: '>=6.0.0' - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - '@babel/runtime': 7.23.4 - '@codemirror/commands': 6.3.2 - '@codemirror/state': 6.3.2 - '@codemirror/theme-one-dark': 6.1.2 - '@codemirror/view': 6.22.1 - '@uiw/codemirror-extensions-basic-setup': 4.21.20(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.2)(@codemirror/language@6.9.3)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.3.2)(@codemirror/view@6.22.1) - codemirror: 6.0.1(@lezer/common@1.1.1) - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - transitivePeerDependencies: - - '@codemirror/autocomplete' - - '@codemirror/language' - - '@codemirror/lint' - - '@codemirror/search' - dev: false - /@webassemblyjs/ast@1.11.6: resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==} dependencies: @@ -8381,14 +8460,14 @@ packages: - supports-color dev: true - /babel-loader@8.3.0(@babel/core@7.23.3)(webpack@5.89.0): + /babel-loader@8.3.0(@babel/core@7.23.5)(webpack@5.89.0): resolution: {integrity: sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==} engines: {node: '>= 8.9'} peerDependencies: '@babel/core': ^7.0.0 webpack: '>=2' dependencies: - '@babel/core': 7.23.3 + '@babel/core': 7.23.5 find-cache-dir: 3.3.2 loader-utils: 2.0.4 make-dir: 3.1.0 @@ -8617,6 +8696,17 @@ packages: node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) + /browserslist@4.22.2: + resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + dependencies: + caniuse-lite: 1.0.30001566 + electron-to-chromium: 1.4.603 + node-releases: 2.0.14 + update-browserslist-db: 1.0.13(browserslist@4.22.2) + dev: false + /bser@2.1.1: resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==} dependencies: @@ -8701,6 +8791,10 @@ packages: /caniuse-lite@1.0.30001565: resolution: {integrity: sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==} + /caniuse-lite@1.0.30001566: + resolution: {integrity: sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA==} + dev: false + /caseless@0.12.0: resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==} @@ -9572,6 +9666,10 @@ packages: /electron-to-chromium@1.4.596: resolution: {integrity: sha512-zW3zbZ40Icb2BCWjm47nxwcFGYlIgdXkAx85XDO7cyky9J4QQfq8t0W19/TLZqq3JPQXtlv8BPIGmfa9Jb4scg==} + /electron-to-chromium@1.4.603: + resolution: {integrity: sha512-Dvo5OGjnl7AZTU632dFJtWj0uJK835eeOVQIuRcmBmsFsTNn3cL05FqOyHAfGQDIoHfLhyJ1Tya3PJ0ceMz54g==} + dev: false + /emittery@0.13.1: resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==} engines: {node: '>=12'} @@ -12501,7 +12599,7 @@ packages: resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/code-frame': 7.23.4 + '@babel/code-frame': 7.23.5 '@jest/types': 29.6.3 '@types/stack-utils': 2.0.3 chalk: 4.1.2 @@ -13902,7 +14000,7 @@ packages: hoist-non-react-statics: 3.3.2 i18next: 22.5.1 i18next-fs-backend: 2.3.0 - next: 13.3.0(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) + next: 13.3.0(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) react: 18.2.0 react-i18next: 12.3.1(i18next@22.5.1)(react-dom@18.2.0)(react@18.2.0) dev: false @@ -13942,20 +14040,20 @@ packages: hoist-non-react-statics: 3.3.2 i18next: 22.5.1 i18next-fs-backend: 2.3.0 - next: 13.5.6(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0) + next: 13.5.6(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-i18next: 12.3.1(i18next@22.5.1)(react-dom@18.2.0)(react@18.2.0) dev: false - /next-pwa@5.6.0(@babel/core@7.23.3)(next@13.3.0)(webpack@5.89.0): + /next-pwa@5.6.0(@babel/core@7.23.5)(next@13.3.0)(webpack@5.89.0): resolution: {integrity: sha512-XV8g8C6B7UmViXU8askMEYhWwQ4qc/XqJGnexbLV68hzKaGHZDMtHsm2TNxFcbR7+ypVuth/wwpiIlMwpRJJ5A==} peerDependencies: next: '>=9.0.0' dependencies: - babel-loader: 8.3.0(@babel/core@7.23.3)(webpack@5.89.0) + babel-loader: 8.3.0(@babel/core@7.23.5)(webpack@5.89.0) clean-webpack-plugin: 4.0.0(webpack@5.89.0) globby: 11.1.0 - next: 13.3.0(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) + next: 13.3.0(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) terser-webpack-plugin: 5.3.9(webpack@5.89.0) workbox-webpack-plugin: 6.6.0(webpack@5.89.0) workbox-window: 6.6.0 @@ -14062,7 +14160,7 @@ packages: - babel-plugin-macros dev: false - /next@13.3.0(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5): + /next@13.3.0(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5): resolution: {integrity: sha512-OVTw8MpIPa12+DCUkPqRGPS3thlJPcwae2ZL4xti3iBff27goH024xy4q2lhlsdoYiKOi8Kz6uJoLW/GXwgfOA==} engines: {node: '>=14.6.0'} hasBin: true @@ -14091,7 +14189,7 @@ packages: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) sass: 1.69.5 - styled-jsx: 5.1.1(@babel/core@7.23.3)(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.23.5)(react@18.2.0) optionalDependencies: '@next/swc-darwin-arm64': 13.3.0 '@next/swc-darwin-x64': 13.3.0 @@ -14151,7 +14249,7 @@ packages: - babel-plugin-macros dev: false - /next@13.5.6(@babel/core@7.23.3)(react-dom@18.2.0)(react@18.2.0): + /next@13.5.6(@babel/core@7.23.5)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==} engines: {node: '>=16.14.0'} hasBin: true @@ -14173,7 +14271,7 @@ packages: postcss: 8.4.31 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - styled-jsx: 5.1.1(@babel/core@7.23.3)(react@18.2.0) + styled-jsx: 5.1.1(@babel/core@7.23.5)(react@18.2.0) watchpack: 2.4.0 optionalDependencies: '@next/swc-darwin-arm64': 13.5.6 @@ -14202,6 +14300,10 @@ packages: /node-releases@2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} + /node-releases@2.0.14: + resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==} + dev: false + /node-uuid@1.4.8: resolution: {integrity: sha512-TkCET/3rr9mUuRp+CpO7qfgT++aAxfDRaalQhwPFzI9BY/2rCDn6OfpZOVggi1AXfTPpfkTrg5f5WQx5G1uLxA==} deprecated: Use uuid module instead @@ -14446,7 +14548,7 @@ packages: resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} engines: {node: '>=8'} dependencies: - '@babel/code-frame': 7.23.4 + '@babel/code-frame': 7.23.5 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 @@ -15285,7 +15387,7 @@ packages: rollup: 2.79.1 typescript: 4.9.5 optionalDependencies: - '@babel/code-frame': 7.23.4 + '@babel/code-frame': 7.23.5 dev: true /rollup-plugin-dts@4.2.3(rollup@2.79.1)(typescript@5.2.2): @@ -15299,7 +15401,7 @@ packages: rollup: 2.79.1 typescript: 5.2.2 optionalDependencies: - '@babel/code-frame': 7.23.4 + '@babel/code-frame': 7.23.5 dev: true /rollup-plugin-peer-deps-external@2.2.4(rollup@2.79.1): @@ -15898,6 +16000,24 @@ packages: react: 18.2.0 dev: false + /styled-jsx@5.1.1(@babel/core@7.23.5)(react@18.2.0): + resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==} + engines: {node: '>= 12.0.0'} + peerDependencies: + '@babel/core': '*' + babel-plugin-macros: '*' + react: '>= 16.8.0 || 17.x.x || ^18.0.0-0' + peerDependenciesMeta: + '@babel/core': + optional: true + babel-plugin-macros: + optional: true + dependencies: + '@babel/core': 7.23.5 + client-only: 0.0.1 + react: 18.2.0 + dev: false + /stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} dev: false @@ -16424,6 +16544,17 @@ packages: escalade: 3.1.1 picocolors: 1.0.0 + /update-browserslist-db@1.0.13(browserslist@4.22.2): + resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + dependencies: + browserslist: 4.22.2 + escalade: 3.1.1 + picocolors: 1.0.0 + dev: false + /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: @@ -16691,7 +16822,7 @@ packages: '@webassemblyjs/wasm-parser': 1.11.6 acorn: 8.11.2 acorn-import-assertions: 1.9.0(acorn@8.11.2) - browserslist: 4.22.1 + browserslist: 4.22.2 chrome-trace-event: 1.0.3 enhanced-resolve: 5.15.0 es-module-lexer: 1.4.1 diff --git a/frontend/providers/template/next.config.js b/frontend/providers/template/next.config.js index 907c382a5ad..280e1fbe691 100644 --- a/frontend/providers/template/next.config.js +++ b/frontend/providers/template/next.config.js @@ -22,7 +22,8 @@ const nextConfig = { experimental: { // this includes files from the monorepo base two directories up outputFileTracingRoot: path.join(__dirname, '../../') - } + }, + transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk'] }; module.exports = nextConfig; diff --git a/frontend/providers/template/package.json b/frontend/providers/template/package.json index e528e35fd7a..fca653b26bf 100644 --- a/frontend/providers/template/package.json +++ b/frontend/providers/template/package.json @@ -13,15 +13,20 @@ "@chakra-ui/next-js": "^2.1.5", "@chakra-ui/react": "^2.8.1", "@chakra-ui/system": "^2.6.1", + "@codemirror/commands": "^6.3.2", "@codemirror/language": "^6.9.1", "@codemirror/legacy-modes": "^6.3.3", + "@codemirror/state": "^6.3.2", + "@codemirror/view": "^6.22.1", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@kubernetes/client-node": "^0.18.1", "@next/font": "13.1.6", + "@replit/codemirror-vscode-keymap": "^6.0.2", + "@sealos/ui": "workspace:^", "@tanstack/react-query": "^4.35.3", - "@uiw/react-codemirror": "4.21.20", "axios": "^1.5.1", + "codemirror": "^6.0.1", "cron-parser": "^4.9.0", "cronstrue": "^2.32.0", "dayjs": "^1.11.10", diff --git a/frontend/providers/template/src/components/YamlCode/hljs.ts b/frontend/providers/template/src/components/YamlCode/hljs.ts deleted file mode 100644 index bf10817fafe..00000000000 --- a/frontend/providers/template/src/components/YamlCode/hljs.ts +++ /dev/null @@ -1,115 +0,0 @@ -export const codeTheme = { - hljs: { - display: 'block', - overflowX: 'auto', - color: '#2f3337' - }, - linenumber: { - minWidth: '2em' - }, - 'hljs-comment': { - color: '#656e77' - }, - comment: { - color: '#A19F9D' - }, - 'hljs-keyword': { - color: '#015692' - }, - 'hljs-selector-tag': { - color: '#015692' - }, - 'hljs-meta-keyword': { - color: '#015692' - }, - 'hljs-doctag': { - color: '#015692' - }, - 'hljs-section': { - color: '#015692' - }, - 'hljs-selector-class': { - color: '#015692' - }, - 'hljs-meta': { - color: '#015692' - }, - 'hljs-selector-pseudo': { - color: '#015692' - }, - 'hljs-attr': { - color: '#015692' - }, - 'hljs-attribute': { - color: '#803378' - }, - 'hljs-name': { - color: '#b75501' - }, - 'hljs-type': { - color: '#b75501' - }, - 'hljs-number': { - color: '#b75501' - }, - 'hljs-selector-id': { - color: '#b75501' - }, - 'hljs-quote': { - color: '#b75501' - }, - 'hljs-template-tag': { - color: '#b75501' - }, - 'hljs-built_in': { - color: '#b75501' - }, - 'hljs-title': { - color: '#b75501' - }, - 'hljs-literal': { - color: '#b75501' - }, - 'hljs-string': { - color: '#54790d' - }, - 'hljs-regexp': { - color: '#54790d' - }, - 'hljs-symbol': { - color: '#54790d' - }, - 'hljs-variable': { - color: '#54790d' - }, - 'hljs-template-variable': { - color: '#54790d' - }, - 'hljs-link': { - color: '#54790d' - }, - 'hljs-selector-attr': { - color: '#54790d' - }, - 'hljs-meta-string': { - color: '#54790d' - }, - 'hljs-bullet': { - color: '#535a60' - }, - 'hljs-code': { - color: '#535a60' - }, - 'hljs-deletion': { - color: '#c02d2e' - }, - 'hljs-addition': { - color: '#2f6f44' - }, - 'hljs-emphasis': { - fontStyle: 'italic' - }, - 'hljs-strong': { - fontWeight: 'bold' - } -}; diff --git a/frontend/providers/template/src/components/YamlCode/index.module.scss b/frontend/providers/template/src/components/YamlCode/index.module.scss deleted file mode 100644 index 883b64a970c..00000000000 --- a/frontend/providers/template/src/components/YamlCode/index.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -.markdown { - height: '100%'; - div { - overflow: visible !important; - } -} diff --git a/frontend/providers/template/src/components/YamlCode/index.tsx b/frontend/providers/template/src/components/YamlCode/index.tsx deleted file mode 100644 index b42655b5172..00000000000 --- a/frontend/providers/template/src/components/YamlCode/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useMemo } from 'react'; -import ReactMarkdown from 'react-markdown'; -import SyntaxHighlighter from 'react-syntax-highlighter'; -import { codeTheme } from './hljs'; -import styles from './index.module.scss'; - -type TMarkDown = { - content: string; - [key: string]: any; -}; - -const YamlCode = ({ content, ...props }: TMarkDown) => { - const code = useMemo(() => '```yaml\n' + content + '```', [content]); - - return ( - - ) : ( - - {children} - - ); - } - }} - /> - ); -}; - -export default YamlCode; diff --git a/frontend/providers/template/src/constants/theme.ts b/frontend/providers/template/src/constants/theme.ts index 9089a89bd6c..f45e44d4c83 100644 --- a/frontend/providers/template/src/constants/theme.ts +++ b/frontend/providers/template/src/constants/theme.ts @@ -5,6 +5,7 @@ import { defineStyleConfig, extendTheme } from '@chakra-ui/react'; +import { theme as sealosTheme } from '@sealos/ui'; // @ts-ignore import { selectAnatomy, switchAnatomy } from '@chakra-ui/anatomy'; const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } = @@ -159,7 +160,7 @@ const Tooltip = defineStyleConfig({ } }); -export const theme = extendTheme({ +export const theme = extendTheme(sealosTheme, { styles: { global: { 'html, body': { diff --git a/frontend/providers/template/src/pages/deploy/components/Yaml.tsx b/frontend/providers/template/src/pages/deploy/components/Yaml.tsx index 3de5c9f5fbb..9f3b756abc0 100644 --- a/frontend/providers/template/src/pages/deploy/components/Yaml.tsx +++ b/frontend/providers/template/src/pages/deploy/components/Yaml.tsx @@ -1,13 +1,13 @@ import MyIcon from '@/components/Icon'; -import YamlCode from '@/components/YamlCode/index'; import type { QueryType, YamlItemType } from '@/types'; import { useCopyData } from '@/utils/tools'; import { Box, Flex, useTheme } from '@chakra-ui/react'; import { useRouter } from 'next/router'; import { useState } from 'react'; import styles from './index.module.scss'; +import { YamlCode } from '@sealos/ui'; -const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: number }) => { +const Yaml = ({ yamlList = [] }: { yamlList: YamlItemType[]; pxVal: number }) => { const theme = useTheme(); const router = useRouter(); const { name } = router.query as QueryType; @@ -41,7 +41,11 @@ const Yaml = ({ yamlList = [], pxVal }: { yamlList: YamlItemType[]; pxVal: numbe - + )} diff --git a/frontend/providers/template/src/pages/develop/components/Editor.tsx b/frontend/providers/template/src/pages/develop/components/Editor.tsx new file mode 100644 index 00000000000..ca7fd55ec7a --- /dev/null +++ b/frontend/providers/template/src/pages/develop/components/Editor.tsx @@ -0,0 +1,48 @@ +import { Box, BoxProps } from '@chakra-ui/react'; +import { StreamLanguage } from '@codemirror/language'; +import { yaml } from '@codemirror/legacy-modes/mode/yaml'; +import { EditorState } from '@codemirror/state'; +import { EditorView, keymap } from '@codemirror/view'; +import { vscodeKeymap } from '@replit/codemirror-vscode-keymap'; +import { basicSetup } from 'codemirror'; +import { useEffect, useRef, useState } from 'react'; + +export default function Editor({ + onDocChange, + ...styles +}: { onDocChange: (x: EditorState) => void } & BoxProps) { + const [init, setInit] = useState(true); + const extensions = [ + basicSetup, + keymap.of(vscodeKeymap), + StreamLanguage.define(yaml), + EditorView.updateListener.of((update) => { + // persist + const store = update.state.toJSON(); + localStorage.setItem('yamlEditor', JSON.stringify(store)); + if (update.docChanged || init) onDocChange(update.state); + init && setInit(false); + }) + ]; + const getState = () => { + try { + return EditorState.create({ + ...EditorState.fromJSON(JSON.parse(localStorage.getItem('yamlEditor')!)), + extensions + }); + } catch (err) { + return undefined; + } + }; + const ref = useRef(null); + useEffect(() => { + const view = new EditorView({ + state: getState(), + extensions, // indentOnInput(), + parent: ref.current! + }); + return () => view && view.destroy(); + }, []); + + return ; +} diff --git a/frontend/providers/template/src/pages/develop/components/YamlList.tsx b/frontend/providers/template/src/pages/develop/components/YamlList.tsx index c47fdc361b8..66e88bf331d 100644 --- a/frontend/providers/template/src/pages/develop/components/YamlList.tsx +++ b/frontend/providers/template/src/pages/develop/components/YamlList.tsx @@ -1,22 +1,14 @@ -import MyIcon from '@/components/Icon'; -import YamlCode from '@/components/YamlCode/index'; -import type { QueryType, YamlItemType } from '@/types'; -import { useCopyData } from '@/utils/tools'; -import { Box, Flex, useTheme } from '@chakra-ui/react'; -import { useRouter } from 'next/router'; +import type { YamlItemType } from '@/types'; +import { Box, Flex, Grid } from '@chakra-ui/react'; import { useState } from 'react'; -import styles from './index.module.scss'; - +import { YamlCode } from '@sealos/ui'; const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => { - const theme = useTheme(); - const router = useRouter(); - const { name } = router.query as QueryType; - const { copyData } = useCopyData(); const [selectedIndex, setSelectedIndex] = useState(0); return ( { ))} {!!yamlList[selectedIndex] && ( - - - - - + + + )} ); diff --git a/frontend/providers/template/src/pages/develop/index.tsx b/frontend/providers/template/src/pages/develop/index.tsx index cf5423856ef..c94aea5ef95 100644 --- a/frontend/providers/template/src/pages/develop/index.tsx +++ b/frontend/providers/template/src/pages/develop/index.tsx @@ -16,42 +16,50 @@ import { } from '@/utils/json-yaml'; import { getTemplateDefaultValues } from '@/utils/template'; import { downLoadBold } from '@/utils/tools'; -import { Box, Button, Flex, Text } from '@chakra-ui/react'; -import { StreamLanguage } from '@codemirror/language'; -import { yaml } from '@codemirror/legacy-modes/mode/yaml'; +import { Button, Center, Flex, Spinner, Text } from '@chakra-ui/react'; import { useQuery } from '@tanstack/react-query'; -import CodeMirror from '@uiw/react-codemirror'; import dayjs from 'dayjs'; import JsYaml from 'js-yaml'; import { debounce, has, isObject, mapValues } from 'lodash'; import { useTranslation } from 'next-i18next'; -import { useCallback, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useForm } from 'react-hook-form'; import ErrorModal from '../deploy/components/ErrorModal'; import BreadCrumbHeader from './components/BreadCrumbHeader'; import Form from './components/Form'; import YamlList from './components/YamlList'; - +import { type EditorState } from '@codemirror/state'; +import dynamic from 'next/dynamic'; +const Editor = dynamic(() => import('./components/Editor'), { + loading() { + return ( +
+ +
+ ); + }, + ssr: false +}); export default function Develop() { const { t } = useTranslation(); - const [yamlValue, setYamlValue] = useState(''); const { toast } = useToast(); const [yamlSource, setYamlSource] = useState(); const [yamlList, setYamlList] = useState([]); const { Loading, setIsLoading } = useLoading(); const [errorMessage, setErrorMessage] = useState(''); - const { title, applyBtnText, applyMessage, applySuccess, applyError } = editModeMap(false); + const { applySuccess, applyError } = editModeMap(false); const SuccessfulDryRun = useRef(false); - const { data: platformEnvs } = useQuery(['getPlatformEnvs'], getPlatformEnv) as { data: EnvResponse; }; - const onYamlChange = (value: string) => { - setYamlValue(value); - parseTemplate(value); - }; - + const onYamlChange = useCallback( + debounce((state: EditorState) => { + const value = state.doc.toString(); + parseTemplate(value); + }, 1000), + [debounce] + ); const getYamlSource = (str: string): TemplateSourceType => { const yamlData = JsYaml.loadAll(str); const templateYaml: TemplateType = yamlData.find( @@ -89,6 +97,11 @@ export default function Develop() { }; const parseTemplate = (str: string) => { + if (!str || !str.trim()) { + setYamlSource(void 0); + setYamlList([]); + return; + } try { const result = getYamlSource(str); const defaultInputes = getTemplateDefaultValues(result); @@ -112,9 +125,13 @@ export default function Develop() { }); // watch form change, compute new yaml - formHook.watch((data: any) => { - data && formOnchangeDebounce(data); - }); + useEffect( + () => + formHook.watch((data: any) => { + data && formOnchangeDebounce(data); + }).unsubscribe, + [formHook.watch] + ); const formOnchangeDebounce = debounce((data: any) => { try { @@ -212,7 +229,8 @@ export default function Develop() { borderRadius={'8px'} overflowY={'hidden'} overflowX={'scroll'} - flex={1}> + flex={1} + > {/* left */} + borderRadius={'8px 8px 0px 0px '} + > {t('develop.Development')} @@ -231,15 +250,13 @@ export default function Develop() { {t('develop.Please enter YAML code')} - - - + onYamlChange(s)} + /> {/* right */} @@ -250,7 +267,8 @@ export default function Develop() { alignItems={'center'} backgroundColor={'#F8FAFB'} pl="42px" - borderRadius={'8px 8px 0px 0px '}> + borderRadius={'8px 8px 0px 0px '} + > {t('develop.Preview')} @@ -262,7 +280,8 @@ export default function Develop() { pt="26px" pr={{ sm: '20px', md: '60px' }} borderBottom={'1px solid #EFF0F1'} - flexDirection={'column'}> + flexDirection={'column'} + > {t('develop.Configure Form')} @@ -278,7 +297,8 @@ export default function Develop() { minW={'100px'} h={'34px'} variant={'link'} - onClick={handleExportYaml}> + onClick={handleExportYaml} + > {t('Export')} Yaml