LG-5446: CodeEditor QA Fixes

.changeset/bumpy-turtles-start.md

@@ -0,0 +1,22 @@
+---
+'@leafygreen-ui/code-editor': minor
+---
+
+Fixes a number of bugs. These include:
+
+- Adds gutter padding between the border and the caret when line numbers are turned off
+- Fixes icon button vertical alignment in the panel
+- Adds comprehensive story, that also include tooltips
+- Increases tooltip speed
+- Fixes collapsed chevron alignment
+- Darkens unfold icon in dark mode
+- Fixes widths. This includes making sure the panel and editor containers respect any set widths
+- Corrects the color of the copied icon checkmark
+- Disabled undo/redo when no undo/redo actions are available
+- Hides blinking cursor when editor is in read only mode
+- Allows for CTRL+click to pull up the context menu without losing the selection.
+- Insert the cursor in the location of the undone action when the undo button is pressed in the panel menu
+- Sets the loading height to be the same height as the future rendered editor
+- Persists editor when props change
+- Assures that font size and dark mode are respected in the panel
+- Enhances tests

packages/code-editor/src/CodeEditor.interactions.stories.tsx

@@ -16,6 +16,7 @@ import {
   CopyButtonAppearance,
   IndentUnits,
 } from './CodeEditor/CodeEditor.types';
