Merge pull request #336 from devtron-labs/feat/cm-secret-merge-strategy

feat: Revamp ConfigMap Secret UI - Various Improvements

Author: AbhishekA1509

src/Assets/Icon/ic-warning-y5.svg

@@ -21,9 +21,9 @@ import ReactGA from 'react-ga4'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
 import { configureMonacoYaml } from 'monaco-yaml'
 
+import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ReactComponent as Info } from '../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as ErrorIcon } from '../../Assets/Icon/ic-error-exclamation.svg'
-import { ReactComponent as WarningIcon } from '../../Assets/Icon/ic-warning.svg'
 import './codeEditor.scss'
 import 'monaco-editor'
 
@@ -459,7 +459,7 @@ const ValidationError = () => {
 
 const Warning: React.FC<InformationBarProps> = (props) => (
     <div className={`code-editor__warning ${props.className || ''}`}>
-        <WarningIcon className="code-editor__information-info-icon" />
+        <ICWarningY5 className="code-editor__information-info-icon" />
         {props.text}
         {props.children}
     </div>
@@ -483,7 +483,7 @@ const Information: React.FC<InformationBarProps> = (props) => (
 
 const Clipboard = () => {
     const { state } = useCodeEditorContext()
-    return <ClipboardButton content={state.code} rootClassName="bcn-1" iconSize={20} />
+    return <ClipboardButton content={state.code} iconSize={16} />
 }
 
 const SplitPane = ({}) => {

src/Common/CodeEditor/CodeEditor.tsx

@@ -105,18 +105,6 @@
     min-height: 300px;
 }
 
-.code-editor__warning {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 1.33;
-    letter-spacing: normal;
-    color: var(--Y700);
-    height: auto;
-    padding: 8px 16px;
-    border-bottom: 1px solid #d6dbdf;
-    background-color: var(--Y100);
-}
-
 .code-editor__information {
     font-size: 12px;
     font-weight: 400;

src/Common/CodeEditor/codeEditor.scss

@@ -26,8 +26,8 @@ const DTApplicationMetricsFormField = ({
         return (
             <div className="flexbox dc__align-items-center dc__gap-8 fs-13 fw-4 lh-20 cn-9">
                 <ICInfoFilledOverride className="icon-dim-16 dc__no-shrink" />
-                <div className="flexbox">
-                    <span>Application metrics are</span>&nbsp;
+                <div className="flexbox dc__gap-6">
+                    <span>Application metrics are</span>
                     <span className="fw-6">{isAppMetricsEnabled ? 'Enabled' : 'Not enabled'}</span>
                 </div>
             </div>
@@ -48,7 +48,7 @@ const DTApplicationMetricsFormField = ({
             <InvalidYAMLTippyWrapper parsingError={parsingError} restoreLastSavedYAML={restoreLastSavedYAML}>
                 <div>
                     <Checkbox
-                        rootClassName={`mb-0 dc__align-start ${!selectedChart.isAppMetricsSupported ? 'dc__disabled' : ''}`}
+                        rootClassName={`mb-0 dc__align-items-center ${!selectedChart.isAppMetricsSupported ? 'dc__disabled' : ''}`}
                         isChecked={isAppMetricsEnabled}
                         value={CHECKBOX_VALUE.CHECKED}
                         onChange={toggleAppMetrics}
@@ -64,14 +64,14 @@ const DTApplicationMetricsFormField = ({
                 </div>
             </InvalidYAMLTippyWrapper>
 
-            <div className={`flexbox ${selectedChart.isAppMetricsSupported ? 'pl-8' : ''}`}>
+            <div className="flexbox dc__gap-6 pl-6 dc__align-items-center">
                 {!selectedChart.isAppMetricsSupported && (
                     <Tooltip
                         alwaysShowTippyOnHover
                         content={`Application metrics is not supported for ${selectedChart.name} version ${selectedChart.version}.`}
                     >
                         <span className="cr-5 fs-13 fw-4 lh-20 dc__border-bottom-dashed--n3 dc__no-shrink">
-                            &nbsp;Not supported &nbsp;
+                            Not supported
                         </span>
                     </Tooltip>
                 )}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/DTApplicationMetricsFormField.tsx

@@ -12,6 +12,7 @@ import {
     ResolvedDeploymentTemplateDTO,
     ValuesAndManifestFlagDTO,
 } from './types'
+import { GET_RESOLVED_DEPLOYMENT_TEMPLATE_EMPTY_RESPONSE } from './constants'
 
 export const getDeploymentManifest = async (
     params: GetDeploymentManifestProps,
@@ -34,14 +35,17 @@ export const getDeploymentManifest = async (
 
 export const getResolvedDeploymentTemplate = async (
     params: GetResolvedDeploymentTemplateProps,
+    signal?: AbortSignal,
 ): Promise<GetResolvedDeploymentTemplateReturnType> => {
     try {
         const payload: GetResolvedDeploymentTemplatePayloadType = {
             ...params,
             valuesAndManifestFlag: ValuesAndManifestFlagDTO.DEPLOYMENT_TEMPLATE,
         }
 
-        const { result } = await post<ResolvedDeploymentTemplateDTO>(ROUTES.APP_TEMPLATE_DATA, payload)
+        const { result } = await post<ResolvedDeploymentTemplateDTO>(ROUTES.APP_TEMPLATE_DATA, payload, {
+            signal,
+        })
         const areVariablesPresent = Object.keys(result.variableSnapshot || {}).length > 0
 
         const parsedData = YAML.parse(result.data)
@@ -53,7 +57,10 @@ export const getResolvedDeploymentTemplate = async (
             areVariablesPresent,
         }
     } catch (error) {
-        showError(error)
-        throw error
+        if (!getIsRequestAborted(error)) {
+            showError(error)
+            throw error
+        }
+        return GET_RESOLVED_DEPLOYMENT_TEMPLATE_EMPTY_RESPONSE
     }
 }

src/Pages/Applications/DevtronApps/Details/AppConfigurations/DeploymentTemplate/service.ts

@@ -23,6 +23,7 @@ export interface ConfigToolbarPopupMenuConfigType {
     dataTestId: string
     disabled?: boolean
     icon?: ReactNode | null
+    variant?: 'default' | 'negative'
 }
 
 export enum ConfigToolbarPopupNodeType {

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

@@ -35,9 +35,10 @@ const DeploymentHistoryDiffView = ({
     isDeleteDraft,
     rootClassName,
     comparisonBodyClassName,
-    sortOrder = null,
+    sortingConfig,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
+    const { sortBy, sortOrder } = sortingConfig ?? { sortBy: '', sortOrder: null }
 
     const [convertVariables, setConvertVariables] = useState(false)
 
@@ -66,7 +67,7 @@ const DeploymentHistoryDiffView = ({
             : baseTemplateConfiguration?.codeEditorValue?.value
 
         return YAMLStringify(JSON.parse(editorValue), {
-            sortMapEntries: (a, b) => yamlComparatorBySortOrder(a, b, sortOrder),
+            sortMapEntries: sortBy ? (a, b) => yamlComparatorBySortOrder(a, b, sortOrder) : null,
         })
     }, [convertVariables, baseTemplateConfiguration, sortOrder, isDeleteDraft])
 
@@ -86,6 +87,8 @@ const DeploymentHistoryDiffView = ({
 
     const renderDeploymentDiffViaCodeEditor = () => (
         <CodeEditor
+            // TODO: Add key from prop
+            key={`${sortBy}-${sortOrder}`}
             value={editorValuesRHS}
             defaultValue={editorValuesLHS}
             adjustEditorHeightToContent

src/Shared/Components/CICDHistory/DeploymentHistoryDiff/DeploymentHistoryDiffView.tsx

@@ -490,7 +490,10 @@ export interface DeploymentTemplateHistoryType {
     isDeleteDraft?: boolean
     rootClassName?: string
     comparisonBodyClassName?: string
-    sortOrder?: SortingOrder
+    sortingConfig?: {
+        sortBy: string
+        sortOrder: SortingOrder
+    }
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail

src/Shared/Components/CICDHistory/types.tsx

@@ -161,7 +161,7 @@ export const DeploymentConfigDiffMain = ({
                                 previousConfigAvailable
                                 rootClassName="m-0 dc__no-top-radius dc__no-top-border"
                                 comparisonBodyClassName="deployment-config-diff__main-content__comparison"
-                                sortOrder={sortingConfig?.sortOrder}
+                                sortingConfig={sortingConfig}
                             />
                         </div>
                     )}

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -26,7 +26,7 @@ const InfoIconTippy = ({
     documentationLink,
     documentationLinkText,
     additionalContent,
-    iconClassName = 'icon-dim-16',
+    iconClassName = 'icon-dim-16 dc__no-shrink',
     placement = 'bottom',
     dataTestid = 'info-tippy-button',
     children,
@@ -49,7 +49,7 @@ const InfoIconTippy = ({
         {children || (
             <button
                 type="button"
-                className="p-0 dc__no-background dc__no-border dc__outline-none-imp flex dc__tab-focus"
+                className="p-0 dc__no-background dc__no-border dc__outline-none-imp flex dc__tab-focus dc__no-shrink"
                 aria-label="Info Icon"
                 data-testid={dataTestid}
             >