Add contextual help for format on save

deephaven · Nov 7, 2024 · 3f99af5 · 3f99af5
1 parent 82f8137
commit 3f99af5
Showing 1 changed file with 24 additions and 3 deletions.
diff --git a/packages/code-studio/src/settings/EditorSectionContent.tsx b/packages/code-studio/src/settings/EditorSectionContent.tsx
@@ -1,6 +1,14 @@
 import React, { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { Switch, ActionButton, Icon, Text } from '@deephaven/components';
+import {
+  Switch,
+  ActionButton,
+  Icon,
+  Text,
+  ContextualHelp,
+  Heading,
+  Content,
+} from '@deephaven/components';
 import { useAppSelector } from '@deephaven/dashboard';
 import { getNotebookSettings, updateNotebookSettings } from '@deephaven/redux';
 import { vsSettings } from '@deephaven/icons';
@@ -95,10 +103,23 @@ export function EditorSectionContent(): JSX.Element {
           Enable Minimap
         </Switch>
       </div>
-      <div className="form-row pl-1">
-        <Switch isSelected={formatOnSave} onChange={handleFormatOnSaveChange}>
+      <div className="form-row align-items-center pl-1">
+        <Switch
+          isSelected={formatOnSave}
+          onChange={handleFormatOnSaveChange}
+          margin={0}
+        >
           Format on Save
         </Switch>
+        <ContextualHelp variant="info">
+          <Heading>Format on Save</Heading>
+          <Content>
+            <Text>
+              The Ruff settings control formatting options. Notebooks can be
+              formatted manually using the right-click context menu.
+            </Text>
+          </Content>
+        </ContextualHelp>
       </div>
       <div className="form-row pl-1">
         <Switch