FIX-2334 Replace Next.js with Vite (#2336)

Co-authored-by: Elias Bruvik <[email protected]>

.eslintrc.json

@@ -7,7 +7,6 @@
   "env": {
     "browser": true,
     "es2021": true,
-    "jest": true,
     "es6": true
   },
   "extends": [
@@ -19,8 +18,7 @@
   "parser": "@typescript-eslint/parser",
   "plugins": [
     "@typescript-eslint",
-    "react",
-    "jest"
+    "react"
   ],
   "rules": {
     // suppress errors for missing 'import React' in files
@@ -34,7 +32,10 @@
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-unused-vars": ["error"],
-    "no-console": 1,
+    "no-console": [
+      "error",
+      { "allow": ["warn", "error"] }
+    ],
     "react/prop-types": 1,
     "no-unused-vars": "off",
     "no-empty-pattern": "off"

.github/workflows/ci_frontend.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3
       - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1
         with:
-          node-version: '16'
+          node-version: '20'
       - name: Install dependencies
         run: yarn
         working-directory: ./Src/WitsmlExplorer.Frontend

.gitignore

@@ -19,6 +19,7 @@
 *.sln.docstates
 
 # Build results
+dist/
 bin/
 obj/
 Src/**/obj

CONTRIBUTING.md

@@ -287,7 +287,7 @@ Verify successful deployment by accessing the url in browser or postman; Expect
 #### Deploy Frontend
 Edit .env.local file in WitsmlExplorer.Frontend project and set this value
 ```
-	NEXT_PUBLIC_WITSMLEXPLORER_API_URL=https://localhost/witsmlexplorerbackend
+	VITE_WITSMLEXPLORER_API_URL=https://localhost/witsmlexplorerbackend
 ```
 
 Build and export the application to a folder. Eg.: C:\WE_Frontend

Dockerfile-frontend

@@ -1,4 +1,4 @@
-FROM node:16-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY Src/WitsmlExplorer.Frontend/package.json ./
 COPY yarn.lock ./
@@ -11,20 +11,20 @@ ARG AZURE_AD_TENANT_ID=
 ARG AZURE_AD_CLIENT_ID=
 ARG AZURE_AD_URL_WITSMLEXPLORER=
 ARG AZURE_AD_SCOPE_API=
-ENV NEXT_PUBLIC_MSALENABLED=${MSALENABLED}
-ENV NEXT_PUBLIC_AZURE_AD_TENANT_ID=${AZURE_AD_TENANT_ID}
-ENV NEXT_PUBLIC_AZURE_AD_CLIENT_ID=${AZURE_AD_CLIENT_ID}
-ENV NEXT_PUBLIC_AZURE_AD_URL_WITSMLEXPLORER=${AZURE_AD_URL_WITSMLEXPLORER}
-ENV NEXT_PUBLIC_AZURE_AD_SCOPE_API=${AZURE_AD_SCOPE_API}
+ENV VITE_MSALENABLED=${MSALENABLED}
+ENV VITE_AZURE_AD_TENANT_ID=${AZURE_AD_TENANT_ID}
+ENV VITE_AZURE_AD_CLIENT_ID=${AZURE_AD_CLIENT_ID}
+ENV VITE_AZURE_AD_URL_WITSMLEXPLORER=${AZURE_AD_URL_WITSMLEXPLORER}
+ENV VITE_AZURE_AD_SCOPE_API=${AZURE_AD_SCOPE_API}
 
-RUN yarn test && yarn build && yarn export
+RUN yarn test && yarn build
 
 FROM nginx:1-alpine AS final
 ARG EXPOSE_PORT=3000
 WORKDIR /usr/share/nginx/html
 RUN rm -rf ./*
 COPY --from=builder /app/nginx/nginx.conf /etc/nginx/nginx.conf
-COPY --from=builder /app/out .
+COPY --from=builder /app/dist .
 EXPOSE ${EXPOSE_PORT}
 RUN mkdir -p /var/cache/nginx && chown nginx:nginx /var/cache/nginx && chown nginx:nginx -R /etc/nginx
 

Docs/AUTH.md

@@ -16,6 +16,6 @@ Accessing the API without a frontend is explained at the end of each of the docu
 
 ## Authentication modes in WITSML Explorer.
 
-Basic mode uses a session cookie to keep track of the user. This mode is used by setting `"OAuth2Enabled": false` in the API configuration and empty `NEXT_PUBLIC_MSALENABLED=` in the frontend environment. Basic flow is explained in [BASIC_AUTH.md](./BASIC_AUTH.md).
+Basic mode uses a session cookie to keep track of the user. This mode is used by setting `"OAuth2Enabled": false` in the API configuration and empty `VITE_MSALENABLED=` in the frontend environment. Basic flow is explained in [BASIC_AUTH.md](./BASIC_AUTH.md).
 
-OAuth mode uses JWT authentication to keep track of the user. This mode is used by setting `"OAuth2Enabled": true` in the API configuration and `NEXT_PUBLIC_MSALENABLED=true` in the frontend environment. OAUTH flow is explained in [OAUTH.md](./OAUTH.md).
+OAuth mode uses JWT authentication to keep track of the user. This mode is used by setting `"OAuth2Enabled": true` in the API configuration and `VITE_MSALENABLED=true` in the frontend environment. OAUTH flow is explained in [OAUTH.md](./OAUTH.md).

Docs/BASIC_AUTH.md

@@ -1,6 +1,6 @@
 # WITSML server credentials flow (Basic)
 
-Basic mode uses a session cookie to keep track of the user. This mode is used by setting `"OAuth2Enabled": false` in the API configuration (and leaving `NEXT_PUBLIC_MSALENABLED=` empty in the frontend environment).
+Basic mode uses a session cookie to keep track of the user. This mode is used by setting `"OAuth2Enabled": false` in the API configuration (and leaving `VITE_MSALENABLED=` empty in the frontend environment).
 
 This is a description of the flow:
 ### 1. When the user connects to a server for the first time

Docs/OAUTH.md

@@ -33,12 +33,12 @@ Example `mysettings.json` file for API:
 Required environment variables in frontend:
 
 ```bash
-# To disable MSAL, leave NEXT_PUBLIC_MSALENABLED empty
-NEXT_PUBLIC_MSALENABLED=true
-NEXT_PUBLIC_AZURE_AD_TENANT_ID=b3edbf8f-e8b2-4c4e-96fc-c86cdd7fd55f
-NEXT_PUBLIC_AZURE_AD_CLIENT_ID=62cd6a0b-f869-0caa-ca95-8d1980fb6f25
-NEXT_PUBLIC_AZURE_AD_URL_WITSMLEXPLORER=http://localhost:3000/
-NEXT_PUBLIC_AZURE_AD_SCOPE_API=api://a10111dc-712d-485f-8600-57be8c597921/access_as_user
+# To disable MSAL, leave VITE_MSALENABLED empty
+VITE_MSALENABLED=true
+VITE_AZURE_AD_TENANT_ID=b3edbf8f-e8b2-4c4e-96fc-c86cdd7fd55f
+VITE_AZURE_AD_CLIENT_ID=62cd6a0b-f869-0caa-ca95-8d1980fb6f25
+VITE_AZURE_AD_URL_WITSMLEXPLORER=http://localhost:3000/
+VITE_AZURE_AD_SCOPE_API=api://a10111dc-712d-485f-8600-57be8c597921/access_as_user
 ```
 
 ## System-user credentials

Src/WitsmlExplorer.Frontend/.env.development

@@ -1,7 +1,7 @@
-# To disable MSAL, leave NEXT_PUBLIC_MSALENABLED empty
+# To disable MSAL, leave VIITE_MSALENABLED empty
 # To override this file locally, create a ".env.development.local" duplicate
-NEXT_PUBLIC_MSALENABLED=
-NEXT_PUBLIC_AZURE_AD_TENANT_ID=
-NEXT_PUBLIC_AZURE_AD_CLIENT_ID=
-NEXT_PUBLIC_AZURE_AD_URL_WITSMLEXPLORER=http://localhost:3000/
-NEXT_PUBLIC_AZURE_AD_SCOPE_API=
+VITE_MSALENABLED=
+VITE_AZURE_AD_TENANT_ID=
+VITE_AZURE_AD_CLIENT_ID=
+VITE_AZURE_AD_URL_WITSMLEXPLORER=http://localhost:3000/
+VITE_AZURE_AD_SCOPE_API=

Src/WitsmlExplorer.Frontend/App.tsx

@@ -0,0 +1,6 @@
+import Router from "routes/Router";
+import "styles/global.css";
+
+export function App() {
+  return <Router />;
+}

Src/WitsmlExplorer.Frontend/__testUtils__/mocks/EDSMocks.tsx

@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 
 // Dialog uses HTMLDialogElement which is not yet supported by jsdom, so we need to mock it. Keep an eye on https://github.com/jsdom/jsdom/issues/3294 for progress.
-export const mockEdsCoreReact = () => {
-  const originalModule = jest.requireActual("@equinor/eds-core-react");
+export const mockEdsCoreReact = async () => {
+  const originalModule = await vi.importActual<any>("@equinor/eds-core-react");
 
   const MockDialog = ({ children }: { children: ReactNode }) => (
     <div>{children}</div>

Src/WitsmlExplorer.Frontend/components/ContentViews/Charts/ReactLogChart.tsx

@@ -65,7 +65,6 @@ export function ReactLogChart({
     // Update chart
     if (chartRef.current !== null) {
       const chart = getInstanceByDom(chartRef.current);
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       loading === true ? chart?.showLoading() : chart?.hideLoading();
     }
   }, [loading, theme]);

Src/WitsmlExplorer.Frontend/components/ContentViews/__tests__/ContentTable.tests.tsx

@@ -1,4 +1,3 @@
-import "@testing-library/jest-dom";
 import { fireEvent, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {

Src/WitsmlExplorer.Frontend/components/ContentViews/table/ColumnDef.tsx

@@ -24,7 +24,6 @@ import {
 } from "tools/localStorageHelpers";
 
 declare module "@tanstack/react-table" {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface SortingFns {
     [measureSortingFn]: SortingFn<unknown>;
     [componentSortingFn]: SortingFn<unknown>;

Src/WitsmlExplorer.Frontend/components/ContentViews/table/contentTableUtils.ts

@@ -108,7 +108,9 @@ export function calculateRowHeight(
 ): number {
   if (row.getIsExpanded() && row.original.inset?.length != 0) {
     return (
-      headCellHeight + cellHeight + cellHeight * row.original.inset?.length ?? 0
+      headCellHeight +
+      cellHeight +
+      cellHeight * (row.original.inset?.length ?? 0)
     );
   }
   return cellHeight;

Src/WitsmlExplorer.Frontend/components/ContextMenus/ContextMenuUtils.tsx

@@ -212,9 +212,7 @@ export const onClickRefreshObject = async (
   serverUrl: string,
   wellUid: string,
   wellboreUid: string,
-  objectType: ObjectType,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  objectUid: string
+  objectType: ObjectType
 ) => {
   dispatchOperation({ type: OperationType.HideContextMenu });
   refreshObjectsQuery(queryClient, serverUrl, wellUid, wellboreUid, objectType);

Src/WitsmlExplorer.Frontend/components/ContextMenus/NestedMenuItem.tsx

@@ -39,7 +39,10 @@ const NestedMenuItem = React.forwardRef<
   useImperativeHandle(ref, () => menuItemRef.current);
 
   const containerRef = useRef<HTMLDivElement>(null);
-  useImperativeHandle(containerRefProp, () => containerRef.current);
+  useImperativeHandle(
+    containerRefProp as React.RefObject<HTMLElement>,
+    () => containerRef.current
+  );
 
   const menuContainerRef = useRef<HTMLDivElement>(null);
 

Src/WitsmlExplorer.Frontend/components/ContextMenus/ObjectMenuItems.tsx

@@ -57,8 +57,7 @@ export const ObjectMenuItems = (
           selectedServer.url,
           checkedObjects[0].wellUid,
           checkedObjects[0].wellboreUid,
-          objectType,
-          checkedObjects[0].uid
+          objectType
         )
       }
       disabled={checkedObjects.length !== 1}

Src/WitsmlExplorer.Frontend/components/ContextMenus/TubularComponentContextMenu.tsx

@@ -82,8 +82,7 @@ const TubularComponentContextMenu = (
               connectedServer?.url,
               tubular.wellUid,
               tubular.wellboreUid,
-              ObjectType.Tubular,
-              tubular.uid
+              ObjectType.Tubular
             )
           }
         >

Src/WitsmlExplorer.Frontend/components/ContextMenus/UseClipboardReferences.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
 import ObjectReferences from "models/jobs/objectReferences";
 import { ObjectType } from "models/objectType";
+import { useEffect, useState } from "react";
 
 export const useClipboardReferences = (
   pollInterval = 0
@@ -19,7 +19,7 @@ export const useClipboardReferences = (
 
   useEffect(() => {
     tryToParseClipboardContent();
-    let timer: NodeJS.Timer;
+    let timer: ReturnType<typeof setInterval>;
     if (pollInterval > 0) {
       timer = setInterval(tryToParseClipboardContent, pollInterval);
     }

Src/WitsmlExplorer.Frontend/components/Modals/PropertiesModalUtils.ts

@@ -1,4 +1,3 @@
-import MaxLength from "models/maxLength";
 import Measure from "models/measure";
 
 export const undefinedOnUnchagedEmptyString = (
@@ -17,7 +16,7 @@ export const undefinedOnUnchagedEmptyString = (
 export const invalidStringInput = (
   original: string,
   edited: string,
-  maxLength: MaxLength
+  maxLength: number
 ): boolean => {
   return (
     errorOnDeletion(original, edited) ||

Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogComparisonUtils.test.ts

@@ -12,7 +12,9 @@ const irrelevantProperties = {
   },
   axisDefinitions: [{} as AxisDefinition],
   curveDescription: "",
-  typeLogData: ""
+  typeLogData: "",
+  traceState: "",
+  nullValue: ""
 };
 
 const mnemonic = "mnemonic";

Src/WitsmlExplorer.Frontend/components/Modals/__tests__/LogCurveInfoPropertiesModal.test.tsx

@@ -1,4 +1,3 @@
-import "@testing-library/jest-dom";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { mockEdsCoreReact } from "__testUtils__/mocks/EDSMocks";
@@ -12,13 +11,14 @@ import LogCurveInfoPropertiesModal, {
   LogCurveInfoPropertiesModalProps
 } from "components/Modals/LogCurveInfoPropertiesModal";
 import JobService from "services/jobService";
+import { vi } from "vitest";
 
-jest.mock("services/jobService");
-jest.mock("@equinor/eds-core-react", () => mockEdsCoreReact());
+vi.mock("services/jobService");
+vi.mock("@equinor/eds-core-react", () => mockEdsCoreReact());
 
 const simpleProps: LogCurveInfoPropertiesModalProps = {
   logCurveInfo: getLogCurveInfo(),
-  dispatchOperation: jest.fn(),
+  dispatchOperation: vi.fn(),
   selectedLog: getLogObject()
 };
 
@@ -76,7 +76,7 @@ it("AxisDefinition should be shown readonly in the LogCurveInfo modal when inclu
 });
 
 it("Saving edited properties of a LogCurve should result in the order of a job", async () => {
-  const mockedOrderJob = jest.fn();
+  const mockedOrderJob = vi.fn();
   JobService.orderJob = mockedOrderJob;
 
   const user = userEvent.setup();

Src/WitsmlExplorer.Frontend/components/Modals/__tests__/ReportModal.test.tsx

@@ -1,8 +1,6 @@
-import "@testing-library/jest-dom/extend-expect";
 import { act, screen, within } from "@testing-library/react";
 import { mockEdsCoreReact } from "__testUtils__/mocks/EDSMocks";
 import {
-  MockResizeObserver,
   deferred,
   getJobInfo,
   getNotification,
@@ -12,22 +10,19 @@ import { ReportModal } from "components/Modals/ReportModal";
 import BaseReport, { createReport } from "models/reports/BaseReport";
 import JobService from "services/jobService";
 import NotificationService from "services/notificationService";
+import { vi } from "vitest";
 
-jest.mock("services/objectService");
-jest.mock("@microsoft/signalr");
-jest.mock("@equinor/eds-core-react", () => mockEdsCoreReact());
+vi.mock("services/objectService");
+vi.mock("@microsoft/signalr");
+vi.mock("@equinor/eds-core-react", () => mockEdsCoreReact());
 
-jest.mock("services/jobService", () => {
+vi.mock("services/jobService", () => {
   return {
-    getUserJobInfo: () => MOCK_JOB_INFO,
-    getReport: jest.fn()
+    default: { getUserJobInfo: () => MOCK_JOB_INFO, getReport: vi.fn() }
   };
 });
 
 describe("Report Modal", () => {
-  //mock ResizeObserver to enable testing virtualized components
-  window.ResizeObserver = MockResizeObserver;
-
   describe("Report Modal with report", () => {
     it("Should show a basic report", () => {
       renderWithContexts(<ReportModal report={REPORT} />);
@@ -44,6 +39,11 @@ describe("Report Modal", () => {
     });
 
     it("Should show the reportItems in a table", () => {
+      // This line is needed to trigger @tanstack/react-virtual in ContentTable.tsx
+      window.Element.prototype.getBoundingClientRect = vi
+        .fn()
+        .mockReturnValue({ height: 1000, width: 1000 });
+
       renderWithContexts(<ReportModal report={REPORT} />);
       const rows = screen.getAllByRole("row");
       expect(rows).toHaveLength(REPORT_ITEMS.length + 1); // An extra row for the header
@@ -82,9 +82,7 @@ describe("Report Modal", () => {
       const { promise: reportPromise, resolve: resolveReportPromise } =
         deferred<BaseReport>();
 
-      jest
-        .spyOn(JobService, "getReport")
-        .mockImplementation(() => reportPromise);
+      vi.spyOn(JobService, "getReport").mockImplementation(() => reportPromise);
 
       renderWithContexts(<ReportModal jobId="testJobId" />);
       expect(screen.getByText(/loading report/i)).toBeInTheDocument();

Src/WitsmlExplorer.Frontend/components/PageLayout.tsx

@@ -30,7 +30,7 @@ const PageLayout = (): ReactElement => {
   const [sidebarWidth, setSidebarWidth] = useState(316);
   const { width: documentWidth, height: documentHeight } =
     useDocumentDimensions();
-  const version = process.env.NEXT_PUBLIC_WEX_VERSION;
+  const version = import.meta.env.VITE_WEX_VERSION;
   const { operationState } = useContext(OperationContext);
   const { colors } = operationState;