Merge pull request #5213 from newrelic/clark/NoTranslate-Component

DoNotTranslate Component
newrelic · Dec 10, 2021 · f13b514 · f13b514
2 parents 68f2949 + 1968ff7
commit f13b514
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 14 deletions.
diff --git a/scripts/actions/__tests__/__snapshots__/serialize-mdx.test.js.snap b/scripts/actions/__tests__/__snapshots__/serialize-mdx.test.js.snap
@@ -74,7 +74,7 @@ exports[`kitchen sink 1`] = `
     </tr>
   </tbody>
 </table>
-<pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjoicHl0aG9uIiwibWV0YSI6ImNvcHlhYmxlPWZhbHNlIiwidmFsdWUiOiJAbmV3cmVsaWMuYWdlbnQubGFtYmRhX2hhbmRsZXIoKVxuZGVmIGhhbmRsZXIoZXZlbnQsIGNvbnRleHQpOlxuICAgIG5ld3JlbGljLmFnZW50LnJlY29yZF9jdXN0b21fZXZlbnQoJ0N1c3RvbUV2ZW50Jywgeydmb28nOiAnYmFyJ30pIiwicG9zaXRpb24iOnsic3RhcnQiOnsibGluZSI6OTMsImNvbHVtbiI6MSwib2Zmc2V0IjozMTM5fSwiZW5kIjp7ImxpbmUiOjk3LCJjb2x1bW4iOjQsIm9mZnNldCI6MzI5OX0sImluZGVudCI6WzEsMSwxLDFdfX0=\\"><code></code></pre>
+<pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjoicHl0aG9uIiwibWV0YSI6ImNvcHlhYmxlPWZhbHNlIiwidmFsdWUiOiJAbmV3cmVsaWMuYWdlbnQubGFtYmRhX2hhbmRsZXIoKVxuZGVmIGhhbmRsZXIoZXZlbnQsIGNvbnRleHQpOlxuICAgIG5ld3JlbGljLmFnZW50LnJlY29yZF9jdXN0b21fZXZlbnQoJ0N1c3RvbUV2ZW50Jywgeydmb28nOiAnYmFyJ30pIiwicG9zaXRpb24iOnsic3RhcnQiOnsibGluZSI6OTMsImNvbHVtbiI6MSwib2Zmc2V0IjozMTM5fSwiZW5kIjp7ImxpbmUiOjk3LCJjb2x1bW4iOjQsIm9mZnNldCI6MzI5OX0sImluZGVudCI6WzEsMSwxLDFdfX0=\\"></pre>
 <div data-type=\\"component\\" data-component=\\"TechTileGrid\\">
   <div data-type=\\"prop\\" data-prop=\\"children\\">
     <div data-type=\\"component\\" data-component=\\"TechTile\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJuYW1lIiwidmFsdWUiOiJpT1MifSx7InR5cGUiOiJtZHhBdHRyaWJ1dGUiLCJuYW1lIjoiaWNvbiIsInZhbHVlIjoibG9nby1hcHBsZSJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0byIsInZhbHVlIjoiL2FnZW50cy9pb3MtYWdlbnQifV0=\\">
@@ -94,14 +94,14 @@ exports[`kitchen sink 1`] = `
       <div data-type=\\"prop\\" data-prop=\\"title\\">What account changes have been made using an API key?</div>
       <div data-type=\\"prop\\" data-prop=\\"children\\">
         <p>To see detailed information about changes to the account that were made using an API key during a specific time frame, include <a href=\\"#actorType\\"><code>actorType = 'api_key'</code></a> in the query. For example:</p>
