@devtron-labs/devtron-fe-common-lib 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {
@@ -36,7 +36,7 @@
         "typescript": "^4.9.4",
         "react-toastify": "^8.2.0",
         "@tippyjs/react": "^4.2.0",
-        "react-select": "^5.2.2",
+        "react-select": "5.2.2",
         "@sentry/browser": "^7.31.1"
     },
     "peerDependencies": {

package/rollup.config.js

@@ -7,7 +7,7 @@ import del from 'rollup-plugin-delete'
 import pkg from './package.json'
 import svgr from '@svgr/rollup'
 import url from '@rollup/plugin-url'
-import commonjs from '@rollup/plugin-commonjs';
+import commonjs from '@rollup/plugin-commonjs'
 
 export default {
     input: './src/index.ts',
@@ -24,8 +24,8 @@ export default {
             exclude: 'node_modules/**',
         }),
         del({ targets: ['dist/*'] }),
-        url(),
-        svgr({ icon: true }),
+        url({limit: '100000'}),
+        svgr({ icon: true })
     ],
     external: Object.keys(pkg.peerDependencies || {}),
 }

package/src/Assets/Icon/ic-info-filled.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#06C" d="M16 2.667C8.64 2.667 2.667 8.64 2.667 16S8.64 29.333 16 29.333 29.333 23.36 29.333 16 23.36 2.667 16 2.667z"/>
+        <path fill="#FFF" d="M16 14.667c.736 0 1.333.597 1.333 1.333v5.333a1.333 1.333 0 1 1-2.666 0V16c0-.736.597-1.333 1.333-1.333zm0-5.334A1.333 1.333 0 1 1 16 12a1.333 1.333 0 0 1 0-2.667z"/>
+    </g>
+</svg>

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

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h32v32H0z"/>
+        <path fill="#FFCB5D" d="M18.315 5.052L29.72 25.01A2.667 2.667 0 0 1 27.405 29H4.595a2.667 2.667 0 0 1-2.315-3.99L13.685 5.052a2.667 2.667 0 0 1 4.63 0z"/>
+        <path fill="#FFF" d="M16 22.667a1.333 1.333 0 1 1 0 2.666 1.333 1.333 0 0 1 0-2.666zM16 12c.736 0 1.333.597 1.333 1.333v6.334a1.333 1.333 0 1 1-2.666 0v-6.334c0-.736.597-1.333 1.333-1.333z"/>
+    </g>
+</svg>

package/src/Common/Api.ts

@@ -1,5 +1,5 @@
 import { ServerErrors } from './ServerError'
-import { RequestTimeout, Host } from './Constants'
+import { RequestTimeout, Host, URLS } from './Constants'
 import { ResponseType, APIOptions } from './Types'
 
 const responseMessages = {
@@ -73,6 +73,11 @@ const responseMessages = {
     599: 'Network connect timeout error',
 }
 
+function handleLogout() {
+    const continueParam = `${window.location.pathname.replace(process.env.PUBLIC_URL, '')}${window.location.search}`
+    window.location.href = `${window.location.origin}${process.env.PUBLIC_URL}${URLS.LOGIN_SSO}?continue=${continueParam}`
+}
+
 async function handleServerError(contentType, response) {
     //Test for HTTP Status Code
     let code: number = response.status
@@ -126,6 +131,7 @@ async function fetchAPI(
                         ],
                     })
                 } else {
+                    handleLogout()
                     return { code: 401, status: 'Unauthorized', result: [] }
                 }
             } else if (response.status >= 300 && response.status <= 599) {

package/src/Common/BreadCrumb/BreadCrumb.tsx

@@ -2,32 +2,9 @@ import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
 import { useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
+import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
 export const BreadcrumbContext = React.createContext(null)
 
-interface Breadcrumb {
-    to: string
-    name: string
-    className?: string
-}
-
-interface UseBreadcrumbState {
-    breadcrumbs: Breadcrumb[]
-    setCrumb: (props: { [key: string]: any }) => void
-    resetCrumb: (props: string[]) => void
-}
-
-interface AdvancedAlias {
-    component: any
-    linked: boolean
-}
-
-interface UseBreadcrumbProps {
-    sep?: string
-    alias?: { [key: string]: AdvancedAlias | any }
-}
-
-type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null
-
 export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]): UseBreadcrumbState {
     let sep = props?.sep || '/'
     deps = deps || []
@@ -91,12 +68,6 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
     return { breadcrumbs, setCrumb, resetCrumb }
 }
 
