feat: move segmented control from fe-lib

Author: Elessar1802

src/Common/SegmentedControl/SegmentedControl.component.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { OptionType } from '@Common/Types'
+import StyledRadioGroup from '../RadioGroup/RadioGroup'
+import { SegmentedControlProps } from './types'
+
+const SegmentedControl = ({
+    tabs,
+    initialTab,
+    onChange,
+    tooltips,
+    disabled = false,
+    rootClassName = '',
+}: SegmentedControlProps) => (
+    <StyledRadioGroup
+        className={`gui-yaml-switch-window-bg ${rootClassName}`}
+        onChange={onChange}
+        initialTab={initialTab}
+        name="segmented-control"
+        disabled={disabled}
+    >
+        {tabs.map((tab: OptionType, index) => (
+            <StyledRadioGroup.Radio
+                value={tab.value}
+                key={tab.value}
+                className="fs-12 cn-7 fw-6 lh-20"
+                showTippy={!!tooltips?.[index]}
+                tippyContent={tooltips?.[index] ?? ''}
+            >
+                {tab.label}
+            </StyledRadioGroup.Radio>
+        ))}
+    </StyledRadioGroup>
+)
+
+export default SegmentedControl

src/Common/SegmentedControl/index.ts

@@ -0,0 +1,2 @@
+export type { SegmentedControlProps } from './types'
+export { default as SegmentedControl } from './SegmentedControl.component'

src/Common/SegmentedControl/types.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { OptionType } from '@Common/Types'
+
+export interface SegmentedControlProps {
+    tabs: OptionType[]
+    initialTab: string
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+    tooltips?: string[]
+    disabled?: boolean
+    rootClassName?: string
+}

src/Common/index.ts

@@ -70,3 +70,4 @@ export * from './SegmentedBarChart'
 export * from './CodeEditor'
 export * from './AppStatus'
 export * from './Tooltip'
+export * from './SegmentedControl'

src/Shared/types.ts

@@ -686,6 +686,11 @@ export enum ConfigurationType {
     YAML = 'YAML',
 }
 
+export const CONFIGURATION_TYPE_OPTIONS: OptionType<ConfigurationType, ConfigurationType>[] = [
+    { label: ConfigurationType.GUI, value: ConfigurationType.GUI },
+    { label: ConfigurationType.YAML, value: ConfigurationType.YAML },
+] as const
+
 export interface BaseURLParams {
     appId: string
     envId: string