[eslint] Bump prettier, eslint config version (#16652)

## Summary & Motivation Update dependencies in eslint-config and elsewhere in `dagster-ui` JS packages. I'll publish eslint-config once this is, and use it in our use cases in OSS and Cloud. The `ui-components` package uses the published eslint-config package, so that will get updated in a followup. ## How I Tested These Changes TS, lint.
dagster-io · Sep 20, 2023 · 1465295 · 1465295 · github-actions · Sep 20, 2023
1 parent b06625c
commit 1465295
Show file tree

Hide file tree

Showing 72 changed files with 2,026 additions and 801 deletions.
diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json
@@ -36,10 +36,11 @@
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13",
     "@types/webpack-bundle-analyzer": "^4",
-    "eslint": "8.6.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-jest": "^26.4.6",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-webpack-plugin": "3.1.1",
-    "prettier": "2.2.1",
+    "prettier": "^3.0.3",
     "typescript": "5.2.2",
     "webpack": "^5.88.1",
     "webpack-bundle-analyzer": "^4.7.0"

diff --git a/js_modules/dagster-ui/packages/eslint-config/CHANGES.md b/js_modules/dagster-ui/packages/eslint-config/CHANGES.md
@@ -1,3 +1,7 @@
+## 1.0.13 (September 20, 2023)
+
+- Dependency upgrades
+
 ## 1.0.12 (August 2, 2023)
 
 - Removed styled-components from restricted imports due to babel-plugins-macro providing the required behavior.

diff --git a/js_modules/dagster-ui/packages/eslint-config/package.json b/js_modules/dagster-ui/packages/eslint-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dagster-io/eslint-config",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Shared eslint configuration for @dagster-io",
   "license": "Apache-2.0",
   "main": "index.js",
@@ -10,27 +10,27 @@
     "format": "prettier -w --config ./.prettierrc.js ."
   },
   "peerDependencies": {
-    "eslint": "^8.30.0",
-    "prettier": "2.8.1"
+    "eslint": "^8.49.0",
+    "prettier": "^3.0.3"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "6.7.2",
-    "@typescript-eslint/parser": "6.7.2",
-    "eslint-config-prettier": "8.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-dagster-rules": "link:./rules",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jest": "^27.1.7",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0"
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.4.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0"
   },
   "devDependencies": {
-    "@types/jest": "^27.5.1",
-    "eslint": "^8.6.0",
-    "jest": "^29.4",
-    "prettier": "2.2.1",
-    "ts-jest": "^28.0.3",
+    "@types/jest": "^29.5.5",
+    "eslint": "^8.49.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "ts-jest": "^29.1.1",
     "typescript": "5.2.2"
   }
 }
diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -81,7 +81,7 @@
     "babel-loader": "^9.1.2",
     "babel-plugin-macros": "^3.1.0",
     "core-js": "^3.21.1",
-    "eslint": "^8.6.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-storybook": "^0.6.13",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",

diff --git a/js_modules/dagster-ui/packages/ui-core/package.json b/js_modules/dagster-ui/packages/ui-core/package.json
@@ -131,7 +131,8 @@
     "babel-plugin-graphql-tag": "^2.5.0",
     "babel-plugin-macros": "^2.8.0",
     "child-process": "^1.0.2",
-    "eslint": "^8.39.0",
+    "eslint": "^8.49.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-storybook": "^0.6.13",
     "faker": "5.5.3",
     "graphql-codegen-typescript-mock-data": "^3.3.0",
@@ -141,7 +142,7 @@
     "jest": "^29.4",
     "jest-canvas-mock": "^2.4.0",
     "jest-environment-jsdom": "^29.4",
