Replace eslint-plugin-path with eslint-plugin-no-relative-import-paths

* eslint-plugin-path allowed relative paths to nested imports (eg ./x)
* eslint-plugin-no-relative-import-paths does not allow any relative paths
* Update Cypress config to handle @ alias
* Make sure site-diffs circular dependency doesn't break

Change-Id: I0bd2f48ec97281f95f0d2feecfb950d3848d66d6
GitOrigin-RevId: 13b3c466b6290d287cfc96e25026f3beea562305

.eslintrc.js

@@ -260,10 +260,11 @@ module.exports = {
             ],
           },
         ],
-        "path/no-relative-imports": [
+        "no-relative-import-paths/no-relative-import-paths": [
           "error",
           {
-            maxDepth: 0,
+            rootDir: "platform/wab/src",
+            prefix: "@",
           },
         ],
       },
@@ -374,7 +375,13 @@ module.exports = {
       },
     },
   ],
-  plugins: ["@typescript-eslint", "react", "jest", "import", "path"],
+  plugins: [
+    "@typescript-eslint",
+    "react",
+    "jest",
+    "import",
+    "eslint-plugin-no-relative-import-paths",
+  ],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",

package.json

@@ -47,7 +47,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-path": "1.2.2",
+    "eslint-plugin-no-relative-import-paths": "1.5.4",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "if-env": "^1.0.4",

platform/wab/cypress/plugins/index.ts

@@ -25,11 +25,11 @@ const path = require("path");
 const fetchPolyfill = fs
   .readFileSync(require.resolve("whatwg-fetch"))
   .toString();
