build(eslint): Add `simple-import-sort` eslint plugin (#22104)

This will sort and group our imports by the filename (the part after from). Also note, this is auto-fixable.

.eslintrc.js

@@ -9,7 +9,46 @@ module.exports = {
     tick: true,
     jest: true,
   },
-  rules: {},
+  plugins: ['simple-import-sort'],
+
+  rules: {
+    'simple-import-sort/imports': [
+      'error',
+      {
+        groups: [
+          // Side effect imports.
+          ['^\\u0000'],
+
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+          ],
+
+          // Packages. `react` related packages come first.
+          ['^react', '^@?\\w'],
+
+          // Test should be separate from the app
+          ['^(sentry-test)(/.*|$)'],
+
+          // Internal packages.
+          ['^(app|sentry|sentry-locale)(/.*|$)'],
+
+          // Style imports.
+          ['^.+\\.less$'],
+
+          // Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+
+          // Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+        ],
+      },
+    ],
+    'simple-import-sort/exports': 'error',
+    'sort-imports': 'off',
+    'import/order': 'off',
+  },
   overrides: [
     {
       files: ['*.ts', '*.tsx'],

package.json

@@ -157,6 +157,7 @@
     "enzyme-to-json": "3.4.3",
     "eslint": "5.11.1",
     "eslint-config-sentry-app": "^1.44.0",
+    "eslint-plugin-simple-import-sort": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",
     "jest": "24.9.0",
     "jest-canvas-mock": "^2.2.0",

src/sentry/static/sentry/app/actionCreators/account.tsx

@@ -1,7 +1,7 @@
-import {Client} from 'app/api';
 import {addErrorMessage, addSuccessMessage} from 'app/actionCreators/indicator';
+import {Client} from 'app/api';
 import ConfigStore from 'app/stores/configStore';
-import {User, Identity} from 'app/types';
+import {Identity, User} from 'app/types';
 
 export async function disconnectIdentity(identity: Identity) {
   const api = new Client();

src/sentry/static/sentry/app/actionCreators/dashboards.tsx

@@ -1,10 +1,10 @@
+import {addErrorMessage} from 'app/actionCreators/indicator';
 import {Client} from 'app/api';
 import {t} from 'app/locale';
-import {addErrorMessage} from 'app/actionCreators/indicator';
 import {
   DashboardListItem,
-  OrgDashboardResponse,
   OrgDashboard,
+  OrgDashboardResponse,
   OrgDashboardUpdate,
 } from 'app/views/dashboardsV2/types';
 

src/sentry/static/sentry/app/actionCreators/deployPreview.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import {DEPLOY_PREVIEW_CONFIG, EXPERIMENTAL_SPA} from 'app/constants';
-import {t, tct} from 'app/locale';
 import AlertActions from 'app/actions/alertActions';
 import ExternalLink from 'app/components/links/externalLink';
+import {DEPLOY_PREVIEW_CONFIG, EXPERIMENTAL_SPA} from 'app/constants';
+import {t, tct} from 'app/locale';
 
 export function displayDeployPreviewAlert() {
   if (!DEPLOY_PREVIEW_CONFIG) {

src/sentry/static/sentry/app/actionCreators/discoverSavedQueries.tsx

@@ -1,7 +1,7 @@
+import {addErrorMessage} from 'app/actionCreators/indicator';
 import {Client} from 'app/api';
-import {SavedQuery, NewQuery} from 'app/types';
 import {t} from 'app/locale';
-import {addErrorMessage} from 'app/actionCreators/indicator';
+import {NewQuery, SavedQuery} from 'app/types';
 
 export function fetchSavedQueries(api: Client, orgId: string): Promise<SavedQuery[]> {
   const promise: Promise<SavedQuery[]> = api.requestPromise(

src/sentry/static/sentry/app/actionCreators/events.tsx

@@ -2,16 +2,16 @@ import {LocationDescriptor} from 'history';
 import pick from 'lodash/pick';
 
 import {Client} from 'app/api';
-import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {canIncludePreviousPeriod} from 'app/components/charts/utils';
-import {getPeriod} from 'app/utils/getPeriod';
+import {URL_PARAM} from 'app/constants/globalSelectionHeader';
 import {
-  EventsStats,
   DateString,
-  OrganizationSummary,
+  EventsStats,
   MultiSeriesEventsStats,
+  OrganizationSummary,
 } from 'app/types';
 import {LocationQuery} from 'app/utils/discover/eventView';
+import {getPeriod} from 'app/utils/getPeriod';
 
 type Options = {
   organization: OrganizationSummary;

src/sentry/static/sentry/app/actionCreators/formSearch.tsx

@@ -1,8 +1,8 @@
-import flatten from 'lodash/flatten';
 import flatMap from 'lodash/flatMap';
+import flatten from 'lodash/flatten';
 
-import {Field, JsonFormObject} from 'app/views/settings/components/forms/type';
 import FormSearchActions from 'app/actions/formSearchActions';
+import {Field, JsonFormObject} from 'app/views/settings/components/forms/type';
 
 type Params = {
   route: string;

src/sentry/static/sentry/app/actionCreators/globalSelection.tsx

@@ -1,10 +1,15 @@
 import * as ReactRouter from 'react-router';
+import * as Sentry from '@sentry/react';
 import isInteger from 'lodash/isInteger';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import * as qs from 'query-string';
-import * as Sentry from '@sentry/react';
 
+import GlobalSelectionActions from 'app/actions/globalSelectionActions';
+import {
+  getDefaultSelection,
+  getStateFromQuery,
+} from 'app/components/organizations/globalSelectionHeader/utils';
 import {
   DATE_TIME,
   LOCAL_STORAGE_KEY,
@@ -18,12 +23,7 @@ import {
   Project,
 } from 'app/types';
 import {defined} from 'app/utils';
-import {
-  getDefaultSelection,
-  getStateFromQuery,
-} from 'app/components/organizations/globalSelectionHeader/utils';
 import {getUtcDateString} from 'app/utils/dates';
-import GlobalSelectionActions from 'app/actions/globalSelectionActions';
 import localStorage from 'app/utils/localStorage';
 
 /**

src/sentry/static/sentry/app/actionCreators/group.tsx

@@ -1,11 +1,11 @@
 import * as Sentry from '@sentry/react';
 
-import {Client} from 'app/api';
-import {buildUserId, buildTeamId} from 'app/utils';
-import {uniqueId} from 'app/utils/guid';
 import GroupActions from 'app/actions/groupActions';
+import {Client} from 'app/api';
 import GroupStore from 'app/stores/groupStore';
-import {Member, User, Group, Actor, Note} from 'app/types';
+import {Actor, Group, Member, Note, User} from 'app/types';
+import {buildTeamId, buildUserId} from 'app/utils';
+import {uniqueId} from 'app/utils/guid';
 
 type AssignToUserParams = {
   /**