Merge pull request #925 from devtron-labs/feat/segment-control

feat: segment control

Author: shivani170

package-lock.json

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

package.json

@@ -128,7 +128,7 @@ export const URLS = {
     // DATA PROTECTION
     DATA_PROTECTION: DATA_PROTECTION_ROOT,
     DATA_PROTECTION_OVERVIEW: `${DATA_PROTECTION_ROOT}/overview`,
-    DATA_PROTECTION_BACKUP_AND_SCHEDULE: `${DATA_PROTECTION_ROOT}/backup-and-schedule/:view${Object.values(BackupAndScheduleListViewEnum).join('|')}`,
+    DATA_PROTECTION_BACKUP_AND_SCHEDULE: `${DATA_PROTECTION_ROOT}/backup-and-schedule/:view(${Object.values(BackupAndScheduleListViewEnum).join('|')})`,
     DATA_PROTECTION_BACKUP_DETAIL: `${DATA_PROTECTION_ROOT}/backup/:name`,
     DATA_PROTECTION_BACKUP_SCHEDULE_DETAIL: `${DATA_PROTECTION_ROOT}/schedule/:name`,
     DATA_PROTECTION_RESTORES: `${DATA_PROTECTION_ROOT}/restores`,

src/Common/Constants.ts

@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, useState } from 'react'
+import { useState } from 'react'
 
 import { ComponentSizeType } from '@Shared/constants'
 
-import { stopPropagation, StyledRadioGroup, VisibleModal } from '../../../Common'
+import { SegmentedControl, stopPropagation, VisibleModal } from '../../../Common'
 import { Button, ButtonVariantType } from '../Button'
 import { DocLink } from '../DocLink'
 import { BUTTON_TEXT } from './constant'
@@ -104,8 +104,8 @@ export const FeatureDescriptionModal = ({
     const [selectedTabId, setSelectedTabId] = useState(tabsConfig?.[0]?.id ?? null)
     const selectedTab = tabsConfig?.find((tab) => tab.id === selectedTabId) ?? null
 
-    const handleSelectedTabChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setSelectedTabId(e.target.value)
+    const handleSegmentSelectedTabChange = (selectedSegment) => {
+        setSelectedTabId(selectedSegment.value)
     }
 
     return (
@@ -120,19 +120,12 @@ export const FeatureDescriptionModal = ({
                     tabsConfig.length > 0 && (
                         <>
                             <div className="px-20 pb-8 flex left w-100">
-                                <StyledRadioGroup
-                                    className="gui-yaml-switch"
+                                <SegmentedControl
+                                    segments={tabsConfig.map((tab) => ({ label: tab.title, value: tab.id }))}
+                                    value={selectedTabId}
+                                    onChange={handleSegmentSelectedTabChange}
                                     name="feature-description-modal-tabs"
-                                    initialTab={selectedTab.id}
-                                    disabled={false}
-                                    onChange={handleSelectedTabChange}
-                                >
-                                    {tabsConfig.map((tab) => (
-                                        <StyledRadioGroup.Radio value={tab.id} key={tab.id}>
-                                            {tab.title}
-                                        </StyledRadioGroup.Radio>
-                                    ))}
-                                </StyledRadioGroup>
+                                />
                             </div>
                             <FeatureDescriptionModalContent
                                 SVGImage={selectedTab.SVGImage}