Add intent property to CodeAutocompleteField

Author: andreas-schultz

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<CodeAutocompleteField />`
+    -   Add `intent` property.
+
 ### Fixed
 
 -   `<Pagination />`

src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -4,6 +4,7 @@ import { Classes as BlueprintClassNames } from "@blueprintjs/core";
 import { EditorView, Rect } from "@codemirror/view";
 import { debounce } from "lodash";
 
+import { IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
@@ -154,6 +155,8 @@ export interface CodeAutocompleteFieldProps {
     readOnly?: boolean;
     /** Properties that should be added to the outer div container. */
     outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id">;
+    /** Intent state of the input field. Validation errors override this. */
+    intent?: IntentTypes;
 }
 
 // Meta data regarding a request
@@ -192,6 +195,7 @@ export const CodeAutocompleteField = ({
     height,
     readOnly,
     outerDivAttributes,
+    intent,
 }: CodeAutocompleteFieldProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
@@ -630,6 +634,14 @@ export const CodeAutocompleteField = ({
         []
     );
 
+    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
+    const effectiveIntent = hasError ? "danger" : intent;
+    const blueprintIntent =
+        effectiveIntent && !["info", "accent", "neutral"].includes(effectiveIntent)
+            ? effectiveIntent
+            : undefined;
+    const inputIntentClass = effectiveIntent ? ` ${eccgui}-intent--${effectiveIntent}` : "";
+
     const codeEditor = React.useMemo(() => {
         return (
             <ExtendedCodeEditor
@@ -648,6 +660,9 @@ export const CodeAutocompleteField = ({
                 onMouseDown={handleInputMouseDown}
                 height={height}
                 readOnly={readOnly}
+                codeEditorProps={{
+                    intent: effectiveIntent,
+                }}
             />
         );
     }, [
@@ -661,9 +676,8 @@ export const CodeAutocompleteField = ({
         multiline,
         handleInputMouseDown,
         readOnly,
+        effectiveIntent,
     ]);
-
-    const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
         <div
             id={id}
@@ -674,7 +688,7 @@ export const CodeAutocompleteField = ({
             <div
                 className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
                     BlueprintClassNames.FILL
-                } ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}
+                } ${blueprintIntent ? BlueprintClassNames.intentClass(blueprintIntent as any) : ""}${inputIntentClass}`}
             >
                 <ContextOverlay
                     minimal
@@ -740,7 +754,7 @@ export const CodeAutocompleteField = ({
                     </>
                 ),
             }}
-            intent={hasError ? "danger" : undefined}
+            intent={effectiveIntent}
             messageText={hasError ? validationErrorText : undefined}
         >
             {withRightElement}

src/extensions/codemirror/CodeMirror.tsx

@@ -326,6 +326,20 @@ export const CodeEditor = ({
         ];
     }
 
+    const syncIntentClass = React.useCallback((editorView: EditorView | undefined, nextIntent?: CodeEditorProps["intent"]) => {
+        if (!editorView?.dom) {
+            return;
+        }
+
+        Array.from(editorView.dom.classList)
+            .filter((className) => className.startsWith(`${eccgui}-intent--`))
+            .forEach((className) => editorView.dom.classList.remove(className));
+
+        if (nextIntent) {
+            editorView.dom.classList.add(`${eccgui}-intent--${nextIntent}`);
+        }
+    }, []);
+
     React.useEffect(() => {
         const domEventHandlers = {
             ...addHandlersFor(!!onScroll, "scroll", onScroll),
@@ -360,7 +374,7 @@ export const CodeEditor = ({
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
                 if (onFocusChange && currentIntent.current && !v.view.dom.classList?.contains(`${eccgui}-intent--${currentIntent.current}`)) {
-                    v.view.dom.classList.add(`${eccgui}-intent--${currentIntent.current}`);
+                    syncIntentClass(v.view, currentIntent.current);
                 }
 
                 if (onCursorChange) {
@@ -410,9 +424,7 @@ export const CodeEditor = ({
                 view.dom.classList.add(`${eccgui}-disabled`);
             }
 
-            if (currentIntent.current) {
-                view.dom.className += ` ${eccgui}-intent--${currentIntent.current}`;
-            }
+            syncIntentClass(view, currentIntent.current);
 
             if (autoFocus) {
                 view.focus();
@@ -472,6 +484,10 @@ export const CodeEditor = ({
         }
     }, [disabled])
 
+    React.useEffect(() => {
+        syncIntentClass(view, intent);
+    }, [intent, view, syncIntentClass]);
+
     React.useEffect(() => {
         setEditorAppearance({
             ...editorAppearance,