IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add code block actions plugin extensibility (#24348)

Browse Source 
* 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>
This commit is contained in:
Jesús Espino 2023-08-29 23:51:37 +02:00 committed by GitHub
parent dbb39e44cc
commit 8c8b8b7e79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 1029 additions and 519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1418
webapp/channels/src/components/code_block/__snapshots__/code_block.test.tsx.snap
View File

File diff suppressed because it is too large Load Diff

101
webapp/channels/src/components/code_block/code_block.test.tsx
View File

@ -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(
<CodeBlock
code={input}
language={language}
/>,
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(
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>,
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</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(
<CodeBlock
code={input}
language={language}
/>,
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(
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>,
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</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(
<CodeBlock
code={input}
language={language}
/>,
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(
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>,
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);

21
webapp/channels/src/components/code_block/code_block.tsx
View File

@ -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'>

6
webapp/channels/src/plugins/registry.ts
View File

@ -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) => {

1
webapp/channels/src/reducers/plugins/index.ts
View File

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

1
webapp/channels/src/types/store/plugins.ts
View File

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