Writes get robots, refactors row to be reusable, adds loading progress logic

src/components/Form/Heading.tsx

@@ -17,10 +17,14 @@ const StyledHeading = styled.h1<HeadingProps>`
   display: flex;
   gap: 1rem;
   align-items: center;
-  img {
+  img { // Some titles have an icon
     width: 2rem;
     border-radius: 4px;
   }
+  a { // If a title is a link, keep title styles
+    color: inherit;
+    text-decoration: none;
+  }
   ${props => {
     switch (props.size) {
       case 'xSmall': return `font-size: ${TextSizes.small};`;

src/components/Form/Row.tsx

@@ -1,21 +1,23 @@
 import styled from 'styled-components';
 import colors from 'styles/colors';
 
-interface RowProps {
+export interface RowProps {
   lbl: string,
   val: string,
   key?: string,
+  children?: JSX.Element[],
   rowList?: RowProps[],
+  title?: string,
 }
 
-const StyledRow = styled.div`
+export const StyledRow = styled.div`
   display: flex;
   justify-content: space-between;
   padding: 0.25rem;
   &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
   span.lbl { font-weight: bold; }
   span.val {
-    max-width: 200px;
+    max-width: 16rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -64,7 +66,6 @@ const formatDate = (dateString: string): string => {
 const formatValue = (value: any): string => {
   const isValidDate = (date: any) => date instanceof Date && !isNaN(date as any as number);
   if (isValidDate(new Date(value))) return formatDate(value);
-  if (typeof value === 'object') return JSON.stringify(value);
   if (typeof value === 'boolean') return value ? '✅' : '❌';
   return value;
 };
@@ -74,11 +75,11 @@ const copyToClipboard = (text: string) => {
 }
 
 export const ExpandableRow = (props: RowProps) => {
-  const { lbl, val, rowList } = props;
+  const { lbl, val, key, title, rowList } = props;
   return (
     <Details>
-      <StyledExpandableRow>
-        <span className="lbl">{lbl}</span>
+      <StyledExpandableRow key={key}>
+        <span className="lbl" title={title}>{lbl}</span>
         <span className="val" title={val}>{val}</span>
       </StyledExpandableRow>
       { rowList &&
@@ -86,7 +87,7 @@ export const ExpandableRow = (props: RowProps) => {
           { rowList?.map((row: RowProps, index: number) => {
             return (
               <SubRow key={row.key || `${row.lbl}-${index}`}>
-                <span className="lbl">{row.lbl}</span>
+                <span className="lbl" title={row.title}>{row.lbl}</span>
                 <span className="val" title={row.val} onClick={() => copyToClipboard(row.val)}>
                   {formatValue(row.val)}
                 </span>
@@ -100,10 +101,11 @@ export const ExpandableRow = (props: RowProps) => {
 };
 
 const Row = (props: RowProps) => {
-  const { lbl, val, key } = props;
+  const { lbl, val, key, title, children } = props;
+  if (children) return <StyledRow key={key}>{children}</StyledRow>;
   return (
   <StyledRow key={key}>
-    <span className="lbl">{lbl}</span>
+    <span className="lbl" title={title}>{lbl}</span>
     <span className="val" title={val} onClick={() => copyToClipboard(val)}>
       {formatValue(val)}
     </span>

src/components/Results/Cookies.tsx

@@ -3,17 +3,18 @@ import styled from 'styled-components';
 import colors from 'styles/colors';
 import Card from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
-import Row, { ExpandableRow } from 'components/Form/Row';
+import { ExpandableRow } from 'components/Form/Row';
 
 const Outer = styled(Card)``;
 
 const CookiesCard = (props: { cookies: any }): JSX.Element => {
   const cookies = props.cookies;
-  console.log('COOKIES: ', cookies);
   return (
     <Outer>
       <Heading as="h3" size="small" align="left" color={colors.primary}>Cookies</Heading>
-      {/* { subject && <DataRow lbl="Subject" val={subject?.CN} /> } */}
+      {
+        cookies.length === 0 && <p>No cookies found.</p>
+      }
       {
         cookies.map((cookie: any, index: number) => {
           const attributes = Object.keys(cookie.attributes).map((key: string) => {

src/components/Results/Headers.tsx

@@ -3,35 +3,12 @@ import styled from 'styled-components';
 import colors from 'styles/colors';
 import Card from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
+import Row from 'components/Form/Row';
 
 const Outer = styled(Card)`
   grid-row: span 2;
 `;
 
-const Row = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0.25rem;
-  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
-  span.lbl { font-weight: bold; }
-  span.val {
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-const DataRow = (props: { lbl: string, val: string }) => {
-  const { lbl, val } = props;
-  return (
-  <Row>
-    <span className="lbl">{lbl}</span>
-    <span className="val" title={val}>{val}</span>
-  </Row>
-  );
-};
-
 const HeadersCard = (props: { headers: any }): JSX.Element => {
   const headers = props.headers;
   return (
@@ -40,7 +17,7 @@ const HeadersCard = (props: { headers: any }): JSX.Element => {
       {
         Object.keys(headers).map((header: string, index: number) => {
           return (
-            <DataRow key={`header-${index}`} lbl={header} val={headers[header]} />
+            <Row key={`header-${index}`} lbl={header} val={headers[header]} />
           )
         })
       }      

src/components/Results/Lighthouse.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import colors from 'styles/colors';
 import Card from 'components/Form/Card';
 import Heading from 'components/Form/Heading';
+import { ExpandableRow } from 'components/Form/Row';
 
 const processScore = (percentile: number) => {
   return `${Math.round(percentile * 100)}%`;
@@ -78,23 +79,14 @@ const ScoreItem = (props: { scoreId: any, audits: Audit[] }) => {
   );
 };
 
-const ExpandableRow = (props: { lbl: string, val: string, list: string[], audits: Audit[] }) => {
-  const { lbl, val, list, audits } = props;
-  return (
-  <Row>
-    <details>
-      <summary>
-        <span className="lbl">{lbl}</span>
-        <span className="val" title={val}>{val}</span>
-      </summary>
-      <ScoreList>
-        { list.map((li: string) => {
-          return <ScoreItem scoreId={li} audits={audits} />
-        }) }
-      </ScoreList>
-    </details>  
-  </Row>
-  );
+const makeValue = (audit: Audit) => {
+  let score = audit.score;
+  if (audit.displayValue) {
+    score = audit.displayValue;
+  } else if (audit.scoreDisplayMode) {
+    score = audit.score === 1 ? '✅ Pass' : '❌ Fail'; 
+  }
+  return score;
 };
 
 const LighthouseCard = (props: { lighthouse: any }): JSX.Element => {
@@ -106,13 +98,15 @@ const LighthouseCard = (props: { lighthouse: any }): JSX.Element => {
       <Heading as="h3" size="small" align="left" color={colors.primary}>Performance</Heading>
       { Object.keys(categories).map((title: string, index: number) => {
         const scoreIds = categories[title].auditRefs.map((ref: { id: string }) => ref.id);
+        const scoreList = scoreIds.map((id: string) => {
+          return { lbl: audits[id].title, val: makeValue(audits[id]), title: audits[id].description, key: id }
+        })
         return (
           <ExpandableRow
             key={`lighthouse-${index}`}
             lbl={title}
             val={processScore(categories[title].score)}
-            list={scoreIds}
-            audits={audits}
+            rowList={scoreList}
           />
         );
       }) }

src/components/Results/RobotsTxt.tsx

@@ -0,0 +1,35 @@
+
+import styled from 'styled-components';
+import colors from 'styles/colors';
+import Card from 'components/Form/Card';
+import Heading from 'components/Form/Heading';
+import Row, { RowProps }  from 'components/Form/Row';
+
+const Outer = styled(Card)`
+  .content {
+    max-height: 20rem;
+    overflow-y: auto;
+  }
+`;
+
+const RobotsTxtCard = (props: { robotTxt: RowProps[] }): JSX.Element => {
+  return (
+    <Outer>
+      <Heading as="h3" size="small" align="left" color={colors.primary}>Crawl Rules</Heading>
+      <div className="content">
+      {
+        props.robotTxt.length === 0 && <p>No crawl rules found.</p>
+      }
+      {
+        props.robotTxt.map((row: RowProps, index: number) => {
+          return (
+            <Row key={row.key || `${row.lbl}-${index}`} lbl={row.lbl} val={row.val} />
+          )
+        })
+      }
+      </div>
+    </Outer>
+  );
+}
+
+export default RobotsTxtCard;

src/components/Results/Screenshot.tsx

@@ -6,7 +6,11 @@ import Heading from 'components/Form/Heading';
 
 const Outer = styled(Card)`
 overflow: auto;
