@devtron-labs/devtron-fe-common-lib 0.0.41 → 0.0.42-beta-2

package/dist/Common/DebouncedSearch/DebouncedSearch.d.ts

@@ -12,4 +12,4 @@ import { DebouncedSearchProps } from './Types';
  * @param clearSearch - (Optional) To clear the search text
  * @param showClearIcon - (Optional) To show the clear icon default value is true
  */
-export default function DebouncedSearch({ onSearch, Icon, children, placeholder, containerClass, iconClass, inputClass, debounceTimeout, clearSearch, showClearIcon, }: DebouncedSearchProps): JSX.Element;
+export default function DebouncedSearch({ onSearch, Icon, children, placeholder, containerClass, iconClass, inputClass, debounceTimeout, clearSearch, showClearIcon, autoFocus, }: DebouncedSearchProps): JSX.Element;

package/dist/Common/DebouncedSearch/Types.d.ts

@@ -10,4 +10,5 @@ export interface DebouncedSearchProps {
     debounceTimeout?: number;
     clearSearch?: boolean;
     showClearIcon?: boolean;
+    autoFocus?: boolean;
 }

package/dist/Common/Dialogs/Types.d.ts

@@ -9,6 +9,7 @@ export interface DeleteDialogProps {
     apiCallInProgress?: boolean;
     dataTestId?: string;
     buttonPrimaryText?: string;
+    shouldStopPropagation?: boolean;
 }
 export interface ForceDeleteDialogType {
     onClickDelete: () => void;

package/dist/Common/Types.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode, CSSProperties } from 'react';
 import { Placement } from 'tippy.js';
 import { ImageComment, ReleaseTag } from './ImageTags.Types';
