@devtron-labs/devtron-fe-common-lib 0.0.48-beta-5 → 0.0.48-beta-6

package/dist/Common/ChartVersionAndTypeSelector.d.ts

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

package/dist/Common/Common.service.d.ts

@@ -16,4 +16,5 @@ export declare function setImageTags(request: any, pipelineId: number, artifactI
 export declare const genericCDMaterialsService: (serviceType: CDMaterialServiceEnum, cdMaterialID: number, stage: DeploymentNodeType, signal: AbortSignal, queryParams?: CDMaterialServiceQueryParams) => Promise<CDMaterialResponseType>;
 export declare function extractImage(image: string): string;
 export declare function createGitCommitUrl(url: string, revision: string): string;
+export declare function fetchChartTemplateVersions(): Promise<ResponseType>;
 export {};

package/dist/Common/Constants.d.ts

@@ -20,6 +20,7 @@ export declare const ROUTES: {
     USER_CHECK_ROLE: string;
     IMAGE_TAGGING: string;
     CD_MATERIAL_GET: string;
+    DEPLOYMENT_TEMPLATE_LIST: string;
 };
 export declare enum KEY_VALUE {
     KEY = "key",

package/dist/Common/Helper.d.ts

@@ -48,6 +48,13 @@ export declare const getUrlWithSearchParams: (url: string, params: Record<string
  * Custom exception logger function for logging errors to sentry
  */
 export declare const logExceptionToSentry: typeof Sentry.captureException;
+export declare const customStyles: {
+    control: (base: any, state: any) => any;
+    indicatorSeparator: (base: any, state: any) => any;
+    valueContainer: (base: any, state: any) => any;
+    dropdownIndicator: (base: any, state: any) => any;
+};
+export declare const getFilteredChartVersions: (charts: any, selectedChartType: any) => any;
 export declare function getUnlockedJSON(json: any, jsonPathArray: any): any;
 export declare function getLockedJSON(json: any, jsonPathArray: string[]): any;
 export {};

package/dist/Common/Types.d.ts

@@ -625,6 +625,15 @@ export interface CodeEditorHeaderInterface {
     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 declare enum PipelineType {
     CI_PIPELINE = "CI_PIPELINE",
     CD_PIPELINE = "CD_PIPELINE",

package/dist/Common/index.d.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';

package/dist/index.js

@@ -48,7 +48,8 @@ var 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'
 };
 exports.KEY_VALUE = void 0;
 (function (KEY_VALUE) {
@@ -11761,6 +11762,22 @@ var getUrlWithSearchParams = function (url, params) {
  * Custom exception logger function for logging errors to sentry
  */
 var logExceptionToSentry = captureException.bind(window);
+var customStyles = {
+    control: function (base, state) { return (__assign(__assign({}, base), { minHeight: '32px', boxShadow: 'none', border: 'none', cursor: 'pointer', background: 'transparent' })); },
+    indicatorSeparator: function (base, state) { return (__assign(__assign({}, base), { width: 0 })); },
+    valueContainer: function (base, state) { return (__assign(__assign({}, base), { padding: '0', fontSize: '13px', fontWeight: '600' })); },
+    dropdownIndicator: function (base, state) { return (__assign(__assign({}, base), { color: 'var(--N400)', padding: '0 8px', transition: 'all .2s ease', transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)' })); },
+};
+var getFilteredChartVersions = function (charts, selectedChartType) {
+    // Filter chart versions based on selected chart type
+    return charts
+        .filter(function (item) { return (item === null || item === void 0 ? void 0 : item.chartType) === selectedChartType.value; })
+        .map(function (item) { return ({
+        value: item === null || item === void 0 ? void 0 : item.chartVersion,
+        label: item === null || item === void 0 ? void 0 : item.chartVersion,
+        chartRefId: item.chartRefId,
+    }); });
+};
 function removeEmptyObjectKeysAndNullValues(obj) {
     // It recursively removes empty object keys and array values that are null
     for (var key in obj) {
@@ -24495,6 +24512,9 @@ function createGitCommitUrl(url, revision) {
         }
     }
     return "NA";
+}
+function fetchChartTemplateVersions() {
+    return get("".concat(ROUTES.DEPLOYMENT_TEMPLATE_LIST, "?appId=-1&envId=-1"));
 }
 
 /*
@@ -28209,6 +28229,53 @@ function DevtronProgressing(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: parentClasses ? parentClasses : '' }, { children: jsxRuntime.jsx(SvgIcRotateDevtron, { className: classes ? classes : '' }) })));
 }
 
+// @TODO: Generalize this component to be used in CodeEditor as Chart selector toolbar
+// when the Code Editor is moved to the fe-common-lib
+var ChartVersionAndTypeSelector = function (_a) {
+    var setSelectedChartRefId = _a.setSelectedChartRefId;
+    var _b = __read(React.useState([]), 2), charts = _b[0], setCharts = _b[1];
+    var _c = __read(React.useState(null), 2), selectedChartType = _c[0], setSelectedChartType = _c[1];
+    var _d = __read(React.useState([]), 2), chartVersionOptions = _d[0], setChartVersionOptions = _d[1];
+    var _e = __read(React.useState([]), 2), chartTypeOptions = _e[0], setChartTypeOptions = _e[1];
+    var _f = __read(React.useState(null), 2), selectedChartVersion = _f[0], setSelectedChartVersion = _f[1];
+    React.useEffect(function () {
+        fetchChartTemplateVersions()
+            .then(function (res) {
+            var charts = (res === null || res === void 0 ? void 0 : res.result) || [];
+            setCharts(charts);
+            // Extract unique chart types from the data
+            var chartTypeOptions = __spreadArray([], __read(new Set(charts.map(function (item) { return item.chartType; }))), false).map(function (type) { return ({
+                value: type,
+                label: type,
+            }); });
+            setChartTypeOptions(chartTypeOptions);
+            var filteredVersions = getFilteredChartVersions(charts, chartTypeOptions[0]);
+            selectFirstChartVersion(filteredVersions);
+        })
+            .catch(function (err) {
+            showError(err);
+        });
+    }, []);
+    var selectFirstChartVersion = function (filteredVersions) {
+        var _a;
+        setChartVersionOptions(filteredVersions);
+        setSelectedChartVersion(filteredVersions[0]); // Select the first chart version by default
+        setSelectedChartRefId((_a = filteredVersions[0]) === null || _a === void 0 ? void 0 : _a.chartRefId);
+    };
+    // Function to update chart version options based on selected chart type
+    var handleChartTypeChange = function (selectedOption) {
+        setSelectedChartType(selectedOption);
+        var filteredVersions = getFilteredChartVersions(charts, selectedOption);
+        selectFirstChartVersion(filteredVersions);
+    };
+    // Function to handle the change of the selected chart version
+    var handleChartVersionChange = function (selectedOption) {
+        setSelectedChartVersion(selectedOption);
+        setSelectedChartRefId(selectedOption.chartRefId);
+    };
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "chart-type-options flex", "data-testid": "chart-type-options" }, { children: [jsxRuntime.jsx("span", __assign({ className: "chart-type-options-label mr-4" }, { children: "Chart Type" })), jsxRuntime.jsx(ReactSelect, { value: selectedChartType !== null && selectedChartType !== void 0 ? selectedChartType : chartTypeOptions[0], options: chartTypeOptions, onChange: handleChartTypeChange, styles: customStyles })] })), jsxRuntime.jsxs("div", __assign({ className: "chart-version-options flex", "data-testid": "chart-version-options" }, { children: [jsxRuntime.jsx("span", __assign({ className: "chart-version-options-label mr-4" }, { children: "Chart Version" })), jsxRuntime.jsx(ReactSelect, { value: selectedChartVersion !== null && selectedChartVersion !== void 0 ? selectedChartVersion : chartVersionOptions[0], options: chartVersionOptions, onChange: handleChartVersionChange, styles: customStyles })] }))] })));
+};
+
 function TooltipContent(_a) {
     var tooltipContent = _a.tooltipContent;
     if (tooltipContent) {
@@ -28313,6 +28380,7 @@ exports.BreadCrumb = BreadCrumb;
 exports.BreadcrumbStore = Store;
 exports.BuildStageVariable = BuildStageVariable;
 exports.CDModalTab = CDModalTab;
+exports.ChartVersionAndTypeSelector = ChartVersionAndTypeSelector;
 exports.Checkbox = Checkbox$1;
 exports.ClearIndicator = ClearIndicator;
 exports.ClipboardButton = ClipboardButton;
@@ -28385,12 +28453,15 @@ exports.VisibleModal2 = VisibleModal2;
 exports.closeOnEscKeyPressed = closeOnEscKeyPressed;
 exports.copyToClipboard = copyToClipboard;
 exports.createGitCommitUrl = createGitCommitUrl;
+exports.customStyles = customStyles;
 exports.extractImage = extractImage;
+exports.fetchChartTemplateVersions = fetchChartTemplateVersions;
 exports.genericCDMaterialsService = genericCDMaterialsService;
 exports.get = get;
 exports.getAlphabetIcon = getAlphabetIcon;
 exports.getCookie = getCookie;
 exports.getEmptyArrayOfLength = getEmptyArrayOfLength;
+exports.getFilteredChartVersions = getFilteredChartVersions;
 exports.getInferredTypeFromValueType = getInferredTypeFromValueType;
 exports.getLockedJSON = getLockedJSON;
 exports.getLoginInfo = getLoginInfo;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.48-beta-5",
+    "version": "0.0.48-beta-6",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

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

@@ -461,6 +461,44 @@ export const getUrlWithSearchParams = (url: string, params: Record<string | numb
  */
 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) {

package/src/Common/Types.ts

@@ -690,6 +690,17 @@ export interface CodeEditorHeaderInterface {
     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',
     CD_PIPELINE = 'CD_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'