Merge branch 'develop' into feat/group-filter-ga

package.json

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

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx

@@ -53,6 +53,7 @@ import { ENV_CONFIG_PATH_REG } from './AppConfig.constants'
 
 const getApprovalPolicyConfigForApp: (appId: number) => Promise<ResourceIdToResourceApprovalPolicyConfigMapType> =
     importComponentFromFELibrary('getApprovalPolicyConfigForApp', null, 'function')
+const isFELibAvailable: boolean = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 
 export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigProps) => {
     // HOOKS
@@ -463,7 +464,9 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
                 : 'app-compose-with-no-gitops-config__nav'
         } ${isJob ? 'job-compose__side-nav' : ''} ${
             !showCannotDeleteTooltip ? 'dc__position-rel' : ''
-        }  ${hideConfigHelp ? 'hide-app-config-help' : ''} ${!canShowExternalLinks ? 'hide-external-links' : ''}`
+        }  ${hideConfigHelp ? 'hide-app-config-help' : ''} ${!canShowExternalLinks ? 'hide-external-links' : ''}  ${
+            state.isUnlocked.workflowEditor && isFELibAvailable && !isJob ? 'config-protection__side-nav' : ''
+        }`
     }
 
     const toggleRepoSelectionTippy = () => {

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts

@@ -44,6 +44,7 @@ export enum STAGE_NAME {
     SECRETS = 'SECRETS',
     ENV_OVERRIDE = 'ENV_OVERRIDE',
     EXTERNAL_LINKS = 'EXTERNAL_LINKS',
+    PROTECT_CONFIGURATION = 'PROTECT_CONFIGURATION',
     REDIRECT_ITEM = 'REDIRECT_ITEM',
 }
 

src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts

@@ -21,7 +21,7 @@ import {
     BASE_CONFIGURATION_ENV_ID,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { DOCUMENTATION } from '@Config/index'
+import { URLS, DOCUMENTATION } from '@Config/index'
 
 import { AppConfigStatusItemType, EnvConfigDTO } from '../../service.types'
 import { AppConfigState, AppStageUnlockedType, CustomNavItemsType, EnvConfigType, STAGE_NAME } from './AppConfig.types'
@@ -282,6 +282,12 @@ export const getNavItems = ({
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                     },
+                    {
+                        title: 'Protect Configuration',
+                        href: URLS.GLOBAL_CONFIG_APPROVAL_POLICY,
+                        stage: STAGE_NAME.PROTECT_CONFIGURATION,
+                        isLocked: false,
+                    },
                     {
                         title: 'Environment Override',
                         href: `/app/${appId}/edit/env-override`,

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx

@@ -27,6 +27,8 @@ import {
     TippyCustomized,
     TippyTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
+import { importComponentFromFELibrary } from '@Components/common'
+import { ReactComponent as ICArrowSquareOut } from '@Icons/ic-arrow-square-out.svg'
 import { DEVTRON_APPS_STEPS, STAGE_NAME } from '../AppConfig.types'
 import { URLS } from '../../../../../../config'
 import AppConfigurationCheckBox from './AppConfigurationCheckBox'
@@ -38,6 +40,8 @@ import { useAppConfigurationContext } from '../AppConfiguration.provider'
 import { renderNavItem } from './Navigation.helper'
 import { EnvConfigurationsNav } from './EnvConfigurationsNav'
 
+const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
+
 export const AppNavigation = () => {
     // HOOKS
     const { path } = useRouteMatch()
@@ -49,6 +53,7 @@ export const AppNavigation = () => {
         deleteApp,
         canShowExternalLinks,
         showCannotDeleteTooltip,
+        isWorkflowEditorUnlocked,
         toggleRepoSelectionTippy,
         getRepo,
         isJobView,
@@ -172,6 +177,23 @@ export const AppNavigation = () => {
                             )
                         }
 
+                        if (item.stage === STAGE_NAME.PROTECT_CONFIGURATION) {
+                            return (
+                                isWorkflowEditorUnlocked &&
+                                isFELibAvailable && (
+                                    <div key={item.stage}>
+                                        {!canShowExternalLinks && <div className="dc__border-bottom-n1 mt-8 mb-8" />}
+                                        {renderNavItem(item, null, {
+                                            target: '_blank',
+                                            icon: <ICArrowSquareOut className="icon-dim-16 dc__no-shrink scn-8" />,
+                                            tooltipContent:
+                                                'Configuration change approval has been moved to Global Configuration',
+                                        })}
+                                    </div>
+                                )
+                            )
+                        }
+
                         if (
                             item.stage !== STAGE_NAME.ENV_OVERRIDE ||
                             (item.stage === STAGE_NAME.ENV_OVERRIDE && item.isLocked)

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/Navigation.helper.tsx

@@ -4,15 +4,18 @@ import {
     ApprovalConfigDataKindType,
     ApprovalConfigDataType,
     CollapsibleListItem,
+    ConditionalWrap,
     EnvResourceType,
     getIsApprovalPolicyConfigured,
     ResourceIdToResourceApprovalPolicyConfigMapType,
+    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Lock } from '@Icons/ic-locked.svg'
 import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
 import { ResourceConfigStage, ResourceConfigState } from '@Pages/Applications/DevtronApps/service.types'
 
+import { AnchorHTMLAttributes, ReactElement } from 'react'
 import {
     CustomNavItemsType,
     EnvConfigRouteParams,
@@ -32,29 +35,51 @@ const renderNavItemIcon = (isLocked: boolean, isApprovalPolicyConfigured: boolea
     return null
 }
 
+const wrapWithTooltip = (content: string) => (children: ReactElement) => (
+    <Tooltip content={content} alwaysShowTippyOnHover placement="right">
+        {children}
+    </Tooltip>
+)
+
 /**
  *
  * @param item
  * @param hideApprovalPolicyIcon Used to hide the policy icon (applicable for jobs atm)
  */
-export const renderNavItem = (item: CustomNavItemsType, hideApprovalPolicyIcon?: boolean) => {
+export const renderNavItem = (
+    item: CustomNavItemsType,
+    hideApprovalPolicyIcon?: boolean,
+    options?: {
+        target?: AnchorHTMLAttributes<HTMLAnchorElement>['target']
+        icon?: ReactElement
+        tooltipContent?: string
+    },
+) => {
     const linkDataTestName = item.title.toLowerCase().split(' ').join('-')
 
     return (
-        <NavLink
-            data-testid={`${linkDataTestName}-link`}
-            key={item.title}
-            onClick={(event) => {
-                if (item.isLocked) {
-                    event.preventDefault()
-                }
-            }}
-            className="dc__nav-item cursor fs-13 lh-32 cn-7 w-100 br-4 px-8 flexbox dc__align-items-center dc__content-space dc__no-decor"
-            to={item.href}
-        >
-            <span className="dc__truncate nav-text">{item.title}</span>
-            {renderNavItemIcon(item.isLocked, !hideApprovalPolicyIcon && item.isProtectionAllowed, linkDataTestName)}
-        </NavLink>
+        <ConditionalWrap condition={!!options?.tooltipContent} wrap={wrapWithTooltip(options?.tooltipContent)}>
+            <NavLink
+                data-testid={`${linkDataTestName}-link`}
+                key={item.title}
+                onClick={(event) => {
+                    if (item.isLocked) {
+                        event.preventDefault()
+                    }
+                }}
+                className="dc__nav-item cursor fs-13 lh-32 cn-9 w-100 br-4 px-8 flexbox dc__align-items-center dc__content-space dc__no-decor"
+                to={item.href}
+                target={options?.target}
+            >
+                <span className="dc__truncate nav-text">{item.title}</span>
+                {options?.icon ??
+                    renderNavItemIcon(
+                        item.isLocked,
+                        !hideApprovalPolicyIcon && item.isProtectionAllowed,
+                        linkDataTestName,
+                    )}
+            </NavLink>
+        </ConditionalWrap>
     )
 }
 

src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss

@@ -61,6 +61,22 @@
                     grid-template-rows: repeat(3, 32px) 1fr;
                 }
             }
+
+            &.config-protection__side-nav {
+                grid-template-rows: 110px repeat(4, 32px) 54px 32px 1fr auto;
+
+                &.hide-external-links {
+                    grid-template-rows: 110px repeat(4, 32px) 54px 1fr auto;
+                }
+
+                &.hide-app-config-help {
+                    grid-template-rows: repeat(4, 32px) 54px 32px 1fr auto;
+
+                    &.hide-external-links {
+                        grid-template-rows: repeat(4, 32px) 54px 1fr auto;
+                    }
+                }
+            }
         }
 
         &.app-compose-with-gitops-config__nav {
@@ -73,6 +89,22 @@
                     grid-template-rows: repeat(5, 32px) 1fr auto;
                 }
             }
+
+            &.config-protection__side-nav {
+                grid-template-rows: 110px repeat(5, 32px) 54px 32px 1fr auto;
+
+                &.hide-external-links {
+                    grid-template-rows: 110px repeat(5, 32px) 54px 1fr auto;
+                }
+
+                &.hide-app-config-help {
+                    grid-template-rows: repeat(5, 32px) 54px 32px 1fr auto;
+
+                    &.hide-external-links {
+                        grid-template-rows: repeat(5, 32px) 54px 1fr auto;
+                    }
+                }
+            }
         }
 
         .help-container {

src/components/cdPipeline/BuildCD.tsx

@@ -65,6 +65,7 @@ import { BuildCDProps } from './types'
 const VirtualEnvSelectionInfoText = importComponentFromFELibrary('VirtualEnvSelectionInfoText')
 const HelmManifestPush = importComponentFromFELibrary('HelmManifestPush')
 const MigrateHelmReleaseBody = importComponentFromFELibrary('MigrateHelmReleaseBody', null, 'function')
+const ApprovalPolicyRedirectCard = importComponentFromFELibrary('ApprovalPolicyRedirectCard', null, 'function')
 
 export default function BuildCD({
     isAdvanced,
@@ -776,6 +777,9 @@ export default function BuildCD({
                     !noGitOpsModuleInstalledAndConfigured &&
                     renderDeploymentAppType()}
                 {isAdvanced ? renderAdvancedDeploymentStrategy() : renderBasicDeploymentStrategy()}
+                {isAdvanced &&
+                    ApprovalPolicyRedirectCard &&
+                    <ApprovalPolicyRedirectCard />}
                 {isAdvanced && (
                     <>
                         <CustomImageTags

src/css/formulae.scss

@@ -327,7 +327,7 @@ $color-suffix: 00;
     }
 
     &.secondary {
-        @include cta(var(--N0), var(--B500), var(--N200));
+        @include cta(var(--bg-primary), var(--B500), var(--N200));
 
         &:hover {
             @include cta(var(--B100), var(--B500), var(--N200));
@@ -406,28 +406,28 @@ $color-suffix: 00;
 
     &.cancel {
         &:not(.cta__no-svg-override) {
-            @include cta(var(--transparent), var(--N700), var(--N200));
+            @include cta(var(--bg-primary), var(--N700), var(--N200));
 
             &:hover {
-                @include cta(var(--transparent), var(--N700), var(--N300));
+                @include cta(var(--bg-primary), var(--N700), var(--N300));
             }
 
             &:active,
             &:focus {
-                @include cta(var(--transparent), var(--N700), var(--N300));
+                @include cta(var(--bg-primary), var(--N700), var(--N300));
             }
         }
 
         &.cta__no-svg-override {
-            @include cta(var(--transparent), var(--N700), var(--N200), pointer, false);
+            @include cta(var(--bg-primary), var(--N700), var(--N200), pointer, false);
 
             &:hover {
-                @include cta(var(--transparent), var(--N700), var(--N300), pointer, false);
+                @include cta(var(--bg-primary), var(--N700), var(--N300), pointer, false);
             }
 
             &:active,
             &:focus {
-                @include cta(var(--transparent), var(--N700), var(--N300), pointer, false);
+                @include cta(var(--bg-primary), var(--N700), var(--N300), pointer, false);
             }
         }
     }

src/css/iconTheming.scss

@@ -4,7 +4,7 @@ $svg-stroke-hex-to-var: (
     "#FFBF00": --Y500,
     "white": --white,
     "#FF5656": --R500,
-    "#596168": --N700,
+    "#596168": --N600,
     "#fff": --white,
     "#0066CC": --B500,
     "#3B444C": --N700,

yarn.lock

@@ -981,10 +981,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/[email protected].8":
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.5.8.tgz#360a011888805dfb99bb22e113274474387c1723"
-  integrity sha512-FRf/kCAPqVe4yci5d5zcIXHLAqvmGHvXHrF+1OzUp3cDy/qyUx1IY+bDOr1nBaLsPR69LVWxHOPU/yhDgmTrTA==
+"@devtron-labs/[email protected].9":
+  version "1.5.9"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.5.9.tgz#464674d96c028a4c9ea22d5b83d78dae14c9fd83"
+  integrity sha512-bYehEzttGlWqTxIxyqMM4596H6QQCaQ6gi/t4tmdxwhGuTI/pwzyMG1ywYufuSiZDb4b/WUHdhddfwB+8Aq+OQ==
   dependencies:
     "@types/react-dates" "^21.8.6"
     ansi_up "^5.2.1"