WIP: Migrate to fast-xml-parser

The `xml2js-parser` package hasn't been updated in 6 years, so it's time
to move to a more up-to-date alternative. `fast-xml-parser` looks fairly
decent, has TypeScript declarations built-in and will allow us to debug
and iterate faster on changes in the future.

Closes #10

package.json

@@ -24,6 +24,7 @@
     "axios": "^1.3.4",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
+    "fast-xml-parser": "^4.0.13",
     "graphql": "^16.6.0",
     "immutability-helper": "^3.1.1",
     "linkify-react": "^4.1.0",
@@ -42,8 +43,7 @@
     "typescript": "^4.9.5",
     "uuid": "^9.0.0",
     "validator": "^13.9.0",
-    "web-vitals": "^3.1.1",
-    "xml2js-parser": "^1.1.1"
+    "web-vitals": "^3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/TestSuites.tsx

@@ -104,45 +104,50 @@ const TestSuitesInternal: React.FC<TestSuitesInternalProps> = (props) => {
 };
 
 const mkLogLink = (log: TestCaseLogsEntry): JSX.Element => (
-    <ExternalLink href={log.$.href} key={log.$.name}>
-        {log.$.name}
+    <ExternalLink href={log.$href} key={log.$name}>
+        {log.$name}
     </ExternalLink>
 );
 
 interface LogsLinksProps {
-    logs: TestCaseLogs[];
+    logs?: TestCaseLogsEntry | TestCaseLogsEntry[];
 }
 
 const LogsLinks: React.FC<LogsLinksProps> = ({ logs }) => {
-    if (!logs || _.isEmpty(logs[0].log)) return null;
+    if (!logs || _.isEmpty(logs)) return null;
+    if (!_.isArray(logs)) logs = [logs];
     const logsLinks = mkSeparatedList(mkLogsLinks(logs));
     return <p>Log files: {logsLinks}</p>;
 };
 
-const mkLogsLinks = (logs: TestCaseLogs[]): JSX.Element[] => {
-    /** logs[0].log - [log1, log2, log3] */
-    if (!logs[0] || _.isEmpty(logs[0].log)) return [];
-    return _.map(logs[0].log, (log) => mkLogLink(log));
+const mkLogsLinks = (logs: TestCaseLogsEntry[] | undefined): JSX.Element[] => {
+    if (!logs || _.isEmpty(logs)) return [];
+    return _.map(logs, (log) => mkLogLink(log));
 };
 
 const mkPhase = (phase: TestCasePhasesEntry): IRow => {
+    const logs = _.isArray(phase.logs?.log)
+        ? phase.logs?.log
+        : phase.logs?.log
+        ? [phase.logs?.log]
+        : [];
     return {
         cells: [
-            <TestStatusIcon status={phase.$.result} />,
-            phase.$.name,
-            mkSeparatedList(mkLogsLinks(phase.logs)),
+            <TestStatusIcon status={phase.$result} />,
+            phase.$name,
+            mkSeparatedList(mkLogsLinks(logs)),
         ],
-        key: phase.$.name,
+        key: phase.$name,
     };
 };
 
 interface PhasesProps {
-    phases?: TestCasePhases[];
+    phases?: TestCasePhasesEntry[];
 }
 
 const Phases: React.FC<PhasesProps> = ({ phases }) => {
-    if (!phases || _.isEmpty(phases[0]?.phase)) return null;
-    const rows: IRow[] = _.map(phases[0].phase, (phase) => mkPhase(phase));
+    if (_.isEmpty(phases)) return null;
+    const rows: IRow[] = _.map(phases, (phase) => mkPhase(phase));
     return (
         <Table
             aria-label="Table of individual phases within this test"
@@ -164,9 +169,9 @@ const Phases: React.FC<PhasesProps> = ({ phases }) => {
 
 const mkTestOutput = (output: TestCaseTestOutputsEntry): IRow => ({
     cells: [
-        <>{output.$.result}</>,
-        <>{output.$.message}</>,
-        <>{output.$.remedy}</>,
+        <>{output.$result}</>,
+        <>{output.$message}</>,
+        <>{output.$remedy}</>,
     ],
 });
 
@@ -208,7 +213,7 @@ const TestCaseContent: React.FC<TestCaseContentProps> = (props) => {
     return (
         <>
             <OutputsTable outputs={test['test-outputs']} />
-            <Phases phases={test.phases} />
+            <Phases phases={test.phases?.phase} />
         </>
     );
 };
@@ -285,7 +290,7 @@ const TestCaseItem: React.FC<TestCaseItemProps> = (props) => {
                         </FlexItem>
                     )}
                 </Flex>
-                <LogsLinks logs={test.logs} />
+                <LogsLinks logs={test.logs?.log} />
             </Flex>
         </DataListCell>
     );