Merge branch 'main' into feat/segregate-logs

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.1.8-beta-15",
+    "version": "0.1.11",
     "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"
@@ -108,4 +109,4 @@
             "monaco-editor": "0.44.0"
         }
     }
-}
+}

package.json

@@ -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/Common/CodeEditor/CodeEditor.tsx

@@ -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 = {

src/Common/Constants.ts

@@ -15,6 +15,8 @@
  */
 
 import React, { SyntheticEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { JSONPath, JSONPathOptions } from 'jsonpath-plus'
+import { compare as compareJSON, applyPatch } from 'fast-json-patch'
 import { components } from 'react-select'
 import * as Sentry from '@sentry/browser'
 import moment from 'moment'
@@ -725,6 +727,20 @@ export const powerSetOfSubstringsFromStart = (strings: string[], regex: RegExp)
         return _keys
     })
 
+export const convertJSONPointerToJSONPath = (pointer: string) =>
+    pointer.replace(/\//g, '.').replace(/\./, '$.')
+
+export const flatMapOfJSONPaths = (
+    paths: string[],
+    json: object,
+    resultType: JSONPathOptions['resultType'] = 'path',
+): string[] => paths.flatMap((path) => JSONPath({ path, json, resultType }))
+
+export const applyCompareDiffOnUneditedDocument = (uneditedDocument: object, editedDocument: object) => {
+    const patch = compareJSON(uneditedDocument, editedDocument)
+    return applyPatch(uneditedDocument, patch).newDocument
+}
+
 /**
  * Returns a debounced variant of the function
  */

src/Common/Helper.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import RJSF from '@rjsf/core'
 import RJSFValidator from '@rjsf/validator-ajv8'
 

src/Common/RJSF/Form.tsx

@@ -39,6 +39,14 @@
             // This is added as the array field itself has a margin bottom
             margin: 0;
         }
+
+        & legend {
+            display: none;
+        }
+
+        &:has(+ div) {
+            margin-bottom: 8px;
+        }
     }
 
     &__additional-fields,
@@ -53,15 +61,15 @@
         &:has(> .remove-btn__container)::after {
             border-radius: 4px;
             transform: translate(-50%, -50%);
-            top: 50%; 
-            left: 50%; 
+            top: 50%;
+            left: 50%;
             background: transparent;
             z-index: -1;
             position: absolute;
             /* NOTE: this overlay is exactly 6px wider & taller on all sides
-             * therefore the 12px (6 + 6) on height & width */
-            height: calc(100% + 12px);
-            width: calc(100% + 12px);
+             * therefore the 8px (4 + 4) on height & width */
+            height: calc(100% + 8px);
+            width: calc(100% + 8px);
             content: '';
             transition: all 100ms ease-out;
         }

src/Common/RJSF/rjsfForm.scss

@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import React, { CSSProperties } from 'react'
 import { ArrayFieldTemplateItemType } from '@rjsf/utils'
 
 export const ArrayFieldItemTemplate = ({
     children,
-    className,
     disabled,
     hasToolbar,
     hasRemove,
@@ -32,7 +30,7 @@ export const ArrayFieldItemTemplate = ({
     const { RemoveButton } = registry.templates.ButtonTemplates
 
     return (
-        <div className="dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center mb-12">
+        <div className="dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center">
             {children}
             <div className="dc__position-abs remove-btn__container" style={{ right: "-28px", top: "9px" }}>
                 {hasToolbar && hasRemove && (

src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -14,11 +14,9 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState, useRef } from 'react'
 import { IconButtonProps } from '@rjsf/utils'
 
-import { ConditionalWrap } from '../../../Helper'
-import { getTippyWrapperWithContent } from '../../utils'
+import Tippy from '../../../Tippy'
 import { ADD_BUTTON_WIDTH } from '../../constants'
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
 
@@ -30,26 +28,27 @@ export const AddButton = ({
     uiSchema,
     ...props
 }: IconButtonProps & Partial<Record<'label', string>>) => {
-    const [showTippy, setShowTippy] = useState(false)
-    const buttonRef = useRef<HTMLButtonElement>(null)
     const content = `Add ${label}`
 
-    useEffect(() => setShowTippy(buttonRef.current?.offsetWidth >= ADD_BUTTON_WIDTH.MAX_WIDTH_VALUE), [buttonRef.current])
-
     return (
         <div className="flexbox flex-justify-start">
-            <ConditionalWrap condition={showTippy} wrap={getTippyWrapperWithContent(content)}>
+            <Tippy
+                className="default-tt dc__word-break"
+                arrow={false}
+                placement="right"
+                content={content}
+                truncateWidth={ADD_BUTTON_WIDTH.MAX_WIDTH_VALUE}
+            >
                 <button
-                    ref={buttonRef}
                     {...props}
                     type="button"
                     className={`dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor ${ADD_BUTTON_WIDTH.MAX_WIDTH_CLASSNAME}`}
                     title="Add"
                 >
                     <PlusIcon className="icon-dim-16 fcb-5" />
-                    <span className="cb-5 fs-13 lh-20 dc__truncate">{content}</span>
+                    <span className="cb-5 fs-13 lh-34 dc__truncate">{content}</span>
                 </button>
-            </ConditionalWrap>
+            </Tippy>
         </div>
     )
 }

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -49,7 +49,8 @@ export const Field = (props: FieldTemplateProps) => {
     return hidden ? (
         <div className="hidden">{children}</div>
     ) : (
-        <div className={`${classNames} mb-12`}>
+        // NOTE: need to override the margins of default rjsf css
+        <div className={`${classNames} mb-0`}>
             {showTitle && (
                 <TitleField
                     id={id}