[ui] TS, lint updates for ui-components

dagster-io · Oct 16, 2024 · 8c0b630 · 8c0b630
1 parent cbe2e1e
commit 8c0b630
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 281 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -48,7 +48,7 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@chromatic-com/storybook": "^1.6.1",
-    "@dagster-io/eslint-config": "1.0.15",
+    "@dagster-io/eslint-config": "1.0.18",
     "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.3",
@@ -89,7 +89,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.5.0",
-    "prettier": "3.0.3",
+    "prettier": "3.3.3",
     "react": "^18.3.1",
     "react-docgen-typescript-plugin": "^1.0.8",
     "react-dom": "^18.3.1",
@@ -98,7 +98,7 @@
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-styles": "^4.0.0",
     "storybook": "^8.2.7",
-    "typescript": "5.4.5",
+    "typescript": "5.5.4",
     "webpack": "^5.94.0"
   },
   "browserslist": {

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/NewConfigEditor.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/NewConfigEditor.tsx
@@ -81,46 +81,42 @@ export const NewConfigEditor = forwardRef<ConfigEditorHandle, ConfigEditorProps>
     props;
   const editor = useRef<CodeMirror.Editor | null>(null);
 
-  useImperativeHandle(
-    ref,
-    () => {
-      const moveCursor = (line: number, ch: number) => {
-        if (!editor.current) {
-          return;
-        }
+  useImperativeHandle(ref, () => {
+    const moveCursor = (line: number, ch: number) => {
+      if (!editor.current) {
+        return;
+      }
+
+      editor.current.setCursor(line, ch, {scroll: false});
+      const {clientHeight} = editor.current.getScrollInfo();
+      const {left, top} = editor.current.cursorCoords(true, 'local');
+      const offsetFromTop = 20;
+
+      editor.current?.scrollIntoView({
+        left,
+        right: left,
+        top: top - offsetFromTop,
+        bottom: top + (clientHeight - offsetFromTop),
+      });
+      editor.current.focus();
+    };
 
-        editor.current.setCursor(line, ch, {scroll: false});
-        const {clientHeight} = editor.current.getScrollInfo();
-        const {left, top} = editor.current.cursorCoords(true, 'local');
-        const offsetFromTop = 20;
-
-        editor.current?.scrollIntoView({
-          left,
-          right: left,
-          top: top - offsetFromTop,
-          bottom: top + (clientHeight - offsetFromTop),
-        });
-        editor.current.focus();
-      };
-
-      const moveCursorToPath = (path: string[]) => {
-        if (!editor.current) {
-          return;
-        }
-        const codeMirrorDoc = editor.current.getDoc();
-        const yamlDoc = yaml.parseDocument(configCode);
-        const range = findRangeInDocumentFromPath(yamlDoc, path, 'key');
-        if (!range) {
-          return;
-        }
-        const from = codeMirrorDoc.posFromIndex(range ? range.start : 0) as CodeMirror.Position;
-        moveCursor(from.line, from.ch);
-      };
+    const moveCursorToPath = (path: string[]) => {
+      if (!editor.current) {
+        return;
+      }
+      const codeMirrorDoc = editor.current.getDoc();
+      const yamlDoc = yaml.parseDocument(configCode);
+      const range = findRangeInDocumentFromPath(yamlDoc, path, 'key');
+      if (!range) {
+        return;
+      }
+      const from = codeMirrorDoc.posFromIndex(range ? range.start : 0) as CodeMirror.Position;
+      moveCursor(from.line, from.ch);
+    };
 
-      return {moveCursor, moveCursorToPath};
-    },
-    [configCode],
-  );
+    return {moveCursor, moveCursorToPath};
+  }, [configCode]);
 
   const options = useMemo(() => {
     return {

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/RefreshableCountdown.tsx
@@ -27,8 +27,8 @@ export const RefreshableCountdown = (props: Props) => {
         {refreshing
           ? `Refreshing ${dataDescription}…`
           : seconds === undefined
-          ? null
-          : secondsToCountdownTime(seconds)}
+            ? null
+            : secondsToCountdownTime(seconds)}
       </span>
       <Tooltip content={<span style={{whiteSpace: 'nowrap'}}>Refresh now</span>} position="top">
         <RefreshButton onClick={onRefresh}>

diff --git a/...es/dagster-ui/packages/ui-components/src/components/configeditor/codemirror-yaml/mode.tsx b/...es/dagster-ui/packages/ui-components/src/components/configeditor/codemirror-yaml/mode.tsx
@@ -277,8 +277,8 @@ const defineYamlMode = () => {
                 parentContainer === ContainerType.List
                   ? stream.match(/^[^,\]]+/)
                   : parentContainer === ContainerType.Dict
-                  ? stream.match(/^[^,\}]+/)
-                  : stream.match(/^.+$/);
+                    ? stream.match(/^[^,\}]+/)
+                    : stream.match(/^.+$/);
             }
             const value = match ? match[0]! : '';
             if (value.match(RegExps.VARIABLE)) {