-max-height: 20rem;
+max-height: 28rem;
+img {
+  border-radius: 6px;
+  width: 100%;
+}
 `;
 
 const ScreenshotCard = (props: { screenshot: string }): JSX.Element => {

src/components/Results/ServerLocation.tsx

@@ -7,27 +7,12 @@ import Heading from 'components/Form/Heading';
 import LocationMap from 'components/misc/LocationMap';
 import Flag from 'components/misc/Flag';
 import { TextSizes } from 'styles/typography';
+import Row, { StyledRow } from 'components/Form/Row';
 
 const Outer = styled(Card)`
   grid-row: span 2
 `;
 
-const Row = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0.25rem;
-  &:not(:last-child) { border-bottom: 1px solid ${colors.primary}; }
-`;
-
-const RowLabel = styled.span`
-  font-weight: bold;
-`;
-
-const RowValue = styled.span`
-  display: flex;
-  img { margin-left: 0.5rem; }
-`;
-
 const SmallText = styled.span`
   opacity: 0.5;
   font-size: ${TextSizes.xSmall};
@@ -35,10 +20,16 @@ const SmallText = styled.span`
   display: block;
 `;
 
-const MapRow = styled(Row)`
+const MapRow = styled(StyledRow)`
+  padding-top: 1rem;
   flex-direction: column;
 `;
 
