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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.50",
+    "version": "0.0.51-beta-2",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -47,9 +47,12 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router": "^5.3.0",
-        "react-router-dom": "^5.3.0"
+        "react-router-dom": "^5.3.0",
+        "react-draggable": "^4.4.5"
     },
     "dependencies": {
+        "fast-json-patch": "^3.1.1",
+        "jsonpath-plus": "^7.2.0",
         "sass": "^1.56.2",
         "tslib": "^2.4.1"
     }

package/src/Assets/Icon/ic-drag.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3335 9.33325C10.8858 9.33325 11.3335 8.88554 11.3335 8.33325C11.3335 7.78097 10.8858 7.33325 10.3335 7.33325C9.78121 7.33325 9.3335 7.78097 9.3335 8.33325C9.3335 8.88554 9.78121 9.33325 10.3335 9.33325Z" fill="#596168"/>
+<path d="M5.66675 9.33325C6.21903 9.33325 6.66675 8.88554 6.66675 8.33325C6.66675 7.78097 6.21903 7.33325 5.66675 7.33325C5.11446 7.33325 4.66675 7.78097 4.66675 8.33325C4.66675 8.88554 5.11446 9.33325 5.66675 9.33325Z" fill="#596168"/>
+<path d="M10.3335 5.33325C10.8858 5.33325 11.3335 4.88554 11.3335 4.33325C11.3335 3.78097 10.8858 3.33325 10.3335 3.33325C9.78121 3.33325 9.3335 3.78097 9.3335 4.33325C9.3335 4.88554 9.78121 5.33325 10.3335 5.33325Z" fill="#596168"/>
+<path d="M5.66675 5.33325C6.21903 5.33325 6.66675 4.88554 6.66675 4.33325C6.66675 3.78097 6.21903 3.33325 5.66675 3.33325C5.11446 3.33325 4.66675 3.78097 4.66675 4.33325C4.66675 4.88554 5.11446 5.33325 5.66675 5.33325Z" fill="#596168"/>
+<path d="M10.3335 13.3333C10.8858 13.3333 11.3335 12.8855 11.3335 12.3333C11.3335 11.781 10.8858 11.3333 10.3335 11.3333C9.78121 11.3333 9.3335 11.781 9.3335 12.3333C9.3335 12.8855 9.78121 13.3333 10.3335 13.3333Z" fill="#596168"/>
+<path d="M5.66675 13.3333C6.21903 13.3333 6.66675 12.8855 6.66675 12.3333C6.66675 11.781 6.21903 11.3333 5.66675 11.3333C5.11446 11.3333 4.66675 11.781 4.66675 12.3333C4.66675 12.8855 5.11446 13.3333 5.66675 13.3333Z" fill="#596168"/>
+</svg>

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,6 @@ export const RepositoryAction = {
     CONTAINER: "CONTAINER",
     CHART_PULL: "CHART_PULL",
     CHART_PUSH: "CHART_PUSH"
-}
+}
+
+export const MAX_Z_INDEX = 2147483647

package/src/Common/DraggableWrapper/DraggableButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ReactComponent as ICDrag } from '../../Assets/Icon/ic-drag.svg'
+import { DraggableButtonProps } from './types'
+
+export default function DraggableButton({ dragClassName }: DraggableButtonProps) {
+    return (
+        <button type="button" className="dc__outline-none-imp dc__no-border p-0 dc__transparent h-20">
+            <ICDrag className={`${dragClassName} dc__grabbable icon-dim-20 fcn-6`} />
+        </button>
+    )
+}

