feat: update SegmentedControl to use unique name prop and improve key handling in StatusFilterButtonComponent

Author: AbhishekA1509

src/Common/SegmentedControl/Segment.tsx

@@ -54,13 +54,12 @@ const Segment = ({
                     htmlFor={inputId}
                     layout
                     className={`pointer m-0 dc__position-rel flex ${!fullWidth ? 'left' : ''} dc__gap-4 br-4 segmented-control__segment segmented-control__segment--${size} ${isSelected ? 'fw-6 segmented-control__segment--selected' : 'fw-4'} ${segment.isError ? 'cr-5' : 'cn-9'} ${disabled ? 'cursor-not-allowed' : ''} ${COMPONENT_SIZE_TO_SEGMENT_CLASS_MAP[size]}`}
-                    whileTap={{ scale: 0.95 }}
                     key={inputId}
                     aria-label={ariaLabel}
                 >
                     {isSelected && (
                         <motion.div
-                            layoutId="active-segment-control"
+                            layoutId={`active-segment-control-${name}`}
                             className="dc__position-abs active-mask dc__top-0 dc__left-0 dc__right-0 dc__bottom-0 bg__primary br-4"
                         />
                     )}

src/Common/SegmentedControl/types.ts

@@ -56,6 +56,9 @@ export type SegmentedControlProps = {
      * List of segments to be displayed
      */
     segments: SegmentType[]
+    /**
+     * Please make sure this is unique
+     */
     name: string
     size?: Extract<ComponentSizeType, ComponentSizeType.xs | ComponentSizeType.small | ComponentSizeType.medium>
     fullWidth?: boolean

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { SegmentType } from '@Common/SegmentedControl/types'
 import { ComponentSizeType } from '@Shared/constants'
+import { getUniqueId } from '@Shared/Helpers'
 
 import { PopupMenu, SegmentedControl } from '../../../Common'
 import { StatusFilterButtonType } from './types'
@@ -32,6 +33,8 @@ export const StatusFilterButtonComponent = ({
     handleFilterClick,
     maxInlineFiltersCount = 0,
 }: StatusFilterButtonType) => {
+    const segmentControlName = useRef(getUniqueId())
+
     // STATES
     const [overflowFilterIndex, setOverflowFilterIndex] = useState(0)
 
@@ -104,19 +107,13 @@ export const StatusFilterButtonComponent = ({
 
     const segmentValue = segments.find(({ value }) => value === selectedTab)?.value || null
 
-    const segmentControlKey = inlineFilters.reduce<string>(
-        (acc, inlineFilter) => `${acc}-${inlineFilter.status}`,
-        `${allResourceKindFilter.status}`,
-    )
-
     return (
         <div className="flexbox status-filter__container">
             <SegmentedControl
-                key={segmentControlKey}
                 segments={segments}
                 value={segmentValue}
                 onChange={handleInlineFilterClick}
-                name="status-filter-button"
+                name={segmentControlName.current}
                 size={ComponentSizeType.small}
             />