Updated additional dependencies

- Updated eslint-typescript to 6.0 and ran lint
- Updated chart.js and styled-components

guide/results-viewer-react/.eslintrc

@@ -9,8 +9,8 @@
   ],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/stylistic"
   ],
   "ignorePatterns": ["hdr-histogram-wasm/", "webpack.config.js"],
   "rules": {

guide/results-viewer-react/package.json

@@ -29,7 +29,7 @@
   "homepage": "https://github.com/FamilySearch/pewpew/tree/master/lib/config-wasm#readme",
   "dependencies": {
     "@fs/hdr-histogram-wasm": "file:./lib/hdr-histogram-wasm",
-    "chart.js": "~4.2.0",
+    "chart.js": "~4.3.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "date-fns": "^2.29.3",
     "file-saver": "^2.0.5",
@@ -40,7 +40,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-transition-group": "^4.4.5",
-    "styled-components": "^5.3.6"
+    "styled-components": "^6.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -61,12 +61,10 @@
     "@types/react-dom": "^18.0.10",
     "@types/react-transition-group": "^4.4.5",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.49.0",
-    "@typescript-eslint/parser": "^5.49.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "babel-loader": "^9.1.2",
     "eslint": "^8.32.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.0",
     "storybook": "^7.1.1",
     "ts-loader": "^9.4.2",

guide/results-viewer-react/src/YamlWriter.tsx

@@ -69,9 +69,9 @@ html {
 }
 `;
 
-export type YamlWriterState = {
+export interface YamlWriterState {
   endpoints: HarEndpoint[];
-};
+}
 
 export const YamlWriter = () => {
   const defaultState: YamlWriterState = {

guide/results-viewer-react/src/components/TestResults/charts.ts

@@ -185,11 +185,11 @@ export function RTT (el: HTMLCanvasElement, dataPoints: DataPoint[]): Chart {
 }
 
 class ChartDataSets {
-  public dataSets: Map<
+  public dataSets = new Map<
     string,
     [Map<Date, number>, ChartDataset]
-  > = new Map();
-  public dates: Set<Date> = new Set();
+  >();
+  public dates = new Set<Date>();
 
   public setPoint (
     key: string,
@@ -235,7 +235,7 @@ export function totalCalls (el: HTMLCanvasElement, dataPoints: DataPoint[]): Cha
   for (const dp of dataPoints) {
     const x = dp.time;
     const statusCounts = Object.entries(dp.statusCounts).map(
-      ([k, v]) => <[string, number]>[k + " count", v]
+      ([k, v]) => [k + " count", v] as [string, number]
     );
     const pairs = [...statusCounts, ...Object.entries(dp.testErrors)];
     for (const [key, count] of pairs) {

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

@@ -200,7 +200,7 @@ const freeHistograms = (resultsData: ParsedFileEntry[] | undefined, summaryData:
 };
 
 const mergeAllDataPoints = (...dataPoints: DataPoint[]): DataPoint[] => {
-  const combinedData: Map<number, DataPoint> = new Map();
+  const combinedData = new Map<number, DataPoint>();
 
   for (const dp of dataPoints) {
     const dp2 = combinedData.get(Number(dp.time));
@@ -469,7 +469,7 @@ const total = (dataPoints: DataPoint[]) => {
     requestTimeouts += dp.requestTimeouts;
   }
 
-  const statusAmount: Array<[string, number, number?]> = Object.entries(
+  const statusAmount: [string, number, number?][] = Object.entries(
     statusCounts
   ).sort(([a], [b]) => parseInt(a, 10) - parseInt(b, 10));
   for (const stat of statusAmount) {

guide/results-viewer-react/src/components/TestResults/model.ts

@@ -105,7 +105,7 @@ function asBucketId (b: unknown): BucketId | Error {
   if (result) {
     return new Error("failed property check for bucket id. " + result);
   } else {
-    return <BucketId>b;
+    return b as BucketId;
   }
 }
 
@@ -216,7 +216,7 @@ function asDataPointPreProcessed (dp: unknown): DataPointPreProcessed | Error {
   if (result) {
     return new Error("failed property check for data point. " + result);
   } else {
-    return <DataPointPreProcessed>dp;
+    return dp as DataPointPreProcessed;
   }
 }
 
@@ -252,7 +252,7 @@ function asBucketEntry (b: unknown): BucketEntry | Error {
       return result;
     }
   }
-  return <BucketEntry>b;
+  return b as BucketEntry;
 }
 
 interface StatsFile {
@@ -264,22 +264,21 @@ function asStatsFile (s: unknown): StatsFile | Error {
     return new Error("stats is not an object");
   }
 
-  // tslint:disable-next-line: no-unbound-method
-  const checks: Check[] = [["buckets", Array.isArray]];
+   const checks: Check[] = [["buckets", Array.isArray]];
   {
     const result = propertyChecker(s, checks);
     if (result) {
       return new Error("failed property check for stats. " + result);
     }
   }
-  const buckets: unknown[] = (<any>s).buckets;
+  const buckets: unknown[] = (s as any).buckets;
   for (const b of buckets) {
     const result = asBucketEntry(b);
     if (result instanceof Error) {
       return result;
     }
   }
-  return <StatsFile>s;
+  return s as StatsFile;
 }
 
 export type ParsedFileEntry = [BucketId, DataPoint[]];

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

@@ -294,8 +294,8 @@ export const LoggerModal = forwardRef(({ onClose, changeLogger, data }: LoggerMo
       stateVariable: string;
       returnTypeArray: LoggerSelectEntryDisplay[];
     } | undefined;
-    for (let i = 0; i < loggerOptions.length; i++) {
-      if (loggerOptions[i].type === dataType) { loggerArray = loggerOptions[i]; }
+    for (const loggerOption of loggerOptions) {
+      if (loggerOption.type === dataType) { loggerArray = loggerOption; }
     }
     log("headerClick", LogLevel.DEBUG, { dataType, loggerArray, newChecked });
     if (!loggerArray) {

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

@@ -162,10 +162,10 @@ interface ParsedEndpoint extends Omit<HarEndpoint, "url"> {
   url: URL;
 }
 
-type IndexType = {
+interface IndexType {
   iter: number,
   id: string
-};
+}
 
 export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
   const defaultState: YamlWriterUploadState = {
@@ -307,8 +307,8 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
     for (const key of typeKeys ) {
     let typeCheck = 0;
     const type = types[key]!;
-      for (let i = 0; i < type.index.length; i++) {
-         if (indices[type.index[i].iter].selected === "yes") { typeCheck++; }
+      for (const typeIndex of type.index) {
+         if (indices[typeIndex.iter].selected === "yes") { typeCheck++; }
       }
        if (typeCheck === type.index.length) { typesTemp[key]!.selected = "yes"; }
        else if (typeCheck === 0) { typesTemp[key]!.selected = "no"; }
@@ -374,8 +374,8 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
       const url: OutputRecord | undefined = outputName.urls[key];
       const urlTemp = urlsTemp[key];
       if (!url || !urlTemp) { continue; }
-      for (let i = 0; i < url.index.length; i++) {
-        if (indices[url.index[i].iter].selected === "yes") { urlCheck++; }
+      for (const urlIndex of url.index) {
+        if (indices[urlIndex.iter].selected === "yes") { urlCheck++; }
       }
       if (urlCheck === url.index.length) { urlTemp.selected = "yes"; }
       else if (urlCheck === 0) { urlTemp.selected = "no"; }
@@ -387,8 +387,8 @@ export const YamlWriterUpload = (props: YamlWriterUploadProps) => {
       const type = outputName.types[key];
       const typeTemp = typesTemp[key];
       if (!type || !typeTemp) { continue; }
-      for (let i = 0; i < type.index.length; i++) {
-        if (indices[type.index[i].iter].selected === "yes") { typeCheck++; }
+      for (const typeIndex of type.index) {
+        if (indices[typeIndex.iter].selected === "yes") { typeCheck++; }
       }
       if (typeCheck === type.index.length) { typeTemp.selected = "yes"; }
       else if (typeCheck === 0) { typeTemp.selected = "no"; }