Merge branch 'main' into fix/hotfix-32-main-sync

Author: AbhishekA1509

.env

@@ -62,7 +62,5 @@ FEATURE_DEFAULT_LANDING_RB_ENABLE=false
 FEATURE_ACTION_AUDIOS_ENABLE=true
 FEATURE_APPLICATION_TEMPLATES_ENABLE=true
 FEATURE_CODE_MIRROR_ENABLE=false
-FEATURE_EXPERIMENTAL_THEMING_ENABLE=true
 FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
-FEATURE_CD_MANDATORY_PLUGINS_ENABLE=true

.eslintignore

@@ -86,7 +86,6 @@ src/components/app/create/CreateApp.tsx
 src/components/app/create/validationRules.ts
 src/components/app/details/AboutAppInfoModal.tsx
 src/components/app/details/AboutTagEditModal.tsx
-src/components/app/details/AppHeader.tsx
 src/components/app/details/appDetails/AppMetrics.tsx
 src/components/app/details/appDetails/AppStatusCard.tsx
 src/components/app/details/appDetails/DeploymentStatusDetailModal.tsx

.storybook/preview.tsx

@@ -14,6 +14,7 @@ import {
     useTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
 import  { SwitchThemeDialog } from '../src/Pages/Shared'
+import './storybook.css'
 
 const SwitchThemeDialogWrapper = () => {
     const { showThemeSwitcherDialog, themePreference, handleThemeSwitcherDialogVisibilityChange } = useTheme()
@@ -22,7 +23,7 @@ const SwitchThemeDialogWrapper = () => {
     }
 
     return (
-        showThemeSwitcherDialog ? <SwitchThemeDialog initialThemePreference={themePreference} handleClose={handleClose} disableAPICalls /> : null
+        showThemeSwitcherDialog ? <SwitchThemeDialog initialThemePreference={themePreference} handleClose={handleClose} disableAPICalls handleUpdateUserThemePreference={noop} /> : null
     )
 }
 
@@ -37,9 +38,7 @@ const preview: Preview = {
     },
     decorators: (Story) => {
         if (!window._env_) {
-            window._env_ = {
-                FEATURE_EXPERIMENTAL_THEMING_ENABLE: true,
-            } as customEnv
+            window._env_ = {} as customEnv
         }
 
         return (
@@ -58,6 +57,7 @@ const preview: Preview = {
                     <SwitchThemeDialogWrapper />
 
                     <div id="animated-dialog-backdrop" />
+                    <div id="visible-modal" />
 
                     <BaseConfirmationModal />
                 </ConfirmationModalProvider>

.storybook/storybook.css

@@ -0,0 +1,3 @@
+body {
+    background: var(--bg-primary);
+}

config.md

@@ -45,6 +45,5 @@
 | TRIGGER_API_TIMEOUT                          | 60000      | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD                   |
 | FEATURE_HIDE_USER_DIRECT_PERMISSIONS_FOR_NON_SUPER_ADMINS | "true" | Would hide the user direct permissions for non-super admin users in User Permissions |
 | FEATURE_ACTION_AUDIOS_ENABLE                 | true         | Would enable audios in dashboard   |
-| FEATURE_EXPERIMENTAL_THEMING_ENABLE                       | true         | Would enable theming in dashboard   |
 
 # DASHBOARD CONFIG SECRET

package.json

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

src/Pages/App/CreateAppModal/AppToCloneSelector.tsx

@@ -33,7 +33,7 @@ const AppToCloneSelector = ({ isJobView, error, handleCloneIdChange }: AppToClon
     const onInputChange: SelectPickerProps['onInputChange'] = async (val) => {
         setInputValue(val)
         setAreOptionsLoading(true)
-        const fetchedOptions = await appListOptions(val, isJobView)
+        const fetchedOptions = await appListOptions({ inputValue: val, isJobView })
         setAreOptionsLoading(false)
         setOptions(fetchedOptions)
     }

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx

@@ -151,6 +151,7 @@ const AppComposeRouter = () => {
                         onErrorRedirectURL={lastUnlockedStage}
                         appName={currentAppName}
                         envName=""
+                        isExceptionUser={false}
                         isTemplateView={isTemplateView}
                     />
                 </Route>,
@@ -168,6 +169,7 @@ const AppComposeRouter = () => {
                         onErrorRedirectURL={lastUnlockedStage}
                         appName={currentAppName}
                         envName=""
+                        isExceptionUser={false}
                         isTemplateView={isTemplateView}
                     />
                 </Route>,
@@ -242,6 +244,10 @@ const AppComposeRouter = () => {
                         )}
                         reloadEnvironments={reloadEnvironments}
                         fetchEnvConfig={fetchEnvConfig}
+                        isExceptionUser={
+                            approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.deploymentTemplate]
+                                .isExceptionUser ?? false
+                        }
                         isTemplateView={isTemplateView}
                     />
                 </Route>
@@ -290,6 +296,10 @@ const AppComposeRouter = () => {
                         onErrorRedirectURL={lastUnlockedStage}
                         appName={currentAppName}
                         envName=""
+                        isExceptionUser={
+                            approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.configMap]
+                                .isExceptionUser
+                        }
                         isTemplateView={isTemplateView}
                     />
                 </Route>,
@@ -308,6 +318,10 @@ const AppComposeRouter = () => {
                         onErrorRedirectURL={lastUnlockedStage}
                         appName={currentAppName}
                         envName=""
+                        isExceptionUser={
+                            approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.configSecret]
+                                .isExceptionUser
+                        }
                         isTemplateView={isTemplateView}
                     />
                 </Route>,

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/CompareConfigView.tsx

@@ -15,7 +15,6 @@
  */
 
 import { importComponentFromFELibrary } from '@Components/common'
-import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
 import { ReactComponent as ICFileEdit } from '@Icons/ic-file-edit.svg'
 import { DeploymentHistoryDiffView, ErrorScreenManager } from '@devtron-labs/devtron-fe-common-lib'
 import { CompareConfigViewProps } from './types'
@@ -42,9 +41,8 @@ const CompareConfigView = ({
 }: CompareConfigViewProps) => (
     <div className={`flexbox-col ${className ?? ''}`}>
         <div className="dc__grid-half bg__primary dc__position-sticky dc__top-0 dc__zi-10">
-            <div className="dc__border-right px-12 py-6 flexbox dc__gap-8 dc__border-bottom dc__align-items-center">
-                <ICCheck className="scn-9 icon-dim-16 dc__no-shrink" />
-                <span className="cn-9 fs-12 fw-6 lh-20">Published</span>
+            <div className="dc__border-right px-12 py-6 dc__border-bottom">
+                <span className="cn-9 fs-12 fw-6 lh-20">Comparing with Published</span>
             </div>
 
             <div className="px-12 py-6 dc__gap-8 dc__border-bottom flexbox dc__align-items-center">

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx

@@ -15,6 +15,7 @@
  */
 
 import { Fragment } from 'react'
+import ReactGA from 'react-ga4'
 import {
     Button,
     ButtonStyleType,
@@ -26,6 +27,7 @@ import {
     ComponentSizeType,
     InvalidYAMLTippyWrapper,
     ToggleResolveScopedVariables,
+    Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams } from 'react-router-dom'
 import { importComponentFromFELibrary } from '@Components/common'
@@ -40,6 +42,7 @@ import SelectMergeStrategy from './SelectMergeStrategy'
 const ProtectionViewTabGroup = importComponentFromFELibrary('ProtectionViewTabGroup', null, 'function')
 const MergePatchWithTemplateCheckbox = importComponentFromFELibrary('MergePatchWithTemplateCheckbox', null, 'function')
 const ConfigApproversInfoTippy = importComponentFromFELibrary('ConfigApproversInfoTippy', null, 'function')
+const ExpressEditButton = importComponentFromFELibrary('ExpressEditButton', null, 'function')
 const ProtectConfigShowCommentsButton = importComponentFromFELibrary(
     'ProtectConfigShowCommentsButton',
     null,
@@ -114,6 +117,7 @@ const ConfigToolbar = ({
     isApprovalPolicyConfigured = false,
     isApprovalPending,
     isDraftPresent,
+    isUnpublished = false,
     draftId,
     draftVersionId,
     requestedUserId,
@@ -125,6 +129,10 @@ const ConfigToolbar = ({
     isPublishedConfigPresent = true,
     headerMessage,
     showDeleteOverrideDraftEmptyState,
+
+    isExceptionUser,
+    isExpressEditView,
+    expressEditButtonConfig,
 }: ConfigToolbarProps) => {
     const { envId } = useParams<BaseURLParams>()
     const isDisabled = disableAllActions || !!parsingError
@@ -148,9 +156,9 @@ const ConfigToolbar = ({
 
     const isEditView = !!(
         configHeaderTab === ConfigHeaderTabType.VALUES &&
-        (isApprovalPolicyConfigured && isDraftPresent
-            ? selectedProtectionViewTab === ProtectConfigTabsType.EDIT_DRAFT
-            : true)
+        (!isApprovalPolicyConfigured ||
+            !isDraftPresent ||
+            selectedProtectionViewTab === ProtectConfigTabsType.EDIT_DRAFT)
     )
 
     const showProtectedTabs =
@@ -159,7 +167,28 @@ const ConfigToolbar = ({
         configHeaderTab === ConfigHeaderTabType.VALUES &&
         !!ProtectionViewTabGroup
 
+    const hideMergeStrategy =
+        !mergeStrategy ||
+        !envId ||
+        showDeleteOverrideDraftEmptyState ||
+        (!isEditView && !(isPublishedValuesView && !!isPublishedConfigPresent))
+
+    const showExpressEditButton =
+        !!ExpressEditButton && isExceptionUser && !isExpressEditView && isEditView && !showDeleteOverrideDraftEmptyState
+
     const getLHSActionNodes = (): JSX.Element => {
+        if (isExpressEditView) {
+            return (
+                <>
+                    <div className="flex dc__gap-6">
+                        <Icon name="ic-pencil" color="N700" />
+                        <p className="m-0 fs-12 lh-18 cn-9">Editing Published</p>
+                    </div>
+                    {(children || !hideMergeStrategy) && <div className="divider__secondary" />}
+                </>
+            )
+        }
+
         if (configHeaderTab === ConfigHeaderTabType.INHERITED) {
             return (
                 <div className="flexbox dc__align-items-center dc__gap-6">
@@ -186,6 +215,7 @@ const ConfigToolbar = ({
                                     selectedTab={selectedProtectionViewTab}
                                     handleProtectionViewTabChange={handleProtectionViewTabChange}
                                     isApprovalPending={isApprovalPending}
+                                    hasPublishedConfig={isPublishedConfigPresent}
                                     isDisabled={isDisabled}
                                     parsingError={parsingError}
                                     restoreLastSavedYAML={restoreLastSavedYAML}
@@ -224,7 +254,7 @@ const ConfigToolbar = ({
         const shouldRenderCommentsView = !!isDraftPresent
         const hasNothingToRender = !shouldRenderApproverInfoTippy && !shouldRenderCommentsView
 
-        if (!isApprovalPolicyConfigured || hasNothingToRender) {
+        if (!isApprovalPolicyConfigured || hasNothingToRender || isExpressEditView) {
             return null
         }
 
@@ -293,12 +323,7 @@ const ConfigToolbar = ({
     }
 
     const renderSelectMergeStrategy = () => {
-        if (
-            !mergeStrategy ||
-            !envId ||
-            showDeleteOverrideDraftEmptyState ||
-            (!isEditView && !(isPublishedValuesView && !!isPublishedConfigPresent))
-        ) {
+        if (hideMergeStrategy) {
             return null
         }
 
@@ -391,11 +416,28 @@ const ConfigToolbar = ({
                 {renderSelectMergeStrategy()}
             </div>
 
-            {isPublishedValuesView && !isPublishedConfigPresent ? null : (
+            {(showExpressEditButton || !isPublishedValuesView || isPublishedConfigPresent) && (
                 <div className="flexbox dc__align-items-center dc__gap-8">
-                    {renderProtectedConfigActions()}
-                    {renderReadmeAndScopedVariablesBlock()}
-                    {renderPopupMenu()}
+                    {showExpressEditButton && (
+                        <ExpressEditButton
+                            disabled={isUnpublished}
+                            {...(expressEditButtonConfig ?? {})}
+                            onClick={() => {
+                                ReactGA.event({
+                                    category: 'APP_EXPRESS_EDIT_ACCESSED',
+                                    action: 'APP_EXPRESS_EDIT_ACCESSED',
+                                })
+                                expressEditButtonConfig?.onClick?.()
+                            }}
+                        />
+                    )}
+                    {isPublishedValuesView && !isPublishedConfigPresent ? null : (
+                        <>
+                            {renderProtectedConfigActions()}
+                            {renderReadmeAndScopedVariablesBlock()}
+                            {renderPopupMenu()}
+                        </>
+                    )}
                 </div>
             )}
         </div>