Merge pull request #13462 from newrelic/tabatha/comment-component

feat: Create comment component for markdown pages

scripts/actions/__tests__/__snapshots__/serialize-mdx.test.js.snap

@@ -501,6 +501,8 @@ exports[`serializes mark to html 1`] = `"<mark data-type=\\"component\\"><p>PDF<
 
 exports[`serializes var to html 1`] = `"<var data-type=\\"component\\"><p>JAVA_AGENT_VERSION</p></var>"`;
 
+exports[`serializing CONTRIBUTOR_NOTE removes it from translated files 1`] = `""`;
+
 exports[`test <InlineCode> element serializes and adds 'notranslate' class to element 1`] = `"<code data-type=\\"component\\" data-component=\\"InlineCode\\" class=\\"notranslate\\">This is a test</code>"`;
 
 exports[`test <b> element serializes 1`] = `

scripts/actions/__tests__/serialize-mdx.test.js

@@ -398,3 +398,15 @@ test('serialize InlineSignup component', async () => {
   const html = await serializeMDX(mdx);
   expect(html).toMatchSnapshot();
 });
+
+test('serializing CONTRIBUTOR_NOTE removes it from translated files', async () => {
+  const html = await serializeMDX(`
+<CONTRIBUTOR_NOTE>
+  This is a note to future authors about the MDX content.
+
+  It does not render in the UI
+</CONTRIBUTOR_NOTE>
+  `);
+
+  expect(html).toMatchSnapshot();
+});

scripts/actions/utils/handlers.js

@@ -120,6 +120,11 @@ module.exports = {
         wrapChildren: false,
       }),
   },
+  CONTRIBUTOR_NOTE: {
+    // this pulls this component out of translated files
+    // there should never be anything to deserialize
+    serialize: () => null,
+  },
   ExternalLink: {
     deserialize: deserializeComponent,
     serialize: serializeComponent,

src/components/ContributorNote.js

@@ -0,0 +1,8 @@
+/* In place of comments, this component is intended to be used by authors
+ * to leave important notes about MDX content for future contributors.
+ *
+ * It is not rendered in the UI and is not translated.
+ */
+const ContributorNote = () => null;
+
+export default ContributorNote;

src/components/MDXContainer.js

@@ -20,6 +20,7 @@ import InlinePopover from './InlinePopover';
 import InstallFeedback from './InstallFeedback';
 import MDXButton from './MDXButton';
 import MDXButtonGroup from './MDXButtonGroup';
+import ContributorNote from './ContributorNote';
 import MDXTechTileGrid from './MDXTechTileGrid';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -91,6 +92,7 @@ const defaultComponents = {
   ButtonLink: (props) => <MDXButton as={Link} {...props} />,
   ButtonGroup: MDXButtonGroup,
   DoNotTranslate: ({ children }) => <>{children}</>,
+  CONTRIBUTOR_NOTE: ContributorNote,
   Tabs: Tabs,
   TabsBar: Tabs.Bar,
   TabsBarItem: Tabs.BarItem,