feat: DeploymentConfigDiff - Scope Variables Support & code refactor

RohitRaj011 · RohitRaj011 · commit cb4a62a964a3 · 2024-09-19T11:51:47.000+05:30
diff --git a/src/Common/Helper.tsx b/src/Common/Helper.tsx
@@ -1047,3 +1047,19 @@ export function asyncWrap(promise): any[] {
 }
 
 export const prefixZeroIfSingleDigit = (value: number = 0) => (value > 0 && value < 10 ? `0${value}` : value)
+
+export const throttle = <T extends (...args: unknown[]) => unknown>(
+    func: T,
+    delay: number = 300,
+): ((...args: Parameters<T>) => void) => {
+    let lastCall = 0
+
+    return (...args: Parameters<T>) => {
+        const now = Date.now()
+
+        if (now - lastCall >= delay) {
+            lastCall = now
+            func(...args)
+        }
+    }
+}
diff --git a/src/Common/Toggle/Toggle.tsx b/src/Common/Toggle/Toggle.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React from 'react'
-import { useEffectAfterMount } from '../Helper'
+import React, { useCallback } from 'react'
+import { throttle, useEffectAfterMount } from '../Helper'
 import './Toggle.scss'
 
 const Toggle = ({
@@ -27,6 +27,7 @@ const Toggle = ({
     dataTestId = 'handle-toggle-button',
     Icon = null,
     iconClass = '',
+    throttleOnChange = false,
     ...props
 }) => {
     const [active, setActive] = React.useState(selected)
@@ -49,13 +50,20 @@ const Toggle = ({
         }
     }
 
+    const throttledHandleClick = useCallback(throttle(handleClick, 500), [])
+
     return (
         <label
             {...props}
             className={`${rootClassName} toggle__switch ${disabled ? 'disabled' : ''}`}
             style={{ ['--color' as any]: color }}
         >
-            <input type="checkbox" checked={!!active} onChange={handleClick} className="toggle__input" />
+            <input
+                type="checkbox"
+                checked={!!active}
+                onChange={throttleOnChange ? throttledHandleClick : handleClick}
+                className="toggle__input"
+            />
             <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
                 {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
             </span>
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -80,6 +80,10 @@ export interface DeploymentConfigDiffProps {
         activeTab: string
         onClick: (tab: string) => void
     }
+    scopeVariablesConfig?: {
+        convertVariables: boolean
+        onConvertVariablesClick: () => void
+    }
 }
 
 export interface DeploymentConfigDiffNavigationProps
@@ -98,6 +102,7 @@ export interface DeploymentConfigDiffMainProps
         | 'scrollIntoViewId'
         | 'selectorsConfig'
         | 'sortingConfig'
+        | 'scopeVariablesConfig'
     > {}
 
 export interface DeploymentConfigDiffAccordionProps extends Pick<CollapseProps, 'onTransitionEnd'> {
@@ -126,4 +131,7 @@ export type AppEnvDeploymentConfigListParams<IsManifestView> = (IsManifestView e
       }) & {
     getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
     isManifestView?: IsManifestView
+    convertVariables?: boolean
+    currentDeploymentTemplateResolvedData?: AppEnvDeploymentConfigDTO
+    compareDeploymentTemplateResolvedData?: AppEnvDeploymentConfigDTO
 }
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -367,16 +367,46 @@ const getDiffHeading = <DeploymentTemplate extends boolean>(
     )
 }
 
+const getConfigMapSecretResolvedValues = (configMapSecretData: ConfigMapSecretDataDTO, convertVariables: boolean) => {
+    const resolvedData: ConfigMapSecretDataConfigDatumDTO[] =
+        ((convertVariables && JSON.parse(configMapSecretData?.resolvedValue || null)) || configMapSecretData?.data)
+            ?.configData || []
+
+    const data =
+        (convertVariables &&
+            resolvedData.map((item, index) => {
+                if (configMapSecretData.data.configData[index].draftMetadata) {
+                    const resolvedDraftData =
+                        configMapSecretData.data.configData[index].draftMetadata.draftResolvedValue ||
+                        configMapSecretData.data.configData[index].draftMetadata.data
+
+                    return {
+                        ...configMapSecretData.data.configData[index],
+                        draftMetadata: {
+                            ...configMapSecretData.data.configData[index].draftMetadata,
+                            data: resolvedDraftData,
+                        },
+                    }
+                }
+
+                return item
+            })) ||
+        resolvedData
+
+    return data
+}
+
 const getConfigMapSecretData = (
     compareToList: ConfigMapSecretDataDTO,
     compareWithList: ConfigMapSecretDataDTO,
     resourceType: ConfigResourceType,
     compareToIsAdmin: boolean,
     compareWithIsAdmin: boolean,
+    convertVariables: boolean,
 ) => {
     const combinedList = mergeConfigDataArraysByName(
-        compareToList?.data.configData || [],
-        compareWithList?.data.configData || [],
+        getConfigMapSecretResolvedValues(compareToList, convertVariables),
+        getConfigMapSecretResolvedValues(compareWithList, convertVariables),
     )
 
     const deploymentConfig = combinedList.map(([currentItem, compareItem]) => {
@@ -407,6 +437,21 @@ const getConfigMapSecretData = (
     return deploymentConfig
 }
 
+const getConfigDataWithResolvedDeploymentTemplate = (
+    data: AppEnvDeploymentConfigListParams<false>['currentList'],
+    resolvedData: AppEnvDeploymentConfigListParams<false>['currentDeploymentTemplateResolvedData'],
+) =>
+    data && resolvedData?.deploymentTemplate
+        ? {
+              ...data,
+              deploymentTemplate: {
+                  ...data.deploymentTemplate,
+                  deploymentDraftData: null,
+                  data: resolvedData.deploymentTemplate.resolvedValue,
+              },
+          }
+        : data
+
 /**
  * Generates a list of deployment configurations for application environments and identifies changes between the current and compare lists.
  *
@@ -425,14 +470,23 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
     getNavItemHref,
     isManifestView,
     sortOrder,
+    convertVariables = false,
+    currentDeploymentTemplateResolvedData,
+    compareDeploymentTemplateResolvedData,
 }: AppEnvDeploymentConfigListParams<ManifestView>): {
     configList: DeploymentConfigDiffProps['configList']
     navList: DeploymentConfigDiffProps['navList']
     collapsibleNavList: DeploymentConfigDiffProps['collapsibleNavList']
 } => {
     if (!isManifestView) {
-        const _currentList = currentList as AppEnvDeploymentConfigListParams<false>['currentList']
-        const _compareList = compareList as AppEnvDeploymentConfigListParams<false>['compareList']
+        const _currentList = getConfigDataWithResolvedDeploymentTemplate(
+            currentList as AppEnvDeploymentConfigListParams<false>['currentList'],
+            currentDeploymentTemplateResolvedData,
+        )
+        const _compareList = getConfigDataWithResolvedDeploymentTemplate(
+            compareList as AppEnvDeploymentConfigListParams<false>['compareList'],
+            compareDeploymentTemplateResolvedData,
+        )
         const currentDeploymentData = getDeploymentTemplateDiffViewData(_currentList.deploymentTemplate, sortOrder)
         const compareDeploymentData = getDeploymentTemplateDiffViewData(_compareList.deploymentTemplate, sortOrder)
 
@@ -457,6 +511,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
             ConfigResourceType.ConfigMap,
             _currentList.isAppAdmin,
             _compareList.isAppAdmin,
+            convertVariables,
         )
 
         const secretData = getConfigMapSecretData(
@@ -465,6 +520,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
             ConfigResourceType.Secret,
             _currentList.isAppAdmin,
             _compareList.isAppAdmin,
+            convertVariables,
         )
 
         const configList: DeploymentConfigDiffProps['configList'] = [deploymentTemplateData, ...cmData, ...secretData]
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -1,12 +1,17 @@
 import { Fragment, TransitionEvent, useEffect, useState } from 'react'
+import Tippy from '@tippyjs/react'
 
 import { ReactComponent as ICSortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
 import { ReactComponent as ICSort } from '@Icons/ic-arrow-up-down.svg'
+import { ReactComponent as ICViewVariableToggle } from '@Icons/ic-view-variable-toggle.svg'
 import { Progressing } from '@Common/Progressing'
 import { CodeEditor } from '@Common/CodeEditor'
 import { MODES, SortingOrder } from '@Common/Constants'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
+import Toggle from '@Common/Toggle/Toggle'
+import { ComponentSizeType } from '@Shared/constants'
 
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { SelectPicker } from '../SelectPicker'
 import { DeploymentHistoryDiffView } from '../CICDHistory'
 import { DeploymentConfigDiffAccordion } from './DeploymentConfigDiffAccordion'
@@ -20,6 +25,7 @@ export const DeploymentConfigDiffMain = ({
     selectorsConfig,
     sortingConfig,
     scrollIntoViewId,
+    scopeVariablesConfig,
 }: DeploymentConfigDiffMainProps) => {
     // STATES
     const [expandedView, setExpandedView] = useState<Record<string | number, boolean>>({})
@@ -94,26 +100,55 @@ export const DeploymentConfigDiffMain = ({
             const { handleSorting, sortBy, sortOrder } = sortingConfig
 
             return (
-                <div className="dc__border-left p-12 h-100">
-                    <button
-                        type="button"
-                        className={`dc__unset-button-styles flexbox dc__align-items-center dc__gap-6 ${isLoading ? 'dc__disabled' : ''}`}
-                        onClick={handleSorting}
-                        disabled={isLoading}
-                    >
-                        {sortBy ? (
+                <Button
+                    dataTestId="config-diff-sort-button"
+                    text="Sort keys"
+                    variant={ButtonVariantType.borderLess}
+                    style={ButtonStyleType.neutral}
+                    size={ComponentSizeType.small}
+                    startIcon={
+                        sortBy ? (
                             <ICSortArrowDown
-                                className="fcn-7 rotate"
+                                className="rotate"
                                 style={{
                                     ['--rotateBy' as string]: sortOrder === SortingOrder.ASC ? '0deg' : '180deg',
                                 }}
                             />
                         ) : (
-                            <ICSort className="icon-dim-12 mw-12 scn-7" />
-                        )}
-                        <span className="cn-7 fs-13 lh-20 fw-6">Sort keys</span>
-                    </button>
-                </div>
+                            <ICSort />
+                        )
+                    }
+                    onClick={handleSorting}
+                    disabled={isLoading}
+                />
+            )
+        }
+
+        return null
+    }
+
+    const renderScopeVariablesButton = () => {
+        if (scopeVariablesConfig) {
+            const { convertVariables } = scopeVariablesConfig
+
+            return (
+                <Tippy
+                    content={convertVariables ? 'Hide variables values' : 'Show variables values'}
+                    placement="bottom-start"
+                    animation="shift-away"
+                    className="default-tt"
+                    arrow={false}
+                >
+                    <div className="w-40 h-20">
+                        <Toggle
+                            selected={scopeVariablesConfig.convertVariables}
+                            color="var(--V500)"
+                            onSelect={scopeVariablesConfig.onConvertVariablesClick}
+                            Icon={ICViewVariableToggle}
+                            throttleOnChange
+                        />
+                    </div>
+                </Tippy>
             )
         }
 
@@ -142,7 +177,7 @@ export const DeploymentConfigDiffMain = ({
                                 <div className="px-12 py-6">{secondaryHeading}</div>
                             </div>
                             <CodeEditor
-                                key={sortingConfig?.sortOrder}
+                                key={`${sortingConfig?.sortOrder}-${scopeVariablesConfig?.convertVariables}`}
                                 diffView
                                 defaultValue={primaryList.codeEditorValue.value}
                                 value={secondaryList.codeEditorValue.value}
@@ -184,7 +219,12 @@ export const DeploymentConfigDiffMain = ({
                     <div className="flex-grow-1 flexbox dc__align-items-center dc__gap-8 p-12">
                         {renderHeaderSelectors(selectorsConfig.secondaryConfig)}
                     </div>
-                    {renderSortButton()}
+                    {(sortingConfig || scopeVariablesConfig) && (
+                        <div className="dc__border-left flex dc__gap-8 pr-12 pl-8 py-8">
+                            {renderSortButton()}
+                            {renderScopeVariablesButton()}
+                        </div>
+                    )}
                 </div>
             </div>
             <div className="deployment-config-diff__main-content dc__overflow-y-auto">
diff --git a/src/Shared/Services/app.service.ts b/src/Shared/Services/app.service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ROUTES, ResponseType, get, getUrlWithSearchParams, showError } from '../../Common'
+import { ROUTES, ResponseType, get, getUrlWithSearchParams, post, showError } from '../../Common'
 import {
     CIMaterialInfoDTO,
     CIMaterialInfoType,
@@ -55,8 +55,13 @@ export const getArtifactInfo = async (
     }
 }
 
-export const getAppEnvDeploymentConfig = (
-    params: AppEnvDeploymentConfigPayloadType,
-    signal?: AbortSignal,
-): Promise<ResponseType<AppEnvDeploymentConfigDTO>> =>
-    get(getUrlWithSearchParams(ROUTES.CONFIG_DATA, params), { signal })
+export const getAppEnvDeploymentConfig = ({
+    params,
+    payload,
+    signal,
+}: {
+    params: AppEnvDeploymentConfigPayloadType
+    payload?: { values: string }
+    signal?: AbortSignal
+}): Promise<ResponseType<AppEnvDeploymentConfigDTO>> =>
+    post(getUrlWithSearchParams(ROUTES.CONFIG_DATA, params), payload, { signal })
diff --git a/src/Shared/Services/app.types.ts b/src/Shared/Services/app.types.ts
