Merge pull request #2712 from devtron-labs/feat/switch

AbhishekA1509 · web-flow · commit 377b7d205ac1 · 2025-05-26T17:54:07.000+05:30
feat: switch
diff --git a/.env b/.env
@@ -69,4 +69,4 @@ FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
 FEATURE_AI_INTEGRATION_ENABLE=false
 LOGIN_PAGE_IMAGE=
-FEATURE_REDFISH_NODE_ENABLE=false
+FEATURE_REDFISH_NODE_ENABLE=false
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.14.1-pre-1",
+        "@devtron-labs/devtron-fe-common-lib": "1.14.1-pre-2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/Sidebar.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/Sidebar.tsx
@@ -16,7 +16,7 @@
 
 import { generatePath, NavLink, useParams, useRouteMatch } from 'react-router-dom'
 
-import { Icon, IconName, ModalSidebarPanel } from '@devtron-labs/devtron-fe-common-lib'
+import { Icon, IconName, ModalSidebarPanel, SERVER_MODE, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 
@@ -27,47 +27,53 @@ const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null,
 
 const Sidebar = () => {
     const { path } = useRouteMatch()
+    const { serverMode } = useMainContext()
     const { type } = useParams<CreateClusterParams>()
 
     const selectedSidebarElement = SIDEBAR_CONFIG[type]
 
     return (
         <div className="w-250 p-20 flexbox-col dc__gap-24 dc__no-shrink dc__overflow-auto">
             <div className="flexbox-col">
-                {Object.entries(SIDEBAR_CONFIG).map(([key, { title, iconName, isEnterprise, dataTestId }]) => {
-                    const isSelected = type.toLowerCase() === key.toLowerCase()
+                {Object.entries(SIDEBAR_CONFIG).map(
+                    ([key, { title, iconName, isEnterprise, dataTestId, hideInEAMode }]) => {
+                        if (hideInEAMode && serverMode === SERVER_MODE.EA_ONLY) {
+                            return null
+                        }
+                        const isSelected = type.toLowerCase() === key.toLowerCase()
 
-                    return (
-                        <NavLink
-                            data-testid={dataTestId}
-                            key={key}
-                            className={`dc__transparent flex left dc__gap-8 py-6 px-8 br-4 ${isSelected ? 'bcb-1' : 'dc__hover-n50'}`}
-                            to={generatePath(path, { type: key })}
-                        >
-                            <span className="dc__fill-available-space dc__no-shrink icon-dim-16">
-                                <Icon name={iconName as IconName} color={isSelected ? 'B500' : 'N600'} />
-                            </span>
-
-                            <span
-                                className={`fs-13 lh-20 dc__truncate flex-grow-1 ${isSelected ? 'cb-5 fw-6' : 'cn-9'}`}
+                        return (
+                            <NavLink
+                                data-testid={dataTestId}
+                                key={key}
+                                className={`dc__transparent flex left dc__gap-8 py-6 px-8 br-4 ${isSelected ? 'bcb-1' : 'dc__hover-n50'}`}
+                                to={generatePath(path, { type: key })}
                             >
-                                {title}
-                            </span>
+                                <span className="dc__fill-available-space dc__no-shrink icon-dim-16">
+                                    <Icon name={iconName as IconName} color={isSelected ? 'B500' : 'N600'} />
+                                </span>
+
+                                <span
+                                    className={`fs-13 lh-20 dc__truncate flex-grow-1 ${isSelected ? 'cb-5 fw-6' : 'cn-9'}`}
+                                >
+                                    {title}
+                                </span>
 
-                            {isEnterprise && !isFELibAvailable && (
-                                <Icon
-                                    name="ic-enterprise-feat"
-                                    color="Y700"
-                                    tooltipProps={{
-                                        content: 'This is an enterprise only feature',
-                                        placement: 'right',
-                                        alwaysShowTippyOnHover: true,
-                                    }}
-                                />
-                            )}
-                        </NavLink>
-                    )
-                })}
+                                {isEnterprise && !isFELibAvailable && (
+                                    <Icon
+                                        name="ic-enterprise-feat"
+                                        color="Y700"
+                                        tooltipProps={{
+                                            content: 'This is an enterprise only feature',
+                                            placement: 'right',
+                                            alwaysShowTippyOnHover: true,
+                                        }}
+                                    />
+                                )}
+                            </NavLink>
+                        )
+                    },
+                )}
             </div>
 
             <div className="divider__secondary--horizontal" />
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/constants.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/constants.tsx
@@ -44,5 +44,6 @@ export const SIDEBAR_CONFIG: SidebarConfigType = {
             </>
         ),
         isEnterprise: true,
+        hideInEAMode: true,
     },
 } as const
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts
@@ -15,6 +15,7 @@ export type SidebarConfigType = Record<
         dataTestId: string
         documentationHeader?: string
         isEnterprise?: true
+        hideInEAMode?: true
     }
 >
 
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
@@ -43,7 +43,6 @@ import { TOKEN_COOKIE_NAME, URLS } from '../../config'
 import { getSSOConfigList } from '../../Pages/GlobalConfigurations/Authorization/SSOLoginServices/service'
 import { dashboardAccessed } from '../../services/service'
 import { LOGIN_CARD_ANIMATION_VARIANTS, SSOProvider } from './constants'
