Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/theming-v2

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.4.9",
+    "version": "1.5.1",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -134,7 +134,7 @@ export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps<any, RJSFFor
                     schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
                         ? 'dc__border-left pl-12'
                         : ''
-                } flexbox-col dc__gap-8`}
+                } ${idSchema.$id === 'root' ? 'dc__separated-flexbox dc__separated-flexbox--vertical' : 'flexbox-col dc__gap-8'}`}
             >
                 <Field {...props} />
             </div>

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -23,7 +23,7 @@ export const TitleField = ({
     required,
     description,
 }: TitleFieldProps & Partial<Record<'description', string>>) => (
-    <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border py-9 mb-0" id={id}>
+    <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border pb-9 mb-0" id={id}>
         <Tooltip alwaysShowTippyOnHover={!!description} content={description}>
             <span className={`${description ? 'text-underline-dashed-300' : ''}`}>{title}</span>
         </Tooltip>

src/Common/RJSF/templates/TitleField.tsx

@@ -47,9 +47,10 @@ export const DeploymentHistoryConfigDiff = ({
     const isPreviousDeploymentConfigAvailable = !!previousWfrId
 
     // URL FILTERS
-    const { compareWfrId } = useUrlFilters<string, DeploymentHistoryConfigDiffQueryParams>({
+    const urlFilters = useUrlFilters<string, DeploymentHistoryConfigDiffQueryParams>({
         parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
     })
+    const { compareWfrId, sortBy, sortOrder } = urlFilters
 
     // STATES
     const [convertVariables, setConvertVariables] = useState(false)
@@ -125,12 +126,20 @@ export const DeploymentHistoryConfigDiff = ({
                 compareList,
                 getNavItemHref,
                 convertVariables,
+                sortingConfig: { sortBy, sortOrder },
             })
             return configData
         }
 
         return null
-    }, [isPreviousDeploymentConfigAvailable, compareDeploymentConfigLoader, compareDeploymentConfig, convertVariables])
+    }, [
+        isPreviousDeploymentConfigAvailable,
+        compareDeploymentConfigLoader,
+        compareDeploymentConfig,
+        convertVariables,
+        sortBy,
+        sortOrder,
+    ])
 
     const compareDeploymentConfigErr = useMemo(
         () =>
@@ -180,7 +189,7 @@ export const DeploymentHistoryConfigDiff = ({
                     errorConfig={errorConfig}
                     envName={envName}
                     wfrId={wfrId}
-                    previousWfrId={previousWfrId}
+                    urlFilters={urlFilters}
                     pipelineDeployments={pipelineDeployments}
                     setFullScreenView={setFullScreenView}
                     convertVariables={convertVariables}

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx

@@ -1,9 +1,12 @@
 import { useEffect, useState } from 'react'
 import { generatePath, useRouteMatch } from 'react-router-dom'
 
-import { DeploymentConfigDiff, DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
+import {
+    DEPLOYMENT_CONFIG_DIFF_SORT_KEY,
+    DeploymentConfigDiff,
+    DeploymentConfigDiffProps,
+} from '@Shared/Components/DeploymentConfigDiff'
 import { DEFAULT_BASE_PAGE_SIZE, SortingOrder } from '@Common/Constants'
-import { useUrlFilters } from '@Common/Hooks'
 import {
     getSelectPickerOptionByValue,
     SelectPickerOptionType,
@@ -12,20 +15,16 @@ import {
 import { ComponentSizeType } from '@Shared/constants'
 import { Button, ButtonVariantType } from '@Shared/Components/Button'
 
-import {
-    DeploymentHistoryDiffDetailedProps,
-    DeploymentHistoryConfigDiffQueryParams,
-    DeploymentHistoryConfigDiffRouteParams,
-} from './types'
-import { getPipelineDeployments, getPipelineDeploymentsOptions, parseDeploymentHistoryDiffSearchParams } from './utils'
+import { DeploymentHistoryDiffDetailedProps, DeploymentHistoryConfigDiffRouteParams } from './types'
+import { getPipelineDeployments, getPipelineDeploymentsOptions } from './utils'
 import { getTriggerHistory } from '../service'
 
 export const DeploymentHistoryConfigDiffCompare = ({
     envName,
     setFullScreenView,
     pipelineDeployments: initialPipelineDeployments,
     wfrId,
-    previousWfrId,
+    urlFilters,
     convertVariables,
     setConvertVariables,
     triggerHistory: initialTriggerHistory,
@@ -39,12 +38,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
     const { resourceType, resourceName, appId, envId } = params
 
     // URL FILTERS
-    const { compareWfrId, updateSearchParams, sortBy, sortOrder, handleSorting } = useUrlFilters<
-        string,
-        DeploymentHistoryConfigDiffQueryParams
-    >({
-        parseSearchParams: parseDeploymentHistoryDiffSearchParams(previousWfrId),
-    })
+    const { compareWfrId, updateSearchParams, sortBy, sortOrder, handleSorting } = urlFilters
 
     // STATES
     const [triggerHistory, setTriggerHistory] = useState({
@@ -59,6 +53,8 @@ export const DeploymentHistoryConfigDiffCompare = ({
         updateSearchParams({ compareWfrId })
         // Set fullscreen for comparing deployment history config
         setFullScreenView(true)
+        // Set default initial sorting
+        handleSorting(DEPLOYMENT_CONFIG_DIFF_SORT_KEY)
 
         return () => {
             setConvertVariables(false)
@@ -170,7 +166,7 @@ export const DeploymentHistoryConfigDiffCompare = ({
         return null
     }
 
-    const onSorting = () => handleSorting(sortOrder !== SortingOrder.DESC ? 'sort-config' : '')
+    const onSorting = () => handleSorting(sortOrder !== SortingOrder.DESC ? DEPLOYMENT_CONFIG_DIFF_SORT_KEY : '')
 
     const sortingConfig: DeploymentConfigDiffProps['sortingConfig'] = {
         handleSorting: onSorting,

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiffCompare.tsx

@@ -17,7 +17,6 @@
 import { useParams } from 'react-router-dom'
 import { useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
-import { yamlComparatorBySortOrder } from '@Shared/Helpers'
 import { DiffViewer } from '@Shared/Components/DiffViewer'
 import { renderDiffViewNoDifferenceState } from '@Shared/Components/DeploymentConfigDiff'
 import { MODES, Toggle, YAMLStringify } from '../../../../Common'
@@ -34,11 +33,9 @@ const DeploymentHistoryDiffView = ({
     baseTemplateConfiguration,
     previousConfigAvailable,
     rootClassName,
-    sortingConfig,
     codeEditorKey,
 }: DeploymentTemplateHistoryType) => {
     const { historyComponent, historyComponentName } = useParams<DeploymentHistoryParamsType>()
-    const { sortBy, sortOrder } = sortingConfig ?? { sortBy: '', sortOrder: null }
 
     const [convertVariables, setConvertVariables] = useState(false)
 
@@ -56,10 +53,8 @@ const DeploymentHistoryDiffView = ({
             ? baseTemplateConfiguration?.codeEditorValue?.resolvedValue
             : baseTemplateConfiguration?.codeEditorValue?.value
 
-        return YAMLStringify(JSON.parse(editorValue), {
-            sortMapEntries: sortBy ? (a, b) => yamlComparatorBySortOrder(a, b, sortOrder) : null,
-        })
-    }, [convertVariables, baseTemplateConfiguration, sortOrder])
+        return YAMLStringify(JSON.parse(editorValue))
+    }, [convertVariables, baseTemplateConfiguration])
 
     const editorValuesLHS = useMemo(() => {
         if (!currentConfiguration?.codeEditorValue?.value) {
@@ -70,10 +65,8 @@ const DeploymentHistoryDiffView = ({
             ? currentConfiguration?.codeEditorValue?.resolvedValue
             : currentConfiguration?.codeEditorValue?.value
 
-        return YAMLStringify(JSON.parse(editorValue), {
-            sortMapEntries: sortBy ? (a, b) => yamlComparatorBySortOrder(a, b, sortOrder) : null,
-        })
-    }, [convertVariables, currentConfiguration, sortOrder])
+        return YAMLStringify(JSON.parse(editorValue))
+    }, [convertVariables, currentConfiguration])
 
     const renderDeploymentDiffViaCodeEditor = () =>
         previousConfigAvailable ? (

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

@@ -3,8 +3,13 @@ import { Dispatch, SetStateAction } from 'react'
 import { DeploymentConfigDiffProps } from '@Shared/Components/DeploymentConfigDiff'
 import { EnvResourceType } from '@Shared/Services'
 
+import { UseUrlFiltersReturnType } from '@Common/Hooks'
 import { History, HistoryLogsProps } from '../types'
 
+export interface DeploymentHistoryConfigDiffQueryParams {
+    compareWfrId: number
+}
+
 export interface DeploymentHistoryConfigDiffProps
     extends Required<Pick<HistoryLogsProps, 'renderRunSource' | 'resourceId'>> {
     appName: string
@@ -26,16 +31,12 @@ export type DeploymentHistoryDiffDetailedProps = Pick<
         >
     > & {
         pipelineDeployments: History[]
-        previousWfrId: number
         convertVariables: boolean
         setConvertVariables: Dispatch<SetStateAction<boolean>>
         isCompareDeploymentConfigNotAvailable?: boolean
+        urlFilters: UseUrlFiltersReturnType<string, DeploymentHistoryConfigDiffQueryParams>
     }
 
-export interface DeploymentHistoryConfigDiffQueryParams {
-    compareWfrId: number
-}
-
 export interface DeploymentHistoryConfigDiffRouteParams {
     appId: string
     envId: string

src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/types.ts

@@ -27,7 +27,6 @@ import {
     ResponseType,
     PaginationProps,
     useScrollable,
-    SortingOrder,
 } from '../../../Common'
 import { DeploymentStageType } from '../../constants'
 import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
@@ -487,10 +486,6 @@ export interface DeploymentTemplateHistoryType {
     previousConfigAvailable: boolean
     rootClassName?: string
     codeEditorKey?: React.Key
-    sortingConfig?: {
-        sortBy: string
-        sortOrder: SortingOrder
-    }
 }
 export interface DeploymentHistoryDetailRes extends ResponseType {
     result?: DeploymentHistoryDetail

src/Shared/Components/CICDHistory/types.tsx

@@ -33,3 +33,5 @@ export const diffStateTextColorMap: Record<DeploymentConfigDiffState, `c${string
     deleted: 'cr-5',
     noDiff: 'cn-7',
 }
+
+export const DEPLOYMENT_CONFIG_DIFF_SORT_KEY = 'sort-config'