Extract all logic and gatsby details into integration template

Author: J12934

src/components/ScannerExamples.js

@@ -1,61 +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,
-  descriptions: allDescriptions,
-}) {
-  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, descriptions = [] }) {
   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"
             >
-              {allDescriptions.some(
-                (x) => x.node.frontmatter.title === targetName
-              ) && (
+              {description && (
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: allDescriptions.find(
-                      (x) => x.node.frontmatter.title === targetName
-                    ).node.html,
+                    __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>
         );

src/templates/integration.js

@@ -1,9 +1,12 @@
-import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
-import { graphql } from 'gatsby';
-import React from 'react';
-import Layout from '../components/Layout';
-import ScannerExamples from '../components/ScannerExamples.js';
-import Sidebar from '../components/Sidebar.js';
+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";
 
 deckDeckGoHighlightElement();
 
@@ -15,21 +18,40 @@ 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 showExamples = examples.length > 0;
+  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 (
     <Layout bodyClass="integration">
       <div className="sidebar-wrapper">
         <Sidebar
           categories={[
-            { categoryName: 'Scanners', entries: scanners },
+            { categoryName: "Scanners", entries: scanners },
             {
-              categoryName: 'Persistence Providers',
+              categoryName: "Persistence Providers",
               entries: persistenceProviders,
             },
-            { categoryName: 'Hooks', entries: hooks },
+            { categoryName: "Hooks", entries: hooks },
           ]}
           currentPathname={props.location.pathname}
         />
@@ -40,7 +62,7 @@ const Integration = (props) => {
               className="content"
               dangerouslySetInnerHTML={{ __html: html }}
             />
-            {showExamples && <ScannerExamples examples={examples} descriptions={exampleReadMes} />}
+            {showExamples && <ScannerExamples examples={examples} />}
           </div>
         </div>
       </div>