Merge pull request #499 from devtron-labs/feat/build-infra-v3

feat: build infra v3

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.5.5",
+    "version": "1.5.6",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -86,7 +86,6 @@
         "patch-package": "^8.0.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
-        "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
         "react-router-dom": "^5.3.0",
@@ -108,7 +107,8 @@
         "react-monaco-editor": "^0.54.0",
         "react-virtualized-sticky-tree": "^3.0.0-beta18",
         "sass": "^1.69.7",
-        "tslib": "2.7.0"
+        "tslib": "2.7.0",
+        "react-draggable": "^4.4.5"
     },
     "overrides": {
         "cross-spawn": "^7.0.5",

package.json

@@ -43,6 +43,12 @@ export const PATTERNS = {
     ALPHANUMERIC_WITH_SPECIAL_CHAR: /^[A-Za-z0-9._-]+$/, // allow alphanumeric,(.) ,(-),(_)
     ESCAPED_CHARACTERS: /[.*+?^${}()|[\]\\]/g,
     NUMBERS_WITH_SCOPE_VARIABLES: /^(\d+(\.\d+)?|@{{[a-zA-Z0-9-]+}})$/,
+    ALL_DIGITS_BETWEEN_0_AND_7: /^[0-7]*$/,
+    // eslint-disable-next-line no-useless-escape
+    CONFIG_MAP_AND_SECRET_MULTIPLE_KEYS: /^[-._a-zA-Z0-9\,\?\s]*[-._a-zA-Z0-9\s]$/,
+    CONFIG_MAP_AND_SECRET_KEY: /^[-._a-zA-Z0-9]+$/,
+    CONFIGMAP_AND_SECRET_NAME: /^[a-z0-9][a-z0-9-.]*[a-z0-9]$/,
+    ALPHANUMERIC_WITH_SPECIAL_CHAR_AND_SLASH: /^[A-Za-z0-9._/-]+$/, // allow alphanumeric,(.) ,(-),(_),(/)
 }
 
 export const URLS = {
@@ -130,6 +136,7 @@ export const ROUTES = {
     FILE_UPLOAD: 'file/upload',
     PLUGIN_GLOBAL_VARIABLES: 'plugin/global/list/global-variable',
     CONFIG_COMPARE_SECRET: 'config/compare/secret',
+    SCOPED_GLOBAL_VARIABLES: 'global/variables',
     CD_TRIGGER_POST: 'app/cd-pipeline/trigger',
     DELETE_RESOURCE: 'k8s/resource/delete',
     NODE_CAPACITY: 'k8s/capacity/node',

src/Assets/Icon/ic-view-variable-toggle.svg

@@ -111,9 +111,6 @@ const BuildInfraConfigForm: FunctionComponent<BuildInfraConfigFormProps> = ({
                             }
                             showDivider={index !== BUILD_INFRA_FORM_FIELDS.length - 1}
                             isInheriting={isInheritingProfileValues(field.actions)}
-                            handleProfileInputChange={handleProfileInputChange}
-                            locator={field.locator}
-                            isGlobalProfile={isGlobalProfile}
                         >
                             <div className="w-50 flexbox dc__gap-12 w-100 dc__align-start">
                                 {field.actions.map((action) => (

src/Common/Constants.ts

@@ -21,14 +21,21 @@ import { BUILD_INFRA_TEXT } from './constants'
 
 const BuildInfraProfileDescriptionField: FunctionComponent<BuildInfraProfileMetaFieldProps> = ({
     handleProfileInputChange,
+    onChange,
     currentValue,
     error,
 }) => {
     const handleChange = (e: FormEvent<HTMLTextAreaElement>) => {
-        handleProfileInputChange({
-            action: BuildInfraMetaConfigTypes.DESCRIPTION,
-            data: { value: e.currentTarget.value },
-        })
+        if (handleProfileInputChange) {
+            handleProfileInputChange({
+                action: BuildInfraMetaConfigTypes.DESCRIPTION,
+                data: { value: e.currentTarget.value },
+            })
+
+            return
+        }
+
+        onChange(e)
     }
 
     return (

src/Pages/GlobalConfigurations/BuildInfra/BuildInfraConfigForm.tsx

@@ -14,60 +14,31 @@
  * limitations under the License.
  */
 
-import { FormEvent, FunctionComponent } from 'react'
-import { BUILD_INFRA_DEFAULT_PLATFORM_NAME, getBuildInfraInheritActionFromLocator } from '@Pages/index'
+import { FunctionComponent } from 'react'
 import { BuildInfraFormItemProps } from './types'
-import { CHECKBOX_VALUE, Checkbox } from '../../../Common'
 
 const BuildInfraFormItem: FunctionComponent<BuildInfraFormItemProps> = ({
     heading,
     marker: Marker,
     children,
     isInheriting,
     showDivider,
-    handleProfileInputChange,
-    locator,
-    isGlobalProfile,
-    targetPlatform = BUILD_INFRA_DEFAULT_PLATFORM_NAME,
-}) => {
-    const handleActivationChange = (e: FormEvent<HTMLInputElement>) => {
-        const { checked } = e.currentTarget
-        const action = getBuildInfraInheritActionFromLocator(locator, checked)
-        handleProfileInputChange({ action, data: { targetPlatform } })
-    }
-
-    const renderMarker = () => {
-        if (isGlobalProfile) {
-            return <Marker className="icon-dim-20 dc__no-shrink" />
-        }
-
-        return (
-            <Checkbox
-                onChange={handleActivationChange}
-                isChecked={!isInheriting}
-                value={CHECKBOX_VALUE.CHECKED}
-                dataTestId={`${locator}_marker`}
-            />
-        )
-    }
-
+}) => (
     // If in configuration active is false, means it is inheriting values from other profile
-    return (
-        <>
-            <div className="flexbox-col dc__gap-8 w-100">
-                <div className="flexbox dc__gap-12 dc__align-start w-100">
-                    {renderMarker()}
-
-                    <div className="flexbox-col dc__gap-8 w-100">
-                        {heading}
-                        {!isInheriting && children}
-                    </div>
+    <>
+        <div className="flexbox-col dc__gap-8 w-100">
+            <div className="flexbox dc__gap-12 dc__align-start w-100">
+                <Marker className="icon-dim-20 dc__no-shrink" />
+
+                <div className="flexbox-col dc__gap-8 w-100">
+                    {heading}
+                    {!isInheriting && children}
                 </div>
             </div>
+        </div>
 
-            {showDivider && <div className="w-100 dc__border-bottom-n1" />}
-        </>
-    )
-}
+        {showDivider && <div className="w-100 dc__border-bottom-n1" />}
+    </>
+)
 
 export default BuildInfraFormItem

src/Pages/GlobalConfigurations/BuildInfra/BuildInfraDescriptionField.tsx

@@ -20,15 +20,21 @@ import { CustomInput } from '../../../Common'
 import { BUILD_INFRA_TEXT } from './constants'
 
 const BuildInfraProfileNameField: FunctionComponent<BuildInfraProfileMetaFieldProps> = ({
+    onChange,
     handleProfileInputChange,
     currentValue,
     error,
 }) => {
     const handleChange = (e: FormEvent<HTMLInputElement>) => {
-        handleProfileInputChange({
-            action: BuildInfraMetaConfigTypes.NAME,
-            data: { value: e.currentTarget.value },
-        })
+        if (handleProfileInputChange) {
+            handleProfileInputChange({
+                action: BuildInfraMetaConfigTypes.NAME,
+                data: { value: e.currentTarget.value },
+            })
+            return
+        }
+
+        onChange(e)
     }
 
     return (
@@ -43,6 +49,7 @@ const BuildInfraProfileNameField: FunctionComponent<BuildInfraProfileMetaFieldPr
                 error={error}
                 required
                 inputWrapClassName="w-100"
+                autoFocus
             />
         </div>
     )

src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormItem.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react'
+import { BuildInfraUtilityContextType } from '@Pages/index'
+
+export const BuildInfraUtilityContext = createContext<BuildInfraUtilityContextType>(null)
+
+export const useBuildInfraUtilityContext = () => {
+    const context = useContext(BuildInfraUtilityContext)
+
+    if (!context) {
+        throw new Error('Please wrap parent component with BuildInfraUtilityProvider')
+    }
+
+    return context
+}

src/Pages/GlobalConfigurations/BuildInfra/BuildInfraProfileNameField.tsx

@@ -26,6 +26,7 @@ const Descriptor = ({
     tippyInfoText,
     tippyAdditionalContent,
     tooltipNode,
+    tooltipHeading,
 }: BuildInfraDescriptorProps) => (
     <div className={`flexbox dc__content-space dc__align-items-center w-100 ${additionalContainerClasses ?? ''}`}>
         <div className="flexbox dc__align-items-center dc__gap-4">
@@ -35,7 +36,7 @@ const Descriptor = ({
                     <InfoIconTippy
                         infoText={tippyInfoText ?? BUILD_INFRA_TEXT.EDIT_DEFAULT_TOOLTIP}
                         additionalContent={tippyAdditionalContent}
-                        heading={BUILD_INFRA_TEXT.HEADING}
+                        heading={tooltipHeading || BUILD_INFRA_TEXT.HEADING}
                         documentationLink={DOCUMENTATION.GLOBAL_CONFIG_BUILD_INFRA}
                         documentationLinkText="View Documentation"
                         iconClassName="icon-dim-20 fcn-6"