Skip to content

Commit fbcbfbb

Browse files
AbhishekA1509AbhishekA1509
committed
feat: replace Toggle with DTSwitch in multiple components for consistency
1 parent 3d94381 commit fbcbfbb

File tree

4 files changed

+47
-60
lines changed

4 files changed

+47
-60
lines changed

‎src/components/CIPipelineN/Build.tsx

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React, { useContext } from 'react'
18-
import { Progressing, Toggle, CiPipelineSourceTypeOption, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
17+
import { useContext } from 'react'
18+
import { Progressing, CiPipelineSourceTypeOption, CustomInput, DTSwitch } from '@devtron-labs/devtron-fe-common-lib'
1919
import { SourceTypeMap, ViewType } from '../../config'
2020
import { createWebhookConditionList } from '../ciPipeline/ciPipeline.service'
2121
import { SourceMaterials } from '../ciPipeline/SourceMaterials'
@@ -233,35 +233,30 @@ export const Build = ({
233233
)
234234
}
235235

236-
const renderScanner = () => {
237-
return (
238-
<>
239-
<hr />
240-
<div>
241-
<div
242-
className="en-2 bw-1 br-4 pt-12 pb-12 pl-16 pr-12"
243-
style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}
244-
>
245-
<BugScanner />
246-
<div>
247-
<p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for vulnerabilities</p>
248-
<p className="fs-13 lh-18 mb-0 fs-12">
249-
Perform security scan after container image is built.
250-
</p>
251-
</div>
252-
<div className="mt-4" style={{ width: '32px', height: '20px' }}>
253-
<Toggle
254-
disabled={window._env_.FORCE_SECURITY_SCANNING && formData.scanEnabled}
255-
selected={formData.scanEnabled}
256-
onSelect={handleScanToggle}
257-
dataTestId="create-build-pipeline-scan-vulnerabilities-toggle"
258-
/>
259-
</div>
236+
const renderScanner = () => (
237+
<>
238+
<hr />
239+
<div>
240+
<div
241+
className="en-2 bw-1 br-4 pt-12 pb-12 pl-16 pr-12"
242+
style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}
243+
>
244+
<BugScanner />
245+
<div>
246+
<p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for vulnerabilities</p>
247+
<p className="fs-13 lh-18 mb-0 fs-12">Perform security scan after container image is built.</p>
260248
</div>
249+
<DTSwitch
250+
isDisabled={window._env_.FORCE_SECURITY_SCANNING && formData.scanEnabled}
251+
ariaLabel="Toggle scan for security vulnerabilities"
252+
isChecked={formData.scanEnabled}
253+
onChange={handleScanToggle}
254+
name="create-build-pipeline-scan-vulnerabilities-toggle"
255+
/>
261256
</div>
262-
</>
263-
)
264-
}
257+
</div>
258+
</>
259+
)
265260

