diff --git a/package-lock.json b/package-lock.json index f5238bf18..99503cd04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.12.0-pre-5", + "version": "1.12.0-pre-6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.12.0-pre-5", + "version": "1.12.0-pre-6", "hasInstallScript": true, "license": "ISC", "dependencies": { @@ -39,7 +39,6 @@ "react-diff-viewer-continued": "^3.4.0", "react-draggable": "^4.4.5", "react-international-phone": "^4.5.0", - "react-monaco-editor": "^0.54.0", "react-virtualized-sticky-tree": "^3.0.0-beta18", "sass": "^1.69.7", "tslib": "2.7.0" @@ -75,8 +74,6 @@ "json-schema": "^0.4.0", "lint-staged": "^12.5.0", "moment": "^2.29.4", - "monaco-editor": "0.44.0", - "monaco-yaml": "5.1.1", "prettier": "^3.1.1", "react-ga4": "^1.4.1", "react-toastify": "9.1.3", @@ -8527,12 +8524,6 @@ "node": ">=6" } }, - "node_modules/jsonc-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz", - "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==", - "dev": true - }, "node_modules/jsonfile": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", @@ -9304,96 +9295,6 @@ "node": "*" } }, - "node_modules/monaco-editor": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz", - "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==" - }, - "node_modules/monaco-languageserver-types": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/monaco-languageserver-types/-/monaco-languageserver-types-0.3.4.tgz", - "integrity": "sha512-d58sP5yNhjs8uG1ESXs0hFnuX2YfdMhiGeWhdgTUZyG9aaWgyI4dDwrK1khf1mPF2u9Sljv42sfYqPFZnqYMYg==", - "dev": true, - "dependencies": { - "monaco-types": "^0.1.0", - "vscode-languageserver-protocol": "^3.0.0", - "vscode-uri": "^3.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/remcohaszing" - } - }, - "node_modules/monaco-marker-data-provider": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.2.4.tgz", - "integrity": "sha512-4DsPgsAqpTyUDs3humXRBPUJoihTv+L6v9aupQWD80X2YXaCXUd11mWYeSCYHuPgdUmjFaNWCEOjQ6ewf/QA1Q==", - "dev": true, - "dependencies": { - "monaco-types": "^0.1.0" - }, - "funding": { - "url": "https://github.com/sponsors/remcohaszing" - } - }, - "node_modules/monaco-types": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/monaco-types/-/monaco-types-0.1.0.tgz", - "integrity": "sha512-aWK7SN9hAqNYi0WosPoMjenMeXJjwCxDibOqWffyQ/qXdzB/86xshGQobRferfmNz7BSNQ8GB0MD0oby9/5fTQ==", - "dev": true, - "funding": { - "url": "https://github.com/sponsors/remcohaszing" - } - }, - "node_modules/monaco-worker-manager": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz", - "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==", - "dev": true, - "peerDependencies": { - "monaco-editor": ">=0.30.0" - } - }, - "node_modules/monaco-yaml": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-5.1.1.tgz", - "integrity": "sha512-BuZ0/ZCGjrPNRzYMZ/MoxH8F/SdM+mATENXnpOhDYABi1Eh+QvxSszEct+ACSCarZiwLvy7m6yEF/pvW8XJkyQ==", - "dev": true, - "dependencies": { - "@types/json-schema": "^7.0.0", - "jsonc-parser": "^3.0.0", - "monaco-languageserver-types": "^0.3.0", - "monaco-marker-data-provider": "^1.0.0", - "monaco-types": "^0.1.0", - "monaco-worker-manager": "^2.0.0", - "path-browserify": "^1.0.0", - "prettier": "^2.0.0", - "vscode-languageserver-textdocument": "^1.0.0", - "vscode-languageserver-types": "^3.0.0", - "vscode-uri": "^3.0.0", - "yaml": "^2.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/remcohaszing" - }, - "peerDependencies": { - "monaco-editor": ">=0.36" - } - }, - "node_modules/monaco-yaml/node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "dev": true, - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, "node_modules/moo": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz", @@ -10450,19 +10351,6 @@ "moment": ">=1.6.0" } }, - "node_modules/react-monaco-editor": { - "version": "0.54.0", - "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.54.0.tgz", - "integrity": "sha512-9JwO69851mfpuhYLHlKbae7omQWJ/2ICE2lbL0VHyNyZR8rCOH7440u+zAtDgiOMpLwmYdY1sEZCdRefywX6GQ==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@types/react": ">=16 <= 18", - "monaco-editor": "^0.39.0", - "react": ">=16 <= 18" - } - }, "node_modules/react-outside-click-handler": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz", @@ -12728,37 +12616,6 @@ "@esbuild/win32-x64": "0.21.5" } }, - "node_modules/vscode-jsonrpc": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz", - "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==", - "dev": true, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/vscode-languageserver-protocol": { - "version": "3.17.5", - "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz", - "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==", - "dev": true, - "dependencies": { - "vscode-jsonrpc": "8.2.0", - "vscode-languageserver-types": "3.17.5" - } - }, - "node_modules/vscode-languageserver-textdocument": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz", - "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==", - "dev": true - }, - "node_modules/vscode-languageserver-types": { - "version": "3.17.5", - "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz", - "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==", - "dev": true - }, "node_modules/vscode-uri": { "version": "3.0.8", "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz", diff --git a/package.json b/package.json index 9ed6e2734..5e737b1ae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.12.0-pre-5", + "version": "1.12.0-pre-6", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", @@ -66,8 +66,6 @@ "json-schema": "^0.4.0", "lint-staged": "^12.5.0", "moment": "^2.29.4", - "monaco-editor": "0.44.0", - "monaco-yaml": "5.1.1", "prettier": "^3.1.1", "react-ga4": "^1.4.1", "react-toastify": "9.1.3", @@ -127,7 +125,6 @@ "react-diff-viewer-continued": "^3.4.0", "react-draggable": "^4.4.5", "react-international-phone": "^4.5.0", - "react-monaco-editor": "^0.54.0", "react-virtualized-sticky-tree": "^3.0.0-beta18", "sass": "^1.69.7", "tslib": "2.7.0" @@ -138,9 +135,6 @@ "react": "^17.0.2", "react-dom": "^17.0.2" }, - "react-monaco-editor": { - "monaco-editor": "0.44.0" - }, "vite-plugin-svgr": { "vite": "5.4.17" }, diff --git a/src/Common/CodeEditor/CodeEditor.reducer.ts b/src/Common/CodeEditor/CodeEditor.reducer.ts deleted file mode 100644 index 1def619f1..000000000 --- a/src/Common/CodeEditor/CodeEditor.reducer.ts +++ /dev/null @@ -1,91 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import YAML from 'yaml' - -import { noop, YAMLStringify } from '@Common/Helper' - -import { MODES } from '../Constants' -import { Action, CodeEditorInitialValueType, CodeEditorState } from './types' -import { getCodeEditorThemeFromAppTheme } from './utils' - -export const CodeEditorReducer = (state: CodeEditorState, action: Action) => { - switch (action.type) { - case 'changeLanguage': - return { ...state, mode: action.value } - case 'setDiff': - return { ...state, diffMode: action.value } - case 'setTheme': - return { ...state, theme: action.value } - case 'setCode': - return { ...state, code: action.value } - case 'setDefaultCode': - return { ...state, defaultCode: action.value } - case 'setHeight': - return { ...state, height: action.value.toString() } - default: - return state - } -} - -export const parseValueToCode = (value: string, mode: string, tabSize: number) => { - let obj = null - - try { - obj = JSON.parse(value) - } catch { - try { - obj = YAML.parse(value) - } catch { - noop() - } - } - - let final = value - - if (obj) { - switch (mode) { - case MODES.JSON: - final = JSON.stringify(obj, null, tabSize) - break - case MODES.YAML: - final = YAMLStringify(obj) - break - default: - break - } - } - - return final -} - -export const initialState = ({ - mode, - theme, - value, - defaultValue, - diffView, - noParsing, - tabSize, - appTheme, -}: CodeEditorInitialValueType): CodeEditorState => ({ - mode: mode as MODES, - theme: getCodeEditorThemeFromAppTheme(theme, appTheme), - code: noParsing ? value : parseValueToCode(value, mode, tabSize), - defaultCode: noParsing ? defaultValue : parseValueToCode(defaultValue, mode, tabSize), - diffMode: diffView, - noParsing: [MODES.JSON, MODES.YAML].includes(mode as MODES) ? noParsing : true, -}) diff --git a/src/Common/CodeEditor/CodeEditor.tsx b/src/Common/CodeEditor/CodeEditor.tsx deleted file mode 100644 index d3e755da8..000000000 --- a/src/Common/CodeEditor/CodeEditor.tsx +++ /dev/null @@ -1,556 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react' -import MonacoEditor, { ChangeHandler, DiffEditorDidMount, EditorDidMount, MonacoDiffEditor } from 'react-monaco-editor' -import ReactGA from 'react-ga4' -import * as monaco from 'monaco-editor/esm/vs/editor/editor.api' -import { configureMonacoYaml } from 'monaco-yaml' - -import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg' -import { ReactComponent as ICCompare } from '@Icons/ic-compare.svg' -import { useTheme } from '@Shared/Providers' -import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg' -import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamation.svg' -import './codeEditor.scss' -import 'monaco-editor' - -import { cleanKubeManifest, useEffectAfterMount, useJsonYaml } from '../Helper' -import { useWindowSize } from '../Hooks' -import Select from '../Select/Select' -import RadioGroup from '../RadioGroup/RadioGroup' -import { ClipboardButton } from '../ClipboardButton/ClipboardButton' -import { Progressing } from '../Progressing' -import { - CodeEditorComposition, - CodeEditorHeaderComposition, - CodeEditorHeaderInterface, - CodeEditorInterface, - CodeEditorThemesKeys, - InformationBarProps, -} from './types' -import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer' -import { DEFAULT_JSON_SCHEMA_URI, MODES } from '../Constants' -import { getCodeEditorThemeFromAppTheme } from './utils' - -const CodeEditorContext = React.createContext(null) - -function useCodeEditorContext() { - const context = React.useContext(CodeEditorContext) - if (!context) { - throw new Error(`cannot be rendered outside the component`) - } - return context -} - -const INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT = 100 - -const CodeEditor: React.FC & CodeEditorComposition = React.memo( - ({ - value, - mode = MODES.JSON, - noParsing = false, - defaultValue = '', - children, - tabSize = 2, - lineDecorationsWidth = 0, - height = 450, - inline = false, - shebang = '', - onChange, - readOnly, - diffView, - theme, - loading, - customLoader, - focus, - validatorSchema, - schemaURI = DEFAULT_JSON_SCHEMA_URI, - isKubernetes = true, - cleanData = false, - onBlur, - onFocus, - adjustEditorHeightToContent = false, - disableSearch = false, - originalEditable = false, - }) => { - const { appTheme } = useTheme() - - if (cleanData) { - value = cleanKubeManifest(value) - defaultValue = cleanKubeManifest(defaultValue) - } - - const editorRef = useRef(null) - const monacoRef = useRef(null) - const { width, height: windowHeight } = useWindowSize() - const memoisedReducer = React.useCallback(CodeEditorReducer, []) - const [state, dispatch] = useReducer( - memoisedReducer, - initialState({ - mode, - theme, - value, - defaultValue, - diffView, - noParsing, - tabSize, - appTheme, - }), - ) - const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing) - const [, originalJson, originalYaml] = useJsonYaml(state.defaultCode, tabSize, state.mode, !state.noParsing) - const [contentHeight, setContentHeight] = useState( - adjustEditorHeightToContent ? INITIAL_HEIGHT_WHEN_DYNAMIC_HEIGHT : height, - ) - // TODO: upgrade to 0.56.2 to remove this - const onChangeRef = useRef(onChange) - onChangeRef.current = onChange - monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, { - base: 'vs-dark', - inherit: true, - rules: [ - // @ts-ignore - { background: '#181920' }, - ], - colors: { - 'editor.background': '#181920', - }, - }) - - monaco.editor.defineTheme(CodeEditorThemesKeys.networkStatusInterface, { - base: 'vs-dark', - inherit: true, - rules: [ - // @ts-ignore - { background: '#1A1A1A' }, - ], - colors: { - 'editor.background': '#1A1A1A', - }, - }) - - useEffect(() => { - dispatch({ type: 'setTheme', value: getCodeEditorThemeFromAppTheme(theme, appTheme) }) - }, [appTheme]) - - useEffect(() => { - const rule = !disableSearch - ? null - : monaco.editor.addKeybindingRule({ - command: null, - keybinding: monaco.KeyCode.KeyF | monaco.KeyMod.CtrlCmd, - }) - return () => { - rule?.dispose() - } - }, [disableSearch]) - - const editorDidMount: EditorDidMount = (editor) => { - if ( - mode === MODES.YAML && - editor && - typeof editor.getModel === 'function' && - typeof editor.getModel().updateOptions === 'function' - ) { - editor.getModel().updateOptions({ tabSize: 2 }) - } - - if (editor) { - if (typeof editor.onDidFocusEditorWidget === 'function' && typeof onFocus === 'function') { - editor.onDidFocusEditorWidget(onFocus) - } - - if (typeof editor.onDidBlurEditorWidget === 'function' && typeof onBlur === 'function') { - editor.onDidBlurEditorWidget(onBlur) - } - } - - if (adjustEditorHeightToContent && editor) { - editor.onDidContentSizeChange(() => { - setContentHeight(editor.getContentHeight()) - }) - setContentHeight(editor.getContentHeight()) - } - - editorRef.current = editor - monacoRef.current = monaco - } - - const diffEditorDidMount: DiffEditorDidMount = (editor, monaco) => { - const originalEditor = editor.getOriginalEditor() - const modifiedEditor = editor.getModifiedEditor() - - if (adjustEditorHeightToContent) { - originalEditor.onDidContentSizeChange(() => { - setContentHeight( - Math.max( - typeof contentHeight === 'number' ? contentHeight : Number.MIN_SAFE_INTEGER, - originalEditor.getContentHeight(), - ), - ) - }) - - modifiedEditor.onDidContentSizeChange(() => { - setContentHeight( - Math.max( - typeof contentHeight === 'number' ? contentHeight : Number.MIN_SAFE_INTEGER, - modifiedEditor.getContentHeight(), - ), - ) - }) - - setContentHeight(Math.max(originalEditor.getContentHeight(), modifiedEditor.getContentHeight())) - } - if (originalEditable) { - originalEditor.onDidChangeModelContent(() => { - codeEditorOnChange(modifiedEditor.getValue(), originalEditor.getValue()) - }) - } - - editorRef.current = editor - monacoRef.current = monaco - } - - const editorHeight = useMemo(() => { - if (!adjustEditorHeightToContent) { - return height - } - return contentHeight - }, [height, contentHeight, adjustEditorHeightToContent]) - - useEffect(() => { - if (!validatorSchema) { - return - } - const config = configureMonacoYaml(monaco, { - enableSchemaRequest: true, - isKubernetes, - schemas: [ - { - uri: schemaURI, - fileMatch: ['*'], // associate with our model - schema: validatorSchema, - }, - ], - }) - return () => { - config.dispose() - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [validatorSchema, schemaURI]) - useEffect(() => { - if (!editorRef.current) { - return - } - editorRef.current.updateOptions({ readOnly }) - }, [readOnly]) - - useEffect(() => { - if (!editorRef.current) { - return - } - editorRef.current.layout() - }, [width, windowHeight]) - - const setCode = (value: string, originalValue: string) => { - dispatch({ type: 'setCode', value }) - dispatch({ type: 'setDefaultCode', value: originalValue }) - onChangeRef.current?.(value, originalValue) - } - - useEffectAfterMount(() => { - if (noParsing) { - setCode(value, defaultValue) - - return - } - - if (value === state.code) { - return - } - - setCode(parseValueToCode(value, state.mode, tabSize), parseValueToCode(defaultValue, state.mode, tabSize)) - }, [value, defaultValue, noParsing]) - - useEffect(() => { - dispatch({ type: 'setDiff', value: diffView }) - }, [diffView]) - - useEffect(() => { - if (focus) { - editorRef.current.focus() - } - }, [focus]) - - const codeEditorOnChange = (newValue: string, newOriginalValue: string) => { - setCode(newValue, newOriginalValue) - } - - const handleOnChange: ChangeHandler = (newValue) => { - codeEditorOnChange(newValue, editorRef.current?.getOriginalEditor?.().getValue?.() ?? '') - } - - function handleLanguageChange(mode: 'json' | 'yaml') { - dispatch({ type: 'changeLanguage', value: mode }) - setCode(mode === 'json' ? json : yamlCode, mode === 'json' ? originalJson : originalYaml) - } - - const options: monaco.editor.IEditorConstructionOptions = { - selectOnLineNumbers: true, - roundedSelection: false, - readOnly, - lineDecorationsWidth, - automaticLayout: true, - scrollBeyondLastLine: false, - ...(adjustEditorHeightToContent - ? { - overviewRulerLanes: adjustEditorHeightToContent ? 0 : 1, - } - : {}), - minimap: { - enabled: false, - }, - scrollbar: { - alwaysConsumeMouseWheel: false, - vertical: inline ? 'hidden' : 'auto', - ...(adjustEditorHeightToContent - ? { - vertical: 'hidden', - verticalScrollbarSize: 0, - verticalSliderSize: 0, - } - : {}), - }, - lineNumbers(lineNumber) { - return `${lineNumber}` - }, - } - - const diffViewOptions: monaco.editor.IDiffEditorConstructionOptions = { - ...options, - originalEditable: originalEditable && !readOnly, - useInlineViewWhenSpaceIsLimited: false, - } - - return ( - - {children} - {loading ? ( - - ) : ( - <> - {shebang &&
{shebang}
} - {state.diffMode ? ( - - ) : ( - - )} - - )} - - ) - }, -) - -const Header: React.FC & CodeEditorHeaderComposition = ({ - children, - className, - hideDefaultSplitHeader, -}) => { - const { defaultValue, state } = useCodeEditorContext() - return ( -
-
- {children} - {!hideDefaultSplitHeader && defaultValue && } -
- {state.diffMode ?
: null} -
- ) -} - -const ThemeChanger = ({}) => { - const { readOnly, state, dispatch } = useCodeEditorContext() - function handleChangeTheme(e) { - dispatch({ type: 'setTheme', value: e.target.value }) - } - - const themes = ['vs', 'vs-dark'] - return ( - - ) -} - -const LanguageChanger = ({}) => { - const { readOnly, handleLanguageChange, state } = useCodeEditorContext() - if (state.noParsing) { - return null - } - return ( -
- { - ReactGA.event({ - category: 'JSON-YAML Switch', - action: `${event.target.value} view`, - }) - handleLanguageChange(event.target.value) - }} - > - JSON - YAML - -
- ) -} - -const ValidationError = () => { - const { error } = useCodeEditorContext() - return error ?
{error}
: null -} - -const Warning: React.FC = (props) => ( -
- - {props.text} - {props.children} -
-) - -const ErrorBar: React.FC = (props) => ( -
- - {props.text} - {props.children} -
-) - -const Information: React.FC = (props) => ( -
- - {props.text} - {props.children} -
-) - -const Clipboard = () => { - const { state } = useCodeEditorContext() - return -} - -const SplitPane = ({}) => { - const { state, dispatch, readOnly } = useCodeEditorContext() - function handleToggle(e) { - if (readOnly) { - return - } - dispatch({ type: 'setDiff', value: !state.diffMode }) - } - return ( -
- - {state.diffMode ? 'Hide comparison' : 'Compare with default'} -
- ) -} -// TODO: CodeEditor should be composed of CodeEditorPlaceholder -const CodeEditorPlaceholder = ({ className = '', style = {}, customLoader }): JSX.Element => { - const { height } = useCodeEditorContext() - - if (customLoader) { - return customLoader - } - - return ( -
-
-
- -
-
-
- ) -} - -const Container = ({ - children, - flexExpand, - overflowHidden, -}: { - children: React.ReactNode - flexExpand?: boolean - overflowHidden?: boolean -}) => ( -
- {children} -
-) - -CodeEditor.LanguageChanger = LanguageChanger -CodeEditor.ThemeChanger = ThemeChanger -CodeEditor.ValidationError = ValidationError -CodeEditor.Clipboard = Clipboard -CodeEditor.Header = Header -CodeEditor.Warning = Warning -CodeEditor.ErrorBar = ErrorBar -CodeEditor.Information = Information -CodeEditor.Container = Container - -export default CodeEditor diff --git a/src/Common/CodeEditor/codeEditor.scss b/src/Common/CodeEditor/codeEditor.scss deleted file mode 100644 index 9415f8385..000000000 --- a/src/Common/CodeEditor/codeEditor.scss +++ /dev/null @@ -1,133 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - - .code-editor__header { - .radio-group { - height: 24px; - overflow: hidden; - } - - .radio-group input[type='checkbox']:checked + .radio__item-label { - background: var(--N700); - border-radius: 0; - color: var(--N0); - } - - .radio__item-label { - padding: 0 8px; - display: inline-block; - width: 100%; - height: 100%; - line-height: 24px; - cursor: pointer; - } - - .radio-group { - padding: 0; - } - - .code-editor__split-pane { - color: var(--N700); - margin-left: auto; - fill: var(--N700); - } - - label.form__error { - margin-left: 8px; - } - - button.clipboard { - margin-left: auto; - height: 20px; - width: 20px; - padding: 0; - background: transparent; - border: unset; - outline: unset; - - svg { - height: 100%; - width: 100%; - } - - &:active { - svg { - height: 90%; - width: 90%; - - path { - fill: var(--G500); - } - } - } - } -} - -.code-editor__header-error { - padding: 8px 16px; - font-size: 12px; - border: solid 1px var(--N200); - background-color: var(--R100); - font-weight: normal; - font-stretch: normal; - font-style: normal; - line-height: 1.33; - letter-spacing: normal; - color: var(--R500); -} - -.code-editor-container { - width: 100%; - border: 1px solid var(--N200); - border-radius: 4px; - overflow: hidden; -} - -.react-monaco-editor-container { - min-height: 300px; -} - -.code-editor__information-info-icon { - width: 16px; - height: 16px; - margin: 0 8px 0 0; - vertical-align: bottom; -} - -.code-editor__toggle { - .toggle__switch { - width: 32px; - margin: 0 12px; - } - - color: var(--N0); -} - -.monaco-editor-hover { - margin-left: 40px; -} - -.monaco-scrollable-element { - & > .visible { - z-index: 9; - } -} - -.code-editor-shebang { - padding: 0 52px; - color: var(--N900); - opacity: 0.6; -} diff --git a/src/Common/CodeEditor/index.ts b/src/Common/CodeEditor/index.ts deleted file mode 100644 index b3fc4c73c..000000000 --- a/src/Common/CodeEditor/index.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { default as CodeEditor } from './CodeEditor' -export * from './types' diff --git a/src/Common/CodeEditor/types.ts b/src/Common/CodeEditor/types.ts deleted file mode 100644 index 85f9a7813..000000000 --- a/src/Common/CodeEditor/types.ts +++ /dev/null @@ -1,136 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { AppThemeType } from '@Shared/Providers' - -import { MODES } from '../Constants' - -export interface InformationBarProps { - text: string - className?: string - children?: React.ReactNode -} - -export enum CodeEditorThemesKeys { - vsDarkDT = 'vs-dark--dt', - vs = 'vs', - networkStatusInterface = 'network-status-interface', -} - -interface CodeEditorBaseInterface { - value?: string - lineDecorationsWidth?: number - responseType?: string - onChange?: (value: string, defaultValue: string) => void - onBlur?: () => void - onFocus?: () => void - children?: any - defaultValue?: string - mode?: MODES | string - tabSize?: number - readOnly?: boolean - noParsing?: boolean - inline?: boolean - shebang?: string | JSX.Element - diffView?: boolean - loading?: boolean - customLoader?: JSX.Element - theme?: CodeEditorThemesKeys - original?: string - focus?: boolean - validatorSchema?: any - isKubernetes?: boolean - cleanData?: boolean - schemaURI?: string - /** - * If true, disable the in-built search of monaco editor - * @default false - */ - disableSearch?: boolean - /** - * If true, Enable original value editing of monaco editor - * @default false - */ - originalEditable?: boolean -} - -export type CodeEditorInterface = CodeEditorBaseInterface & - ( - | { - adjustEditorHeightToContent?: boolean - height?: never - } - | { - adjustEditorHeightToContent?: never - height?: number | string - } - ) - -export interface CodeEditorHeaderInterface { - children?: any - className?: string - hideDefaultSplitHeader?: boolean -} -export interface CodeEditorComposition { - Header?: React.FC - LanguageChanger?: React.FC - ThemeChanger?: React.FC - ValidationError?: React.FC - Clipboard?: React.FC - Warning?: React.FC - ErrorBar?: React.FC - Information?: React.FC - Container?: React.FC<{ children: React.ReactNode; flexExpand?: boolean; overflowHidden?: boolean }> -} -export interface CodeEditorHeaderComposition { - LanguageChanger?: React.FC - ThemeChanger?: React.FC - ValidationError?: React.FC - Clipboard?: React.FC -} - -type ActionTypes = 'changeLanguage' | 'setDiff' | 'setTheme' | 'setCode' | 'setDefaultCode' | 'setHeight' - -export interface Action { - type: ActionTypes - value: any -} - -export interface CodeEditorInitialValueType extends Pick { - mode: string - diffView: boolean - value: string - defaultValue: string - noParsing?: boolean - tabSize: number - appTheme: AppThemeType -} - -export interface CodeEditorState { - mode: MODES - diffMode: boolean - theme: CodeEditorThemesKeys - code: string - defaultCode: string - noParsing: boolean -} - -export enum CodeEditorActionTypes { - reInit = 'reInit', - submitLoading = 'submitLoading', - overrideLoading = 'overrideLoading', - success = 'success', -} diff --git a/src/Common/CodeEditor/utils.ts b/src/Common/CodeEditor/utils.ts deleted file mode 100644 index 675519195..000000000 --- a/src/Common/CodeEditor/utils.ts +++ /dev/null @@ -1,32 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { AppThemeType } from '@Shared/Providers' - -import { CodeEditorInterface, CodeEditorThemesKeys } from './types' - -export const getCodeEditorThemeFromAppTheme = ( - editorTheme: CodeEditorInterface['theme'], - appTheme: AppThemeType, -): CodeEditorInterface['theme'] => { - if (!editorTheme) { - const editorThemeBasedOnAppTheme = - appTheme === AppThemeType.dark ? CodeEditorThemesKeys.vsDarkDT : CodeEditorThemesKeys.vs - return editorThemeBasedOnAppTheme - } - - return editorTheme -} diff --git a/src/Common/index.ts b/src/Common/index.ts index a1aadbe5a..1a91abe1f 100644 --- a/src/Common/index.ts +++ b/src/Common/index.ts @@ -22,7 +22,6 @@ export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSel export * from './Checkbox' export * from './CIPipeline.Types' export { ClipboardButton } from './ClipboardButton/ClipboardButton' -export * from './CodeEditor/types' export * from './Common.service' export * from './Constants' export * from './CustomTagSelector' diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx index d121b3519..cc9448003 100644 --- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx +++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryDiffView.tsx @@ -18,7 +18,7 @@ import { useMemo, useState } from 'react' import { useParams } from 'react-router-dom' import Tippy from '@tippyjs/react' -import { CodeEditor } from '@Shared/Components/CodeEditorWrapper' +import { CodeEditor } from '@Shared/Components/CodeEditor' import { renderDiffViewNoDifferenceState } from '@Shared/Components/DeploymentConfigDiff' import { DiffViewer } from '@Shared/Components/DiffViewer' @@ -79,19 +79,12 @@ const DeploymentHistoryDiffView = ({ ) : ( ) diff --git a/src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx b/src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx index 2d37a3c96..2fd444652 100644 --- a/src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx +++ b/src/Shared/Components/CMCS/ConfigMapSecretReadyOnly.tsx @@ -18,7 +18,7 @@ import { MODES } from '@Common/Constants' import { Progressing } from '@Common/Progressing' import { hasHashiOrAWS } from '@Pages/index' -import { CodeEditor } from '../CodeEditorWrapper' +import { CodeEditor } from '../CodeEditor' import { renderHashiOrAwsDeprecatedInfo } from './helpers' import { ConfigMapSecretReadyOnlyProps } from './types' import { getConfigMapSecretReadOnlyValues } from './utils' @@ -68,19 +68,7 @@ const ConfigMapSecretReadyOnly = ({
{!hideCodeEditor && displayValues.data && ( - +

Data

diff --git a/src/Common/CodeMirror/CodeEditor.components.tsx b/src/Shared/Components/CodeEditor/CodeEditor.components.tsx similarity index 100% rename from src/Common/CodeMirror/CodeEditor.components.tsx rename to src/Shared/Components/CodeEditor/CodeEditor.components.tsx diff --git a/src/Common/CodeMirror/CodeEditor.constants.ts b/src/Shared/Components/CodeEditor/CodeEditor.constants.ts similarity index 100% rename from src/Common/CodeMirror/CodeEditor.constants.ts rename to src/Shared/Components/CodeEditor/CodeEditor.constants.ts diff --git a/src/Common/CodeMirror/CodeEditor.context.ts b/src/Shared/Components/CodeEditor/CodeEditor.context.ts similarity index 100% rename from src/Common/CodeMirror/CodeEditor.context.ts rename to src/Shared/Components/CodeEditor/CodeEditor.context.ts diff --git a/src/Common/CodeMirror/CodeEditor.theme.ts b/src/Shared/Components/CodeEditor/CodeEditor.theme.ts similarity index 100% rename from src/Common/CodeMirror/CodeEditor.theme.ts rename to src/Shared/Components/CodeEditor/CodeEditor.theme.ts diff --git a/src/Common/CodeMirror/CodeEditor.tsx b/src/Shared/Components/CodeEditor/CodeEditor.tsx similarity index 100% rename from src/Common/CodeMirror/CodeEditor.tsx rename to src/Shared/Components/CodeEditor/CodeEditor.tsx diff --git a/src/Common/CodeMirror/CodeEditorRenderer.tsx b/src/Shared/Components/CodeEditor/CodeEditorRenderer.tsx similarity index 100% rename from src/Common/CodeMirror/CodeEditorRenderer.tsx rename to src/Shared/Components/CodeEditor/CodeEditorRenderer.tsx diff --git a/src/Common/CodeMirror/Commands/findAndReplace.ts b/src/Shared/Components/CodeEditor/Commands/findAndReplace.ts similarity index 100% rename from src/Common/CodeMirror/Commands/findAndReplace.ts rename to src/Shared/Components/CodeEditor/Commands/findAndReplace.ts diff --git a/src/Common/CodeMirror/Commands/index.ts b/src/Shared/Components/CodeEditor/Commands/index.ts similarity index 100% rename from src/Common/CodeMirror/Commands/index.ts rename to src/Shared/Components/CodeEditor/Commands/index.ts diff --git a/src/Common/CodeMirror/Commands/keyMaps.ts b/src/Shared/Components/CodeEditor/Commands/keyMaps.ts similarity index 100% rename from src/Common/CodeMirror/Commands/keyMaps.ts rename to src/Shared/Components/CodeEditor/Commands/keyMaps.ts diff --git a/src/Common/CodeMirror/Extensions/DiffMinimap.tsx b/src/Shared/Components/CodeEditor/Extensions/DiffMinimap.tsx similarity index 100% rename from src/Common/CodeMirror/Extensions/DiffMinimap.tsx rename to src/Shared/Components/CodeEditor/Extensions/DiffMinimap.tsx diff --git a/src/Common/CodeMirror/Extensions/findAndReplace.tsx b/src/Shared/Components/CodeEditor/Extensions/findAndReplace.tsx similarity index 100% rename from src/Common/CodeMirror/Extensions/findAndReplace.tsx rename to src/Shared/Components/CodeEditor/Extensions/findAndReplace.tsx diff --git a/src/Common/CodeMirror/Extensions/index.ts b/src/Shared/Components/CodeEditor/Extensions/index.ts similarity index 100% rename from src/Common/CodeMirror/Extensions/index.ts rename to src/Shared/Components/CodeEditor/Extensions/index.ts diff --git a/src/Common/CodeMirror/Extensions/readOnlyTooltip.ts b/src/Shared/Components/CodeEditor/Extensions/readOnlyTooltip.ts similarity index 100% rename from src/Common/CodeMirror/Extensions/readOnlyTooltip.ts rename to src/Shared/Components/CodeEditor/Extensions/readOnlyTooltip.ts diff --git a/src/Common/CodeMirror/Extensions/yamlHighlight.ts b/src/Shared/Components/CodeEditor/Extensions/yamlHighlight.ts similarity index 100% rename from src/Common/CodeMirror/Extensions/yamlHighlight.ts rename to src/Shared/Components/CodeEditor/Extensions/yamlHighlight.ts diff --git a/src/Common/CodeMirror/Extensions/yamlParseLinter.ts b/src/Shared/Components/CodeEditor/Extensions/yamlParseLinter.ts similarity index 100% rename from src/Common/CodeMirror/Extensions/yamlParseLinter.ts rename to src/Shared/Components/CodeEditor/Extensions/yamlParseLinter.ts diff --git a/src/Common/CodeMirror/codeEditor.scss b/src/Shared/Components/CodeEditor/codeEditor.scss similarity index 99% rename from src/Common/CodeMirror/codeEditor.scss rename to src/Shared/Components/CodeEditor/codeEditor.scss index 202fa4ee0..b25e43aef 100644 --- a/src/Common/CodeMirror/codeEditor.scss +++ b/src/Shared/Components/CodeEditor/codeEditor.scss @@ -175,6 +175,10 @@ max-width: 300px; } + .cm-tooltip-autocomplete { + background-color: var(--bg-primary); + } + .cm-diagnostic-error { border-top-left-radius: 2px; border-bottom-left-radius: 2px; diff --git a/src/Common/CodeMirror/index.ts b/src/Shared/Components/CodeEditor/index.ts similarity index 100% rename from src/Common/CodeMirror/index.ts rename to src/Shared/Components/CodeEditor/index.ts diff --git a/src/Common/CodeMirror/types.ts b/src/Shared/Components/CodeEditor/types.ts similarity index 100% rename from src/Common/CodeMirror/types.ts rename to src/Shared/Components/CodeEditor/types.ts diff --git a/src/Common/CodeMirror/utils.tsx b/src/Shared/Components/CodeEditor/utils.tsx similarity index 100% rename from src/Common/CodeMirror/utils.tsx rename to src/Shared/Components/CodeEditor/utils.tsx diff --git a/src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx b/src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx deleted file mode 100644 index c28e1bd06..000000000 --- a/src/Shared/Components/CodeEditorWrapper/CodeEditorWrapper.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CodeEditor } from '@Common/CodeEditor' -import { CodeEditor as CodeMirror, CodeEditorHeaderProps, CodeEditorStatusBarProps } from '@Common/CodeMirror' - -import { CodeEditorWrapperProps } from './types' - -export const isCodeMirrorEnabled = () => window._env_.FEATURE_CODE_MIRROR_ENABLE - -export const CodeEditorWrapper = ({ - codeEditorProps, - codeMirrorProps, - children, - ...restProps -}: CodeEditorWrapperProps) => - isCodeMirrorEnabled() ? ( - {...(codeMirrorProps as any)} {...restProps}> - {children} - - ) : ( - - {children} - - ) - -const CodeEditorLanguageChangerWrapper = () => (isCodeMirrorEnabled() ? null : ) - -const CodeEditorThemeChangerWrapper = () => (isCodeMirrorEnabled() ? null : ) - -const CodeEditorValidationErrorWrapper = () => (isCodeMirrorEnabled() ? null : ) - -const CodeEditorClipboardWrapper = () => (isCodeMirrorEnabled() ? : ) - -const CodeEditorHeaderWrapper = (props: CodeEditorHeaderProps) => - isCodeMirrorEnabled() ? : - -const CodeEditorWarningWrapper = (props: CodeEditorStatusBarProps) => - isCodeMirrorEnabled() ? : - -const CodeEditorErrorBarWrapper = (props: CodeEditorStatusBarProps) => - isCodeMirrorEnabled() ? : - -const CodeEditorInformationWrapper = (props: CodeEditorStatusBarProps) => - isCodeMirrorEnabled() ? : - -const CodeEditorContainerWrapper = ({ - overflowHidden, - ...props -}: { - children: React.ReactNode - flexExpand?: boolean - overflowHidden?: boolean -}) => - isCodeMirrorEnabled() ? ( - - ) : ( - - ) - -CodeEditorWrapper.LanguageChanger = CodeEditorLanguageChangerWrapper -CodeEditorWrapper.ThemeChanger = CodeEditorThemeChangerWrapper -CodeEditorWrapper.ValidationError = CodeEditorValidationErrorWrapper -CodeEditorWrapper.Clipboard = CodeEditorClipboardWrapper -CodeEditorWrapper.Header = CodeEditorHeaderWrapper -CodeEditorWrapper.Warning = CodeEditorWarningWrapper -CodeEditorWrapper.ErrorBar = CodeEditorErrorBarWrapper -CodeEditorWrapper.Information = CodeEditorInformationWrapper -CodeEditorWrapper.Container = CodeEditorContainerWrapper diff --git a/src/Shared/Components/CodeEditorWrapper/index.ts b/src/Shared/Components/CodeEditorWrapper/index.ts deleted file mode 100644 index 0a036a17c..000000000 --- a/src/Shared/Components/CodeEditorWrapper/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export { CodeEditorWrapper as CodeEditor, isCodeMirrorEnabled } from './CodeEditorWrapper' diff --git a/src/Shared/Components/CodeEditorWrapper/types.ts b/src/Shared/Components/CodeEditorWrapper/types.ts deleted file mode 100644 index b69233712..000000000 --- a/src/Shared/Components/CodeEditorWrapper/types.ts +++ /dev/null @@ -1,60 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import { CodeEditorInterface } from '@Common/CodeEditor' -import { CodeEditorProps } from '@Common/CodeMirror' - -export type CodeEditorWrapperProps = Pick< - CodeEditorProps, - | 'mode' - | 'tabSize' - | 'readOnly' - | 'placeholder' - | 'noParsing' - | 'loading' - | 'customLoader' - | 'cleanData' - | 'disableSearch' - | 'children' -> & { - diffView?: DiffView - codeEditorProps: Omit< - CodeEditorInterface, - | 'mode' - | 'tabSize' - | 'readOnly' - | 'placeholder' - | 'noParsing' - | 'loading' - | 'customLoader' - | 'cleanData' - | 'disableSearch' - | 'children' - > - codeMirrorProps: Omit< - CodeEditorProps, - | 'mode' - | 'tabSize' - | 'readOnly' - | 'placeholder' - | 'noParsing' - | 'loading' - | 'customLoader' - | 'cleanData' - | 'disableSearch' - | 'children' - > -} diff --git a/src/Shared/Components/DynamicDataTable/DynamicDataTable.tsx b/src/Shared/Components/DynamicDataTable/DynamicDataTable.tsx index b98cf41bd..95349fc75 100644 --- a/src/Shared/Components/DynamicDataTable/DynamicDataTable.tsx +++ b/src/Shared/Components/DynamicDataTable/DynamicDataTable.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { useMemo } from 'react' +import { useMemo, useState } from 'react' import { DynamicDataTableHeader } from './DynamicDataTableHeader' import { DynamicDataTableRow } from './DynamicDataTableRow' @@ -24,14 +24,30 @@ import './styles.scss' export const DynamicDataTable = >({ headers, + onRowAdd, ...props }: DynamicDataTableProps) => { + // STATES + const [isAddRowButtonClicked, setIsAddRowButtonClicked] = useState(false) + + // CONSTANTS const filteredHeaders = useMemo(() => headers.filter(({ isHidden }) => !isHidden), [headers]) + // HANDLERS + const handleRowAdd = () => { + setIsAddRowButtonClicked(true) + onRowAdd() + } + return (
- - + +
) } diff --git a/src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx b/src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx index 40fb9a572..45b141d80 100644 --- a/src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx +++ b/src/Shared/Components/DynamicDataTable/DynamicDataTableRow.tsx @@ -73,6 +73,8 @@ export const DynamicDataTableRow = ) => { // CONSTANTS const isFirstRowEmpty = headers.every(({ key }) => !rows[0]?.data[key].value) @@ -105,6 +107,8 @@ export const DynamicDataTableRow = { setIsRowAdded(rows.length > 0 && Object.keys(cellRef.current).length < rows.length) + // When a new row is added, we create references for its cells. + // This logic ensures that references are created only for the newly added row, while retaining the existing references. const updatedCellRef = rowIds.reduce((acc, curr) => { if (cellRef.current[curr]) { acc[curr] = cellRef.current[curr] @@ -118,15 +122,16 @@ export const DynamicDataTableRow = { - if (isRowAdded) { + if (isAddRowButtonClicked && isRowAdded) { // Using the below logic to ensure the cell is focused after row addition. const cell = cellRef.current[rows[0].id][focusableFieldKey || headers[0].key].current if (cell) { cell.focus() setIsRowAdded(false) + setIsAddRowButtonClicked(false) } } - }, [isRowAdded]) + }, [isRowAdded, isAddRowButtonClicked]) // METHODS const onChange = diff --git a/src/Shared/Components/DynamicDataTable/types.ts b/src/Shared/Components/DynamicDataTable/types.ts index f8e378eaf..3e9574cb1 100644 --- a/src/Shared/Components/DynamicDataTable/types.ts +++ b/src/Shared/Components/DynamicDataTable/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { DetailedHTMLProps, ReactElement, ReactNode } from 'react' +import { DetailedHTMLProps, Dispatch, ReactElement, ReactNode, SetStateAction } from 'react' import { ResizableTagTextAreaProps } from '@Common/CustomTagSelector' import { UseStateFiltersReturnType } from '@Common/Hooks' @@ -261,4 +261,7 @@ export interface DynamicDataTableRowProps {} + > { + isAddRowButtonClicked: boolean + setIsAddRowButtonClicked: Dispatch> +} diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts index 365a95270..abcb23727 100644 --- a/src/Shared/Components/index.ts +++ b/src/Shared/Components/index.ts @@ -30,7 +30,7 @@ export * from './ButtonWithLoader' export * from './ButtonWithSelector' export * from './CICDHistory' export * from './CMCS' -export * from './CodeEditorWrapper' +export * from './CodeEditor' export * from './Collapse' export * from './CollapsibleList' export * from './CommitChipCell' diff --git a/src/index.ts b/src/index.ts index f598dd3d3..c3ef03746 100644 --- a/src/index.ts +++ b/src/index.ts @@ -87,11 +87,6 @@ export interface customEnv { FEATURE_DEFAULT_MERGE_STRATEGY?: OverrideMergeStrategyType FEATURE_DEFAULT_LANDING_RB_ENABLE?: boolean FEATURE_ACTION_AUDIOS_ENABLE?: boolean - /** - * If true, the code-editor will use codemirror engine - * @default false - */ - FEATURE_CODE_MIRROR_ENABLE?: boolean // ================== Feature flags for the enterprise release ================== /** * If true, only pipelines to which the user has access will be shown across the application diff --git a/vite.config.ts b/vite.config.ts index 232f92d82..e62fa6155 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -64,13 +64,6 @@ export default defineConfig({ assetFileNames: 'assets/[name][extname]', entryFileNames: '[name].js', manualChunks(id: string) { - if ( - id.includes('/node_modules/monaco-editor') || - id.includes('/node_modules/react-monaco-editor') - ) { - return '@monaco-editor' - } - if (id.includes('/node_modules/react-dates')) { return '@react-dates' } @@ -95,7 +88,7 @@ export default defineConfig({ return '@vendor' } - if (id.includes('src/Common/CodeEditor')) { + if (id.includes('codemirror') || id.includes('src/Common/CodeMirror')) { return '@code-editor' }