@devtron-labs/devtron-fe-common-lib 0.0.45 → 0.0.47-beta-3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.45",
+    "version": "0.0.47-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -20,25 +20,25 @@
     "homepage": "https://github.com/devtron-labs/devtron-fe-common-lib#readme",
     "devDependencies": {
         "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-commonjs": "24.0.1",
         "@rollup/plugin-image": "3.0.1",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "rollup-plugin-postcss": "^4.0.2",
-        "rollup-plugin-typescript2": "^0.34.1",
+        "@rollup/plugin-node-resolve": "^15.0.1",
+        "@rollup/plugin-url": "8.0.1",
+        "@sentry/browser": "^7.31.1",
+        "@svgr/rollup": "6.5.1",
+        "@tippyjs/react": "^4.2.0",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.13",
         "@types/react-router-dom": "^5.3.3",
-        "rollup": "^3.10.0",
-        "rollup-plugin-delete": "^2.0.0",
-        "@svgr/rollup": "6.5.1",
-        "@rollup/plugin-url": "8.0.1",
-        "@rollup/plugin-commonjs": "24.0.1",
         "moment": "^2.29.4",
-        "typescript": "^4.9.4",
-        "react-toastify": "^8.2.0",
-        "@tippyjs/react": "^4.2.0",
         "react-select": "5.2.2",
-        "@sentry/browser": "^7.31.1"
+        "react-toastify": "^8.2.0",
+        "rollup": "^3.10.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-typescript2": "^0.34.1",
+        "typescript": "^4.9.4"
     },
     "peerDependencies": {
         "@rjsf/core": "^5.13.3",
@@ -50,6 +50,8 @@
         "react-router-dom": "^5.3.0"
     },
     "dependencies": {
+        "fast-json-patch": "^3.1.1",
+        "jsonpath-plus": "^7.2.0",
         "sass": "^1.56.2",
         "tslib": "^2.4.1"
     }