+import { DockerConfigOverrideType, TaskErrorObj } from '.';
 export interface ResponseType {
     code: number;
     status: string;
@@ -284,6 +285,7 @@ export interface CommonNodeAttr {
     colorCode?: string;
     isExternalCI?: boolean;
     isLinkedCI?: boolean;
+    isLinkedCD?: boolean;
     isJobCI?: boolean;
     environmentName?: string;
     environmentId?: number;
@@ -320,6 +322,7 @@ export interface CommonNodeAttr {
     };
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
+    isGitRequired?: boolean;
 }
 export declare enum DeploymentAppTypes {
     HELM = "helm",
@@ -427,4 +430,138 @@ export interface AsyncState<T> {
 export interface AsyncOptions {
     resetOnChange: boolean;
 }
+export interface AppEnvironment {
+    environmentId: number;
+    environmentName: string;
+    appMetrics: boolean;
+    infraMetrics: boolean;
+    prod: boolean;
+    chartRefId?: number;
+    lastDeployed?: string;
+    lastDeployedBy?: string;
+    lastDeployedImage?: string;
+    appStatus?: string;
+    deploymentAppDeleteRequest?: boolean;
+    isVirtualEnvironment?: boolean;
+    isProtected?: boolean;
+    pipelineId?: number;
+    latestCdWorkflowRunnerId?: number;
+}
+export interface Strategy {
+    deploymentTemplate: string;
+    config: any;
+    default?: boolean;
+}
+export interface CDStage {
+    status: string;
+    name: string;
+    triggerType: 'AUTOMATIC' | 'MANUAL';
+    config: string;
+}
+export interface CDStageConfigMapSecretNames {
+    configMaps: any[];
+    secrets: any[];
+}
+export interface PrePostDeployStageType {
+    isValid: boolean;
+    steps: TaskErrorObj[];
+    triggerType: string;
+    name: string;
+    status: string;
+}
+export interface CdPipeline {
+    id: number;
+    environmentId: number;
+    environmentName?: string;
+    description?: string;
+    ciPipelineId: number;
+    triggerType: 'AUTOMATIC' | 'MANUAL';
+    name: string;
+    strategies?: Strategy[];
+    namespace?: string;
+    appWorkflowId?: number;
+    deploymentTemplate?: string;
+    preStage?: CDStage;
+    postStage?: CDStage;
+    preStageConfigMapSecretNames?: CDStageConfigMapSecretNames;
+    postStageConfigMapSecretNames?: CDStageConfigMapSecretNames;
+    runPreStageInEnv?: boolean;
+    runPostStageInEnv?: boolean;
+    isClusterCdActive?: boolean;
+    parentPipelineId?: number;
+    parentPipelineType?: string;
+    deploymentAppDeleteRequest?: boolean;
+    deploymentAppCreated?: boolean;
+    userApprovalConfig?: UserApprovalConfigType;
+    isVirtualEnvironment?: boolean;
+    deploymentAppType: DeploymentAppTypes;
+    helmPackageName?: string;
+    preDeployStage?: PrePostDeployStageType;
+    postDeployStage?: PrePostDeployStageType;
+    isProdEnv?: boolean;
+}
+export interface ExternalCiConfig {
+    id: number;
+    webhookUrl: string;
+    payload: string;
+    accessKey: string;
+}
+export interface Source {
+    type: string;
+    value?: string;
+    regex?: string;
+}
+export interface CiMaterial {
+    source: Source;
+    gitMaterialId: number;
+    id: number;
+    gitMaterialName: string;
+    isRegex?: boolean;
+}
+export interface Task {
+    name?: string;
+    type?: string;
+    cmd?: string;
+    args?: Array<string>;
+}
+export interface CiScript {
+    id: number;
+    index: number;
+    name: string;
+    script: string;
+    outputLocation?: string;
+}
+export interface CiPipeline {
+    isManual: boolean;
+    dockerArgs?: Map<string, string>;
+    isExternal: boolean;
+    parentCiPipeline: number;
+    parentAppId: number;
+    externalCiConfig: ExternalCiConfig;
+    ciMaterial?: CiMaterial[];
+    name?: string;
+    id?: number;
+    active?: boolean;
+    linkedCount: number;
+    scanEnabled: boolean;
+    deleted?: boolean;
+    version?: string;
+    beforeDockerBuild?: Array<Task>;
+    afterDockerBuild?: Array<Task>;
+    appWorkflowId?: number;
+    beforeDockerBuildScripts?: Array<CiScript>;
+    afterDockerBuildScripts?: Array<CiScript>;
+    isDockerConfigOverridden?: boolean;
+    dockerConfigOverride?: DockerConfigOverrideType;
+    appName?: string;
+    appId?: string;
+    componentId?: number;
+    isCITriggerBlocked?: boolean;
+    ciBlockState?: {
+        action: any;
+        metadataField: string;
+    };
+    isOffendingMandatoryPlugin?: boolean;
+    pipelineType?: string;
+}
 export {};

package/dist/index.js

@@ -15098,7 +15098,19 @@ ConfirmationDialog.ButtonGroup = ButtonGroup;
 var warn = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%20%20%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%200h48v48H0z%22%2F%3E%20%20%20%20%20%20%20%20%3Cg%20fill%3D%22%23FFEBEB%22%20stroke%3D%22%23F33E3E%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7%2024h24v17a4%204%200%200%201-4%204H11a4%204%200%200%201-4-4V24z%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M19%2029.5v10M24%2029.5v10M14%2029.5v10%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3Cpath%20stroke%3D%22%23F33E3E%22%20stroke-dasharray%3D%2217%2C3%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M42%2010a3%203%200%200%201%200%206H31M38%2023a3%203%200%200%200-3-3h-8%22%2F%3E%20%20%20%20%20%20%20%20%3Cg%20stroke%3D%22%23F33E3E%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20transform%3D%22rotate%28-10%2036.29%20-8.86%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20width%3D%2230%22%20height%3D%225%22%20y%3D%226%22%20fill%3D%22%23FFEBEB%22%20rx%3D%221%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11%200h8a2%202%200%200%201%202%202v4H9V2a2%202%200%200%201%202-2z%22%2F%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
 var DeleteDialog = function (props) {
-    return (jsxRuntime.jsxs(ConfirmationDialog, __assign({ className: "confirmation-dialog__body--w-400" }, { children: [jsxRuntime.jsx(ConfirmationDialog.Icon, { src: warn }), jsxRuntime.jsx(ConfirmationDialog.Body, __assign({ title: props.title }, { children: jsxRuntime.jsxs("div", __assign({ className: "fs-13 cn-7 lh-1-54 w-100" }, { children: [props.description ? props.description : null, props.children] })) })), jsxRuntime.jsx(ConfirmationDialog.ButtonGroup, { children: jsxRuntime.jsxs("div", __assign({ className: "flex right" }, { children: [jsxRuntime.jsx("button", __assign({ type: "button", className: "cta cancel cta-cd-delete-modal ml-16", onClick: props.closeDelete, disabled: props.apiCallInProgress, "data-testid": "dialog-cancel" }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ type: "button", className: "cta delete cta-cd-delete-modal ml-16", onClick: function () { return props.delete(); }, disabled: props.apiCallInProgress, "data-testid": "dialog-delete" }, { children: props.apiCallInProgress ? (jsxRuntime.jsx(Progressing, {})) : ("".concat(props.deletePrefix || '').concat(props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete').concat(props.deletePostfix || '')) }))] })) })] })));
+    var handleDelete = function (e) {
+        if (props.shouldStopPropagation) {
+            e.stopPropagation();
+        }
+        props.delete();
+    };
+    var handleModalClose = function (e) {
+        if (props.shouldStopPropagation) {
+            e.stopPropagation();
+        }
+        props.closeDelete();
+    };
+    return (jsxRuntime.jsxs(ConfirmationDialog, __assign({ className: "confirmation-dialog__body--w-400" }, { children: [jsxRuntime.jsx(ConfirmationDialog.Icon, { src: warn }), jsxRuntime.jsx(ConfirmationDialog.Body, __assign({ title: props.title }, { children: jsxRuntime.jsxs("div", __assign({ className: "fs-13 cn-7 lh-1-54 w-100" }, { children: [props.description ? props.description : null, props.children] })) })), jsxRuntime.jsx(ConfirmationDialog.ButtonGroup, { children: jsxRuntime.jsxs("div", __assign({ className: "flex right" }, { children: [jsxRuntime.jsx("button", __assign({ type: "button", className: "cta cancel cta-cd-delete-modal ml-16", onClick: handleModalClose, disabled: props.apiCallInProgress, "data-testid": "dialog-cancel" }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ type: "button", className: "cta delete cta-cd-delete-modal ml-16", onClick: handleDelete, disabled: props.apiCallInProgress, "data-testid": "dialog-delete" }, { children: props.apiCallInProgress ? (jsxRuntime.jsx(Progressing, {})) : ("".concat(props.deletePrefix || '').concat(props.buttonPrimaryText ? props.buttonPrimaryText : 'Delete').concat(props.deletePostfix || '')) }))] })) })] })));
 };
 function DeleteDialogDescription(props) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
@@ -23638,8 +23650,8 @@ var SvgIcErrorCross = function SvgIcErrorCross(props) {
  * @param showClearIcon - (Optional) To show the clear icon default value is true
  */
 function DebouncedSearch(_a) {
-    var onSearch = _a.onSearch, Icon = _a.Icon, children = _a.children, placeholder = _a.placeholder, _b = _a.containerClass, containerClass = _b === void 0 ? '' : _b, _c = _a.iconClass, iconClass = _c === void 0 ? '' : _c, _d = _a.inputClass, inputClass = _d === void 0 ? '' : _d, _e = _a.debounceTimeout, debounceTimeout = _e === void 0 ? 500 : _e, clearSearch = _a.clearSearch, _f = _a.showClearIcon, showClearIcon = _f === void 0 ? true : _f;
-    var _g = __read(React.useState(''), 2), searchText = _g[0], setSearchText = _g[1];
+    var onSearch = _a.onSearch, Icon = _a.Icon, children = _a.children, placeholder = _a.placeholder, _b = _a.containerClass, containerClass = _b === void 0 ? '' : _b, _c = _a.iconClass, iconClass = _c === void 0 ? '' : _c, _d = _a.inputClass, inputClass = _d === void 0 ? '' : _d, _e = _a.debounceTimeout, debounceTimeout = _e === void 0 ? 500 : _e, clearSearch = _a.clearSearch, _f = _a.showClearIcon, showClearIcon = _f === void 0 ? true : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? true : _g;
+    var _h = __read(React.useState(''), 2), searchText = _h[0], setSearchText = _h[1];
     React.useEffect(function () {
         setSearchText('');
     }, [clearSearch]);
@@ -23649,8 +23661,8 @@ function DebouncedSearch(_a) {
     var handleClearSearch = function () {
         setSearchText('');
     };
-    useDebouncedEffect(function () { return onSearch(searchText); }, debounceTimeout, [searchText, onSearch]);
-    return (jsxRuntime.jsxs("div", __assign({ className: containerClass }, { children: [Icon && jsxRuntime.jsx(Icon, { className: iconClass }), jsxRuntime.jsx("input", { type: "text", className: inputClass, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search', value: searchText, onChange: handleSearchTextChange, autoFocus: true, "data-testid": "debounced-search" }), showClearIcon && !!searchText && (jsxRuntime.jsx("button", __assign({ type: "button", className: "dc__outline-none-imp dc__no-border p-0 bc-n50 flex", onClick: handleClearSearch, "data-testid": "clear-search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-20 icon-n6" }) }))), children] })));
+    useDebouncedEffect(function () { return onSearch(searchText); }, debounceTimeout, [searchText]);
+    return (jsxRuntime.jsxs("div", __assign({ className: containerClass }, { children: [Icon && jsxRuntime.jsx(Icon, { className: iconClass }), jsxRuntime.jsx("input", { type: "text", className: inputClass, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search', value: searchText, onChange: handleSearchTextChange, autoFocus: autoFocus, "data-testid": "debounced-search" }), showClearIcon && !!searchText && (jsxRuntime.jsx("button", __assign({ type: "button", className: "dc__outline-none-imp dc__no-border p-0 bc-n50 flex", onClick: handleClearSearch, "data-testid": "clear-search" }, { children: jsxRuntime.jsx(SvgIcErrorCross, { className: "icon-dim-20 icon-n6" }) }))), children] })));
 }
 
 // This is meant to be a reusable component that will provide a grid like dynamic layout where xs is the number of columns out of 12 that the item will take up

package/package.json

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

package/src/Common/DebouncedSearch/DebouncedSearch.tsx

@@ -26,6 +26,7 @@ export default function DebouncedSearch({
     debounceTimeout = 500,
     clearSearch,
     showClearIcon = true,
+    autoFocus = true,
 }: DebouncedSearchProps) {
     const [searchText, setSearchText] = useState<string>('')
 
@@ -41,7 +42,7 @@ export default function DebouncedSearch({
         setSearchText('')
     }
 
-    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText, onSearch])
+    useDebouncedEffect(() => onSearch(searchText), debounceTimeout, [searchText])
 
     return (
         <div className={containerClass}>
@@ -53,7 +54,7 @@ export default function DebouncedSearch({
                 placeholder={placeholder ?? 'Search'}
                 value={searchText}
                 onChange={handleSearchTextChange}
-                autoFocus
+                autoFocus={autoFocus}
                 data-testid="debounced-search"
             />
 

package/src/Common/DebouncedSearch/Types.ts

@@ -9,4 +9,5 @@ export interface DebouncedSearchProps {
     debounceTimeout?: number
     clearSearch?: boolean
     showClearIcon?: boolean
+    autoFocus?: boolean
 }

package/src/Common/Dialogs/DeleteDialog.tsx

@@ -5,6 +5,22 @@ import ConfirmationDialog from './ConfirmationDialog'
 import { DeleteDialogProps } from './Types'
 
 export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.FC<any> } = function (props) {
+    const handleDelete = (e: React.MouseEvent) => {
+        if (props.shouldStopPropagation) {
+            e.stopPropagation()
+        }
+
+        props.delete()
+    }
+
+    const handleModalClose = (e: React.MouseEvent) => {
+        if (props.shouldStopPropagation) {
+            e.stopPropagation()
+        }
+
+        props.closeDelete()
+    }
+
     return (
         <ConfirmationDialog className="confirmation-dialog__body--w-400">
             <ConfirmationDialog.Icon src={warn} />
@@ -19,7 +35,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                     <button
                         type="button"
                         className="cta cancel cta-cd-delete-modal ml-16"
-                        onClick={props.closeDelete}
+                        onClick={handleModalClose}
                         disabled={props.apiCallInProgress}
                         data-testid="dialog-cancel"
                     >
@@ -28,7 +44,7 @@ export const DeleteDialog: React.FC<DeleteDialogProps> & { Description?: React.F
                     <button
                         type="button"
                         className="cta delete cta-cd-delete-modal ml-16"
-                        onClick={() => props.delete()}
+                        onClick={handleDelete}
                         disabled={props.apiCallInProgress}
                         data-testid="dialog-delete"
                     >

package/src/Common/Dialogs/Types.ts

@@ -10,6 +10,7 @@ export interface DeleteDialogProps {
     apiCallInProgress?: boolean
     dataTestId?: string
     buttonPrimaryText?: string
+    shouldStopPropagation?: boolean
 }
 
 export interface ForceDeleteDialogType {

package/src/Common/Types.ts

@@ -1,6 +1,8 @@
 import React, { ReactNode, CSSProperties } from 'react'
 import { Placement } from 'tippy.js'
 import { ImageComment, ReleaseTag } from './ImageTags.Types'
+import { DockerConfigOverrideType, TaskErrorObj } from '.'
+
 export interface ResponseType {
     code: number
     status: string
@@ -315,6 +317,7 @@ export interface CommonNodeAttr {
     colorCode?: string
     isExternalCI?: boolean
     isLinkedCI?: boolean
+    isLinkedCD?: boolean
     isJobCI?: boolean // used for Job type CI in Devtron Apps
     environmentName?: string //used for CDs
     environmentId?: number
@@ -351,6 +354,7 @@ export interface CommonNodeAttr {
     }
     appReleaseTagNames?: string[]
     tagsEditable?: boolean
+    isGitRequired?: boolean;
 }
 
 export enum DeploymentAppTypes {
@@ -474,3 +478,149 @@ export interface AsyncState<T> {
 export interface AsyncOptions {
     resetOnChange: boolean
 }
+
+export interface AppEnvironment {
+    environmentId: number
+    environmentName: string
+    appMetrics: boolean
+    infraMetrics: boolean
+    prod: boolean
+    chartRefId?: number
+    lastDeployed?: string
+    lastDeployedBy?: string
+    lastDeployedImage?: string
+    appStatus?: string
+    deploymentAppDeleteRequest?: boolean
+    isVirtualEnvironment?: boolean
+    isProtected?: boolean
+    pipelineId?: number
+    latestCdWorkflowRunnerId?: number
+}
+
+export interface Strategy {
+    deploymentTemplate: string
+    config: any
+    default?: boolean
+}
+
+export interface CDStage {
+    status: string
+    name: string
+    triggerType: 'AUTOMATIC' | 'MANUAL'
+    config: string
+}
+
+export interface CDStageConfigMapSecretNames {
+    configMaps: any[]
+    secrets: any[]
+}
+
+export interface PrePostDeployStageType {
+    isValid: boolean
+    steps: TaskErrorObj[]
+    triggerType: string
+    name: string
+    status: string
+}
+
+export interface CdPipeline {
+    id: number
+    environmentId: number
+    environmentName?: string
+    description?: string
+    ciPipelineId: number
+    triggerType: 'AUTOMATIC' | 'MANUAL'
+    name: string
+    strategies?: Strategy[]
+    namespace?: string
+    appWorkflowId?: number
+    deploymentTemplate?: string
+    preStage?: CDStage
+    postStage?: CDStage
+    preStageConfigMapSecretNames?: CDStageConfigMapSecretNames
+    postStageConfigMapSecretNames?: CDStageConfigMapSecretNames
+    runPreStageInEnv?: boolean
+    runPostStageInEnv?: boolean
+    isClusterCdActive?: boolean
+    parentPipelineId?: number
+    parentPipelineType?: string
+    deploymentAppDeleteRequest?: boolean
+    deploymentAppCreated?: boolean
+    userApprovalConfig?: UserApprovalConfigType
+    isVirtualEnvironment?: boolean
+    deploymentAppType: DeploymentAppTypes
+    helmPackageName?: string
+    preDeployStage?: PrePostDeployStageType
+    postDeployStage?: PrePostDeployStageType
+    isProdEnv?: boolean
+}
+
+export interface ExternalCiConfig {
+    id: number
+    webhookUrl: string
+    payload: string
+    accessKey: string
+}
+
+export interface Source {
+    type: string
+    value?: string
+    regex?: string
+}
+
+export interface CiMaterial {
+    source: Source
+    gitMaterialId: number
+    id: number
+    gitMaterialName: string
+    isRegex?: boolean
+}
+
+export interface Task {
+    name?: string
+    type?: string
+    cmd?: string
+    args?: Array<string>
+}
+
+export interface CiScript {
+    id: number
+    index: number
+    name: string
+    script: string
+    outputLocation?: string
+}
+
+export interface CiPipeline {
+    isManual: boolean
+    dockerArgs?: Map<string, string>
+    isExternal: boolean
+    parentCiPipeline: number
+    parentAppId: number
+    externalCiConfig: ExternalCiConfig
+    ciMaterial?: CiMaterial[]
+    name?: string
+    id?: number
+    active?: boolean
+    linkedCount: number
+    scanEnabled: boolean
+    deleted?: boolean
+    version?: string
+    beforeDockerBuild?: Array<Task>
+    afterDockerBuild?: Array<Task>
+    appWorkflowId?: number
+    beforeDockerBuildScripts?: Array<CiScript>
+    afterDockerBuildScripts?: Array<CiScript>
+    isDockerConfigOverridden?: boolean
+    dockerConfigOverride?: DockerConfigOverrideType
+    appName?: string
+    appId?: string
+    componentId?: number
+    isCITriggerBlocked?: boolean
+    ciBlockState?: {
+        action: any
+        metadataField: string
+    }
+    isOffendingMandatoryPlugin?: boolean
+    pipelineType?: string
+}