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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.46",
+    "version": "0.0.47-beta-3",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -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/Helper.tsx

@@ -7,6 +7,8 @@ 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,
@@ -458,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

@@ -622,4 +622,74 @@ 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,4 +42,5 @@ export * from './Hooks'
 export { AppStatus } from './AppStatus'
 export * from './RJSF'
 export * from './DevtronProgressing'
+export { default as ChartVersionAndTypeSelector } from './ChartVersionAndTypeSelector'
 export * from './CustomInput'