fixup: hide cursor in code mirror readonly mode, update error banner variant, enable apply on non-syntax error

Author: Anemy

packages/compass-editor/src/editor.tsx

@@ -95,6 +95,14 @@ const disabledContainerDarkModeStyles = css({
   boxShadow: `0 0 0 1px ${palette.gray.dark2}`,
 });
 
+const readOnlyStyle = css({
+  // We hide the blinking cursor in read only mode
+  // as it can appear to users like the editor is editable.
+  '& .cm-cursor': {
+    display: 'none !important',
+  },
+});
+
 const hiddenScrollStyle = css({
   '& .cm-scroller': {
     overflow: '-moz-scrollbars-none',
@@ -1204,6 +1212,7 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
       className={cx(
         disabled && disabledContainerStyles,
         disabled && darkMode && disabledContainerDarkModeStyles,
+        readOnly && readOnlyStyle,
         className
       )}
       style={{

packages/compass-schema-validation/src/components/validation-editor.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { debounce } from 'lodash';
 import { connect } from 'react-redux';
 import { useTelemetry } from '@mongodb-js/compass-telemetry/provider';
-import type { BannerVariant } from '@mongodb-js/compass-components';
 import {
   css,
   cx,
@@ -112,6 +111,7 @@ const ValidationCodeEditor = ({
       text={text}
       onChangeText={onChangeText}
       readOnly={readOnly}
+      formattable={!readOnly}
       completer={completer}
     />
   );
@@ -214,19 +214,6 @@ export const ValidationEditor: React.FunctionComponent<
   const { validationAction, validationLevel, error, syntaxError, isChanged } =
     validation;
 
-  const hasErrors = !!(error || syntaxError);
-
-  let message = '';
-  let variant: BannerVariant = 'info';
-
-  if (syntaxError) {
-    message = syntaxError.message;
-    variant = 'danger';
-  } else if (error) {
-    message = error.message;
-    variant = 'warning';
-  }
-
   const onClickApplyValidation = useCallback(async () => {
     const confirmed = await showConfirmation({
       title: 'Are you sure you want to apply these validation rules?',
@@ -273,7 +260,10 @@ export const ValidationEditor: React.FunctionComponent<
           serverVersion={serverVersion}
         />
       </div>
-      {variant && message && <Banner variant={variant}>{message}</Banner>}
+      {syntaxError && <Banner variant="danger">{syntaxError.message}</Banner>}
+      {!syntaxError && error && (
+        <Banner variant="danger">{error.message}</Banner>
+      )}
       {isEditable && (
         <div className={actionsStyles}>
           {isEditingEnabled ? (
@@ -308,7 +298,7 @@ export const ValidationEditor: React.FunctionComponent<
                   onClick={() => {
                     void onClickApplyValidation();
                   }}
-                  disabled={hasErrors}
+                  disabled={!!syntaxError}
                 >
                   Apply
                 </Button>
@@ -322,7 +312,7 @@ export const ValidationEditor: React.FunctionComponent<
               data-testid="enable-edit-validation-button"
               onClick={onClickEnableEditRules}
             >
-              Edit Rules
+              Edit rules
             </Button>
           )}
         </div>