-        <pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjpudWxsLCJtZXRhIjpudWxsLCJ2YWx1ZSI6IlNFTEVDVCBhY3Rpb25JZGVudGlmaWVyLCBkZXNjcmlwdGlvbiwgdGFyZ2V0VHlwZSwgdGFyZ2V0SWQsIGFjdG9yQVBJS2V5LCBhY3RvcklkLCBhY3RvckVtYWlsXG5GUk9NIE5yQXVkaXRFdmVudCBXSEVSRSBhY3RvclR5cGUgPSAnYXBpX2tleScgU0lOQ0UgMSB3ZWVrIGFnbyIsInBvc2l0aW9uIjp7InN0YXJ0Ijp7ImxpbmUiOjEyNiwiY29sdW1uIjoxLCJvZmZzZXQiOjM5MTF9LCJlbmQiOnsibGluZSI6MTMwLCJjb2x1bW4iOjMsIm9mZnNldCI6NDA5M30sImluZGVudCI6WzEsMSwxLDFdfX0=\\"><code></code></pre>
+        <pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjpudWxsLCJtZXRhIjpudWxsLCJ2YWx1ZSI6IlNFTEVDVCBhY3Rpb25JZGVudGlmaWVyLCBkZXNjcmlwdGlvbiwgdGFyZ2V0VHlwZSwgdGFyZ2V0SWQsIGFjdG9yQVBJS2V5LCBhY3RvcklkLCBhY3RvckVtYWlsXG5GUk9NIE5yQXVkaXRFdmVudCBXSEVSRSBhY3RvclR5cGUgPSAnYXBpX2tleScgU0lOQ0UgMSB3ZWVrIGFnbyIsInBvc2l0aW9uIjp7InN0YXJ0Ijp7ImxpbmUiOjEyNiwiY29sdW1uIjoxLCJvZmZzZXQiOjM5MTF9LCJlbmQiOnsibGluZSI6MTMwLCJjb2x1bW4iOjMsIm9mZnNldCI6NDA5M30sImluZGVudCI6WzEsMSwxLDFdfX0=\\"></pre>
       </div>
     </div>
     <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJpZCIsInZhbHVlIjoic3ludGgtdXNlciJ9LHsidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiU3ludGhldGljczogV2hhdCBtb25pdG9ycyB3ZXJlIGNyZWF0ZWQgYnkgYSBzcGVjaWZpYyB1c2VyPyJ9XQ==\\">
       <div data-type=\\"prop\\" data-prop=\\"title\\">Synthetics: What monitors were created by a specific user?</div>
       <div data-type=\\"prop\\" data-prop=\\"children\\">
         <p>To query Synthetics monitor updates made by a specific user, include the <a href=\\"/attribute-dictionary/nrauditevent/actionidentifier\\"><code>actionIdentifier</code></a> and <a href=\\"/attribute-dictionary/nrauditevent/actoremail\\"><code>actorEmail</code></a> attribute in your query. For example:</p>
-        <pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjpudWxsLCJtZXRhIjpudWxsLCJ2YWx1ZSI6IlNFTEVDVCBjb3VudCgqKSBGUk9NIE5yQXVkaXRFdmVudFxuV0hFUkUgYWN0aW9uSWRlbnRpZmllciA9ICdzeW50aGV0aWNzX21vbml0b3IudXBkYXRlX3NjcmlwdCdcbkZBQ0VUIGFjdG9yRW1haWwsIGFjdGlvbklkZW50aWZpZXIsIGRlc2NyaXB0aW9uXG5TSU5DRSAxIHdlZWsgYWdvIExJTUlUIDEwMDAiLCJwb3NpdGlvbiI6eyJzdGFydCI6eyJsaW5lIjoxMzgsImNvbHVtbiI6MSwib2Zmc2V0Ijo0NDcxfSwiZW5kIjp7ImxpbmUiOjE0NCwiY29sdW1uIjozLCJvZmZzZXQiOjQ2NzV9LCJpbmRlbnQiOlsxLDEsMSwxLDEsMV19fQ==\\"><code></code></pre>
+        <pre data-type=\\"component\\" data-component=\\"CodeBlock\\" data-props=\\"eyJsYW5nIjpudWxsLCJtZXRhIjpudWxsLCJ2YWx1ZSI6IlNFTEVDVCBjb3VudCgqKSBGUk9NIE5yQXVkaXRFdmVudFxuV0hFUkUgYWN0aW9uSWRlbnRpZmllciA9ICdzeW50aGV0aWNzX21vbml0b3IudXBkYXRlX3NjcmlwdCdcbkZBQ0VUIGFjdG9yRW1haWwsIGFjdGlvbklkZW50aWZpZXIsIGRlc2NyaXB0aW9uXG5TSU5DRSAxIHdlZWsgYWdvIExJTUlUIDEwMDAiLCJwb3NpdGlvbiI6eyJzdGFydCI6eyJsaW5lIjoxMzgsImNvbHVtbiI6MSwib2Zmc2V0Ijo0NDcxfSwiZW5kIjp7ImxpbmUiOjE0NCwiY29sdW1uIjozLCJvZmZzZXQiOjQ2NzV9LCJpbmRlbnQiOlsxLDEsMSwxLDEsMV19fQ==\\"></pre>
       </div>
     </div>
   </div>
