feat: add Collapse Transition component, add Collapse Tranisition to DeploymentDiffAccordion, CollapsibleList, DeploymentDiffMain - by default disable, SelectPicker: add disableDescription prop

Author: RohitRaj011

src/Shared/Components/Collapse/Collapse.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState, useRef } from 'react'
+
+import { CollapseProps } from './types'
+
+export const Collapse = ({ expand, children }: CollapseProps) => {
+    const ref = useRef<HTMLDivElement>(null)
+    const [contentHeight, setContentHeight] = useState(0)
+
+    useEffect(() => {
+        if (ref.current) {
+            setContentHeight(ref.current.clientHeight)
+        }
+    }, [children])
+
+    return (
+        <div
+            style={{
+                height: expand ? contentHeight : 0,
+                transitionProperty: 'height',
+                transitionDuration: '0.3s',
+                overflow: 'hidden',
+            }}
+        >
+            <div ref={ref}>{children}</div>
+        </div>
+    )
+}

src/Shared/Components/Collapse/index.ts

@@ -0,0 +1 @@
+export * from './Collapse'

src/Shared/Components/Collapse/types.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react'
+
+export interface CollapseProps {
+    expand: boolean
+    children: ReactNode
+}

src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx

@@ -5,6 +5,7 @@ import Tippy, { TippyProps } from '@tippyjs/react'
 import { ConditionalWrap } from '@Common/Helper'
 import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg'
 
+import { Collapse } from '../Collapse'
 import { CollapsibleListProps } from './CollapsibleList.types'
 import './CollapsibleList.scss'
 
@@ -51,7 +52,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                             </ConditionalWrap>
                         )}
                     </div>
-                    {isExpanded && (
+                    <Collapse expand={isExpanded}>
                         <div className="collapsible ml-16 pl-4 dc__border-left">
                             {!items.length ? (
                                 <div className="collapsible__item flexbox dc__gap-8 dc__no-decor no-hover br-4 py-6 px-8">
@@ -96,7 +97,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                 ))
                             )}
                         </div>
-                    )}
+                    </Collapse>
                 </Fragment>
             ))}
         </div>

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffAccordion.tsx

@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 
+import { Collapse } from '../Collapse'
 import { DeploymentConfigDiffAccordionProps } from './types'
 
 export const DeploymentConfigDiffAccordion = forwardRef<HTMLDivElement, DeploymentConfigDiffAccordionProps>(
@@ -22,7 +23,7 @@ export const DeploymentConfigDiffAccordion = forwardRef<HTMLDivElement, Deployme
                     className={`m-0 fs-13 lh-20 fw-6 ${hasDiff ? 'cy-7' : 'cg-7'}`}
                 >{`${hasDiff ? 'Has' : 'No'} difference`}</p>
             </button>
-            {isExpanded && children}
+            <Collapse expand={isExpanded}>{children}</Collapse>
         </div>
     ),
 )

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx

@@ -1,6 +1,7 @@
 import { Fragment, useEffect, useState } from 'react'
 
 import { ReactComponent as ICSortArrowDown } from '@Icons/ic-sort-arrow-down.svg'
+import { ReactComponent as ICSort } from '@Icons/ic-arrow-up-down.svg'
 import { Progressing } from '@Common/Progressing'
 import { CodeEditor } from '@Common/CodeEditor'
 import { MODES, SortingOrder } from '@Common/Constants'
