@devtron-labs/devtron-fe-common-lib 0.0.50-beta-1 → 0.0.50

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.50-beta-1",
+    "version": "0.0.50",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -50,8 +50,6 @@
         "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/Api.ts

@@ -1,5 +1,5 @@
 import { ServerErrors } from './ServerError'
-import { RequestTimeout, Host, URLS } from './Constants'
+import { FALLBACK_REQUEST_TIMEOUT, Host, URLS } from './Constants'
 import { ResponseType, APIOptions } from './Types'
 
 const responseMessages = {
@@ -176,7 +176,9 @@ function fetchInTime(
     const controller = new AbortController()
     const { signal } = controller
     const timeoutPromise: Promise<ResponseType> = new Promise((resolve, reject) => {
-        let timeout = options?.timeout ? options.timeout : RequestTimeout
+        const requestTimeout = (window as any)?._env_?.GLOBAL_API_TIMEOUT || FALLBACK_REQUEST_TIMEOUT
+        const timeout = options?.timeout ? options.timeout : requestTimeout
+
         setTimeout(() => {
             controller.abort()
             reject({

package/src/Common/Common.service.ts

@@ -309,7 +309,3 @@ 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

@@ -1,6 +1,6 @@
 import { RegistryTypeDetailType } from "./Types"
 
-export const RequestTimeout = 60000
+export const FALLBACK_REQUEST_TIMEOUT = 60000
 export const Host = process.env.REACT_APP_ORCHESTRATOR_ROOT
 
 export const DOCUMENTATION_HOME_PAGE = 'https://docs.devtron.ai'
@@ -24,8 +24,7 @@ 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',
-    DEPLOYMENT_TEMPLATE_LIST: 'app/template/list'
+    CD_MATERIAL_GET: 'app/cd-pipeline'
 }
 
 export enum KEY_VALUE {

package/src/Common/Helper.tsx

@@ -7,8 +7,6 @@ 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,
@@ -460,102 +458,3 @@ 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,75 +631,6 @@ 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,6 +42,5 @@ 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'

package/dist/Common/ChartVersionAndTypeSelector.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { ChartVersionAndTypeSelectorProps } from './Types';
-declare const ChartVersionAndTypeSelector: ({ setSelectedChartRefId }: ChartVersionAndTypeSelectorProps) => JSX.Element;
-export default ChartVersionAndTypeSelector;

package/src/Common/ChartVersionAndTypeSelector.tsx

@@ -1,78 +0,0 @@
-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