Merge branch 'develop' of https://github.com/devtron-labs/dashboard into fix/depandabot-issues

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.14.2-beta-1",
+        "@devtron-labs/devtron-fe-common-lib": "1.15.0-pre-1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

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

@@ -131,6 +131,7 @@ const ConfigDryRun = ({
                         )}
 
                         <ToggleResolveScopedVariables
+                            name="resolve-scoped-variables-dry-run-view"
                             handleToggleScopedVariablesView={handleToggleResolveScopedVariables}
                             resolveScopedVariables={resolveScopedVariables}
                             isDisabled={!!errorInfo}

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

@@ -313,6 +313,7 @@ const ConfigToolbar = ({
                     <InvalidYAMLTippyWrapper parsingError={parsingError} restoreLastSavedYAML={restoreLastSavedYAML}>
                         <div>
                             <ToggleResolveScopedVariables
+                                name="resolve-scoped-variables"
                                 resolveScopedVariables={resolveScopedVariables}
                                 handleToggleScopedVariablesView={handleToggleScopedVariablesView}
                                 isDisabled={isDisabled}

src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx

@@ -194,12 +194,13 @@ export const ConfigMapSecretDryRun = ({
                     areScopeVariablesResolving={areScopeVariablesResolving}
                     fallbackMergeStrategy={DEFAULT_MERGE_STRATEGY}
                 />
-                {renderExternalInfo(
-                    dryRunConfigMapSecretData.externalType,
-                    dryRunConfigMapSecretData.external,
-                    componentType,
-                    'mr-16 ml-16',
-                )}
+                <div className="ml-16 mr-16">
+                    {renderExternalInfo(
+                        dryRunConfigMapSecretData.externalType,
+                        dryRunConfigMapSecretData.external,
+                        componentType,
+                    )}
+                </div>
             </>
         )
     }
@@ -224,6 +225,7 @@ export const ConfigMapSecretDryRun = ({
                     )}
                     <div className="dc__border-right-n1 dc__align-self-stretch mt-2 mb-2" />
                     <ToggleResolveScopedVariables
+                        name="resolve-scoped-variables-dry-run-view"
                         resolveScopedVariables={resolveScopedVariables}
                         handleToggleScopedVariablesView={handleToggleScopedVariablesView}
                         isDisabled={areScopeVariablesResolving}

src/Pages/Shared/ConfigMapSecret/helpers.tsx

@@ -23,10 +23,8 @@ import {
     DocLink,
     Icon,
     InfoBlock,
-    InfoColourBar,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as InfoIcon } from '@Icons/info-filled.svg'
 import { URLS } from '@Config/routes'
 
 import { EXTERNAL_INFO_TEXT } from './constants'
@@ -54,20 +52,12 @@ export const renderExternalInfo = (
     externalType: CMSecretExternalType,
     external: boolean,
     componentType: CMSecretComponentType,
-    className?: string,
 ) =>
     externalType === CMSecretExternalType.KubernetesSecret ||
     (componentType === CMSecretComponentType.ConfigMap && external) ? (
-        <InfoColourBar
-            classname={`info_bar ${className || ''}`}
-            message={
-                <div className="flex column left">
-                    <h4 className="m-0 lh-20 dc__info-title">{EXTERNAL_INFO_TEXT[componentType].title}</h4>
-                    <p className="m-0 lh-20 dc__info-subtitle">{EXTERNAL_INFO_TEXT[componentType].infoText}</p>
-                </div>
-            }
-            Icon={InfoIcon}
-            iconSize={20}
+        <InfoBlock
+            heading={EXTERNAL_INFO_TEXT[componentType].title}
+            description={EXTERNAL_INFO_TEXT[componentType].infoText}
         />
     ) : null
 

src/assets/icons/ic-asterisk.svg

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import React, { useContext } from 'react'
-import { Progressing, Toggle, CiPipelineSourceTypeOption, CustomInput } from '@devtron-labs/devtron-fe-common-lib'
+import { useContext } from 'react'
+import { Progressing, CiPipelineSourceTypeOption, CustomInput, DTSwitch } from '@devtron-labs/devtron-fe-common-lib'
 import { SourceTypeMap, ViewType } from '../../config'
 import { createWebhookConditionList } from '../ciPipeline/ciPipeline.service'
 import { SourceMaterials } from '../ciPipeline/SourceMaterials'
@@ -233,35 +233,30 @@ export const Build = ({
         )
     }
 
-    const renderScanner = () => {
-        return (
-            <>
-                <hr />
-                <div>
-                    <div
-                        className="en-2 bw-1 br-4 pt-12 pb-12 pl-16 pr-12"
-                        style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}
-                    >
-                        <BugScanner />
-                        <div>
-                            <p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for vulnerabilities</p>
-                            <p className="fs-13 lh-18 mb-0 fs-12">
-                                Perform security scan after container image is built.
-                            </p>
-                        </div>
-                        <div className="mt-4" style={{ width: '32px', height: '20px' }}>
-                            <Toggle
-                                disabled={window._env_.FORCE_SECURITY_SCANNING && formData.scanEnabled}
-                                selected={formData.scanEnabled}
-                                onSelect={handleScanToggle}
-                                dataTestId="create-build-pipeline-scan-vulnerabilities-toggle"
-                            />
-                        </div>
+    const renderScanner = () => (
+        <>
+            <hr />
+            <div>
+                <div
+                    className="en-2 bw-1 br-4 pt-12 pb-12 pl-16 pr-12"
+                    style={{ display: 'grid', gridTemplateColumns: '52px auto 32px' }}
+                >
+                    <BugScanner />
+                    <div>
+                        <p className="fs-13 lh-20 fw-6 cn-9 mb-4">Scan for vulnerabilities</p>
+                        <p className="fs-13 lh-18 mb-0 fs-12">Perform security scan after container image is built.</p>
                     </div>
+                    <DTSwitch
+                        isDisabled={window._env_.FORCE_SECURITY_SCANNING && formData.scanEnabled}
+                        ariaLabel="Toggle scan for security vulnerabilities"
+                        isChecked={formData.scanEnabled}
+                        onChange={handleScanToggle}
+                        name="create-build-pipeline-scan-vulnerabilities-toggle"
+                    />
                 </div>
-            </>
-        )
-    }
+            </div>
+        </>
+    )
 
     return pageState === ViewType.LOADING.toString() ? (
         <div style={{ minHeight: '200px' }} className="flex">

src/components/CIPipelineN/Build.tsx

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-import { Toggle } from '@devtron-labs/devtron-fe-common-lib'
-
-import { ReactComponent as ICAsterisk } from '@Icons/ic-asterisk.svg'
+import { DTSwitch } from '@devtron-labs/devtron-fe-common-lib'
 
 import { CreatePluginActionType, CreatePluginInputVariableContainerProps, InputVariableItemProps } from './types'
 
@@ -31,17 +29,16 @@ const InputVariableItem = ({ handleChange, index, name, allowEmptyValue }: Input
                 {name}
             </h4>
 
-            <div className="w-28 h-18">
-                <Toggle
-                    selected={!allowEmptyValue}
-                    onSelect={handleAllowEmptyValueToggle}
-                    name={`toggle-${name}-allow-empty-value`}
-                    rootClassName="mb-0 dc__toggle-square-toggle"
-                    Icon={ICAsterisk}
-                    iconClass={`bg__primary ${!allowEmptyValue ? 'fcr-5' : 'fcn-6'}`}
-                    color={!allowEmptyValue ? 'var(--B300)' : 'var(--N200)'}
-                />
-            </div>
+            <DTSwitch
+                name={`toggle-is-${name}-mandatory`}
+                onChange={handleAllowEmptyValueToggle}
+                ariaLabel={`Toggle is ${name} mandatory`}
+                isChecked={!allowEmptyValue}
+                shape="square"
+                variant="theme"
+                iconName="ic-asterisk"
+                iconColor="R500"
+            />
         </div>
     )
 }

src/components/CIPipelineN/CreatePluginModal/CreatePluginInputVariableContainer.tsx

@@ -17,17 +17,17 @@
 import { useState } from 'react'
 import Tippy from '@tippyjs/react'
 import {
+    Collapse,
+    DTSwitch,
     OptionType,
     RegistryIcon,
     RegistryType,
     SelectPicker,
     Textarea,
-    Toggle,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CustomImageTagsType } from './CustomImageTag.type'
 import { ValidationRules } from '../ciPipeline/validationRules'
 import { CustomErrorMessage, REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
-import { ReactComponent as Warning } from '../../assets/icons/ic-warning.svg'
 import { ReactComponent as Edit } from '../../assets/icons/ic-pencil.svg'
 import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
 import { ReactComponent as GeneratedImage } from '../../assets/icons/ic-generated-image.svg'
@@ -263,15 +263,16 @@ function CustomImageTags({
                             </div>
                         </div>
                     </div>
-                    <div className="" style={{ width: '32px', height: '20px' }}>
-                        <Toggle
-                            selected={formData.enableCustomTag}
-                            onSelect={handleCustomTagToggle}
-                            dataTestId="create-build-pipeline-custom-tag-enabled-toggle"
-                        />
-                    </div>
+                    <DTSwitch
+                        name="create-build-pipeline-custom-tag-enabled-toggle"
+                        ariaLabel="Toggle enable custom image tag"
+                        isChecked={formData.enableCustomTag}
+                        onChange={handleCustomTagToggle}
+                    />
                 </div>
-                {formData.enableCustomTag && renderCustomImageDetails()}
+                <Collapse expand={formData.enableCustomTag}>
+                    {renderCustomImageDetails()}
+                </Collapse>
                 <hr />
             </div>
         )

src/components/CIPipelineN/CustomImageTags.tsx

@@ -22,6 +22,7 @@ import {
     CHECKBOX_VALUE,
     ComponentSizeType,
     get,
+    getIsRequestAborted,
     NodeTaintType,
     noop,
     OptionType,
@@ -198,6 +199,10 @@ const ClusterTerminal = ({
     }
 
     function sessionError(error): void {
+        if (getIsRequestAborted(error)) {
+            return
+        }
+
         showError(error)
         if (error instanceof ServerErrors && Array.isArray(error.errors)) {
             error.errors.forEach(({ userMessage }) => {
@@ -885,6 +890,10 @@ const ClusterTerminal = ({
         return nodeGroupOptions
     }
 
+    const toggleDebugMode = (): void => {
+        setDebugMode((prev) => !prev)
+    }
+
     const selectionListData: TerminalSelectionListDataType = {
         firstRow: [
             {
@@ -990,7 +999,7 @@ const ClusterTerminal = ({
                 type: TerminalWrapperType.DEBUG_MODE_TOGGLE_BUTTON,
                 hideTerminalStripComponent: hideShell || selectedNodeName.value === AUTO_SELECT.value,
                 showInfoTippy: true,
-                onToggle: setDebugMode,
+                onToggle: toggleDebugMode,
                 isEnabled: debugMode,
             },
             {