-
 const options = wp.defaultOptions;
 options.webpackOptions.resolve = {
   extensions: [".ts", ".js"],
   alias: {
+    "@": path.resolve(__dirname, "../../src"),
     lodash: "lodash-es",
     http: "stream-http",
     https: "https-browserify",

platform/wab/package.json

@@ -137,7 +137,6 @@
     "@types/pg": "^7.14.4",
     "@types/platform": "^1.3.2",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "^18.2.33",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-csv": "^1.1.3",
     "@types/react-dom": "^18.2.14",
@@ -281,6 +280,7 @@
     "@swc/core": "^1.3.24",
     "@thi.ng/iterators": "^5.1.32",
     "@tinymce/tinymce-react": "^4.3.2",
+    "@types/react": "^18.2.33",
     "@xmldom/xmldom": "^0.8.10",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",

platform/wab/src/AddButton.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {
   DefaultAddButtonProps,
   PlasmicAddButton,
-} from "./wab/client/plasmic/plasmic_kit_left_pane/PlasmicAddButton";
+} from "@/wab/client/plasmic/plasmic_kit_left_pane/PlasmicAddButton";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -21,7 +21,7 @@ import {
 //
 // You can also stop extending from DefaultAddButtonProps altogether and have
 // total control over the props for your component.
-export interface AddButtonProps extends DefaultAddButtonProps {}
+export type AddButtonProps = DefaultAddButtonProps;
 
 function AddButton_(props: AddButtonProps, ref: HTMLElementRefOf<"button">) {
   // Use PlasmicAddButton to render this component as it was

platform/wab/src/AuthForm.tsx

@@ -1,19 +1,19 @@
 // This is a skeleton starter React component generated by Plasmic.
 // This file is owned by you, feel free to edit as you see fit.
+import { RestFormData } from "@/RestBuilder";
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { RestFormData } from "./RestBuilder";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import Select2 from "./wab/client/components/widgets/Select";
+import Select2 from "@/wab/client/components/widgets/Select";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { Textbox } from "./wab/client/components/widgets/Textbox";
+import { Textbox } from "@/wab/client/components/widgets/Textbox";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import {
   DefaultAuthFormProps,
   PlasmicAuthForm,
   PlasmicAuthForm__OverridesType,
-} from "./wab/client/plasmic/plasmic_kit_data_queries/PlasmicAuthForm";
-import { ensureType } from "./wab/common";
+} from "@/wab/client/plasmic/plasmic_kit_data_queries/PlasmicAuthForm";
+import { ensureType } from "@/wab/common";
 
 /** Keys to labels */
 export const authTypeToLabel = {
@@ -67,7 +67,7 @@ export interface ApiKeyAuthData {
 
 export type AuthData = BasicAuthData | BearerAuthData | ApiKeyAuthData;
 
-interface AuthFormProps extends DefaultAuthFormProps {}
+type AuthFormProps = DefaultAuthFormProps;
 
 function AuthForm(authProps: AuthFormProps) {
   const { control, watch, setValue } = useFormContext<RestFormData>();

platform/wab/src/CmsListItem.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {
   DefaultCmsListItemProps,
   PlasmicCmsListItem,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicCmsListItem";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicCmsListItem";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -21,7 +21,7 @@ import {
 //
 // You can also stop extending from DefaultCmsListItemProps altogether and have
 // total control over the props for your component.
-export interface CmsListItemProps extends DefaultCmsListItemProps {}
+export type CmsListItemProps = DefaultCmsListItemProps;
 
 function CmsListItem_(props: CmsListItemProps, ref: HTMLElementRefOf<"a">) {
   // Use PlasmicCmsListItem to render this component as it was

platform/wab/src/CmsPage.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {
   DefaultCmsPageProps,
   PlasmicCmsPage,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicCmsPage";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicCmsPage";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -21,7 +21,7 @@ import {
 //
 // You can also stop extending from DefaultCmsPageProps altogether and have
 // total control over the props for your component.
-export interface CmsPageProps extends DefaultCmsPageProps {}
+export type CmsPageProps = DefaultCmsPageProps;
 
 function CmsPage_(props: CmsPageProps, ref: HTMLElementRefOf<"div">) {
   // Use PlasmicCmsPage to render this component as it was

platform/wab/src/CmsSection.tsx

@@ -8,7 +8,7 @@ import * as React from "react";
 import {
   DefaultCmsSectionProps,
   PlasmicCmsSection,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicCmsSection";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicCmsSection";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can

platform/wab/src/CollapseToggle.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {
   DefaultCollapseToggleProps,
   PlasmicCollapseToggle,
-} from "./wab/client/plasmic/plasmic_kit_left_pane/PlasmicCollapseToggle";
+} from "@/wab/client/plasmic/plasmic_kit_left_pane/PlasmicCollapseToggle";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can

platform/wab/src/CommentButton.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {
   DefaultCommentButtonProps,
   PlasmicCommentButton,
-} from "./wab/client/plasmic/plasmic_kit_top_bar/PlasmicCommentButton";
+} from "@/wab/client/plasmic/plasmic_kit_top_bar/PlasmicCommentButton";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -21,7 +21,7 @@ import {
 //
 // You can also stop extending from DefaultCommentButtonProps altogether and have
 // total control over the props for your component.
-export interface CommentButtonProps extends DefaultCommentButtonProps {}
+export type CommentButtonProps = DefaultCommentButtonProps;
 
 function CommentButton_(
   props: CommentButtonProps,

platform/wab/src/ConnectToDataSource.tsx

@@ -6,12 +6,12 @@ import { useState } from "react";
 import {
   DefaultConnectToDataSourceProps,
   PlasmicConnectToDataSource,
-} from "./wab/client/plasmic/plasmic_kit_data_queries/PlasmicConnectToDataSource";
+} from "@/wab/client/plasmic/plasmic_kit_data_queries/PlasmicConnectToDataSource";
 import {
   BuiltinDataSource,
   BuiltinDataSourceName,
   dataSourceNameToHumanName,
-} from "./wab/shared/data/DataSources";
+} from "@/wab/shared/data/DataSources";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can

platform/wab/src/ContentPage.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import {
   DefaultContentPageProps,
   PlasmicContentPage,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicContentPage";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicContentPage";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -21,7 +21,7 @@ import {
 //
 // You can also stop extending from DefaultContentPageProps altogether and have
 // total control over the props for your component.
-export interface ContentPageProps extends DefaultContentPageProps {}
+export type ContentPageProps = DefaultContentPageProps;
 
 function ContentPage_(props: ContentPageProps, ref: HTMLElementRefOf<"div">) {
   // Use PlasmicContentPage to render this component as it was

platform/wab/src/DataSource.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import {
   DefaultDataSourceProps,
   PlasmicDataSource,
-} from "./wab/client/plasmic/plasmic_kit_data_queries/PlasmicDataSource";
+} from "@/wab/client/plasmic/plasmic_kit_data_queries/PlasmicDataSource";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can

platform/wab/src/DocsPortalBranch.tsx

@@ -2,14 +2,14 @@
 // This file is owned by you, feel free to edit as you see fit.
 import * as React from "react";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { PublicLink } from "./wab/client/components/PublicLink";
+import { PublicLink } from "@/wab/client/components/PublicLink";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import {
   DefaultDocsPortalBranchProps,
   PlasmicDocsPortalBranch,
-} from "./wab/client/plasmic/plasmic_kit_docs_portal/PlasmicDocsPortalBranch";
+} from "@/wab/client/plasmic/plasmic_kit_docs_portal/PlasmicDocsPortalBranch";
 
-interface DocsPortalBranchProps extends DefaultDocsPortalBranchProps {}
+type DocsPortalBranchProps = DefaultDocsPortalBranchProps;
 
 function DocsPortalBranch(props: DocsPortalBranchProps) {
   return (

platform/wab/src/DocsPortalBranches.tsx

@@ -2,16 +2,16 @@
 // This file is owned by you, feel free to edit as you see fit.
 import * as React from "react";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { U } from "./wab/client/cli-routes";
+import { U } from "@/wab/client/cli-routes";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useDocsPortalCtx } from "./wab/client/components/docs/DocsPortalCtx";
+import { useDocsPortalCtx } from "@/wab/client/components/docs/DocsPortalCtx";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import {
   DefaultDocsPortalBranchesProps,
   PlasmicDocsPortalBranches,
-} from "./wab/client/plasmic/plasmic_kit_docs_portal/PlasmicDocsPortalBranches";
+} from "@/wab/client/plasmic/plasmic_kit_docs_portal/PlasmicDocsPortalBranches";
 
-interface DocsPortalBranchesProps extends DefaultDocsPortalBranchesProps {}
+type DocsPortalBranchesProps = DefaultDocsPortalBranchesProps;
 
 function DocsPortalBranches(props: DocsPortalBranchesProps) {
   const docsCtx = useDocsPortalCtx();

platform/wab/src/HostProtocolSelect.tsx

@@ -1,14 +1,14 @@
+import Option from "@/HostProtocolSelect__Option";
+import OptionGroup from "@/HostProtocolSelect__OptionGroup";
 import { SelectRef } from "@plasmicapp/react-web";
 import * as React from "react";
-import Option from "./HostProtocolSelect__Option";
-import OptionGroup from "./HostProtocolSelect__OptionGroup";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import {
   DefaultHostProtocolSelectProps,
   PlasmicHostProtocolSelect,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect";
 
-interface HostProtocolSelectProps extends DefaultHostProtocolSelectProps {}
+type HostProtocolSelectProps = DefaultHostProtocolSelectProps;
 
 function HostProtocolSelect_(props: HostProtocolSelectProps, ref: SelectRef) {
   const { ...otherProps } = props;

platform/wab/src/HostProtocolSelect__Option.tsx

@@ -4,10 +4,9 @@ import * as React from "react";
 import {
   DefaultHostProtocolSelect__OptionProps,
   PlasmicHostProtocolSelect__Option,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect__Option";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect__Option";
 
-interface HostProtocolSelect__OptionProps
-  extends DefaultHostProtocolSelect__OptionProps {}
+type HostProtocolSelect__OptionProps = DefaultHostProtocolSelect__OptionProps;
 
 function HostProtocolSelect__Option_(
   props: HostProtocolSelect__OptionProps,

platform/wab/src/HostProtocolSelect__OptionGroup.tsx

@@ -3,10 +3,10 @@ import * as React from "react";
 import {
   DefaultHostProtocolSelect__OptionGroupProps,
   PlasmicHostProtocolSelect__OptionGroup,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect__OptionGroup";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect__OptionGroup";
 
-interface HostProtocolSelect__OptionGroupProps
-  extends DefaultHostProtocolSelect__OptionGroupProps {}
+type HostProtocolSelect__OptionGroupProps =
+  DefaultHostProtocolSelect__OptionGroupProps;
 
 function HostProtocolSelect__OptionGroup(
   props: HostProtocolSelect__OptionGroupProps

platform/wab/src/HostProtocolSelect__Overlay.tsx

@@ -4,10 +4,9 @@ import * as React from "react";
 import {
   DefaultHostProtocolSelect__OverlayProps,
   PlasmicHostProtocolSelect__Overlay,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect__Overlay";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostProtocolSelect__Overlay";
 
-interface HostProtocolSelect__OverlayProps
-  extends DefaultHostProtocolSelect__OverlayProps {}
+type HostProtocolSelect__OverlayProps = DefaultHostProtocolSelect__OverlayProps;
 
 function HostProtocolSelect__Overlay_(
   props: HostProtocolSelect__OverlayProps,

platform/wab/src/HostUrlInput.tsx

@@ -4,7 +4,7 @@ import {
   DefaultHostUrlInputProps,
   PlasmicHostUrlInput,
   PlasmicHostUrlInput__OverridesType,
-} from "./wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostUrlInput";
+} from "@/wab/client/plasmic/plasmic_kit_dashboard/PlasmicHostUrlInput";
 
 interface HostUrlInputProps
   extends DefaultHostUrlInputProps,

platform/wab/src/InlineEditable.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { ClickStopper } from "./wab/client/components/widgets";
+import { ClickStopper } from "@/wab/client/components/widgets";
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { PlasmicInlineEditable } from "./wab/client/plasmic/plasmic_kit_design_system/PlasmicInlineEditable";
-import { InlineEdit } from "./wab/commons/components/InlineEdit";
-import { OnClickAway } from "./wab/commons/components/OnClickAway";
+import { PlasmicInlineEditable } from "@/wab/client/plasmic/plasmic_kit_design_system/PlasmicInlineEditable";
+import { InlineEdit } from "@/wab/commons/components/InlineEdit";
+import { OnClickAway } from "@/wab/commons/components/OnClickAway";
 
 interface InlineEditableProps {
   className?: string;

platform/wab/src/InlineInsertionPosition.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import {
   DefaultInlineInsertionPositionProps,
   PlasmicInlineInsertionPosition,
-} from "./wab/client/plasmic/plasmic_kit_left_pane/PlasmicInlineInsertionPosition";
+} from "@/wab/client/plasmic/plasmic_kit_left_pane/PlasmicInlineInsertionPosition";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can
@@ -20,8 +20,7 @@ import {
 //
 // You can also stop extending from DefaultInlineInsertionPositionProps altogether and have
 // total control over the props for your component.
-interface InlineInsertionPositionProps
-  extends DefaultInlineInsertionPositionProps {}
+type InlineInsertionPositionProps = DefaultInlineInsertionPositionProps;
 
 function InlineInsertionPosition(props: InlineInsertionPositionProps) {
   // Use PlasmicInlineInsertionPosition to render this component as it was

platform/wab/src/KeyValueRow.tsx

@@ -6,7 +6,7 @@ import {
   DefaultKeyValueRowProps,
   PlasmicKeyValueRow,
   PlasmicKeyValueRow__OverridesType,
-} from "./wab/client/plasmic/plasmic_kit_data_queries/PlasmicKeyValueRow";
+} from "@/wab/client/plasmic/plasmic_kit_data_queries/PlasmicKeyValueRow";
 
 // Your component props start with props for variants and slots you defined
 // in Plasmic, but you can add more here, like event handlers that you can

platform/wab/src/ListBuilder.tsx

@@ -7,7 +7,7 @@ import {
   DefaultListBuilderProps,
   PlasmicListBuilder,
   PlasmicListBuilder__OverridesType,
-} from "./wab/client/plasmic/plasmic_kit_data_queries/PlasmicListBuilder";
+} from "@/wab/client/plasmic/plasmic_kit_data_queries/PlasmicListBuilder";
 
 interface ListBuilderProps
   extends DefaultListBuilderProps,