@coveord/plasma-mantine 52.17.3 → 52.19.0

package/src/components/code-editor/CodeEditor.tsx

@@ -14,21 +14,25 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
+import {editor as monacoEditor} from 'monaco-editor';
 import Editor, {loader, Monaco} from '@monaco-editor/react';
-import {FunctionComponent, useEffect, useState, useRef} from 'react';
+import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
 import {XML} from './languages/xml';
 import {CopyToClipboard} from '../copyToClipboard';
 import {Search} from './search';
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme, {error}: {error?: boolean}) => ({
     root: {},
     editor: {
         border: `1px solid ${theme.colors.gray[2]}`,
         borderRadius: theme.defaultRadius,
         backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
         height: '100%',
+        outlineColor: error ? theme.colors.red[6] : null,
+        outlineStyle: error ? 'solid' : 'none',
+        outlineWidth: 'thin',
     },
 }));
 
@@ -109,7 +113,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
-    const {classes, theme} = useStyles();
+    const [containsError, setContainsError] = useState(false);
+    const {classes, theme} = useStyles({error: containsError});
     const [_value, handleChange] = useUncontrolled<string>({
         value,
         defaultValue,
@@ -118,7 +123,6 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     const [parentHeight, ref] = useParentHeight();
     const editorRef = useRef(null);
-
     const loadLocalMonaco = async () => {
         const monacoInstance = await import('monaco-editor');
         loader.config({monaco: monacoInstance});
@@ -147,6 +151,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     }, []);
 
+    const handleValidate = (markers: monacoEditor.IMarker[]) => {
+        setContainsError(
+            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
+        );
+    };
+
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}
@@ -183,6 +193,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     const _editor = loaded ? (
         <Box p="md" pl="xs" className={classes.editor}>
             <Editor
+                onValidate={handleValidate}
                 defaultLanguage={language}
                 theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}
                 options={{

package/src/components/modal-wizard/ModalWizard.tsx

@@ -230,6 +230,7 @@ export const ModalWizard: ModalWizardType = ({
                     </Button>
 
                     <Button
+                        disabledTooltip={currentStep.props.disabledTooltipLabel}
                         disabled={!isValid}
                         onClick={() => {
                             if (isLastStep) {

package/src/components/modal-wizard/ModalWizardStep.tsx

@@ -42,6 +42,11 @@ export interface ModalWizardStepProps {
      * @default true
      */
     countsAsProgress?: boolean;
+
+    /**
+     * Tooltip label of the next button when disabled
+     */
+    disabledTooltipLabel?: string;
 }
 
 const ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => <>{children}</>;

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -415,4 +415,57 @@ describe('ModalWizard', () => {
         await user.click(screen.getByRole('button', {name: /next/i}));
         expect(screen.getByRole('button', {name: /finish/i})).toBeDisabled();
     });
+
+    describe('disabledTooltipLabel props', () => {
+        it('display a tooltip when a step is invalid and a label is passed', async () => {
+            const user = userEvent.setup();
+
+            render(
+                <ModalWizard opened={true} onClose={vi.fn()}>
+                    <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
+                        Content step 1
+                    </ModalWizard.Step>
+                    <ModalWizard.Step
+                        title="Step 2"
+                        validateStep={() => ({isValid: false})}
+                        disabledTooltipLabel="test tooltip label"
+                    >
+                        Content step 2
+                    </ModalWizard.Step>
+                </ModalWizard>,
+            );
+
+            expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
+            await user.click(screen.getByRole('button', {name: /next/i}));
+            const finishButton = screen.getByRole('button', {name: /finish/i});
+            expect(finishButton).toBeDisabled();
+            await user.hover(finishButton.parentElement);
+            expect(screen.getByText('test tooltip label')).toBeVisible();
+        });
+
+        it('does not display the tooltip if the step is validated even if the props is passed', async () => {
+            const user = userEvent.setup();
+            render(
+                <ModalWizard opened={true} onClose={vi.fn()}>
+                    <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
+                        Content step 1
+                    </ModalWizard.Step>
+                    <ModalWizard.Step
+                        title="Step 2"
+                        validateStep={() => ({isValid: true})}
+                        disabledTooltipLabel="test tooltip label"
+                    >
+                        Content step 2
+                    </ModalWizard.Step>
+                </ModalWizard>,
+            );
+
+            expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
+            await user.click(screen.getByRole('button', {name: /next/i}));
+            const finishButton = screen.getByRole('button', {name: /finish/i});
+            expect(finishButton).toBeEnabled();
+            await user.hover(finishButton.parentElement);
+            expect(screen.queryByText('test tooltip label')).not.toBeInTheDocument();
+        });
+    });
 });