fix(template):fix deps, fix styles

[xudaotutou]

🤖[deprecated] Generated by Copilot at 707097e

Summary

🛠️🎨📝

This pull request updates the frontend template provider and the Kubepanel plugin to use the @sealos/ui library for UI consistency and functionality. It also improves the YAML editor experience by replacing the @uiw/react-codemirror package with the @replit/codemirror-vscode-keymap and codemirror packages. It fixes a bug related to an optional dependency and adds a package to update the browserslist database. It also removes some unused code and files and applies some code formatting.

We're breaking the chains of the old UI
We're bringing the power of @sealos/ui
We're fixing the bugs and the errors in code
We're rocking the YAML with codemirror mode

Walkthrough

• Update next and next-pwa dependencies to use @babel/core@7.23.5 instead of @babel/core@7.23.3 to fix a bug related to the @next/swc-darwin-arm64 optional dependency (link,link,link,link,link,link,link,link,link,link,link,link)
• Add @codemirror/commands, @codemirror/state, @codemirror/view, @replit/codemirror-vscode-keymap, @sealos/ui, and codemirror dependencies to the frontend/plugins/kubepanel and frontend/providers/template workspaces to provide a better editor experience for YAML files in the Kubepanel plugin (link,link,link,link)
• Remove @uiw/react-codemirror dependency from the frontend/plugins/kubepanel and frontend/providers/template workspaces because it was replaced by the @replit/codemirror-vscode-keymap and codemirror dependencies (link,link,link,link,link)
• Update @babel/code-frame dependency to 7.23.5 in various packages to fix a bug related to the @next/swc-darwin-arm64 optional dependency (link,link,link,link,link,link,link)
• Add browserslist@4.22.2 and caniuse-lite@1.0.30001566 dependencies to support the update-browserslist-db package, which updates the browserslist database automatically (link,link,link)
• Add electron-to-chromium@1.4.603 dependency to support the browserslist package, which provides information about browser support for various features (link)
• Add @babel/core@7.23.5, @babel/generator@7.23.5, @babel/helper-module-transforms@7.23.3(@babel/core@7.23.5), @babel/helpers@7.23.5, @babel/parser@7.23.5, @babel/traverse@7.23.5, and @babel/types@7.23.5 dependencies to fix a bug related to the @next/swc-darwin-arm64 optional dependency (link,link,link,link,link,link,link)
• Update @types/eslint dependency to 8.44.8 instead of 8.44.7 to fix a type mismatch issue with the eslint dependency (link)
• Update babel-loader dependency to use @babel/core@7.23.5 instead of @babel/core@7.23.3 to fix a bug related to the @next/swc-darwin-arm64 optional dependency (link,link)
• Add @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) dependency to provide a VS Code-like keymap for the CodeMirror editor (link)
• Remove @codemirror/theme-one-dark@6.1.2 dependency because it was not used by the Kubepanel plugin (link)
• Update nextConfig value in frontend/providers/template/next.config.js to include the transpilePackages option, which specifies the packages that need to be transpiled by Next.js. This is needed for the @sealos/ui package, which is a UI library for the Kubepanel plugin (link)
• Update theme value in frontend/providers/template/src/constants/theme.ts to extend the theme value from the @sealos/ui package, which provides a UI library for the Kubepanel plugin (link,link)
• Update Yaml component in frontend/providers/template/src/pages/deploy/components/Yaml.tsx to use the YamlCode component from the @sealos/ui package, which provides a UI library for the Kubepanel plugin. The YamlCode component takes a markdown prop instead of a content prop, so the code was adjusted accordingly (link,link,link)
• Add Editor component in frontend/providers/template/src/pages/develop/components/Editor.tsx to provide a custom editor component for YAML files, using the @replit/codemirror-vscode-keymap and codemirror packages, which provide a better editor experience than the @uiw/react-codemirror package. The Editor component takes an onDocChange prop, which is a callback function that receives the editor state when it changes. The Editor component also persists the editor state in the local storage and restores it when mounted (link)
• Update YamlList component in frontend/providers/template/src/pages/develop/components/YamlList.tsx to use the YamlCode component from the @sealos/ui package, which provides a UI library for the Kubepanel plugin. The YamlCode component takes a markdown prop instead of a content prop, so the code was adjusted accordingly. The YamlCode component also uses a Grid component instead of a Flex component to wrap the code, to fix a layout issue caused by the removal of the @uiw/react-codemirror package. The YamlList component also adds a h="0" prop to the Flex component that wraps the YAML list items, to fix another layout issue caused by the removal of the @uiw/react-codemirror package (link,link,link)
• Update Develop component in frontend/providers/template/src/pages/develop/index.tsx to use the Editor component instead of the CodeMirror component to render the YAML editor. The Editor component takes an onDocChange prop, which is a callback function that receives the editor state when it changes. The onYamlChange function was updated to accept an EditorState parameter instead of a string parameter, and to use the doc.toString() method to get the YAML string from the editor state. The onYamlChange function was also wrapped in a useCallback hook to memoize it and avoid unnecessary re-renders. The Editor component also handles the width, height, and min-height of the editor, so the props for those were removed from the CodeMirror component. The Develop component also uses the dynamic function from the next/dynamic package to dynamically import the Editor component and render it only on the client side, because the Editor component uses the @replit/codemirror-vscode-keymap and codemirror packages, which rely on the browser environment and cannot be rendered on the server side. The dynamic function takes a loading component, which is a Spinner component from the @chakra-ui/react package, and an ssr option, which is set to false to disable server-side rendering for the Editor component. The Develop component also adds a condition to check if the YAML string is empty or blank before parsing it and setting the YAML source and list, to avoid errors when the editor is cleared or initialized with an empty string. The Develop component also uses the useEffect hook to watch the form data changes and call the formOnchangeDebounce function, because the watch method from the react-hook-form package returns a subscription object, which needs to be unsubscribed when the component unmounts to avoid memory leaks. The useEffect hook returns a cleanup function that calls the unsubscribe method on the subscription object. The Develop component also fixes some syntax errors by adding closing angle brackets to some components (link,link,link,link,link,link,link,link,link,link,link)
• Remove an empty line from frontend/plugins/kubepanel/src/api/delete.ts because it was not needed (link)

[sealos-ci-robot]

🤖 Generated by lychee action

Summary

Status	Count
🔍 Total	1146
✅ Successful	387
⏳ Timeouts	0
🔀 Redirected	0
👻 Excluded	757
❓ Unknown	0
🚫 Errors	1

Errors per input

Errors in docs/blog/zh-Hans/2023/sealos-release.md

• [522] https://jsd.cdn.zzko.cn/gh/yangchuansheng/imghosting-test@main/uPic/2023-11-16-18-01-t4W7LN.jpg | Failed: Network error: Unknown status code

Full action output

Full Github Actions output

[sweep-ai]

Apply Sweep Rules to your PR?

• Apply: All new business logic should have corresponding unit tests.
• Apply: Refactor large functions to be more modular.
• Apply: Add docstrings to all functions and file headers.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (94ac016) 65.45% compared to head (c6b2260) 65.45%.
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4378   +/-   ##
=======================================
  Coverage   65.45%   65.45%           
=======================================
  Files           8        8           
  Lines         660      660           
=======================================
  Hits          432      432           
  Misses        180      180           
  Partials       48       48           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.