@devtron-labs/devtron-fe-common-lib 0.0.13 → 0.0.16-beta-2

package/dist/Common/Helper.d.ts

@@ -1,4 +1,21 @@
 import React from 'react';
+export interface InputDetailType {
+    label: string;
+    defaultValue: string;
+    placeholder: string;
+}
+export interface RegistryTypeDetailType {
+    value: string;
+    label: string;
+    desiredFormat: string;
+    placeholderText: string;
+    gettingStartedLink: string;
+    defaultRegistryURL: string;
+    registryURL: InputDetailType;
+    id: InputDetailType;
+    password: InputDetailType;
+}
+export declare const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType>;
 export declare function showError(serverError: any, showToastOnUnknownError?: boolean, hideAccessError?: boolean): void;
 interface ConditionalWrapper<T> {
     condition: boolean;

package/dist/Common/Types.d.ts

@@ -267,6 +267,7 @@ export interface CommonNodeAttr {
     showPluginWarning?: boolean;
     helmPackageName?: string;
     isVirtualEnvironment?: boolean;
+    deploymentAppType?: DeploymentAppTypes;
     isCITriggerBlocked?: boolean;
     ciBlockState?: {
         action: any;
@@ -275,6 +276,12 @@ export interface CommonNodeAttr {
     appReleaseTagNames?: string[];
     tagsEditable?: boolean;
 }
+export declare enum DeploymentAppTypes {
+    HELM = "helm",
+    GITOPS = "argo_cd",
+    MANIFEST_DOWNLOAD = "manifest_download",
+    MANIFEST_PUSH = "manifest_push"
+}
 export interface VulnerabilityType {
     name: string;
     severity: 'CRITICAL' | 'MODERATE' | 'LOW';
@@ -306,5 +313,6 @@ export interface CDMaterialResponseType {
     requestedUserId: number;
     tagsEditable: boolean;
     appReleaseTagNames: string[];
+    hideImageTaggingHardDelete: boolean;
 }
 export {};

package/dist/index.js

@@ -255,7 +255,14 @@ exports.DeploymentNodeType = void 0;
     DeploymentNodeType["CD"] = "CD";
     DeploymentNodeType["POSTCD"] = "POSTCD";
     DeploymentNodeType["APPROVAL"] = "APPROVAL";
-})(exports.DeploymentNodeType || (exports.DeploymentNodeType = {}));
+})(exports.DeploymentNodeType || (exports.DeploymentNodeType = {}));
+exports.DeploymentAppTypes = void 0;
+(function (DeploymentAppTypes) {
+    DeploymentAppTypes["HELM"] = "helm";
+    DeploymentAppTypes["GITOPS"] = "argo_cd";
+    DeploymentAppTypes["MANIFEST_DOWNLOAD"] = "manifest_download";
+    DeploymentAppTypes["MANIFEST_PUSH"] = "manifest_push";
+})(exports.DeploymentAppTypes || (exports.DeploymentAppTypes = {}));
 
 var responseMessages = {
     100: 'Continue',
@@ -9659,6 +9666,169 @@ toast.configure({
     toastClassName: 'devtron-toast',
     bodyClassName: 'devtron-toast__body',
 });
+var REGISTRY_TYPE_MAP = {
+    ecr: {
+        value: 'ecr',
+        label: 'ECR',
+        desiredFormat: '(desired format: repo-name)',
+        placeholderText: 'Eg. repo_name',
+        gettingStartedLink: 'https://docs.aws.amazon.com/AmazonECR/latest/userguide/get-set-up-for-amazon-ecr.html',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: '',
+            placeholder: 'Eg. xxxxxxxxxxxx.dkr.ecr.region.amazonaws.com',
+        },
+        id: {
+            label: 'Access key ID',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Secret access key',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    'docker-hub': {
+        value: 'docker-hub',
+        label: 'Docker',
+        desiredFormat: '(desired format: username/repo-name)',
+        placeholderText: 'Eg. username/repo_name',
+        gettingStartedLink: 'https://docs.docker.com/docker-hub/',
+        defaultRegistryURL: 'docker.io',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: 'docker.io',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Password/Token (Recommended: Token)',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    acr: {
+        value: 'acr',
+        label: 'Azure',
+        desiredFormat: '(desired format: repo-name)',
+        placeholderText: 'Eg. repo_name',
+        gettingStartedLink: 'https://docs.microsoft.com/en-us/azure/container-registry/container-registry-get-started-portal',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL/Login Server',
+            defaultValue: '',
+            placeholder: 'Eg. xxx.azurecr.io',
+        },
+        id: {
+            label: 'Username/Registry Name',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Password',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    'artifact-registry': {
+        value: 'artifact-registry',
+        label: 'Artifact Registry (GCP)',
+        desiredFormat: '(desired format: project-id/artifacts-repo/repo-name)',
+        placeholderText: 'Eg. project-id/artifacts-repo/repo-name',
+        gettingStartedLink: 'https://cloud.google.com/artifact-registry/docs/manage-repos?hl=en_US',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: '',
+            placeholder: 'Eg. region-docker.pkg.dev',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '_json_key',
+            placeholder: '',
+        },
+        password: {
+            label: 'Service Account JSON File',
+            defaultValue: '',
+            placeholder: 'Paste json file content here',
+        },
+    },
+    gcr: {
+        value: 'gcr',
+        label: 'GCR',
+        desiredFormat: '(desired format: project-id/repo-name)',
+        placeholderText: 'Eg. project-id/repo_name',
+        gettingStartedLink: 'https://cloud.google.com/container-registry/docs/quickstart',
+        defaultRegistryURL: 'gcr.io',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: 'gcr.io',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '_json_key',
+            placeholder: '',
+        },
+        password: {
+            label: 'Service Account JSON File',
+            defaultValue: '',
+            placeholder: 'Paste json file content here',
+        },
+    },
+    quay: {
+        value: 'quay',
+        label: 'Quay',
+        desiredFormat: '(desired format: username/repo-name)',
+        placeholderText: 'Eg. username/repo_name',
+        gettingStartedLink: '',
+        defaultRegistryURL: 'quay.io',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: 'quay.io',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Token',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    other: {
+        value: 'other',
+        label: 'Other',
+        desiredFormat: '',
+        placeholderText: '',
+        gettingStartedLink: '',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: '',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Password/Token',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+};
 function showError(serverError, showToastOnUnknownError, hideAccessError) {
     if (showToastOnUnknownError === void 0) { showToastOnUnknownError = true; }
     if (hideAccessError === void 0) { hideAccessError = false; }
@@ -22780,7 +22950,7 @@ var ImageTagsContainer = function (_a) {
             lowercaseValue.length >= 128 ||
             lowercaseValue[0] == '.' ||
             lowercaseValue[0] == '-') {
-            setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -');
+            setTagErrorMessage('Tag name cannot be empty or exceed 128 characters or cannot start with . or -');
             return false;
         }
         setTagErrorMessage('');
@@ -22807,11 +22977,14 @@ var ImageTagsContainer = function (_a) {
                 artifactId: 0,
                 duplicateTag: false,
             };
-            setCreateTags(__spreadArray(__spreadArray([], __read(createTags), false), [newTag], false));
+            var newCreateTags = __spreadArray(__spreadArray([], __read(createTags), false), [newTag], false);
+            setCreateTags(newCreateTags);
             setDisplayedTags(__spreadArray(__spreadArray([], __read(displayedTags), false), [newTag], false));
             setShowTagsWarning(true);
             setTextInput('');
+            return newCreateTags;
         }
+        return createTags;
     };
     var handleTagSoftDelete = function (index) {
         var updatedTags = __spreadArray([], __read(displayedTags), false);
@@ -22865,13 +23038,13 @@ var ImageTagsContainer = function (_a) {
             setDisplayedTags(displayList);
         });
     };
