Guide updates scripting

controller/.storybook/main.ts

@@ -20,22 +20,22 @@ const config: StorybookConfig = {
       propFilter: prop => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true
     }
   },
-  webpackFinal: (config: Configuration) => {
-    if (!config.resolve) { config.resolve = {}; }
-    config.resolve.fallback = {
-      ...(config.resolve.fallback || {}),
+  webpackFinal: (webpackConfig: Configuration) => {
+    if (!webpackConfig.resolve) { webpackConfig.resolve = {}; }
+    webpackConfig.resolve.fallback = {
+      ...(webpackConfig.resolve.fallback || {}),
       "fs": false,
       "util": false,
       "path": false,
       "assert": false,
-      "crypto": false,
+      "crypto": false
     };
-    if (!config.experiments) { config.experiments = {}; }
-    config.experiments.asyncWebAssembly = true;
-    if (!config.output) { config.output = {}; }
+    if (!webpackConfig.experiments) { webpackConfig.experiments = {}; }
+    webpackConfig.experiments.asyncWebAssembly = true;
+    if (!webpackConfig.output) { webpackConfig.output = {}; }
     // config.output.publicPath = "/";
-    config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm';
-    return config;
+    webpackConfig.output.webassemblyModuleFilename = "static/wasm/[modulehash].wasm";
+    return webpackConfig;
   },
   framework: {
     name: "@storybook/nextjs",

controller/.storybook/preview.js

@@ -5,8 +5,8 @@ import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtim
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   nextRouter: {
-    Provider: RouterContext.Provider,
-  },
+    Provider: RouterContext.Provider
+  }
   // Can't get this to work
   // https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/
   // nextjs: {

controller/.storybook/tsconfig.json

@@ -17,6 +17,8 @@
     "jsx": "react"
   },
   "include": [
+    "./*.ts",
+    "./*.js",
     "../types/**/*.ts",
     "../components/**/*.ts",
     "../components/**/*.tsx"

controller/components/Layout/index.tsx

@@ -4,8 +4,7 @@ import {
   PAGE_ADMIN,
   PAGE_CALENDAR,
   PAGE_START_TEST,
-  PAGE_TEST_HISTORY,
-  PAGE_YAML_WRITER
+  PAGE_TEST_HISTORY
 } from "../../types";
 import { Button, LinkButton, defaultButtonTheme } from "../LinkButton";
 import React, { useEffect } from "react";
@@ -20,6 +19,8 @@ import getConfig from "next/config";
 const publicRuntimeConfig: any = getConfig() && getConfig().publicRuntimeConfig ? getConfig().publicRuntimeConfig : process.env;
 const HIDE_ENVIRONMENT: unknown = publicRuntimeConfig.HIDE_ENVIRONMENT;
 
+export const PAGE_YAML_WRITER: string = "https://familysearch.github.io/pewpew/results-viewer-react/yaml.html";
+
 export type OtherControllers = Record<string, {
     url: string;
     hover?: string;
@@ -154,7 +155,7 @@ export const Layout = ({
             <LinkButton href={PAGE_CALENDAR} title="View the test calendar">Calendar</LinkButton>
           </LinkDiv>
           <LinkDiv>
-            <LinkButton href={PAGE_YAML_WRITER} title="Convert a HAR file to a YAML load test">Yaml Writer</LinkButton>
+            <LinkButton href={PAGE_YAML_WRITER} title="Create a PewPew YAML load test" target="_blank">Yaml Writer</LinkButton>
           </LinkDiv>
           {authPermission === AuthPermission.Admin &&
             <LinkDiv>

controller/components/LinkButton/index.tsx

@@ -24,6 +24,7 @@ export const defaultButtonTheme: LinkButtonTheme = { buttonFontSize: ".8rem", bu
 export interface LinkButtonProps {
   name?: string;
   href: string;
+  target?: string;
   title?: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   theme?: LinkButtonTheme;
@@ -33,6 +34,7 @@ export interface LinkButtonProps {
 export const LinkButton = ({
   name,
   href,
+  target,
   title,
   onClick,
   theme,
@@ -41,8 +43,8 @@ export const LinkButton = ({
   return (
     <React.Fragment>
       {/* https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor */}
-      <Link href={href} as={formatPageHref(href)} title={title} legacyBehavior>
-        <a href={formatPageHref(href)} title={title}>
+      <Link href={href} as={formatPageHref(href)} title={title} passHref legacyBehavior>
+        <a href={formatPageHref(href)} title={title} target={target}>
           <Button name={name} theme={{...defaultButtonTheme, ...theme}} onClick={onClick}>{children}</Button>
         </a>
       </Link>