ESLint rule for interface over type (#13451)

airbyte-webapp/.eslintrc

@@ -48,6 +48,7 @@
         "ts-expect-error": "allow-with-description"
       }
     ],
+    "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
     "@typescript-eslint/ban-types": ["warn"]
   },
   "parser": "@typescript-eslint/parser",

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

@@ -2,15 +2,15 @@ import React, { useMemo } from "react";
 import { Bar, BarChart as BasicBarChart, CartesianGrid, Label, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { barChartColors, theme } from "theme";
 
-type BarChartProps = {
+interface BarChartProps {
   data: {
     name: string;
     value: number;
   }[];
   legendLabels: string[];
   xLabel?: string;
   yLabel?: string;
-};
+}
 
 const BarChart: React.FC<BarChartProps> = ({ data, legendLabels, xLabel, yLabel }) => {
   const chartLinesColor = theme.greyColor20;

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

@@ -20,9 +20,9 @@ const BreadcrumbsItem = styled.div`
   }
 `;
 
-type IProps = {
+interface IProps {
   data: Array<{ name: string | React.ReactNode; onClick?: () => void }>;
-};
+}
 
 const Breadcrumbs: React.FC<IProps> = ({ data }) => {
   const lastIndex = data.length - 1;

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

@@ -6,11 +6,11 @@ import styled from "styled-components";
 import ContentCard from "../ContentCard";
 import { ConnectionBlockItem, Content } from "./components/ConnectionBlockItem";
 
-type IProps = {
+interface IProps {
   className?: string;
   itemFrom?: { name: string; icon?: string };
   itemTo?: { name: string; icon?: string };
-};
+}
 
 const LightContentCard = styled(ContentCard)`
   display: flex;

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

@@ -3,10 +3,10 @@ import styled from "styled-components";
 
 import { ConnectorIcon } from "components/ConnectorIcon";
 
-type IProps = {
+interface IProps {
   name: string;
   icon?: string;
-};
+}
 
 export const Content = styled.div`
   background: ${({ theme }) => theme.lightPrimaryColor};

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

@@ -9,15 +9,15 @@ import { ReleaseStageBadge } from "components/ReleaseStageBadge";
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 
-type TableItemTitleProps = {
+interface TableItemTitleProps {
   type: "source" | "destination";
   dropDownData: DropDownRow.IDataItem[];
   onSelect: (item: DropDownRow.IDataItem) => void;
   entity: string;
   entityName: string;
   entityIcon?: React.ReactNode;
   releaseStage?: ReleaseStage;
-};
+}
 
 const Content = styled.div`
   display: flex;

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

@@ -5,12 +5,12 @@ import { ReleaseStageBadge } from "components/ReleaseStageBadge";
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { getIcon } from "utils/imageUtils";
 
-type Props = {
+interface Props {
   connectionName: string;
   icon?: string;
   connectorName: string;
   releaseStage?: ReleaseStage;
-};
+}
 
 const MainComponent = styled.div`
   display: flex;

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

@@ -3,13 +3,13 @@ import styled from "styled-components";
 
 import { H5, Card } from "components";
 
-type IProps = {
+interface IProps {
   title?: string | React.ReactNode;
   className?: string;
   onClick?: () => void;
   full?: boolean;
   light?: boolean;
-};
+}
 
 const Title = styled(H5)<{ light?: boolean }>`
   padding: ${({ light }) => (light ? "19px 20px 20px" : "25px 25px 22px")};

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

@@ -32,13 +32,13 @@ const TryArrow = styled(FontAwesomeIcon)`
   font-size: 14px;
 `;
 
-type CreateConnectionContentProps = {
+interface CreateConnectionContentProps {
   additionBottomControls?: React.ReactNode;
   source: SourceRead;
   destination: DestinationRead;
   afterSubmitConnection?: (connection: WebBackendConnectionRead) => void;
   noTitles?: boolean;
-};
+}
 
 const CreateConnectionContent: React.FC<CreateConnectionContentProps> = ({
   source,

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

@@ -16,11 +16,11 @@ const AgainButton = styled(Button)`
   min-width: 239px;
 `;
 
-type TryAfterErrorBlockProps = {
+interface TryAfterErrorBlockProps {
   message?: React.ReactNode;
   onClick: () => void;
   additionControl?: React.ReactNode;
-};
+}
 
 const TryAfterErrorBlock: React.FC<TryAfterErrorBlockProps> = ({ message, onClick }) => (
   <Block>

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

@@ -8,10 +8,10 @@ import ContentCard from "components/ContentCard";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import useRouter from "hooks/useRouter";
 
-type IProps = {
+interface IProps {
   type: "source" | "destination" | "connection";
   onDelete: () => Promise<unknown>;
-};
+}
 
 const DeleteBlockComponent = styled(ContentCard)`
   margin-top: 12px;

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

@@ -1,10 +1,10 @@
 import React from "react";
 import styled from "styled-components";
 
-type IProps = {
+interface IProps {
   text: React.ReactNode;
   description?: React.ReactNode;
-};
+}
 
 const Content = styled.div`
   padding: 74px 0 111px;

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

@@ -22,13 +22,13 @@ const Content = styled.div`
   margin: 0 32px 0 27px;
 `;
 
-type IProps = {
+interface IProps {
   data: ITableDataItem[];
   entity: "source" | "destination" | "connection";
   onClickRow?: (data: ITableDataItem) => void;
   onChangeStatus: (id: string) => void;
   onSync: (id: string) => void;
-};
+}
 
 const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onChangeStatus, onSync }) => {
   const { query, push } = useRouter();

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

@@ -20,11 +20,11 @@ const Content = styled.div`
   margin: 0 32px 0 27px;
 `;
 
-type IProps = {
+interface IProps {
   data: EntityTableDataItem[];
   entity: "source" | "destination";
   onClickRow?: (data: EntityTableDataItem) => void;
-};
+}
 
 const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) => {
   const { query, push } = useRouter();

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

@@ -4,14 +4,14 @@ import styled from "styled-components";
 
 import ImageBlock from "components/ImageBlock";
 
-type IProps = {
+interface IProps {
   values: {
     name: string;
     connector: string;
   }[];
   enabled?: boolean;
   entity: "source" | "destination";
-};
+}
 
 const Content = styled.div<{ enabled?: boolean }>`
   display: flex;

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

@@ -10,9 +10,9 @@ import { ConnectionSettingsRoutes } from "pages/ConnectionPage/pages/ConnectionI
 
 import { RoutePaths } from "../../../pages/routePaths";
 
-type IProps = {
+interface IProps {
   id: string;
-};
+}
 
 const Content = styled.div`
   color: ${({ theme }) => theme.greyColor60};

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

@@ -3,11 +3,11 @@ import styled from "styled-components";
 
 import { ConnectorIcon } from "components/ConnectorIcon";
 
-type IProps = {
+interface IProps {
   value: string;
   enabled?: boolean;
   img?: string;
-};
+}
 
 const Content = styled.div<{ enabled?: boolean }>`
   display: flex;

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

@@ -6,10 +6,10 @@ import { equal } from "utils/objects";
 
 import { ConnectionSchedule } from "../../../core/request/AirbyteClient";
 
-type IProps = {
+interface IProps {
   value: ConnectionSchedule;
   enabled?: boolean;
-};
+}
 
 const Content = styled.div<{ enabled?: boolean }>`
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};

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

@@ -15,10 +15,10 @@ const Content = styled.div<{ enabled?: boolean }>`
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inheret")};
 `;
 
-type IProps = {
+interface IProps {
   timeInSecond: number;
   enabled?: boolean;
-};
+}
 
 const LastSyncCell: React.FC<IProps> = ({ timeInSecond, enabled }) => {
   if (!timeInSecond) {

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

@@ -21,11 +21,11 @@ const SortButtonView = styled(Button)<{ wasActive?: boolean }>`
   }
 `;
 
-type IProps = {
+interface IProps {
   lowToLarge?: boolean;
   wasActive?: boolean;
   onClick: () => void;
-};
+}
 
 const SortButton: React.FC<IProps> = ({ wasActive, onClick, lowToLarge }) => {
   return (

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

@@ -5,15 +5,15 @@ import styled from "styled-components";
 
 import { LoadingButton, Switch } from "components";
 
-type IProps = {
+interface IProps {
   allowSync?: boolean;
   enabled?: boolean;
   isSyncing?: boolean;
   isManual?: boolean;
   id: string;
   onChangeStatus: (id: string) => void;
   onSync: (id: string) => void;
-};
+}
 
 const SmallButton = styled(LoadingButton)`
   padding: 6px 8px 7px;

airbyte-webapp/src/components/EntityTable/types.ts

@@ -1,6 +1,6 @@
 import { ConnectionSchedule } from "../../core/request/AirbyteClient";
 
-type EntityTableDataItem = {
+interface EntityTableDataItem {
   entityId: string;
   entityName: string;
   connectorName: string;
@@ -13,9 +13,9 @@ type EntityTableDataItem = {
   enabled: boolean;
   lastSync?: number | null;
   connectorIcon?: string;
-};
+}
 
-type ITableDataItem = {
+interface ITableDataItem {
   connectionId: string;
   name: string;
   entityName: string;
@@ -28,7 +28,7 @@ type ITableDataItem = {
   lastSyncStatus: string | null;
   connectorIcon?: string;
   entityIcon?: string;
-};
+}
 
 enum Status {
   ACTIVE = "active",

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

@@ -51,11 +51,11 @@ const FileIcon = styled(FontAwesomeIcon)`
   margin-right: 8px;
 `;
 
-type IProps = {
+interface IProps {
   className?: string;
   mainText?: React.ReactNode;
   options?: DropzoneOptions;
-};
+}
 
 const FileDropZone: React.FC<IProps> = ({ className, mainText, options }) => {
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone(options);

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

@@ -24,11 +24,11 @@ const FormGroup = styled.div`
   padding: 0 20px;
 `;
 
-type GroupControlsProps = {
+interface GroupControlsProps {
   title: React.ReactNode;
   description?: string;
   name?: string;
-};
+}
 
 const GroupControls: React.FC<GroupControlsProps> = ({ title, description, children, name }) => {
   return (

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

@@ -5,24 +5,24 @@ import { useIntl } from "react-intl";
 const AIRBYTE = "Airbyte";
 const SEPARATOR = "|";
 
-type FormattedHeadTitle = {
+interface FormattedHeadTitle {
   id: string;
   values?: Record<string, string>;
-};
+}
 
-type StringHeadTitle = {
+interface StringHeadTitle {
   title: string;
-};
+}
 
 type HeadTitleDefinition = FormattedHeadTitle | StringHeadTitle;
 
 const isStringTitle = (v: HeadTitleDefinition): v is StringHeadTitle => {
   return "title" in v;
 };
 
-type IProps = {
+interface IProps {
   titles: HeadTitleDefinition[];
-};
+}
 
 /**
  * Titles defined by {@link HeadTitleDefinition} will be