-    var handleSave = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var handleSave = function (tagsToBeCreated) { return __awaiter(void 0, void 0, void 0, function () {
         var payload;
         return __generator(this, function (_a) {
             if (tagErrorMessage)
                 return [2 /*return*/];
             payload = {
-                createTags: createTags,
+                createTags: tagsToBeCreated,
                 softDeleteTags: softDeleteTags,
                 imageComment: {
                     id: 0,
@@ -22925,7 +23098,7 @@ var ImageTagsContainer = function (_a) {
         });
     }); };
     var renderInfoCard = function () {
-        return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 fcv-5", placement: "right", Icon: SvgIcHelp, heading: "Release tags", showCloseButton: true, trigger: "click", interactive: true, additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "icon-dim-16 fcn-5 ml-8 cursor" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, {}) })) })));
+        return (jsxRuntime.jsx(TippyCustomized, __assign({ theme: exports.TippyTheme.white, className: "w-300 fcv-5", placement: "right", Icon: SvgIcHelp, heading: "Release tags", showCloseButton: true, trigger: "click", interactive: true, additionalContent: getBuildContextAdditionalContent() }, { children: jsxRuntime.jsx("div", __assign({ className: "flex" }, { children: jsxRuntime.jsx(SvgIcHelpOutline, { className: "fcn-5 ml-8 cursor icon-dim-16" }) })) })));
     };
     var getBuildContextAdditionalContent = function () {
         return (jsxRuntime.jsxs("div", __assign({ className: "h-250 fs-13 dc__overflow-scroll p-12" }, { children: [jsxRuntime.jsx("div", { children: "Release tags allow you to tag container images with readable and relatable tags eg. v1.0." }), jsxRuntime.jsxs("ul", __assign({ className: "pl-20 mt-8" }, { children: [jsxRuntime.jsx("li", { children: "A release tag can only be added if a workflow has CD pipelines deploying to Production environments." }), jsxRuntime.jsx("li", { children: "Multiple tags can be added to an image." }), jsxRuntime.jsx("li", { children: "Multiple images in an application cannot have the same tag." }), jsxRuntime.jsx("li", { children: "Tags cannot be deleted once saved. Although, you can soft delete a tag if an unwanted tag has been added." })] }))] })));
@@ -22950,12 +23123,13 @@ var ImageTagsContainer = function (_a) {
         }
     };
     var onClickSave = function () {
+        var tagsToBeCreated = createTags;
         if (textInput.trim()) {
-            handleTagCreate(textInput);
+            tagsToBeCreated = handleTagCreate(textInput);
         }
-        handleSave();
+        handleSave(tagsToBeCreated);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("span", { children: "Release tags (eg. v1.0)" }), jsxRuntime.jsx("div", __assign({ className: "flex row ml-0" }, { children: renderInfoCard() }))] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
+    return (jsxRuntime.jsx("div", __assign({ className: "mt-8" }, { children: isEditing && tagsEditable ? (jsxRuntime.jsxs("div", __assign({ className: "bcn-0 dc__border-top-n1 " }, { children: [jsxRuntime.jsxs("div", __assign({ className: "cn-7 mt-12 flex left" }, { children: [jsxRuntime.jsx("div", { children: "Release tags (eg. v1.0)" }), renderInfoCard()] })), jsxRuntime.jsxs("div", __assign({ className: "mt-6 dc__position-rel-imp", "data-testid": "add-tag-text-area" }, { children: [jsxRuntime.jsx("input", { className: "form__input", value: textInput, onChange: setInputValue, placeholder: "Type a tag and press enter", onKeyDown: handleKeydown, onBlur: setInputValue, ref: creatableRef }), textInput.length > 0 && (jsxRuntime.jsxs("div", __assign({ onClick: enterTagCreate, className: "dc__position-abs bcn-0 flex cursor pt-2 pb-2 pr-4 pl-4 br-2 cn-7 dc__border dc__border-bottom-2", style: {
                                 top: '50%',
                                 fontFamily: 'monospace',
                                 right: '8px',
@@ -22972,13 +23146,13 @@ var ImageTagsContainer = function (_a) {
                             } }, { children: "Cancel" })), jsxRuntime.jsx("button", __assign({ className: "cta flex h-32 lh-32-imp ml-12", "data-testid": "save-tags-button", type: "button", onClick: function (e) {
                                 stopPropagation(e);
                                 onClickSave();
-                            } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
+                            } }, { children: "Save" }))] }))] }))) : (jsxRuntime.jsxs("div", __assign({ className: "top br-4 bcn-0 image-tags-container flexbox" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex left image-tag-left-border w-100 mt-8 mb-8 pr-10 pl-10", "data-testid": "image-tags-container-hover" }, { children: jsxRuntime.jsxs("div", __assign({ className: 'w-100' }, { children: [initialDescription && jsxRuntime.jsx("div", __assign({ className: "mb-6 fs-13 lh-20 dc__word-break-all" }, { children: initialDescription })), jsxRuntime.jsx("div", __assign({ className: "flex-wrap flex left" }, { children: initialTags === null || initialTags === void 0 ? void 0 : initialTags.map(function (tag, index) { return (jsxRuntime.jsx(ImageTagButton, { text: tag === null || tag === void 0 ? void 0 : tag.tagName, isSoftDeleted: tag === null || tag === void 0 ? void 0 : tag.deleted, isEditing: isEditing, onSoftDeleteClick: function (e) {
                                         stopPropagation(e);
                                         handleTagSoftDelete(index);
                                     }, onHardDeleteClick: function (e) {
                                         stopPropagation(e);
                                         handleTagHardDelete(index);
-                                    }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag === null || tag === void 0 ? void 0 : tag.id)); }) }))] })) })), jsxRuntime.jsx("div", __assign({ className: "mt-8 mr-6 icon-dim-16" }, { children: tagsEditable && (jsxRuntime.jsx(SvgIcPencil, { className: "icon-dim-16 image-tags-container-edit__icon cursor", "data-testid": "edit-tags-icon", onClick: function (e) {
+                                    }, tagId: tag.id, softDeleteTags: softDeleteTags, isSuperAdmin: isSuperAdmin, duplicateTag: tag === null || tag === void 0 ? void 0 : tag.duplicateTag, hideHardDelete: hideHardDelete }, tag === null || tag === void 0 ? void 0 : tag.id)); }) }))] })) })), jsxRuntime.jsx("div", __assign({ className: "mt-8 mr-10 icon-dim-16" }, { children: tagsEditable && (jsxRuntime.jsx(SvgIcPencil, { className: "icon-dim-16 image-tags-container-edit__icon cursor", "data-testid": "edit-tags-icon", onClick: function (e) {
                             stopPropagation(e);
                             handleEditClick();
                         } })) }))] }))) })));