-import { SSOConfigLoginList } from './login.types'
 import { LoginForm } from './LoginForm'
 
 import './login.scss'
@@ -54,13 +53,14 @@ const getTermsAndConditions = importComponentFromFELibrary('getTermsAndCondition
 
 const Login = () => {
     const [continueUrl, setContinueUrl] = useState('')
-    const [loginList, setLoginList] = useState<SSOConfigLoginList[]>([])
 
     const { searchParams } = useSearchString()
     const location = useLocation()
     const history = useHistory()
 
-    const [initLoading, initResult] = useAsync(() => Promise.allSettled([getSSOConfigList(), dashboardAccessed()]), [])
+    const [ssoListLoading, ssoListResponse] = useAsync(getSSOConfigList, [])
+
+    const loginList = ssoListResponse?.result ?? []
 
     const setLoginNavigationURL = () => {
         let queryParam = searchParams.continue
@@ -96,26 +96,10 @@ const Login = () => {
 
     useEffect(() => {
         setLoginNavigationURL()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        dashboardAccessed()
     }, [])
 
-    useEffect(() => {
-        if (initResult && !initLoading) {
-            const [ssoLoginListResponse, dashboardAccessesResponse] = initResult
-            if (ssoLoginListResponse.status === 'fulfilled' && ssoLoginListResponse.value.result) {
-                setLoginList(ssoLoginListResponse.value.result as SSOConfigLoginList[])
-            }
-
-            if (
-                typeof Storage !== 'undefined' &&
-                !localStorage.getItem('isDashboardAccessed') &&
-                dashboardAccessesResponse.status === 'fulfilled' &&
-                dashboardAccessesResponse.value.result
-            ) {
-                localStorage.setItem('isDashboardAccessed', 'true')
-            }
-        }
-    }, [initLoading, initResult])
-
     const onClickSSO = () => {
         if (typeof Storage !== 'undefined') {
             localStorage.setItem('isSSOLogin', 'true')
@@ -127,7 +111,7 @@ const Login = () => {
 
     const renderSSOLoginPage = () => (
         <div className="flexbox-col dc__gap-12 p-36">
-            {initLoading && !loginList.length && (
+            {ssoListLoading && !loginList.length && (
                 <Button
                     variant={ButtonVariantType.secondary}
                     text="Checking SSO"
diff --git a/src/components/login/login.types.ts b/src/components/login/login.types.ts
@@ -21,5 +21,5 @@ export interface SSOConfigLoginList extends Pick<SSOConfigDTO, 'id' | 'active' |
 }
 
 export interface LoginFormType {
-    loginList: SSOConfigLoginList[]
+    loginList: SSOConfigDTO[]
 }
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
@@ -160,7 +160,7 @@ const ChartValuesView = ({
         presetValueId: string
         envId: string
     }>()
-    const { serverMode, isManifestScanningEnabled } = useMainContext()
+    const { serverMode } = useMainContext()
     const { handleDownload } = useDownload()
     const chartValuesAbortRef = useRef<AbortController>(new AbortController())
     const [chartValuesList, setChartValuesList] = useState<ChartValuesType[]>(chartValuesListFromParent || [])
@@ -1810,7 +1810,7 @@ const ChartValuesView = ({
                             )}
                         </div>
                         {!isExternalApp &&
-                            isManifestScanningEnabled &&
+                            serverMode === SERVER_MODE.FULL &&
                             (isDeployChartView || isUpdateAppView) &&
                             ToggleSecurityScan && (
                                 <ToggleSecurityScan
diff --git a/src/css/base.scss b/src/css/base.scss
@@ -2863,6 +2863,10 @@ button.anchor {
     width: 10px;
 }
 
+.w-12 {
+    width: 12px;
+}
+
 .w-14 {
     width: 14px;
 }
diff --git a/src/services/service.ts b/src/services/service.ts
@@ -525,8 +525,17 @@ export function getClusterListMinWithoutAuth(): Promise<ClusterListResponse> {
     return get(URL)
 }
 
-export function dashboardAccessed() {
-    return get(Routes.DASHBOARD_ACCESSED)
+export const dashboardAccessed = async () => {
+    try {
+        const isDashboardAccessed = localStorage.getItem('isDashboardAccessed')
+        if (isDashboardAccessed) {
+            return
+        }
+        await get(Routes.DASHBOARD_ACCESSED)
+        localStorage.setItem('isDashboardAccessed', 'true')
+    } catch {
+        // do noting
+    }
 }
 
 export function dashboardLoggedIn() {
diff --git a/src/stories/Switch.stories.tsx b/src/stories/Switch.stories.tsx
@@ -0,0 +1,127 @@
+/*
+ * 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 { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ComponentSizeType, DTSwitch, DTSwitchProps, iconMap } from '@devtron-labs/devtron-fe-common-lib'
+
+const SWITCH_VARIANTS: Readonly<Record<DTSwitchProps['variant'], null>> = {
+    theme: null,
+    positive: null,
+}
+
+type BaseComponentPropsType = Omit<DTSwitchProps, 'onChange' | 'isChecked'>
+
+const BaseComponent = (props: BaseComponentPropsType) => {
+    const [isChecked, setIsChecked] = useState<boolean>(false)
+
+    const handleChange = () => {
+        setIsChecked((prev) => !prev)
+    }
+
+    const switchProps = {
+        ...props,
+        isChecked,
+        onChange: handleChange,
+    } as DTSwitchProps
+
+    return <DTSwitch {...switchProps} />
+}
+
+const meta = {
+    component: BaseComponent,
+    argTypes: {
+        variant: {
+            options: Object.keys(SWITCH_VARIANTS) as Array<keyof typeof SWITCH_VARIANTS>,
+            control: { type: 'radio' },
+        },
+        iconName: {
+            options: [null, ...Object.keys(iconMap)],
+            control: { type: 'select' },
+        },
+        iconColor: {
+            control: { type: 'text' },
+        },
+        indeterminate: {
+            options: [true, false],
+            control: { type: 'radio' },
+        },
+        size: {
+            options: [ComponentSizeType.medium, ComponentSizeType.small],
+            control: { type: 'radio' },
+        },
+        isDisabled: {
+            options: [true, false],
+            control: { type: 'radio' },
+        },
+        isLoading: {
+            options: [true, false],
+            control: { type: 'radio' },
+        },
+        tooltipContent: {
+            control: { type: 'text' },
+        },
+    },
+} satisfies Meta<BaseComponentPropsType>
+
+type Story = StoryObj<typeof meta>
+
+const COMMON_SWITCH_TEMPLATE: Story = {
+    args: {
+        name: 'switch-story',
+        dataTestId: 'switch-story',
+        variant: 'positive',
+        size: ComponentSizeType.medium,
+        isDisabled: false,
+        isLoading: false,
+        tooltipContent: '',
+        ariaLabel: 'Toggle',
+    },
+}
+
+export const RoundedSwitch: Story = {
+    ...COMMON_SWITCH_TEMPLATE,
+    argTypes: {
+        ...meta.argTypes,
+        iconName: {
+            options: [null],
+            control: { type: 'select' },
+        },
+    },
+    args: {
+        ...COMMON_SWITCH_TEMPLATE.args,
+        shape: 'rounded',
+    } satisfies BaseComponentPropsType,
+}
+
+export const SquareSwitch: Story = {
+    ...COMMON_SWITCH_TEMPLATE,
+    argTypes: {
+        ...meta.argTypes,
+        indeterminate: {
+            options: [false],
+            control: { type: 'radio' },
+        },
+    },
+    args: {
+        ...COMMON_SWITCH_TEMPLATE.args,
+        shape: 'square',
+        iconName: 'ic-check',
+    } satisfies BaseComponentPropsType,
+}
+
+export default meta
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export type SidebarConfigType = Record<`
`15`	`15`	`dataTestId: string`
`16`	`16`	`documentationHeader?: string`
`17`	`17`	`isEnterprise?: true`
	`18`	`+ hideInEAMode?: true`
`18`	`19`	`}`
`19`	`20`	`>`
`20`	`21`
Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,5 @@ export interface SSOConfigLoginList extends Pick<SSOConfigDTO, 'id' \| 'active' \|`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`export interface LoginFormType {`
`24`		`- loginList: SSOConfigLoginList[]`
	`24`	`+ loginList: SSOConfigDTO[]`
`25`	`25`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2863,6 +2863,10 @@ button.anchor {`
`2863`	`2863`	`width: 10px;`
`2864`	`2864`	`}`
`2865`	`2865`
	`2866`	`+.w-12 {`
	`2867`	`+ width: 12px;`
	`2868`	`+}`
	`2869`	`+`
`2866`	`2870`	`.w-14 {`
`2867`	`2871`	`width: 14px;`
`2868`	`2872`	`}`