package/src/Common/ChartVersionAndTypeSelector.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react'
+import { fetchChartTemplateVersions } from './Common.service'
+import { ChartVersionAndTypeSelectorProps, DeploymentChartVersionType } from './Types'
+import ReactSelect from 'react-select'
+import { customStyles, getFilteredChartVersions, showError } from './Helper'
+
+// @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
+// when the Code Editor is moved to the fe-common-lib
+const ChartVersionAndTypeSelector = ({ setSelectedChartRefId }: ChartVersionAndTypeSelectorProps) => {
+    const [charts, setCharts] = useState<DeploymentChartVersionType[]>([])
+    const [selectedChartType, setSelectedChartType] = useState(null)
+    const [chartVersionOptions, setChartVersionOptions] = useState([])
+    const [chartTypeOptions, setChartTypeOptions] = useState([])
+    const [selectedChartVersion, setSelectedChartVersion] = useState(null)
+
+    useEffect(() => {
+        fetchChartTemplateVersions()
+            .then((res) => {
+                const charts = res?.result || []
+                setCharts(charts)
+                // Extract unique chart types from the data
+                const chartTypeOptions = [...new Set(charts.map((item) => item.chartType))].map((type) => ({
+                    value: type,
+                    label: type,
+                }))
+                setChartTypeOptions(chartTypeOptions)
+                const filteredVersions = getFilteredChartVersions(charts, chartTypeOptions[0])
+                selectFirstChartVersion(filteredVersions)
+            })
+            .catch((err) => {
+                showError(err)
+            })
+    }, [])
+
+    const selectFirstChartVersion = (filteredVersions) => {
+        setChartVersionOptions(filteredVersions)
+        setSelectedChartVersion(filteredVersions[0]) // Select the first chart version by default
+        setSelectedChartRefId(filteredVersions[0]?.chartRefId)
+    }
+
+    // Function to update chart version options based on selected chart type
+    const handleChartTypeChange = (selectedOption) => {
+        setSelectedChartType(selectedOption)
+        const filteredVersions = getFilteredChartVersions(charts, selectedOption)
+        selectFirstChartVersion(filteredVersions)
+    }
+
+    // Function to handle the change of the selected chart version
+    const handleChartVersionChange = (selectedOption) => {
+        setSelectedChartVersion(selectedOption)
+        setSelectedChartRefId(selectedOption.chartRefId)
+    }
+
+    return (
+        <div className="flex">
+            <div className="chart-type-options flex" data-testid="chart-type-options">
+                <span className="chart-type-options-label mr-4">Chart Type</span>
+                <ReactSelect
+                    value={selectedChartType ?? chartTypeOptions[0]}
+                    options={chartTypeOptions}
+                    onChange={handleChartTypeChange}
+                    styles={customStyles}
+                />
+            </div>
+            <div className="chart-version-options flex" data-testid="chart-version-options">
+                <span className="chart-version-options-label mr-4">Chart Version</span>
+                <ReactSelect
+                    value={selectedChartVersion ?? chartVersionOptions[0]}
+                    options={chartVersionOptions}
+                    onChange={handleChartVersionChange}
+                    styles={customStyles}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ChartVersionAndTypeSelector

package/src/Common/Common.service.ts

@@ -309,3 +309,7 @@ export function createGitCommitUrl(url: string, revision: string): string {
     }
     return "NA"
 }
+
+export function fetchChartTemplateVersions() {
+    return get(`${ROUTES.DEPLOYMENT_TEMPLATE_LIST}?appId=-1&envId=-1`)
+}

package/src/Common/Constants.ts

@@ -24,7 +24,8 @@ export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
     USER_CHECK_ROLE: 'user/check/roles',
     IMAGE_TAGGING:'app/image-tagging',
-    CD_MATERIAL_GET: 'app/cd-pipeline'
+    CD_MATERIAL_GET: 'app/cd-pipeline',
+    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
 }
 
 export enum KEY_VALUE {

package/src/Common/CustomInput/CustomInput.tsx

@@ -0,0 +1,131 @@
+import { CustomInputProps } from './Types'
+import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
+import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-warning.svg'
+
+export function CustomInput({
+    name,
+    value,
+    error,
+    onChange,
+    onFocus = (e) => {},
+    label,
+    type = 'text',
+    disabled = false,
+    labelClassName = '',
+    placeholder = '',
+    tabIndex = 1,
+    dataTestid = '',
+    isRequiredField = false,
+    autoFocus = false,
+    rootClassName = '',
+    autoComplete = 'off',
+    helperText = '',
+    handleOnBlur,
+    readOnly = false,
+    noTrim = false,
+    ref,
+    onKeyPress,
+    defaultValue,
+    onKeyDown,
+    required,
+    additionalErrorInfo
+}: CustomInputProps) {
+
+    function handleError(error: any): any[] {
+        if (!Array.isArray(error)) {
+            return [error]
+        }
+        return error
+    }
+
+    const onBlur = (event) => {
+        //NOTE: This is to prevent the input from being trimmed when the user do not want to trim the input
+        if (!noTrim) {
+            event.stopPropagation()
+            event.target.value = event.target.value?.trim()
+            onChange(event)
+        }
+        if (typeof handleOnBlur === 'function') {
+            handleOnBlur(event)
+        }
+    }
+
+    const renderFormErrorWithIcon = (error: string) => {
+        return (
+            <div className="form__error" key={error}>
+                <ErrorIcon className="form__icon form__icon--error" />
+                {error}
+                {typeof additionalErrorInfo === 'function' && additionalErrorInfo()}
+            </div>
+        )
+    }
+
+    const getInputError = () => {
+        if (!error?.length) {
+            return null
+        } else {
+            if (typeof error === 'object') {
+                return handleError(error).map((err: string) => renderFormErrorWithIcon(err))
+            }
+            return renderFormErrorWithIcon(error)
+        }
+    }
+
+    const renderInputLabelConditionally = () => {
+        if (typeof label === 'string') {
+            return <span className={`${isRequiredField ? 'dc__required-field' : ''}`}>{label}</span>
+        } else {
+            return label()
+        }
+    }
+
+    const renderInputLabel = () => {
+        if (!label) {
+            return null
+        } else {
+            return (
+                <label className={`form__label ${labelClassName}`} data-testid={`label-${dataTestid}`}>
+                    {renderInputLabelConditionally()}
+                </label>
+            )
+        }
+    }
+
+    return (
+        <div className="flex column left top">
+           {renderInputLabel()}
+            <input
+                data-testid={dataTestid}
+                type={type}
+                name={name}
+                autoComplete={autoComplete}
+                className={`form__input ${rootClassName}`}
+                onChange={(e) => {
+                    e.persist()
+                    onChange(e)
+                }}
+                onBlur={onBlur}
+                onFocus={onFocus}
+                placeholder={placeholder}
+                value={value}
+                disabled={disabled}
+                tabIndex={tabIndex}
+                autoFocus={autoFocus}
+                readOnly={readOnly}
+                ref={ref}
+                onKeyPress={onKeyPress}
+                defaultValue={defaultValue}
+                onKeyDown={onKeyDown}
+                required={required}
+            />
+
+            {getInputError()}
+            {helperText && (
+                <div className="form__text-field-info">
+                    <Info className="form__icon form__icon--info" />
+                    <p className="sentence-case">{helperText}</p>
+                </div>
+            )}
+        </div>
+    )
+}

package/src/Common/CustomInput/Types.ts

@@ -0,0 +1,30 @@
+import React, { HTMLInputTypeAttribute } from 'react'
+
+export interface CustomInputProps {
+    name: string
+    value: string | number
+    onChange: (e: any) => void
+    onFocus?: (e: any) => void
+    autoComplete?: string
+    label?: string | (() => React.ReactNode)
+    labelClassName?: string
+    type?: HTMLInputTypeAttribute
+    disabled?: boolean
+    placeholder?: string
+    tabIndex?: number
+    dataTestid?: string
+    isRequiredField?: boolean
+    autoFocus?: boolean
+    rootClassName?: string
+    error?: string[] | string
+    helperText?: string
+    handleOnBlur?: (e) => void
+    readOnly?: boolean
+    noTrim?: boolean
+    ref?: React.LegacyRef<HTMLInputElement>
+    onKeyPress?: (e) => void
+    defaultValue?: string | number | ReadonlyArray<string> | undefined
+    onKeyDown?: (e) => void
+    required?: boolean
+    additionalErrorInfo?: React.ReactNode
+}

package/src/Common/CustomInput/index.ts

@@ -0,0 +1,2 @@
+export * from './CustomInput'
+export * from './Types'

package/src/Common/Helper.tsx

@@ -3,11 +3,12 @@ import moment from 'moment'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import { ReactComponent as FormError } from '../Assets/Icon/ic-warning.svg'
 import { ERROR_EMPTY_SCREEN, TOKEN_COOKIE_NAME } from './Constants'
 import { ServerErrors } from './ServerError'
 import { toastAccessDenied } from './ToastBody'
 import { AsyncOptions, AsyncState, UseSearchString } from './Types'
+import { JSONPath } from 'jsonpath-plus'
+import * as jsonpatch from 'fast-json-patch'
 
 toast.configure({
     autoClose: 3000,
@@ -116,11 +117,11 @@ export function getRandomColor(email: string): string {
     return colors[sum % colors.length]
 }
 
-export const getAlphabetIcon = (str: string, intialAlphabetClassName?: string) => {
+export const getAlphabetIcon = (str: string, rootClassName: string = "") => {
     if (!str) return null
     return (
         <span
-            className={`${intialAlphabetClassName ? intialAlphabetClassName : ""} alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8`}
+            className={`${rootClassName} alphabet-icon__initial fs-13 icon-dim-20 flex cn-0 mr-8`}
             style={{ backgroundColor: getRandomColor(str) }}
         >
             {str[0]}
@@ -277,64 +278,6 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
     return { state, disable, handleOnChange, handleOnSubmit }
 }
 
-function handleError(error: any): any[] {
-    if (!error) {
-        return []
-    }
-
-    if (!Array.isArray(error)) {
-        return [error]
-    }
-
-    return error
-}
-
-export function CustomInput({
-    name,
-    value,
-    error,
-    onChange,
-    onBlur = (e) => {},
-    onFocus = (e) => {},
-    label,
-    type = 'text',
-    disabled = false,
-    autoComplete = 'off',
-    labelClassName = '',
-    placeholder = '',
-    tabIndex = 1,
-    dataTestid = '',
-}) {
-    return (
-        <div className="flex column left top">
-            <label className={`form__label ${labelClassName}`}>{label}</label>
-            <input
-                data-testid={dataTestid}
-                type={type}
-                name={name}
-                autoComplete="off"
-                className="form__input"
-                onChange={(e) => {
-                    e.persist()
-                    onChange(e)
-                }}
-                onBlur={onBlur}
-                onFocus={onFocus}
-                placeholder={placeholder}
-                value={value}
-                disabled={disabled}
-                tabIndex={tabIndex}
-            />
-            {handleError(error).map((err) => (
-                <div className="form__error" key={err}>
-                    <FormError className="form__icon form__icon--error" />
-                    {err}
-                </div>
-            ))}
-        </div>
-    )
-}
-
 export function handleUTCTime(ts: string, isRelativeTime = false) {
     let timestamp = ''
     try {
@@ -517,3 +460,99 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
  * Custom exception logger function for logging errors to sentry
  */
 export const logExceptionToSentry = Sentry.captureException.bind(window)
+
+export const customStyles = {
+    control: (base, state) => ({
+        ...base,
+        minHeight: '32px',
+        boxShadow: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        background: 'transparent',
+    }),
+    indicatorSeparator: (base, state) => ({
+        ...base,
+        width: 0,
+    }),
+    valueContainer: (base, state) => ({
+        ...base,
+        padding: '0',
+        fontSize: '13px',
+        fontWeight: '600',
+    }),
+    dropdownIndicator: (base, state) => ({
+        ...base,
+        color: 'var(--N400)',
+        padding: '0 8px',
+        transition: 'all .2s ease',
+        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+    }),
+}
+
+export const getFilteredChartVersions = (charts, selectedChartType) => {
+    // Filter chart versions based on selected chart type
+    return charts
+        .filter((item) => item?.chartType === selectedChartType.value)
+        .map((item) => ({
+            value: item?.chartVersion,
+            label: item?.chartVersion,
+            chartRefId: item.chartRefId,
+        }))
+}
+function removeEmptyObjectKeysAndNullValues(obj) {
+    //it recursively removes empty object keys and array values that are null
+    for (let key in obj) {
+        if (Array.isArray(obj[key])) obj[key] = obj[key].filter((item) => item !== null)
+        if (obj[key].length === 0) {
+            // Check if the array is empty
+            delete obj[key] // Delete the key if the array is empty
+        } else if (obj[key] && typeof obj[key] === 'object') {
+            if (removeEmptyObjectKeysAndNullValues(obj[key])) {
+                delete obj[key]
+            }
+        } else if (obj[key] === null || obj[key] === undefined) {
+            delete obj[key]
+        }
+    }
+    return Object.keys(obj).length === 0
+}
+
+export function getUnlockedJSON(json, jsonPathArray) {
+    const jsonCopy = JSON.parse(JSON.stringify(json))
+    let patches = jsonPathArray.flatMap((jsonPath) => {
+        const pathsToRemove = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
+        return pathsToRemove.map((result) =>
+            Array.isArray(result.parent)
+                ? { op: 'replace', path: result.pointer, value: null }
+                : { op: 'remove', path: result.pointer },
+        )
+    })
+    let newDocument = jsonpatch.applyPatch(jsonCopy, patches).newDocument
+
+    removeEmptyObjectKeysAndNullValues(newDocument)
+    return newDocument
+}
+
+export function getLockedJSON(json, jsonPathArray: string[]) {
+    const jsonCopy = JSON.parse(JSON.stringify(json))
+    let resultJson = {}
+    jsonPathArray.forEach((jsonPath) => {
+        const elements = JSONPath({ path: jsonPath, json: jsonCopy, resultType: 'all' })
+        elements.forEach((element) => {
+            const pathArray: string[] = JSONPath.toPathArray(element.path)
+            const lastPath = pathArray.pop()
+            let current = resultJson
+            for (let i = 0; i < pathArray.length; i++) {
+                let key = isNaN(Number(pathArray[i])) ? pathArray[i] : parseInt(pathArray[i])
+                if (!current[key]) {
+                    current[key] = isNaN(Number(pathArray[i + 1])) ? {} : []
+                }
+                current = current[key]
+            }
+            let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
+            current[key] = element.value
+        })
+    })
+    return resultJson['$']
+}
+

package/src/Common/Types.ts

@@ -79,7 +79,6 @@ export interface TippyCustomizedProps {
     documentationLink?: string
     documentationLinkText?: string
     children: React.ReactElement<any>
-    followCursor?: boolean
 }
 export interface GenericEmptyStateType {
     title: ReactNode
@@ -624,3 +623,73 @@ export interface CiPipeline {
     isOffendingMandatoryPlugin?: boolean
     pipelineType?: string
 }
+
+export interface DeploymentChartVersionType {
+    chartRefId: number 
+    chartVersion: string
+    chartType: string
+    type: number
+}
+
+export interface ChartVersionAndTypeSelectorProps {
+    setSelectedChartRefId: React.Dispatch<React.SetStateAction<number>>
+}
+
+export interface InformationBarProps {
+    text: string
+    className?: string
+    children?: React.ReactNode
+}
+
+export interface CodeEditorInterface {
+    value?: string
+    lineDecorationsWidth?: number
+    responseType?: string
+    onChange?: (string) => void
+    onBlur?: () => void
+    onFocus?: () => void
+    children?: any
+    defaultValue?: string
+    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile' | 'plaintext'
+    tabSize?: number
+    readOnly?: boolean
+    noParsing?: boolean
+    minHeight?: number
+    maxHeight?: number
+    inline?: boolean
+    height?: number | string
+    shebang?: string | JSX.Element
+    diffView?: boolean
+    loading?: boolean
+    customLoader?: JSX.Element
+    theme?: string
+    original?: string
+    focus?: boolean
+    validatorSchema?: any
+    isKubernetes?: boolean
+    cleanData?: boolean
+    chartVersion?: any
+}
+
+export interface CodeEditorComposition {
+    Header?: React.FC<any>
+    LanguageChanger?: React.FC<any>
+    ThemeChanger?: React.FC<any>
+    ValidationError?: React.FC<any>
+    Clipboard?: React.FC<any>
+    Warning?: React.FC<InformationBarProps>
+    ErrorBar?: React.FC<InformationBarProps>
+    Information?: React.FC<InformationBarProps>
+}
+
+export interface CodeEditorHeaderComposition {
+    LanguageChanger?: React.FC<any>;
+    ThemeChanger?: React.FC<any>;
+    ValidationError?: React.FC<any>;
+    Clipboard?: React.FC<any>;
+}
+export interface CodeEditorHeaderInterface {
+    children?: any;
+    className?: string
+    hideDefaultSplitHeader?: boolean;
+}

package/src/Common/index.ts

@@ -42,3 +42,5 @@ export * from './Hooks'
 export { AppStatus } from './AppStatus'
 export * from './RJSF'
 export * from './DevtronProgressing'
+export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
+export * from './CustomInput'