feat: Ruff Configuration Settings

babel.config.js

@@ -7,7 +7,6 @@ module.exports = api => {
       !isTest ? /\.test.(tsx?|jsx?)$/ : false,
       !isTest ? '**/__mocks__/*' : false,
       '**/*.scss',
-      '**/*.d.ts',
     ].filter(Boolean),
   };
 };

packages/app-utils/src/storage/LocalWorkspaceStorage.ts

@@ -57,13 +57,18 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
       showEmptyStrings: true,
       showNullStrings: true,
       showExtraGroupColumn: true,
-      defaultNotebookSettings: {
+      notebookSettings: {
         isMinimapEnabled: false,
+        formatOnSave: false,
+        ruffSettings: {
+          isEnabled: true,
+          // Omit default config so default settings are used if the user never changes them
+        },
       },
       webgl: true,
       webglEditable: true,
-      gridDensity: 'regular' as const,
-    };
+      gridDensity: 'regular',
+    } satisfies WorkspaceSettings;
     const serverSettings = {
       defaultDateTimeFormat: serverConfigValues?.get('dateTimeFormat'),
       formatter: [],
@@ -108,13 +113,13 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
         serverConfigValues,
         'showExtraGroupColumn'
       ),
-      defaultNotebookSettings:
+      notebookSettings:
         serverConfigValues?.get('isMinimapEnabled') !== undefined
           ? {
               isMinimapEnabled: LocalWorkspaceStorage.getBooleanServerConfig(
                 serverConfigValues,
                 'isMinimapEnabled'
-              ) as boolean,
+              ),
             }
           : undefined,
       webgl: LocalWorkspaceStorage.getBooleanServerConfig(

packages/code-studio/src/AppRoot.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { MonacoUtils } from '@deephaven/console';
 import { DownloadServiceWorkerUtils } from '@deephaven/iris-grid';
 import MonacoWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import MonacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import AppRouter from './main/AppRouter';
 
 // load addional css for playwright docker tests
@@ -16,7 +17,14 @@ export function AppRoot(): JSX.Element {
       window.location.href
     )
   );
-  MonacoUtils.init({ getWorker: () => new MonacoWorker() });
+  MonacoUtils.init({
+    getWorker: (id: string, label: string) => {
+      if (label === 'json') {
+        return new MonacoJsonWorker();
+      }
+      return new MonacoWorker();
+    },
+  });
 
   // disable annoying dnd-react warnings
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

packages/code-studio/src/settings/EditorSectionContent.tsx