-interface Breadcrumbs {
-    breadcrumbs: Breadcrumb[]
-    sep?: string
-    className?: string
-}
-
 export const BreadCrumb: React.FC<Breadcrumbs> = ({
     breadcrumbs,
     sep = '/',

package/src/Common/BreadCrumb/Types.ts

@@ -0,0 +1,30 @@
+
+export interface Breadcrumb {
+  to: string
+  name: string
+  className?: string
+}
+
+export interface UseBreadcrumbState {
+  breadcrumbs: Breadcrumb[]
+  setCrumb: (props: { [key: string]: any }) => void
+  resetCrumb: (props: string[]) => void
+}
+
+export interface AdvancedAlias {
+  component: any
+  linked: boolean
+}
+
+export interface UseBreadcrumbProps {
+  sep?: string
+  alias?: { [key: string]: AdvancedAlias | any }
+}
+
+export interface Breadcrumbs {
+    breadcrumbs: Breadcrumb[]
+    sep?: string
+    className?: string
+}
+
+export type UseBreadcrumbOptionalProps = UseBreadcrumbProps | null

package/src/Common/Checkbox.tsx

@@ -1,19 +1,5 @@
 import React, { Component } from 'react'
-
-export enum CHECKBOX_VALUE {
-    CHECKED = 'CHECKED',
-    INTERMEDIATE = 'INTERMEDIATE',
-}
-export interface CheckboxProps {
-    onChange: (event) => void
-    isChecked: boolean
-    value: 'CHECKED' | 'INTERMEDIATE'
-    disabled?: boolean
-    tabIndex?: number
-    rootClassName?: string
-    onClick?: (event) => void
-    id?: string
-}
+import { CheckboxProps } from './Types'
 
 /*
 Valid States of Checkbox:
@@ -39,8 +25,9 @@ export class Checkbox extends Component<CheckboxProps> {
                         tabIndex={this.props.tabIndex}
                         checked={this.props.isChecked}
                         id={this.props.id}
+                        data-testid={this.props.dataTestId}
                     />
-                    <span className="form__checkbox-container"></span>
+                    <span className="form__checkbox-container" data-testid={`${this.props.dataTestId}-chk-span`}></span>
                     <span className={`form__checkbox-label`}>{this.props.children}</span>
                 </label>
             </>

package/src/Common/Constants.ts

@@ -14,6 +14,10 @@ export const PATTERNS = {
     ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
 }
 
+export const URLS = {
+    LOGIN_SSO: '/login/sso',
+}
+
 export const ROUTES = {
     PROJECT_LIST_MIN: 'team/autocomplete',
 }
@@ -42,4 +46,15 @@ export const ERROR_EMPTY_SCREEN = {
     PAGE_NOT_FOUND: 'We could not find this page',
     PAGE_NOT_EXIST: 'This page doesn’t exist or was removed. We suggest you go back to home',
     TAKE_BACK_HOME: 'Take me home',
+    ONLY_FOR_SUPERADMIN: 'Information on this page is available only to superadmin users.',
+    NOT_AUTHORIZED: 'Not authorized',
+    UNAUTHORIZED: 'unauthorized',
+    FORBIDDEN: 'forbidden',
+    REQUIRED_MANAGER_ACCESS:
+        'Looks like you don’t have access to information on this page. Please contact your manager to request access.',
 }
+export const TOKEN_COOKIE_NAME = 'argocd.token'
+export const TriggerTypeMap = {
+    automatic: 'Auto',
+    manual: 'Manual',
+}

package/src/Common/CustomTagSelector/ResizableTagTextArea.tsx

@@ -14,6 +14,7 @@ export function ResizableTagTextArea({
     tabIndex,
     refVar,
     dependentRef,
+    dataTestId,
 }: ResizableTagTextAreaProps) {
     const [text, setText] = useState('')
 
@@ -28,8 +29,8 @@ export function ResizableTagTextArea({
 
     const reInitHeight = () => {
         if (document.activeElement !== refVar.current) return
-        refVar.current.style.height = 'auto'
-        dependentRef.current.style.height = 'auto'
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         let nextHeight = refVar.current.scrollHeight
         if (nextHeight < dependentRef.current.scrollHeight) {
             nextHeight = dependentRef.current.scrollHeight
@@ -47,8 +48,8 @@ export function ResizableTagTextArea({
     useThrottledEffect(reInitHeight, 500, [text])
 
     const handleOnBlur = (event) => {
-        refVar.current.style.height = 'auto'
-        dependentRef.current.style.height = 'auto'
+        refVar.current.style.height = minHeight+ 'px'
+        dependentRef.current.style.height = minHeight+ 'px'
         onBlur && onBlur(event)
     }
 
@@ -69,6 +70,7 @@ export function ResizableTagTextArea({
             onBlur={handleOnBlur}
             onFocus={handleOnFocus}
             tabIndex={tabIndex}
+            data-testid={dataTestId}
         />
     )
 }

package/src/Common/CustomTagSelector/TagDetails.tsx

@@ -5,6 +5,7 @@ import { TagLabelValueSelector } from './TagLabelValueSelector'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { TagDetailType } from './Types'
+import { ValidationRules } from './ValidationRules'
 
 export const TagDetails = ({
     index,
@@ -16,6 +17,7 @@ export const TagDetails = ({
 }: TagDetailType) => {
     const keyRef = useRef(null)
     const valueRef = useRef(null)
+    const validationRules = new ValidationRules()
 
     const deleteTag = (e): void => {
         stopPropagation(e)
@@ -24,13 +26,24 @@ export const TagDetails = ({
     const propagateTagToResource = (): void => {
         const _tagData = { ...tagData }
         _tagData.propagate = !_tagData.propagate
+        if (_tagData.propagate) {
+            _tagData.isInvalidKey = _tagData.isInvalidKey || !_tagData.key
+            _tagData.isInvalidValue = _tagData.isInvalidValue || !_tagData.value
+        } else {
+            _tagData.isInvalidKey =
+                _tagData.key || _tagData.value ? !validationRules.propagateTagKey(_tagData.key).isValid : false
+            _tagData.isInvalidValue = _tagData.value
+                ? !validationRules.propagateTagValue(_tagData.value, _tagData.key).isValid
+                : false
+        }
         setTagData(index, _tagData)
     }
     return (
         <div className="flexbox mb-8">
             <div
-                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''}`}
+                className={`dc__border h-30 pl-4 pr-4 br-4 mr-8 pointer ${tagData.propagate ? 'bcn-7' : ''} ${tagData.key.startsWith("devtron.ai/") ? 'cursor-not-allowed bcn-1' : ''}`}
                 onClick={propagateTagToResource}
+                data-testid={`propagate-tag-${index}`}
             >
                 <InjectTag className={`icon-dim-20 mt-4 ${tagData.propagate ? 'scn-0' : ''}`} />
             </div>
@@ -55,7 +68,7 @@ export const TagDetails = ({
                 refVar={valueRef}
                 dependentRef={keyRef}
             />
-            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top" onClick={deleteTag}>
+            <div className="dc__border pl-4 pr-4 dc__right-radius-4 pointer flex top" onClick={deleteTag} data-testid={`delete-tag-${index}`}>
                 <DeleteCross className="icon-dim-20 mt-4" />
             </div>
         </div>

package/src/Common/CustomTagSelector/TagLabelSelect.tsx

@@ -13,7 +13,11 @@ export const TagLabelSelect = ({
 }: TagLabelSelectType) => {
     const setTagData = (index, tagValue): void => {
         const _tags = [...labelTags]
-        _tags[index] = tagValue
+        const _tagValue = tagValue
+        if(_tagValue.key.startsWith("devtron.ai/")){
+            _tagValue.propagate = false
+        }
+        _tags[index] = _tagValue
         setLabelTags(_tags)
     }
 
@@ -36,10 +40,10 @@ export const TagLabelSelect = ({
                 <PropagateTagInfo isCreateApp={isCreateApp} />
             </div>
             <div>
-                <div className="dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor" onClick={addNewTag}>
+                <div className="dc_width-max-content cb-5 fw-6 fs-13 flexbox mr-20 mb-8 cursor" onClick={addNewTag} data-testid="add-tag-button">
                     <Add className="icon-dim-20 fcb-5" /> Add tag
                 </div>
-                <div className="mb-8">
+                <div className="mb-8" data-testid="tag-rows-container">
                     {labelTags?.map((tagData, index) => (
                         <TagDetails
                             key={`tag-${index}`}

package/src/Common/CustomTagSelector/TagLabelValueSelector.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import PopupMenu from '../PopupMenu'
-import { ValidationRules } from './ValidationRules'
 import { ReactComponent as ErrorCross } from '../../Assets/Icon/ic-cross.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-outlined.svg'
 import { KEY_VALUE } from '../Constants'
 import { stopPropagation } from '../Helper'
 import { ResizableTagTextArea } from './ResizableTagTextArea'
-import { TagLabelValueSelectorType } from './Types'
+import { SuggestedTagOptionType, TagLabelValueSelectorType } from './Types'
+import Tippy from '@tippyjs/react'
+import { ValidationRules } from './ValidationRules'
 
 export const TagLabelValueSelector = ({
     selectedTagIndex,
@@ -19,6 +20,7 @@ export const TagLabelValueSelector = ({
     tabIndex = null,
     refVar,
     dependentRef,
+    noBackDrop,
 }: TagLabelValueSelectorType) => {
     const [selectedValue, setSelectedValue] = useState<string>('')
     const [activeElement, setActiveElement] = useState<string>('')
@@ -43,11 +45,12 @@ export const TagLabelValueSelector = ({
             const _tagData = { ...tagData }
             _tagData[tagInputType] = selectedValue
             if (tagInputType === KEY_VALUE.KEY) {
-                _tagData.isInvalidKey = selectedValue
-                    ? !validationRules.propagateTagKey(selectedValue).isValid
-                    : _tagData.value !== ''
-            } else if (selectedValue || isRequired) {
-                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue).isValid
+                _tagData.isInvalidKey =
+                    selectedValue || _tagData.propagate
+                        ? !validationRules.propagateTagKey(selectedValue).isValid
+                        : _tagData.value !== ''
+            } else if (selectedValue || isRequired || _tagData.propagate) {
+                _tagData.isInvalidValue = !validationRules.propagateTagValue(selectedValue, _tagData.key).isValid
                 _tagData.isInvalidKey = !_tagData.key || _tagData.isInvalidKey
             } else {
                 _tagData.isInvalidValue = false
@@ -65,7 +68,9 @@ export const TagLabelValueSelector = ({
         stopPropagation(e)
         const _tagData = { ...tagData }
         _tagData[tagInputType] = e.currentTarget.dataset.key
+        _tagData.propagate = e.currentTarget.dataset.propagate === 'true'
         setTagData(selectedTagIndex, _tagData)
+        setActiveElement('')
     }
 
     const renderValidationsSuggestions = (): JSX.Element => {
@@ -74,12 +79,12 @@ export const TagLabelValueSelector = ({
             if (selectedValue || tagData.value) {
                 field = validationRules.propagateTagKey(selectedValue)
             }
-        } else if (isRequired || selectedValue) {
-            field = validationRules.propagateTagValue(selectedValue)
+        } else if (isRequired || selectedValue || tagData.propagate) {
+            field = validationRules.propagateTagValue(selectedValue, tagData.key)
         }
         if (!field.isValid) {
             return (
-                <div className="p-4" onClick={stopPropagation}>
+                <div className="p-4" onClick={stopPropagation} data-testid="tag-label-cross-stop-propagation">
                     {field.messages.map((error) => (
                         <div key={error} className="flexbox pr-4 pl-4">
                             <span>
@@ -102,22 +107,48 @@ export const TagLabelValueSelector = ({
         return null
     }
 
+    const option = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
+        return (
+            <div
+                key={`${tag.value}-${index}`}
+                data-key={tag.label}
+                data-propagate={tag.propagate}
+                className="dc__hover-n50 dc__ellipsis-right lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
+                onClick={onSelectValue}
+                data-testid={`tag-label-value-${index}`}
+            >
+                {tag.label}
+            </div>
+        )
+    }
+
+    const optionWithTippy = (tag: SuggestedTagOptionType, index: number): JSX.Element => {
+        return (
+            <Tippy
+                className="default-tt"
+                arrow={false}
+                placement="right"
+                content={
+                    <div>
+                        <div className="mb-10 fs-12 fw-6 cn-0 dc__break-word">{tag.label}</div>
+                        <div className="fs-12 fw-4 cn-0 dc__break-word">{tag.description}</div>
+                    </div>
+                }
+            >
+                {option(tag, index)}
+            </Tippy>
+        )
+    }
+
     const renderSuggestions = (): JSX.Element => {
         if (tagOptions?.length) {
-            const filteredTags = tagOptions.filter((tag) => tag.value.indexOf(selectedValue) >= 0)
+            const filteredTags = tagOptions.filter((tag) => tag.label.indexOf(selectedValue) >= 0)
             if (filteredTags.length) {
                 return (
                     <div>
-                        {filteredTags.map((tag, index) => (
-                            <div
-                                key={`${tag.value}-${index}`}
-                                data-key={tag.label}
-                                className="dc__hover-n50 lh-20 fs-13 fw-4 pt-6 pr-8 pb-6 pl-8 cursor"
-                                onClick={onSelectValue}
-                            >
-                                {tag.label}
-                            </div>
-                        ))}
+                        {filteredTags.map((tag, index) =>
+                            tag.description ? optionWithTippy(tag, index) : option(tag, index),
+                        )}
                     </div>
                 )
             }
@@ -125,13 +156,14 @@ export const TagLabelValueSelector = ({
         return renderValidationsSuggestions()
     }
 
+    const popupMenuBody = activeElement === `tag-${tagInputType}-${selectedTagIndex}` ? renderSuggestions() : null
     return (
         <PopupMenu autoClose autoPosition>
-            <PopupMenu.Button rootClassName="dc__bg-n50 flex top dc__no-border">
+            <PopupMenu.Button rootClassName="dc__bg-n50 flex top dc__no-border-imp">
                 <ResizableTagTextArea
                     minHeight={30}
                     maxHeight={80}
-                    className={`form__input pt-4-imp pb-4-imp fs-13 ${
+                    className={`form__input tag-input pt-4-imp pb-4-imp fs-13 ${
                         tagInputType === KEY_VALUE.KEY
                             ? `dc__no-right-radius`
                             : `dc__no-border-radius dc__no-right-border dc__no-left-border`
@@ -148,11 +180,19 @@ export const TagLabelValueSelector = ({
                     tabIndex={tabIndex}
                     refVar={refVar}
                     dependentRef={dependentRef}
+                    dataTestId={`tag-${tagInputType === KEY_VALUE.KEY ? 'key' : 'value'}-${selectedTagIndex}`}
                 />
             </PopupMenu.Button>
-            <PopupMenu.Body rootClassName={`tag-${selectedTagIndex}-class`} autoWidth={true} preventWheelDisable={true}>
-                {activeElement === `tag-${tagInputType}-${selectedTagIndex}` && renderSuggestions()}
-            </PopupMenu.Body>
+            {popupMenuBody && (
+                <PopupMenu.Body
+                    rootClassName={`mxh-210 dc__overflow-auto tag-${selectedTagIndex}-class`}
+                    autoWidth={true}
+                    preventWheelDisable={true}
+                    noBackDrop={noBackDrop}
+                >
+                    {popupMenuBody}
+                </PopupMenu.Body>
+            )}
         </PopupMenu>
     )
 }

package/src/Common/CustomTagSelector/Types.ts

@@ -1,6 +1,10 @@
 import { KEY_VALUE } from '../Constants'
 import { OptionType } from '../Types'
 
+export interface SuggestedTagOptionType extends OptionType {
+    description: string
+    propagate: boolean
+}
 export interface TagType {
     id?: number
     key: string
@@ -11,6 +15,7 @@ export interface TagType {
     isInvalidKey?: boolean
     isInvalidValue?: boolean
     isSuggested?: boolean
+    isPropagateDisabled?: boolean
 }
 
 export interface TagErrorType {
@@ -23,7 +28,8 @@ export interface TagLabelSelectType {
     setLabelTags: (tagList: TagType[]) => void
     tabIndex?: number
     selectedProjectId?: number
-    suggestedTagsOptions?: OptionType[]
+    suggestedTagsOptions?: SuggestedTagOptionType[]
+    reloadProjectTags?: boolean
 }
 
 export interface TagDetailType {
@@ -32,20 +38,21 @@ export interface TagDetailType {
     setTagData: (index: number, tagData: TagType) => void
     removeTag?: (index: number) => void
     tabIndex?: number
-    suggestedTagsOptions?: OptionType[]
+    suggestedTagsOptions?: SuggestedTagOptionType[]
 }
 
 export interface TagLabelValueSelectorType {
     selectedTagIndex: number
     tagData: TagType
     setTagData: (index: number, tagData: TagType) => void
-    tagOptions?: OptionType[]
+    tagOptions?: SuggestedTagOptionType[]
     isRequired?: boolean
     tagInputType?: KEY_VALUE
     placeholder?: string
     tabIndex?: number
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    noBackDrop?: boolean
 }
 
 export interface ResizableTagTextAreaProps {
@@ -60,4 +67,5 @@ export interface ResizableTagTextAreaProps {
     tabIndex?: number
     refVar?: React.MutableRefObject<HTMLTextAreaElement>
     dependentRef?: React.MutableRefObject<HTMLTextAreaElement>
+    dataTestId?: string
 }

package/src/Common/CustomTagSelector/ValidationRules.ts

@@ -16,39 +16,42 @@ const validateTagValue = (value: string): string[] => {
     return errorList
 }
 export class ValidationRules {
-
     propagateTagKey = (key: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!key) {
             errorList.push('Key is required')
         } else {
-            const re = new RegExp('/', 'g')
-            const noOfSlashInKey = key.match(re)?.length
-            if (noOfSlashInKey > 1) {
-                errorList.push('Key: Max 1 ( / ) allowed')
-            } else if (noOfSlashInKey === 1) {
-                const [prefix, name] = key.split('/')
-                errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
-                if (prefix.length > 253) {
-                    errorList.push('Prefix: Can be max 253 characters')
-                }
-                const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
-                if (!validPrefix) {
-                    errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+            if(!key.startsWith("devtron.ai/")){
+                const re = new RegExp('/', 'g')
+                const noOfSlashInKey = key.match(re)?.length
+                if (noOfSlashInKey > 1) {
+                    errorList.push('Key: Max 1 ( / ) allowed')
+                } else if (noOfSlashInKey === 1) {
+                    const [prefix, name] = key.split('/')
+                    errorList.push(...validateTagValue(name).map((error) => `Name: ${error}`))
+                    if (prefix.length > 253) {
+                        errorList.push('Prefix: Can be max 253 characters')
+                    }
+                    const validPrefix = PATTERNS.KUBERNETES_KEY_PREFIX.test(prefix)
+                    if (!validPrefix) {
+                        errorList.push('Prefix: Must be a DNS subdomain (a series of DNS labels separated by dots (.)')
+                    }
+                } else {
+                    errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
                 }
-            } else {
-                errorList.push(...validateTagValue(key).map((error) => `Name: ${error}`))
             }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }
 
-    propagateTagValue = (value: string): { isValid: boolean; messages: string[] } => {
+    propagateTagValue = (value: string, key: string): { isValid: boolean; messages: string[] } => {
         const errorList = []
         if (!value) {
             errorList.push('Value is required')
         } else {
-            errorList.push(...validateTagValue(value))
+            if(!key.startsWith("devtron.ai/")){
+                errorList.push(...validateTagValue(value))
+            }
         }
         return { isValid: errorList.length === 0, messages: errorList }
     }