refactor ProblemList

src/scenes/ProgressReports/PnpValidation/PnPExtractionProblems.tsx

@@ -1,11 +1,12 @@
 import { Error, Feedback, Warning } from '@mui/icons-material';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { Alert, Box, Stack, Tab, Typography } from '@mui/material';
+import { TreeItemProps } from '@mui/x-tree-view';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem2 as TreeItem } from '@mui/x-tree-view/TreeItem2';
 import { cmpBy, groupToMapBy } from '@seedcompany/common';
 import Markdown, { MarkdownToJSX } from 'markdown-to-jsx';
-import { memo, useState } from 'react';
+import { Fragment, memo, useState } from 'react';
 import { PnpProblemSeverity as Severity } from '~/api/schema.graphql';
 import { InlineCode } from '../../../components/Debug';
 import { FormattedNumber } from '../../../components/Formatters';
@@ -17,6 +18,8 @@ import {
 
 const priority = ['Error', 'Warning', 'Notice'] satisfies Severity[];
 
+const TREE_ITEM_CHILDREN_INDENTATION = 48;
+
 export const PnPExtractionProblems = memo(function PnPExtractionProblems({
   result,
   engagement,
@@ -62,7 +65,9 @@ export const PnPExtractionProblems = memo(function PnPExtractionProblems({
               planned goals.
             </Alert>
           )}
-          <SimpleTreeView>
+          <SimpleTreeView
+            itemChildrenIndentation={TREE_ITEM_CHILDREN_INDENTATION}
+          >
             <ProblemList groupIndex={1} problems={problems} />
           </SimpleTreeView>
         </TabPanel>
@@ -78,49 +83,72 @@ export const ProblemList = memo(function ProblemList({
   problems: readonly Problem[];
   groupIndex: number;
 }) {
+  const renderCurrentNode = (
+    group: string,
+    severity: Severity,
+    problems: readonly Problem[]
+  ) =>
+    groupIndex === 1 ? (
+      <Stack direction="row" gap={1} alignItems="center">
+        <SeverityIcon severity={severity} />
+        <Markdown options={mdOptions}>{group}</Markdown>
+        <FormattedNumber value={problems.length} />
+      </Stack>
+    ) : (
+      <Markdown options={mdOptions}>{group}</Markdown>
+    );
+
+  const renderProblem = (problem: Problem, severity: Severity, idx: number) => {
+    if (groupIndex === 1 && problems.length === 1) {
+      return (
+        <Leaf
+          key={problem.id}
+          problem={problem}
+          groupIndex={groupIndex}
+          severity={severity}
+          children={
+            problem.documentation
+              ? [<Doc key={problem.id} {...problem} />]
+              : undefined
+          }
+        />
+      );
+    } else if (idx === 0 && problem.documentation) {
+      return (
+        <Fragment key={problem.id}>
+          <Doc {...problem} />
+          <Leaf problem={problem} groupIndex={groupIndex} severity={severity} />
+        </Fragment>
+      );
+    } else {
+      return (
+        <Leaf
+          key={problem.id}
+          problem={problem}
+          groupIndex={groupIndex}
+          severity={severity}
+        />
+      );
+    }
+  };
+
   return [...groupToMapBy(problems, (p) => p.groups[groupIndex])].map(
     ([group, problems]) => {
       const { severity } = problems[0]!;
       if (group && (groupIndex === 1 || problems.length > 1)) {
-        const currentNode =
-          groupIndex === 1 ? (
-            <Stack direction="row" gap={1} alignItems="center">
-              <SeverityIcon severity={severity} />
-              <Markdown options={mdOptions}>{group}</Markdown>
-              (<FormattedNumber value={problems.length} />)
-            </Stack>
-          ) : (
-            <Markdown options={mdOptions}>{group}</Markdown>
-          );
-
         return (
-          <TreeItem key={group} itemId={group} label={currentNode}>
+          <TreeItem
+            key={group}
+            itemId={group}
+            label={renderCurrentNode(group, severity, problems)}
+          >
             <ProblemList problems={problems} groupIndex={groupIndex + 1} />
           </TreeItem>
         );
       } else {
-        return problems.map((problem) => (
-          <TreeItem
-            key={problem.id}
-            itemId={problem.id}
-            label={
-              <Stack direction="row" gap={1} alignItems="center">
-                {groupIndex === 1 && <SeverityIcon severity={severity} />}
-                <div>
-                  <Markdown options={mdOptions}>{problem.message}</Markdown>
-                  {problem.documentation && (
-                    <Typography color="text.secondary" sx={{ mt: 1 }}>
-                      For more information see the PnP Troubleshooting{' '}
-                      <Link external to={problem.documentation} target="_blank">
-                        Guide
-                      </Link>
-                    </Typography>
-                  )}
-                </div>
-              </Stack>
-            }
-          />
-        ));
+        return problems.map((problem, idx) =>
+          renderProblem(problem, severity, idx)
+        );
       }
     }
   );
@@ -147,3 +175,42 @@ const SeverityIcon = ({ severity }: { severity: Severity }) => {
 
   return null;
 };
+
+const Leaf = ({
+  problem,
+  groupIndex,
+  severity,
+  ...props
+}: Omit<TreeItemProps, 'itemId'> & {
+  problem: Problem;
+  groupIndex: number;
+  severity: Severity;
+}) => (
+  <TreeItem
+    itemId={problem.id}
+    label={
+      <Stack direction="row" gap={1} alignItems="center">
+        {groupIndex === 1 && <SeverityIcon severity={severity} />}
+        <div>
+          <Markdown options={mdOptions}>{problem.message}</Markdown>
+        </div>
+      </Stack>
+    }
+    {...props}
+  />
+);
+
+const Doc = (problem: Problem) => (
+  <TreeItem
+    key={`${problem.id}-doc`}
+    itemId={`${problem.id}-doc`}
+    label={
+      <Typography color="text.secondary">
+        For more information see the PnP Troubleshooting{' '}
+        <Link external to={problem.documentation!} target="_blank">
+          Guide
+        </Link>
+      </Typography>
+    }
+  />
+);