Fix storybook webpack error (#267)

* Fixed issue with storybook and webpack findDOMNode error

- With Next 15, we were getting some storybook errors about deprecated findDOMNode. The fix is to specify a nodeRef on TransitionGroups so findDOMNode is not called

* Added webpack typings to next.js and storybook

* Updated version for release

.gitignore

@@ -21,3 +21,4 @@ testmerge.json
 .env.test.local*
 .env.production.local*
 .DS_Store
+package-lock.json.scripting

agent/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fs/ppaas-agent",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Agent Service for running pewpew tests",
   "main": "dist/src/app.js",
   "scripts": {

common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fs/ppaas-common",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Common Code for the PewPewController and PewPewAgent",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",

controller/.storybook/main.ts

@@ -1,3 +1,4 @@
+import type { Configuration } from "webpack";
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
@@ -19,7 +20,7 @@ const config: StorybookConfig = {
       propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
     }
   },
-  webpackFinal: (config) => {
+  webpackFinal: (config: Configuration) => {
     if (!config.resolve) { config.resolve = {}; }
     config.resolve.fallback = {
       ...(config.resolve.fallback || {}),

controller/components/YamlEndpoints/index.tsx

@@ -17,7 +17,7 @@ import {
   PewPewHeader
 } from "../../types/yamlwriter";
 import { LogLevel, log } from "../../pages/api/util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { QuestionBubble } from "../YamlQuestionBubble";
 import styled from "styled-components";
 import { uniqueId } from "../../pages/api/util/clientutil";
@@ -142,6 +142,10 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
   const invalidHitRate = !HIT_RATE_REGEX.test(state.hitRate);
   const hitRateStyle: React.CSSProperties = getHitRateStyle(invalidHitRate);
   const hitRateTitle: string | undefined = state.hitRate === "" ? "Please enter a Hit Rate" : (getHitRateTitle(invalidHitRate) || "Update all hit rates");
+
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addUrl()}>
@@ -167,9 +171,9 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
           </button>
         </NonFlexSpan>
       </HitratesDiv>
-      <TransitionGroup className="endpoints-section_list">
+      <TransitionGroup className="endpoints-section_list" nodeRef={nodeRef}>
         {Array.from(urlsMap.values()).map((url) => (
-          <CSSTransition key={url.id} timeout={300} classNames="point">
+          <CSSTransition key={url.id} timeout={300} classNames="point" nodeRef={nodeRef}>
             <Urls
               deleteUrl={props.deleteUrl}
               changeUrl={props.changeUrl}

controller/components/YamlLoadPatterns/index.tsx

@@ -1,6 +1,6 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Checkbox, Div, InputsDiv, Label, Span} from "../YamlStyles";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { PewPewLoadPattern } from "../../types/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import { uniqueId } from "../../pages/api/util/clientutil";
@@ -86,6 +86,9 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     props.clearAllPatterns();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
   <InputsDiv>
     <button onClick={() => props.addPattern(newLoadPattern())}>
@@ -101,13 +104,13 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     <QuestionBubble text="Set Default load and ramp time patterns"></QuestionBubble>
     <Checkbox type="checkbox" id="defaultPatterns" name="defaultPatterns" onChange={handleClickDefault} checked={state.defaultPatterns} />
 
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loadPatternsMap.values()).map((pewpewPattern: PewPewLoadPattern) => {
         // TODO: Do we want to check if they're greater than 0?
         const validFrom: boolean = !pewpewPattern.from || NUMBER_REGEX.test(pewpewPattern.from);
         const validTo: boolean = NUMBER_REGEX.test(pewpewPattern.to);
         const validOver: boolean = OVER_REGEX.test(pewpewPattern.over);
-        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load">
+        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <Div>
             <Span>
               <Label> From: </Label>

controller/components/YamlLoggers/index.tsx

@@ -220,6 +220,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
     modalRef.current?.openModal();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
     <button onClick={() => props.addLogger(newLogger())}>
@@ -246,9 +249,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
       <QuestionBubble text="test_end logs status errors 500 and above and kills test with too many errors"></QuestionBubble>
       <Checkbox type="checkbox" id={KILL_LOGGER} onChange={handleClickDefault} checked={state.killLogger} />
     </Div>
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loggerMap.values()).map((logger: PewPewLogger) => (
-        <CSSTransition key={logger.id} timeout={300} classNames="load">
+        <CSSTransition key={logger.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <BorderDiv>
               <Span style={{paddingBottom: "15px"}}>
                 <label style={{marginRight: "7px"}}> Name: </label>

controller/components/YamlProviders/index.tsx

@@ -1,7 +1,7 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Div, InputsDiv} from "../YamlStyles";
 import { ProviderType, ProviderTypes } from "./ProviderTypes";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { PewPewProvider } from "../../types/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import styled from "styled-components";
@@ -112,6 +112,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
   //   setState((prevState) => ({...prevState, providers }));
   // };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addProviderDropDown()}>
@@ -141,9 +144,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
           </ProviderInputsDiv>
         }
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(providersMap.values()).map((provider: PewPewProvider) => (
-          <CSSTransition key={provider.id} timeout={300} classNames="load">
+          <CSSTransition key={provider.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <ProviderTypes
               deleteProvider={props.deleteProvider}
               changeProvider={props.changeProvider}

controller/components/YamlVars/index.tsx

@@ -9,7 +9,7 @@ import {
   SESSION_ID_DEFAULT
 } from "../../types/yamlwriter";
 import { LogLevel, log } from "../../pages/api/util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import QuestionBubble from "../YamlQuestionBubble";
 import VarsDropDown from "./DropDown";
 import { uniqueId } from "../../pages/api/util/clientutil";
@@ -180,6 +180,9 @@ export function Vars ({ authenticated, defaultYaml, ...props }: VarsProps) {
     }
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => props.addVar(emptyVar())}>
@@ -225,9 +228,9 @@ export function Vars ({ authenticated, defaultYaml, ...props }: VarsProps) {
           <VarsDropDown display={state.devKey} onChange={changeEnvironment} />
         </div>
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(varsMap.values()).map((pewpewVar: PewPewVars) => (
-          <CSSTransition key={pewpewVar.id} timeout={300} classNames="load">
+          <CSSTransition key={pewpewVar.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <Div>
               <Span>
                 <Label> Name: </Label>

controller/next.config.ts

@@ -1,3 +1,4 @@
+import type { Compilation, Compiler, Configuration } from "webpack";
 import { access, symlink } from "fs/promises";
 import CopyPlugin from "copy-webpack-plugin";
 import type { NextConfig } from "next";
@@ -36,12 +37,15 @@ const nextConfig: NextConfig = {
     typedRoutes: true
     // instrumentationHook: true,
   },
-  webpack: (config, { isServer, dir: optionsDir }) => {
+  // Defaults to any but is actually type { import('webpack').Configuration }
+  webpack: (config: Configuration, { isServer, dir: optionsDir }) => {
     const wasmExtensionRegExp = /\.wasm$/;
 
+    if (!config.resolve) { config.resolve = {}; }
+    if (!config.resolve.extensions) { config.resolve.extensions = []; }
     config.resolve.extensions.push(".wasm");
 
-    config.module.rules.forEach((rule: any) => {
+    config.module?.rules?.forEach((rule: any) => {
       (rule.oneOf || []).forEach((oneOf: any) => {
         if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
           // Make file-loader ignore WASM files
@@ -50,6 +54,7 @@ const nextConfig: NextConfig = {
       });
     });
 
+    if (!config.output) { config.output = {}; }
     config.output.webassemblyModuleFilename = "static/wasm/[modulehash].wasm";
     if (!config.experiments) { config.experiments = {}; }
     config.experiments.asyncWebAssembly = true;
@@ -58,6 +63,7 @@ const nextConfig: NextConfig = {
     // Compiling we run into an issue where it can't find the config wasm.
     // On Linux the workaround is to create a symlink to the correct location
     // On Windows, the symlinks fail so we must copy the file
+    if (!config.plugins) { config.plugins = []; }
     config.plugins.push(
       platform() === "win32"
       // https://github.com/vercel/next.js/issues/25852#issuecomment-1727385542
@@ -68,13 +74,12 @@ const nextConfig: NextConfig = {
       })
       // https://github.com/vercel/next.js/issues/25852#issuecomment-1057059000
       : new (class {
-        apply (compiler: any) {
+        apply (compiler: Compiler) {
           compiler.hooks.afterEmit.tapPromise(
             "SymlinkWebpackPlugin",
-            // eslint-disable-next-line @typescript-eslint/no-shadow
-            async (compiler: any) => {
+            async (compilation: Compilation) => {
               if (isServer) {
-                const from = join(compiler.options.output.path, "config_wasm_bg.wasm");
+                const from = join(compilation.options.output.path!, "config_wasm_bg.wasm");
                 const to = join(optionsDir, "../lib/config-wasm/pkg/config_wasm_bg.wasm");
                 // options.dir /.../pewpew/controller
                 // console.log(`from/to: ${from} -> ${to}`);

controller/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fs/ppaas-controller",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "Controller Service for running pewpew tests",
   "private": true,
   "scripts": {
@@ -127,6 +127,7 @@
     "set-value": "^4.1.0",
     "storybook": "~8.4.0",
     "trim": "^1.0.1",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.0",
+    "webpack": "^5.0.0"
   }
 }

guide/results-viewer-react/.storybook/main.ts

@@ -1,3 +1,4 @@
+import type { Configuration } from "webpack";
 import type { StorybookConfig } from "@storybook/nextjs";
 
 const config: StorybookConfig = {
@@ -16,7 +17,7 @@ const config: StorybookConfig = {
       propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
     }
   },
-  webpackFinal: async config => {
+  webpackFinal: async (config: Configuration) => {
     if (!config.experiments) {
       config.experiments = {};
     }

guide/results-viewer-react/src/components/YamlEndpoints/index.tsx

@@ -17,7 +17,7 @@ import {
   PewPewHeader
 } from "../../util/yamlwriter";
 import { LogLevel, log } from "../../util/log";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { QuestionBubble } from "../YamlQuestionBubble";
 import styled from "styled-components";
 import { uniqueId } from "../../util/clientutil";
@@ -142,6 +142,9 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
   const invalidHitRate = !HIT_RATE_REGEX.test(state.hitRate);
   const hitRateStyle: React.CSSProperties = getHitRateStyle(invalidHitRate);
   const hitRateTitle: string | undefined = state.hitRate === "" ? "Please enter a Hit Rate" : (getHitRateTitle(invalidHitRate) || "Update all hit rates");
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addUrl()}>
@@ -167,9 +170,9 @@ export const Endpoints = ({ urls, ...props }: EndpointsProps) => {
           </button>
         </NonFlexSpan>
       </HitratesDiv>
-      <TransitionGroup className="endpoints-section_list">
+      <TransitionGroup className="endpoints-section_list" nodeRef={nodeRef}>
         {Array.from(urlsMap.values()).map((url) => (
-          <CSSTransition key={url.id} timeout={300} classNames="point">
+          <CSSTransition key={url.id} timeout={300} classNames="point" nodeRef={nodeRef}>
             <Urls
               deleteUrl={props.deleteUrl}
               changeUrl={props.changeUrl}

guide/results-viewer-react/src/components/YamlLoadPatterns/index.tsx

@@ -1,6 +1,6 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Checkbox, Div, InputsDiv, Label, Span} from "../YamlStyles";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { PewPewLoadPattern } from "../../util/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import { uniqueId } from "../../util/clientutil";
@@ -86,6 +86,9 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     props.clearAllPatterns();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
   <InputsDiv>
     <button onClick={() => props.addPattern(newLoadPattern())}>
@@ -101,13 +104,13 @@ export function LoadPatterns ({ defaultYaml, patterns, ...props }: LoadPatternPr
     <QuestionBubble text="Set Default load and ramp time patterns"></QuestionBubble>
     <Checkbox type="checkbox" id="defaultPatterns" name="defaultPatterns" onChange={handleClickDefault} checked={state.defaultPatterns} />
 
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loadPatternsMap.values()).map((pewpewPattern: PewPewLoadPattern) => {
         // TODO: Do we want to check if they're greater than 0?
         const validFrom: boolean = !pewpewPattern.from || NUMBER_REGEX.test(pewpewPattern.from);
         const validTo: boolean = NUMBER_REGEX.test(pewpewPattern.to);
         const validOver: boolean = OVER_REGEX.test(pewpewPattern.over);
-        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load">
+        return <CSSTransition key={pewpewPattern.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <Div>
             <Span>
               <Label> From: </Label>

guide/results-viewer-react/src/components/YamlLoggers/index.tsx

@@ -220,6 +220,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
     modalRef.current?.openModal();
   };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
     <button onClick={() => props.addLogger(newLogger())}>
@@ -246,9 +249,9 @@ export function Loggers ({ defaultYaml, ...props }: LoggerProps) {
       <QuestionBubble text="test_end logs status errors 500 and above and kills test with too many errors"></QuestionBubble>
       <Checkbox type="checkbox" id={KILL_LOGGER} onChange={handleClickDefault} checked={state.killLogger} />
     </Div>
-    <TransitionGroup className="loadPatter-section_list">
+    <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
       {Array.from(loggerMap.values()).map((logger: PewPewLogger) => (
-        <CSSTransition key={logger.id} timeout={300} classNames="load">
+        <CSSTransition key={logger.id} timeout={300} classNames="load" nodeRef={nodeRef}>
           <BorderDiv>
               <Span style={{paddingBottom: "15px"}}>
                 <label style={{marginRight: "7px"}}> Name: </label>

guide/results-viewer-react/src/components/YamlProviders/index.tsx

@@ -1,7 +1,7 @@
 import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { Div, InputsDiv} from "../YamlStyles";
 import { ProviderType, ProviderTypes } from "./ProviderTypes";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { PewPewProvider } from "../../util/yamlwriter";
 import QuestionBubble from "../YamlQuestionBubble";
 import styled from "styled-components";
@@ -112,6 +112,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
   //   setState((prevState) => ({...prevState, providers }));
   // };
 
+  // https://github.com/reactjs/react-transition-group/issues/904
+  // http://reactcommunity.org/react-transition-group/transition#Transition-prop-nodeRef
+  const nodeRef = useRef(null);
   return (
     <InputsDiv>
       <button onClick={() => addProviderDropDown()}>
@@ -141,9 +144,9 @@ export function Providers ({ providers, ...props }: ProviderMainProps) {
           </ProviderInputsDiv>
         }
       </Div>
-      <TransitionGroup className="loadPatter-section_list">
+      <TransitionGroup className="loadPatter-section_list" nodeRef={nodeRef}>
         {Array.from(providersMap.values()).map((provider: PewPewProvider) => (
-          <CSSTransition key={provider.id} timeout={300} classNames="load">
+          <CSSTransition key={provider.id} timeout={300} classNames="load" nodeRef={nodeRef}>
             <ProviderTypes
               deleteProvider={props.deleteProvider}
               changeProvider={props.changeProvider}