Merge pull request #1534 from devtron-labs/feat/lock-config-diff-modal

feat: Diff modal for base deployment and deployment template

Author: mukultayal135

package.json

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

src/components/ApplicationGroup/AppGroup.types.ts

@@ -276,6 +276,7 @@ export interface AppGroupDetailDefaultType {
     description?: string
     getAppListData?: () => Promise<void>
     handleSaveDescription?: (description: string) => Promise<void>
+    isSuperAdmin?: boolean
 }
 
 interface CIPipeline {

src/components/ApplicationGroup/AppGroupDetailsRoute.tsx

@@ -394,7 +394,7 @@ export default function AppGroupDetailsRoute({ isSuperAdmin }: AppGroupAdminType
                                 <EnvCDDetails filteredAppIds={_filteredAppsIds} />
                             </Route>
                             <Route path={`${path}/${URLS.APP_CONFIG}/:appId(\\d+)?`}>
-                                <EnvConfig filteredAppIds={_filteredAppsIds} envName={envName} />
+                                <EnvConfig filteredAppIds={_filteredAppsIds} envName={envName} isSuperAdmin={isSuperAdmin}/>
                             </Route>
                             <Redirect to={`${path}/${URLS.APP_OVERVIEW}`} />
                         </Switch>

src/components/ApplicationGroup/Details/EnvironmentConfig/EnvConfig.tsx

@@ -9,7 +9,7 @@ import ApplicationRoute from './ApplicationRoutes'
 
 const getEnvConfigProtections = importComponentFromFELibrary('getEnvConfigProtections', null, 'function')
 
-export default function EnvConfig({ filteredAppIds, envName }: AppGroupDetailDefaultType) {
+export default function EnvConfig({ filteredAppIds, envName ,isSuperAdmin}: AppGroupDetailDefaultType) {
     const { envId, appId } = useParams<{ envId: string; appId: string }>()
     const { url } = useRouteMatch()
     const history = useHistory()
@@ -71,7 +71,13 @@ export default function EnvConfig({ filteredAppIds, envName }: AppGroupDetailDef
                 </div>
             </div>
             <div className="env-compose__main">
-                <EnvironmentOverride appList={envAppList} environments={[]} reloadEnvironments={noop} envName={envName}/>
+                <EnvironmentOverride
+                    appList={envAppList}
+                    environments={[]}
+                    reloadEnvironments={noop}
+                    envName={envName}
+                    isSuperAdmin={isSuperAdmin}
+                />
             </div>
         </div>
     )

src/components/CodeEditor/CodeEditor.tsx

@@ -1,7 +1,15 @@
 import React, { useEffect, useCallback, useReducer, useRef } from 'react'
 import MonacoEditor, { MonacoDiffEditor } from 'react-monaco-editor';
 import { useJsonYaml, Select, RadioGroup, useWindowSize } from '../common'
-import { Progressing, copyToClipboard } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    CodeEditorComposition,
+    CodeEditorHeaderComposition,
+    CodeEditorHeaderInterface,
+    CodeEditorInterface,
+    InformationBarProps,
+    Progressing,
+    copyToClipboard,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ClipboardIcon } from '../../assets/icons/ic-copy.svg';
 import { ReactComponent as Info } from '../../assets/icons/ic-info-filled.svg';
 import { ReactComponent as ErrorIcon } from '../../assets/icons/ic-error-exclamation.svg';
@@ -36,61 +44,6 @@ window.MonacoEnvironment = {
 // @ts-ignore
 const { yaml } = monaco.languages || {};
 
-
-interface InformationBarProps { text: string; className?: string; children?: React.ReactNode }
-
-interface CodeEditorInterface {
-    value?: string;
-    lineDecorationsWidth?: number;
-    responseType?: string;
-    onChange?: (string) => void;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    children?: any;
-    defaultValue?: string;
-    mode?: 'json' | 'yaml' | 'shell' | 'dockerfile';
-    tabSize?: number;
-    readOnly?: boolean;
-    noParsing?: boolean;
-    minHeight?: number;
-    maxHeight?: number;
-    inline?: boolean;
-    height?: number | string;
-    shebang?: string | JSX.Element;
-    diffView?: boolean;
-    loading?: boolean;
-    customLoader?: JSX.Element;
-    theme?: string;
-    original?: string;
-    focus?: boolean;
-    validatorSchema?: any;
-    isKubernetes?: boolean;
-    cleanData?: boolean;
-    chartVersion?: any; 
-}
-
-interface CodeEditorHeaderInterface {
-    children?: any;
-    className?: string
-    hideDefaultSplitHeader?: boolean;
-}
-interface CodeEditorComposition {
-    Header?: React.FC<any>;
-    LanguageChanger?: React.FC<any>;
-    ThemeChanger?: React.FC<any>;
-    ValidationError?: React.FC<any>;
-    Clipboard?: React.FC<any>;
-    Warning?: React.FC<InformationBarProps>;
-    ErrorBar?: React.FC<InformationBarProps>;
-    Information?: React.FC<InformationBarProps>
-}
-interface CodeEditorHeaderComposition {
-    LanguageChanger?: React.FC<any>;
-    ThemeChanger?: React.FC<any>;
-    ValidationError?: React.FC<any>;
-    Clipboard?: React.FC<any>;
-}
-
 const CodeEditorContext = React.createContext(null)
 
 function useCodeEditorContext() {

src/components/ConfigMapSecret/ConfigMapSecretForm.tsx

@@ -1101,6 +1101,7 @@ export const ConfigMapSecretForm = React.memo(
                         toggleModal={toggleDraftSaveModal}
                         latestDraft={latestDraftData}
                         reload={reloadData}
+                        showAsModal={true}
                     />
                 )}
             </>

src/components/EnvironmentOverride/DeploymentTemplateOverride.tsx

@@ -37,6 +37,7 @@ export default function DeploymentTemplateOverride({
     environmentName,
     isProtected,
     reloadEnvironments,
+    isSuperAdmin
 }: DeploymentTemplateOverrideProps) {
     const { currentServerInfo } = useContext(mainContext)
     const { appId, envId } = useParams<{ appId; envId }>()
@@ -501,6 +502,7 @@ export default function DeploymentTemplateOverride({
                         setManifestDataRHS={setManifestDataRHSOverride}
                         setManifestDataLHS={setManifestDataLHSOverride}
                         convertVariablesOverride={state.convertVariablesOverride}
+                        isSuperAdmin={isSuperAdmin}
                     />
                 )}
             </div>