@@ -15,8 +16,8 @@ export const DeploymentConfigDiffMain = ({
     headerText = 'Compare With',
     configList = [],
     selectorsConfig,
-    sortOrder,
-    onSortBtnClick,
+    sortingConfig,
+    scrollIntoViewId,
 }: DeploymentConfigDiffMainProps) => {
     // STATES
     const [expandedView, setExpandedView] = useState<Record<string | number, boolean>>({})
@@ -29,10 +30,21 @@ export const DeploymentConfigDiffMain = ({
     }
 
     useEffect(() => {
-        if (!isLoading && configList) {
-            setExpandedView(configList.reduce((acc, curr) => ({ ...acc, [curr.id]: curr.hasDiff }), {}))
+        if (!isLoading) {
+            setExpandedView(
+                configList.reduce(
+                    (acc, curr) => ({ ...acc, [curr.id]: scrollIntoViewId === curr.id || curr.hasDiff }),
+                    {},
+                ),
+            )
+        }
+    }, [isLoading])
+
+    useEffect(() => {
+        if (scrollIntoViewId) {
+            setExpandedView((prev) => ({ ...prev, [scrollIntoViewId]: true }))
         }
-    }, [isLoading, configList])
+    }, [scrollIntoViewId])
 
     const renderHeaderSelectors = (list: DeploymentConfigDiffSelectPickerProps[]) =>
         list.map((configItem, index) => {
@@ -59,22 +71,36 @@ export const DeploymentConfigDiffMain = ({
             )
         })
 
-    const renderSortButton = () => (
-        <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={onSortBtnClick}
-                disabled={isLoading}
-            >
-                <ICSortArrowDown
-                    className="fcn-7 rotate"
-                    style={{ ['--rotateBy' as string]: sortOrder === SortingOrder.ASC ? '0deg' : '180deg' }}
-                />
-                <span className="cn-7 fs-13 lh-20 fw-6">Sort keys</span>
-            </button>
-        </div>
-    )
+    const renderSortButton = () => {
+        if (sortingConfig) {
+            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 ? (
+                            <ICSortArrowDown
+                                className="fcn-7 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>
+            )
+        }
+
+        return null
+    }
 
     const renderDiffs = () =>
         configList.map(({ id, isDeploymentTemplate, primaryConfig, secondaryConfig, title, hasDiff }) => {
@@ -97,7 +123,7 @@ export const DeploymentConfigDiffMain = ({
                                 <div className="px-12 py-6">{secondaryHeading}</div>
                             </div>
                             <CodeEditor
-                                key={sortOrder}
+                                key={sortingConfig?.sortOrder}
                                 diffView
                                 defaultValue={primaryList.codeEditorValue.value}
                                 value={secondaryList.codeEditorValue.value}
@@ -114,13 +140,13 @@ export const DeploymentConfigDiffMain = ({
                                 <div className="px-12 py-6">{secondaryHeading}</div>
                             </div>
                             <DeploymentHistoryDiffView
-                                key={`${id}-${sortOrder}`}
+                                key={`${id}-${sortingConfig?.sortOrder || ''}`}
                                 baseTemplateConfiguration={secondaryList}
                                 currentConfiguration={primaryList}
                                 previousConfigAvailable
                                 rootClassName="m-16 mt-0-imp dc__no-top-radius dc__no-top-border"
                                 comparisonBodyClassName="m-16"
-                                sortOrder={sortOrder}
+                                sortOrder={sortingConfig?.sortOrder}
                             />
                         </>
                     )}
@@ -139,7 +165,7 @@ export const DeploymentConfigDiffMain = ({
                     <div className="flex-grow-1 flexbox dc__align-items-center dc__gap-4 p-12">
                         {renderHeaderSelectors(selectorsConfig.secondaryConfig)}
                     </div>
-                    {onSortBtnClick && renderSortButton()}
+                    {renderSortButton()}
                 </div>
             </div>
             <div className="deployment-config-diff__main-content">

src/Shared/Components/DeploymentConfigDiff/types.ts

@@ -50,8 +50,11 @@ export interface DeploymentConfigDiffProps {
         primaryConfig: DeploymentConfigDiffSelectPickerProps[]
         secondaryConfig: DeploymentConfigDiffSelectPickerProps[]
     }
-    sortOrder?: SortingOrder
-    onSortBtnClick?: () => void
+    sortingConfig?: {
+        sortBy: string
+        sortOrder: SortingOrder
+        handleSorting: () => void
+    }
     navList: DeploymentConfigDiffNavigationItem[]
     collapsibleNavList: DeploymentConfigDiffNavigationCollapsibleItem[]
     goBackURL?: string
@@ -68,13 +71,7 @@ export interface DeploymentConfigDiffNavigationProps
 export interface DeploymentConfigDiffMainProps
     extends Pick<
         DeploymentConfigDiffProps,
-        | 'isLoading'
-        | 'headerText'
-        | 'configList'
-        | 'scrollIntoViewId'
-        | 'selectorsConfig'
-        | 'sortOrder'
-        | 'onSortBtnClick'
+        'isLoading' | 'headerText' | 'configList' | 'scrollIntoViewId' | 'selectorsConfig' | 'sortingConfig'
     > {}
 
 export interface DeploymentConfigDiffAccordionProps {

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -187,7 +187,7 @@ const SelectPicker = ({
                                 LoadingIndicator: SelectPickerLoadingIndicator,
                                 DropdownIndicator: SelectPickerDropdownIndicator,
                                 Control: renderControl,
-                                Option: SelectPickerOption,
+                                Option: SelectPickerOption(props),
                                 MenuList: renderMenuList,
                                 ClearIndicator: SelectPickerClearIndicator,
                                 ValueContainer: renderValueContainer,

src/Shared/Components/SelectPicker/common.tsx

@@ -75,27 +75,37 @@ export const SelectPickerValueContainer = ({
 
 export const SelectPickerLoadingIndicator = () => <Progressing />
 
-export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) => {
-    const { label, data } = props
-    const { description, startIcon, endIcon } = data ?? {}
-    const showDescription = !!description
+export const SelectPickerOption =
+    ({ disableDescriptionEllipsis = false }: SelectPickerProps) =>
+    (props: OptionProps<SelectPickerOptionType>) => {
+        const { label, data } = props
+        const { description, startIcon, endIcon } = data ?? {}
+        const showDescription = !!description
 
-    return (
-        <components.Option {...props}>
-            <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>
-                {startIcon && (
-                    <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{startIcon}</div>
-                )}
-                <div className="flex-grow-1">
-                    <h4 className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate">{label}</h4>
-                    {/* Add support for custom ellipsis if required */}
-                    {showDescription && <p className="m-0 fs-12 fw-4 lh-18 cn-7 dc__truncate">{description}</p>}
+        return (
+            <components.Option {...props}>
+                <div className={`flex left ${showDescription ? 'top' : ''} dc__gap-8`}>
+                    {startIcon && (
+                        <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{startIcon}</div>
+                    )}
+                    <div className="flex-grow-1">
+                        <h4 className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate">{label}</h4>
+                        {/* Add support for custom ellipsis if required */}
+                        {showDescription && (
+                            <p
+                                className={`m-0 fs-12 fw-4 lh-18 cn-7 ${!disableDescriptionEllipsis ? 'dc__truncate' : ''}`}
+                            >
+                                {description}
+                            </p>
+                        )}
+                    </div>
+                    {endIcon && (
+                        <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{endIcon}</div>
+                    )}
                 </div>
-                {endIcon && <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{endIcon}</div>}
-            </div>
-        </components.Option>
-    )
-}
+            </components.Option>
+        )
+    }
 
 export const SelectPickerMenuList = ({
     renderMenuListFooter,

src/Shared/Components/SelectPicker/type.ts

@@ -102,4 +102,10 @@ export interface SelectPickerProps
      * @default SelectPickerVariantType.DEFAULT
      */
     variant?: SelectPickerVariantType
+    /**
+     * Disables the ellipsis on description, it will be shown in full width, wrapped if required.
+     *
+     * @default false
+     */
+    disableDescriptionEllipsis?: boolean
 }