@@ -250,6 +250,34 @@ exports[`serializes CollapserGroup to html 1`] = `
 "
 `;
 
+exports[`serializes DoNotTranslate to html 1`] = `
+"
+<div data-type=\\"component\\" data-component=\\"DoNotTranslate\\" class=\\"notranslate\\">
+  <h1>Not all who wander are lost...</h1>
+  <p>Testing this line too</p>
+</div>
+"
+`;
+
+exports[`serializes DoNotTranslate to html inline 1`] = `
+"
+<p>This is an <span data-type=\\"component\\" data-component=\\"DoNotTranslate\\" class=\\"notranslate\\">MDX</span> file</p>
+"
+`;
+
+exports[`serializes DoNotTranslate wrapping a Collapser 1`] = `
+"
+<div data-type=\\"component\\" data-component=\\"DoNotTranslate\\" class=\\"notranslate\\">
+  <div data-type=\\"component\\" data-component=\\"Collapser\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJ0aXRsZSIsInZhbHVlIjoiQ29sbGFwc2UgbWUgeW8ifV0=\\">
+    <div data-type=\\"prop\\" data-prop=\\"title\\">Collapse me yo</div>
+    <div data-type=\\"prop\\" data-prop=\\"children\\">
+      <p>These tests are hard to write docs for</p>
+    </div>
+  </div>
+</div>
+"
+`;
+
 exports[`serializes ExternalLink to html 1`] = `
 "
 <div data-type=\\"component\\" data-component=\\"ExternalLink\\" data-props=\\"W3sidHlwZSI6Im1keEF0dHJpYnV0ZSIsIm5hbWUiOiJocmVmIiwidmFsdWUiOiJodHRwczovL2RldmVsb3Blci5uZXdyZWxpYy5jb20ifV0=\\">

diff --git a/scripts/actions/__tests__/deserialize-html.test.js b/scripts/actions/__tests__/deserialize-html.test.js
@@ -2,6 +2,34 @@ import deserializeHTML from '../deserialize-html';
 import serializeMDX from '../serialize-mdx';
 import fs from 'fs';
 
+test('deserializes mdx with DoNotTranslate', async () => {
+  const input = `
+<DoNotTranslate>
+  # Not all who wander are lost...
+
+  but some probably are...
+</DoNotTranslate>
+  `;
+
+  const mdx = await deserializeHTML(await serializeMDX(input));
+
+  expect(mdx).toEqual(input.trim());
+});
+
+test('serializes DoNotTranslate wrapping a Collapser', async () => {
+  const input = `
+<DoNotTranslate>
+  <Collapser title="Collapse me yo">
+    These tests are hard to write docs for
+  </Collapser>
+</DoNotTranslate>
+  `;
+
+  const mdx = await deserializeHTML(await serializeMDX(input));
+
+  expect(mdx).toEqual(input.trim());
+});
+
 test('deserializes mdx with frontmatter', async () => {
   const input = `
 ---
@@ -119,7 +147,7 @@ test('deserializes block ImageSizing component', async () => {
   expect(mdx).toEqual(input.trim());
 });
 
