chore: move profile form into separate component

Author: AbhishekA1509

src/Pages/GlobalConfigurations/BuildInfra/BuildInfra.tsx

@@ -1,80 +1,21 @@
-import React, { FunctionComponent, useMemo } from 'react'
-import {
-    BUILD_INFRA_BREADCRUMB,
-    BuildInfraDescriptor,
-    BuildInfraFooter,
-    useBreadcrumb,
-    BuildInfraConfigForm,
-    useBuildInfraForm,
-    DEFAULT_PROFILE_NAME,
-    APIResponseHandler,
-    ErrorScreenNotAuthorized,
-} from '@devtron-labs/devtron-fe-common-lib'
+import React, { FunctionComponent } from 'react'
+import { ErrorScreenNotAuthorized } from '@devtron-labs/devtron-fe-common-lib'
+import { importComponentFromFELibrary } from '../../../components/common'
 import { BuildInfraProps } from './types'
-import './styles.scss'
+import ProfileForm from './ProfileForm'
 
-const BuildInfra: FunctionComponent<BuildInfraProps> = ({ isSuperAdmin }) => {
-    const { breadcrumbs } = useBreadcrumb(BUILD_INFRA_BREADCRUMB)
-    // Sending isSuperAdmin since don't even want to send API Request for that case
-    const {
-        isLoading,
-        profileResponse,
-        responseError,
-        reloadRequest,
-        profileInput,
-        profileInputErrors,
-        handleProfileInputChange,
-        loadingActionRequest,
-        handleSubmit,
-    } = useBuildInfraForm({ name: DEFAULT_PROFILE_NAME, isSuperAdmin, editProfile: true })
-    // Would use this to disable the save button, if all keys in profileInputErrors are null, then there are no errors
-    // Might enhance this check later for other operations
-    const formErrorCount = useMemo(
-        () => Object.keys(profileInputErrors).filter((item) => profileInputErrors[item]).length,
-        [profileInputErrors],
-    )
-    const showActionItems = isSuperAdmin && !isLoading && !responseError && profileInput?.configurations
+const BuildInfraRouter = importComponentFromFELibrary('BuildInfraRouter')
 
+export const BuildInfra: FunctionComponent<BuildInfraProps> = ({ isSuperAdmin }) => {
     if (!isSuperAdmin) {
         return <ErrorScreenNotAuthorized />
     }
 
-    return (
-        <form className="h-100 flexbox-col build-infra pl pr pt pb dc__content-space bcn-0" 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}
-                    notAuthorized={!isSuperAdmin}
-                    reloadProps={{
-                        reload: reloadRequest,
-                    }}
-                >
-                    <BuildInfraConfigForm
-                        profileInput={profileInput}
-                        profileInputErrors={profileInputErrors}
-                        handleProfileInputChange={handleProfileInputChange}
-                        isDefaultProfile
-                        unitsMap={profileResponse?.configurationUnits}
-                    />
-                </APIResponseHandler>
-            </div>
+    if (BuildInfraRouter) {
+        return <BuildInfraRouter />
+    }
 
-            {showActionItems && (
-                <BuildInfraFooter
-                    disabled={formErrorCount !== 0}
-                    hideCancelButton
-                    editProfile
-                    loading={loadingActionRequest}
-                />
-            )}
-        </form>
-    )
+    return <ProfileForm />
 }
 
 export default BuildInfra

src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx

@@ -0,0 +1,82 @@
+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)
+    // Sending isSuperAdmin since don't even want to send API Request for that case
+    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, then there are no errors
+    // Might enhance this check later for other operations
+    const formErrorCount = useMemo(
+        () =>
+            Object.keys(profileInputErrors).filter(
+                (item) => profileInputErrors[item] !== null && profileInputErrors[item] !== undefined,
+            ).length,
+        [profileInputErrors],
+    )
+
+    const showActionItems = !isLoading && !responseError && profileInput?.configurations
+
+    return (
+        <form className="h-100 flexbox-col build-infra pl pr pt pb dc__content-space bcn-0" 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}
+                    hideCancelButton
+                    editProfile
+                    loading={loadingActionRequest}
+                />
+            )}
+        </form>
+    )
+}
+
+export default ProfileForm

src/css/base.scss

@@ -4130,3 +4130,14 @@ textarea::placeholder {
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);
     backdrop-filter: blur(5px);
 }
+
+
+// Tab behaviors
+.dc__tab-focus {
+    outline: none;
+}
+
+.dc__tab-focus:focus-visible {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}