@@ -0,0 +1,124 @@
+import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Switch, ActionButton, Icon, Text } from '@deephaven/components';
+import { useAppSelector } from '@deephaven/dashboard';
+import { getNotebookSettings, updateNotebookSettings } from '@deephaven/redux';
+import { vsSettings } from '@deephaven/icons';
+import {
+  MonacoProviders,
+  RuffSettingsModal,
+  RUFF_DEFAULT_SETTINGS,
+} from '@deephaven/console';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function EditorSectionContent(): JSX.Element {
+  const notebookSettings = useAppSelector(getNotebookSettings);
+  const dispatch = useDispatch();
+  const {
+    isMinimapEnabled,
+    formatOnSave,
+    ruffSettings = {},
+  } = notebookSettings;
+  const { isEnabled: ruffEnabled, config: ruffConfig = RUFF_DEFAULT_SETTINGS } =
+    ruffSettings;
+
+  const handleMinimapChange = useCallback(
+    (newValue: boolean) =>
+      dispatch(updateNotebookSettings({ isMinimapEnabled: newValue })),
+    [dispatch]
+  );
+
+  const handleFormatOnSaveChange = useCallback(
+    (newValue: boolean) =>
+      dispatch(updateNotebookSettings({ formatOnSave: newValue })),
+    [dispatch]
+  );
+
+  const handleRuffEnabledChange = useCallback(
+    (newValue: boolean) => {
+      dispatch(
+        updateNotebookSettings({
+          ruffSettings: { ...ruffSettings, isEnabled: newValue },
+        })
+      );
+      MonacoProviders.isRuffEnabled = newValue;
+      MonacoProviders.setRuffSettings(ruffConfig);
+    },
+    [dispatch, ruffSettings, ruffConfig]
+  );
+
+  const handleRuffConfigChange = useCallback(
+    (newValue: Record<string, unknown>) => {
+      dispatch(
+        updateNotebookSettings({
+          ruffSettings: { ...ruffSettings, config: newValue },
+        })
+      );
+      MonacoProviders.setRuffSettings(newValue);
+    },
+    [dispatch, ruffSettings]
+  );
+
+  const [val, setVal] = useState(JSON.stringify(ruffConfig, null, 2));
+
+  const [isRuffSettingsOpen, setIsRuffSettingsOpen] = useState(false);
+
+  const handleRuffSettingsClose = useCallback(() => {
+    setIsRuffSettingsOpen(false);
+  }, []);
+
+  const handleRuffSettingsSave = useCallback(
+    (v: Record<string, unknown>) => {
+      handleRuffConfigChange(v);
+      setVal(JSON.stringify(v, null, 2));
+      handleRuffSettingsClose();
+    },
+    [handleRuffConfigChange, handleRuffSettingsClose]
+  );
+
+  return (
+    <>
+      <div className="app-settings-menu-description">
+        Customize the notebook editor.
+      </div>
+
+      <div className="form-row pl-1">
+        <Switch isSelected={isMinimapEnabled} onChange={handleMinimapChange}>
+          Enable Minimap
+        </Switch>
+      </div>
+      <div className="form-row pl-1">
+        <Switch isSelected={formatOnSave} onChange={handleFormatOnSaveChange}>
+          Format on Save
+        </Switch>
+      </div>
+      <div className="form-row pl-1">
+        <Switch
+          isSelected={ruffEnabled}
+          onChange={handleRuffEnabledChange}
+          marginEnd={0}
+        >
+          Enable Ruff Python Linter
+        </Switch>
+      </div>
+      <div className="form-row pl-1">
+        <ActionButton onPress={() => setIsRuffSettingsOpen(true)}>
+          <Icon>
+            <FontAwesomeIcon icon={vsSettings} />
+          </Icon>
+          <Text>Customize Ruff Settings</Text>
+        </ActionButton>
+      </div>
+      {isRuffSettingsOpen && (
+        <RuffSettingsModal
+          text={val}
+          isOpen={isRuffSettingsOpen}
+          onClose={handleRuffSettingsClose}
+          onSave={handleRuffSettingsSave}
+        />
+      )}
+    </>
+  );
+}
+
+export default EditorSectionContent;

packages/code-studio/src/settings/SettingsMenu.tsx

