Skip to content

Commit 54ad6bd

Browse files
AbhishekA1509AbhishekA1509
authored
Merge pull request #2744 from devtron-labs/feat/replace-toggle
feat: replace toggle
2 parents dbe29ef + 986ef4a commit 54ad6bd

File tree

24 files changed

+224
-277
lines changed

24 files changed

+224
-277
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.14.2-pre-3",
7+
"@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-0",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigDryRun.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@ const ConfigDryRun = ({
131131
)}
132132

133133
<ToggleResolveScopedVariables
134+
name="resolve-scoped-variables-dry-run-view"
134135
handleToggleScopedVariablesView={handleToggleResolveScopedVariables}
135136
resolveScopedVariables={resolveScopedVariables}
136137
isDisabled={!!errorInfo}

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,7 @@ const ConfigToolbar = ({
313313
<InvalidYAMLTippyWrapper parsingError={parsingError} restoreLastSavedYAML={restoreLastSavedYAML}>
314314
<div>
315315
<ToggleResolveScopedVariables
316+
name="resolve-scoped-variables"
316317
resolveScopedVariables={resolveScopedVariables}
317318
handleToggleScopedVariablesView={handleToggleScopedVariablesView}
318319
isDisabled={isDisabled}

‎src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ export const ConfigMapSecretDryRun = ({
224224
)}
225225
<div className="dc__border-right-n1 dc__align-self-stretch mt-2 mb-2" />
226226
<ToggleResolveScopedVariables
227+
name="resolve-scoped-variables-dry-run-view"
227228
resolveScopedVariables={resolveScopedVariables}
228229
handleToggleScopedVariablesView={handleToggleScopedVariablesView}
229230
isDisabled={areScopeVariablesResolving}

‎src/assets/icons/ic-asterisk.svg

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎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/CIPipelineN/CreatePluginModal/CreatePluginInputVariableContainer.tsx

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

17-
import { Toggle } from '@devtron-labs/devtron-fe-common-lib'
18-
19-
import { ReactComponent as ICAsterisk } from '@Icons/ic-asterisk.svg'
17+
import { DTSwitch } from '@devtron-labs/devtron-fe-common-lib'
2018

2119
import { CreatePluginActionType, CreatePluginInputVariableContainerProps, InputVariableItemProps } from './types'
2220

@@ -31,17 +29,16 @@ const InputVariableItem = ({ handleChange, index, name, allowEmptyValue }: Input
3129
{name}
3230
</h4>
3331

34-
<div className="w-28 h-18">
35-
<Toggle
36-
selected={!allowEmptyValue}
37-
onSelect={handleAllowEmptyValueToggle}
38-
name={`toggle-${name}-allow-empty-value`}
39-
rootClassName="mb-0 dc__toggle-square-toggle"
40-
Icon={ICAsterisk}
41-
iconClass={`bg__primary ${!allowEmptyValue ? 'fcr-5' : 'fcn-6'}`}
42-
color={!allowEmptyValue ? 'var(--B300)' : 'var(--N200)'}
43-
/>
44-
</div>
32+
<DTSwitch
33+
name={`toggle-is-${name}-mandatory`}
34+
onChange={handleAllowEmptyValueToggle}
35+
ariaLabel={`Toggle is ${name} mandatory`}
36+
isChecked={!allowEmptyValue}
37+
shape="square"
38+
variant="theme"
39+
iconName="ic-asterisk"
40+
iconColor="R500"
41+
/>
4542
</div>
4643
)
4744
}

‎src/components/CIPipelineN/CustomImageTags.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@
1717
import { useState } from 'react'
1818
import Tippy from '@tippyjs/react'
1919
import {
20+
Collapse,
21+
DTSwitch,
2022
OptionType,
2123
RegistryIcon,
2224
RegistryType,
2325
SelectPicker,
2426
Textarea,
25-
Toggle,
2627
} from '@devtron-labs/devtron-fe-common-lib'
2728
import { CustomImageTagsType } from './CustomImageTag.type'
2829
import { ValidationRules } from '../ciPipeline/validationRules'
2930
import { CustomErrorMessage, REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
30-
import { ReactComponent as Warning } from '../../assets/icons/ic-warning.svg'
3131
import { ReactComponent as Edit } from '../../assets/icons/ic-pencil.svg'
3232
import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
3333
import { ReactComponent as GeneratedImage } from '../../assets/icons/ic-generated-image.svg'
@@ -263,15 +263,16 @@ function CustomImageTags({
263263
</div>
264264
</div>
265265
</div>
266-
<div className="" style={{ width: '32px', height: '20px' }}>
267-
<Toggle
268-
selected={formData.enableCustomTag}
269-
onSelect={handleCustomTagToggle}
270-
dataTestId="create-build-pipeline-custom-tag-enabled-toggle"
271-
/>
272-
</div>
266+
<DTSwitch
267+
name="create-build-pipeline-custom-tag-enabled-toggle"
268+
ariaLabel="Toggle enable custom image tag"
269+
isChecked={formData.enableCustomTag}
270+
onChange={handleCustomTagToggle}
271+
/>
273272
</div>
274-
{formData.enableCustomTag && renderCustomImageDetails()}
273+
<Collapse expand={formData.enableCustomTag}>
274+
{renderCustomImageDetails()}
275+
</Collapse>
275276
<hr />
276277
</div>
277278
)

‎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/cdPipeline/PullImageDigestToggle.tsx

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,13 @@
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'
2321
import { PullImageDigestToggleType } from './types'
2422

25-
function PullImageDigestToggle({ formData, setFormData }: PullImageDigestToggleType): JSX.Element {
23+
const PullImageDigestToggle = ({ formData, setFormData }: PullImageDigestToggleType): JSX.Element => {
2624
const handleImageDigestToggle = (): void => {
2725
const _formData = { ...formData }
2826
_formData.isDigestEnforcedForPipeline = !_formData.isDigestEnforcedForPipeline
@@ -39,27 +37,7 @@ 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-
62-
const renderImageDigestBody = (): JSX.Element => (
40+
return (
6341
<div className="fs-13">
6442
<div className="flex dc__content-space w-100 cursor flex top">
6543
<div className="flex left">
@@ -73,12 +51,18 @@ 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>
8066
)
81-
82-
return renderImageDigestBody()
8367
}
8468
export default PullImageDigestToggle

0 commit comments

Comments
 (0)