Skip to content

Commit cd70524

Browse files
AbhishekA1509AbhishekA1509
committed
feat: replace Toggle with DTSwitch in various components for improved consistency and functionality
1 parent 67a199b commit cd70524

File tree

9 files changed

+79
-95
lines changed

9 files changed

+79
-95
lines changed

‎src/components/ClusterNodes/ClusterTerminal.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
CHECKBOX_VALUE,
2323
ComponentSizeType,
2424
get,
25+
getIsRequestAborted,
2526
NodeTaintType,
2627
noop,
2728
OptionType,
@@ -198,6 +199,10 @@ const ClusterTerminal = ({
198199
}
199200

200201
function sessionError(error): void {
202+
if (getIsRequestAborted(error)) {
203+
return
204+
}
205+
201206
showError(error)
202207
if (error instanceof ServerErrors && Array.isArray(error.errors)) {
203208
error.errors.forEach(({ userMessage }) => {
@@ -885,6 +890,10 @@ const ClusterTerminal = ({
885890
return nodeGroupOptions
886891
}
887892

893+
const toggleDebugMode = (): void => {
894+
setDebugMode((prev) => !prev)
895+
}
896+
888897
const selectionListData: TerminalSelectionListDataType = {
889898
firstRow: [
890899
{
@@ -990,7 +999,7 @@ const ClusterTerminal = ({
990999
type: TerminalWrapperType.DEBUG_MODE_TOGGLE_BUTTON,
9911000
hideTerminalStripComponent: hideShell || selectedNodeName.value === AUTO_SELECT.value,
9921001
showInfoTippy: true,
993-
onToggle: setDebugMode,
1002+
onToggle: toggleDebugMode,
9941003
isEnabled: debugMode,
9951004
},
9961005
{

‎src/components/charts/MultiChartSummary.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616

1717
import React, { useRef } from 'react'
18-
import { DTSwitch, DTSwitchProps, getUniqueId, noop, Toggle } from '@devtron-labs/devtron-fe-common-lib'
18+
import { DTSwitch, DTSwitchProps, getUniqueId, noop } from '@devtron-labs/devtron-fe-common-lib'
1919
import { Select, Pencil } from '../common'
2020
import placeHolder from '../../assets/icons/ic-plc-chart.svg'
2121
import { ChartGroupEntry, ChartValuesNativeType, ChartVersionType, MultiChartSummaryProps } from './charts.types'

‎src/components/charts/list/ChartListPopUpRow.tsx

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import { useState } from 'react'
1818
import Tippy from '@tippyjs/react'
1919
import {
20+
DTSwitch,
2021
Progressing,
2122
RegistryIcon,
2223
RegistryType,
@@ -94,6 +95,14 @@ const ChartListPopUpRow = ({
9495
}
9596
}
9697

98+
const getToggleChartRepoTooltipContent = () => {
99+
if (enabled) {
100+
return `${list.isEditable ? 'Disable' : "Can't disable"} chart repository`
101+
}
102+
103+
return 'Enable chart repository'
104+
}
105+
97106
return (
98107
<div className="chart-list__row">
99108
<List key={`chart-row-${index}`}>
@@ -124,33 +133,17 @@ const ChartListPopUpRow = ({
124133
</a>
125134
</Tippy>
126135

127-
<Tippy
128-
className="default-tt"
129-
arrow={false}
130-
placement="bottom"
131-
content={
132-
enabled
133-
? `${list.isEditable ? 'Disable' : "Can't disable"} chart repository`
134-
: 'Enable chart repository'
135-
}
136-
>
137-
<span
138-
data-testid={`${'name'}-chart-repo-toggle-button`}
139-
style={{ marginLeft: 'auto' }}
140-
className={`${list.isEditable ? 'cursor-not-allowed' : ''}`}
141-
>
142-
{isToggleLoading ? (
143-
<Progressing size={16} />
144-
) : (
145-
// On click of source
146-
<List.Toggle
147-
isButtonDisabled={!list.isEditable}
148-
onSelect={onSelectToggle}
149-
enabled={enabled}
150-
/>
151-
)}
152-
</span>
153-
</Tippy>
136+
<div className="ml-auto">
137+
<DTSwitch
138+
name={`${list.name}-chart-repo-toggle-button`}
139+
ariaLabel={`${list.name} chart repository toggle button`}
140+
isDisabled={!list.isEditable}
141+
onChange={onSelectToggle}
142+
isChecked={enabled}
143+
isLoading={isToggleLoading}
144+
tooltipContent={getToggleChartRepoTooltipContent()}
145+
/>
146+
</div>
154147
</List>
155148
</div>
156149
)

‎src/components/common/List/List.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,6 @@ const Title = ({ title = '', subtitle = '', style = {}, className = '', tag = ''
3939
)
4040
}
4141

42-
const ListToggle = ({ onSelect, enabled = false }) => {
43-
return <Toggle onSelect={onSelect} selected={enabled} />
44-
}
45-
4642
const DropDown = ({ className = '', style = {}, src = null, ...props }) => {
4743
if (React.isValidElement(src)) {
4844
return src
@@ -52,7 +48,6 @@ const DropDown = ({ className = '', style = {}, src = null, ...props }) => {
5248

5349
List.Logo = Logo
5450
List.Title = Title
55-
List.Toggle = ListToggle
5651
List.DropDown = DropDown
5752

5853
export default function List({ children = null, className = '', ...props }) {

‎src/components/gitProvider/GitProvider.tsx

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
ErrorScreenNotAuthorized,
2323
VisibleModal,
2424
useEffectAfterMount,
25-
stopPropagation,
2625
useAsync,
2726
CustomInput,
2827
DEFAULT_SECRET_PLACEHOLDER,
@@ -41,6 +40,8 @@ import {
4140
PasswordField,
4241
Icon,
4342
InfoBlock,
43+
DTSwitchProps,
44+
DTSwitch,
4445
} from '@devtron-labs/devtron-fe-common-lib'
4546
import Tippy from '@tippyjs/react'
4647
import {
@@ -252,7 +253,7 @@ const CollapsedList = ({
252253
...props
253254
}) => {
254255
const [collapsed, toggleCollapse] = useState(true)
255-
const [enabled, toggleEnabled] = useState<boolean>(active)
256+
const [enabled, setEnabled] = useState<boolean>(active)
256257
const [loading, setLoading] = useState(false)
257258
const selectedGitHost = hostListOption.find((p) => p.value === gitHostId)
258259
const [gitHost, setGithost] = useState({ value: selectedGitHost, error: '' })
@@ -306,6 +307,11 @@ const CollapsedList = ({
306307
toggleCollapse((t) => !t)
307308
}
308309

310+
const handleProviderToggle: DTSwitchProps['onChange'] = (e) => {
311+
e.stopPropagation()
312+
setEnabled((prev) => !prev)
313+
}
314+
309315
return (
310316
<article
311317
className={`collapsed-list ${id ? 'collapsed-list--chart' : 'collapsed-list--git dashed'} collapsed-list--${
@@ -325,27 +331,21 @@ const CollapsedList = ({
325331
)}
326332
{!id && collapsed && <Add className="icon-dim-24 fcb-5 dc__vertical-align-middle" />}
327333
</List.Logo>
328-
<div className="flex left">
334+
<div className="flexbox dc__align-items-center dc__content-space">
329335
<List.Title
330336
style={{ color: !id && !collapsed ? 'var(--N900)' : '' }}
331337
title={id && !collapsed ? 'Edit git account' : name || 'Add git account'}
332338
subtitle={collapsed ? url : null}
333339
/>
334340
{id && (
335-
<Tippy
336-
className="default-tt"
337-
arrow={false}
338-
placement="bottom"
339-
content={enabled ? 'Disable git account' : 'Enable git account'}
340-
>
341-
<span
342-
onClick={stopPropagation}
343-
style={{ marginLeft: 'auto' }}
344-
data-testid={`${name}-toggle-button`}
345-
>
346-
{loading ? <Progressing /> : <List.Toggle onSelect={toggleEnabled} enabled={enabled} />}
347-
</span>
348-
</Tippy>
341+
<DTSwitch
342+
name={`${name}-toggle-button`}
343+
ariaLabel="Toggle git provider"
344+
tooltipContent={`${enabled ? 'Disable' : 'Enable'} git account`}
345+
isLoading={loading}
346+
isChecked={enabled}
347+
onChange={handleProviderToggle}
348+
/>
349349
)}
350350
</div>
351351
{id && (
@@ -795,7 +795,6 @@ const GitForm = ({
795795
const closeConfirmationModal = () => setConfirmation(false)
796796
const showConfirmationModal = () => setConfirmation(true)
797797

798-
799798
return (
800799
<form onSubmit={handleOnSubmit} className="git-form" autoComplete="off">
801800
<div className="mb-16">
@@ -829,7 +828,7 @@ const GitForm = ({
829828
onClick: onClickAddGitAccountHandler,
830829
variant: ButtonVariantType.borderLess,
831830
dataTestId: 'add-git-host',
832-
startIcon: <Icon name="ic-add" color={null} />
831+
startIcon: <Icon name="ic-add" color={null} />,
833832
},
834833
}}
835834
onChange={(e) => handleGithostChange(e)}
@@ -880,9 +879,7 @@ const GitForm = ({
880879
versa.
881880
</div>
882881
{state.auth.value === AuthenticationType.ANONYMOUS && (
883-
<InfoBlock
884-
description="Applications using ‘anonymous’ git accounts, will be able to access only ‘public repositories’ from the git account."
885-
/>
882+
<InfoBlock description="Applications using ‘anonymous’ git accounts, will be able to access only ‘public repositories’ from the git account." />
886883
)}
887884
{state.auth.error && <div className="form__error">{state.auth.error}</div>}
888885
{state.auth.value === 'USERNAME_PASSWORD' && (
@@ -973,14 +970,16 @@ const GitForm = ({
973970
</div>
974971
</div>
975972

976-
{confirmation && <DeleteConfirmationModal
977-
title={state.name.value}
978-
onDelete={onDelete}
979-
component={DeleteComponentsName.GitProvider}
980-
renderCannotDeleteConfirmationSubTitle={DC_GIT_PROVIDER_CONFIRMATION_MESSAGE}
981-
closeConfirmationModal={closeConfirmationModal}
982-
errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.INTERNAL_SERVER_ERROR}
983-
/>}
973+
{confirmation && (
974+
<DeleteConfirmationModal
975+
title={state.name.value}
976+
onDelete={onDelete}
977+
component={DeleteComponentsName.GitProvider}
978+
renderCannotDeleteConfirmationSubTitle={DC_GIT_PROVIDER_CONFIRMATION_MESSAGE}
979+
closeConfirmationModal={closeConfirmationModal}
980+
errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.INTERNAL_SERVER_ERROR}
981+
/>
982+
)}
984983
</form>
985984
)
986985
}

‎src/components/globalConfigurations/GlobalConfiguration.tsx

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { Route, NavLink, Router, Switch, Redirect, useHistory, useLocation } fro
1919
import {
2020
showError,
2121
Progressing,
22-
Toggle,
2322
ConditionalWrap,
2423
TippyCustomized,
2524
TippyTheme,
@@ -154,7 +153,9 @@ export default function GlobalConfiguration(props) {
154153
}
155154

156155
return (
157-
<main className={`global-configuration ${shouldHidePageHeaderAndSidebar ? 'global-configuration--full-content' : ''}`}>
156+
<main
157+
className={`global-configuration ${shouldHidePageHeaderAndSidebar ? 'global-configuration--full-content' : ''}`}
158+
>
158159
{!shouldHidePageHeaderAndSidebar && <PageHeader headerName="Global Configurations" />}
159160
<Router history={useHistory()}>
160161
<GlobalConfigurationProvider>
@@ -819,23 +820,6 @@ const Title = ({ title = '', subtitle = '', style = {}, className = '', tag = ''
819820
)
820821
}
821822

822-
const ListToggle = ({ onSelect, enabled = false, isButtonDisabled = false, ...props }) => {
823-
const handleToggle = () => {
824-
if (!isButtonDisabled) {
825-
onSelect(!enabled)
826-
}
827-
}
828-
return (
829-
<Toggle
830-
dataTestId="toggle-button"
831-
{...props}
832-
onSelect={handleToggle}
833-
selected={enabled}
834-
disabled={isButtonDisabled}
835-
/>
836-
)
837-
}
838-
839823
const DropDown = ({ className = '', dataTestid = '', style = {}, src = null, ...props }) => {
840824
if (isValidElement(src)) {
841825
return src
@@ -866,5 +850,4 @@ export const List = ({
866850

867851
List.Logo = Logo
868852
List.Title = Title
869-
List.Toggle = ListToggle
870853
List.DropDown = DropDown

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.scss

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,3 @@
119119
opacity: 0;
120120
}
121121
}
122-
123-
.toggle-icon-dim {
124-
width: 24px;
125-
height: 16px;
126-
}

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.type.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export interface TerminalWrapperComponentType {
4848
setTerminalCleared?: () => void
4949
buttonSelectionState?: string
5050
setManifestButtonState?: (button: EditModeType) => void
51-
onToggle?: (value: boolean) => void
51+
onToggle?: () => void
5252
isEnabled?: boolean
5353
dataTestId?: string
5454
classNamePrefix?: string
@@ -176,6 +176,6 @@ export interface EditManifestType {
176176
export interface DebugModeType {
177177
hideTerminalStripComponent?: boolean
178178
showInfoTippy?: boolean
179-
onToggle: (value: boolean) => void
179+
onToggle: () => void
180180
isEnabled: boolean
181181
}

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/terminal.utils.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,13 @@
1717
import CreatableSelect from 'react-select/creatable'
1818
import Tippy from '@tippyjs/react'
1919

20-
import { InfoIconTippy, SelectPicker, SelectPickerVariantType, Toggle } from '@devtron-labs/devtron-fe-common-lib'
20+
import {
21+
ComponentSizeType,
22+
DTSwitch,
23+
InfoIconTippy,
24+
SelectPicker,
25+
SelectPickerVariantType,
26+
} from '@devtron-labs/devtron-fe-common-lib'
2127

2228
import { importComponentFromFELibrary } from '@Components/common'
2329

@@ -252,9 +258,13 @@ const debugModeToggleButton = (selectData: DebugModeType) => {
252258
/>
253259
)}
254260
<span>Debug Mode</span>
255-
<span className="toggle-icon-dim">
256-
<Toggle onSelect={selectData.onToggle} dataTestId="toggle-debug-mode" selected={selectData.isEnabled} />
257-
</span>
261+
<DTSwitch
262+
name="toggle-debug-mode"
263+
ariaLabel="Toggle debug mode"
264+
isChecked={selectData.isEnabled}
265+
onChange={selectData.onToggle}
266+
size={ComponentSizeType.small}
267+
/>
258268
</>
259269
)
260270
}

0 commit comments

Comments
 (0)