266261
return pageState === ViewType.LOADING.toString() ? (
267262
<div style={{ minHeight: '200px' }} className="flex">

‎src/components/cdPipeline/PullImageDigestToggle.tsx

Lines changed: 10 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import Tippy from '@tippyjs/react'
18-
19-
import { ConditionalWrap, Toggle } from '@devtron-labs/devtron-fe-common-lib'
17+
import { DTSwitch } from '@devtron-labs/devtron-fe-common-lib'
2018

2119
import { ReactComponent as DockerWithImage } from '../../assets/icons/ic-docker-with-image.svg'
2220
import { DIGEST_DISABLE_TOGGLE_MESSAGE_FOR_PIPELINE, DIGEST_DISABLE_TOGGLE_MESSAGE_GLOBAL_ONLY } from '../../config'
@@ -39,26 +37,6 @@ function PullImageDigestToggle({ formData, setFormData }: PullImageDigestToggleT
3937
return text
4038
}
4139

42-
const renderDogestToggle = () => (
43-
<ConditionalWrap
44-
condition={formData.isDigestEnforcedForEnv}
45-
wrap={(children) => (
46-
<Tippy className="default-tt w-200" content={getContentText()}>
47-
<div>{children}</div>
48-
</Tippy>
49-
)}
50-
>
51-
<div className={`w-32 h-20 ${formData.isDigestEnforcedForEnv ? 'dc__opacity-0_4' : ''}`}>
52-
<Toggle
53-
selected={formData.isDigestEnforcedForPipeline || formData.isDigestEnforcedForEnv}
54-
onSelect={handleImageDigestToggle}
55-
dataTestId="create-build-pipeline-image-pull-digest-toggle"
56-
disabled={formData.isDigestEnforcedForEnv}
57-
/>
58-
</div>
59-
</ConditionalWrap>
60-
)
61-
6240
const renderImageDigestBody = (): JSX.Element => (
6341
<div className="fs-13">
6442
<div className="flex dc__content-space w-100 cursor flex top">
@@ -73,7 +51,15 @@ function PullImageDigestToggle({ formData, setFormData }: PullImageDigestToggleT
7351
</div>
7452
</div>
7553
</div>
76-
{renderDogestToggle()}
54+
55+
<DTSwitch
56+
name="create-build-pipeline-image-pull-digest-toggle"
57+
ariaLabel="Toggle pull image with digest"
58+
isDisabled={formData.isDigestEnforcedForEnv}
59+
tooltipContent={formData.isDigestEnforcedForEnv ? getContentText() : null}
60+
onChange={handleImageDigestToggle}
61+
isChecked={formData.isDigestEnforcedForPipeline || formData.isDigestEnforcedForEnv}
62+
/>
7763
</div>
7864
<hr />
7965
</div>

‎src/components/charts/MultiChartSummary.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
* limitations under the License.
1515
*/
1616

17-
import React from 'react'
18-
import { noop, Toggle } from '@devtron-labs/devtron-fe-common-lib'
17+
import React, { useRef } from 'react'
18+
import { DTSwitch, DTSwitchProps, getUniqueId, noop, Toggle } 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'
@@ -116,9 +116,7 @@ const MultiChartSummary: React.FC<MultiChartSummaryProps> = ({
116116
}
117117
key={index}
118118
remove={removeChart ? (e) => removeChart(index) : null}
119-
toggleChart={
120-
toggleChart && configureChartIndex !== index ? (e) => toggleChart(index) : null
121-
}
119+
toggleChart={toggleChart && configureChartIndex !== index ? () => toggleChart(index) : null}
122120
chart={chart}
123121
selected={configureChartIndex === index}
124122
getChartVersionsAndValues={
@@ -139,7 +137,7 @@ interface SelectedChartWidget {
139137
remove?: (...args) => void
140138
selectChartVersion?: (...args) => void
141139
selectChartValues?: (...args) => void
142-
toggleChart?: (...args) => void
140+
toggleChart?: DTSwitchProps['onChange']
143141
selectChart?: (...args) => void
144142
getChartVersionsAndValues?: (...args) => Promise<void>
145143
selected: boolean
@@ -159,6 +157,7 @@ const SelectedChartWidget: React.FC<SelectedChartWidget> = ({
159157
hideDeployedValues,
160158
index,
161159
}) => {
160+
const toggleName = useRef(getUniqueId())
162161
const {
163162
chartMetaData: { chartName, chartRepoName, icon },
164163
kind,
@@ -351,7 +350,13 @@ const SelectedChartWidget: React.FC<SelectedChartWidget> = ({
351350
</div>
352351
) : toggleChart ? (
353352
<div className="toggle-container">
354-
<Toggle onSelect={toggleChart} selected={isEnabled} />
353+
<DTSwitch
354+
name={toggleName.current}
355+
dataTestId={`${chartRepoName}-${chartName}-toggle`}
356+
ariaLabel={`Toggle chart ${chartRepoName}/${chartName}`}
357+
isChecked={isEnabled}
358+
onChange={toggleChart}
359+
/>
355360
</div>
356361
) : (
357362
<span />

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ const ChartListPopUpRow = ({
142142
{isToggleLoading ? (
143143
<Progressing size={16} />
144144
) : (
145+
// On click of source
145146
<List.Toggle
146147
isButtonDisabled={!list.isEditable}
147148
onSelect={onSelectToggle}

0 commit comments

Comments
 (0)