Skip to content

Commit 67a199b

Browse files
AbhishekA1509AbhishekA1509
committed
feat: replace Toggle with DTSwitch in multiple components for consistency
1 parent 673a76a commit 67a199b

File tree

6 files changed

+83
-111
lines changed

6 files changed

+83
-111
lines changed

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

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

‎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/cluster/ClusterForm.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
ComponentSizeType,
3030
CustomInput,
3131
DEFAULT_SECRET_PLACEHOLDER,
32+
DTSwitch,
3233
GenericFilterEmptyState,
3334
Icon,
3435
InfoBlock,
@@ -41,7 +42,6 @@ import {
4142
Textarea,
4243
ToastManager,
4344
ToastVariantType,
44-
Toggle,
4545
useAsync,
4646
} from '@devtron-labs/devtron-fe-common-lib'
4747

@@ -894,9 +894,12 @@ const ClusterForm = ({
894894
<div className={`${getGrafanaModuleSectionClassName()} mt-20`}>
895895
<div className="dc__content-space flex">
896896
<span className="form__input-header">See metrics for applications in this cluster</span>
897-
<div className="w-32 h-20">
898-
<Toggle selected={prometheusToggleEnabled} onSelect={setPrometheusToggle} />
899-
</div>
897+
<DTSwitch
898+
name="toggle-configure-prometheus"
899+
ariaLabel="Toggle configure prometheus"
900+
isChecked={prometheusToggleEnabled}
901+
onChange={setPrometheusToggle}
902+
/>
900903
</div>
901904
<span className="cn-6 fs-12">
902905
Configure prometheus to see metrics like CPU, RAM, Throughput etc. for applications running

‎src/components/common/TLSConnectionForm/TLSConnectionForm.component.tsx

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
* See the License for the specific language governing permissions and
1414
* limitations under the License.
1515
*/
16-
import { Toggle } from '@devtron-labs/devtron-fe-common-lib'
16+
import { Collapse, DTSwitch } from '@devtron-labs/devtron-fe-common-lib'
1717

1818
import TLSInputField from './TLSInputField'
1919
import { TLSConnectionFormActionType, TLSConnectionFormProps } from './types'
@@ -45,51 +45,52 @@ const TLSConnectionForm = ({
4545
</p>
4646
</div>
4747

48-
<div className="h-20 w-32">
49-
<Toggle selected={enableTLSVerification} onSelect={handleToggle} />
50-
</div>
48+
<DTSwitch
49+
name="toggle-enable-tls-verification"
50+
ariaLabel="Toggle enable TLS verification"
51+
isChecked={enableTLSVerification}
52+
onChange={handleToggle}
53+
/>
5154
</div>
5255

53-
{enableTLSVerification && (
54-
<>
55-
<TLSInputField
56-
label="Certificate Authority Data"
57-
id="certificate-authority-data"
58-
placeholder="Enter CA data"
59-
error={caData.error}
60-
value={caData.value}
61-
isSensitive={isTLSInitiallyConfigured && isCADataPresent}
62-
handleChange={handleChange}
63-
updateAction={TLSConnectionFormActionType.UPDATE_CA_DATA}
64-
clearAction={TLSConnectionFormActionType.CLEAR_CA_DATA}
65-
showClearButton={isCADataPresent}
66-
/>
67-
<TLSInputField
68-
label="TLS Key"
69-
id="tls-key"
70-
placeholder="Enter TLS key"
71-
error={tlsKeyData.error}
72-
value={tlsKeyData.value}
73-
isSensitive={isTLSInitiallyConfigured && isTLSKeyDataPresent}
74-
handleChange={handleChange}
75-
updateAction={TLSConnectionFormActionType.UPDATE_KEY_DATA}
76-
clearAction={TLSConnectionFormActionType.CLEAR_KEY_DATA}
77-
showClearButton={isTLSKeyDataPresent}
78-
/>
79-
<TLSInputField
80-
label="TLS Certificate"
81-
id="tsl-certificate"
82-
placeholder="Enter TLS certificate"
83-
error={tlsCertData.error}
84-
value={tlsCertData.value}
85-
isSensitive={isTLSInitiallyConfigured && isTLSCertDataPresent}
86-
handleChange={handleChange}
87-
updateAction={TLSConnectionFormActionType.UPDATE_CERT_DATA}
88-
clearAction={TLSConnectionFormActionType.CLEAR_CERT_DATA}
89-
showClearButton={isTLSCertDataPresent}
90-
/>
91-
</>
92-
)}
56+
<Collapse expand={enableTLSVerification}>
57+
<TLSInputField
58+
label="Certificate Authority Data"
59+
id="certificate-authority-data"
60+
placeholder="Enter CA data"
61+
error={caData.error}
62+
value={caData.value}
63+
isSensitive={isTLSInitiallyConfigured && isCADataPresent}
64+
handleChange={handleChange}
65+
updateAction={TLSConnectionFormActionType.UPDATE_CA_DATA}
66+
clearAction={TLSConnectionFormActionType.CLEAR_CA_DATA}
67+
showClearButton={isCADataPresent}
68+
/>
69+
<TLSInputField
70+
label="TLS Key"
71+
id="tls-key"
72+
placeholder="Enter TLS key"
73+
error={tlsKeyData.error}
74+
value={tlsKeyData.value}
75+
isSensitive={isTLSInitiallyConfigured && isTLSKeyDataPresent}
76+
handleChange={handleChange}
77+
updateAction={TLSConnectionFormActionType.UPDATE_KEY_DATA}
78+
clearAction={TLSConnectionFormActionType.CLEAR_KEY_DATA}
79+
showClearButton={isTLSKeyDataPresent}
80+
/>
81+
<TLSInputField
82+
label="TLS Certificate"
83+
id="tsl-certificate"
84+
placeholder="Enter TLS certificate"
85+
error={tlsCertData.error}
86+
value={tlsCertData.value}
87+
isSensitive={isTLSInitiallyConfigured && isTLSCertDataPresent}
88+
handleChange={handleChange}
89+
updateAction={TLSConnectionFormActionType.UPDATE_CERT_DATA}
90+
clearAction={TLSConnectionFormActionType.CLEAR_CERT_DATA}
91+
showClearButton={isTLSCertDataPresent}
92+
/>
93+
</Collapse>
9394
</div>
9495
)
9596
}

‎src/components/v2/devtronStackManager/DevtronStackManager.component.tsx

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import {
2222
VisibleModal,
2323
Checkbox,
2424
CHECKBOX_VALUE,
25-
Toggle,
2625
ConfirmationDialog,
2726
IMAGE_SCAN_TOOL,
2827
PageHeader,
@@ -36,8 +35,8 @@ import {
3635
DISCORD_LINK,
3736
InstallationType,
3837
DocLink,
38+
DTSwitch,
3939
} from '@devtron-labs/devtron-fe-common-lib'
40-
import Tippy from '@tippyjs/react'
4140
import {
4241
InstallationWrapperType,
4342
ModuleDetails,
@@ -536,7 +535,7 @@ const InstallationStatus = ({
536535
<span className="mt-12">You're using the latest version of Devtron.</span>
537536
</div>
538537
) : (
539-
<div className="flexbox">
538+
<div className="flexbox dc__content-space">
540539
<div className="module-details__installtion-success flex left dc__content-space">
541540
<div>
542541
<span className="flexbox column left" data-testid="module-status-installed">
@@ -552,15 +551,13 @@ const InstallationStatus = ({
552551
</div>
553552
</div>
554553
{moduleNotEnabled ? (
555-
<Tippy className="default-tt" arrow placement="top" content="Enable integration">
556-
<div className="ml-auto" style={{ width: '30px', height: '19px' }}>
557-
<Toggle
558-
dataTestId="toggle-button"
559-
onSelect={handleToggleButton}
560-
selected={toggled}
561-
/>
562-
</div>
563-
</Tippy>
554+
<DTSwitch
555+
name="toggle-enable-integration"
556+
ariaLabel="Toggle enable integration"
557+
tooltipContent="Enable integration"
558+
isChecked={toggled}
559+
onChange={handleToggleButton}
560+
/>
564561
) : (
565562
''
566563
)}

0 commit comments

Comments
 (0)