-    "prettier": "2.2.1",
+    "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-dom": "^18.2.0",

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/ExecutionSessionStorage.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/ExecutionSessionStorage.tsx
@@ -127,19 +127,21 @@ export function applyCreateSession(
 
 type StorageHook = [IStorageData, (data: IStorageData) => void];
 
-const buildValidator = (initial: Partial<IExecutionSession> = {}) => (json: any): IStorageData => {
-  let data: IStorageData = Object.assign({sessions: {}, current: ''}, json);
+const buildValidator =
+  (initial: Partial<IExecutionSession> = {}) =>
+  (json: any): IStorageData => {
+    let data: IStorageData = Object.assign({sessions: {}, current: ''}, json);
 
-  if (Object.keys(data.sessions).length === 0) {
-    data = applyCreateSession(data, initial);
-  }
+    if (Object.keys(data.sessions).length === 0) {
+      data = applyCreateSession(data, initial);
+    }
 
-  if (!data.sessions[data.current]) {
-    data.current = Object.keys(data.sessions)[0]!;
-  }
+    if (!data.sessions[data.current]) {
+      data.current = Object.keys(data.sessions)[0]!;
+    }
 
-  return data;
-};
+    return data;
+  };
 
 const makeKey = (basePath: string, repoAddress: RepoAddress, pipelineOrJobName: string) =>
   `dagster.v2.${basePath}-${repoAddress.location}-${repoAddress.name}-${pipelineOrJobName}`;
@@ -312,37 +314,37 @@ export const MAX_SESSION_WRITE_ATTEMPTS = 10;
  * user has too much data already in localStorage, clear out old sessions until the
  * write is successful or we run out of retries.
  */
-export const writeLaunchpadSessionToStorage = (
-  setState: React.Dispatch<React.SetStateAction<IStorageData | undefined>>,
-) => (data: IStorageData) => {
-  const tryWrite = (data: IStorageData) => {
-    try {
-      setState(data);
-      return true;
-    } catch (e) {
-      // The data could not be written to localStorage. This is probably due to
-      // a QuotaExceededError, but since different browsers use slightly different
-      // objects for this, we don't try to get clever detecting it.
-      return false;
-    }
-  };
+export const writeLaunchpadSessionToStorage =
+  (setState: React.Dispatch<React.SetStateAction<IStorageData | undefined>>) =>
+  (data: IStorageData) => {
+    const tryWrite = (data: IStorageData) => {
+      try {
+        setState(data);
+        return true;
+      } catch (e) {
+        // The data could not be written to localStorage. This is probably due to
+        // a QuotaExceededError, but since different browsers use slightly different
+        // objects for this, we don't try to get clever detecting it.
+        return false;
+      }
+    };
 
-  const getInitiallyStoredSessions = memoize(() => allStoredSessions());
+    const getInitiallyStoredSessions = memoize(() => allStoredSessions());
 
-  // Track the number of attempts at writing this session to localStorage so that
-  // we eventually give up and don't loop endlessly.
-  let attempts = 1;
+    // Track the number of attempts at writing this session to localStorage so that
+    // we eventually give up and don't loop endlessly.
+    let attempts = 1;
 
-  // Attempt to write the session to storage. If an error occurs, delete the oldest
-  // session and try again.
-  while (!tryWrite(data) && attempts < MAX_SESSION_WRITE_ATTEMPTS) {
-    attempts++;
+    // Attempt to write the session to storage. If an error occurs, delete the oldest
+    // session and try again.
+    while (!tryWrite(data) && attempts < MAX_SESSION_WRITE_ATTEMPTS) {
+      attempts++;
 
-    // Remove the oldest session and try again.
-    const toRemove = getInitiallyStoredSessions().shift();
-    if (toRemove) {
-      const [jobKey, sessionID] = toRemove;
-      removeSession(jobKey, sessionID);
+      // Remove the oldest session and try again.
+      const toRemove = getInitiallyStoredSessions().shift();
+      if (toRemove) {
+        const [jobKey, sessionID] = toRemove;
+        removeSession(jobKey, sessionID);
+      }
     }
-  }
-};
+  };
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/Permissions.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/Permissions.tsx
@@ -189,9 +189,10 @@ const unpackPermissions = (
  */
 export const useUnscopedPermissions = (): PermissionsState => {
   const {unscopedPermissions, loading} = React.useContext(PermissionsContext);
-  const unpacked = React.useMemo(() => unpackPermissions(unscopedPermissions), [
-    unscopedPermissions,
-  ]);
+  const unpacked = React.useMemo(
+    () => unpackPermissions(unscopedPermissions),
+    [unscopedPermissions],
+  );
 
   return React.useMemo(() => {
     return {

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/QueryRefresh.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/QueryRefresh.tsx
@@ -115,9 +115,10 @@ export function useQueryRefreshAtInterval(
 
   // Expose the next fire time both as a unix timstamp and as a "seconds" interval
   // so the <QueryRefreshCountdown> can display the number easily.
-  const nextFireDelay = React.useMemo(() => (nextFireMs ? nextFireMs - Date.now() : -1), [
-    nextFireMs,
-  ]);
+  const nextFireDelay = React.useMemo(
+    () => (nextFireMs ? nextFireMs - Date.now() : -1),
+    [nextFireMs],
+  );
 
   // Memoize the returned object so components passed the entire QueryRefreshState
   // can be memoized / pure components.

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/Util.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/Util.tsx
@@ -200,10 +200,10 @@ export function colorHash(str: string) {
 // const textMetadata = metadataEntries.filter(gqlTypePredicate('TextMetadataEntry'));
 //
 // `textMetadata` will be of type `TextMetadataEntry[]`.
-export const gqlTypePredicate = <T extends string>(typename: T) => <N extends {__typename: string}>(
-  node: N,
-): node is Extract<N, {__typename: T}> => {
-  return node.__typename === typename;
-};
+export const gqlTypePredicate =
+  <T extends string>(typename: T) =>
+  <N extends {__typename: string}>(node: N): node is Extract<N, {__typename: T}> => {
+    return node.__typename === typename;
+  };
 
 export const COMMON_COLLATOR = new Intl.Collator(navigator.language, {sensitivity: 'base'});
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/WebSocketProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/WebSocketProvider.tsx
@@ -146,7 +146,7 @@ export const WebSocketStatus: React.FC = (props) => (
         [WebSocket.CLOSING]: (
           <Circle style={{background: Colors.Gray400}} title="Closing..." {...props} />
         ),
-      }[status] || <Circle style={{background: Colors.Gray400}} title="Disconnected" {...props} />)
+      })[status] || <Circle style={{background: Colors.Gray400}} title="Disconnected" {...props} />
     }
   </WebSocketContext.Consumer>
 );
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/time/HourCycleSelect.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/time/HourCycleSelect.tsx
@@ -73,7 +73,7 @@ export const HourCycleSelect: React.FC = () => {
   ];
 
   return (
-    <Select<typeof items[0]>
+    <Select<(typeof items)[0]>
       popoverProps={{
         position: 'bottom-left',
         modifiers: {offset: {enabled: true, offset: '-12px, 8px'}},

diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/time/TimezoneSelect.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/time/TimezoneSelect.tsx
@@ -139,7 +139,7 @@ export const TimezoneSelect: React.FC<Props> = ({trigger}) => {
   }, []);
 
   return (
-    <Select<typeof allTimezoneItems[0]>
+    <Select<(typeof allTimezoneItems)[0]>
       popoverProps={{
         position: 'bottom-left',
         modifiers: {offset: {enabled: true, offset: '-12px, 8px'}},

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGraphExplorer.tsx
@@ -200,9 +200,8 @@ const AssetGraphExplorerWithData: React.FC<WithDataProps> = ({
         }
 
         const existing = explorerPath.opNames[0]!.split(',');
-        nextOpsNameSelection = (existing.includes(token)
-          ? without(existing, token)
-          : uniq([...existing, ...tokensToAdd])
+        nextOpsNameSelection = (
+          existing.includes(token) ? without(existing, token) : uniq([...existing, ...tokensToAdd])
         ).join(',');
       }
 

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGroupNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetGroupNode.tsx
@@ -11,12 +11,8 @@ import {MINIMAL_SCALE, GROUPS_ONLY_SCALE} from './AssetGraphExplorer';
 import {GroupLayout} from './layout';
 
 export const AssetGroupNode: React.FC<{group: GroupLayout; scale: number}> = ({group, scale}) => {
-  const {
-    repositoryLocationName,
-    repositoryDisambiguationRequired,
-    repositoryName,
-    groupName,
-  } = group;
+  const {repositoryLocationName, repositoryDisambiguationRequired, repositoryName, groupName} =
+    group;
 
   return (
     <div style={{position: 'relative', width: '100%', height: '100%'}}>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeStatusContent.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeStatusContent.tsx
@@ -174,12 +174,8 @@ export function _buildAssetNodeStatusContent({
     return LOADING_STATUS_CONTENT;
   }
 
-  const {
-    lastMaterialization,
-    runWhichFailedToMaterialize,
-    inProgressRunIds,
-    unstartedRunIds,
-  } = liveData;
+  const {lastMaterialization, runWhichFailedToMaterialize, inProgressRunIds, unstartedRunIds} =
+    liveData;
 
   const materializingRunId = inProgressRunIds[0] || unstartedRunIds[0];
   const overdue = isAssetOverdue(liveData);
@@ -224,13 +220,14 @@ export function _buildAssetNodeStatusContent({
   if (liveData.partitionStats) {
     const {numPartitions, numMaterialized, numFailed} = liveData.partitionStats;
     const numMissing = numPartitions - numFailed - numMaterialized;
-    const {background, foreground, border} = StyleForAssetPartitionStatus[
-      overdue || numFailed
-        ? AssetPartitionStatus.FAILED
-        : numMissing
-        ? AssetPartitionStatus.MISSING
-        : AssetPartitionStatus.MATERIALIZED
-    ];
+    const {background, foreground, border} =
+      StyleForAssetPartitionStatus[
+        overdue || numFailed
+          ? AssetPartitionStatus.FAILED
+          : numMissing
+          ? AssetPartitionStatus.MISSING
+          : AssetPartitionStatus.MATERIALIZED
+      ];
     const statusCase =
       overdue || numFailed
         ? (StatusCase.PARTITIONS_FAILED as const)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/AssetNode.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/__stories__/AssetNode.stories.tsx
@@ -14,7 +14,7 @@ export default {
 };
 
 export const LiveStates = () => {
-  const caseWithLiveData = (scenario: typeof Mocks.AssetNodeScenariosBase[0]) => {
+  const caseWithLiveData = (scenario: (typeof Mocks.AssetNodeScenariosBase)[0]) => {
     const dimensions = getAssetNodeDimensions(scenario.definition);
     return (
       <Box flex={{direction: 'column', gap: 8, alignItems: 'flex-start'}}>