+const CountryValue = styled.span`
+  display: flex;
+  gap: 0.5rem;
+`;
+
 const ServerLocationCard = (location: ServerLocation): JSX.Element => {
 
   const {
@@ -50,28 +41,17 @@ const ServerLocationCard = (location: ServerLocation): JSX.Element => {
   return (
     <Outer>
       <Heading as="h3" size="small" align="left" color={colors.primary}>Location</Heading>
-      <Row>
-        <RowLabel>City</RowLabel>
-        <RowValue>
-          {postCode}, { city }, { region }
-        </RowValue>
-      </Row>
-      <Row>
-        <RowLabel>Country</RowLabel>
-        <RowValue>
+      <Row lbl="City" val={`${postCode}, ${city}, ${region}`} />
+      <Row lbl="" val="">
+        <b>Country</b>
+        <CountryValue>
           {country}
           { countryCode && <Flag countryCode={countryCode} width={28} /> }
-        </RowValue>
+        </CountryValue>
       </Row>
-      { timezone && <Row>
-        <RowLabel>Timezone</RowLabel><RowValue>{timezone}</RowValue>
-      </Row>}
-      { languages && <Row>
-        <RowLabel>Languages</RowLabel><RowValue>{languages}</RowValue>
-      </Row>}
-      { currency && <Row>
-        <RowLabel>Currency</RowLabel><RowValue>{currency} ({currencyCode})</RowValue>
-      </Row>}
+      <Row lbl="Timezone" val={timezone} />
+      <Row lbl="Languages" val={languages} />
+      <Row lbl="Currency" val={`${currency} (${currencyCode})`} />
       <MapRow>
         <LocationMap lat={coords.latitude} lon={coords.longitude} label={`Server (${isp})`} />
         <SmallText>Latitude: {coords.latitude}, Longitude: {coords.longitude} </SmallText>