From b2385c2343853ea347c5a70822493c5a4eabaf40 Mon Sep 17 00:00:00 2001
From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com>
Date: Wed, 7 Jul 2021 14:48:12 -0700
Subject: [PATCH] feat: add button with link to pack directory

* now on each pack page, there is a button with a link to the pack
directory in the page section.
* added github images copied from opensource repo.
---
 src/images/github/icon-github-dark-green.svg |  3 ++
 src/images/github/icon-github-white.svg      |  3 ++
 src/templates/ObservabilityPackDetails.js    | 44 +++++++++++++++++++-
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/images/github/icon-github-dark-green.svg
 create mode 100644 src/images/github/icon-github-white.svg

diff --git a/src/images/github/icon-github-dark-green.svg b/src/images/github/icon-github-dark-green.svg
new file mode 100644
index 000000000..8e772ea05
--- /dev/null
+++ b/src/images/github/icon-github-dark-green.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49753 0.5C3.35525 0.5 0 3.9408 0 8.18868C0 11.587 2.14938 14.4661 5.12722 15.4856C5.50003 15.5564 5.6381 15.3205 5.6381 15.1128C5.6381 14.9287 5.6335 14.4472 5.6289 13.8054C3.54396 14.2679 3.1021 12.7764 3.1021 12.7764C2.76152 11.8891 2.26905 11.6483 2.26905 11.6483C1.58787 11.1716 2.31968 11.1811 2.31968 11.1811C3.06989 11.2377 3.47032 11.974 3.47032 11.974C4.13768 13.1493 5.22387 12.8094 5.65191 12.6113C5.72095 12.1157 5.91426 11.7758 6.12597 11.5822C4.46446 11.3935 2.7155 10.7327 2.7155 7.7875C2.7155 6.94735 3.00545 6.26297 3.48872 5.72491C3.41048 5.52667 3.15274 4.7479 3.55776 3.69064C3.55776 3.69064 4.1883 3.48296 5.6197 4.47886C6.21803 4.30895 6.85777 4.22399 7.49753 4.21927C8.13268 4.22399 8.77704 4.30895 9.37536 4.47886C10.8068 3.48296 11.4373 3.69064 11.4373 3.69064C11.8469 4.7479 11.5892 5.53139 11.5109 5.72491C11.9896 6.26297 12.2796 6.94735 12.2796 7.7875C12.2796 10.7421 10.526 11.3888 8.85527 11.5822C9.12222 11.8182 9.36616 12.2903 9.36616 13.0077C9.36616 14.0366 9.35695 14.8625 9.35695 15.1175C9.35695 15.3252 9.49042 15.5612 9.87244 15.4856C12.8502 14.4661 14.9951 11.587 14.9951 8.19341C14.9951 3.94079 11.6398 0.5 7.49753 0.5V0.5Z" fill="#1C2A2F"/>
+</svg>
diff --git a/src/images/github/icon-github-white.svg b/src/images/github/icon-github-white.svg
new file mode 100644
index 000000000..2ae3ec23f
--- /dev/null
+++ b/src/images/github/icon-github-white.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49753 0.5C3.35525 0.5 0 3.9408 0 8.18868C0 11.587 2.14938 14.4661 5.12722 15.4856C5.50003 15.5564 5.6381 15.3205 5.6381 15.1128C5.6381 14.9287 5.6335 14.4472 5.6289 13.8054C3.54396 14.2679 3.1021 12.7764 3.1021 12.7764C2.76152 11.8891 2.26905 11.6483 2.26905 11.6483C1.58787 11.1716 2.31968 11.1811 2.31968 11.1811C3.06989 11.2377 3.47032 11.974 3.47032 11.974C4.13768 13.1493 5.22387 12.8094 5.65191 12.6113C5.72095 12.1157 5.91426 11.7758 6.12597 11.5822C4.46446 11.3935 2.7155 10.7327 2.7155 7.7875C2.7155 6.94735 3.00545 6.26297 3.48872 5.72491C3.41048 5.52667 3.15274 4.7479 3.55776 3.69064C3.55776 3.69064 4.1883 3.48296 5.6197 4.47886C6.21803 4.30895 6.85777 4.22399 7.49753 4.21927C8.13268 4.22399 8.77704 4.30895 9.37536 4.47886C10.8068 3.48296 11.4373 3.69064 11.4373 3.69064C11.8469 4.7479 11.5892 5.53139 11.5109 5.72491C11.9896 6.26297 12.2796 6.94735 12.2796 7.7875C12.2796 10.7421 10.526 11.3888 8.85527 11.5822C9.12222 11.8182 9.36616 12.2903 9.36616 13.0077C9.36616 14.0366 9.35695 14.8625 9.35695 15.1175C9.35695 15.3252 9.49042 15.5612 9.87244 15.4856C12.8502 14.4661 14.9951 11.587 14.9951 8.19341C14.9951 3.94079 11.6398 0.5 7.49753 0.5V0.5Z" fill="white"/>
+</svg>
diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js
index ed38ef334..964adda95 100644
--- a/src/templates/ObservabilityPackDetails.js
+++ b/src/templates/ObservabilityPackDetails.js
@@ -10,11 +10,13 @@ import {
   PageTools,
   useTessen,
   useInstrumentedHandler,
+  Button,
 } from '@newrelic/gatsby-theme-newrelic';
 import ImageGallery from '../components/ImageGallery';
 import Intro from '../components/Intro';
 import InstallButton from '../components/InstallButton';
 import ImageSlider from '../components/ImageSlider';
+import iconGitHubWhite from '../images/github/icon-github-white.svg';
 
 const ObservabilityPackDetails = ({ data, location }) => {
   const pack = data.observabilityPacks;
@@ -32,6 +34,23 @@ const ObservabilityPackDetails = ({ data, location }) => {
       packId: pack.id,
     }
   );
+
+  const getPackUrl = () => {
+    const baseUrl =
+      'https://github.com/newrelic/newrelic-observability-packs/tree/main/packs';
+
+    if (!pack.logoUrl) {
+      return baseUrl;
+    }
+
+    /**
+     * logoUrl looks something like: 'https://raw.githubusercontent.com/newrelic/newrelic-observability-packs/v0.8.2/packs/couchbase/logo.svg'
+     */
+    const [packName, ..._] = pack.logoUrl.split('/').slice(-2);
+
+    return `${baseUrl}/${packName}`;
+  };
+
   return (
     <>
       <DevSiteSeo title={pack.name} location={location} />
@@ -45,7 +64,7 @@ const ObservabilityPackDetails = ({ data, location }) => {
             `}
           >
             <InstallButton
-              title={`Install Pack`}
+              title="Install Pack"
               guid={pack.id}
               onClick={handleInstallClick}
             />
@@ -230,6 +249,28 @@ const ObservabilityPackDetails = ({ data, location }) => {
               }
             `}
           >
+            <PageTools.Section>
+              <div>
+                <Button
+                  as="a"
+                  variant={Button.VARIANT.PRIMARY}
+                  href={getPackUrl()}
+                  rel="noopener noreferrer"
+                  css={css`
+                    margin-top: 0.5rem;
+                  `}
+                >
+                  <img
+                    css={css`
+                      margin-right: 0.5rem;
+                    `}
+                    src={iconGitHubWhite}
+                    alt="GitHub logo"
+                  />
+                  View Repo
+                </Button>
+              </div>
+            </PageTools.Section>
             <PageTools.Section>
               <PageTools.Title>How to use this pack</PageTools.Title>
               <ol>
@@ -271,6 +312,7 @@ export const pageQuery = graphql`
       level
       id
       description
+      logoUrl
       dashboards {
         description
         name