feat: segment control replacement

package.json

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

src/Common/SegmentedControl/Segment.tsx

@@ -32,7 +32,15 @@ const wrapWithTooltip = (tooltipProps: SegmentType['tooltipProps']) => (children
     </Tooltip>
 )
 
-const Segment = ({ segment, isSelected, name, onChange, fullWidth, size, disabled }: SegmentProps) => {
+const Segment = <T extends string | number>({
+    segment,
+    isSelected,
+    name,
+    onChange,
+    fullWidth,
+    size,
+    disabled,
+}: SegmentProps<T>) => {
     const inputId = useMemo(getUniqueId, [])
 
     const { value, icon, isError, label, tooltipProps, ariaLabel } = segment

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -23,20 +23,20 @@ import { SegmentedControlProps, SegmentType } from './types'
 
 import './segmentedControl.scss'
 
-const SegmentedControl = ({
+const SegmentedControl = <T extends string | number>({
     segments,
     onChange,
     name,
     size = ComponentSizeType.medium,
     value: controlledValue,
     fullWidth = false,
     disabled,
-}: SegmentedControlProps) => {
+}: SegmentedControlProps<T>) => {
     const isUnControlledComponent = controlledValue === undefined
-    const [selectedSegmentValue, setSelectedSegmentValue] = useState<SegmentType['value'] | null>(segments[0].value)
+    const [selectedSegmentValue, setSelectedSegmentValue] = useState<SegmentType<T>['value'] | null>(segments[0].value)
     const segmentValue = isUnControlledComponent ? selectedSegmentValue : controlledValue
 
-    const handleSegmentChange = (updatedSegment: SegmentType) => {
+    const handleSegmentChange = (updatedSegment: SegmentType<T>) => {
         if (isUnControlledComponent) {
             setSelectedSegmentValue(updatedSegment.value)
         }

src/Common/SegmentedControl/types.ts

@@ -23,7 +23,7 @@ type SegmentTooltipProps = Omit<
     'alwaysShowTippyOnHover' | 'showOnTruncate' | 'shortcutKeyCombo' | 'placement'
 >
 
-export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
+export type SegmentType<T = string | number> = {
     /**
      * If true, the segment will be in error state with error icon
      */
@@ -32,44 +32,48 @@ export type SegmentType = Pick<SelectPickerOptionType, 'value'> & {
      * If true, the segment will be in disabled state
      */
     isDisabled?: boolean
+    /**
+     * Value for the segment
+     */
+    value: T
 } & (
-        | ({
-              /**
-               * Label for the segment
-               *
-               * Note: Either of label or icon is required
-               */
-              label: SelectPickerOptionType['label']
-              /**
-               * Icon for the segment
-               *
-               * Note: Either of label or icon is required
-               */
-              icon?: IconsProps['name']
-              /**
-               * Tooltip props for the segment
-               *
-               * Note: Required if only icon is provided
-               */
-              tooltipProps?: SegmentTooltipProps
-              ariaLabel?: never
-          } & Pick<SelectPickerOptionType, 'label'>)
-        | {
-              label?: never
-              tooltipProps: SegmentTooltipProps
-              icon: IconsProps['name']
-              /**
-               * Aria label for the segment
-               */
-              ariaLabel: string
-          }
-    )
+    | ({
+          /**
+           * Label for the segment
+           *
+           * Note: Either of label or icon is required
+           */
+          label: SelectPickerOptionType['label']
+          /**
+           * Icon for the segment
+           *
+           * Note: Either of label or icon is required
+           */
+          icon?: IconsProps['name']
+          /**
+           * Tooltip props for the segment
+           *
+           * Note: Required if only icon is provided
+           */
+          tooltipProps?: SegmentTooltipProps
+          ariaLabel?: never
+      } & Pick<SelectPickerOptionType, 'label'>)
+    | {
+          label?: never
+          tooltipProps: SegmentTooltipProps
+          icon: IconsProps['name']
+          /**
+           * Aria label for the segment
+           */
+          ariaLabel: string
+      }
+)
 
-export type SegmentedControlProps = {
+export type SegmentedControlProps<T = string | number> = {
     /**
      * List of segments to be displayed
      */
-    segments: SegmentType[]
+    segments: SegmentType<T>[]
     /**
      * Please make sure this is unique
      */
@@ -83,19 +87,19 @@ export type SegmentedControlProps = {
           /**
            * On change handler for the component
            */
-          onChange?: (selectedSegment: SegmentType) => void
+          onChange?: (selectedSegment: SegmentType<T>) => void
       }
     | {
           /**
            * If defined, the component is controlled and onChange needs to be handled by the parent
            */
-          value: SegmentType['value']
-          onChange: (selectedSegment: SegmentType) => void
+          value: SegmentType<T>['value']
+          onChange: (selectedSegment: SegmentType<T>) => void
       }
 )
 
-export interface SegmentProps
-    extends Required<Pick<SegmentedControlProps, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
+export interface SegmentProps<T>
+    extends Required<Pick<SegmentedControlProps<T>, 'name' | 'onChange' | 'fullWidth' | 'size' | 'disabled'>> {
     isSelected: boolean
-    segment: SegmentType
+    segment: SegmentType<T>
 }

src/Common/index.ts

@@ -53,7 +53,6 @@ export * from './Policy.Types'
 export { default as PopupMenu } from './PopupMenu'
 export * from './Progressing'
 export { default as RadioGroup } from './RadioGroup'
-export { default as StyledRadioGroup } from './RadioGroup/RadioGroup'
 export { default as RadioGroupItem } from './RadioGroupItem'
 export { default as Reload } from './Reload'
 export * from './RJSF'

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx

@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Link, NavLink } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
 
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
-import { StyledRadioGroup } from '@Common/index'
+import { SegmentedControl } from '@Common/index'
+import { SegmentType } from '@Common/SegmentedControl/types'
+import { ComponentSizeType } from '@Shared/constants'
 
 import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
 import { diffStateIconMap, diffStateTooltipTextMap } from './DeploymentConfigDiff.constants'
@@ -87,11 +89,8 @@ export const DeploymentConfigDiffNavigation = ({
     }
 
     /** Handles tab click. */
-    const onTabClick = (e: ChangeEvent<HTMLInputElement>) => {
-        const { value } = e.target
-        if (tabConfig?.activeTab !== value) {
-            tabConfig?.onClick?.(value)
-        }
+    const onTabClick = (segment: SegmentType<string>) => {
+        tabConfig?.onClick?.(segment.value)
     }
 
     // RENDERERS
@@ -113,19 +112,13 @@ export const DeploymentConfigDiffNavigation = ({
 
         return (
             <div className="p-12">
-                <StyledRadioGroup
-                    name="deployment-config-diff-tab-list"
-                    initialTab={activeTab}
+                <SegmentedControl
+                    segments={tabs.map((tab) => ({ label: tab, value: tab }))}
+                    value={activeTab}
                     onChange={onTabClick}
-                    disabled={isLoading}
-                    className="gui-yaml-switch deployment-config-diff__tab-list"
-                >
-                    {tabs.map((tab) => (
-                        <StyledRadioGroup.Radio key={tab} value={tab} className="fs-12 lh-20 cn-7 fw-6">
-                            {tab}
-                        </StyledRadioGroup.Radio>
-                    ))}
-                </StyledRadioGroup>
+                    name="deployment-config-diff-tab-list"
+                    size={ComponentSizeType.xs}
+                />
             </div>
         )
     }

src/Shared/Components/InfoBlock/InfoBlock.component.tsx

@@ -98,7 +98,7 @@ const InfoBlock = ({
     if (layout === 'row') {
         return (
             <div className={`${baseContainerClass} flexbox dc__gap-16`}>
-                <div className="flexbox dc__gap-8 flex-grow-1">
+                <div className="flex left dc__gap-8 flex-grow-1">
                     {renderIcon()}
                     {renderContent()}
                 </div>