Add code block actions plugin extensibility (#24348)

* Add code block actions plugin extensibility

* Fixing tests

* Fixing linter errors

* Move Plugin components left of label

---------

Co-authored-by: Christopher Speller <crspeller@gmail.com>

webapp/channels/src/components/code_block/__snapshots__/code_block.test.tsx.snap

@@ -1,6 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`codeBlock should render html code block with proper indentation after syntax highlighting 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
   <IntlProvider
     defaultFormats={Object {}}
     defaultLocale="en"
@@ -175,9 +187,42 @@ exports[`codeBlock should render html code block with proper indentation after s
       </div>
     </CodeBlock>
   </IntlProvider>
+</Provider>
 `;
 
 exports[`codeBlock should render html code block with proper indentation before syntax highlighting 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <IntlProvider
+    defaultFormats={Object {}}
+    defaultLocale="en"
+    fallbackOnEmptyString={true}
+    formats={Object {}}
+    locale="en"
+    messages={Object {}}
+    onError={[Function]}
+    onWarn={[Function]}
+    textComponent={Symbol(react.fragment)}
+  >
+    <CodeBlock
+      code="\`\`\`html
+<div className='myClass'>
+  <a href='https://randomgibberishurl.com'>ClickMe</a>
+</div>
+\`\`\`
+"
+      language="html"
+    >
       <div
         className="post-code"
       >
@@ -193,7 +238,110 @@ exports[`codeBlock should render html code block with proper indentation before
 \`\`\`
 "
             placement="top"
+          >
+            <OverlayTrigger
+              defaultOverlayShown={false}
+              delayShow={400}
+              overlay={
+                <Tooltip
+                  bsClass="tooltip"
+                  id="copyButton"
+                  placement="right"
+                >
+                  <Memo(MemoizedFormattedMessage)
+                    defaultMessage="Copy code"
+                    id="copy.code.message"
                   />
+                </Tooltip>
+              }
+              placement="top"
+              shouldUpdatePosition={true}
+              trigger={
+                Array [
+                  "hover",
+                  "focus",
+                ]
+              }
+            >
+              <OverlayTrigger
+                defaultOverlayShown={false}
+                delayShow={400}
+                overlay={
+                  <OverlayWrapper
+                    bsClass="tooltip"
+                    id="copyButton"
+                    intl={
+                      Object {
+                        "$t": [Function],
+                        "defaultFormats": Object {},
+                        "defaultLocale": "en",
+                        "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
+                        "formatDate": [Function],
+                        "formatDateTimeRange": [Function],
+                        "formatDateToParts": [Function],
+                        "formatDisplayName": [Function],
+                        "formatList": [Function],
+                        "formatListToParts": [Function],
+                        "formatMessage": [Function],
+                        "formatNumber": [Function],
+                        "formatNumberToParts": [Function],
+                        "formatPlural": [Function],
+                        "formatRelativeTime": [Function],
+                        "formatTime": [Function],
+                        "formatTimeToParts": [Function],
+                        "formats": Object {},
+                        "formatters": Object {
+                          "getDateTimeFormat": [Function],
+                          "getDisplayNames": [Function],
+                          "getListFormat": [Function],
+                          "getMessageFormat": [Function],
+                          "getNumberFormat": [Function],
+                          "getPluralRules": [Function],
+                          "getRelativeTimeFormat": [Function],
+                        },
+                        "locale": "en",
+                        "messages": Object {},
+                        "onError": [Function],
+                        "onWarn": [Function],
+                        "textComponent": Symbol(react.fragment),
+                        "timeZone": undefined,
+                        "wrapRichTextChunksInFragment": undefined,
+                      }
+                    }
+                    placement="right"
+                  >
+                    <Memo(MemoizedFormattedMessage)
+                      defaultMessage="Copy code"
+                      id="copy.code.message"
+                    />
+                  </OverlayWrapper>
+                }
+                placement="top"
+                shouldUpdatePosition={true}
+                trigger={
+                  Array [
+                    "hover",
+                    "focus",
+                  ]
+                }
+              >
+                <span
+                  className="post-code__clipboard"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <i
+                    className="icon icon-content-copy"
+                    role="button"
+                  />
+                </span>
+              </OverlayTrigger>
+            </OverlayTrigger>
+          </CopyButton>
           <span
             className="post-code__language"
           >
@@ -217,9 +365,9 @@ exports[`codeBlock should render html code block with proper indentation before
             dangerouslySetInnerHTML={
               Object {
                 "__html": "\`\`\`html
-&lt;div className=&apos;myClass&apos;&gt;
+<span class=\\"hljs-tag\\">&lt;<span class=\\"hljs-name\\">div</span> <span class=\\"hljs-attr\\">className</span>=<span class=\\"hljs-string\\">&#x27;myClass&#x27;</span>&gt;</span>
-  &lt;a href=&apos;https://randomgibberishurl.com&apos;&gt;ClickMe&lt;/a&gt;
+  <span class=\\"hljs-tag\\">&lt;<span class=\\"hljs-name\\">a</span> <span class=\\"hljs-attr\\">href</span>=<span class=\\"hljs-string\\">&#x27;https://randomgibberishurl.com&#x27;</span>&gt;</span>ClickMe<span class=\\"hljs-tag\\">&lt;/<span class=\\"hljs-name\\">a</span>&gt;</span>
-&lt;/div&gt;
+<span class=\\"hljs-tag\\">&lt;/<span class=\\"hljs-name\\">div</span>&gt;</span>
 \`\`\`
 ",
               }
@@ -227,9 +375,24 @@ exports[`codeBlock should render html code block with proper indentation before
           />
         </div>
       </div>
+    </CodeBlock>
+  </IntlProvider>
+</Provider>
 `;
 
 exports[`codeBlock should render typescript code block after syntax highlighting 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
   <IntlProvider
     defaultFormats={Object {}}
     defaultLocale="en"
@@ -404,9 +567,42 @@ const myFunction = () =&gt; {
       </div>
     </CodeBlock>
   </IntlProvider>
+</Provider>
 `;
 
 exports[`codeBlock should render typescript code block before syntax highlighting 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <IntlProvider
+    defaultFormats={Object {}}
+    defaultLocale="en"
+    fallbackOnEmptyString={true}
+    formats={Object {}}
+    locale="en"
+    messages={Object {}}
+    onError={[Function]}
+    onWarn={[Function]}
+    textComponent={Symbol(react.fragment)}
+  >
+    <CodeBlock
+      code="\`\`\`typescript
+const myFunction = () => {
+    console.log('This is a meaningful function');
+};
+\`\`\`
+"
+      language="typescript"
+    >
       <div
         className="post-code"
       >
@@ -422,7 +618,110 @@ const myFunction = () => {
 \`\`\`
 "
             placement="top"
+          >
+            <OverlayTrigger
+              defaultOverlayShown={false}
+              delayShow={400}
+              overlay={
+                <Tooltip
+                  bsClass="tooltip"
+                  id="copyButton"
+                  placement="right"
+                >
+                  <Memo(MemoizedFormattedMessage)
+                    defaultMessage="Copy code"
+                    id="copy.code.message"
                   />
+                </Tooltip>
+              }
+              placement="top"
+              shouldUpdatePosition={true}
+              trigger={
+                Array [
+                  "hover",
+                  "focus",
+                ]
+              }
+            >
+              <OverlayTrigger
+                defaultOverlayShown={false}
+                delayShow={400}
+                overlay={
+                  <OverlayWrapper
+                    bsClass="tooltip"
+                    id="copyButton"
+                    intl={
+                      Object {
+                        "$t": [Function],
+                        "defaultFormats": Object {},
+                        "defaultLocale": "en",
+                        "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
+                        "formatDate": [Function],
+                        "formatDateTimeRange": [Function],
+                        "formatDateToParts": [Function],
+                        "formatDisplayName": [Function],
+                        "formatList": [Function],
+                        "formatListToParts": [Function],
+                        "formatMessage": [Function],
+                        "formatNumber": [Function],
+                        "formatNumberToParts": [Function],
+                        "formatPlural": [Function],
+                        "formatRelativeTime": [Function],
+                        "formatTime": [Function],
+                        "formatTimeToParts": [Function],
+                        "formats": Object {},
+                        "formatters": Object {
+                          "getDateTimeFormat": [Function],
+                          "getDisplayNames": [Function],
+                          "getListFormat": [Function],
+                          "getMessageFormat": [Function],
+                          "getNumberFormat": [Function],
+                          "getPluralRules": [Function],
+                          "getRelativeTimeFormat": [Function],
+                        },
+                        "locale": "en",
+                        "messages": Object {},
+                        "onError": [Function],
+                        "onWarn": [Function],
+                        "textComponent": Symbol(react.fragment),
+                        "timeZone": undefined,
+                        "wrapRichTextChunksInFragment": undefined,
+                      }
+                    }
+                    placement="right"
+                  >
+                    <Memo(MemoizedFormattedMessage)
+                      defaultMessage="Copy code"
+                      id="copy.code.message"
+                    />
+                  </OverlayWrapper>
+                }
+                placement="top"
+                shouldUpdatePosition={true}
+                trigger={
+                  Array [
+                    "hover",
+                    "focus",
+                  ]
+                }
+              >
+                <span
+                  className="post-code__clipboard"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <i
+                    className="icon icon-content-copy"
+                    role="button"
+                  />
+                </span>
+              </OverlayTrigger>
+            </OverlayTrigger>
+          </CopyButton>
           <span
             className="post-code__language"
           >
@@ -445,20 +744,35 @@ const myFunction = () => {
           <code
             dangerouslySetInnerHTML={
               Object {
-          "__html": "\`\`\`typescript
+                "__html": "<span class=\\"hljs-string\\">\`\`</span><span class=\\"hljs-string\\">\`typescript
 const myFunction = () =&gt; {
-    console.log(&apos;This is a meaningful function&apos;);
+    console.log(&#x27;This is a meaningful function&#x27;);
 };
-\`\`\`
+\`</span><span class=\\"hljs-string\\">\`\`</span>
 ",
               }
             }
           />
         </div>
       </div>
+    </CodeBlock>
+  </IntlProvider>
+</Provider>
 `;
 
 exports[`codeBlock should render unknown language after syntax highlighting 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
   <IntlProvider
     defaultFormats={Object {}}
     defaultLocale="en"
@@ -615,9 +929,41 @@ it shouldn&apos;t highlight, it&apos;s just garbage
       </div>
     </CodeBlock>
   </IntlProvider>
+</Provider>
 `;
 
 exports[`codeBlock should render unknown language before syntax highlighting 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <IntlProvider
+    defaultFormats={Object {}}
+    defaultLocale="en"
+    fallbackOnEmptyString={true}
+    formats={Object {}}
+    locale="en"
+    messages={Object {}}
+    onError={[Function]}
+    onWarn={[Function]}
+    textComponent={Symbol(react.fragment)}
+  >
+    <CodeBlock
+      code="\`\`\`unknownLanguage
+this is my unknown language
+it shouldn't highlight, it's just garbage
+\`\`\`
+"
+      language="unknownLanguage"
+    >
       <div
         className="post-code"
       >
@@ -632,7 +978,110 @@ it shouldn't highlight, it's just garbage
 \`\`\`
 "
             placement="top"
+          >
+            <OverlayTrigger
+              defaultOverlayShown={false}
+              delayShow={400}
+              overlay={
+                <Tooltip
+                  bsClass="tooltip"
+                  id="copyButton"
+                  placement="right"
+                >
+                  <Memo(MemoizedFormattedMessage)
+                    defaultMessage="Copy code"
+                    id="copy.code.message"
                   />
+                </Tooltip>
+              }
+              placement="top"
+              shouldUpdatePosition={true}
+              trigger={
+                Array [
+                  "hover",
+                  "focus",
+                ]
+              }
+            >
+              <OverlayTrigger
+                defaultOverlayShown={false}
+                delayShow={400}
+                overlay={
+                  <OverlayWrapper
+                    bsClass="tooltip"
+                    id="copyButton"
+                    intl={
+                      Object {
+                        "$t": [Function],
+                        "defaultFormats": Object {},
+                        "defaultLocale": "en",
+                        "defaultRichTextElements": undefined,
+                        "fallbackOnEmptyString": true,
+                        "formatDate": [Function],
+                        "formatDateTimeRange": [Function],
+                        "formatDateToParts": [Function],
+                        "formatDisplayName": [Function],
+                        "formatList": [Function],
+                        "formatListToParts": [Function],
+                        "formatMessage": [Function],
+                        "formatNumber": [Function],
+                        "formatNumberToParts": [Function],
+                        "formatPlural": [Function],
+                        "formatRelativeTime": [Function],
+                        "formatTime": [Function],
+                        "formatTimeToParts": [Function],
+                        "formats": Object {},
+                        "formatters": Object {
+                          "getDateTimeFormat": [Function],
+                          "getDisplayNames": [Function],
+                          "getListFormat": [Function],
+                          "getMessageFormat": [Function],
+                          "getNumberFormat": [Function],
+                          "getPluralRules": [Function],
+                          "getRelativeTimeFormat": [Function],
+                        },
+                        "locale": "en",
+                        "messages": Object {},
+                        "onError": [Function],
+                        "onWarn": [Function],
+                        "textComponent": Symbol(react.fragment),
+                        "timeZone": undefined,
+                        "wrapRichTextChunksInFragment": undefined,
+                      }
+                    }
+                    placement="right"
+                  >
+                    <Memo(MemoizedFormattedMessage)
+                      defaultMessage="Copy code"
+                      id="copy.code.message"
+                    />
+                  </OverlayWrapper>
+                }
+                placement="top"
+                shouldUpdatePosition={true}
+                trigger={
+                  Array [
+                    "hover",
+                    "focus",
+                  ]
+                }
+              >
+                <span
+                  className="post-code__clipboard"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <i
+                    className="icon icon-content-copy"
+                    role="button"
+                  />
+                </span>
+              </OverlayTrigger>
+            </OverlayTrigger>
+          </CopyButton>
         </div>
         <div
           className="hljs"
@@ -650,4 +1099,7 @@ it shouldn&apos;t highlight, it&apos;s just garbage
           />
         </div>
       </div>
+    </CodeBlock>
+  </IntlProvider>
+</Provider>
 `;

webapp/channels/src/components/code_block/code_block.test.tsx

@@ -1,10 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {mount, ReactWrapper, shallow} from 'enzyme';
+import {mount, ReactWrapper} from 'enzyme';
 import React from 'react';
 import {act} from 'react-dom/test-utils';
 import {IntlProvider} from 'react-intl';
+import {Provider as ReduxProvider} from 'react-redux';
+
+import mockStore from 'tests/test_store';
 
 import CodeBlock from './code_block';
 
@@ -20,6 +23,11 @@ const actImmediate = (wrapper: ReactWrapper) =>
     );
 
 describe('codeBlock', () => {
+    const state = {
+        plugins: {components: {CodeBlockAction: []}},
+    };
+    const store = mockStore(state);
+
     test('should render typescript code block before syntax highlighting', async () => {
         const language = 'typescript';
         const input = `\`\`\`${language}
@@ -29,12 +37,17 @@ const myFunction = () => {
 \`\`\`
 `;
 
-        const wrapper = shallow(
+        const wrapper = mount(
+            <ReduxProvider store={store}>
+                <IntlProvider locale='en'>
                     <CodeBlock
                         code={input}
                         language={language}
-            />,
+                    />
+                </IntlProvider>
+            </ReduxProvider>,
         );
+        await actImmediate(wrapper);
 
         const languageHeader = wrapper.find('span.post-code__language').text();
         const lineNumbersDiv = wrapper.find('.post-code__line-numbers').exists();
@@ -55,12 +68,14 @@ const myFunction = () => {
 `;
 
         const wrapper = mount(
+            <ReduxProvider store={store}>
                 <IntlProvider locale='en'>
                     <CodeBlock
                         code={input}
                         language={language}
                     />
-            </IntlProvider>,
+                </IntlProvider>
+            </ReduxProvider>,
         );
         await actImmediate(wrapper);
 
@@ -73,7 +88,7 @@ const myFunction = () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should render html code block with proper indentation before syntax highlighting', () => {
+    test('should render html code block with proper indentation before syntax highlighting', async () => {
         const language = 'html';
         const input = `\`\`\`${language}
 <div className='myClass'>
@@ -82,12 +97,17 @@ const myFunction = () => {
 \`\`\`
 `;
 
-        const wrapper = shallow(
+        const wrapper = mount(
+            <ReduxProvider store={store}>
+                <IntlProvider locale='en'>
                     <CodeBlock
                         code={input}
                         language={language}
-            />,
+                    />
+                </IntlProvider>
+            </ReduxProvider>,
         );
+        await actImmediate(wrapper);
 
         const languageHeader = wrapper.find('span.post-code__language').text();
         const lineNumbersDiv = wrapper.find('.post-code__line-numbers').exists();
@@ -107,12 +127,14 @@ const myFunction = () => {
 `;
 
         const wrapper = mount(
+            <ReduxProvider store={store}>
                 <IntlProvider locale='en'>
                     <CodeBlock
                         code={input}
                         language={language}
                     />
-            </IntlProvider>,
+                </IntlProvider>
+            </ReduxProvider>,
         );
         await actImmediate(wrapper);
 
@@ -124,7 +146,7 @@ const myFunction = () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should render unknown language before syntax highlighting', () => {
+    test('should render unknown language before syntax highlighting', async () => {
         const language = 'unknownLanguage';
         const input = `\`\`\`${language}
 this is my unknown language
@@ -132,12 +154,17 @@ it shouldn't highlight, it's just garbage
 \`\`\`
 `;
 
-        const wrapper = shallow(
+        const wrapper = mount(
+            <ReduxProvider store={store}>
+                <IntlProvider locale='en'>
                     <CodeBlock
                         code={input}
                         language={language}
-            />,
+                    />
+                </IntlProvider>
+            </ReduxProvider>,
         );
+        await actImmediate(wrapper);
 
         const languageHeader = wrapper.find('span.post-code__language').exists();
         const lineNumbersDiv = wrapper.find('.post-code__line-numbers').exists();
@@ -156,12 +183,14 @@ it shouldn't highlight, it's just garbage
 `;
 
         const wrapper = mount(
+            <ReduxProvider store={store}>
                 <IntlProvider locale='en'>
                     <CodeBlock
                         code={input}
                         language={language}
                     />
-            </IntlProvider>,
+                </IntlProvider>
+            </ReduxProvider>,
         );
         await actImmediate(wrapper);
 

webapp/channels/src/components/code_block/code_block.tsx

@@ -3,6 +3,10 @@
 
 import React, {useCallback, useEffect, useState} from 'react';
 
+import {useSelector} from 'react-redux';
+
+import {GlobalState} from 'types/store';
+
 import CopyButton from 'components/copy_button';
 
 import * as SyntaxHighlighting from 'utils/syntax_highlighting';
@@ -67,10 +71,27 @@ const CodeBlock: React.FC<Props> = ({code, language, searchedContent}: Props) =>
         htmlContent = `${searchedContent} ${content}`;
     }
 
+    const codeBlockActions = useSelector((state: GlobalState) => state.plugins.components.CodeBlockAction);
+    const pluginItems = codeBlockActions?.
+        map((item) => {
+            if (!item.component) {
+                return null;
+            }
+
+            const Component = item.component as any;
+            return (
+                <Component
+                    key={item.id}
+                    code={code}
+                />
+            );
+        });
+
     return (
         <div className={className}>
             <div className='post-code__overlay'>
                 <CopyButton content={code}/>
+                {pluginItems}
                 {header}
             </div>
             <div className='hljs'>

webapp/channels/src/plugins/registry.ts

@@ -508,6 +508,12 @@ export default class PluginRegistry {
         return dispatchPluginComponentAction('PostEditorAction', this.id, component);
     });
 
+    // Register a component to the add to the code block header.
+    // Accepts a React component. Returns a unique identifier.
+    registerCodeBlockActionComponent = reArg(['component'], ({component}: DPluginComponentProp) => {
+        return dispatchPluginComponentAction('CodeBlockAction', this.id, component);
+    });
+
     // Register a component to the add to the new messages separator.
     // Accepts a React component. Returns a unique identifier.
     registerNewMessagesSeparatorActionComponent = reArg(['component'], ({component}: DPluginComponentProp) => {

webapp/channels/src/reducers/plugins/index.ts

@@ -183,6 +183,7 @@ const initialComponents: PluginsState['components'] = {
     PostDropdownMenu: [],
     PostAction: [],
     PostEditorAction: [],
+    CodeBlockAction: [],
     NewMessagesSeparatorAction: [],
     Product: [],
     RightHandSidebarComponent: [],

webapp/channels/src/types/store/plugins.ts

@@ -29,6 +29,7 @@ export type PluginsState = {
         PostDropdownMenu: PluginComponent[];
         PostAction: PluginComponent[];
         PostEditorAction: PluginComponent[];
+        CodeBlockAction: PluginComponent[];
         NewMessagesSeparatorAction: PluginComponent[];
         FilePreview: PluginComponent[];
         MainMenu: PluginComponent[];