@devtron-labs/devtron-fe-common-lib 0.0.40 → 0.0.41-beta-1

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

@@ -231,6 +231,9 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[];
     artifactStatus?: string;
     filterState: FilterStates;
+    registryType?: string;
+    imagePath?: string;
+    registryName?: string;
     scanToolId?: number;
     appliedFiltersTimestamp?: string;
     appliedFilters?: FilterConditionsListType[];
@@ -281,6 +284,7 @@ export interface CommonNodeAttr {
     colorCode?: string;
     isExternalCI?: boolean;
     isLinkedCI?: boolean;
+    isLinkedCD?: boolean;
     isJobCI?: boolean;
     environmentName?: string;
     environmentId?: number;

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 });
@@ -22740,7 +22752,7 @@ var cdMaterialListModal = function (artifacts, offset, artifactId, artifactStatu
     var startIndex = offset;
     var isImageMarked = false;
     var materials = artifacts.map(function (material, index) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         var artifactStatusValue = '';
         var filterState = (_a = material.filterState) !== null && _a !== void 0 ? _a : exports.FilterStates.ALLOWED;
         if (artifactId && artifactStatus && material.id === artifactId) {
@@ -22806,6 +22818,9 @@ var cdMaterialListModal = function (artifacts, offset, artifactId, artifactStatu
             appliedFiltersState: (_d = material.appliedFiltersState) !== null && _d !== void 0 ? _d : exports.FilterStates.ALLOWED,
             createdTime: (_e = material.createdTime) !== null && _e !== void 0 ? _e : '',
             dataSource: (_f = material.data_source) !== null && _f !== void 0 ? _f : '',
+            registryType: (_g = material.registryType) !== null && _g !== void 0 ? _g : '',
+            imagePath: (_h = material.image) !== null && _h !== void 0 ? _h : '',
+            registryName: (_j = material.registryName) !== null && _j !== void 0 ? _j : '',
         };
     });
     return materials;
@@ -23635,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]);
@@ -23646,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.40",
+    "version": "0.0.41-beta-1",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Common/Common.service.ts

@@ -162,6 +162,9 @@ const cdMaterialListModal = (artifacts: any[], offset: number, artifactId?: numb
             appliedFiltersState: material.appliedFiltersState ?? FilterStates.ALLOWED,
             createdTime: material.createdTime ?? '',
             dataSource: material.data_source ?? '',
+            registryType: material.registryType ?? '',
+            imagePath: material.image ?? '',
+            registryName: material.registryName ?? '',
         }
     })
     return materials

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

@@ -256,6 +256,9 @@ export interface CDMaterialType {
     imageReleaseTags?: ReleaseTag[]
     artifactStatus?: string
     filterState: FilterStates
+    registryType?: string;
+    imagePath?: string
+    registryName?: string
     // Not even coming from API but required in CDMaterials for Security which makes its own api call but stores data in CDMaterials
     scanToolId?: number
     appliedFiltersTimestamp?: string
@@ -312,6 +315,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