From 386b5e137b540b1d687c08fd50996afd5d4ab0b4 Mon Sep 17 00:00:00 2001 From: Artem Golub Date: Sun, 10 Jul 2022 13:04:46 +0300 Subject: [PATCH] task: add eslint and prettier --- services/frontend/.eslintrc | 20 + services/frontend/.prettierrc | 5 + services/frontend/package.json | 14 +- services/frontend/src/App.tsx | 29 +- .../src/components/Auth/Login/index.tsx | 38 +- .../src/components/Auth/Signup/index.tsx | 38 +- .../src/components/Canvas/Popover.tsx | 18 +- .../frontend/src/components/Canvas/index.tsx | 85 ++-- .../src/components/CodeEditor/index.tsx | 156 +++--- .../CodeEditor/themes/highlight/dark.ts | 29 +- .../components/CodeEditor/themes/ui/dark.ts | 210 ++++---- .../components/CodeEditor/useCodeMirror.tsx | 36 +- .../src/components/Modal/ConfirmDelete.tsx | 18 +- .../src/components/Modal/Node/Container.tsx | 29 +- .../src/components/Modal/Node/Create.tsx | 75 +-- .../src/components/Modal/Node/Edit.tsx | 84 ++-- .../src/components/Modal/Node/General.tsx | 28 +- .../src/components/Modal/Node/Resource.tsx | 21 +- .../src/components/Modal/Service/Create.tsx | 39 +- .../src/components/Modal/Service/Edit.tsx | 36 +- .../frontend/src/components/Profile/index.tsx | 24 +- .../frontend/src/components/Project/index.tsx | 451 +++++++++++------- .../src/components/Projects/PreviewBlock.tsx | 17 +- .../src/components/Projects/index.tsx | 49 +- .../global/DarkModeSwitch/index.tsx | 21 +- .../global/DarkModeSwitch/userDarkMode.tsx | 11 +- .../src/components/global/Pagination.tsx | 6 +- .../frontend/src/components/global/Search.tsx | 18 +- .../src/components/global/SideBar.tsx | 38 +- .../src/components/global/Spinner.tsx | 31 +- .../src/components/global/UserMenu.tsx | 19 +- .../frontend/src/components/global/logo.tsx | 68 ++- .../frontend/src/components/useJsPlumb.ts | 292 +++++++----- services/frontend/src/constants/index.ts | 2 +- services/frontend/src/events/eventBus.ts | 19 +- services/frontend/src/hooks/auth.ts | 7 +- .../src/hooks/useLocalStorageJWTKeys.ts | 16 +- services/frontend/src/hooks/useProject.ts | 127 +++-- services/frontend/src/hooks/useProjects.ts | 14 +- .../frontend/src/hooks/useWindowDimensions.ts | 10 +- services/frontend/src/index.tsx | 2 +- .../frontend/src/partials/ProtectedRoute.tsx | 8 +- .../frontend/src/partials/useClickOutside.tsx | 2 +- services/frontend/src/reducers/index.ts | 17 +- services/frontend/src/reportWebVitals.ts | 4 +- services/frontend/src/services/auth.ts | 19 +- services/frontend/src/services/generate.ts | 2 +- services/frontend/src/services/helpers.ts | 4 +- services/frontend/src/services/utils.ts | 4 +- services/frontend/src/setupTests.ts | 2 +- services/frontend/src/types/index.ts | 16 +- services/frontend/src/utils/clickOutside.tsx | 44 +- services/frontend/src/utils/data/libraries.ts | 1 - .../frontend/src/utils/data/serviceNode.ts | 3 +- .../frontend/src/utils/data/startConfig.ts | 2 +- services/frontend/src/utils/generators.ts | 18 +- services/frontend/src/utils/index.ts | 99 ++-- services/frontend/src/utils/options.ts | 15 +- services/frontend/src/utils/position.ts | 35 +- 59 files changed, 1496 insertions(+), 1049 deletions(-) create mode 100644 services/frontend/.eslintrc create mode 100644 services/frontend/.prettierrc diff --git a/services/frontend/.eslintrc b/services/frontend/.eslintrc new file mode 100644 index 0000000..900a013 --- /dev/null +++ b/services/frontend/.eslintrc @@ -0,0 +1,20 @@ +{ + "root": true, + "parser": "@typescript-eslint/parser", + "plugins": [ + "@typescript-eslint", + "prettier" + ], + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/eslint-recommended", + "plugin:@typescript-eslint/recommended", + "prettier" + ], + "rules": { + "no-console": 1, // Means warning + "prettier/prettier": 2, // Means error + "no-empty-function": 1, + "@typescript-eslint/no-empty-function": 1 + } +} diff --git a/services/frontend/.prettierrc b/services/frontend/.prettierrc new file mode 100644 index 0000000..2e9ec6b --- /dev/null +++ b/services/frontend/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": true, + "trailingComma": "none", + "printWidth": 80 +} \ No newline at end of file diff --git a/services/frontend/package.json b/services/frontend/package.json index ce67fd1..37512cd 100644 --- a/services/frontend/package.json +++ b/services/frontend/package.json @@ -25,7 +25,7 @@ "@jsplumb/connector-bezier": "^5.5.2", "@jsplumb/core": "^5.5.2", "@jsplumb/util": "^5.5.2", - "@tailwindcss/forms": "^0.4.0", + "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.1", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.2", @@ -51,7 +51,9 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write", + "lint": "eslint . --ext .ts" }, "eslintConfig": { "extends": [ @@ -79,7 +81,11 @@ "@types/react": "^17.0.45", "@types/react-dom": "^17.0.11", "@types/uuid": "^8.3.4", - "autoprefixer": "^10.4.2", - "postcss": "^8.4.6" + "autoprefixer": "10.4.7", + "eslint": "^8.19.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-prettier": "^4.2.1", + "postcss": "^8.4.14", + "prettier": "^2.7.1" } } diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx index 9bd4ea2..407f11a 100644 --- a/services/frontend/src/App.tsx +++ b/services/frontend/src/App.tsx @@ -12,7 +12,7 @@ import { authSelf } from "./reducers"; import { refresh, self } from "./services/auth"; import SideBar from "./components/global/SideBar"; -import Projects from "./components/Projects" +import Projects from "./components/Projects"; import Project from "./components/Project"; import Profile from "./components/Profile"; import Signup from "./components/Auth/Signup"; @@ -33,16 +33,16 @@ export default function App() { const defaultProtectedRouteProps: Omit = { isAuthenticated: isAuthenticated, authenticationPath: "/login" - } + }; useEffect(() => { if (isAuthenticated) { self() .then(checkHttpStatus) - .then(data => { + .then((data) => { dispatch(authSelf(data)); }) - .catch(err => { + .catch((err) => { // since auth is set in localstorage, // try to refresh the existing token, // on error clear localstorage @@ -56,7 +56,7 @@ export default function App() { refresh() .then(checkHttpStatus) - .then(data => { + .then((data) => { const localData = localStorage.getItem(LOCAL_STORAGE); if (localData) { @@ -70,11 +70,11 @@ export default function App() { } } }) - .catch(err => { + .catch(() => { localStorage.removeItem(LOCAL_STORAGE); - }) + }); } - }) + }); } }, [dispatch, isAuthenticated]); @@ -84,15 +84,9 @@ export default function App() { - } - /> + } /> - } - /> + } /> } /> + } /> } /> @@ -130,5 +125,5 @@ export default function App() { - ) + ); } diff --git a/services/frontend/src/components/Auth/Login/index.tsx b/services/frontend/src/components/Auth/Login/index.tsx index c16b4a1..79ef7bb 100644 --- a/services/frontend/src/components/Auth/Login/index.tsx +++ b/services/frontend/src/components/Auth/Login/index.tsx @@ -22,37 +22,41 @@ const Login = (props: IProfileProps) => { username: "", password: "" }, - onSubmit: values => { + onSubmit: (values) => { const username = values.username; const password = values.password; setLoggingIn(true); + if (username && password) { logIn(username, password) .then(checkHttpStatus) - .then(data => { - localStorage.setItem(LOCAL_STORAGE, JSON.stringify({ - "access_token": data.access_token, - "refresh_token": data.refresh_token - })) - dispatch(authLoginSuccess(data)) + .then((data) => { + localStorage.setItem( + LOCAL_STORAGE, + JSON.stringify({ + access_token: data.access_token, + refresh_token: data.refresh_token + }) + ); + dispatch(authLoginSuccess(data)); navigate("/"); }) - .catch(err => { + .catch((err) => { if (err) { err.text().then((e: string) => { toaster(e, "error"); - }) + }); } - }).finally(() => { - setLoggingIn(false); }) + .finally(() => { + setLoggingIn(false); + }); } - }, + } }); return ( <> -

@@ -130,9 +134,7 @@ const Login = (props: IProfileProps) => { className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-2.5 py-1.5 bg-green-600 text-sm font-medium text-white hover:bg-green-700 sm:w-auto text-sm" >
- {loggingIn && - - } + {loggingIn && } Login
@@ -150,7 +152,7 @@ const Login = (props: IProfileProps) => {

- ) -} + ); +}; export default Login; diff --git a/services/frontend/src/components/Auth/Signup/index.tsx b/services/frontend/src/components/Auth/Signup/index.tsx index 6d2c5c2..ec85521 100644 --- a/services/frontend/src/components/Auth/Signup/index.tsx +++ b/services/frontend/src/components/Auth/Signup/index.tsx @@ -24,35 +24,39 @@ const Signup = (props: IProfileProps) => { password: "", confirmPassword: "" }, - onSubmit: values => { + onSubmit: (values) => { const username = values.username; const email = values.email; const password1 = values.password; const password2 = values.confirmPassword; - setSigningUp(true); + if (username && email && password1 && password2) { signup(username, email, password1, password2) .then(checkHttpStatus) - .then(data => { - localStorage.setItem(LOCAL_STORAGE, JSON.stringify({ - "access_token": data.access_token, - "refresh_token": data.refresh_token - })) - dispatch(authLoginSuccess(data)) + .then((data) => { + localStorage.setItem( + LOCAL_STORAGE, + JSON.stringify({ + access_token: data.access_token, + refresh_token: data.refresh_token + }) + ); + dispatch(authLoginSuccess(data)); navigate("/"); }) - .catch(err => { + .catch((err) => { if (err) { err.text().then((e: string) => { toaster(e, "error"); - }) + }); } - }).finally(() => { - setSigningUp(false); }) + .finally(() => { + setSigningUp(false); + }); } - }, + } }); return ( @@ -198,9 +202,7 @@ const Signup = (props: IProfileProps) => { className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-2.5 py-1.5 bg-green-600 text-sm font-medium text-white hover:bg-green-700 sm:w-auto text-sm" >
- {signingUp && - - } + {signingUp && } Signup
@@ -218,7 +220,7 @@ const Signup = (props: IProfileProps) => { - ) -} + ); +}; export default Signup; diff --git a/services/frontend/src/components/Canvas/Popover.tsx b/services/frontend/src/components/Canvas/Popover.tsx index 0cf4048..33b7c60 100644 --- a/services/frontend/src/components/Canvas/Popover.tsx +++ b/services/frontend/src/components/Canvas/Popover.tsx @@ -1,22 +1,30 @@ import { TrashIcon, PencilIcon } from "@heroicons/react/solid"; +import { CallbackFunction } from "../../types"; + export const Popover = ({ onEditClick, onDeleteClick }: { - onEditClick: Function - onDeleteClick: Function + onEditClick: CallbackFunction; + onDeleteClick: CallbackFunction; }) => { return (
- onDeleteClick()} className="w-3 h-3 text-red-400"> - onEditClick()} className="w-3 h-3"> + onDeleteClick()} + className="w-3 h-3 text-red-400" + > + onEditClick()} + className="w-3 h-3" + >
); -}; \ No newline at end of file +}; diff --git a/services/frontend/src/components/Canvas/index.tsx b/services/frontend/src/components/Canvas/index.tsx index 6bbe1f5..c107804 100644 --- a/services/frontend/src/components/Canvas/index.tsx +++ b/services/frontend/src/components/Canvas/index.tsx @@ -3,7 +3,7 @@ import { values } from "lodash"; import { v4 as uuidv4 } from "uuid"; import eventBus from "../../events/eventBus"; import { Popover } from "./Popover"; -import { IGraphData } from "../../types"; +import { IGraphData, CallbackFunction } from "../../types"; import { useJsPlumb } from "../useJsPlumb"; const CANVAS_ID: string = "canvas-container-" + uuidv4(); @@ -12,13 +12,13 @@ interface ICanvasProps { nodes: any; connections: any; canvasPosition: any; - onNodeUpdate: any; - onGraphUpdate: any; - onCanvasUpdate: any; - onConnectionAttached: any; - onConnectionDetached: any; - setNodeForEdit: any; - setNodeForDelete: any; + onNodeUpdate: CallbackFunction; + onGraphUpdate: CallbackFunction; + onCanvasUpdate: CallbackFunction; + onConnectionAttached: CallbackFunction; + onConnectionDetached: CallbackFunction; + setNodeForEdit: CallbackFunction; + setNodeForDelete: CallbackFunction; } export const Canvas: FC = (props) => { @@ -44,16 +44,18 @@ export const Canvas: FC = (props) => { const [_initX, _setInitX] = useState(0); const [_initY, _setInitY] = useState(0); - let translateWidth = (document.documentElement.clientWidth * (1 - _scale)) / 2; - let translateHeight = ((document.documentElement.clientHeight - 64) * (1 - _scale)) / 2; + const translateWidth = + (document.documentElement.clientWidth * (1 - _scale)) / 2; + const translateHeight = + ((document.documentElement.clientHeight - 64) * (1 - _scale)) / 2; const [containerCallbackRef, setZoom, setStyle, removeEndpoint] = useJsPlumb( nodes, connections, - ((graphData: IGraphData) => onGraphUpdate(graphData)), - ((positionData: any) => onNodeUpdate(positionData)), - ((connectionData: any) => onConnectionAttached(connectionData)), - ((connectionData: any) => onConnectionDetached(connectionData)) + (graphData: IGraphData) => onGraphUpdate(graphData), + (positionData: any) => onNodeUpdate(positionData), + (connectionData: any) => onConnectionAttached(connectionData), + (connectionData: any) => onConnectionDetached(connectionData) ); const onCanvasMousewheel = (e: any) => { @@ -66,12 +68,12 @@ export const Canvas: FC = (props) => { _setScale(_scale - _scale * 0.25); setScale(_scale - _scale * 0.25); } - } + }; const onCanvasMouseUpLeave = (e: any) => { if (dragging) { - let left = _left + e.pageX - _initX; - let top = _top + e.pageY - _initY; + const left = _left + e.pageX - _initX; + const top = _top + e.pageY - _initY; _setLeft(left); _setTop(top); @@ -81,7 +83,7 @@ export const Canvas: FC = (props) => { top: top }); } - } + }; const onCanvasMouseMove = (e: any) => { if (!dragging) { @@ -89,18 +91,18 @@ export const Canvas: FC = (props) => { } const styles = { - "left": _left + e.pageX - _initX + 'px', - "top": _top + e.pageY - _initY + 'px' - } + left: _left + e.pageX - _initX + "px", + top: _top + e.pageY - _initY + "px" + }; setStyle(styles); - } + }; const onCanvasMouseDown = (e: any) => { _setInitX(e.pageX); _setInitY(e.pageY); setDragging(true); - } + }; useEffect(() => { setZoom(_scale); @@ -114,9 +116,9 @@ export const Canvas: FC = (props) => { useEffect(() => { const styles = { - "left": _left + 'px', - "top": _top + 'px' - } + left: _left + "px", + top: _top + "px" + }; setStyle(styles); }, [_left, _top, setStyle]); @@ -132,7 +134,7 @@ export const Canvas: FC = (props) => { setNodeDragging(data.detail.message.id); }); - eventBus.on("EVENT_DRAG_STOP", (data: any) => { + eventBus.on("EVENT_DRAG_STOP", () => { setNodeDragging(null); }); @@ -141,36 +143,43 @@ export const Canvas: FC = (props) => { }); return () => { - eventBus.remove("NODE_DELETED", () => { }); - eventBus.remove("EVENT_DRAG_START", () => {}); - eventBus.remove("EVENT_DRAG_STOP", () => { }); + eventBus.remove("NODE_DELETED", () => undefined); + eventBus.remove("EVENT_DRAG_START", () => undefined); + eventBus.remove("EVENT_DRAG_STOP", () => undefined); }; }, []); return ( <> - {nodes && -
{ event.stopPropagation(); event.preventDefault(); }} + onContextMenu={(event) => { + event.stopPropagation(); + event.preventDefault(); + }} >
{values(nodes).map((x) => (
setNodeHovering(x.key)} @@ -180,7 +189,7 @@ export const Canvas: FC = (props) => { } }} > - {((nodeHovering === x.key) && (nodeDragging !== x.key)) && + {nodeHovering === x.key && nodeDragging !== x.key && ( { setNodeForEdit(x); @@ -189,7 +198,7 @@ export const Canvas: FC = (props) => { setNodeForDelete(x); }} > - } + )}
{x.configuration.prettyName} @@ -202,7 +211,7 @@ export const Canvas: FC = (props) => { ))}
- } + )} ); }; diff --git a/services/frontend/src/components/CodeEditor/index.tsx b/services/frontend/src/components/CodeEditor/index.tsx index c198d72..c439c7a 100644 --- a/services/frontend/src/components/CodeEditor/index.tsx +++ b/services/frontend/src/components/CodeEditor/index.tsx @@ -5,118 +5,118 @@ import { highlightSpecialChars, drawSelection, highlightActiveLine, - keymap, -} from '@codemirror/view' + keymap +} from "@codemirror/view"; import { jsonLanguage } from "@codemirror/lang-json"; import { yaml } from "@codemirror/legacy-modes/mode/yaml"; -import { history, historyKeymap } from '@codemirror/history' -import { foldGutter, foldKeymap } from '@codemirror/fold' -import { bracketMatching } from '@codemirror/matchbrackets' -import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets' -import { searchKeymap, highlightSelectionMatches } from '@codemirror/search' -import { autocompletion, completionKeymap } from '@codemirror/autocomplete' -import { rectangularSelection } from '@codemirror/rectangular-selection' -import { commentKeymap } from '@codemirror/comment' -import { lintKeymap } from '@codemirror/lint' -import { indentOnInput, LanguageSupport } from '@codemirror/language' -import { lineNumbers } from '@codemirror/gutter'; -import { defaultKeymap, indentMore, indentLess } from '@codemirror/commands' -import { defaultHighlightStyle } from '@codemirror/highlight' -import { solarizedDark } from './themes/ui/dark' -import darkHighlightStyle from './themes/highlight/dark' +import { history, historyKeymap } from "@codemirror/history"; +import { foldGutter, foldKeymap } from "@codemirror/fold"; +import { bracketMatching } from "@codemirror/matchbrackets"; +import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets"; +import { searchKeymap, highlightSelectionMatches } from "@codemirror/search"; +import { autocompletion, completionKeymap } from "@codemirror/autocomplete"; +import { rectangularSelection } from "@codemirror/rectangular-selection"; +import { commentKeymap } from "@codemirror/comment"; +import { lintKeymap } from "@codemirror/lint"; +import { indentOnInput, LanguageSupport } from "@codemirror/language"; +import { lineNumbers } from "@codemirror/gutter"; +import { defaultKeymap, indentMore, indentLess } from "@codemirror/commands"; +import { defaultHighlightStyle } from "@codemirror/highlight"; +import { solarizedDark } from "./themes/ui/dark"; +import darkHighlightStyle from "./themes/highlight/dark"; import useCodeMirror from "./useCodeMirror"; - interface ICodeEditorProps { data: string; language: string; onChange: any; disabled: boolean; lineWrapping: boolean; - height: number + height: number; } const languageExtensions: any = { json: [new LanguageSupport(jsonLanguage)], yaml: [StreamLanguage.define(yaml)], blank: undefined -} +}; const themeExtensions = { light: [defaultHighlightStyle], dark: [solarizedDark] -} +}; const highlightExtensions = { dark: darkHighlightStyle -} +}; const CodeEditor = (props: ICodeEditorProps) => { const { data, language, onChange, disabled, lineWrapping, height } = props; - const extensions = [[ - lineNumbers(), - highlightSpecialChars(), - history(), - foldGutter(), - drawSelection(), - indentOnInput(), - bracketMatching(), - closeBrackets(), - autocompletion(), - rectangularSelection(), - highlightActiveLine(), - highlightSelectionMatches(), - ...(languageExtensions[language] - ? languageExtensions[language] - : []), - keymap.of([ - ...closeBracketsKeymap, - ...defaultKeymap, - ...searchKeymap, - ...historyKeymap, - ...foldKeymap, - ...commentKeymap, - ...completionKeymap, - ...lintKeymap, - { - key: "Tab", - preventDefault: true, - run: indentMore, - }, - { - key: "Shift-Tab", - preventDefault: true, - run: indentLess, - }, - /*{ + const extensions = [ + [ + lineNumbers(), + highlightSpecialChars(), + history(), + foldGutter(), + drawSelection(), + indentOnInput(), + bracketMatching(), + closeBrackets(), + autocompletion(), + rectangularSelection(), + highlightActiveLine(), + highlightSelectionMatches(), + ...(languageExtensions[language] ? languageExtensions[language] : []), + keymap.of([ + ...closeBracketsKeymap, + ...defaultKeymap, + ...searchKeymap, + ...historyKeymap, + ...foldKeymap, + ...commentKeymap, + ...completionKeymap, + ...lintKeymap, + { + key: "Tab", + preventDefault: true, + run: indentMore + }, + { + key: "Shift-Tab", + preventDefault: true, + run: indentLess + } + /*{ key: "Ctrl-S", preventDefault: true, run: indentLess, }*/ - ]), - EditorView.updateListener.of((update) => { - if (update.changes) { - onChange(update.state.doc.toString()); - } - }), - EditorState.allowMultipleSelections.of(true), - ...(disabled - ? [EditorState.readOnly.of(true)] - : [EditorState.readOnly.of(false)]), - ...(lineWrapping - ? [EditorView.lineWrapping] - : []), - ...[themeExtensions["dark"]], - ...[highlightExtensions["dark"]] - ]]; + ]), + EditorView.updateListener.of((update) => { + if (update.changes) { + onChange(update.state.doc.toString()); + } + }), + EditorState.allowMultipleSelections.of(true), + ...(disabled + ? [EditorState.readOnly.of(true)] + : [EditorState.readOnly.of(false)]), + ...(lineWrapping ? [EditorView.lineWrapping] : []), + ...[themeExtensions["dark"]], + ...[highlightExtensions["dark"]] + ] + ]; const { ref } = useCodeMirror(extensions, data); return ( -
-
- ) -} +
+ ); +}; export default CodeEditor; diff --git a/services/frontend/src/components/CodeEditor/themes/highlight/dark.ts b/services/frontend/src/components/CodeEditor/themes/highlight/dark.ts index 7beca69..a7130f8 100644 --- a/services/frontend/src/components/CodeEditor/themes/highlight/dark.ts +++ b/services/frontend/src/components/CodeEditor/themes/highlight/dark.ts @@ -2,7 +2,7 @@ // Copyright (C) 2018-2021 by Marijn Haverbeke and others // MIT License: https://github.com/codemirror/theme-one-dark/blob/main/LICENSE -import { HighlightStyle, tags as t } from "@codemirror/highlight" +import { HighlightStyle, tags as t } from "@codemirror/highlight"; const chalky = "#e5c07b", coral = "#e06c75", @@ -13,7 +13,7 @@ const chalky = "#e5c07b", malibu = "#61afef", sage = "#98c379", whiskey = "#d19a66", - violet = "#c678dd" + violet = "#c678dd"; /// The highlighting style for code in the One Dark theme. export default HighlightStyle.define([ @@ -42,11 +42,28 @@ export default HighlightStyle.define([ color: ivory }, { - tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], + tag: [ + t.typeName, + t.className, + t.number, + t.changed, + t.annotation, + t.modifier, + t.self, + t.namespace + ], color: chalky }, { - tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], + tag: [ + t.operator, + t.operatorKeyword, + t.url, + t.escape, + t.regexp, + t.link, + t.special(t.string) + ], color: cyan }, { @@ -78,5 +95,5 @@ export default HighlightStyle.define([ { tag: t.invalid, color: invalid - }, -]); \ No newline at end of file + } +]); diff --git a/services/frontend/src/components/CodeEditor/themes/ui/dark.ts b/services/frontend/src/components/CodeEditor/themes/ui/dark.ts index 8854fcf..d277535 100644 --- a/services/frontend/src/components/CodeEditor/themes/ui/dark.ts +++ b/services/frontend/src/components/CodeEditor/themes/ui/dark.ts @@ -1,93 +1,139 @@ -import { EditorView } from '@codemirror/view'; -import { HighlightStyle, tags } from '@codemirror/highlight'; +import { EditorView } from "@codemirror/view"; +import { HighlightStyle, tags } from "@codemirror/highlight"; -const base00 = '#1F2937', base01 = '#073642', base02 = '#586e75', base03 = '#657b83', base04 = '#839496', base05 = '#dfdfdf', base06 = '#efefef', base07 = '#fdf6e3', base_red = '#dc322f', base_orange = '#cb4b16', base_yellow = '#e9b100', base_green = '#cfec11', base_cyan = '#44e0d4', base_blue = '#75c6ff', base_violet = '#a1a6ff', base_magenta = '#d33682'; -const invalid = '#d30102', stone = base04, darkBackground = '#1F2937', highlightBackground = '#173541', background = base00, tooltipBackground = base01, selection = '#173541', cursor = base04; +const base00 = "#1F2937", + base01 = "#073642", + base02 = "#586e75", + base03 = "#657b83", + base04 = "#839496", + base05 = "#dfdfdf", + base06 = "#efefef", + base07 = "#fdf6e3", + base_red = "#dc322f", + base_orange = "#cb4b16", + base_yellow = "#e9b100", + base_green = "#cfec11", + base_cyan = "#44e0d4", + base_blue = "#75c6ff", + base_violet = "#a1a6ff", + base_magenta = "#d33682"; +const invalid = "#d30102", + stone = base04, + darkBackground = "#1F2937", + highlightBackground = "#173541", + background = base00, + tooltipBackground = base01, + selection = "#173541", + cursor = base04; /** The editor theme styles for Solarized Dark. */ -const solarizedDarkTheme = /*@__PURE__*/EditorView.theme({ - '&': { - fontSize: "10.5pt", - color: base05, - backgroundColor: background - }, - '.cm-content': { - caretColor: cursor - }, - '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor }, - '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: selection }, - '.cm-panels': { backgroundColor: darkBackground, color: base03 }, - '.cm-panels.cm-panels-top': { borderBottom: '2px solid black' }, - '.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' }, - '.cm-searchMatch': { - backgroundColor: '#72a1ff59', - outline: '1px solid #457dff' - }, - '.cm-searchMatch.cm-searchMatch-selected': { - backgroundColor: '#6199ff2f' - }, - '.cm-activeLine': { backgroundColor: highlightBackground }, - '.cm-selectionMatch': { backgroundColor: '#aafe661a' }, - '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { - outline: `1px solid ${base06}` - }, - '.cm-gutters': { - backgroundColor: darkBackground, - color: stone, - border: 'none' - }, - '.cm-activeLineGutter': { - backgroundColor: highlightBackground - }, - '.cm-foldPlaceholder': { - backgroundColor: 'transparent', - border: 'none', - color: '#ddd' - }, - '.cm-tooltip': { - border: 'none', - backgroundColor: tooltipBackground - }, - '.cm-tooltip .cm-tooltip-arrow:before': { - borderTopColor: 'transparent', - borderBottomColor: 'transparent' - }, - '.cm-tooltip .cm-tooltip-arrow:after': { - borderTopColor: tooltipBackground, - borderBottomColor: tooltipBackground - }, - '.cm-tooltip-autocomplete': { - '& > ul > li[aria-selected]': { - backgroundColor: highlightBackground, - color: base03 +const solarizedDarkTheme = /*@__PURE__*/ EditorView.theme( + { + "&": { + fontSize: "10.5pt", + color: base05, + backgroundColor: background + }, + ".cm-content": { + caretColor: cursor + }, + ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, + "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": + { backgroundColor: selection }, + ".cm-panels": { backgroundColor: darkBackground, color: base03 }, + ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, + ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, + ".cm-searchMatch": { + backgroundColor: "#72a1ff59", + outline: "1px solid #457dff" + }, + ".cm-searchMatch.cm-searchMatch-selected": { + backgroundColor: "#6199ff2f" + }, + ".cm-activeLine": { backgroundColor: highlightBackground }, + ".cm-selectionMatch": { backgroundColor: "#aafe661a" }, + "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { + outline: `1px solid ${base06}` + }, + ".cm-gutters": { + backgroundColor: darkBackground, + color: stone, + border: "none" + }, + ".cm-activeLineGutter": { + backgroundColor: highlightBackground + }, + ".cm-foldPlaceholder": { + backgroundColor: "transparent", + border: "none", + color: "#ddd" + }, + ".cm-tooltip": { + border: "none", + backgroundColor: tooltipBackground + }, + ".cm-tooltip .cm-tooltip-arrow:before": { + borderTopColor: "transparent", + borderBottomColor: "transparent" + }, + ".cm-tooltip .cm-tooltip-arrow:after": { + borderTopColor: tooltipBackground, + borderBottomColor: tooltipBackground + }, + ".cm-tooltip-autocomplete": { + "& > ul > li[aria-selected]": { + backgroundColor: highlightBackground, + color: base03 + } } - } -}, { dark: true }); + }, + { dark: true } +); /** The highlighting style for code in the Solarized Dark theme. */ -const solarizedDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([ +const solarizedDarkHighlightStyle = /*@__PURE__*/ HighlightStyle.define([ { tag: tags.keyword, color: base_green }, { - tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName], + tag: [ + tags.name, + tags.deleted, + tags.character, + tags.propertyName, + tags.macroName + ], color: base_cyan }, { tag: [tags.variableName], color: base05 }, - { tag: [/*@__PURE__*/tags.function(tags.variableName)], color: base_blue }, + { tag: [/*@__PURE__*/ tags.function(tags.variableName)], color: base_blue }, { tag: [tags.labelName], color: base_magenta }, { - tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], + tag: [ + tags.color, + /*@__PURE__*/ tags.constant(tags.name), + /*@__PURE__*/ tags.standard(tags.name) + ], color: base_yellow }, - { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: base_cyan }, + { + tag: [/*@__PURE__*/ tags.definition(tags.name), tags.separator], + color: base_cyan + }, { tag: [tags.brace], color: base_magenta }, { tag: [tags.annotation], color: invalid }, { - tag: [tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], + tag: [ + tags.number, + tags.changed, + tags.annotation, + tags.modifier, + tags.self, + tags.namespace + ], color: base_magenta }, { @@ -124,32 +170,35 @@ const solarizedDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([ }, { tag: [tags.string], color: base_yellow }, { - tag: [tags.url, tags.escape, /*@__PURE__*/tags.special(tags.string)], + tag: [tags.url, tags.escape, /*@__PURE__*/ tags.special(tags.string)], color: base_yellow }, { tag: [tags.meta], color: base_red }, - { tag: [tags.comment], color: base02, fontStyle: 'italic' }, - { tag: tags.strong, fontWeight: 'bold', color: base06 }, - { tag: tags.emphasis, fontStyle: 'italic', color: base_green }, - { tag: tags.strikethrough, textDecoration: 'line-through' }, + { tag: [tags.comment], color: base02, fontStyle: "italic" }, + { tag: tags.strong, fontWeight: "bold", color: base06 }, + { tag: tags.emphasis, fontStyle: "italic", color: base_green }, + { tag: tags.strikethrough, textDecoration: "line-through" }, { tag: tags.link, color: base_cyan, - textDecoration: 'underline', - textUnderlinePosition: 'under' + textDecoration: "underline", + textUnderlinePosition: "under" }, - { tag: tags.heading, fontWeight: 'bold', color: base_yellow }, - { tag: tags.heading1, fontWeight: 'bold', color: base07 }, + { tag: tags.heading, fontWeight: "bold", color: base_yellow }, + { tag: tags.heading1, fontWeight: "bold", color: base07 }, { tag: [tags.heading2, tags.heading3, tags.heading4], - fontWeight: 'bold', + fontWeight: "bold", color: base06 }, { tag: [tags.heading5, tags.heading6], color: base06 }, - { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: base_magenta }, + { + tag: [tags.atom, tags.bool, /*@__PURE__*/ tags.special(tags.variableName)], + color: base_magenta + }, { tag: [tags.processingInstruction, tags.inserted, tags.contentSeparator], color: base_red @@ -164,9 +213,6 @@ const solarizedDarkHighlightStyle = /*@__PURE__*/HighlightStyle.define([ Extension to enable the Solarized Dark theme (both the editor theme and the highlight style). */ -const solarizedDark = [ - solarizedDarkTheme, - solarizedDarkHighlightStyle -]; +const solarizedDark = [solarizedDarkTheme, solarizedDarkHighlightStyle]; export { solarizedDark, solarizedDarkHighlightStyle, solarizedDarkTheme }; diff --git a/services/frontend/src/components/CodeEditor/useCodeMirror.tsx b/services/frontend/src/components/CodeEditor/useCodeMirror.tsx index f38ac46..ee3862a 100644 --- a/services/frontend/src/components/CodeEditor/useCodeMirror.tsx +++ b/services/frontend/src/components/CodeEditor/useCodeMirror.tsx @@ -1,30 +1,30 @@ import { useCallback, useEffect, useState } from "react"; -import { EditorView } from '@codemirror/view' +import { EditorView } from "@codemirror/view"; import { EditorState } from "@codemirror/state"; import { Extension } from "@codemirror/state"; export default function useCodeMirror(extensions: Extension[], doc: any) { - const [element, setElement] = useState(); + const [element, setElement] = useState(); - const ref = useCallback((node: HTMLElement | null) => { - if (!node) return; + const ref = useCallback((node: HTMLElement | null) => { + if (!node) return; - setElement(node); - }, []); + setElement(node); + }, []); - useEffect(() => { - if (!element) return; + useEffect(() => { + if (!element) return; - const view = new EditorView({ - state: EditorState.create({ - doc: doc, - extensions: [...extensions], - }), - parent: element, - }); + const view = new EditorView({ + state: EditorState.create({ + doc: doc, + extensions: [...extensions] + }), + parent: element + }); - return () => view?.destroy(); - }, [element, extensions, doc]); + return () => view?.destroy(); + }, [element, extensions, doc]); - return { ref }; + return { ref }; } diff --git a/services/frontend/src/components/Modal/ConfirmDelete.tsx b/services/frontend/src/components/Modal/ConfirmDelete.tsx index 20e6f8d..2773d0e 100644 --- a/services/frontend/src/components/Modal/ConfirmDelete.tsx +++ b/services/frontend/src/components/Modal/ConfirmDelete.tsx @@ -11,7 +11,10 @@ const ModalConfirmDelete = (props: IModalConfirmDeleteProps) => { return (
-
+
@@ -29,7 +32,10 @@ const ModalConfirmDelete = (props: IModalConfirmDeleteProps) => {
-
@@ -54,8 +60,8 @@ const ModalConfirmDelete = (props: IModalConfirmDeleteProps) => { type="button" className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-3 py-1 bg-red-600 text-sm font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm" onClick={() => { - onHide() - onConfirm() + onHide(); + onConfirm(); }} > Delete @@ -65,7 +71,7 @@ const ModalConfirmDelete = (props: IModalConfirmDeleteProps) => {
- ) -} + ); +}; export default ModalConfirmDelete; diff --git a/services/frontend/src/components/Modal/Node/Container.tsx b/services/frontend/src/components/Modal/Node/Container.tsx index 35e766c..f95748b 100644 --- a/services/frontend/src/components/Modal/Node/Container.tsx +++ b/services/frontend/src/components/Modal/Node/Container.tsx @@ -5,7 +5,12 @@ const Container = (props: any) => { <>
- +
{
- +
{
- +
- ) -} + ); +}; export default Container; diff --git a/services/frontend/src/components/Modal/Node/Create.tsx b/services/frontend/src/components/Modal/Node/Create.tsx index 93d6755..e42b84d 100644 --- a/services/frontend/src/components/Modal/Node/Create.tsx +++ b/services/frontend/src/components/Modal/Node/Create.tsx @@ -5,11 +5,11 @@ import General from "./General"; import Container from "./Container"; import Resource from "./Resource"; import { initialValues, formatName } from "./../../../utils"; - +import { CallbackFunction } from "../../../types"; interface IModalProps { - onHide: any; - onAddEndpoint: Function; + onHide: CallbackFunction; + onAddEndpoint: CallbackFunction; } const ModalCreate = (props: IModalProps) => { @@ -18,7 +18,7 @@ const ModalCreate = (props: IModalProps) => { const formik = useFormik({ initialValues: { configuration: { - ...initialValues(), + ...initialValues() }, key: "template", type: "TEMPLATE", @@ -26,25 +26,36 @@ const ModalCreate = (props: IModalProps) => { outputs: [], config: {} }, - onSubmit: ((values, { setSubmitting }) => { - - }) + onSubmit: () => undefined }); const tabs = [ - { name: 'General', href: '#', current: true, hidden: false }, - { name: 'Container', href: '#', current: false, hidden: (formik.values.configuration.type === 'container' ? false : true) }, - { name: 'Resource', href: '#', current: false, hidden: (formik.values.configuration.type === 'resource' ? false : true) } + { name: "General", href: "#", current: true, hidden: false }, + { + name: "Container", + href: "#", + current: false, + hidden: formik.values.configuration.type === "container" ? false : true + }, + { + name: "Resource", + href: "#", + current: false, + hidden: formik.values.configuration.type === "resource" ? false : true + } ]; const classNames = (...classes: string[]) => { - return classes.filter(Boolean).join(' '); - } + return classes.filter(Boolean).join(" "); + }; return ( <>
-
+
@@ -68,7 +79,7 @@ const ModalCreate = (props: IModalProps) => { id="tabs" name="tabs" className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" - defaultValue={tabs.find((tab) => tab.current)!.name} + defaultValue={tabs.find((tab) => tab.current)?.name} > {tabs.map((tab) => ( @@ -79,21 +90,19 @@ const ModalCreate = (props: IModalProps) => {
@@ -127,7 +130,9 @@ const ModalCreate = (props: IModalProps) => { className="btn-util" type="button" onClick={() => { - formik.values.configuration.name = formatName(formik.values.configuration.prettyName); + formik.values.configuration.name = formatName( + formik.values.configuration.prettyName + ); onAddEndpoint(formik.values); formik.resetForm(); setOpenTab("General"); @@ -142,6 +147,6 @@ const ModalCreate = (props: IModalProps) => {
); -} +}; -export default ModalCreate +export default ModalCreate; diff --git a/services/frontend/src/components/Modal/Node/Edit.tsx b/services/frontend/src/components/Modal/Node/Edit.tsx index 725da85..3797451 100644 --- a/services/frontend/src/components/Modal/Node/Edit.tsx +++ b/services/frontend/src/components/Modal/Node/Edit.tsx @@ -5,18 +5,18 @@ import General from "./General"; import Container from "./Container"; import Resource from "./Resource"; import { initialValues, formatName } from "./../../../utils"; -import { IClientNodeItem } from "../../../types"; - +import { IClientNodeItem, CallbackFunction } from "../../../types"; interface IModalProps { node: IClientNodeItem | null; - onHide: any; - onUpdateEndpoint: any; + onHide: CallbackFunction; + onUpdateEndpoint: CallbackFunction; } const ModalEdit = (props: IModalProps) => { const { node, onHide, onUpdateEndpoint } = props; - const [selectedNode, setSelectedNode] = React.useState(null); + const [selectedNode, setSelectedNode] = + React.useState(null); const [openTab, setOpenTab] = React.useState("General"); const formik = useFormik({ initialValues: { @@ -24,19 +24,32 @@ const ModalEdit = (props: IModalProps) => { ...initialValues() } }, - onSubmit: ((values, { setSubmitting }) => { - - }) + onSubmit: () => undefined }); const tabs = [ - { name: 'General', href: '#', current: true, hidden: false }, - { name: 'Container', href: '#', current: false, hidden: (formik.values.configuration.type === 'container' ? false : true) }, - { name: 'Resource', href: '#', current: false, hidden: (formik.values.configuration.type === 'resource' ? false : true) } + { + name: "General", + href: "#", + current: true, + hidden: false + }, + { + name: "Container", + href: "#", + current: false, + hidden: formik.values.configuration.type === "container" ? false : true + }, + { + name: "Resource", + href: "#", + current: false, + hidden: formik.values.configuration.type === "resource" ? false : true + } ]; const classNames = (...classes: string[]) => { - return classes.filter(Boolean).join(' '); - } + return classes.filter(Boolean).join(" "); + }; React.useEffect(() => { if (node) { @@ -55,14 +68,17 @@ const ModalEdit = (props: IModalProps) => { React.useEffect(() => { return () => { formik.resetForm(); - } + }; }, []); return ( <>
-
+
@@ -86,7 +102,7 @@ const ModalEdit = (props: IModalProps) => { id="tabs" name="tabs" className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" - defaultValue={tabs.find((tab) => tab.current)!.name} + defaultValue={tabs.find((tab) => tab.current)?.name} > {tabs.map((tab) => ( @@ -103,15 +119,13 @@ const ModalEdit = (props: IModalProps) => { href={tab.href} className={classNames( tab.name === openTab - ? 'border-indigo-500 text-indigo-600' - : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300', - 'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm', - (tab.hidden) - ? 'hidden' - : '' + ? "border-indigo-500 text-indigo-600" + : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", + "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", + tab.hidden ? "hidden" : "" )} - aria-current={tab.current ? 'page' : undefined} - onClick={e => { + aria-current={tab.current ? "page" : undefined} + onClick={(e) => { e.preventDefault(); setOpenTab(tab.name); }} @@ -125,17 +139,11 @@ const ModalEdit = (props: IModalProps) => {
- {openTab === "General" && - - } + {openTab === "General" && } - {openTab === "Container" && - - } + {openTab === "Container" && } - {openTab === "Resource" && - - } + {openTab === "Resource" && }
@@ -145,8 +153,10 @@ const ModalEdit = (props: IModalProps) => { className="btn-util" type="button" onClick={() => { - let updated = { ...selectedNode }; - formik.values.configuration.name = formatName(formik.values.configuration.prettyName); + const updated = { ...selectedNode }; + formik.values.configuration.name = formatName( + formik.values.configuration.prettyName + ); updated.configuration = formik.values.configuration; onUpdateEndpoint(updated); }} @@ -160,6 +170,6 @@ const ModalEdit = (props: IModalProps) => {
); -} +}; -export default ModalEdit +export default ModalEdit; diff --git a/services/frontend/src/components/Modal/Node/General.tsx b/services/frontend/src/components/Modal/Node/General.tsx index f5d657b..1336e4a 100644 --- a/services/frontend/src/components/Modal/Node/General.tsx +++ b/services/frontend/src/components/Modal/Node/General.tsx @@ -1,6 +1,5 @@ import React from "react"; - const General = (props: any) => { const { formik } = props; @@ -8,7 +7,12 @@ const General = (props: any) => { <>
- +
{
- +