feat(editor, query-bar): add disabled state for code mirror editor, u…

…se while generative ai fetching COMPASS-7902 (#5801)
mongodb-js · May 10, 2024 · 7372f71 · 7372f71
1 parent 28340d1
commit 7372f71
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 20 deletions.
diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx
@@ -79,6 +79,15 @@ const editorStyle = css({
   fontFamily: fontFamilies.code,
 });
 
+const disabledContainerStyles = css({
+  borderRadius: spacing[100],
+  boxShadow: `0 0 0 1px ${palette.gray.light1}`,
+});
+
+const disabledContainerDarkModeStyles = css({
+  boxShadow: `0 0 0 1px ${palette.gray.dark2}`,
+});
+
 const hiddenScrollStyle = css({
   '& .cm-scroller': {
     overflow: '-moz-scrollbars-none',
@@ -140,6 +149,8 @@ export const editorPalette = {
   light: {
     color: codePalette.light[3],
     backgroundColor: codePalette.light[0],
+    disabledColor: codePalette.light[2],
+    disabledBackgroundColor: codePalette.light[1],
     gutterColor: codePalette.light[3],
     gutterBackgroundColor: codePalette.light[0],
     gutterActiveLineBackgroundColor: rgba(palette.gray.light2, 0.5),
@@ -163,6 +174,8 @@ export const editorPalette = {
   dark: {
     color: codePalette.dark[3],
     backgroundColor: codePalette.dark[0],
+    disabledColor: codePalette.dark[3],
+    disabledBackgroundColor: palette.gray.dark3,
     gutterColor: codePalette.dark[3],
     gutterBackgroundColor: codePalette.dark[0],
     gutterActiveLineBackgroundColor: rgba(palette.gray.dark2, 0.5),
@@ -207,6 +220,14 @@ function getStylesForTheme(theme: CodemirrorThemeType) {
         paddingBottom: `${spacing[1]}px`,
         caretColor: editorPalette[theme].cursorColor,
       },
+      '[contenteditable="false"] ': {
+        borderRadius: `${spacing[100]}px`,
+      },
+      '.cm-content[contenteditable="false"] ': {
+        cursor: 'not-allowed',
+        color: editorPalette[theme].disabledColor,
+        backgroundColor: editorPalette[theme].disabledBackgroundColor,
+      },
       '& .cm-activeLine': {
         background: 'none',
       },
@@ -430,6 +451,7 @@ type EditorProps = {
   onBlur?: (editor: React.FocusEvent<HTMLDivElement>) => void;
   onPaste?: (editor: React.ClipboardEvent<HTMLDivElement>) => void;
   darkMode?: boolean;
+  disabled?: boolean;
   showLineNumbers?: boolean;
   showFoldGutter?: boolean;
   showAnnotationsGutter?: boolean;
@@ -597,6 +619,7 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
     annotations,
     completer,
     darkMode: _darkMode,
+    disabled = false,
     className,
     readOnly = false,
     onLoad = () => {
@@ -728,6 +751,14 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
     editorViewRef
   );
 
+  const editableExtension = useCodemirrorExtensionCompartment(
+    () => {
+      return EditorView.editable.of(!disabled);
+    },
+    disabled,
+    editorViewRef
+  );
+
   const themeConfigExtension = useCodemirrorExtensionCompartment(
     () => {
       return themeStyles[darkMode ? 'dark' : 'light'];
@@ -896,6 +927,7 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
         tooltips({
           parent: document.body,
         }),
+        editableExtension,
         readOnlyExtension,
         EditorView.updateListener.of((update) => {
           updateEditorContentHeight();
@@ -1064,7 +1096,11 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
   return (
     <div
       ref={containerRef}
-      className={className}
+      className={cx(
+        disabled && disabledContainerStyles,
+        disabled && darkMode && disabledContainerDarkModeStyles,
+        className
+      )}
       style={{
         width: '100%',
         minHeight: Math.max(lineHeight, (minLines ?? 0) * lineHeight),

diff --git a/packages/compass-query-bar/src/components/option-editor.tsx b/packages/compass-query-bar/src/components/option-editor.tsx
@@ -184,7 +184,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
     <div
       className={cx(
         editorContainerStyles,
-        focusRingProps.className,
+        !disabled && focusRingProps.className,
         hasError && editorWithErrorStyles
       )}
       ref={editorContainerRef}
@@ -198,10 +198,10 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
         completer={completer}
         commands={commands}
         data-testid={dataTestId}
+        disabled={disabled}
         onFocus={onFocus}
         onPaste={onPaste}
         onBlur={onBlur}
-        readOnly={disabled}
       />
       {showInsights && insights && (
         <div className={queryBarEditorOptionInsightsStyles}>

diff --git a/packages/compass-query-bar/src/components/query-bar.spec.tsx b/packages/compass-query-bar/src/components/query-bar.spec.tsx
@@ -34,6 +34,14 @@ const exportToLanguageButtonId = 'query-bar-open-export-to-language-button';
 const queryHistoryButtonId = 'query-history-button';
 const queryHistoryComponentTestId = 'query-history';
 
+function testIsEditorDisabled(editorTestId: string, isDisabled: boolean) {
+  expect(
+    within(screen.getByTestId(editorTestId))
+      .getByRole('textbox')
+      .getAttribute('contenteditable')
+  ).to.equal(isDisabled ? 'false' : 'true');
+}
+
 describe('QueryBar Component', function () {
   let preferences: PreferencesAccess;
   let onApplySpy: SinonSpy;
@@ -204,17 +212,9 @@ describe('QueryBar Component', function () {
       ).to.equal('false');
     });
 
-    it('editors are not readonly', function () {
-      expect(
-        within(screen.getByTestId('query-bar-option-filter-input'))
-          .getByRole('textbox')
-          .getAttribute('aria-readonly')
-      ).to.not.exist;
-      expect(
-        within(screen.getByTestId('query-bar-option-project-input'))
-          .getByRole('textbox')
-          .getAttribute('aria-readonly')
-      ).to.not.exist;
+    it('editors are not disabled', function () {
+      testIsEditorDisabled('query-bar-option-filter-input', false);
+      testIsEditorDisabled('query-bar-option-project-input', false);
     });
   });
 
@@ -258,7 +258,7 @@ describe('QueryBar Component', function () {
       ).to.equal('true');
     });
 
-    it('editors are readonly', function () {
+    it('editors are disabled', function () {
       const store = configureStore({}, {
         preferences,
         logger: createNoopLoggerAndTelemetry(),
@@ -280,11 +280,7 @@ describe('QueryBar Component', function () {
         </Provider>
       );
 
-      expect(
-        within(screen.getByTestId('query-bar-option-filter-input'))
-          .getByRole('textbox')
-          .getAttribute('aria-readonly')
-      ).to.equal('true');
+      testIsEditorDisabled('query-bar-option-filter-input', true);
     });
   });