-test.only('deserializes inline ImageSizing component', async () => {
+test('deserializes inline ImageSizing component', async () => {
   const input = `
 This is a test with an <ImageSizing width="32px" height="32px">![test.png](./images/test.png)</ImageSizing> inline image.
   `;

diff --git a/scripts/actions/__tests__/serialize-mdx.test.js b/scripts/actions/__tests__/serialize-mdx.test.js
@@ -1,6 +1,39 @@
 import serializeMDX from '../serialize-mdx';
 import fs from 'fs';
 
+test('serializes DoNotTranslate wrapping a Collapser', async () => {
+  const html = await serializeMDX(`
+<DoNotTranslate>
+  <Collapser
+    title="Collapse me yo"
+  >
+    These tests are hard to write docs for
+  </Collapser>
+</DoNotTranslate>
+  `);
+
+  expect(html).toMatchSnapshot();
+});
+
+test('serializes DoNotTranslate to html', async () => {
+  const html = await serializeMDX(`
+<DoNotTranslate>
+  # Not all who wander are lost...
+  Testing this line too
+</DoNotTranslate>
+  `);
+
+  expect(html).toMatchSnapshot();
+});
+
+test('serializes DoNotTranslate to html inline', async () => {
+  const html = await serializeMDX(`
+This is an <DoNotTranslate>MDX</DoNotTranslate> file
+  `);
+
+  expect(html).toMatchSnapshot();
+});
+
 test('serializes Button to html', async () => {
   const html = await serializeMDX(`
 <Button

diff --git a/scripts/actions/utils/handlers.js b/scripts/actions/utils/handlers.js
@@ -14,16 +14,11 @@ const { omit } = require('lodash');
 module.exports = {
   CodeBlock: {
     serialize: (h, node) =>
-      h(
-        node,
-        'pre',
-        {
-          'data-type': 'component',
-          'data-component': 'CodeBlock',
-          'data-props': serializeJSValue(omit(node, ['type'])),
-        },
-        [h(node, 'code')]
-      ),
+      h(node, 'pre', {
+        'data-type': 'component',
+        'data-component': 'CodeBlock',
+        'data-props': serializeJSValue(omit(node, ['type'])),
+      }),
     deserialize: (h, node) =>
       h(node, 'code', deserializeJSValue(node.properties.dataProps)),
   },
@@ -108,6 +103,14 @@ module.exports = {
     deserialize: deserializeComponent,
     serialize: serializeComponent,
   },
+  DoNotTranslate: {
+    deserialize: deserializeComponent,
+    serialize: (h, node) =>
+      serializeComponent(h, node, {
+        classNames: 'notranslate',
+        wrapChildren: false,
+      }),
+  },
   ExternalLink: {
     deserialize: deserializeComponent,
     serialize: serializeComponent,
@@ -274,4 +277,8 @@ module.exports = {
     deserialize: deserializeComponent,
     serialize: serializeComponent,
   },
+  br: {
+    deserialize: deserializeComponent,
+    serialize: serializeComponent,
+  },
 };
diff --git a/scripts/actions/utils/serialization-helpers.js b/scripts/actions/utils/serialization-helpers.js
@@ -67,6 +67,7 @@ const serializeComponent = (
   node,
   {
     tagName,
+    classNames = '',
     textAttributes = [],
     wrapChildren = true,
     identifyComponent = true,
@@ -83,6 +84,7 @@ const serializeComponent = (
       'data-type': 'component',
       'data-component': identifyComponent ? getComponentName(node) : null,
       'data-props': serializeProps(node),
+      class: classNames || null,
     }),
     textAttributes
       .map((name) => serializeTextProp(h, node, name))

diff --git a/src/components/MDXContainer.js b/src/components/MDXContainer.js
@@ -28,6 +28,7 @@ const defaultComponents = {
   Button: MDXButton,
   ButtonLink: (props) => <MDXButton as={Link} {...props} />,
   ButtonGroup: MDXButtonGroup,
+  DoNotTranslate: ({ children }) => <>{children}</>,
 };
 
 const MDXContainer = ({ body, children, components }) => {