[cm6] Show Regex errors in find & replace (#12720)

* [cm6] Show Regex errors in find & replace

* cleanup, isInvalidRegExp function

* no state variable, less color var

* use @brand-dager

* using var(--ol-cm-search-form-focus-shadow)

* using state-danger-border

GitOrigin-RevId: 844c9dfee5a56d2a7494cd86c266acbe9eacd033

services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx

@@ -225,7 +225,13 @@ const CodeMirrorSearchForm: FC = () => {
       role="search"
     >
       <div className="ol-cm-search-controls">
-        <InputGroup bsSize="small" className="ol-cm-search-input-group">
+        <InputGroup
+          bsSize="small"
+          className={classnames('ol-cm-search-input-group', {
+            'ol-cm-search-input-error':
+              query.regexp && isInvalidRegExp(query.search),
+          })}
+        >
           <FormControl
             type="text"
             name="search"
@@ -419,4 +425,13 @@ const CodeMirrorSearchForm: FC = () => {
   )
 }
 
+function isInvalidRegExp(source: string) {
+  try {
+    RegExp(source)
+    return false
+  } catch {
+    return true
+  }
+}
+
 export default CodeMirrorSearchForm

services/web/frontend/js/features/source-editor/extensions/search.ts

@@ -164,6 +164,8 @@ export const search = () => {
         background: 'var(--ol-blue-gray-1)',
         '--ol-cm-search-form-focus-shadow':
           'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
+        '--ol-cm-search-form-error-shadow':
+          'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--input-shadow-danger-color)',
       },
       '.ol-cm-search-controls': {
         display: 'grid',
@@ -218,6 +220,12 @@ export const search = () => {
           boxShadow: 'var(--ol-cm-search-form-focus-shadow)',
         },
       },
+      '.ol-cm-search-input-group.ol-cm-search-input-error': {
+        '&:focus-within': {
+          borderColor: 'var(--input-border-danger)',
+          boxShadow: 'var(--ol-cm-search-form-error-shadow)',
+        },
+      },
       '.input-group .ol-cm-search-form-input': {
         border: 'none',
       },

services/web/frontend/stylesheets/core/css-variables.less

@@ -13,6 +13,8 @@
   --input-border: @input-border;
   --input-border-radius: @input-border-radius;
   --input-border-focus: @input-border-focus;
+  --input-border-danger: @state-danger-border;
+  --input-shadow-danger-color: fade(@state-danger-border, 50%);
 
   --btn-border-radius-base: @btn-border-radius-base;
   --btn-default-bg: @btn-default-bg;

services/web/frontend/stylesheets/variables/css-variables.less

@@ -63,6 +63,8 @@
   --input-border: @input-border;
   --input-border-radius: @input-border-radius;
   --input-border-focus: @input-border-focus;
+  --input-border-danger: @state-danger-border;
+  --input-shadow-danger-color: fade(@state-danger-border, 50%);
 
   // border
   --btn-border-radius-base: @btn-border-radius-base;