@@ -10,6 +10,7 @@ import {
   dhUserIncognito,
   dhUser,
   vsTools,
+  vsFileCode,
 } from '@deephaven/icons';
 import {
   Button,
@@ -38,6 +39,7 @@ import {
 } from './SettingsUtils';
 import AdvancedSectionContent from './AdvancedSectionContent';
 import ThemeSectionContent from './ThemeSectionContent';
+import EditorSectionContent from './EditorSectionContent';
 
 interface SettingsMenuProps {
   serverConfigValues: ServerConfigValues;
@@ -70,6 +72,8 @@ export class SettingsMenu extends Component<
 
   static ADVANCED_SECTION_KEY = 'SettingsMenu.advanced';
 
+  static EDITOR_SECTION_KEY = 'SettingsMenu.editor';
+
   static focusFirstInputInContainer(container: HTMLDivElement | null): void {
     const input = container?.querySelector('input, select, textarea');
     if (input) {
@@ -274,6 +278,24 @@ export class SettingsMenu extends Component<
             <ThemeSectionContent />
           </SettingsMenuSection>
 
+          <SettingsMenuSection
+            sectionKey={SettingsMenu.EDITOR_SECTION_KEY}
+            isExpanded={this.isSectionExpanded(SettingsMenu.EDITOR_SECTION_KEY)}
+            onToggle={this.handleSectionToggle}
+            title={
+              <>
+                <FontAwesomeIcon
+                  icon={vsFileCode}
+                  transform="grow-4"
+                  className="mr-2"
+                />
+                Editor
+              </>
+            }
+          >
+            <EditorSectionContent />
+          </SettingsMenuSection>
+
           <SettingsMenuSection
             sectionKey={SettingsMenu.SHORTCUT_SECTION_KEY}
             isExpanded={this.isSectionExpanded(
@@ -283,7 +305,7 @@ export class SettingsMenu extends Component<
               <>
                 <FontAwesomeIcon
                   icon={vsRecordKeys}
-                  transform="grow-2"
+                  transform="grow-4"
                   className="mr-2"
                 />
                 Keyboard Shortcuts

packages/code-studio/src/settings/SettingsMenuSection.tsx

@@ -22,7 +22,7 @@ function SettingsMenuSection(props: SettingsMenuSectionProps): ReactElement {
           className="btn-collapse-trigger"
           onClick={() => onToggle(sectionKey)}
         >
-          <div className="flex-grow-1">{title}</div>
+          <div className="d-flex align-items-center flex-grow-1">{title}</div>
           <div className="flex-shrink-0">
             <FontAwesomeIcon
               transform={isExpanded ? 'flip-v' : ''}

packages/code-studio/vite.config.ts

@@ -135,6 +135,7 @@ export default defineConfig(({ mode }) => {
       },
     },
     optimizeDeps: {
+      exclude: ['@astral-sh/ruff-wasm-web'], // Needed so the wasm file works in dev mode
       esbuildOptions: {
         // Some packages need this to start properly if they reference global
         define: {

packages/components/scss/BaseStyleSheet.scss

@@ -146,7 +146,7 @@ button:focus {
 }
 
 span.btn-disabled-wrapper {
-  display: contents;
+  display: inline-block;
   .btn.disabled,
   .btn:disabled {
     pointer-events: none;

packages/components/src/modal/Modal.tsx

@@ -73,7 +73,8 @@ function Modal({
         onOpened();
       }
     },
-    [onOpened, isOpen]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isOpen]
   );
 
   useEffect(
@@ -82,7 +83,8 @@ function Modal({
         onClosed();
       }
     },
-    [onClosed, isOpen]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isOpen]
   );
 
   if (isOpen && !element.current) {

packages/console/package.json

@@ -19,10 +19,11 @@
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production run-p build:*",
-    "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx,.scss\" --copy-files --no-copy-ignored --source-maps --root-mode upward",
+    "build:babel": "babel ./src --out-dir ./dist --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward",
     "build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
   },
   "dependencies": {
+    "@astral-sh/ruff-wasm-web": "0.6.4",
     "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",
     "@deephaven/icons": "file:../icons",

packages/console/src/index.ts

@@ -5,14 +5,13 @@ export { Console };
 export { default as ConsoleInput } from './ConsoleInput';
 export { default as SHORTCUTS } from './ConsoleShortcuts';
 export { default as ConsoleStatusBar } from './ConsoleStatusBar';
-export * from './monaco/MonacoThemeProvider';
-export { default as MonacoUtils } from './monaco/MonacoUtils';
 export { default as Editor } from './notebook/Editor';
 export { default as ScriptEditor } from './notebook/ScriptEditor';
 export { default as ScriptEditorUtils } from './notebook/ScriptEditorUtils';
 export * from './common';
 export * from './command-history';
 export * from './console-history';
+export * from './monaco';
 export { default as LogView } from './log/LogView';
 export { default as HeapUsage } from './HeapUsage';
 export { default as NewTableColumnTypes } from './csv/NewTableColumnTypes';