Merge pull request #2040 from devtron-labs/feat/environment-labels

feat: Cluster -> Environment - namespace labels support

Author: RohitRaj011

.eslintignore

@@ -242,7 +242,6 @@ src/components/cluster/ClusterComponentModal.tsx
 src/components/cluster/ClusterForm.tsx
 src/components/cluster/ClusterInfoStepsModal.tsx
 src/components/cluster/ClusterInstallStatus.tsx
-src/components/cluster/Environment.tsx
 src/components/cluster/UseNameListDropdown.tsx
 src/components/cluster/cluster.service.ts
 src/components/cluster/cluster.util.ts

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.3.11",
+        "@devtron-labs/devtron-fe-common-lib": "0.3.12",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx

@@ -0,0 +1 @@
+export * from './ClusterEnvironmentDrawer'

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/index.ts

@@ -0,0 +1,35 @@
+import { UseFormValidations } from '@devtron-labs/devtron-fe-common-lib'
+
+import { ClusterEnvironmentDrawerFormProps } from './types'
+
+export const clusterEnvironmentDrawerFormValidationSchema = ({
+    isNamespaceMandatory,
+}: {
+    isNamespaceMandatory: boolean
+}): UseFormValidations<ClusterEnvironmentDrawerFormProps> => ({
+    environmentName: {
+        required: true,
+        pattern: [
+            { message: 'Environment name is required', value: /^.*$/ },
+            { message: "Use only lowercase alphanumeric characters or '-'", value: /^[a-z0-9-]+$/ },
+            { message: "Cannot start/end with '-'", value: /^(?![-]).*[^-]$/ },
+            { message: 'Minimum 1 and Maximum 16 characters required', value: /^.{1,16}$/ },
+        ],
+    },
+    namespace: {
+        required: isNamespaceMandatory,
+        pattern: [
+            { message: 'Namespace is required', value: /^.*$/ },
+            { message: "Use only lowercase alphanumeric characters or '-'", value: /^[a-z0-9-]+$/ },
+            { message: "Cannot start/end with '-'", value: /^(?![-]).*[^-]$/ },
+            { message: 'Maximum 63 characters required', value: /^.{1,63}$/ },
+        ],
+    },
+    isProduction: {
+        required: true,
+        pattern: { message: 'token is required', value: /[^]+/ },
+    },
+    description: {
+        pattern: [{ message: 'Maximum 40 characters required', value: /^.{0,40}$/ }],
+    },
+})

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/schema.ts

@@ -0,0 +1,37 @@
+import { TagType } from '@devtron-labs/devtron-fe-common-lib'
+
+export interface ClusterEnvironmentDrawerFormProps {
+    environmentName: string
+    namespace: string
+    isProduction: boolean
+    description: string
+}
+
+export interface ClusterEnvironmentDrawerProps extends ClusterEnvironmentDrawerFormProps {
+    id: string
+    clusterId: number
+    prometheusEndpoint: string
+    reload: () => void
+    hideClusterDrawer: () => void
+    isVirtual: boolean
+}
+
+export type GetClusterEnvironmentUpdatePayloadType = Pick<
+    ClusterEnvironmentDrawerProps,
+    'clusterId' | 'id' | 'prometheusEndpoint' | 'isVirtual'
+> &
+    Partial<Pick<ClusterNamespacesDTO, 'resourceVersion'>> & {
+        data: ClusterEnvironmentDrawerFormProps
+        namespaceLabels?: TagType[]
+    }
+
+export interface ClusterNamespacesLabel {
+    key: string
+    value: string
+}
+
+export interface ClusterNamespacesDTO {
+    name: string
+    labels: ClusterNamespacesLabel[]
+    resourceVersion: string
+}

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts

@@ -0,0 +1,59 @@
+import { ClusterNamespacesDTO, GetClusterEnvironmentUpdatePayloadType } from './types'
+
+export const getClusterEnvironmentUpdatePayload = ({
+    id,
+    data,
+    prometheusEndpoint,
+    clusterId,
+    namespaceLabels,
+    resourceVersion,
+    isVirtual = false,
+}: GetClusterEnvironmentUpdatePayloadType) =>
+    isVirtual
+        ? {
+              id,
+              environment_name: data.environmentName,
+              namespace: data.namespace || '',
+              IsVirtualEnvironment: true,
+              cluster_id: clusterId,
+              description: data.description || '',
+          }
+        : {
+              id,
+              environment_name: data.environmentName,
+              cluster_id: clusterId,
+              prometheus_endpoint: prometheusEndpoint,
+              namespace: data.namespace || '',
+              active: true,
+              default: data.isProduction,
+              description: data.description || '',
+              updateLabels: !!namespaceLabels,
+              ...(namespaceLabels
+                  ? {
+                        namespaceResourceVersion: resourceVersion,
+                        namespaceLabels: namespaceLabels
+                            .filter(({ key, value }) => !!key.trim() && !!value.trim())
+                            .map(({ key, value }) => ({ key, value })),
+                    }
+                  : {}),
+          }
+
+export const getClusterNamespaceByName = (namespacesList: ClusterNamespacesDTO[], name: string) =>
+    namespacesList.find(({ name: _name }) => _name === name)
+
+export const getNamespaceLabels = (clusterNamespace: ClusterNamespacesDTO) =>
+    clusterNamespace?.labels.map(({ key, value }, index) => ({
+        id: index,
+        key,
+        value,
+        propagate: true,
+        isPropagateDisabled: true,
+    })) ?? [
+        {
+            id: 0,
+            key: '',
+            value: '',
+            propagate: true,
+            isPropagateDisabled: true,
+        },
+    ]

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/utils.ts

@@ -935,7 +935,7 @@ export const ConfigMapSecretForm = React.memo(
                     value={state.configName.value}
                     autoFocus
                     onChange={onConfigNameChange}
-                    handleOnBlur={trimConfigMapName}
+                    onBlur={trimConfigMapName}
                     placeholder={componentType === CMSecretComponentType.Secret ? 'secret-name' : 'configmap-name'}
                     isRequiredField
                     disabled={!!configMapSecretData?.name}

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx

@@ -236,7 +236,7 @@ const CustomInputOutputVariables = ({ type }: { type: PluginVariableType }) => {
                                                     value={variable.name}
                                                     name="name"
                                                     onChange={(e) => handleInputOutputValueChange(e, index)}
-                                                    handleOnBlur={handleBlur}
+                                                    onBlur={handleBlur}
                                                 />
                                             </div>
 
@@ -297,7 +297,7 @@ const CustomInputOutputVariables = ({ type }: { type: PluginVariableType }) => {
                                         value={variable.description}
                                         name="description"
                                         onChange={(e) => handleInputOutputValueChange(e, index)}
-                                        handleOnBlur={handleBlur}
+                                        onBlur={handleBlur}
                                     />
                                 </div>
 

src/components/CIPipelineN/CustomInputOutputVariables.tsx

@@ -194,7 +194,7 @@ export const SourceMaterials: React.FC<SourceMaterialsProps> = (props) => {
                                                     SourceTypeMap.BranchFixed,
                                                 )
                                             }}
-                                            handleOnBlur={onBlur}
+                                            onBlur={onBlur}
                                             isRequiredField
                                             error={
                                                 errorObj &&