import sorting now alphabatizes (#12271)

airbyte-webapp/.eslintrc

@@ -6,12 +6,7 @@
     "prettier",
     "plugin:prettier/recommended"
   ],
-  "plugins": [
-    "react",
-    "@typescript-eslint",
-    "prettier",
-    "unused-imports"
-  ],
+  "plugins": ["react", "@typescript-eslint", "prettier", "unused-imports"],
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module",
@@ -22,32 +17,37 @@
   "rules": {
     "prettier/prettier": "error",
     "unused-imports/no-unused-imports": "error",
-    "import/order": ["error", {
-      "newlines-between": "always",
-      "groups": ["type", "builtin", "external", "internal", ["parent", "sibling"], "index"],
-      "pathGroupsExcludedImportTypes": ["builtin"],
-      "pathGroups": [
-        {
-          "pattern": "components{/**,}",
-          "group": "internal"
-        },
-        {
-          "pattern": "+(config|core|hooks|locales|packages|pages|services|types|utils|views){/**,}",
-          "group": "internal",
-          "position": "after"
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "groups": ["type", "builtin", "external", "internal", ["parent", "sibling"], "index"],
+        "pathGroupsExcludedImportTypes": ["builtin"],
+        "pathGroups": [
+          {
+            "pattern": "components{/**,}",
+            "group": "internal"
+          },
+          {
+            "pattern": "+(config|core|hooks|locales|packages|pages|services|types|utils|views){/**,}",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "alphabetize": {
+          "order": "asc" /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
+          "caseInsensitive": true /* ignore case. Options: [true, false] */
         }
-      ]
-    }],
+      }
+    ],
     "@typescript-eslint/ban-ts-comment": [
       "warn",
       {
         "ts-ignore": "allow-with-description",
         "ts-expect-error": "allow-with-description"
       }
     ],
-    "@typescript-eslint/ban-types": [
-      "warn"
-    ]
+    "@typescript-eslint/ban-types": ["warn"]
   },
   "parser": "@typescript-eslint/parser",
   "overrides": [

airbyte-webapp/src/App.tsx

@@ -1,23 +1,19 @@
 import React, { Suspense } from "react";
-import { ThemeProvider } from "styled-components";
 import { IntlProvider } from "react-intl";
 import { BrowserRouter as Router } from "react-router-dom";
+import { ThemeProvider } from "styled-components";
 
-import NotificationService from "hooks/services/Notification";
-import { AnalyticsProvider } from "views/common/AnalyticsProvider";
-import { FeatureService } from "hooks/services/Feature";
-import { ServicesProvider } from "core/servicesProvider";
 import { ApiServices } from "core/ApiServices";
-import { StoreProvider } from "views/common/StoreProvider";
+import { ServicesProvider } from "core/servicesProvider";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
+import { FeatureService } from "hooks/services/Feature";
 import { FormChangeTrackerService } from "hooks/services/FormChangeTracker";
+import NotificationService from "hooks/services/Notification";
+import { AnalyticsProvider } from "views/common/AnalyticsProvider";
+import { StoreProvider } from "views/common/StoreProvider";
 
-import en from "./locales/en.json";
-import GlobalStyle from "./global-styles";
-import { theme } from "./theme";
-import { Routing } from "./pages/routes";
-import LoadingPage from "./components/LoadingPage";
 import ApiErrorBoundary from "./components/ApiErrorBoundary";
+import LoadingPage from "./components/LoadingPage";
 import {
   Config,
   ConfigServiceProvider,
@@ -26,7 +22,11 @@ import {
   ValueProvider,
   windowConfigProvider,
 } from "./config";
+import GlobalStyle from "./global-styles";
+import en from "./locales/en.json";
+import { Routing } from "./pages/routes";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
+import { theme } from "./theme";
 
 const StyleProvider: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>

airbyte-webapp/src/components/ApiErrorBoundary/ApiErrorBoundary.tsx

@@ -3,8 +3,8 @@ import { FormattedMessage } from "react-intl";
 
 import { isVersionError } from "core/request/VersionError";
 import { ErrorOccurredView } from "views/common/ErrorOccurredView";
-import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
+import { StartOverErrorView } from "views/common/StartOverErrorView";
 
 type BoundaryState = { errorId?: string; message?: string };
 

airbyte-webapp/src/components/ArrayOfObjectsEditor/ArrayOfObjectsEditor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
 
 import { Button } from "components";
 

airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
 
 import { Button } from "components";
 

airbyte-webapp/src/components/ArrayOfObjectsEditor/components/EditorRow.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
 import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
 
 import { Button } from "components";
 

airbyte-webapp/src/components/CenteredPageComponents/index.tsx

@@ -1,5 +1,5 @@
+import BigButton from "./BigButton";
 import PageViewContainer from "./PageViewContainer";
 import Subtitle from "./Subtitle";
-import BigButton from "./BigButton";
 
 export { BigButton, PageViewContainer, Subtitle };

airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
 
-import Modal from "components/Modal";
 import { Button } from "components/base/Button";
+import Modal from "components/Modal";
 
 const Content = styled.div`
   width: 585px;

airbyte-webapp/src/components/ConnectionBlock/ConnectionBlock.tsx

@@ -1,7 +1,7 @@
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
 import ContentCard from "../ContentCard";
 import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem";

airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage, useIntl } from "react-intl";
+import styled from "styled-components";
 
 import { Button, DropDownRow, H3, H5 } from "components";
 import { Popout } from "components/base/Popout/Popout";

airbyte-webapp/src/components/ConnectorBlocks/index.tsx

@@ -1,5 +1,5 @@
+import FormPageContent from "./FormPageContent";
 import ItemTabs, { StepsTypes } from "./ItemTabs";
 import TableItemTitle from "./TableItemTitle";
-import FormPageContent from "./FormPageContent";
 
 export { ItemTabs, StepsTypes, TableItemTitle, FormPageContent };

airbyte-webapp/src/components/ConnectorIcon/ConnectorIcon.tsx

@@ -1,5 +1,5 @@
-import styled from "styled-components";
 import React from "react";
+import styled from "styled-components";
 
 import { getIcon } from "utils/imageUtils";
 

airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx

@@ -1,20 +1,20 @@
+import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { Suspense, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
-import { faRedoAlt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Button, ContentCard } from "components";
-import LoadingSchema from "components/LoadingSchema";
-import JobItem from "components/JobItem";
 import { IDataItem } from "components/base/DropDown/components/Option";
+import JobItem from "components/JobItem";
+import LoadingSchema from "components/LoadingSchema";
 
-import ConnectionForm from "views/Connection/ConnectionForm";
-import { useCreateConnection, ValuesProps } from "hooks/services/useConnectionHook";
-import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
-import { LogsRequestError } from "core/request/LogsRequestError";
-import { Destination, Source } from "core/domain/connector";
 import { Connection } from "core/domain/connection";
+import { Destination, Source } from "core/domain/connector";
+import { LogsRequestError } from "core/request/LogsRequestError";
+import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
+import { useCreateConnection, ValuesProps } from "hooks/services/useConnectionHook";
+import ConnectionForm from "views/Connection/ConnectionForm";
 
 import { useDiscoverSchema } from "../../hooks/services/useSourceHook";
 import TryAfterErrorBlock from "./components/TryAfterErrorBlock";

airbyte-webapp/src/components/CreateConnectionContent/components/TryAfterErrorBlock.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
 
 import { Button, H4, StatusIcon } from "components";
 

airbyte-webapp/src/components/DeleteBlock/DeleteBlock.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import ContentCard from "components/ContentCard";
 import { Button, H5 } from "components";
+import ContentCard from "components/ContentCard";
 
 import DeleteModal from "./components/DeleteModal";
 

airbyte-webapp/src/components/DeleteBlock/components/DeleteModal.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 import { useMutation } from "react-query";
+import styled from "styled-components";
 
-import Modal from "components/Modal";
 import { Button, LoadingButton } from "components";
+import Modal from "components/Modal";
 export type IProps = {
   onClose: () => void;
   onSubmit: () => Promise<unknown>;

airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx

@@ -1,21 +1,21 @@
+import queryString from "query-string";
 import React, { useCallback } from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
-import queryString from "query-string";
+import styled from "styled-components";
 
 import Table from "components/Table";
 
-import useRouter from "hooks/useRouter";
 import { FeatureItem, useFeatureService } from "hooks/services/Feature";
+import useRouter from "hooks/useRouter";
 
-import LastSyncCell from "./components/LastSyncCell";
+import ConnectionSettingsCell from "./components/ConnectionSettingsCell";
 import ConnectorCell from "./components/ConnectorCell";
+import FrequencyCell from "./components/FrequencyCell";
+import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
 import SortButton from "./components/SortButton";
-import FrequencyCell from "./components/FrequencyCell";
 import StatusCell from "./components/StatusCell";
-import ConnectionSettingsCell from "./components/ConnectionSettingsCell";
 import { ITableDataItem, SortOrderEnum } from "./types";
 
 const Content = styled.div`

airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import { CellProps } from "react-table";
+import styled from "styled-components";
 
 import Table from "components/Table";
 
-import LastSyncCell from "./components/LastSyncCell";
+import AllConnectionsStatusCell from "./components/AllConnectionsStatusCell";
+import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
 import ConnectorCell from "./components/ConnectorCell";
+import LastSyncCell from "./components/LastSyncCell";
 import NameCell from "./components/NameCell";
-import ConnectEntitiesCell from "./components/ConnectEntitiesCell";
 import { EntityTableDataItem } from "./types";
-import AllConnectionsStatusCell from "./components/AllConnectionsStatusCell";
 
 const Content = styled.div`
   margin: 0 32px 0 27px;

airbyte-webapp/src/components/EntityTable/components/ConnectEntitiesCell.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
+import styled from "styled-components";
 
 import ImageBlock from "components/ImageBlock";
 

airbyte-webapp/src/components/EntityTable/components/ConnectionSettingsCell.tsx

@@ -1,7 +1,7 @@
+import { faCog } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCog } from "@fortawesome/free-solid-svg-icons";
 
 import { Link } from "components";
 

airbyte-webapp/src/components/EntityTable/components/FrequencyCell.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 
 import FrequencyConfig from "config/FrequencyConfig.json";
-import { equal } from "utils/objects";
 import { ScheduleProperties } from "core/domain/connection";
+import { equal } from "utils/objects";
 
 type IProps = {
   value: ScheduleProperties;

airbyte-webapp/src/components/EntityTable/components/LastSyncCell.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import styled from "styled-components";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCalendarAlt } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
 import { FormattedRelativeTime } from "react-intl";
+import styled from "styled-components";
 
 const CalendarIcon = styled(FontAwesomeIcon)`
   color: ${({ theme }) => theme.greyColor40};

airbyte-webapp/src/components/EntityTable/components/NameCell.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
 import { useIntl } from "react-intl";
+import styled from "styled-components";
 
+import { ConnectorIcon } from "components/ConnectorIcon";
 import StatusIcon from "components/StatusIcon";
 import { StatusIconStatus } from "components/StatusIcon/StatusIcon";
-import { ConnectorIcon } from "components/ConnectorIcon";
 
 import { Status } from "../types";
 

airbyte-webapp/src/components/EntityTable/components/SortButton.tsx

@@ -1,7 +1,7 @@
+import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as React from "react";
 import styled from "styled-components";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 
 import { Button } from "components";
 

airbyte-webapp/src/components/EntityTable/components/StatusCell.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import styled from "styled-components";
 import { useAsyncFn } from "react-use";
+import styled from "styled-components";
 
 import { LoadingButton, Toggle } from "components";
 

airbyte-webapp/src/components/EntityTable/hooks.tsx

@@ -1,7 +1,7 @@
 import FrequencyConfig from "config/FrequencyConfig.json";
 import { Connection, ConnectionStatus } from "core/domain/connection";
-import { useSyncConnection, useUpdateConnection } from "hooks/services/useConnectionHook";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
+import { useSyncConnection, useUpdateConnection } from "hooks/services/useConnectionHook";
 
 const useSyncActions = (): {
   changeStatus: (connection: Connection) => Promise<void>;

airbyte-webapp/src/components/EntityTable/index.tsx

@@ -1,4 +1,4 @@
-import ImplementationTable from "./ImplementationTable";
 import ConnectionTable from "./ConnectionTable";
+import ImplementationTable from "./ImplementationTable";
 
 export { ImplementationTable, ConnectionTable };