Merge pull request #21 from secureCodeBox/feature/example-description

J12934 · web-flow · commit a2a880169b91 · 2020-09-02T10:40:53.000+02:00
query example readmes &amp; render on condition
diff --git a/src/components/ScannerExamples.js b/src/components/ScannerExamples.js
@@ -1,47 +1,49 @@
-import groupBy from 'lodash/groupBy';
-import mapValues from 'lodash/mapValues';
-import React from 'react';
-import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import 'react-tabs/style/react-tabs.css';
-import Collapsible from './Collapsible';
-
-export default function ScannerExamples({ examples: allExamples }) {
-  const exampleGroups = mapValues(
-    groupBy(allExamples, ({ scanTarget }) => scanTarget),
-    (examples) => {
-      /* We are reversing to ensure that the right text ist displayed for the right file */
-      return examples.reverse();
-    }
-  );
+import React from "react";
+import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Collapsible from "./Collapsible";
 
+export default function ScannerExamples({ examples }) {
   return (
     <div className="container-fluid">
       <h2 className="title">Examples</h2>
 
-      {Object.entries(exampleGroups).map(([targetName, examples]) => {
+      {examples.map(({ name, description, scan, findings }) => {
         return (
-          <Tabs key={targetName}>
+          <Tabs key={name}>
             <Collapsible
               overflowWhenOpen="visible"
               lazyRender={true}
               transitionTime={150}
               transitionCloseTime={50}
-              trigger={targetName}
+              trigger={name}
               triggerTagName="h3"
             >
+              {description && (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: description,
+                  }}
+                ></div>
+              )}
               <TabList>
-                {examples.map(({ fileName }) => (
-                  <Tab key={fileName}>{fileName.split('.')[0]}</Tab>
-                ))}
+                {scan && <Tab key={"scan"}>Scan</Tab>}
+                {findings && <Tab key={"findings"}>Findings</Tab>}
               </TabList>
-
-              {examples.map(({ fileName, content }) => (
-                <TabPanel key={fileName}>
+              {scan && (
+                <TabPanel key={"scan"}>
+                  <deckgo-highlight-code theme="cobalt">
+                    <code slot="code">{scan}</code>
+                  </deckgo-highlight-code>
+                </TabPanel>
+              )}
+              {findings && (
+                <TabPanel key={"findings"}>
                   <deckgo-highlight-code theme="cobalt">
-                    <code slot="code">{content}</code>
+                    <code slot="code">{findings}</code>
                   </deckgo-highlight-code>
                 </TabPanel>
-              ))}
+              )}
             </Collapsible>
           </Tabs>
         );
diff --git a/src/templates/integration.js b/src/templates/integration.js
@@ -1,10 +1,13 @@
 import React from "react";
 import { graphql } from "gatsby";
+import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
+import groupBy from "lodash/groupBy";
+import map from "lodash/map";
+
 import Layout from "../components/Layout";
 import ScannerExamples from "../components/ScannerExamples.js";
 import Sidebar from "../components/Sidebar.js";
 
-import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
 deckDeckGoHighlightElement();
 
 const Integration = (props) => {
@@ -15,7 +18,27 @@ const Integration = (props) => {
   const persistenceProviders = props.data.persistenceProvider.edges;
   const hooks = props.data.hook.edges;
 
-  const examples = props.data.examples.nodes.map(({ fields }) => fields);
+  const examplesRaw = props.data.examples.nodes.map(({ fields }) => fields);
+  const exampleReadMes = props.data.exampleReadMes.edges;
+
+  // Transforms the examples and readme into one big array with he following structure:
+  // [{ name: "example.com", description: "<html>description", scan: "yaml...", findings: "yaml..."}]
+  const examples = map(
+    groupBy(examplesRaw, ({ scanTarget }) => scanTarget),
+    (examples, scanTarget) => {
+      console.log({ examples, scanTarget });
+      return {
+        name: scanTarget,
+        scan: examples.find(({ fileName }) => fileName === "scan.yaml")
+          ?.content,
+        findings: examples.find(({ fileName }) => fileName === "findings.yaml")
+          ?.content,
+        description: exampleReadMes.find(
+          (x) => x.node.frontmatter.title === scanTarget
+        )?.node.html,
+      };
+    }
+  );
   const showExamples = examples.length > 0;
 
   return (
@@ -141,6 +164,18 @@ export const query = graphql`
         }
       }
     }
+    exampleReadMes: allMarkdownRemark(
+      filter: { fileAbsolutePath: { regex: $exampleFilter } }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+          }
+          html
+        }
+      }
+    }
   }
 `;
 
