Merge pull request #184 from zimmerman-team/feat/DX-1606

feat: Update husky implementation to enforce absolute imports
zimmerman-team · Oct 4, 2024 · 1b2b997 · 1b2b997
2 parents 58a8ed9 + fc956b8
commit 1b2b997
Show file tree

Hide file tree

Showing 109 changed files with 1,509 additions and 1,825 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,10 +15,9 @@ module.exports = {
   extends: [
     "eslint-config-react-app",
     "react-app",
-    "airbnb-typescript-prettier",
     "plugin:sonarjs/recommended",
   ],
-  plugins: ["sonarjs"],
+  plugins: ["sonarjs", "no-relative-import-paths"],
   rules: {
     "@typescript-eslint/explicit-function-return-type": "off",
     "react/no-array-index-key": 0,
@@ -33,17 +32,23 @@ module.exports = {
     "@typescript-eslint/ban-ts-ignore ": 0,
     "@typescript-eslint/no-unused-vars": 0,
     "react-hooks/exhaustive-deps": 0,
-    "no-restricted-imports": [
+    "sonarjs/cognitive-complexity": ["error", 20],
+    // "no-restricted-imports": [
+    //   "error",
+    //   {
+    //     paths: [
+    //       {
+    //         name: "styled-components",
+    //         message: "Please import from styled-components/macro.",
+    //       },
+    //     ],
+    //     patterns: ["!styled-components/macro"],
+    //   },
+    // ],
+
+    "no-relative-import-paths/no-relative-import-paths": [
       "error",
-      {
-        paths: [
-          {
-            name: "styled-components",
-            message: "Please import from styled-components/macro.",
-          },
-        ],
-        patterns: ["!styled-components/macro"],
-      },
+      { allowSameFolder: true, rootDir: "src", prefix: "" },
     ],
   },
   /*overrides: [

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -56,7 +56,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install packages
-        run: yarn install && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#b86c928" 
+        run: yarn install --frozen-lockfile && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#b86c928" 
 
       - name: Build rawgraphs package
         run: |
@@ -84,7 +84,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install packages
-        run: yarn install && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#b86c928" 
+        run: yarn install --frozen-lockfile && yarn add "https://github.com/zimmerman-team/rawgraphs-charts.git#b86c928" 
 
       - name: Build rawgraphs package
         run: |
@@ -104,7 +104,7 @@ jobs:
           # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
           start: yarn start
           wait-on: "http://127.0.0.1:3000" # Waits for above
-          wait-on-timeout: 180
+          wait-on-timeout: 200
           # Records to Cypress Cloud
           # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
           record: true

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -2,4 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn prettier src/app --check
+npx eslint src --ext .js,.jsx,.tsx,ts --max-warnings 0
 
diff --git a/package.json b/package.json
@@ -103,13 +103,16 @@
     "@types/react-swipeable-views-utils": "^0.13.7",
     "@types/styled-components": "^5.1.9",
     "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/parser": "6.7.4",
     "babel-plugin-styled-components": "^1.12.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "cypress": "^13.6.6",
     "cypress-file-upload": "^5.0.8",
     "depcheck": "^1.4.7",
     "eslint-config-airbnb-typescript-prettier": "^4.2.0",
-    "eslint-plugin-sonarjs": "^0.6.0",
+    "eslint-plugin-no-relative-import-paths": "^1.5.5",
+    "eslint-plugin-sonarjs": "0.13.0",
     "prettier": "^2.2.1",
     "source-map-explorer": "^2.5.2",
     "typescript": "^4.2.4",

diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
@@ -8,7 +8,7 @@ import { useScrollToTop } from "app/hooks/useScrollToTop";
 import { useRouteListener } from "app/hooks/useRouteListener";
 import { PageLoader } from "app/modules/common/page-loader";
 import { RouteWithAppBar } from "app/utils/RouteWithAppBar";
-import { Route, Switch, useHistory } from "react-router-dom";
+import { Route, Switch, useHistory, useLocation } from "react-router-dom";
 import { NoMatchPage } from "app/modules/common/no-match-page";
 import { useGoogleOneTapLogin } from "react-google-one-tap-login";
 import {
@@ -21,6 +21,12 @@ import {
 } from "@auth0/auth0-react";
 import axios from "axios";
 import { AuthProtectedRoute } from "./utils/AuthProtectedRoute";
+import {
+  PaymentSuccessCallbackModule,
+  PaymentCanceledCallbackModule,
+} from "app/modules/callback-module/payment";
+import { useRecoilValue } from "recoil";
+import { fetchPlanLoadingAtom } from "./state/recoil/atoms";
 
 const LandingModule = lazy(
   () => import("app/modules/home-module/sub-modules/landing")
@@ -45,12 +51,6 @@ const PricingModule = lazy(
 const EmbedChartModule = lazy(
   () => import("app/modules/embed-module/embedChart")
 );
-import {
-  PaymentSuccessCallbackModule,
-  PaymentCanceledCallbackModule,
-} from "app/modules/callback-module/payment";
-import { useRecoilValue } from "recoil";
-import { fetchPlanLoadingAtom } from "./state/recoil/atoms";
 
 const ChartModule = lazy(() => import("app/modules/chart-module"));
 const ReportModule = lazy(() => import("app/modules/report-module"));
@@ -170,6 +170,7 @@ const OneTapLoginComponent = () => {
 
 const IntercomBootupComponent = () => {
   const { isAuthenticated, user, getAccessTokenSilently } = useAuth0();
+  const location = useLocation();
 
   React.useEffect(() => {
     if (window?.Intercom) {

diff --git a/src/app/components/Dialogs/EmbedChartDialog/index.tsx b/src/app/components/Dialogs/EmbedChartDialog/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import CloseOutlined from "@material-ui/icons/ClearOutlined";
 import Modal from "@material-ui/core/Modal";
-import { useStyles } from "../deleteChartDialog";
+import { useStyles } from "app/components/Dialogs/deleteChartDialog";
 import { useRenderChartFromAPI } from "app/modules/report-module/components/chart-wrapper/useRenderChartFromAPI";
 import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "@material-ui/core/Snackbar";
@@ -38,8 +38,9 @@ export default function EmbedChartDialog(props: {
   const [widthValue, setWidthValue] = React.useState<number>(0);
   const [heightValue, setHeightValue] = React.useState<number>(0);
   const [copyAlert, setCopyAlert] = React.useState<boolean>(false);
+  const defaultSwitchTab = "embed-code";
   const [activeSwitchTab, setActiveSwitchTab] =
-    React.useState<string>("embed-code");
+    React.useState<string>(defaultSwitchTab);
 
   const {
     notFound,
@@ -64,7 +65,7 @@ export default function EmbedChartDialog(props: {
     { value: "compact", label: "Compact" },
   ];
   const switchTabs = [
-    { value: "embed-code", label: "Embed Code" },
+    { value: defaultSwitchTab, label: "Embed Code" },
     { value: "lishared-link", label: "Shared Link" },
   ];
 
@@ -99,7 +100,7 @@ export default function EmbedChartDialog(props: {
   };
 
   const handleCopyToClipboard = async () => {
-    copyToClipboard("embed-code").then(() => {
+    copyToClipboard(defaultSwitchTab).then(() => {
       setCopyAlert(true);
     });
   };
@@ -247,7 +248,7 @@ export default function EmbedChartDialog(props: {
               </p>
             </div>
           </div>
-          {activeSwitchTab === "embed-code" ? (
+          {activeSwitchTab === defaultSwitchTab ? (
             <EmbedOptions
               chartId={props.chartId}
               displayMode={displayMode}

diff --git a/src/app/components/Search/components/results/index.tsx b/src/app/components/Search/components/results/index.tsx
@@ -47,6 +47,7 @@ export function SearchResults(props: SearchResultsProps) {
                 css={resultcss}
                 key={result.value}
                 onClick={() => window.open(result.link, "_blank")}
+                href={result.link}
               >
                 {result.type && result.type.length > 0 && getIcon(result.type)}
                 <div>{result.label}</div>

diff --git a/src/app/components/Styled/tabs.ts b/src/app/components/Styled/tabs.ts
@@ -4,6 +4,10 @@ interface ITab {
   active?: boolean;
   position?: string;
 }
+
+const gothamNarrowBold = "GothamNarrow-Bold";
+const gothamNarrowBook = "GothamNarrow-Book";
+const translateX0 = "translateX(0%)";
 export const Tab = {
   Container: styled.div`
     display: flex;
@@ -21,7 +25,7 @@ export const Tab = {
     color: ${(props) => (props.active ? "#6061E5" : "#000000")};
     font-weight: ${(props) => (props.active ? "bold" : "normal")};
     font-family: ${(props) =>
-        props.active ? "GothamNarrow-Bold" : "GothamNarrow-Book"},
+        props.active ? gothamNarrowBold : gothamNarrowBook},
       "Helvetica Neue", sans-serif;
 
     ::after {
@@ -33,7 +37,7 @@ export const Tab = {
       border-bottom: 2px solid
         ${(props) => (props.active ? "#6061E5" : "transparent")};
       transform: ${(props) =>
-        props.active ? "translateX(0%)" : `translateX(100%)`};
+        props.active ? translateX0 : `translateX(100%)`};
       transition: transform 0.3s linear;
     }
   `,
@@ -43,7 +47,7 @@ export const Tab = {
     color: ${(props) => (props.active ? "#6061E5" : "#000000")};
     font-weight: ${(props) => (props.active ? "bold" : "normal")};
     font-family: ${(props) =>
-        props.active ? "GothamNarrow-Bold" : "GothamNarrow-Book"},
+        props.active ? gothamNarrowBold : gothamNarrowBook},
       "Helvetica Neue", sans-serif;
 
     ::after {
@@ -56,8 +60,8 @@ export const Tab = {
         ${(props) => (props.active ? "#6061E5" : "transparent")};
       transform: ${(props) =>
         props.active
-          ? "translateX(0%)"
-          : `translateX(${props.position == "left" ? "-100%" : "100%"} )`};
+          ? translateX0
+          : `translateX(${props.position === "left" ? "-100%" : "100%"} )`};
       transition: transform 0.3s linear;
     }
   `,
@@ -68,7 +72,7 @@ export const Tab = {
     color: ${(props) => (props.active ? "#6061E5" : "#000000")};
     font-weight: ${(props) => (props.active ? "700" : "normal")};
     font-family: ${(props) =>
-        props.active ? "GothamNarrow-Bold" : "GothamNarrow-Book"},
+        props.active ? gothamNarrowBold : gothamNarrowBook},
       "Helvetica Neue", sans-serif;
 
     ::after {
@@ -80,7 +84,7 @@ export const Tab = {
       border-bottom: 2px solid
         ${(props) => (props.active ? "#6061E5" : "transparent")};
       transform: ${(props) =>
-        props.active ? "translateX(0%)" : "translateX(-100%)"};
+        props.active ? translateX0 : "translateX(-100%)"};
       transition: transform 0.3s linear;
     }
   `,

diff --git a/src/app/components/Switch/BasicSwitch/index.tsx b/src/app/components/Switch/BasicSwitch/index.tsx
@@ -63,7 +63,7 @@ export default function BasicSwitch(props: Props) {
             color: ${props.activeTab === tab.value ? "white" : "#231D2C"};
           `}
         >
-          {tab.icon && tab.icon} {tab.label}
+          {tab.icon ? tab.icon : null} {tab.label}
         </button>
       ))}
 

diff --git a/src/app/hooks/useChartsRawData.tsx b/src/app/hooks/useChartsRawData.tsx
@@ -2,7 +2,7 @@
 import React from "react";
 import filter from "lodash/filter";
 import isEmpty from "lodash/isEmpty";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import axios, { AxiosError, AxiosResponse } from "axios";
 /* project */
 import { useStoreActions, useStoreState } from "app/state/store/hooks";
@@ -79,10 +79,13 @@ export function useChartsRawData(props: {
   isLoadedChartMappingValid?: boolean | null;
   setIsLoadedChartMappingValid?: (value: boolean | null) => void;
 }) {
+  const location = useLocation();
   const abortControllerRef = React.useRef<AbortController>(
     new AbortController()
   );
 
+  const defaultChartErrorMessage =
+    "Something went wrong with loading your data!\nChoose another dimensions or select different chart type.";
   const token = useStoreState((state) => state.AuthToken.value);
   const { visualOptions, chartFromAPI, setVisualOptions, setChartFromAPI } =
     props;
@@ -103,7 +106,7 @@ export function useChartsRawData(props: {
   const [dataError, setDataError] = React.useState(false);
   const [dataTotalCount, setDataTotalCount] = React.useState(0);
   const [chartErrorMessage, setChartErrorMessage] = React.useState<string>(
-    "Something went wrong with loading your data!\nChoose another dimensions or select different chart type."
+    defaultChartErrorMessage
   );
   const appliedFilters = useStoreState(
     (state) => state.charts.appliedFilters.value
@@ -166,10 +169,7 @@ export function useChartsRawData(props: {
         setLoading(false);
         if (isEmpty(response.data) || response.data.error) {
           setDataError(true);
-          setChartErrorMessage(
-            response.data.error ??
-              "Something went wrong with loading your data!\nChoose another dimensions or select different chart type."
-          );
+          setChartErrorMessage(response.data.error ?? defaultChartErrorMessage);
         } else {
           if (response.data.stats === "Error") {
             setDataStats([]);
@@ -282,9 +282,7 @@ export function useChartsRawData(props: {
         }
         setLoading(false);
         setChartError(true);
-        setChartErrorMessage(
-          "Something went wrong with loading your data!\nChoose another dimensions or select different chart type."
-        );
+        setChartErrorMessage(defaultChartErrorMessage);
 
         setError401(error.response?.status === 401);
       });
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,5 @@
		. "$(dirname -- "$0")/_/husky.sh"

		yarn prettier src/app --check
		npx eslint src --ext .js,.jsx,.tsx,ts --max-warnings 0