@devtron-labs/devtron-fe-common-lib 0.0.50 → 0.0.51-beta-3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.50",
+    "version": "0.0.51-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 {
@@ -239,4 +240,9 @@ export const RepositoryAction = {
     CONTAINER: "CONTAINER",
     CHART_PULL: "CHART_PULL",
     CHART_PUSH: "CHART_PUSH"
+}
+
+export enum APPROVAL_MODAL_TYPE {
+    CONFIG = 'CONFIG',
+    DEPLOYMENT = 'DEPLOYMENT',
 }

package/src/Common/CustomInput/CustomInput.tsx

@@ -28,7 +28,8 @@ export function CustomInput({
     defaultValue,
     onKeyDown,
     required,
-    additionalErrorInfo
+    additionalErrorInfo,
+    inputWrapClassname = '',
 }: CustomInputProps) {
 
     function handleError(error: any): any[] {
@@ -92,7 +93,7 @@ export function CustomInput({
     }
 
     return (
-        <div className="flex column left top">
+        <div className={`flex column left top ${inputWrapClassname}`}>
            {renderInputLabel()}
             <input
                 data-testid={dataTestid}

package/src/Common/CustomInput/Types.ts

@@ -27,4 +27,5 @@ export interface CustomInputProps {
     onKeyDown?: (e) => void
     required?: boolean
     additionalErrorInfo?: React.ReactNode
+    inputWrapClassname?: string
 }

package/src/Common/EmptyState/GenericEmptyState.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 import AppNotDeployed from '../../Assets/Img/app-not-deployed.png'
 import { GenericEmptyStateType, ImageType } from '../Types'
 
@@ -19,24 +19,48 @@ function GenericEmptyState({
     SvgImage,
     noImage,
     layout = 'column',
-    contentClassName = ''
+    contentClassName = '',
 }: GenericEmptyStateType): JSX.Element {
-    const isRowLayout = layout === 'row';
-    
+    const isRowLayout = layout === 'row'
+
+    const getImageSize = () => {
+        switch (imageType) {
+            case ImageType.Medium:
+                return { width: '200', height: '160' }
+            case ImageType.Large:
+                return { width: '250', height: '200' }
+            default:
+                return { width: '200', height: '160' }
+        }
+    }
+
     return (
         <div
-            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${classname ? classname : ''}`}
+            className={`flex ${isRowLayout ? 'dc__gap-32' : 'column dc__gap-20'} empty-state ${
+                classname ? classname : ''
+            }`}
             style={styles}
             data-testid="generic-empty-state"
             {...(heightToDeduct >= 0 && { style: { ...styles, height: `calc(100vh - ${heightToDeduct}px)` } })}
-        >   
-            {!SvgImage ? !noImage && <img className={imageClassName ? imageClassName : ''}
-                src={image || AppNotDeployed}
-                width={imageType === ImageType.Medium ? '200' : '250'}
-                height={imageType === ImageType.Medium ? '160' : '200'}
-                alt="empty-state"
-            /> : <SvgImage />}
-            <div className={`flex column dc__gap-10 dc__mxw-300 ${isRowLayout ? 'dc__align-start' : ''} ${contentClassName}`}>
+        >
+            {!SvgImage ? (
+                !noImage && (
+                    <img
+                        className={imageClassName ? imageClassName : ''}
+                        src={image || AppNotDeployed}
+                        width={getImageSize().width}
+                        height={getImageSize().height}
+                        alt="empty-state"
+                    />
+                )
+            ) : (
+                <SvgImage style={{ width: `${getImageSize().width}px`, height: `${getImageSize().height}px` }} />
+            )}
+            <div
+                className={`flex column dc__gap-10 dc__mxw-300 ${
+                    isRowLayout ? 'dc__align-start' : ''
+                } ${contentClassName}`}
+            >
                 <h4 className="title fw-6 cn-9 mt-0 mb-0">{title}</h4>
                 {subTitle && <p className={`subtitle ${isRowLayout ? 'subtitle--text-start' : ''}`}>{subTitle}</p>}
                 {isButtonAvailable && renderButton()}

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,102 @@ 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])) {
+            if (obj[key].length === 0) continue
+            obj[key] = obj[key].filter((item) => item !== null)
+            // Check if the array is empty
+            if (obj[key].length === 0) {
+                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] === 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]??lastPath)) ? {} : []
+                }
+                current = current[key]
+            }
+            let key = isNaN(Number(lastPath)) ? lastPath : parseInt(lastPath)
+            current[key] = element.value
+        })
+    })
+    return resultJson['$']
+}
+

package/src/Common/Types.ts

@@ -631,6 +631,75 @@ export interface CiPipeline {
     isOffendingMandatoryPlugin?: boolean
     pipelineType?: string
 }
+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;
+}
+
+export interface DeploymentChartVersionType {
+    chartRefId: number 
+    chartVersion: string
+    chartType: string
+    type: number
+}
+
+export interface ChartVersionAndTypeSelectorProps {
+    setSelectedChartRefId: React.Dispatch<React.SetStateAction<number>>
+}
 
 export enum PipelineType {
     CI_PIPELINE = 'CI_PIPELINE',

package/src/Common/index.ts

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