fix wiki tree item

SeedCompany · Dec 17, 2024 · 095ac93 · 095ac93
1 parent 6ebd5cc
commit 095ac93
Showing 1 changed file with 33 additions and 23 deletions.
diff --git a/src/scenes/ProgressReports/PnpValidation/PnPExtractionProblems.tsx b/src/scenes/ProgressReports/PnpValidation/PnPExtractionProblems.tsx
@@ -5,7 +5,7 @@ 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 +17,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 +64,9 @@ export const PnPExtractionProblems = memo(function PnPExtractionProblems({
               planned goals.
             </Alert>
           )}
-          <SimpleTreeView>
+          <SimpleTreeView
+            itemChildrenIndentation={TREE_ITEM_CHILDREN_INDENTATION}
+          >
             <ProblemList groupIndex={1} problems={problems} />
           </SimpleTreeView>
         </TabPanel>
@@ -99,27 +103,33 @@ export const ProblemList = memo(function ProblemList({
           </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) => (
+          <Fragment key={problem.id}>
+            {idx === 0 && problem.documentation && (
+              <TreeItem
+                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>
+                }
+              />
+            )}
+            <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>
+              }
+            />
+          </Fragment>
         ));
       }
     }