From 0355d264aae91f562893eecbefcb314697fa2cbf Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Wed, 3 Jun 2020 12:45:13 -0700
Subject: [PATCH] feat: Add PlatformStateContext and NerdletStateContext

---
 src/components/ComponentExample.js            | 100 +++++++++++-------
 src/data/sidenav.json                         |  13 +++
 .../components/nerdlet-state-context.mdx      |   7 ++
 .../components/platform-state-context.mdx     |   7 ++
 4 files changed, 87 insertions(+), 40 deletions(-)
 create mode 100644 src/markdown-pages/components/nerdlet-state-context.mdx
 create mode 100644 src/markdown-pages/components/platform-state-context.mdx

diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
index aa29eea43..ec37ee895 100644
--- a/src/components/ComponentExample.js
+++ b/src/components/ComponentExample.js
@@ -7,6 +7,18 @@ import styles from './ComponentExample.module.scss';
 import root from 'react-shadow';
 import { CSS_BUNDLE } from '../utils/sdk';
 
+const platformStateContextMock = {
+  timeRange: {
+    begin_time: null,
+    duration: 1800000,
+    end_time: null,
+  },
+};
+
+const nerdletStateContextMock = {
+  entityGuid: 'MTIzNDU2fEZPT3xCQVJ8OTg3NjU0MzIx',
+};
+
 const TRAILING_SEMI = /;\s*$/;
 
 const EXAMPLE_CSS = `
@@ -99,6 +111,10 @@ const ComponentExample = ({
 }) => {
   const [stylesLoaded, setStylesLoaded] = useState(false);
   const ToastManager = window.__NR1_SDK__.ToastManager;
+  const {
+    PlatformStateContext,
+    NerdletStateContext,
+  } = window.__NR1_SDK__.default;
   const { live } = example.options;
   let formattedCode;
 
@@ -109,47 +125,51 @@ const ComponentExample = ({
   }
 
   return (
-    <div className={className}>
-      <h3 className={styles.title}>{example.label}</h3>
-      <LiveProvider
-        scope={{
-          ...window.__NR1_SDK__.default,
-          navigation: {
-            // eslint-disable-next-line no-empty-function
-            getOpenLauncherLocation() {},
-          },
-        }}
-        code={formattedCode}
-        theme={github}
-        disabled={!live}
-      >
-        {live && (
-          <root.div className={styles.preview}>
-            <link
-              rel="stylesheet"
-              href={CSS_BUNDLE}
-              onLoad={() => setStylesLoaded(true)}
-            />
-            <style type="text/css">{EXAMPLE_CSS}</style>
-            {useToastManager && (
-              <div className="nr1-ComponentExample-ToastManager">
-                <ToastManager />
-              </div>
-            )}
-            {stylesLoaded ? (
-              <LivePreview
-                className="nr1-ComponentExample"
-                style={previewStyle}
-              />
-            ) : (
-              'Loading...'
+    <PlatformStateContext.Provider value={platformStateContextMock}>
+      <NerdletStateContext.Provider value={nerdletStateContextMock}>
+        <div className={className}>
+          <h3 className={styles.title}>{example.label}</h3>
+          <LiveProvider
+            scope={{
+              ...window.__NR1_SDK__.default,
+              navigation: {
+                // eslint-disable-next-line no-empty-function
+                getOpenLauncherLocation() {},
+              },
+            }}
+            code={formattedCode}
+            theme={github}
+            disabled={!live}
+          >
+            {live && (
+              <root.div className={styles.preview}>
+                <link
+                  rel="stylesheet"
+                  href={CSS_BUNDLE}
+                  onLoad={() => setStylesLoaded(true)}
+                />
+                <style type="text/css">{EXAMPLE_CSS}</style>
+                {useToastManager && (
+                  <div className="nr1-ComponentExample-ToastManager">
+                    <ToastManager />
+                  </div>
+                )}
+                {stylesLoaded ? (
+                  <LivePreview
+                    className="nr1-ComponentExample"
+                    style={previewStyle}
+                  />
+                ) : (
+                  'Loading...'
+                )}
+              </root.div>
             )}
-          </root.div>
-        )}
-        <LiveEditor style={{ fontSize: '0.75rem' }} />
-        {live && <LiveError className={styles.error} />}
-      </LiveProvider>
-    </div>
+            <LiveEditor style={{ fontSize: '0.75rem' }} />
+            {live && <LiveError className={styles.error} />}
+          </LiveProvider>
+        </div>
+      </NerdletStateContext.Provider>
+    </PlatformStateContext.Provider>
   );
 };
 
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
index e5c3d3002..c449a3c38 100644
--- a/src/data/sidenav.json
+++ b/src/data/sidenav.json
@@ -124,5 +124,18 @@
         "url": "/components/nrql-query"
       }
     ]
+  },
+  {
+    "displayName": "Platform APIs",
+    "children": [
+      {
+        "displayName": "NerdletStateContext",
+        "url": "/components/nerdlet-state-context"
+      },
+      {
+        "displayName": "PlatformStateContext",
+        "url": "/components/platform-state-context"
+      }
+    ]
   }
 ]
diff --git a/src/markdown-pages/components/nerdlet-state-context.mdx b/src/markdown-pages/components/nerdlet-state-context.mdx
new file mode 100644
index 000000000..3234bebee
--- /dev/null
+++ b/src/markdown-pages/components/nerdlet-state-context.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/nerdlet-state-context'
+title: 'NerdletStateContext'
+description: 'A NerdletStateContext component!'
+component: 'NerdletStateContext'
+template: 'ReferenceTemplate'
+---
diff --git a/src/markdown-pages/components/platform-state-context.mdx b/src/markdown-pages/components/platform-state-context.mdx
new file mode 100644
index 000000000..056b722c2
--- /dev/null
+++ b/src/markdown-pages/components/platform-state-context.mdx
@@ -0,0 +1,7 @@
+---
+path: '/components/platform-state-context'
+title: 'PlatformStateContext'
+description: 'A PlatformStateContext component!'
+component: 'PlatformStateContext'
+template: 'ReferenceTemplate'
+---