Update prettier and add import sorting (#11742)

* Update package

* Adjust prettier config and reformat

* Auto sort imports

Author: timroes

airbyte-webapp/.eslintrc

@@ -20,6 +20,22 @@
   },
   "rules": {
     "prettier/prettier": "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|utils|views){/**,}",
+          "group": "internal",
+          "position": "after"
+        }
+      ]
+    }],
     "@typescript-eslint/ban-ts-comment": [
       "warn",
       {

airbyte-webapp/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  printWidth: 120,
+};

airbyte-webapp/package-lock.json

@@ -80,17 +80,17 @@
     "@types/react-widgets": "^4.4.7",
     "@types/sanitize-html": "^2.6.2",
     "@types/styled-components": "^5.1.23",
-    "@typescript-eslint/eslint-plugin": "^5.12.1",
-    "@typescript-eslint/parser": "^5.12.1",
-    "eslint-config-prettier": "^8.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-jest": "^26.1.1",
     "eslint-plugin-prettier": "^4.0.0",
     "express": "^4.17.3",
     "husky": "^4.2.3",
     "license-checker": "^25.0.1",
     "lint-staged": "^12.3.4",
-    "prettier": "2.2.1",
+    "prettier": "^2.6.2",
     "react-scripts": "^5.0.0",
     "react-select-event": "^5.3.0",
     "storybook-addon-mock": "^2.3.1",

airbyte-webapp/package.json

@@ -3,18 +3,19 @@ import { ThemeProvider } from "styled-components";
 import { IntlProvider } from "react-intl";
 import { BrowserRouter as Router } from "react-router-dom";
 
+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 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 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 {
   Config,
   ConfigServiceProvider,
@@ -24,7 +25,6 @@ import {
   windowConfigProvider,
 } from "./config";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
-import { StoreProvider } from "views/common/StoreProvider";
 
 const StyleProvider: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>
@@ -45,10 +45,7 @@ const I18NProvider: React.FC = ({ children }) => (
   </IntlProvider>
 );
 
-const configProviders: ValueProvider<Config> = [
-  envConfigProvider,
-  windowConfigProvider,
-];
+const configProviders: ValueProvider<Config> = [envConfigProvider, windowConfigProvider];
 
 const Services: React.FC = ({ children }) => (
   <AnalyticsProvider>
@@ -72,10 +69,7 @@ const App: React.FC = () => {
           <StoreProvider>
             <ServicesProvider>
               <Suspense fallback={<LoadingPage />}>
-                <ConfigServiceProvider
-                  defaultConfig={defaultConfig}
-                  providers={configProviders}
-                >
+                <ConfigServiceProvider defaultConfig={defaultConfig} providers={configProviders}>
                   <Router>
                     <Services>
                       <Routing />

airbyte-webapp/src/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-
 import { FormattedMessage } from "react-intl";
+
 import { isVersionError } from "core/request/VersionError";
 import { ErrorOccurredView } from "views/common/ErrorOccurredView";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
@@ -20,11 +20,7 @@ class ApiErrorBoundary extends React.Component<unknown, BoundaryState> {
     this.state = {};
   }
 
-  static getDerivedStateFromError(error: {
-    message: string;
-    status?: number;
-    __type?: string;
-  }): BoundaryState {
+  static getDerivedStateFromError(error: { message: string; status?: number; __type?: string }): BoundaryState {
     // Update state so the next render will show the fallback UI.
     if (isVersionError(error)) {
       return { errorId: ErrorId.VersionMismatch, message: error.message };
@@ -49,11 +45,7 @@ class ApiErrorBoundary extends React.Component<unknown, BoundaryState> {
     }
 
     if (this.state.errorId === ErrorId.ServerUnavailable) {
-      return (
-        <ErrorOccurredView
-          message={<FormattedMessage id="webapp.cannotReachServer" />}
-        />
-      );
+      return <ErrorOccurredView message={<FormattedMessage id="webapp.cannotReachServer" />} />;
     }
 
     return !this.state.errorId ? (

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

@@ -41,30 +41,14 @@ type ArrayOfObjectsEditorProps<T extends { name: string }> = {
 function ArrayOfObjectsEditor<T extends { name: string } = { name: string }>(
   props: ArrayOfObjectsEditorProps<T>
 ): JSX.Element {
-  const {
-    onStartEdit,
-    onDone,
-    onRemove,
-    onCancelEdit,
-    items,
-    editableItemIndex,
-    children,
-    mainTitle,
-    addButtonText,
-  } = props;
-  const onAddItem = React.useCallback(() => onStartEdit(items.length), [
-    onStartEdit,
-    items,
-  ]);
+  const { onStartEdit, onDone, onRemove, onCancelEdit, items, editableItemIndex, children, mainTitle, addButtonText } =
+    props;
+  const onAddItem = React.useCallback(() => onStartEdit(items.length), [onStartEdit, items]);
 
-  const isEditMode =
-    editableItemIndex !== null && editableItemIndex !== undefined;
+  const isEditMode = editableItemIndex !== null && editableItemIndex !== undefined;
 
   if (isEditMode) {
-    const item =
-      typeof editableItemIndex === "number"
-        ? items[editableItemIndex]
-        : undefined;
+    const item = typeof editableItemIndex === "number" ? items[editableItemIndex] : undefined;
 
     return (
       <Content>
@@ -77,11 +61,7 @@ function ArrayOfObjectsEditor<T extends { name: string } = { name: string }>(
               </SmallButton>
             )}
             {onDone && (
-              <SmallButton
-                onClick={onDone}
-                type="button"
-                data-testid="done-button"
-              >
+              <SmallButton onClick={onDone} type="button" data-testid="done-button">
                 <FormattedMessage id="form.done" />
               </SmallButton>
             )}
@@ -102,13 +82,7 @@ function ArrayOfObjectsEditor<T extends { name: string } = { name: string }>(
       {items.length ? (
         <ItemsList>
           {items.map((item, key) => (
-            <EditorRow
-              key={`form-item-${key}`}
-              name={item.name}
-              id={key}
-              onEdit={onStartEdit}
-              onRemove={onRemove}
-            />
+            <EditorRow key={`form-item-${key}`} name={item.name} id={key} onEdit={onStartEdit} onRemove={onRemove} />
           ))}
         </ItemsList>
       ) : null}

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

@@ -23,23 +23,11 @@ type EditorHeaderProps = {
   onAddItem: () => void;
 };
 
-const EditorHeader: React.FC<EditorHeaderProps> = ({
-  itemsCount,
-  onAddItem,
-  mainTitle,
-  addButtonText,
-}) => {
+const EditorHeader: React.FC<EditorHeaderProps> = ({ itemsCount, onAddItem, mainTitle, addButtonText }) => {
   return (
     <Content>
-      {mainTitle || (
-        <FormattedMessage id="form.items" values={{ count: itemsCount }} />
-      )}
-      <Button
-        secondary
-        type="button"
-        onClick={onAddItem}
-        data-testid="addItemButton"
-      >
+      {mainTitle || <FormattedMessage id="form.items" values={{ count: itemsCount }} />}
+      <Button secondary type="button" onClick={onAddItem} data-testid="addItemButton">
         {addButtonText || <FormattedMessage id="form.addItems" />}
       </Button>
     </Content>

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

@@ -39,12 +39,7 @@ type EditorRowProps = {
   onRemove: (id: number) => void;
 };
 
-const EditorRow: React.FC<EditorRowProps> = ({
-  name,
-  id,
-  onEdit,
-  onRemove,
-}) => {
+const EditorRow: React.FC<EditorRowProps> = ({ name, id, onEdit, onRemove }) => {
   return (
     <Content>
       <div>{name || id}</div>

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

@@ -1,13 +1,5 @@
 import React from "react";
-import {
-  CartesianGrid,
-  BarChart as BasicBarChart,
-  ResponsiveContainer,
-  XAxis,
-  YAxis,
-  Bar,
-  Label,
-} from "recharts";
+import { CartesianGrid, BarChart as BasicBarChart, ResponsiveContainer, XAxis, YAxis, Bar, Label } from "recharts";
 import { barChartColors, theme } from "theme";
 
 type BarChartProps = {
@@ -20,12 +12,7 @@ type BarChartProps = {
   yLabel?: string;
 };
 
-const BarChart: React.FC<BarChartProps> = ({
-  data,
-  legendLabels,
-  xLabel,
-  yLabel,
-}) => {
+const BarChart: React.FC<BarChartProps> = ({ data, legendLabels, xLabel, yLabel }) => {
   const chartLinesColor = theme.greyColor20;
   const chartTicksColor = theme.lightTextColor;
 
@@ -51,21 +38,8 @@ const BarChart: React.FC<BarChartProps> = ({
           tick={{ fontSize: "11px" }}
           tickSize={7}
         />
-        <YAxis
-          axisLine={false}
-          tickLine={false}
-          stroke={chartTicksColor}
-          tick={{ fontSize: "11px" }}
-          tickSize={10}
-        >
-          <Label
-            value={yLabel}
-            fontSize={11}
-            fill={chartTicksColor}
-            fontWeight={600}
-            position="top"
-            offset={10}
-          />
+        <YAxis axisLine={false} tickLine={false} stroke={chartTicksColor} tick={{ fontSize: "11px" }} tickSize={10}>
+          <Label value={yLabel} fontSize={11} fill={chartTicksColor} fontWeight={600} position="top" offset={10} />
         </YAxis>
         {legendLabels.map((barName, key) => (
           <Bar dataKey={barName} fill={barChartColors[key]} />

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

@@ -31,14 +31,10 @@ const Breadcrumbs: React.FC<IProps> = ({ data }) => {
     <BreadcrumbsContainer>
       {data.map((item, key) =>
         key === lastIndex ? (
-          <LastBreadcrumbsItem key={`breadcrumbs-item-${key}`}>
-            {item.name}
-          </LastBreadcrumbsItem>
+          <LastBreadcrumbsItem key={`breadcrumbs-item-${key}`}>{item.name}</LastBreadcrumbsItem>
         ) : (
           <span key={`breadcrumbs-item-${key}`}>
-            <BreadcrumbsItem onClick={item.onClick}>
-              {item.name}
-            </BreadcrumbsItem>
+            <BreadcrumbsItem onClick={item.onClick}>{item.name}</BreadcrumbsItem>
             <span> / </span>
           </span>
         )

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

@@ -6,8 +6,7 @@ const BigButton = styled(Button)<{ shadow?: boolean }>`
   line-height: 19px;
   padding: 10px 27px;
   font-weight: 500;
-  box-shadow: ${({ shadow }) =>
-    shadow ? "0 8px 5px -5px rgba(0, 0, 0, 0.2)" : "none"};
+  box-shadow: ${({ shadow }) => (shadow ? "0 8px 5px -5px rgba(0, 0, 0, 0.2)" : "none")};
 `;
 
 export default BigButton;

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

@@ -1,8 +1,9 @@
 import React from "react";
 
-import PaddedCard from "./PaddedCard";
 import BaseClearView from "components/BaseClearView";
 
+import PaddedCard from "./PaddedCard";
+
 const PageViewContainer: React.FC = (props) => {
   return (
     <BaseClearView>

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

@@ -33,11 +33,7 @@ const ExtraBlock = styled(Content)`
 
 const ConnectionBlock: React.FC<IProps> = (props) => (
   <LightContentCard className={props.className}>
-    {props.itemFrom ? (
-      <ConnectionBlockItem {...props.itemFrom} />
-    ) : (
-      <ExtraBlock />
-    )}
+    {props.itemFrom ? <ConnectionBlockItem {...props.itemFrom} /> : <ExtraBlock />}
     <Arrow icon={faChevronRight} />
     {props.itemTo ? <ConnectionBlockItem {...props.itemTo} /> : <ExtraBlock />}
   </LightContentCard>

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

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+
 import ImageBlock from "components/ImageBlock";
 
 type IProps = {

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

@@ -25,14 +25,7 @@ const steps = [
 ];
 
 const ItemTabs: React.FC<IProps> = ({ currentStep, setCurrentStep }) => {
-  return (
-    <StepsMenu
-      lightMode
-      data={steps}
-      activeStep={currentStep}
-      onSelect={setCurrentStep}
-    />
-  );
+  return <StepsMenu lightMode data={steps} activeStep={currentStep} onSelect={setCurrentStep} />;
 };
 
 export default ItemTabs;

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

@@ -5,6 +5,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Button, DropDownRow, H3, H5 } from "components";
 import { Popout } from "components/base/Popout/Popout";
 import { ReleaseStageBadge } from "components/ReleaseStageBadge";
+
 import { ReleaseStage } from "core/domain/connector";
 import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 

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

@@ -14,8 +14,7 @@ type IProps = {
 const Title = styled(H5)<{ light?: boolean }>`
   padding: ${({ light }) => (light ? "19px 20px 20px" : "25px 25px 22px")};
   color: ${({ theme }) => theme.darkPrimaryColor};
-  box-shadow: ${({ light, theme }) =>
-    light ? "none" : `0 1px 2px ${theme.shadowColor}`};
+  box-shadow: ${({ light, theme }) => (light ? "none" : `0 1px 2px ${theme.shadowColor}`)};
   font-weight: 600;
   letter-spacing: 0.008em;
   border-radius: 10px 10px 0 0;