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

feat: build infra

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "0.0.62",
+        "@devtron-labs/devtron-fe-common-lib": "0.0.63",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
         "@rjsf/validator-ajv8": "^5.13.3",

src/Pages/GlobalConfigurations/BuildInfra/BuildInfra.tsx

@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from 'react'
+import { ErrorScreenNotAuthorized } from '@devtron-labs/devtron-fe-common-lib'
+import { importComponentFromFELibrary } from '../../../components/common'
+import { BuildInfraProps } from './types'
+import ProfileForm from './ProfileForm'
+
+const BuildInfraRouter = importComponentFromFELibrary('BuildInfraRouter', null, 'function')
+
+export const BuildInfra: FunctionComponent<BuildInfraProps> = ({ isSuperAdmin }) => {
+    if (!isSuperAdmin) {
+        return <ErrorScreenNotAuthorized />
+    }
+
+    if (BuildInfraRouter) {
+        return <BuildInfraRouter />
+    }
+
+    return <ProfileForm />
+}
+
+export default BuildInfra

src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx

@@ -0,0 +1,86 @@
+import React, { FunctionComponent, useMemo } from 'react'
+import {
+    BUILD_INFRA_BREADCRUMB,
+    BuildInfraDescriptor,
+    BuildInfraFooter,
+    useBreadcrumb,
+    BuildInfraConfigForm,
+    useBuildInfraForm,
+    DEFAULT_PROFILE_NAME,
+    APIResponseHandler,
+    BUILD_INFRA_TEXT,
+} from '@devtron-labs/devtron-fe-common-lib'
+import './styles.scss'
+
+const ProfileForm: FunctionComponent = () => {
+    const { breadcrumbs } = useBreadcrumb(BUILD_INFRA_BREADCRUMB)
+    const {
+        isLoading,
+        profileResponse,
+        responseError,
+        reloadRequest,
+        profileInput,
+        profileInputErrors,
+        handleProfileInputChange,
+        loadingActionRequest,
+        handleSubmit,
+    } = useBuildInfraForm({ name: DEFAULT_PROFILE_NAME, editProfile: true })
+    // Would use this to disable the save button, if all keys in profileInputErrors are null or undefined, then there are no errors
+    // Empty string means isRequired but no need to show error below input field
+    const formErrorCount = useMemo(
+        () =>
+            Object.keys(profileInputErrors).filter(
+                (item) => profileInputErrors[item] !== null && profileInputErrors[item] !== undefined,
+            ).length,
+        [profileInputErrors],
+    )
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLFormElement>) => {
+        if (event.key === 'Enter') {
+            event.preventDefault()
+        }
+    }
+
+    const showActionItems = !isLoading && !responseError && profileInput?.configurations
+
+    return (
+        <form
+            className="h-100 flexbox-col build-infra pl pr pt pb dc__content-space bcn-0"
+            onKeyDown={handleKeyDown}
+            onSubmit={handleSubmit}
+        >
+            <div className="flexbox-col dc__gap-24 pt pr pb pl h-100 dc__overflow-scroll">
+                <BuildInfraDescriptor breadCrumbs={breadcrumbs} />
+
+                <APIResponseHandler
+                    isLoading={isLoading}
+                    progressingProps={{
+                        pageLoader: true,
+                    }}
+                    error={responseError}
+                    reloadProps={{
+                        reload: reloadRequest,
+                    }}
+                    notFoundText={{
+                        title: BUILD_INFRA_TEXT.PROFILE_NOT_FOUND.title,
+                        subTitle: BUILD_INFRA_TEXT.PROFILE_NOT_FOUND.subTitle,
+                    }}
+                >
+                    <BuildInfraConfigForm
+                        profileInput={profileInput}
+                        profileInputErrors={profileInputErrors}
+                        handleProfileInputChange={handleProfileInputChange}
+                        isDefaultProfile
+                        unitsMap={profileResponse?.configurationUnits}
+                    />
+                </APIResponseHandler>
+            </div>
+
+            {showActionItems && (
+                <BuildInfraFooter disabled={formErrorCount !== 0} editProfile loading={loadingActionRequest} />
+            )}
+        </form>
+    )
+}
+
+export default ProfileForm

src/Pages/GlobalConfigurations/BuildInfra/index.ts

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as BuildInfra } from './BuildInfra'

src/Pages/GlobalConfigurations/BuildInfra/styles.scss

@@ -0,0 +1,14 @@
+.build-infra {
+    .pl {
+        padding-left: 20px;
+    }
+    .pr {
+        padding-right: 20px;
+    }
+    .pt {
+        padding-top: 16px;
+    }
+    .pb {
+        padding-bottom: 16px;
+    }
+}

src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -0,0 +1,3 @@
+export interface BuildInfraProps {
+    isSuperAdmin: boolean
+}

src/Pages/GlobalConfigurations/index.ts

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

src/Pages/index.ts

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

src/assets/icons/ic-bulk-check.svg

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { showError, ServerErrors, Checkbox, noop } from '@devtron-labs/devtron-fe-common-lib'
+import { showError, ServerErrors, Checkbox, noop, CHECKBOX_VALUE } from '@devtron-labs/devtron-fe-common-lib'
 import { CIMaterialProps, CIMaterialState, RegexValueType } from './types'
 import { ReactComponent as Play } from '../../../../assets/icons/misc/arrow-solid-right.svg'
 import { ReactComponent as Info } from '../../../../assets/icons/info-filled.svg'
@@ -106,7 +106,7 @@ export class CIMaterial extends Component<CIMaterialProps, CIMaterialState> {
                     isChecked={this.context.invalidateCache}
                     onClick={this.onClickStopPropagation}
                     rootClassName="form__checkbox-label--ignore-cache mb-0"
-                    value={'CHECKED'}
+                    value={CHECKBOX_VALUE.CHECKED}
                     onChange={this.context.toggleInvalidateCache}
                     data-testid="set-clone-directory"
                 >