Adds prop for row to also show code or a list

src/components/Form/Row.tsx

@@ -11,11 +11,14 @@ export interface RowProps {
   rowList?: RowProps[],
   title?: string,
   open?: boolean,
+  plaintext?: string,
+  listResults?: string[],
 }
 
 export const StyledRow = styled.div`
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   padding: 0.25rem;
   &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
   span.lbl { font-weight: bold; }
@@ -38,6 +41,7 @@ export const Details = styled.details`
   transition: all 0.2s ease-in-out;
   summary {
     padding-left: 1rem;
+    cursor: pointer;
   }
   summary:before {
     content: "►";
@@ -63,6 +67,37 @@ const SubRow = styled(StyledRow).attrs({
   border-bottom: 1px dashed ${colors.primaryTransparent} !important;
 `;
 
+const PlainText = styled.pre`
+  background: ${colors.background};
+  width: 95%;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  border-radius: 4px;
+  padding: 0.25rem;
+`;
+
+const List = styled.ul`
+  // background: ${colors.background};
+  width: 95%;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  border-radius: 4px;
+  margin: 0;
+  padding: 0.25rem 0.25rem 0.25rem 1rem;
+  li {
+    // white-space: nowrap;
+    // overflow: hidden;
+    text-overflow: ellipsis;
+    list-style: circle;
+    &:first-letter{
+      text-transform: capitalize
+    }
+    &::marker {
+      color: ${colors.primary};
+    }
+  }
+`;
+
 const isValidDate = (date: any): boolean => {
   // Checks if a date is within reasonable range
   const isInRange = (date: Date): boolean => {
@@ -106,6 +141,11 @@ const copyToClipboard = (text: string) => {
   navigator.clipboard.writeText(text);
 }
 
+const snip = (text: string, length: number = 80) => {
+  if (text.length < length) return text;
+  return `${text.substring(0, length)}...`;
+};
+
 export const ExpandableRow = (props: RowProps) => {
   const { lbl, val, title, rowList, open } = props;
   return (
@@ -123,6 +163,12 @@ export const ExpandableRow = (props: RowProps) => {
                 <span className="val" title={row.val} onClick={() => copyToClipboard(row.val)}>
                   {formatValue(row.val)}
                 </span>
+                { row.plaintext && <PlainText>{row.plaintext}</PlainText> }
+                { row.listResults && (<List>
+                  {row.listResults.map((listItem: string, listIndex: number) => (
+                    <li key={listItem}>{snip(listItem)}</li>
+                  ))}
+                </List>)}
               </SubRow>
             )
           })}
@@ -149,7 +195,7 @@ export const ListRow = (props: { list: string[], title: string }) => {
 }
 
 const Row = (props: RowProps) => {
-  const { lbl, val, title, children } = props;
+  const { lbl, val, title, plaintext, listResults, children } = props;
   if (children) return <StyledRow key={`${lbl}-${val}`}>{children}</StyledRow>;
   return (
   <StyledRow key={`${lbl}-${val}`}>
@@ -157,6 +203,12 @@ const Row = (props: RowProps) => {
     <span className="val" title={val} onClick={() => copyToClipboard(val)}>
       {formatValue(val)}
     </span>
+    { plaintext && <PlainText>{plaintext}</PlainText> }
+    { listResults && (<List>
+      {listResults.map((listItem: string, listIndex: number) => (
+        <li key={listIndex} title={listItem}>{snip(listItem)}</li>
+      ))}
+    </List>)}
   </StyledRow>
   );
 };