Merge branch 'main' of github.com:devtron-labs/devtron-fe-common-lib into feat/lock-deployment-configuration

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.11-beta-7",
+    "version": "0.1.15-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -95,6 +95,7 @@
         "ansi_up": "^5.2.1",
         "fast-json-patch": "^3.1.1",
         "react-dates": "^21.8.0",
+        "jsonpath-plus": "^9.0.0",
         "react-monaco-editor": "^0.54.0",
         "sass": "^1.69.7",
         "tslib": "^2.4.1"

package.json

@@ -280,14 +280,3 @@ export interface FormErrorObjectType {
         steps: TaskErrorObj[]
     }
 }
-
-export interface PluginDetailType {
-    id: number
-    name: string
-    type: string
-    description: string
-    icon: string
-    tags: string[]
-    inputVariables?: VariableType[]
-    outputVariables?: VariableType[]
-}

src/Assets/Icon/ic-book-open.svg

@@ -65,6 +65,17 @@ function useCodeEditorContext() {
     return context
 }
 
+/**
+ * NOTE: once monaco editor mounts it doesn't update it's internal onChange state.
+ * Since most of the time onChange methods are declared inside the render body of a component
+ * we should use the latest references of onChange.
+ * Please see: https://github.com/react-monaco-editor/react-monaco-editor/issues/704
+ * Thus as a hack we are using this objects reference to call the latest onChange reference
+ */
+const _onChange = {
+    onChange: null
+}
+
 const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.memo(
     ({
         value,
@@ -100,7 +111,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const monacoRef = useRef(null)
         const { width, height: windowHeight } = useWindowSize()
         const memoisedReducer = React.useCallback(CodeEditorReducer, [])
-        const [state, dispatch] = useReducer(memoisedReducer, initialState({mode, theme, value, diffView, noParsing}))
+        const [state, dispatch] = useReducer(memoisedReducer, initialState({ mode, theme, value, diffView, noParsing }))
         const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
         const [, originalJson, originlaYaml] = useJsonYaml(defaultValue, tabSize, state.mode, !state.noParsing)
         monaco.editor.defineTheme(CodeEditorThemesKeys.vsDarkDT, {
@@ -193,15 +204,19 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             editorRef.current.layout()
         }, [width, windowHeight])
 
-        useEffect(() => {
-            if (onChange) {
-                onChange(state.code)
-            }
-        }, [state.code])
+        /**
+         * NOTE: Please see @_onChange variable
+         */
+        _onChange.onChange = onChange
+
+        const setCode = (value: string) => {
+            dispatch({ type: 'setCode', value })
+            _onChange.onChange?.(value)
+        }
 
         useEffect(() => {
             if (noParsing) {
-                dispatch({ type: 'setCode', value })
+                setCode(value)
 
                 return
             }
@@ -220,7 +235,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             if (obj) {
                 final = state.mode === 'json' ? JSON.stringify(obj, null, tabSize) : YAMLStringify(obj)
             }
-            dispatch({ type: 'setCode', value: final })
+            setCode(final)
         }, [value, noParsing])
 
         useEffect(() => {
@@ -234,12 +249,12 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         }, [focus])
 
         function handleOnChange(newValue, e) {
-            dispatch({ type: 'setCode', value: newValue })
+            setCode(newValue)
         }
 
         function handleLanguageChange(mode: 'json' | 'yaml') {
             dispatch({ type: 'changeLanguage', value: mode })
-            dispatch({ type: 'setCode', value: mode === 'json' ? json : yamlCode })
+            setCode(mode === 'json' ? json : yamlCode)
         }
 
         const options: monaco.editor.IEditorConstructionOptions = {

src/Assets/Icon/ic-filter-applied.svg

@@ -26,6 +26,7 @@ export const DOCUMENTATION = {
     APP_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/create-application#tags`,
     APP_OVERVIEW_TAGS: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/overview#manage-tags`,
     BLOB_STORAGE: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/install/installation-configuration#configuration-of-blob-storage`,
+    GLOBAL_CONFIG_BUILD_INFRA: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/build-infra`,
 }
 
 export const PATTERNS = {
@@ -96,6 +97,9 @@ export const ROUTES = {
     RESOURCE_HISTORY_DEPLOYMENT: 'resource/history/deployment',
     APP_LIST_MIN: 'app/min',
     CLUSTER_LIST_MIN: 'cluster/autocomplete',
+    PLUGIN_GLOBAL_LIST_DETAIL_V2: 'plugin/global/list/detail/v2',
+    PLUGIN_GLOBAL_LIST_V2: 'plugin/global/list/v2',
+    PLUGIN_GLOBAL_LIST_TAGS: 'plugin/global/list/tags',
 }
 
 export enum KEY_VALUE {
@@ -478,6 +482,8 @@ export const ZERO_TIME_STRING = '0001-01-01T00:00:00Z'
 export const EXCLUDED_FALSY_VALUES = [undefined, null, '', NaN] as const
 
 export const API_STATUS_CODES = {
+    OK: 200,
+    NO_CONTENT: 204,
     BAD_REQUEST: 400,
     UNAUTHORIZED: 401,
     PERMISSION_DENIED: 403,