+import { preLoadedModules } from './testing/preLoadedModules';
 import { CodeEditor, LanguageName } from '.';
 
 const meta: StoryMetaType<typeof CodeEditor> = {
@@ -196,6 +197,7 @@ export const ErrorTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -227,6 +229,7 @@ export const HintTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -258,6 +261,7 @@ export const InfoTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -289,6 +293,7 @@ export const WarningTooltipOnHover: StoryObj<{}> = {
     return (
       <CodeEditor
         defaultValue={'test\n'.repeat(5)}
+        preLoadedModules={preLoadedModules}
         tooltips={[
           {
             line: 2,
@@ -319,6 +324,7 @@ export const ContextMenuOnRightClick: StoryObj<{}> = {
   render: () => {
     return (
       <CodeEditor
+        preLoadedModules={preLoadedModules}
         customContextMenuItems={[{ label: 'Custom Action', action: () => {} }]}
       />
     );

packages/code-editor/src/CodeEditor.stories.tsx

@@ -25,7 +25,10 @@ import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
 import Modal from '@leafygreen-ui/modal';
 import { BaseFontSize } from '@leafygreen-ui/tokens';
 
-import { CopyButtonAppearance } from './CodeEditor/CodeEditor.types';
+import {
+  CodeEditorTooltipSeverity,
+  CopyButtonAppearance,
+} from './CodeEditor/CodeEditor.types';
 import { LanguageName } from './CodeEditor/hooks/extensions/useLanguageExtension';
 import { IndentUnits } from './CodeEditor';
 import { ShortcutTable } from './ShortcutTable';
@@ -172,12 +175,64 @@ export default meta;
 const Template: StoryFn<typeof CodeEditor> = args => <CodeEditor {...args} />;
 
 export const LiveExample = Template.bind({});
-
-export const WithPanel = Template.bind({});
 const language = LanguageName.tsx;
-WithPanel.args = {
+LiveExample.args = {
   language,
   defaultValue: codeSnippets[language],
+  tooltips: [
+    {
+      line: 4,
+      column: 11,
+      length: 11,
+      messages: ['This is an error tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Error,
+    },
+    {
+      line: 10,
+      column: 25,
+      length: 8,
+      messages: ['This is an info tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Info,
+    },
+    {
+      line: 12,
+      column: 14,
+      length: 7,
+      messages: ['This is an hint tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Hint,
+    },
+    {
+      line: 28,
+      column: 11,
+      length: 11,
+      messages: ['This is an warning tooltip'],
+      links: [
+        {
+          label: 'External Link',
+          href: 'https://mongodb.com',
+        },
+      ],
+      severity: CodeEditorTooltipSeverity.Warning,
+    },
+  ],
   children: (
     <CodeEditor.Panel
       showCopyButton
@@ -196,11 +251,37 @@ WithPanel.args = {
   ),
 };
 
+export const Minimal = Template.bind({});
+Minimal.args = {
+  enableLineNumbers: false,
+};
+
 export const Loading = Template.bind({});
 Loading.args = {
   isLoading: true,
 };
 
+export const LoadingWithPanel = Template.bind({});
+LoadingWithPanel.args = {
+  isLoading: true,
+  children: (
+    <CodeEditor.Panel
+      showCopyButton
+      showFormatButton
+      showSecondaryMenuButton
+      customSecondaryButtons={[
+        {
+          label: 'Custom Button',
+          onClick: () => {},
+          'aria-label': 'Custom Button',
+          glyph: <CloudIcon />,
+        },
+      ]}
+      title={`index.${language}`}
+    />
+  ),
+};
+
 /**
  * Syntax Highlighting Examples / Regressions
  * These have been hardcoded for now, but we could potentially determine a good

packages/code-editor/src/CodeEditor/CodeEditor.ImperativeHandle.spec.tsx

@@ -0,0 +1,112 @@
+import { renderCodeEditor } from './CodeEditor.testUtils';
+import { LanguageName } from './hooks';
+
+// Enhanced MutationObserver mock for CodeMirror compatibility
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+  takeRecords: jest.fn().mockReturnValue([]),
+}));
+
+// Mock ResizeObserver which is used by CodeMirror
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// Mock IntersectionObserver which may be used by CodeMirror
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+  root: null,
+  rootMargin: '',
+  thresholds: [],
+}));
+
+describe('packages/code-editor/CodeEditor imperative handle', () => {
+  test('getContents works', () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'test',
+    });
+    expect(editor.getHandle().getContents()).toBe('test');
+  });
+
+  test('getEditorViewInstance works', () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'console.log("hello")',
+    });
+    expect(editor.getHandle().getEditorViewInstance()).toBeDefined();
+  });
+
+  test('undo and redo works', async () => {
+    const initialContent = 'console.log("hello");';
+    const { editor } = renderCodeEditor({
+      defaultValue: initialContent,
+    });
+    const handle = editor.getHandle();
+    expect(handle.getContents()).toBe(initialContent);
+
+    // Make a change
+    editor.interactions.insertText('\nconsole.log("world");');
+    const content = handle.getContents();
+    expect(handle.getContents()).toBe(
+      'console.log("hello");\nconsole.log("world");',
+    );
+
+    // Undo the change
+    const undoResult = handle.undo();
+    expect(undoResult).toBe(true);
+    expect(handle.getContents()).toBe(initialContent);
+
+    // Redo the change
+    const redoResult = editor.interactions.redo();
+    expect(redoResult).toBe(true);
+    expect(handle.getContents()).toBe(content);
+  });
+
+  test('undo returns false when there is nothing to undo', async () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'test',
+    });
+    const undoResult = editor.getHandle().undo();
+    expect(undoResult).toBe(false);
+  });
+
+  test('redo returns false when there is nothing to redo', async () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'test',
+    });
+    const redoResult = editor.getHandle().redo();
+    expect(redoResult).toBe(false);
+  });
+
+  test('formatCode works', async () => {
+    const { editor } = renderCodeEditor({
+      language: LanguageName.javascript,
+      defaultValue: "console.log('hello')",
+    });
+    const handle = editor.getHandle();
+    await handle.formatCode();
+    expect(handle.getContents()).toBe("console.log('hello');\n");
+  });
+
+  test('isFormattingAvailable returns true when formatting is available', () => {
+    const { editor } = renderCodeEditor({
+      language: LanguageName.javascript,
+      defaultValue: "console.log('hello')",
+    });
+    const handle = editor.getHandle();
+    expect(handle.isFormattingAvailable).toBe(true);
+  });
+
+  test('isFormattingAvailable returns false when formatting is not available', () => {
+    const { editor } = renderCodeEditor({
+      defaultValue: 'plain text',
+    });
+    const handle = editor.getHandle();
+    expect(handle.isFormattingAvailable).toBe(false);
+  });
+});