chore(frontend): Upgrade vulnerable frontend packages

frontend/.nvmrc

@@ -1 +1 @@
-v22.14.0
+v22.19.0

frontend/src/lib/CompareUtils.ts

@@ -40,17 +40,16 @@ export default class CompareUtils {
       logger.error('Numbers of passed in runs and workflows do not match');
     }
 
-    const yLabels = chain(flatten(workflowObjects.map(w => WorkflowParser.getParameters(w))))
-      .countBy(p => p.name) // count by parameter name
-      .map((k, v) => ({ name: v, count: k })) // convert to counter objects
+    const yLabels = (chain(flatten(workflowObjects.map(w => WorkflowParser.getParameters(w))))
+      .countBy((p: { name: string }) => p.name) // count by parameter name
+      .map((k: number, v: string) => ({ name: v, count: k })) // convert to counter objects
       .orderBy('count', 'desc') // sort on count field, descending
-      .map(o => o.name)
-      .value();
+      .map((o: { name: string; count: number }) => o.name) as any).value();
 
-    const rows = yLabels.map(name => {
+    const rows = yLabels.map((name: string) => {
       return workflowObjects.map(w => {
         const params = WorkflowParser.getParameters(w);
-        const param = params.find(p => p.name === name);
+        const param = params.find((p: { name: string }) => p.name === name);
         return param ? param.value || '' : '';
       });
     });

frontend/src/lib/v2/CompareUtils.ts

@@ -19,7 +19,7 @@ import { getArtifactName, getExecutionDisplayName, LinkedArtifact } from 'src/ml
 import { getMetadataValue } from 'src/mlmd/Utils';
 import { Execution, Value } from 'src/third_party/mlmd';
 import * as jspb from 'google-protobuf';
-import { chain, flatMapDeep, flatten } from 'lodash';
+import { flatMapDeep } from 'lodash';
 import { stylesheet } from 'typestyle';
 import { RuntimeParameters } from 'src/pages/NewRunV2';
 import { V2beta1Run } from 'src/apisv2beta1/run';
@@ -105,12 +105,16 @@ export const getParamsTableProps = (runs: V2beta1Run[]): CompareTableProps | und
     }
   }
 
-  const yLabels = chain(flatten(parameterNames))
-    .countBy(p => p) // count by parameter name
-    .map((k, v) => ({ name: v, count: k })) // convert to counter objects
-    .orderBy('count', 'desc') // sort on count field, descending
-    .map(o => o.name)
-    .value();
+  const flattenedNames = parameterNames.flat();
+  const counts = flattenedNames.reduce((acc, name: string) => {
+    acc[name] = (acc[name] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const yLabels: string[] = Object.entries(counts)
+    .map(([name, count]) => ({ name, count }))
+    .sort((a, b) => b.count - a.count)
+    .map(o => o.name);
 
   const rows: string[][] = yLabels.map(yLabel => {
     return runs.map(run => {
@@ -139,7 +143,7 @@ export const getValidRocCurveArtifactData = (
 ): RocCurveArtifactData => {
   const validRocCurveIdSet: Set<string> = new Set();
   const fullArtifactPathMap: FullArtifactPathMap = {};
-  const validLinkedArtifacts = flatMapDeep(
+  const validLinkedArtifacts: LinkedArtifact[] = flatMapDeep(
     rocCurveRunArtifacts.map(runArtifact =>
       runArtifact.executionArtifacts.map(executionArtifact => {
         const validArtifacts = getValidArtifacts(executionArtifact);
@@ -157,7 +161,8 @@ export const getValidRocCurveArtifactData = (
         return validArtifacts;
       }),
     ),
-  );
+  ) as LinkedArtifact[];
+
   return {
     validLinkedArtifacts,
     fullArtifactPathMap,

frontend/src/mlmd/LineageView.tsx

@@ -254,14 +254,13 @@ export class LineageView extends React.Component<LineageViewProps, LineageViewSt
   }
 
   private buildExecutionCards(executions: Execution[]): CardDetails[] {
-    const executionsByTypeId = groupBy(executions, e => e.getTypeId());
-
+    const executionsByTypeId = groupBy(executions, (e: Execution) => e.getTypeId());
     return Object.keys(executionsByTypeId).map(typeId => {
       const executionTypeName = getExecutionTypeName(Number(typeId), this.executionTypes);
       const executionsForType = executionsByTypeId[typeId];
       return {
         title: executionTypeName,
-        elements: executionsForType.map(execution => ({
+        elements: executionsForType.map((execution: Execution) => ({
           typedResource: {
             type: 'execution',
             resource: execution,

frontend/src/pages/RunDetails.tsx

@@ -967,7 +967,7 @@ class RunDetails extends Page<RunDetailsInternalProps, RunDetailsState> {
         ),
       ),
     );
-    const allArtifactConfigs = flatten(configLists);
+    const allArtifactConfigs: AnnotatedConfig[] = flatten(configLists) as AnnotatedConfig[];
 
     this.setStateSafe({ allArtifactConfigs });
   }

frontend/src/setupTests.ts

@@ -19,6 +19,12 @@
 
 import * as Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import { TextEncoder, TextDecoder } from 'util';
+
+Object.assign(global, {
+  TextEncoder: globalThis.TextEncoder || TextEncoder,
+  TextDecoder: globalThis.TextDecoder || TextDecoder,
+});
 
 Enzyme.configure({
   adapter: new Adapter(),