chore(prettier): add @trivago/prettier-plugin-sort-imports

js_modules/dagster-ui/.prettierrc.js

@@ -3,4 +3,11 @@ module.exports = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',
+
+  // https://github.com/trivago/prettier-plugin-sort-imports
+  importOrder: ['^@dagster-io/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  importOrderGroupNamespaceSpecifiers: true,
+  plugins: ["@trivago/prettier-plugin-sort-imports"]
 };

js_modules/dagster-ui/package.json

@@ -8,6 +8,7 @@
     "build-with-profiling": "yarn workspace @dagster-io/app-oss build --profile && yarn post-build",
     "post-build": "cd ../../python_modules/dagster-webserver/dagster_webserver && rm -rf webapp && mkdir -p webapp && cp -r ../../../js_modules/dagster-ui/packages/app-oss/build ./webapp/ && mkdir -p webapp/build/vendor && cp -r graphql-playground ./webapp/build/vendor && cp ../../../js_modules/dagster-ui/packages/app-oss/csp-header.txt ./webapp/build",
     "lint": "yarn workspace @dagster-io/app-oss lint && yarn workspace @dagster-io/ui-core lint && yarn workspace @dagster-io/ui-components lint",
+    "format": "yarn workspace @dagster-io/app-oss format && yarn workspace @dagster-io/ui-core format && yarn workspace @dagster-io/ui-components format",
     "start": "yarn workspace @dagster-io/app-oss start",
     "ts": "yarn workspace @dagster-io/app-oss ts && yarn workspace @dagster-io/ui-components ts",
     "postinstall": "patch-package"

js_modules/dagster-ui/packages/app-oss/.prettierrc.js

@@ -3,4 +3,11 @@ module.exports = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',
+
+  // https://github.com/trivago/prettier-plugin-sort-imports
+  importOrder: ['^@dagster-io/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  importOrderGroupNamespaceSpecifiers: true,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
 };

js_modules/dagster-ui/packages/app-oss/package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@dagster-io/eslint-config": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.11",
     "@types/node": "^16.11.20",
     "@types/react": "^18.2.0",
@@ -51,6 +52,7 @@
     "start": "next dev",
     "build": "next build",
     "lint": "eslint src/ --ext=.tsx,.ts,.js --fix -c .eslintrc.js",
+    "format": "prettier -w --config ./.prettierrc.js .",
     "test": "jest",
     "ts": "tsc -p .",
     "analyze": "webpack-bundle-analyzer '.next/webpack-stats.json'"

js_modules/dagster-ui/packages/app-oss/src/App.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {App} from '@dagster-io/ui-core/app/App';
 import {createAppCache} from '@dagster-io/ui-core/app/AppCache';
 import {errorLink, setupErrorToasts} from '@dagster-io/ui-core/app/AppError';
@@ -8,7 +10,6 @@ import {UserSettingsButton} from '@dagster-io/ui-core/app/UserSettingsButton';
 import {logLink, timeStartLink} from '@dagster-io/ui-core/app/apolloLinks';
 import {LiveDataPollRateContext} from '@dagster-io/ui-core/asset-data/AssetLiveDataProvider';
 import {DeploymentStatusType} from '@dagster-io/ui-core/instance/DeploymentStatusProvider';
-import React from 'react';
 
 import {CommunityNux} from './NUX/CommunityNux';
 import {extractInitializationData} from './extractInitializationData';

js_modules/dagster-ui/packages/app-oss/src/NUX/CommunityNux.tsx

@@ -1,4 +1,7 @@
 import {gql, useMutation, useQuery} from '@apollo/client';