@@ -22999,7 +23173,7 @@ var ImageTagButton = function (_a) {
             return 'cn-9';
         }
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class dc__word-break-all flex ".concat(isEditing ? 'icon-hover' : '', " ").concat(tabColor()) }, { children: [duplicateTag ? (jsxRuntime.jsx(SvgIcErrorExclamation, { className: "icon-dim-12 mr-4" })) : (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon mr-4 lh-16 pt-3 ".concat(isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : '') }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 cursor".concat(isSoftDeleted ? 'scn-6' : 'fcn-6', " "), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) })) }))), text, jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon ml-4 lh-16 pt-3 ".concat(canTagBeHardDelete ? 'show-icon' : '') }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 fcn-6 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })) }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "br-4 en-2 bw-1 mr-8 bcn-0 mb-4 pt-2 pr-8 pb-2 pl-8 tag-class dc__word-break-all flex ".concat(isEditing ? 'icon-hover' : '', " ").concat(tabColor()) }, { children: [duplicateTag ? (jsxRuntime.jsx(SvgIcErrorExclamation, { className: "icon-dim-12 mr-4" })) : (jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: isInSoftDeleteTags ? 'Restore tag' : 'Soft delete tag' }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon mr-4 lh-16 pt-3 ".concat(isInSoftDeleteTags || (tagId !== 0 && !isSoftDeleted) ? 'show-icon' : '') }, { children: jsxRuntime.jsx(IconComponent, { className: "icon-dim-12 cursor ".concat(isSoftDeleted ? 'scn-6' : 'fcn-6', " "), "data-testid": "".concat(text, "-tag-soft-delete"), onClick: onSoftDeleteClick }) })) }))), text, jsxRuntime.jsx(Tippy, __assign({ className: "default-tt", arrow: true, placement: "top", content: "Remove tag" }, { children: jsxRuntime.jsx("div", __assign({ className: "action-icon ml-4 lh-16 pt-3 ".concat(canTagBeHardDelete ? 'show-icon' : '') }, { children: jsxRuntime.jsx(SvgIcCross, { className: "icon-dim-12 fcn-6 cursor", "data-testid": "".concat(text, "-tag-hard-delete"), onClick: onHardDeleteClick }) })) }))] })));
 };
 var AddImageButton = function (_a) {
     var handleEditClick = _a.handleEditClick;
@@ -23049,6 +23223,7 @@ exports.PATTERNS = PATTERNS;
 exports.PopupMenu = PopupMenu;
 exports.Progressing = Progressing;
 exports.PropagateTagInfo = PropagateTagInfo;
+exports.REGISTRY_TYPE_MAP = REGISTRY_TYPE_MAP;
 exports.ROUTES = ROUTES;
 exports.RadioGroup = RadioGroup$1;
 exports.RadioGroupItem = RadioGroupItem;

package/package.json

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

package/src/Common/Helper.tsx

@@ -18,6 +18,189 @@ toast.configure({
     bodyClassName: 'devtron-toast__body',
 })
 
+export interface InputDetailType {
+    label: string
+    defaultValue: string
+    placeholder: string
+}
+
+export interface RegistryTypeDetailType {
+    value: string
+    label: string
+    desiredFormat: string
+    placeholderText: string
+    gettingStartedLink: string
+    defaultRegistryURL: string
+    registryURL: InputDetailType
+    id: InputDetailType
+    password: InputDetailType
+}
+
+export const REGISTRY_TYPE_MAP: Record<string, RegistryTypeDetailType> = {
+    ecr: {
+        value: 'ecr',
+        label: 'ECR',
+        desiredFormat: '(desired format: repo-name)',
+        placeholderText: 'Eg. repo_name',
+        gettingStartedLink: 'https://docs.aws.amazon.com/AmazonECR/latest/userguide/get-set-up-for-amazon-ecr.html',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: '',
+            placeholder: 'Eg. xxxxxxxxxxxx.dkr.ecr.region.amazonaws.com',
+        },
+        id: {
+            label: 'Access key ID',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Secret access key',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    'docker-hub': {
+        value: 'docker-hub',
+        label: 'Docker',
+        desiredFormat: '(desired format: username/repo-name)',
+        placeholderText: 'Eg. username/repo_name',
+        gettingStartedLink: 'https://docs.docker.com/docker-hub/',
+        defaultRegistryURL: 'docker.io',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: 'docker.io',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Password/Token (Recommended: Token)',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    acr: {
+        value: 'acr',
+        label: 'Azure',
+        desiredFormat: '(desired format: repo-name)',
+        placeholderText: 'Eg. repo_name',
+        gettingStartedLink:
+            'https://docs.microsoft.com/en-us/azure/container-registry/container-registry-get-started-portal',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL/Login Server',
+            defaultValue: '',
+            placeholder: 'Eg. xxx.azurecr.io',
+        },
+        id: {
+            label: 'Username/Registry Name',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Password',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    'artifact-registry': {
+        value: 'artifact-registry',
+        label: 'Artifact Registry (GCP)',
+        desiredFormat: '(desired format: project-id/artifacts-repo/repo-name)',
+        placeholderText: 'Eg. project-id/artifacts-repo/repo-name',
+        gettingStartedLink: 'https://cloud.google.com/artifact-registry/docs/manage-repos?hl=en_US',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: '',
+            placeholder: 'Eg. region-docker.pkg.dev',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '_json_key',
+            placeholder: '',
+        },
+        password: {
+            label: 'Service Account JSON File',
+            defaultValue: '',
+            placeholder: 'Paste json file content here',
+        },
+    },
+    gcr: {
+        value: 'gcr',
+        label: 'GCR',
+        desiredFormat: '(desired format: project-id/repo-name)',
+        placeholderText: 'Eg. project-id/repo_name',
+        gettingStartedLink: 'https://cloud.google.com/container-registry/docs/quickstart',
+        defaultRegistryURL: 'gcr.io',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: 'gcr.io',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '_json_key',
+            placeholder: '',
+        },
+        password: {
+            label: 'Service Account JSON File',
+            defaultValue: '',
+            placeholder: 'Paste json file content here',
+        },
+    },
+    quay: {
+        value: 'quay',
+        label: 'Quay',
+        desiredFormat: '(desired format: username/repo-name)',
+        placeholderText: 'Eg. username/repo_name',
+        gettingStartedLink: '',
+        defaultRegistryURL: 'quay.io',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: 'quay.io',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Token',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+    other: {
+        value: 'other',
+        label: 'Other',
+        desiredFormat: '',
+        placeholderText: '',
+        gettingStartedLink: '',
+        defaultRegistryURL: '',
+        registryURL: {
+            label: 'Registry URL',
+            defaultValue: '',
+            placeholder: '',
+        },
+        id: {
+            label: 'Username',
+            defaultValue: '',
+            placeholder: '',
+        },
+        password: {
+            label: 'Password/Token',
+            defaultValue: '',
+            placeholder: '',
+        },
+    },
+}
+
 export function showError(serverError, showToastOnUnknownError = true, hideAccessError = false) {
     if (serverError instanceof ServerErrors && Array.isArray(serverError.errors)) {
         serverError.errors.map(({ userMessage, internalMessage }) => {

package/src/Common/ImageTags.tsx

@@ -114,7 +114,7 @@ export const ImageTagsContainer = ({
             lowercaseValue[0] == '.' ||
             lowercaseValue[0] == '-'
         ) {
-            setTagErrorMessage('tag name cannot be empty or exceed 128 characters or cannot start with . or -')
+            setTagErrorMessage('Tag name cannot be empty or exceed 128 characters or cannot start with . or -')
             return false
         }
         setTagErrorMessage('')
@@ -130,7 +130,7 @@ export const ImageTagsContainer = ({
         return true
     }
 
-    const handleTagCreate = (newValue) => {
+    const handleTagCreate = (newValue) : ReleaseTag[] => {
         const lowercaseValue = newValue.toLowerCase().trim()
         if(validateTag(lowercaseValue)) {
             const newTag: ReleaseTag = {
@@ -141,11 +141,14 @@ export const ImageTagsContainer = ({
                 artifactId: 0,
                 duplicateTag: false,
             }
-            setCreateTags([...createTags, newTag])
+            const newCreateTags = [...createTags, newTag]
+            setCreateTags(newCreateTags)
             setDisplayedTags([...displayedTags, newTag])
             setShowTagsWarning(true)
             setTextInput('')
+            return newCreateTags
         }
+        return createTags
     }
 
     const handleTagSoftDelete = (index) => {
@@ -208,11 +211,11 @@ export const ImageTagsContainer = ({
         })
     }
 
-    const handleSave = async () => {
+    const handleSave = async (tagsToBeCreated: ReleaseTag[]) => {
         if (tagErrorMessage) return
 
         const payload = {
-            createTags: createTags,
+            createTags: tagsToBeCreated,
             softDeleteTags: softDeleteTags,
             imageComment: {
                 id: 0,
@@ -274,8 +277,8 @@ export const ImageTagsContainer = ({
                 interactive={true}
                 additionalContent={getBuildContextAdditionalContent()}
             >
-                <div className="icon-dim-16 fcn-5 ml-8 cursor">
-                    <Question />
+                <div className="flex">
+                    <Question  className="fcn-5 ml-8 cursor icon-dim-16"/>
                 </div>
             </TippyCustomized>
         )
@@ -332,10 +335,11 @@ export const ImageTagsContainer = ({
     }
 
     const onClickSave = () => {
+        let tagsToBeCreated = createTags
         if (textInput.trim()) {
-            handleTagCreate(textInput)
+            tagsToBeCreated = handleTagCreate(textInput)
         }
-        handleSave()
+        handleSave(tagsToBeCreated)
     }
 
     return (
@@ -343,8 +347,8 @@ export const ImageTagsContainer = ({
             {isEditing && tagsEditable ? (
                 <div className="bcn-0 dc__border-top-n1 ">
                     <div className="cn-7 mt-12 flex left">
-                        <span>Release tags (eg. v1.0)</span>
-                        <div className="flex row ml-0">{renderInfoCard()}</div>
+                        <div>Release tags (eg. v1.0)</div>
+                        {renderInfoCard()}
                     </div>
                     <div className="mt-6 dc__position-rel-imp" data-testid="add-tag-text-area">
                         <input
@@ -353,6 +357,7 @@ export const ImageTagsContainer = ({
                             onChange={setInputValue}
                             placeholder="Type a tag and press enter"
                             onKeyDown={handleKeydown}
+                            onBlur={setInputValue}
                             ref={creatableRef}
                         />
                         {textInput.length > 0 && (
@@ -456,7 +461,7 @@ export const ImageTagsContainer = ({
                         data-testid="image-tags-container-hover"
                     >
                         <div className='w-100'>
-                            {initialDescription && <div className="mb-6 fs-13 dc__word-break-all">{initialDescription}</div>}
+                            {initialDescription && <div className="mb-6 fs-13 lh-20 dc__word-break-all">{initialDescription}</div>}
                             <div className="flex-wrap flex left">
                                 {initialTags?.map((tag, index) => (
                                     <ImageTagButton
@@ -482,7 +487,7 @@ export const ImageTagsContainer = ({
                             </div>
                         </div>
                     </div>
-                    <div className="mt-8 mr-6 icon-dim-16">
+                    <div className="mt-8 mr-10 icon-dim-16">
                         {tagsEditable && (
                             <EditIcon
                                 className="icon-dim-16 image-tags-container-edit__icon cursor"
@@ -547,7 +552,7 @@ export const ImageTagButton = ({
                         }`}
                     >
                         <IconComponent
-                            className={`icon-dim-12 cursor${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
+                            className={`icon-dim-12 cursor ${isSoftDeleted ? 'scn-6' : 'fcn-6'} `}
                             data-testid={`${text}-tag-soft-delete`}
                             onClick={onSoftDeleteClick}
                         />

package/src/Common/Types.ts

@@ -292,6 +292,7 @@ export interface CommonNodeAttr {
     showPluginWarning?: boolean
     helmPackageName?: string
     isVirtualEnvironment?: boolean
+    deploymentAppType?: DeploymentAppTypes
     isCITriggerBlocked?: boolean
     ciBlockState?: {
         action: any,
@@ -301,6 +302,13 @@ export interface CommonNodeAttr {
     tagsEditable?: boolean
 }
 
+export enum DeploymentAppTypes {
+    HELM = 'helm',
+    GITOPS = 'argo_cd',
+    MANIFEST_DOWNLOAD = 'manifest_download',
+    MANIFEST_PUSH='manifest_push'
+}
+
 export interface VulnerabilityType {
     name: string
     severity: 'CRITICAL' | 'MODERATE' | 'LOW'
@@ -335,6 +343,7 @@ export interface CDMaterialResponseType {
     requestedUserId: number
     tagsEditable: boolean
     appReleaseTagNames: string[]
+    hideImageTaggingHardDelete: boolean
 }