feat: shared propertyinfo

newrelic · Sep 20, 2023 · d6a7539 · d6a7539
1 parent 5d738d2
commit d6a7539
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 67 deletions.
diff --git a/shared/PropertyInfo.js b/shared/PropertyInfo.js
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { HeadingText, Link, BlockText } from 'nr1';
+
+export default function RenderPropertyInfo(config, isNested, additionalDocs) {
+  const { name, title, description, type, items } = config;
+  const extraDocs = additionalDocs[name];
+
+  if (type === 'collection') {
+    return (
+      <div>
+        <HeadingText type={HeadingText.TYPE.HEADING_5}>{title}</HeadingText>
+        <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
+          {description || extraDocs?.description || 'No description provided.'}
+        </BlockText>
+
+        {items.map(item => {
+          return RenderPropertyInfo(item, true, additionalDocs);
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div key={name} style={{ paddingLeft: isNested ? '15px' : '0px' }}>
+      <HeadingText
+        type={
+          isNested ? HeadingText.TYPE.HEADING_6 : HeadingText.TYPE.HEADING_5
+        }
+      >
+        {title}
+      </HeadingText>
+      <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
+        {description || extraDocs?.description || 'No description provided.'}
+      </BlockText>
+
+      {extraDocs?.additionalInfo && (
+        <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
+          {extraDocs?.additionalInfo}
+        </BlockText>
+      )}
+
+      <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
+        {extraDocs?.links && (
+          <>
+            <HeadingText
+              type={HeadingText.TYPE.HEADING_6}
+              style={{ paddingBottom: '5px' }}
+            >
+              Links
+            </HeadingText>
+
+            <BlockText>
+              {extraDocs.links.map((l, i) => (
+                <code key={i}>
+                  <Link to={l.link}>{l.name}</Link>
+                  <br />
+                </code>
+              ))}
+            </BlockText>
+          </>
+        )}
+      </BlockText>
+      <br />
+    </div>
+  );
+}
diff --git a/visualizations/nr-line-bar-chart/docs/index.js b/visualizations/nr-line-bar-chart/docs/index.js
@@ -5,11 +5,12 @@ import {
   CardHeader,
   CardBody,
   HeadingText,
-  Link,
   BlockText,
   Spacing
 } from 'nr1';
 
+import RenderPropertyInfo from '../../../shared/PropertyInfo';
+
 const properties = require('../nr1.json');
 
 // if the key matches a config property name, the additional information will be added
@@ -26,70 +27,6 @@ const additionalDocs = {
   }
 };
 
-const renderNr1Props = (config, isNested) => {
-  const { name, title, description, type, items } = config;
-  const extraDocs = additionalDocs[name];
-
-  if (type === 'collection') {
-    return (
-      <div>
-        <HeadingText type={HeadingText.TYPE.HEADING_5}>{title}</HeadingText>
-        <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
-          {description || extraDocs?.description || 'No description provided.'}
-        </BlockText>
-
-        {items.map(item => {
-          return renderNr1Props(item, true);
-        })}
-      </div>
-    );
-  }
-
-  return (
-    <div key={name} style={{ paddingLeft: isNested ? '15px' : '0px' }}>
-      <HeadingText
-        type={
-          isNested ? HeadingText.TYPE.HEADING_6 : HeadingText.TYPE.HEADING_5
-        }
-      >
-        {title}
-      </HeadingText>
-      <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
-        {description || extraDocs?.description || 'No description provided.'}
-      </BlockText>
-
-      {extraDocs?.additionalInfo && (
-        <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
-          {extraDocs?.additionalInfo}
-        </BlockText>
-      )}
-
-      <BlockText spacingType={[BlockText.SPACING_TYPE.MEDIUM]}>
-        {extraDocs?.links && (
-          <>
-            <HeadingText
-              type={HeadingText.TYPE.HEADING_6}
-              style={{ paddingBottom: '5px' }}
-            >
-              Links
-            </HeadingText>
-
-            <BlockText>
-              {extraDocs.links.map((l, i) => (
-                <code key={i}>
-                  <Link to={l.link}>{l.name}</Link>
-                  <br />
-                </code>
-              ))}
-            </BlockText>
-          </>
-        )}
-      </BlockText>
-      <br />
-    </div>
-  );
-};
-
 export default function Docs() {
   return (
     <div style={{ textAlign: 'left' }}>
@@ -191,7 +128,7 @@ export default function Docs() {
           {properties.configuration
             .filter(c => c.name !== 'showDocs')
             .map(config => {
-              return renderNr1Props(config);
+              return RenderPropertyInfo(config, false, additionalDocs);
             })}
         </CardBody>
       </Card>

diff --git a/visualizations/nr-line-bar-chart/nr1.json b/visualizations/nr-line-bar-chart/nr1.json
@@ -13,7 +13,7 @@
     {
       "name": "enableTimePicker",
       "title": "Enable Platform Time Picker",
-      "description": "",
+      "description": "Utilize the time range for this widget as selected in your dashboard",
       "type": "boolean"
     },
     {