+import React from 'react';
+import isEmail from 'validator/lib/isEmail';
+
 import {
   Body,
   Box,
@@ -16,8 +19,6 @@ import {
   colorTextRed,
 } from '@dagster-io/ui-components';
 import {useStateWithStorage} from '@dagster-io/ui-core/hooks/useStateWithStorage';
-import React from 'react';
-import isEmail from 'validator/lib/isEmail';
 
 export const CommunityNux = () => {
   const [didDismissCommunityNux, dissmissInBrowser] = useStateWithStorage(

js_modules/dagster-ui/packages/app-oss/src/pages/_document.tsx

@@ -1,7 +1,6 @@
 import fs from 'fs';
+import {Head, Html, Main, NextScript} from 'next/document';
 import path from 'path';
-
-import {Html, Head, Main, NextScript} from 'next/document';
 import React from 'react';
 
 function getSecurityPolicy() {

js_modules/dagster-ui/packages/app-oss/src/telemetryLink.tsx

@@ -1,4 +1,5 @@
 import {ApolloLink} from '@apollo/client';
+
 import {TelemetryAction, logTelemetry} from '@dagster-io/ui-core/app/Telemetry';
 
 const TELEMETRY_WHITELIST = new Set([

js_modules/dagster-ui/packages/eslint-config/.prettierrc.js

@@ -3,4 +3,11 @@ module.exports = {
   printWidth: 100,
   singleQuote: true,
   trailingComma: 'all',
+
+  // https://github.com/trivago/prettier-plugin-sort-imports
+  importOrder: ['^@dagster-io/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  importOrderGroupNamespaceSpecifiers: true,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
 };

js_modules/dagster-ui/packages/eslint-config/package.json

@@ -26,6 +26,7 @@
     "eslint-plugin-react-hooks": "^4.6.0"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.11",
     "eslint": "^8.49.0",
     "jest": "^29.7.0",

js_modules/dagster-ui/packages/ui-components/.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     [
-      "@babel/preset-env", {
+      "@babel/preset-env",
+      {
         "useBuiltIns": "entry",
         "corejs": 3
       }

js_modules/dagster-ui/packages/ui-components/.prettierrc.js

@@ -2,5 +2,12 @@ module.exports = {
   bracketSpacing: false,
   printWidth: 100,
   singleQuote: true,
-  trailingComma: 'all'
+  trailingComma: 'all',
+
+  // https://github.com/trivago/prettier-plugin-sort-imports
+  importOrder: ['^@dagster-io/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  importOrderGroupNamespaceSpecifiers: true,
+  plugins: ['@trivago/prettier-plugin-sort-imports'],
 };

js_modules/dagster-ui/packages/ui-components/.storybook/blueprint.css

@@ -1,3 +1,3 @@
 @import '@blueprintjs/core/lib/css/blueprint.css';
 @import '@blueprintjs/select/lib/css/blueprint-select.css';
-@import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
+@import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';

js_modules/dagster-ui/packages/ui-components/.storybook/preview.js

@@ -1,26 +1,24 @@
+import * as React from 'react';
+import {MemoryRouter} from 'react-router-dom';
+import {createGlobalStyle} from 'styled-components/macro';
+
 import {
   FontFamily,
-  GlobalInter,
-  GlobalInconsolata,
   GlobalDialogStyle,
+  GlobalInconsolata,
+  GlobalInter,
   GlobalPopoverStyle,
   GlobalSuggestStyle,
   GlobalToasterStyle,
   GlobalTooltipStyle,
 } from '../src';
-
-import {MemoryRouter} from 'react-router-dom';
-import * as React from 'react';
-
-import {createGlobalStyle} from 'styled-components/macro';
-
-import './blueprint.css';
 import {
   colorBackgroundDefault,
   colorLinkDefault,
   colorTextDefault,
   colorTextLight,
 } from '../src/theme/color';
+import './blueprint.css';
 
 const GlobalStyle = createGlobalStyle`
   * {

js_modules/dagster-ui/packages/ui-components/package.json

@@ -15,6 +15,7 @@
     "prepublish": "yarn lint && yarn ts && yarn jest",
     "build": "rm -rf lib && tsc -p ./tsconfig.build.json && yarn rollup -c rollup.config.js",
     "lint": "eslint src/ --ext=.tsx,.ts,.js --fix -c .eslintrc.js",
+    "format": "prettier -w --config ./.prettierrc.js .",
     "jest": "jest",
     "jest-all-silent": "yarn jest --silent --watchAll=false",
     "ts": "tsc -p .",
@@ -65,6 +66,7 @@
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
     "@types/codemirror": "^5.60.5",

js_modules/dagster-ui/packages/ui-components/rollup.config.js

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-default-export */
-
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import image from '@rollup/plugin-image';

js_modules/dagster-ui/packages/ui-components/src/components/Alert.tsx

@@ -15,10 +15,9 @@ import {
   colorTextRed,
   colorTextYellow,
 } from '../theme/color';
-
 import {Box} from './Box';
 import {Group} from './Group';
-import {IconName, Icon} from './Icon';
+import {Icon, IconName} from './Icon';
 
 export type AlertIntent = 'info' | 'warning' | 'error' | 'success';
 

js_modules/dagster-ui/packages/ui-components/src/components/BaseButton.tsx

@@ -7,7 +7,6 @@ import {
   colorBackgroundDefaultHover,
   colorTextDefault,
 } from '../theme/color';
-
 import {StyledButton, StyledButtonText} from './StyledButton';
 
 interface CommonButtonProps {

js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx

@@ -7,7 +7,6 @@ import {
   colorTooltipBackground,
   colorTooltipText,
 } from '../theme/color';
-
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
 

js_modules/dagster-ui/packages/ui-components/src/components/Box.tsx

@@ -2,7 +2,6 @@ import styled, {css} from 'styled-components';
 
 import {colorKeylineDefault} from '../theme/color';
 import {assertUnreachable} from '../util/assertUnreachable';
-
 import {BorderSetting, BorderSide, DirectionalSpacing, FlexProperties} from './types';
 
 interface Props {

js_modules/dagster-ui/packages/ui-components/src/components/Button.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
-import {AnchorButton as BlueprintAnchorButton, Button as BlueprintButton} from '@blueprintjs/core';
 import * as React from 'react';
+import {AnchorButton as BlueprintAnchorButton, Button as BlueprintButton} from '@blueprintjs/core';
 import styled from 'styled-components';
 
 import {CoreColors} from '../palettes/Colors';
@@ -17,13 +17,12 @@ import {
   colorAccentYellowHover,
   colorBackgroundGray,
   colorBackgroundGreen,
+  colorBackgroundLightHover,
   colorBackgroundRed,
   colorBackgroundYellow,
   colorBorderDefault,
   colorBorderHover,
-  colorBackgroundLightHover,
 } from '../theme/color';
-
 import {BaseButton} from './BaseButton';
 import {Spinner} from './Spinner';
 import {StyledButton, StyledButtonText} from './StyledButton';

js_modules/dagster-ui/packages/ui-components/src/components/ButtonGroup.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 
-import {colorBackgroundLighterHover, colorTextLight, colorTextDefault} from '../theme/color';
-
+import {colorBackgroundLighterHover, colorTextDefault, colorTextLight} from '../theme/color';
 import {BaseButton} from './BaseButton';
 import {JoinedButtons, buildColorSet} from './Button';
-import {IconName, Icon} from './Icon';
+import {Icon, IconName} from './Icon';
 import {Tooltip} from './Tooltip';
 
 export type ButtonGroupItem<T> = {

js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import styled, {css} from 'styled-components';
 
 import {colorLinkDefault} from '../theme/color';
-
 import {Box} from './Box';
 
 type Color =

js_modules/dagster-ui/packages/ui-components/src/components/Checkbox.tsx

@@ -4,16 +4,16 @@ import styled, {css} from 'styled-components';
 
 import {
   colorAccentBlue,
+  colorAccentBlueHover,
   colorAccentGray,
-  colorAccentWhite,
   colorAccentReversed,
+  colorAccentWhite,
   colorBackgroundDefault,
   colorBackgroundGray,
+  colorFocusRing,
   colorTextDefault,
   colorTextDisabled,
   colorTextLighter,
-  colorFocusRing,
-  colorAccentBlueHover,
 } from '../theme/color';
 
 type Format = 'check' | 'star' | 'switch';

js_modules/dagster-ui/packages/ui-components/src/components/ConfigEditorWithSchema.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {createGlobalStyle} from 'styled-components';
 
 import {Box} from './Box';
-import {ConfigSchema, ConfigEditorHandle, NewConfigEditor} from './NewConfigEditor';
+import {ConfigEditorHandle, ConfigSchema, NewConfigEditor} from './NewConfigEditor';
 import {Spinner} from './Spinner';
 import {SplitPanelContainer} from './SplitPanelContainer';
 import {ConfigEditorHelp} from './configeditor/ConfigEditorHelp';

js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx

@@ -14,7 +14,6 @@ import {
   colorTooltipBackground,
   colorTooltipText,
 } from '../theme/color';
-
 import {Popover} from './Popover';
 import {ConfigSchema_allConfigTypes as TypeData} from './configeditor/types/ConfigSchema';
 import {FontFamily} from './styles';

js_modules/dagster-ui/packages/ui-components/src/components/DagsterCodeMirrorStyle.tsx

@@ -2,26 +2,25 @@ import {createGlobalStyle} from 'styled-components';
 
 import {
   colorAccentRed,
-  colorBorderDefault,
-  colorBackgroundDefault,
   colorBackgroundBlue,
+  colorBackgroundBlueHover,
   colorBackgroundCyan,
+  colorBackgroundDefault,
   colorBackgroundGray,
   colorBackgroundGreen,
+  colorBackgroundLight,
   colorBackgroundOlive,
   colorBackgroundRed,
   colorBackgroundYellow,
-  colorTextLight,
+  colorBorderDefault,
   colorTextBlue,
   colorTextCyan,
+  colorTextDefault,
   colorTextGreen,
+  colorTextLight,
   colorTextRed,
   colorTextYellow,
-  colorTextDefault,
-  colorBackgroundLight,
-  colorBackgroundBlueHover,
 } from '../theme/color';
-
 import {Icons} from './Icon';
 import {FontFamily} from './styles';
 

js_modules/dagster-ui/packages/ui-components/src/components/Dialog.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
-import {Dialog as BlueprintDialog} from '@blueprintjs/core';
 import * as React from 'react';
+import {Dialog as BlueprintDialog} from '@blueprintjs/core';
 import styled, {createGlobalStyle} from 'styled-components';
 
 import {
@@ -9,11 +9,10 @@ import {
   colorDialogBackground,
   colorShadowDefault,
 } from '../theme/color';
-
 import {Box} from './Box';
 import {ErrorBoundary} from './ErrorBoundary';
 import {Group} from './Group';
-import {IconName, Icon} from './Icon';
+import {Icon, IconName} from './Icon';
 
 interface Props
   extends Omit<

js_modules/dagster-ui/packages/ui-components/src/components/ErrorBoundary.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 
 import {colorAccentRed, colorTextLight} from '../theme/color';
-
 import {Box} from './Box';
 import {Body, Subheading} from './Text';
 import {FontFamily} from './styles';