feat: segment-control

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretData.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ChangeEvent, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import {
     Button,
@@ -25,15 +25,17 @@ import {
     CodeEditor,
     ComponentSizeType,
     configMapSecretMountDataMap,
+    CONFIGURATION_TYPE_OPTIONS,
+    ConfigurationType,
     convertKeyValuePairToYAML,
     convertYAMLToKeyValuePair,
     KeyValueTable,
     KeyValueTableData,
     MODES,
     noop,
     OverrideMergeStrategyType,
+    SegmentedControl,
     SelectPickerOptionType,
-    StyledRadioGroup,
     ToastManager,
     ToastVariantType,
     YAMLStringify,
@@ -44,9 +46,9 @@ import { ReactComponent as HideIcon } from '@Icons/ic-visibility-off.svg'
 import { importComponentFromFELibrary } from '@Components/common'
 
 import {
-    CODE_EDITOR_RADIO_STATE_VALUE,
     CONFIG_MAP_SECRET_REQUIRED_FIELD_ERROR,
     DATA_HEADER_MAP,
+    EXTERNAL_CODE_EDITOR_RADIO_STATE,
     sampleJSONs,
     VIEW_MODE,
 } from './constants'
@@ -162,14 +164,9 @@ export const ConfigMapSecretData = ({
         setValue('yamlMode', mode === VIEW_MODE.YAML)
     }
 
-    const handleGuiYamlSwitch = (e: ChangeEvent<HTMLInputElement>) => {
-        const { value } = e.target
-        toggleYamlMode(value as (typeof VIEW_MODE)[keyof typeof VIEW_MODE])
+    const handleExternalCodeEditorRadioChange = (selectedSegment: SelectPickerOptionType) => {
+        setCodeEditorRadio(selectedSegment.value as CODE_EDITOR_RADIO_STATE)
     }
-
-    const handleCodeEditorRadioChange = (e: ChangeEvent<HTMLInputElement>) =>
-        setCodeEditorRadio(e.target.value as CODE_EDITOR_RADIO_STATE)
-
     /**
      * Determines the key to be used for the code editor form based on the current configuration.
      * @returns The key in the `data` object corresponding to the selected mode (ESO, HashiCorp/AWS, or YAML).
@@ -211,6 +208,14 @@ export const ConfigMapSecretData = ({
         )
     }
 
+    const handleToggleEditMode = (selectedSegment: SelectPickerOptionType) => {
+        if (selectedSegment.value === ConfigurationType.YAML) {
+            toggleYamlMode(VIEW_MODE.YAML)
+        } else {
+            toggleYamlMode(VIEW_MODE.GUI)
+        }
+    }
+
     // USE-EFFECTS
     useEffect(() => {
         // Switch to YAML mode if the user is in the express edit comparison view.
@@ -246,22 +251,12 @@ export const ConfigMapSecretData = ({
                 {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
                 <label className="m-0 fs-13 lh-20 dc__required-field">{isPatchMode ? 'Patch data' : 'Data'}</label>
                 {!isESO && !isHashiOrAWS && (
-                    <StyledRadioGroup
-                        className="gui-yaml-switch"
-                        disabled={false}
-                        initialTab={data.yamlMode ? VIEW_MODE.YAML : VIEW_MODE.GUI}
-                        name="yamlMode"
-                        /** @note Check comment inside `toggleYamlMode` to see why we haven't used register method from useForm */
-                        onChange={handleGuiYamlSwitch}
-                    >
-                        {Object.keys(VIEW_MODE).map((key) =>
-                            VIEW_MODE[key] !== VIEW_MODE.MANIFEST ? (
-                                <StyledRadioGroup.Radio key={key} value={VIEW_MODE[key]} canSelect={false}>
-                                    {VIEW_MODE[key].toUpperCase()}
-                                </StyledRadioGroup.Radio>
-                            ) : null,
-                        )}
-                    </StyledRadioGroup>
+                    <SegmentedControl
+                        segments={CONFIGURATION_TYPE_OPTIONS}
+                        value={data.yamlMode ? ConfigurationType.YAML : ConfigurationType.GUI}
+                        onChange={handleToggleEditMode}
+                        name="data-editor-selector"
+                    />
                 )}
             </div>
         )
@@ -345,18 +340,12 @@ export const ConfigMapSecretData = ({
                     <CodeEditor.Header>
                         <div className="flex dc__content-space">
                             {!isHashiOrAWS && data.external ? (
-                                <StyledRadioGroup
+                                <SegmentedControl
                                     name="code-editor-radio"
-                                    className="gui-yaml-switch"
-                                    initialTab={codeEditorRadio}
-                                    onChange={handleCodeEditorRadioChange}
-                                >
-                                    {Object.keys(CODE_EDITOR_RADIO_STATE).map((key) => (
-                                        <StyledRadioGroup.Radio key={key} value={CODE_EDITOR_RADIO_STATE[key]}>
-                                            {CODE_EDITOR_RADIO_STATE_VALUE[key]}
-                                        </StyledRadioGroup.Radio>
-                                    ))}
-                                </StyledRadioGroup>
+                                    segments={EXTERNAL_CODE_EDITOR_RADIO_STATE}
+                                    value={codeEditorRadio}
+                                    onChange={handleExternalCodeEditorRadioChange}
+                                />
                             ) : null}
                             <div className="flex right dc__gap-8 ml-auto">
                                 {renderSecretShowHide()}

src/Pages/Shared/ConfigMapSecret/constants.ts

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { CMSecretComponentType, ConfigMapSecretUseFormProps } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    CMSecretComponentType,
+    CODE_EDITOR_RADIO_STATE,
+    ConfigMapSecretUseFormProps,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { ConfigMapSecretNullStateProps } from './types'
 
@@ -73,8 +77,6 @@ export const getCMSecretNullStateText = (
     },
 })
 
-export const CODE_EDITOR_RADIO_STATE_VALUE = { DATA: 'Data', SAMPLE: 'Sample' }
-
 export const DATA_HEADER_MAP = { DEFAULT: 'default' }
 
 export const VIEW_MODE = {
@@ -223,3 +225,8 @@ export const CONFIG_MAP_SECRET_DATA_KEYS: (keyof ConfigMapSecretUseFormProps)[]
     'esoSecretYaml',
     'secretDataYaml',
 ]
+
+export const EXTERNAL_CODE_EDITOR_RADIO_STATE = Object.values(CODE_EDITOR_RADIO_STATE).map((value) => ({
+    label: value,
+    value,
+}))

src/components/CIPipelineN/CreatePluginModal/CreatePluginFormContent.tsx

@@ -23,12 +23,13 @@ import {
     getIsRequestAborted,
     logExceptionToSentry,
     OptionType,
+    SegmentedControl,
+    SegmentedControlProps,
     SelectPicker,
     SelectPickerOptionType,
     SelectPickerProps,
     SEMANTIC_VERSION_DOCUMENTATION_LINK,
     stopPropagation,
-    StyledRadioGroup,
     TippyCustomized,
     TippyTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -66,16 +67,6 @@ const CreatePluginFormContent = ({
     const { currentTab, name, pluginIdentifier, docLink, pluginVersion, description, tags, inputVariables, icon } =
         pluginForm
 
-    const handleTabChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const targetMode = e.target.value as CreatePluginFormViewType
-
-        if (targetMode === currentTab) {
-            return
-        }
-
-        handleChange({ action: CreatePluginActionType.UPDATE_CURRENT_TAB, payload: targetMode })
-    }
-
     const handlePluginSelection: SelectPickerProps['onChange'] = (newValue: SelectPickerOptionType) => {
         handleChange({
             action: CreatePluginActionType.UPDATE_PARENT_PLUGIN,
@@ -209,20 +200,31 @@ const CreatePluginFormContent = ({
 
     const showPluginDetailFields = currentTab !== CreatePluginFormViewType.EXISTING_PLUGIN || !!name
 
+    const CREATE_PLUGIN_FORM_VIEW_TYPE_SEGMENTS = Object.values(CreatePluginFormViewType).map((tab) => ({
+        label: tab,
+        value: tab,
+    }))
+
+    const handleSegmentedControlChange: SegmentedControlProps['onChange'] = (selectedSegment) => {
+        const targetMode = selectedSegment.value as CreatePluginFormViewType
+
+        if (targetMode === currentTab) {
+            return
+        }
+
+        handleChange({ action: CreatePluginActionType.UPDATE_CURRENT_TAB, payload: targetMode })
+    }
+
     return (
         <div className="flexbox-col flex-grow-1 dc__overflow-auto p-20 dc__gap-16">
-            <StyledRadioGroup
-                className="gui-yaml-switch dc__no-shrink dc__content-start"
-                onChange={handleTabChange}
-                initialTab={currentTab}
-                name="create-plugin-control"
-            >
-                {Object.values(CreatePluginFormViewType).map((tab) => (
-                    <StyledRadioGroup.Radio value={tab} key={tab} className="fs-12 cn-7 fw-6 lh-20">
-                        {tab}
-                    </StyledRadioGroup.Radio>
-                ))}
-            </StyledRadioGroup>
+            <div className="dc__no-shrink">
+                <SegmentedControl
+                    segments={CREATE_PLUGIN_FORM_VIEW_TYPE_SEGMENTS}
+                    value={currentTab}
+                    onChange={handleSegmentedControlChange}
+                    name="create-plugin-control"
+                />
+            </div>
 
             {currentTab === CreatePluginFormViewType.NEW_PLUGIN && (
                 <EditImageFormField