package/src/Common/DraggableWrapper/DraggableWrapper.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useRef, useState } from 'react'
+import Draggable, { ControlPosition, DraggableData } from 'react-draggable'
+import { DraggableWrapperProps, DraggablePositionVariant } from './types'
+import { useWindowSize } from '../Hooks'
+import { MAX_Z_INDEX } from '../Constants'
+
+/**
+ * TODO: import it as lazy, after it is supported in common
+ * 1. If using react select please use menuPlacement='auto'
+ * 2. dragClassName will be used to identify the grabbable button that will grab the div to drag
+ * 3. parentRef is the reference point from which we will derive the base top:0 ,left: 0 position
+ */
+export default function DraggableWrapper({
+    children,
+    zIndex = MAX_Z_INDEX,
+    positionVariant,
+    dragClassName,
+    parentRef,
+    boundaryGap = 16,
+    childDivProps = {},
+}: DraggableWrapperProps) {
+    const windowSize = useWindowSize()
+    const nodeRef = useRef<HTMLDivElement>(null)
+
+    const getDefaultPosition = (positionVariant: DraggablePositionVariant): ControlPosition => {
+        // if i return x: 0, y: 0 then it will be top left corner of parentDiv
+        const parentRect = parentRef?.current?.getBoundingClientRect() ?? {
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+            bottom: 0,
+        }
+
+        switch (positionVariant) {
+            case DraggablePositionVariant.PARENT_BOTTOM_CENTER: {
+                const x = parentRect.width / 2 - nodeRef.current?.getBoundingClientRect().width / 2
+                const y =
+                    Math.min(parentRect.height, windowSize.height) -
+                    parentRect.top -
+                    nodeRef.current?.getBoundingClientRect().height -
+                    boundaryGap
+                return { x, y }
+            }
+            case DraggablePositionVariant.SCREEN_BOTTOM_CENTER: {
+                const x = windowSize.width / 2 - parentRect.left - nodeRef.current?.getBoundingClientRect().width / 2
+                const y =
+                    windowSize.height - parentRect.top - nodeRef.current?.getBoundingClientRect().height - boundaryGap
+
+                return { x, y }
+            }
+            // Add more cases for other variants if needed
+            default:
+                throw new Error('Please use DraggablePositionVariant enum')
+        }
+    }
+
+    const [position, setPosition] = useState<ControlPosition>({
+        x: 0,
+        y: 0,
+    })
+
+    // On change of windowSize we will reset the position to default
+    useEffect(() => {
+        const defaultPosition = getDefaultPosition(positionVariant)
+        setPosition(defaultPosition)
+    }, [nodeRef, positionVariant, windowSize])
+
+    function handlePositionChange(e, data: DraggableData) {
+        const offsetX = parentRef?.current?.getBoundingClientRect().left ?? 0
+        const offsetY = parentRef?.current?.getBoundingClientRect().top ?? 0
+
+        if (
+            offsetX + data.x + nodeRef.current?.getBoundingClientRect().width + boundaryGap > windowSize.width ||
+            offsetY + data.y + nodeRef.current?.getBoundingClientRect().height + boundaryGap > windowSize.height ||
+            offsetX + data.x < 0 ||
+            offsetY + data.y < 0
+        ) {
+            return
+        }
+
+        setPosition({
+            x: data.x,
+            y: data.y,
+        })
+    }
+
+    return (
+        // Check there might be a case if we need it to be absolute?
+        <div
+            className="dc__position-fixed"
+            style={{
+                zIndex,
+            }}
+        >
+            <Draggable handle={`.${dragClassName}`} nodeRef={nodeRef} position={position} onDrag={handlePositionChange}>
+                <div
+                    ref={nodeRef}
+                    {...childDivProps}
+                    style={{
+                        zIndex,
+                    }}
+                >
+                    {children}
+                </div>
+            </Draggable>
+        </div>
+    )
+}

package/src/Common/DraggableWrapper/index.ts

@@ -0,0 +1,3 @@
+export { default as DraggableWrapper } from './DraggableWrapper'
+export { default as DraggableButton } from './DraggableButton'
+export * from './types'

package/src/Common/DraggableWrapper/types.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react'
+
+export enum DraggablePositionVariant {
+    PARENT_BOTTOM_CENTER = 'PARENT_BOTTOM_CENTER',
+    SCREEN_BOTTOM_CENTER = 'SCREEN_BOTTOM_CENTER',
+    // Can add more based on requirement
+}
+
+export interface DraggableWrapperProps {
+    children: React.ReactNode
+    zIndex?: number
+    positionVariant?: DraggablePositionVariant
+    dragClassName: string
+    parentRef?: React.RefObject<HTMLDivElement>
+    boundaryGap?: number
+    childDivProps?: HTMLAttributes<HTMLDivElement>
+}
+
+/**
+ * dragClassName is the class that we feed to Draggable to identify dragging buttons
+ */
+export interface DraggableButtonProps extends Pick<DraggableWrapperProps, 'dragClassName'> {}

package/src/Common/Grid/Grid.tsx

@@ -10,6 +10,7 @@ export default function Grid({
     containerClass = '',
     itemClass = '',
     children,
+    ...containerDivProps
 }: GridProps) {
     const containerStyles = container ? { gap: spacing + 'px' } : {}
 
@@ -25,14 +26,18 @@ export default function Grid({
         }
 
         return (
-            <div className={`p-0 ${itemClass}`} style={itemStyles}>
+            <div className={`p-0 ${itemClass}`} style={itemStyles} {...containerDivProps}>
                 {children}
             </div>
         )
     }
 
     return (
-        <div className={`flex-wrap flexbox ${container ? containerClass : ''}`} style={containerStyles}>
+        <div
+            className={`flex-wrap flexbox ${container ? containerClass : ''}`}
+            style={containerStyles}
+            {...containerDivProps}
+        >
             {children}
         </div>
     )

package/src/Common/Grid/types.ts

@@ -1,4 +1,6 @@
-export interface GridProps {
+import { HTMLAttributes } from "react"
+
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
     container?: boolean
     spacing?: number
     item?: boolean

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/Hooks/UseWindowSize/UseWindowSize.tsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react'
+
+function getSize() {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight,
+    }
+}
+
+export function useWindowSize() {
+    let timeout
+    const [windowSize, setWindowSize] = useState(getSize)
+
+    function handleResize(e) {
+        if (timeout) {
+            window.cancelAnimationFrame(timeout)
+        }
+
+        timeout = window.requestAnimationFrame(function () {
+            setWindowSize(getSize())
+        })
+    }
+
+    useEffect(() => {
+        window.addEventListener('resize', handleResize, false)
+        return () => window.removeEventListener('resize', handleResize, false)
+    }, [])
+
+    return windowSize
+}

package/src/Common/Hooks/index.ts

@@ -1,2 +1,3 @@
 export { useSuperAdmin } from './UseSuperAdmin/UseSuperAdmin'
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
+export { useWindowSize } from './UseWindowSize/UseWindowSize'

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,7 @@ 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'
+export * from './DraggableWrapper'