chore: disable eslint rules in tests and reorganize test files (#2161)

* chore: disable eslint rules in tests and reorganize test files

* chore: apply automatic import sort via eslint plugin

* fix: revert service-mock files

* fix: story types

* fix: revert server changes

* fix: remove unnecessary files

* fix: imports after rebase

src/client/.eslintrc.yml

@@ -7,16 +7,35 @@ extends:
   - plugin:react/jsx-runtime
   - plugin:@typescript-eslint/recommended
   - prettier
-overrides: []
+
+overrides:
+  [
+    {
+      files: ["*.{service-mock,mock,test,spec}.{ts,tsx}", "**/__mocks__/*"],
+      rules:
+        {
+          "@typescript-eslint/no-explicit-any": 0,
+          "@typescript-eslint/no-non-null-assertion": 0,
+          "@typescript-eslint/no-unused-vars": 0,
+          "@typescript-eslint/no-var-requires": 0,
+        },
+    },
+  ]
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: latest
   sourceType: module
 plugins:
   - react
   - "@typescript-eslint"
+  - "simple-import-sort"
 rules:
-  "@typescript-eslint/no-loss-of-precision": 0
+  {
+    "@typescript-eslint/no-loss-of-precision": 0,
+    "simple-import-sort/imports": 2,
+    "simple-import-sort/exports": 2,
+  }
+
 settings:
   react:
     version: detect

src/client/e2e/blotter.spec.ts

@@ -1,8 +1,9 @@
 import { expect, Page } from "@playwright/test"
-import { test } from "./fixtures"
 // import { fxColDef, fxColFields } from "../src/App/Trades/TradesState/colConfig"
 // import { FxTrade } from "../src/services/trades"
 import fs from "fs"
+
+import { test } from "./fixtures"
 import { OPENFIN_PROJECT_NAME } from "./utils"
 
 const getTradeIDColIndex = () => {

src/client/package.json

@@ -122,6 +122,7 @@
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^4.3.8",
     "jest": "^27.0.0",
     "jest-styled-components": "^7.0.3",

src/client/src/App.tsx

@@ -1,10 +1,12 @@
 import { StrictMode } from "react"
 import ReactDOM from "react-dom"
-import GlobalStyle from "@/theme/globals"
+
 import { GlobalScrollbarStyle, ThemeProvider } from "@/theme"
-import { registerFxNotifications } from "./notifications"
+import GlobalStyle from "@/theme/globals"
+
 import { GA_TRACKING_ID } from "./constants"
-import { getMainApp, gaDimension } from "./main"
+import { gaDimension, getMainApp } from "./main"
+import { registerFxNotifications } from "./notifications"
 import { initConnection } from "./services/connection"
 import { checkTradingGatewayCompatibility } from "./services/tradingGatewayCompatibility"
 

src/client/src/App/Admin/Admin.tsx

@@ -1,11 +1,12 @@
-import { ThroughputAdminService } from "@/generated/TradingGateway"
-import { withSubscriber } from "@/utils/withSubscriber"
 import { bind } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
 import { concat, merge, of } from "rxjs"
 import { catchError, debounceTime, exhaustMap, map } from "rxjs/operators"
 import styled from "styled-components"
 
+import { ThroughputAdminService } from "@/generated/TradingGateway"
+import { withSubscriber } from "@/utils/withSubscriber"
+
 const Wrapper = styled.div`
   background: ${({ theme }) => theme.white};
   height: 100%;

src/client/src/App/Analytics/Analytics.tsx

@@ -1,7 +1,8 @@
-import { Loader } from "@/components/Loader"
 import { lazy, Suspense, useRef } from "react"
-import { analytics$ } from "@/services/analytics"
 import styled from "styled-components"
+
+import { Loader } from "@/components/Loader"
+import { analytics$ } from "@/services/analytics"
 import { useHasItBeenVisible } from "@/utils/useHasItBeenVisible"
 
 export const AnalyticsCoreDeferred = import("./AnalyticsCore")

src/client/src/App/Analytics/AnalyticsCore.tsx

@@ -1,19 +1,21 @@
-import { merge } from "rxjs"
 import { Subscribe } from "@react-rxjs/core"
-import { ProfitAndLoss, profitAndLoss$ } from "./ProfitAndLoss"
-import { Positions, positions$ } from "./Positions"
+import { merge } from "rxjs"
+
+import { supportsTearOut } from "@/App/TearOutSection/supportsTearOut"
+import { TearOutComponent } from "@/App/TearOutSection/TearOutComponent"
+import { isAnalyticsDataStale$ } from "@/services/analytics"
+import { createSuspenseOnStale } from "@/utils/createSuspenseOnStale"
+import { WithChildren } from "@/utils/utilityTypes"
+
 import { PnL, pnL$ } from "./PnL"
+import { Positions, positions$ } from "./Positions"
+import { ProfitAndLoss, profitAndLoss$ } from "./ProfitAndLoss"
 import {
-  AnalyticsStyle,
   AnalyticsHeader,
   AnalyticsInnerWrapper,
+  AnalyticsStyle,
   RightNav,
 } from "./styled"
-import { createSuspenseOnStale } from "@/utils/createSuspenseOnStale"
-import { isAnalyticsDataStale$ } from "@/services/analytics"
-import { supportsTearOut } from "@/App/TearOutSection/supportsTearOut"
-import { TearOutComponent } from "@/App/TearOutSection/TearOutComponent"
-import { WithChildren } from "@/utils/utilityTypes"
 
 const analytics$ = merge(pnL$, profitAndLoss$, positions$)
 

src/client/src/App/Analytics/PnL/PNLBar.tsx

@@ -1,21 +1,24 @@
 import { useState } from "react"
+
 import {
   formatAsWholeNumber,
   formatWithScale,
   precisionNumberFormatter,
 } from "@/utils/formatNumber"
+
 import {
+  Bar,
   BarChart,
   BarPriceContainer,
+  DiamondShape,
   Label,
   Offset,
+  OriginTick,
+  OriginTickWrapper,
   PriceContainer,
   PriceLabel,
-  DiamondShape,
-  Bar,
-  OriginTickWrapper,
-  OriginTick,
 } from "./styled"
+
 export interface PNLBarProps {
   basePnl: number
   maxVal: number

src/client/src/App/Analytics/PnL/PnL.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentMeta } from "@storybook/react"
 import styled from "styled-components"
+
 import { PnLInner } from "./PnL"
 
 export default {

src/client/src/App/Analytics/PnL/PnL.tsx

@@ -1,8 +1,10 @@
 import { bind } from "@react-rxjs/core"
 import { distinctUntilChanged, map } from "rxjs/operators"
+
 import { currentPositions$ } from "@/services/analytics"
 import { equals } from "@/utils/equals"
 import { mapObject } from "@/utils/mapObject"
+
 import { Title } from "../styled"
 import PNLBar, { PNLBarProps } from "./PNLBar"
 

src/client/src/App/Analytics/PnL/PNLBar.test.tsx → src/client/src/App/Analytics/PnL/__tests__/PNLBar.test.tsx

@@ -1,7 +1,9 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { render, screen, act, fireEvent } from "@testing-library/react"
+import { act, fireEvent, render, screen } from "@testing-library/react"
+
 import { TestThemeProvider } from "@/utils/testUtils"
-import PNLBar from "./PNLBar"
+
+import PNLBar from "../PNLBar"
+
 const renderer = require("react-test-renderer")
 
 const renderComponent = (symbol: string, basePnl: number, maxVal: number) =>

src/client/src/App/Analytics/PnL/styled.tsx

@@ -1,6 +1,7 @@
-import { AccentPaletteMap } from "@/theme"
 import styled from "styled-components"
 
+import { AccentPaletteMap } from "@/theme"
+
 const FlexDiv = styled.div`
   display: flex;
   flex-direction: column;

src/client/src/App/Analytics/Positions/Positions.tsx

@@ -11,6 +11,7 @@ import {
   select,
 } from "d3"
 import { useLayoutEffect, useRef } from "react"
+
 import { BubbleChart, Title } from "../styled"
 import { BubbleChartNode, data$, nodes$, useData } from "./data"
 

src/client/src/App/Analytics/Positions/Positions.test.tsx → src/client/src/App/Analytics/Positions/__tests__/Positions.test.tsx

@@ -1,11 +1,12 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 import { Subscribe } from "@react-rxjs/core"
-import { render, screen, act, fireEvent, waitFor } from "@testing-library/react"
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { BehaviorSubject } from "rxjs"
-import { TestThemeProvider } from "@/utils/testUtils"
-import { Positions, positions$ } from "./Positions"
+
 import { CurrencyPairPosition } from "@/services/analytics"
 import { CurrencyPair } from "@/services/currencyPairs"
+import { TestThemeProvider } from "@/utils/testUtils"
+
+import { Positions, positions$ } from "../Positions"
 
 jest.mock("@/services/analytics/analytics")
 jest.mock("@/services/currencyPairs/currencyPairs")

src/client/src/App/Analytics/Positions/data.ts

@@ -1,3 +1,4 @@
+import { bind, shareLatest } from "@react-rxjs/core"
 import { scaleLinear, SimulationNodeDatum } from "d3"
 import { combineLatest, Observable } from "rxjs"
 import {
@@ -7,13 +8,13 @@ import {
   scan,
   withLatestFrom,
 } from "rxjs/operators"
-import { colors } from "@/theme"
+
 import { currentPositions$ } from "@/services/analytics"
 import { currencyPairs$ } from "@/services/currencyPairs"
+import { colors } from "@/theme"
+import { equals } from "@/utils/equals"
 import { formatAsWholeNumber } from "@/utils/formatNumber"
-import { bind, shareLatest } from "@react-rxjs/core"
 import { mapObject } from "@/utils/mapObject"
-import { equals } from "@/utils/equals"
 
 interface CCYPosition {
   symbol: string

src/client/src/App/Analytics/ProfitAndLoss/LastPosition.tsx

@@ -1,7 +1,8 @@
 import { bind } from "@react-rxjs/core"
+import { map } from "rxjs/operators"
 import styled from "styled-components"
+
 import { history$ } from "@/services/analytics"
-import { map } from "rxjs/operators"
 import { formatAsWholeNumber } from "@/utils/formatNumber"
 
 type Accents = "positive" | "negative"

src/client/src/App/Analytics/ProfitAndLoss/LineChart/Colors.tsx

@@ -1,9 +1,11 @@
-import { dataPoints$ } from "./dataPoints$"
+import { bind } from "@react-rxjs/core"
 import { scaleLinear } from "d3"
 import { map } from "rxjs/operators"
-import { bind } from "@react-rxjs/core"
+
 import { Range } from "@/utils/historicalChart"
 
+import { dataPoints$ } from "./dataPoints$"
+
 const offsetScale = scaleLinear().range([0, 1])
 const getOffset = ({ yRange }: { yRange: Range<number> }) =>
   offsetScale.domain(yRange)(0)

src/client/src/App/Analytics/ProfitAndLoss/LineChart/LineChart.tsx

@@ -1,13 +1,14 @@
+import { useRef } from "react"
+import { merge } from "rxjs"
 import styled from "styled-components"
+
 import { Colors, colors$ } from "./Colors"
+import { TOTAL_HEIGHT, TOTAL_WIDTH } from "./constants"
 import { MainLine, mainLine$ } from "./MainLine"
-import { Tooltip } from "./Tooltip"
+import { ReferenceLine, referenceLine$ } from "./ReferenceLine"
 import { TimeLegends, timeLegends$ } from "./TimeLegends"
+import { Tooltip } from "./Tooltip"
 import { ValueLegends, valueLegends$ } from "./ValueLegends"
-import { TOTAL_WIDTH, TOTAL_HEIGHT } from "./constants"
-import { merge } from "rxjs"
-import { useRef } from "react"
-import { ReferenceLine, referenceLine$ } from "./ReferenceLine"
 
 const AnalyticsLineChartStyle = styled.div`
   width: 100%;

src/client/src/App/Analytics/ProfitAndLoss/LineChart/MainLine.tsx

@@ -1,9 +1,11 @@
-import { LINE_CHART_HEIGHT, LINE_CHART_WIDTH } from "./constants"
-import { dataPoints$ } from "./dataPoints$"
-import { map } from "rxjs/operators"
 import { bind } from "@react-rxjs/core"
+import { map } from "rxjs/operators"
+
 import { toSvgPath } from "@/utils/historicalChart"
 
+import { LINE_CHART_HEIGHT, LINE_CHART_WIDTH } from "./constants"
+import { dataPoints$ } from "./dataPoints$"
+
 const [useD, mainLine$] = bind(dataPoints$.pipe(map(toSvgPath())))
 
 export { mainLine$ }

src/client/src/App/Analytics/ProfitAndLoss/LineChart/ReferenceLine.tsx

@@ -1,7 +1,8 @@
+import { bind } from "@react-rxjs/core"
+import { map } from "rxjs/operators"
+
 import { LINE_CHART_WIDTH, Y_LEGENDS_WIDTH } from "./constants"
 import { dataPoints$ } from "./dataPoints$"
-import { map } from "rxjs/operators"
-import { bind } from "@react-rxjs/core"
 
 const [useY, referenceLine$] = bind(
   dataPoints$.pipe(map(({ yScale }) => yScale(0))),

src/client/src/App/Analytics/ProfitAndLoss/LineChart/TimeLegends.tsx

@@ -1,10 +1,12 @@
 import { bind } from "@react-rxjs/core"
 import { format } from "date-fns"
 import { map, pluck, scan, withLatestFrom } from "rxjs/operators"
+
 import { history$ } from "@/services/analytics"
+
+import { LINE_CHART_HEIGHT, X_LEGENDS_HEIGHT } from "./constants"
 import { dataPoints$ } from "./dataPoints$"
 import { Text } from "./Text"
-import { LINE_CHART_HEIGHT, X_LEGENDS_HEIGHT } from "./constants"
 
 const INTERVAL_WIDTH = 30
 

src/client/src/App/Analytics/ProfitAndLoss/LineChart/Tooltip.tsx

@@ -1,7 +1,5 @@
 import { bind } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
-import { LINE_CHART_HEIGHT } from "./constants"
-import { dataPoints$ } from "./dataPoints$"
 import { format } from "date-fns"
 import {
   MutableRefObject,
@@ -13,8 +11,12 @@ import {
 import { createPortal } from "react-dom"
 import { map, switchMap } from "rxjs/operators"
 import styled from "styled-components"
+
 import { formatWithScale, precisionNumberFormatter } from "@/utils/formatNumber"
 
+import { LINE_CHART_HEIGHT } from "./constants"
+import { dataPoints$ } from "./dataPoints$"
+
 const ToolTipStyle = styled.div`
   pointer-events: none;
   background-color: #14161c;

src/client/src/App/Analytics/ProfitAndLoss/LineChart/ValueLegends.tsx

@@ -1,9 +1,11 @@
 import { bind } from "@react-rxjs/core"
+import { scaleLinear } from "d3"
 import { map } from "rxjs/operators"
-import { dataPoints$ } from "./dataPoints$"
-import { LINE_CHART_HEIGHT, Y_LEGENDS_WIDTH } from "./constants"
+
 import { formatWithScale, precisionNumberFormatter } from "@/utils/formatNumber"
-import { scaleLinear } from "d3"
+
+import { LINE_CHART_HEIGHT, Y_LEGENDS_WIDTH } from "./constants"
+import { dataPoints$ } from "./dataPoints$"
 import { Text } from "./Text"
 
 const N_LABELS = 5