Merge branch 'develop' into chore/main-sync

Author: AbhishekA1509

.env

@@ -62,6 +62,5 @@ FEATURE_DEFAULT_LANDING_RB_ENABLE=false
 FEATURE_ACTION_AUDIOS_ENABLE=true
 FEATURE_APPLICATION_TEMPLATES_ENABLE=true
 FEATURE_CODE_MIRROR_ENABLE=false
-FEATURE_EXPERIMENTAL_THEMING_ENABLE=true
 FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=devtron.ai

.storybook/preview.tsx

@@ -14,6 +14,7 @@ import {
     useTheme,
 } from '@devtron-labs/devtron-fe-common-lib'
 import  { SwitchThemeDialog } from '../src/Pages/Shared'
+import './storybook.css'
 
 const SwitchThemeDialogWrapper = () => {
     const { showThemeSwitcherDialog, themePreference, handleThemeSwitcherDialogVisibilityChange } = useTheme()
@@ -22,7 +23,7 @@ const SwitchThemeDialogWrapper = () => {
     }
 
     return (
-        showThemeSwitcherDialog ? <SwitchThemeDialog initialThemePreference={themePreference} handleClose={handleClose} disableAPICalls /> : null
+        showThemeSwitcherDialog ? <SwitchThemeDialog initialThemePreference={themePreference} handleClose={handleClose} disableAPICalls handleUpdateUserThemePreference={noop} /> : null
     )
 }
 
@@ -37,9 +38,7 @@ const preview: Preview = {
     },
     decorators: (Story) => {
         if (!window._env_) {
-            window._env_ = {
-                FEATURE_EXPERIMENTAL_THEMING_ENABLE: true,
-            } as customEnv
+            window._env_ = {} as customEnv
         }
 
         return (

.storybook/storybook.css

@@ -0,0 +1,3 @@
+body {
+    background: var(--bg-primary);
+}

config.md

@@ -45,6 +45,5 @@
 | TRIGGER_API_TIMEOUT                          | 60000      | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD                   |
 | FEATURE_HIDE_USER_DIRECT_PERMISSIONS_FOR_NON_SUPER_ADMINS | "true" | Would hide the user direct permissions for non-super admin users in User Permissions |
 | FEATURE_ACTION_AUDIOS_ENABLE                 | true         | Would enable audios in dashboard   |
-| FEATURE_EXPERIMENTAL_THEMING_ENABLE                       | true         | Would enable theming in dashboard   |
 
 # DASHBOARD CONFIG SECRET

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.10.0-patch-3",
+        "@devtron-labs/devtron-fe-common-lib": "1.10.6",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx

@@ -459,7 +459,7 @@ export const DeploymentConfigCompare = ({
         classNamePrefix: 'compare-with-environment-selector',
         inputId: 'compare-with-environment-selector',
         name: 'compare-with-environment-selector',
-        variant: SelectPickerVariantType.BORDER_LESS,
+        variant: SelectPickerVariantType.COMPACT,
         value: getSelectPickerOptionByValue(compareEnvironmentSelectorOptions, chartRefId || compareWith, {
             label: BASE_CONFIGURATIONS.name,
             value: '',
@@ -497,7 +497,7 @@ export const DeploymentConfigCompare = ({
             classNamePrefix: 'environment-config-type-selector',
             inputId: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
             name: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
-            variant: SelectPickerVariantType.BORDER_LESS,
+            variant: SelectPickerVariantType.COMPACT,
             isSearchable: false,
             disableDescriptionEllipsis: true,
             value: getSelectPickerOptionByValue(

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DTChartSelector.tsx

@@ -253,7 +253,7 @@ const DTChartSelector = ({
                     value={selectedOption}
                     onChange={onSelectChartVersion}
                     isSearchable={false}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     size={ComponentSizeType.small}
                     placeholder="Select version"
                     isDisabled={migratedFrom === PipelineMigratedFromType.ARGO_APPLICATION}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplateOptionsHeader.tsx

@@ -19,7 +19,8 @@ import {
     InvalidYAMLTippyWrapper,
     SegmentedControl,
     CONFIGURATION_TYPE_OPTIONS,
-    SegmentedControlVariant,
+    SegmentedControlProps,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import DTChartSelector from './DTChartSelector'
 import { DeploymentTemplateOptionsHeaderProps } from './types'
@@ -46,8 +47,8 @@ const DeploymentTemplateOptionsHeader = ({
         return null
     }
 
-    const handleToggleEditMode = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (e.target.value === ConfigurationType.YAML) {
+    const handleToggleEditMode: SegmentedControlProps['onChange'] = (selectedSegment) => {
+        if (selectedSegment.value === ConfigurationType.YAML) {
             handleChangeToYAMLMode()
             return
         }
@@ -65,13 +66,12 @@ const DeploymentTemplateOptionsHeader = ({
                     >
                         <div>
                             <SegmentedControl
-                                tabs={CONFIGURATION_TYPE_OPTIONS}
-                                initialTab={editMode}
+                                segments={CONFIGURATION_TYPE_OPTIONS}
+                                value={editMode}
                                 onChange={handleToggleEditMode}
                                 disabled={!!parsingError}
-                                rootClassName="h-20"
+                                size={ComponentSizeType.xs}
                                 name="dt-yaml-gui-segmented-control"
-                                variant={SegmentedControlVariant.GRAY_ON_WHITE}
                             />
                         </div>
                     </InvalidYAMLTippyWrapper>

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/SelectMergeStrategy.tsx

@@ -78,7 +78,7 @@ const SelectMergeStrategy = ({
                     value={selectedOption}
                     options={options}
                     isDisabled={isDisabled}
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     isSearchable={false}
                     size={ComponentSizeType.small}
                     isOptionDisabled={getIsOptionDisabled}

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx

@@ -404,7 +404,7 @@ export const EnvConfigurationsNav = ({
                 <SelectPicker<number, false>
                     inputId="env-config-selector"
                     classNamePrefix="env-config-selector"
-                    variant={SelectPickerVariantType.BORDER_LESS}
+                    variant={SelectPickerVariantType.COMPACT}
                     isClearable={false}
                     value={getSelectPickerOptionByValue(envOptions, parsedResourceId, baseEnvOption[0])}
                     options={envOptions}