🪟 🔧 Update eslint and add dependencies explicitly (#21868)

* Update eslint

* Fix TS issues

airbyte-webapp/package.json

@@ -44,16 +44,19 @@
     "@types/segment-analytics": "^0.0.34",
     "@types/uuid": "^9.0.0",
     "classnames": "^2.3.1",
+    "date-fns": "^2.29.3",
     "dayjs": "^1.11.3",
     "diff": "^5.1.0",
     "firebase": "^9.8.2",
     "flat": "^5.0.2",
     "formik": "^2.2.9",
     "framer-motion": "^6.3.11",
     "js-yaml": "^4.1.0",
+    "json-schema": "^0.4.0",
     "launchdarkly-js-client-sdk": "^2.22.1",
     "lodash": "^4.17.21",
     "mdast": "^3.0.0",
+    "monaco-editor": "^0.34.1",
     "query-string": "^6.13.1",
     "react": "^17.0.2",
     "react-datepicker": "^4.8.0",
@@ -83,6 +86,7 @@
     "sass": "^1.52.2",
     "styled-components": "^5.3.5",
     "typesafe-actions": "^5.1.0",
+    "unified": "^10.1.2",
     "unist-util-visit": "^4.1.0",
     "uuid": "^9.0.0",
     "yup": "^0.32.11"
@@ -93,6 +97,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.7",
     "@storybook/builder-webpack5": "^6.5.7",
     "@storybook/manager-webpack5": "^6.5.7",
@@ -128,9 +133,11 @@
     "@vitejs/plugin-react": "^3.0.1",
     "babel-jest": "^29.3.1",
     "dotenv": "^16.0.3",
+    "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-css-modules": "^2.11.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",

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

@@ -9,8 +9,8 @@ import { Text } from "components/ui/Text";
 import { ReleaseStage } from "core/request/AirbyteClient";
 import { getIcon } from "utils/imageUtils";
 
-import { Button } from "../ui/Button";
 import styles from "./TableItemTitle.module.scss";
+import { Button } from "../ui/Button";
 
 interface TableItemTitleProps {
   type: "source" | "destination";

airbyte-webapp/src/components/JobItem/components/AttemptDetails.tsx

@@ -6,8 +6,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { AttemptRead, AttemptStatus } from "core/request/AirbyteClient";
 import { formatBytes } from "utils/numberHelper";
 
-import { getFailureFromAttempt, isCancelledAttempt } from "../utils";
 import styles from "./AttemptDetails.module.scss";
+import { getFailureFromAttempt, isCancelledAttempt } from "../utils";
 
 interface AttemptDetailsProps {
   className?: string;

airbyte-webapp/src/components/JobItem/components/JobLogs.tsx

@@ -10,13 +10,13 @@ import { Text } from "components/ui/Text";
 import { AttemptRead, AttemptStatus, SynchronousJobRead } from "core/request/AirbyteClient";
 import { useGetDebugInfoJob } from "services/job/JobService";
 
-import { parseAttemptLink } from "../attemptLinkUtils";
-import { JobsWithJobs } from "../types";
-import { isCancelledAttempt } from "../utils";
 import styles from "./JobLogs.module.scss";
 import Logs from "./Logs";
 import { LogsDetails } from "./LogsDetails";
 import Tabs, { TabsData } from "./Tabs";
+import { parseAttemptLink } from "../attemptLinkUtils";
+import { JobsWithJobs } from "../types";
+import { isCancelledAttempt } from "../utils";
 
 interface JobLogsProps {
   jobIsFailed?: boolean;

airbyte-webapp/src/components/JobItem/components/LogsDetails.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 
-import { AttemptRead, JobDebugInfoRead } from "../../../core/request/AirbyteClient";
 import { AttemptDetails } from "./AttemptDetails";
 import DownloadButton from "./DownloadButton";
 import { LinkToAttemptButton } from "./LinkToAttemptButton";
 import LogsTable from "./Logs";
+import { AttemptRead, JobDebugInfoRead } from "../../../core/request/AirbyteClient";
 
 const LogHeader = styled.div`
   display: flex;

airbyte-webapp/src/components/JobItem/components/MainInfo.tsx

@@ -10,11 +10,11 @@ import { StatusIcon } from "components/ui/StatusIcon";
 
 import { AttemptRead, JobStatus, SynchronousJobRead } from "core/request/AirbyteClient";
 
-import { JobsWithJobs } from "../types";
-import { getJobStatus } from "../utils";
 import { AttemptDetails } from "./AttemptDetails";
 import styles from "./MainInfo.module.scss";
 import { ResetStreamsDetails } from "./ResetStreamDetails";
+import { JobsWithJobs } from "../types";
+import { getJobStatus } from "../utils";
 
 const getJobConfig = (job: SynchronousJobRead | JobsWithJobs) =>
   (job as SynchronousJobRead).configType ?? (job as JobsWithJobs).job.configType;

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

@@ -4,8 +4,8 @@ import { FormattedMessage } from "react-intl";
 import { Button } from "components/ui/Button";
 import { Modal } from "components/ui/Modal";
 
-import useLoadingState from "../../../hooks/useLoadingState";
 import styles from "./ConfirmationModal.module.scss";
+import useLoadingState from "../../../hooks/useLoadingState";
 
 export interface ConfirmationModalProps {
   onClose: () => void;

airbyte-webapp/src/components/common/PageViewContainer/BaseClearView.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 
-import { Version } from "../Version";
 import styles from "./BaseClearView.module.scss";
+import { Version } from "../Version";
 
 export const BaseClearView: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const { formatMessage } = useIntl();

airbyte-webapp/src/components/connection/CatalogDiffModal/CatalogDiffModal.test.tsx

@@ -11,8 +11,8 @@ import {
 } from "core/request/AirbyteClient";
 import { ModalServiceProvider } from "hooks/services/Modal";
 
-import messages from "../../../locales/en.json";
 import { CatalogDiffModal } from "./CatalogDiffModal";
+import messages from "../../../locales/en.json";
 
 const mockCatalogDiff: CatalogDiff = {
   transforms: [],

airbyte-webapp/src/components/connection/CatalogTree/next/BulkEditPanel.tsx

@@ -15,12 +15,12 @@ import { DestinationSyncMode, SyncMode } from "core/request/AirbyteClient";
 import { useBulkEditService } from "hooks/services/BulkEdit/BulkEditService";
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 
-import { pathDisplayName } from "../PathPopout";
-import { HeaderCell } from "../styles";
-import { flatten, getPathType } from "../utils";
 import styles from "./BulkEditPanel.module.scss";
 import { StreamPathSelect } from "./StreamPathSelect";
 import { SyncModeOption, SyncModeSelect } from "./SyncModeSelect";
+import { pathDisplayName } from "../PathPopout";
+import { HeaderCell } from "../styles";
+import { flatten, getPathType } from "../utils";
 
 interface SchemaHeaderProps {
   isActive: boolean;

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableHeader.tsx

@@ -19,6 +19,8 @@ import { useConnectionFormService } from "hooks/services/ConnectionForm/Connecti
 import { useModalService } from "hooks/services/Modal";
 import { links } from "utils/links";
 
+import { CatalogTreeTableCell } from "./CatalogTreeTableCell";
+import styles from "./CatalogTreeTableHeader.module.scss";
 import {
   DestinationNamespaceFormValueType,
   DestinationNamespaceModal,
@@ -28,8 +30,6 @@ import {
   DestinationStreamNamesModal,
   StreamNameDefinitionValueType,
 } from "../../DestinationStreamNamesModal/DestinationStreamNamesModal";
-import { CatalogTreeTableCell } from "./CatalogTreeTableCell";
-import styles from "./CatalogTreeTableHeader.module.scss";
 
 const HeaderCell: React.FC<React.PropsWithChildren<Parameters<typeof CatalogTreeTableCell>[0]>> = ({
   size,

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx

@@ -9,13 +9,13 @@ import { Text } from "components/ui/Text";
 
 import { useBulkEditSelect } from "hooks/services/BulkEdit/BulkEditService";
 
-import { StreamHeaderProps } from "../StreamHeader";
 import { CatalogTreeTableCell } from "./CatalogTreeTableCell";
 import styles from "./CatalogTreeTableRow.module.scss";
 import { CatalogTreeTableRowIcon } from "./CatalogTreeTableRowIcon";
 import { StreamPathSelect } from "./StreamPathSelect";
 import { SyncModeSelect } from "./SyncModeSelect";
 import { useCatalogTreeTableRowProps } from "./useCatalogTreeTableRowProps";
+import { StreamHeaderProps } from "../StreamHeader";
 
 export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
   stream,

airbyte-webapp/src/components/connection/CatalogTree/next/StreamDetailsPanel/StreamFieldsTable/CursorCell/CursorCell.tsx

@@ -7,8 +7,8 @@ import { Tooltip, TooltipLearnMoreLink } from "components/ui/Tooltip";
 
 import { links } from "utils/links";
 
-import { TableStream } from "../StreamFieldsTable";
 import styles from "./CursorCell.module.scss";
+import { TableStream } from "../StreamFieldsTable";
 
 interface CursorCellProps extends CellContext<TableStream, boolean | undefined> {
   isCursorDefinitionSupported: boolean;

airbyte-webapp/src/components/connection/ConnectionEditFormCard/ConnectionEditFormCard.tsx

@@ -9,8 +9,8 @@ import { CollapsibleCardProps, CollapsibleCard } from "components/ui/Collapsible
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
 import { generateMessageFromError } from "utils/errorStatusMessage";
 
-import EditControls from "../ConnectionForm/EditControls";
 import styles from "./ConnectionEditFormCard.module.scss";
+import EditControls from "../ConnectionForm/EditControls";
 
 interface FormCardProps<T> extends CollapsibleCardProps {
   form: FormikConfig<T>;

airbyte-webapp/src/components/connectorBuilder/Builder/AddStreamButton.tsx

@@ -13,10 +13,10 @@ import { Action, Namespace } from "core/analytics";
 import { FormikPatch } from "core/form/FormikPatch";
 import { useAnalyticsService } from "hooks/services/Analytics";
 
-import { ReactComponent as PlusIcon } from "../../connection/ConnectionOnboarding/plusIcon.svg";
-import { BuilderStream, DEFAULT_BUILDER_STREAM_VALUES } from "../types";
 import styles from "./AddStreamButton.module.scss";
 import { BuilderField } from "./BuilderField";
+import { ReactComponent as PlusIcon } from "../../connection/ConnectionOnboarding/plusIcon.svg";
+import { BuilderStream, DEFAULT_BUILDER_STREAM_VALUES } from "../types";
 
 interface AddStreamValues {
   streamName: string;

airbyte-webapp/src/components/connectorBuilder/Builder/AuthenticationSection.tsx

@@ -1,13 +1,13 @@
 import { Action, Namespace } from "core/analytics";
 import { useAnalyticsService } from "hooks/services/Analytics";
 
-import { inferredAuthValues } from "../types";
 import { BuilderCard } from "./BuilderCard";
 import { BuilderField } from "./BuilderField";
 import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
 import { BuilderOneOf } from "./BuilderOneOf";
 import { BuilderOptional } from "./BuilderOptional";
 import { KeyValueListField } from "./KeyValueListField";
+import { inferredAuthValues } from "../types";
 
 export const AuthenticationSection: React.FC = () => {
   const analyticsService = useAnalyticsService();

airbyte-webapp/src/components/connectorBuilder/Builder/Builder.tsx

@@ -4,12 +4,12 @@ import { useEffect, useMemo } from "react";
 
 import { BuilderView, useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
-import { builderFormValidationSchema, BuilderFormValues } from "../types";
 import styles from "./Builder.module.scss";
 import { BuilderSidebar } from "./BuilderSidebar";
 import { GlobalConfigView } from "./GlobalConfigView";
 import { InputsView } from "./InputsView";
 import { StreamConfigView } from "./StreamConfigView";
+import { builderFormValidationSchema, BuilderFormValues } from "../types";
 
 interface BuilderProps {
   values: BuilderFormValues;

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderCard.tsx

@@ -11,8 +11,8 @@ import { Card } from "components/ui/Card";
 import { CheckBox } from "components/ui/CheckBox";
 import { Modal, ModalBody, ModalFooter } from "components/ui/Modal";
 
-import { BuilderStream } from "../types";
 import styles from "./BuilderCard.module.scss";
+import { BuilderStream } from "../types";
 
 interface BuilderCardProps {
   className?: string;

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderFieldWithInputs.tsx

@@ -10,10 +10,10 @@ import { Tooltip } from "components/ui/Tooltip";
 
 import { useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
-import { getInferredInputs } from "../types";
 import { BuilderField, BuilderFieldProps } from "./BuilderField";
 import styles from "./BuilderFieldWithInputs.module.scss";
 import { InputForm, newInputInEditing } from "./InputsForm";
+import { getInferredInputs } from "../types";
 
 export const BuilderFieldWithInputs: React.FC<BuilderFieldProps> = (props) => {
   const [field, , helpers] = useField(props.path);

airbyte-webapp/src/components/connectorBuilder/Builder/BuilderSidebar.tsx

@@ -15,12 +15,12 @@ import { useAnalyticsService } from "hooks/services/Analytics";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 import { BuilderView, useConnectorBuilderFormState } from "services/connectorBuilder/ConnectorBuilderStateService";
 
-import { DownloadYamlButton } from "../DownloadYamlButton";
-import { BuilderFormValues, DEFAULT_BUILDER_FORM_VALUES, getInferredInputs } from "../types";
-import { useBuilderErrors } from "../useBuilderErrors";
 import { AddStreamButton } from "./AddStreamButton";
 import styles from "./BuilderSidebar.module.scss";
 import { UiYamlToggleButton } from "./UiYamlToggleButton";
+import { DownloadYamlButton } from "../DownloadYamlButton";
+import { BuilderFormValues, DEFAULT_BUILDER_FORM_VALUES, getInferredInputs } from "../types";
+import { useBuilderErrors } from "../useBuilderErrors";
 
 interface ViewSelectButtonProps {
   className?: string;

airbyte-webapp/src/components/connectorBuilder/Builder/InjectRequestOptionFields.tsx

@@ -2,9 +2,9 @@ import { useField } from "formik";
 
 import { RequestOption } from "core/request/ConnectorManifest";
 
-import { injectIntoValues } from "../types";
 import { BuilderField } from "./BuilderField";
 import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
+import { injectIntoValues } from "../types";
 
 interface InjectRequestOptionFieldsProps {
   path: string;

airbyte-webapp/src/components/connectorBuilder/Builder/InputsForm.tsx

@@ -13,9 +13,9 @@ import { FormikPatch } from "core/form/FormikPatch";
 import { AirbyteJSONSchema } from "core/jsonSchema/types";
 import { useAnalyticsService } from "hooks/services/Analytics";
 
-import { BuilderFormInput, BuilderFormValues, getInferredInputs } from "../types";
 import { BuilderField } from "./BuilderField";
 import styles from "./InputsForm.module.scss";
+import { BuilderFormInput, BuilderFormValues, getInferredInputs } from "../types";
 
 const supportedTypes = ["string", "integer", "number", "array", "boolean", "enum", "unknown"] as const;
 

airbyte-webapp/src/components/connectorBuilder/Builder/InputsView.tsx

@@ -8,10 +8,10 @@ import { Button } from "components/ui/Button";
 import { Card } from "components/ui/Card";
 import { Text } from "components/ui/Text";
 
-import { BuilderFormInput, BuilderFormValues, getInferredInputs } from "../types";
 import { BuilderConfigView } from "./BuilderConfigView";
 import { InputForm, InputInEditing, newInputInEditing } from "./InputsForm";
 import styles from "./InputsView.module.scss";
+import { BuilderFormInput, BuilderFormValues, getInferredInputs } from "../types";
 
 const supportedTypes = ["string", "integer", "number", "array", "boolean", "enum", "unknown"] as const;
 

airbyte-webapp/src/components/connectorBuilder/Builder/PaginationSection.tsx

@@ -7,13 +7,13 @@ import { ControlLabels } from "components/LabeledControl";
 
 import { RequestOption } from "core/request/ConnectorManifest";
 
-import { BuilderPaginator } from "../types";
 import { BuilderCard } from "./BuilderCard";
 import { BuilderField } from "./BuilderField";
 import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
 import { BuilderOneOf } from "./BuilderOneOf";
 import { InjectRequestOptionFields } from "./InjectRequestOptionFields";
 import { ToggleGroupField } from "./ToggleGroupField";
+import { BuilderPaginator } from "../types";
 
 interface PaginationSectionProps {
   streamFieldPath: (fieldPath: string) => string;

airbyte-webapp/src/components/connectorBuilder/Builder/StreamConfigView.tsx

@@ -21,9 +21,6 @@ import {
   useConnectorBuilderTestState,
 } from "services/connectorBuilder/ConnectorBuilderStateService";
 
-import { SchemaConflictIndicator } from "../SchemaConflictIndicator";
-import { BuilderStream } from "../types";
-import { formatJson } from "../utils";
 import { AddStreamButton } from "./AddStreamButton";
 import { BuilderCard } from "./BuilderCard";
 import { BuilderConfigView } from "./BuilderConfigView";
@@ -34,6 +31,9 @@ import { KeyValueListField } from "./KeyValueListField";
 import { PaginationSection } from "./PaginationSection";
 import styles from "./StreamConfigView.module.scss";
 import { StreamSlicerSection } from "./StreamSlicerSection";
+import { SchemaConflictIndicator } from "../SchemaConflictIndicator";
+import { BuilderStream } from "../types";
+import { formatJson } from "../utils";
 
 interface StreamConfigViewProps {
   streamNum: number;

airbyte-webapp/src/components/connectorBuilder/Builder/StreamReferenceField.tsx

@@ -6,8 +6,8 @@ import { ControlLabels } from "components/LabeledControl";
 import { DropDown } from "components/ui/DropDown";
 import { Text } from "components/ui/Text";
 
-import { BuilderStream } from "../types";
 import styles from "./BuilderField.module.scss";
+import { BuilderStream } from "../types";
 
 interface StreamReferenceFieldProps {
   // path to the location in the Connector Manifest schema which should be set by this component

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/LogsDisplay.tsx

@@ -6,8 +6,8 @@ import { Text } from "components/ui/Text";
 
 import { StreamReadLogsItem } from "core/request/ConnectorBuilderClient";
 
-import { formatJson } from "../utils";
 import styles from "./LogsDisplay.module.scss";
+import { formatJson } from "../utils";
 
 interface LogsDisplayProps {
   logs: StreamReadLogsItem[];

airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/PageDisplay.tsx

@@ -13,10 +13,10 @@ import {
   useConnectorBuilderTestState,
 } from "services/connectorBuilder/ConnectorBuilderStateService";
 
-import { SchemaConflictIndicator } from "../SchemaConflictIndicator";
-import { formatJson } from "../utils";
 import styles from "./PageDisplay.module.scss";
 import { SchemaDiffView } from "./SchemaDiffView";
+import { SchemaConflictIndicator } from "../SchemaConflictIndicator";
+import { formatJson } from "../utils";
 
 interface PageDisplayProps {
   page: StreamReadSlicesItemPagesItem;