Merge pull request #2462 from devtron-labs/feat/add-base-config-route

feat: add base-config path segment for base configurations
devtron-labs · Feb 11, 2025 · 67fd9d8 · 67fd9d8
2 parents a0687a6 + b2d770c
commit 67fd9d8
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 92 deletions.
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts
@@ -223,10 +223,6 @@ export interface EnvConfigurationsNavProps {
     isCMSecretLocked?: boolean
     hideEnvSelector?: boolean
     appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
-    /**
-     * @default false
-     */
-    removeBaseConfigPath?: boolean
 }
 
 export interface EnvConfigRouteParams {

diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts
@@ -19,10 +19,9 @@ import {
     stringComparatorBySortOrder,
     ConfigResourceType,
     BASE_CONFIGURATION_ENV_ID,
-    EnvResourceType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { URLS, DOCUMENTATION } from '@Config/index'
+import { URLS, DOCUMENTATION, getAppComposeURL, APP_COMPOSE_STAGE } from '@Config/index'
 import { AppConfigStatusItemType, EnvConfigDTO } from '../../service.types'
 import { AppConfigState, AppStageUnlockedType, CustomNavItemsType, EnvConfigType, STAGE_NAME } from './AppConfig.types'
 
@@ -145,15 +144,15 @@ export const getNavItems = ({
                     },
                     {
                         title: 'ConfigMaps & Secrets',
-                        href: `/job/${appId}/edit/${EnvResourceType.ConfigMap}`,
+                        href: getAppComposeURL(appId, APP_COMPOSE_STAGE.CONFIG_MAPS, true),
                         stage: STAGE_NAME.REDIRECT_ITEM,
                         isLocked: !_isUnlocked.configmap,
                         isProtectionAllowed: true,
                         required: true,
                     },
                     {
                         title: 'ConfigMaps',
-                        href: `/job/${appId}/edit/configmap`,
+                        href: getAppComposeURL(appId, APP_COMPOSE_STAGE.CONFIG_MAPS, true),
                         stage: STAGE_NAME.CONFIGMAP,
                         isLocked: !_isUnlocked.configmap,
                         supportDocumentURL: DOCUMENTATION.APP_CREATE_CONFIG_MAP,
@@ -165,7 +164,7 @@ export const getNavItems = ({
                     },
                     {
                         title: 'Secrets',
-                        href: `/job/${appId}/edit/secrets`,
+                        href: getAppComposeURL(appId, APP_COMPOSE_STAGE.SECRETS, true),
                         stage: STAGE_NAME.SECRETS,
                         isLocked: !_isUnlocked.secret,
                         supportDocumentURL: DOCUMENTATION.APP_CREATE_SECRET,
@@ -220,7 +219,7 @@ export const getNavItems = ({
                     },
                     {
                         title: 'Deployment Template',
-                        href: `/app/${appId}/edit/deployment-template`,
+                        href: getAppComposeURL(appId, APP_COMPOSE_STAGE.DEPLOYMENT_TEMPLATE),
                         stage: STAGE_NAME.DEPLOYMENT_TEMPLATE,
                         isLocked: !_isUnlocked.deploymentTemplate,
                         supportDocumentURL: DOCUMENTATION.APP_DEPLOYMENT_TEMPLATE,
@@ -251,7 +250,7 @@ export const getNavItems = ({
                     },
                     {
                         title: 'ConfigMaps',
-                        href: `/app/${appId}/edit/configmap`,
+                        href: getAppComposeURL(appId, APP_COMPOSE_STAGE.CONFIG_MAPS),
                         stage: STAGE_NAME.CONFIGMAP,
                         isLocked: !_isUnlocked.configmap,
                         supportDocumentURL: DOCUMENTATION.APP_CREATE_CONFIG_MAP,
@@ -263,7 +262,7 @@ export const getNavItems = ({
                     },
                     {
                         title: 'Secrets',
-                        href: `/app/${appId}/edit/secrets`,
+                        href: getAppComposeURL(appId, APP_COMPOSE_STAGE.SECRETS),
                         stage: STAGE_NAME.SECRETS,
                         isLocked: !_isUnlocked.secret,
                         supportDocumentURL: DOCUMENTATION.APP_CREATE_SECRET,

diff --git a/...Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx b/...Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx
@@ -134,7 +134,10 @@ const AppComposeRouter = () => {
                         reloadEnvironments={reloadEnvironments}
                     />
                 </Route>,
-                <Route key={`${path}/${URLS.APP_CM_CONFIG}`} path={`${path}/${URLS.APP_CM_CONFIG}/:name?`}>
+                <Route
+                    key={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CM_CONFIG}`}
+                    path={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CM_CONFIG}/:name?`}
+                >
                     <ConfigMapSecretWrapper
                         isJob
                         isApprovalPolicyConfigured={false}
@@ -146,7 +149,10 @@ const AppComposeRouter = () => {
                         envName=""
                     />
                 </Route>,
-                <Route key={`${path}/${URLS.APP_CS_CONFIG}`} path={`${path}/${URLS.APP_CS_CONFIG}/:name?`}>
+                <Route
+                    key={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CS_CONFIG}`}
+                    path={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CS_CONFIG}/:name?`}
+                >
                     <ConfigMapSecretWrapper
                         isJob
                         isApprovalPolicyConfigured={false}
@@ -208,13 +214,13 @@ const AppComposeRouter = () => {
             )}
 
             {(isUnlocked.deploymentTemplate || isUnlocked.workflowEditor) && (
-                <Route path={`${path}/${URLS.BASE_CONFIG}`}>
+                <Route path={`${path}/${URLS.BASE_CONFIG}`} exact>
                     <Progressing pageLoader />
                 </Route>
             )}
 
             {isUnlocked.deploymentTemplate && (
-                <Route path={`${path}/${URLS.APP_DEPLOYMENT_CONFIG}`}>
+                <Route path={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_DEPLOYMENT_CONFIG}`}>
                     <DeploymentTemplate
                         respondOnSuccess={respondOnSuccess}
                         isCiPipeline={isCiPipeline}
@@ -255,7 +261,10 @@ const AppComposeRouter = () => {
                         reloadAppConfig={reloadAppConfig}
                     />
                 </Route>,
-                <Route key={`${path}/${URLS.APP_CM_CONFIG}`} path={`${path}/${URLS.APP_CM_CONFIG}/:name?`}>
+                <Route
+                    key={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CM_CONFIG}`}
+                    path={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CM_CONFIG}/:name?`}
+                >
                     <ConfigMapSecretWrapper
                         isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
                             approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.configMap],
@@ -268,7 +277,10 @@ const AppComposeRouter = () => {
                         envName=""
                     />
                 </Route>,
-                <Route key={`${path}/${URLS.APP_CS_CONFIG}`} path={`${path}/${URLS.APP_CS_CONFIG}/:name?`}>
+                <Route
+                    key={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CS_CONFIG}`}
+                    path={`${path}/${URLS.BASE_CONFIG}/${URLS.APP_CS_CONFIG}/:name?`}
+                >
                     <ConfigMapSecretWrapper
                         isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
                             approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.configSecret],
@@ -307,7 +319,7 @@ const AppComposeRouter = () => {
                         const basePath = generatePath(path, match.params)
                         const envOverridePath = match.params.envId
                             ? `/${URLS.APP_ENV_OVERRIDE_CONFIG}/${match.params.envId}`
-                            : ''
+                            : `/${URLS.BASE_CONFIG}`
                         // Set the resourceTypePath based on the resourceType from the URL parameters.
                         // If the resourceType is 'Manifest' or 'PipelineStrategy', use 'deployment-template' as the back URL.
                         // Otherwise, use the actual resourceType from the URL, which could be 'deployment-template', 'configmap', or 'secrets'.

diff --git a/...vtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx b/...vtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
@@ -65,7 +65,7 @@ import { Prompt, useLocation, useParams } from 'react-router-dom'
 import YAML from 'yaml'
 import { importComponentFromFELibrary } from '@Components/common'
 import { getModuleInfo } from '@Components/v2/devtronStackManager/DevtronStackManager.service'
-import { URLS } from '@Config/routes'
+import { APP_COMPOSE_STAGE, getAppComposeURL } from '@Config/routes'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ReactComponent as ICInfoOutlineGrey } from '@Icons/ic-info-outline-grey.svg'
 import deleteOverrideEmptyStateImage from '@Images/no-artifact.webp'
@@ -255,7 +255,7 @@ const DeploymentTemplate = ({
 
     const isGuiSupported = isEditMode && !showDeleteOverrideDraftEmptyState
 
-    const baseDeploymentTemplateURL = `${URLS.APP}/${appId}/${URLS.APP_CONFIG}/${URLS.APP_DEPLOYMENT_CONFIG}`
+    const baseDeploymentTemplateURL = getAppComposeURL(appId, APP_COMPOSE_STAGE.DEPLOYMENT_TEMPLATE)
 
     /**
      * Means has no global config

diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx
@@ -32,7 +32,7 @@
  */
 
 import { ReactNode } from 'react'
-import { match as matchType, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
+import { Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 import {
     Button,
     ButtonStyleType,
@@ -114,9 +114,11 @@ export const AppNavigation = () => {
     )
 
     const getValidBackURL = () => {
-        const isBackURLLocked = location.pathname === lastUnlockedStage
-        const secondLastUnlockedStage = isBackURLLocked
-            ? navItems.reduce(
+        const isCurrentPathLastUnlockedStage = location.pathname === lastUnlockedStage
+        const eligibleNavItems = navItems.filter((navItem) => navItem.stage !== STAGE_NAME.REDIRECT_ITEM)
+
+        const secondLastUnlockedStage = isCurrentPathLastUnlockedStage
+            ? eligibleNavItems.reduce(
                   (acc, curr) => {
                       if (curr.href === lastUnlockedStage) {
                           acc.found = true
@@ -140,39 +142,32 @@ export const AppNavigation = () => {
         return secondLastUnlockedStage || lastUnlockedStage
     }
 
-    const renderEnvConfigurationsNav = (match: matchType, isBaseConfig?: boolean) => (
-        <EnvConfigurationsNav
-            key={`env-configurations-nav-${'envId' in match.params ? match.params.envId : ''}`}
-            envConfig={envConfig}
-            fetchEnvConfig={fetchEnvConfig}
-            environments={environments.map(({ environmentName, environmentId }) => ({
-                id: environmentId,
-                name: environmentName,
-            }))}
-            showBaseConfigurations
-            showDeploymentTemplate={!isJobView}
-            goBackURL={getValidBackURL()}
-            compareWithURL={`${path}/:envId(\\d+)?`}
-            showComparison={!isJobView && isUnlocked.workflowEditor}
-            isCMSecretLocked={!isUnlocked.workflowEditor}
-            appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
-            removeBaseConfigPath={isBaseConfig}
-        />
-    )
-
     return (
         <Switch>
             <Route
                 path={[
-                    `${path}/${DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE}`,
+                    `${path}/${URLS.BASE_CONFIG}/${DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE}?`,
                     `${path}/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)/${DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE}?`,
                 ]}
             >
-                {({ match }) => renderEnvConfigurationsNav(match)}
-            </Route>
-
-            <Route path={`${path}/${URLS.BASE_CONFIG}`} key={URLS.BASE_CONFIG}>
-                {({ match }) => renderEnvConfigurationsNav(match, true)}
+                {({ match }) => (
+                    <EnvConfigurationsNav
+                        key={`env-configurations-nav-${'envId' in match.params ? match.params.envId : ''}`}
+                        envConfig={envConfig}
+                        fetchEnvConfig={fetchEnvConfig}
+                        environments={environments.map(({ environmentName, environmentId }) => ({
+                            id: environmentId,
+                            name: environmentName,
+                        }))}
+                        showBaseConfigurations
+                        showDeploymentTemplate={!isJobView}
+                        goBackURL={getValidBackURL()}
+                        compareWithURL={`${path}/:envId(\\d+)?`}
+                        showComparison={!isJobView && isUnlocked.workflowEditor}
+                        isCMSecretLocked={!isUnlocked.workflowEditor}
+                        appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
+                    />
+                )}
             </Route>
 
             <Route key="default-navigation">

diff --git a/...es/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx b/...es/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
@@ -135,7 +135,7 @@ const EnvConfigurationsNavContent = ({
         if (resourceData.id === BASE_CONFIGURATIONS.id && envId) {
             // Removing `/env-override/:envId` from pathname, resulting path will be base configuration path.
             const [basePath, resourcePath] = pathname.split(`/${URLS.APP_ENV_OVERRIDE_CONFIG}/${envId}`)
-            history.push(`${basePath}${resourcePath}`)
+            history.push(`${basePath}${URLS.BASE_CONFIG}/${resourcePath}`)
         }
     }, [resourceData, envId])
 
@@ -299,7 +299,6 @@ export const EnvConfigurationsNav = ({
     hideEnvSelector,
     compareWithURL,
     appOrEnvIdToResourceApprovalConfigurationMap,
-    removeBaseConfigPath = false,
 }: EnvConfigurationsNavProps) => {
     const history = useHistory()
     const { isSuperAdmin } = useMainContext()
@@ -319,8 +318,7 @@ export const EnvConfigurationsNav = ({
               }
             : null)
 
-    const [expandedIds, setExpandedIds] =
-        useState<Record<Extract<EnvResourceType, EnvResourceType.ConfigMap | EnvResourceType.Secret>, boolean>>()
+    const [expandedIds, setExpandedIds] = useState<ExpandedIdsType>()
 
     const isResourceTypeValid = Object.values(EnvResourceType).includes(resourceType as EnvResourceType)
     const resourceName = isResourceTypeValid ? pathname.split(`${resourceType}/`)[1] : null
@@ -332,16 +330,10 @@ export const EnvConfigurationsNav = ({
                 isSuperAdmin || !areCMsPresent ? EnvResourceType.DeploymentTemplate : EnvResourceType.ConfigMap
 
             history.replace(
-                generatePath(
-                    // Here resourceType is mandatory since we are navigating to a specific resource type
-                    removeBaseConfigPath
-                        ? `${pathname.split(URLS.BASE_CONFIG)[0]}${DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE}`
-                        : path,
-                    {
-                        ...params,
-                        resourceType: validResourceType,
-                    },
-                ),
+                generatePath(path, {
+                    ...params,
+                    resourceType: validResourceType,
+                }),
             )
         }
     }
@@ -385,7 +377,7 @@ export const EnvConfigurationsNav = ({
 
         // Build the new app path, conditionally adding the environment override config when switching to environment
         const appPath = `${truncatedPath}${
-            value !== BASE_CONFIGURATIONS.id ? `/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?` : ''
+            value !== BASE_CONFIGURATIONS.id ? `/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?` : `/${URLS.BASE_CONFIG}`
         }/${DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE}?` // Dynamically set valid resource types
 
         // Generate the final path

diff --git a/...plications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx b/...plications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx
@@ -183,7 +183,7 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
         <div className="flexbox dc__align-items-center dc__content-space pr-8">
             <NavLink
                 data-testid="env-deployment-template"
-                className="app-compose__nav-item  app-compose__nav-item--job cursor dc__gap-8"
+                className="app-compose__nav-item app-compose__nav-item--job cursor dc__gap-8"
                 to={`${URLS.APP_ENV_OVERRIDE_CONFIG}/${envOverride.environmentId}/${EnvResourceType.ConfigMap}`}
             >
                 <span className="dc__truncate">{envOverride.environmentName}</span>

diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx
@@ -56,7 +56,7 @@ import {
     isNullOrUndefined,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { URLS } from '@Config/routes'
+import { APP_COMPOSE_STAGE, getAppComposeURL } from '@Config/routes'
 import { ConfigHeader, ConfigToolbar, ConfigToolbarProps, NoOverrideEmptyState } from '@Pages/Applications'
 import { getConfigToolbarPopupConfig } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/utils'
 import { importComponentFromFELibrary } from '@Components/common'
@@ -187,7 +187,11 @@ export const ConfigMapSecretContainer = ({
     const gaEventCategory = `devtronapp-configuration-${isSecret ? 'secret' : 'cm'}`
 
     // COMPONENT PROP CONSTANTS
-    const baseConfigurationURL = `${isJob ? URLS.JOB : URLS.APP}/${appId}/${URLS.APP_CONFIG}/${isSecret ? URLS.APP_CS_CONFIG : URLS.APP_CM_CONFIG}/${name}`
+    const baseConfigurationURL = getAppComposeURL(
+        appId,
+        isSecret ? APP_COMPOSE_STAGE.SECRETS : APP_COMPOSE_STAGE.CONFIG_MAPS,
+        isJob,
+    )
     const headerMessage =
         cmSecretStateLabel === CM_SECRET_STATE.ENV ||
         cmSecretStateLabel === CM_SECRET_STATE.UNPUBLISHED ||

diff --git a/src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts b/src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts
@@ -19,7 +19,6 @@ import {
     AppConfigState,
     EnvConfigurationState,
 } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
-import { DOCUMENTATION, URLS } from '../../../config'
 import { ConfigAppList } from '../../../components/ApplicationGroup/AppGroup.types'
 
 export enum ComponentStates {
@@ -36,20 +35,6 @@ export interface SectionHeadingType {
     learnMoreLink: string
 }
 
-export const SECTION_HEADING_INFO: Record<string, SectionHeadingType> = {
-    [URLS.APP_CM_CONFIG]: {
-        title: 'ConfigMaps',
-        subtitle:
-            'ConfigMap is used to store common configuration variables, allowing users to unify environment variables for different modules in a distributed system into one object.',
-        learnMoreLink: DOCUMENTATION.APP_CREATE_CONFIG_MAP,
-    },
-    [URLS.APP_CS_CONFIG]: {
-        title: 'Secrets',
-        subtitle: 'A Secret is an object that contains sensitive data such as passwords, OAuth tokens, and SSH keys.',
-        learnMoreLink: DOCUMENTATION.APP_CREATE_SECRET,
-    },
-}
-
 export interface EnvironmentOverrideComponentProps {
     appList?: ConfigAppList[]
     environments: AppConfigState['environmentList']