From 2fe225009d1beef01b71f9a3e59fab8780ceaf22 Mon Sep 17 00:00:00 2001 From: Ryland Herrick Date: Thu, 10 Oct 2019 15:12:06 -0500 Subject: [PATCH] [Code] Export integration components (#47636) (#47880) * Expose CodeBlockPanel component This separates the current CodeBlock component into two: * CodeBlock, which simply renders the code view without padding/margin * CodeBlockPanel which wraps the CodeBlock in an EUIPanel and allows overrides It seems like APM will want to use the former for their integration, while the latter is currently used internally by Code. It's very simple, though, and could absolutely be inlined. * Update demo page to use CodeBlock This has no styling, and so a header could go right against it, it could be shown/hidden distinct from the header, etc. * Export our current integration components from main index Adds a 'shared' manifest that does all the reaching in; the main one just re-exports that. * Move shared exports to the frontend manifest This was incorrectly placed a level too high, in the plugin itself. * Rename to better reflect relationship CodeBlockPanel = EuiPanel + CodeBlock * Distinguish monaco CSS overrides with page-specific layout --- .../code_block.tsx} | 22 +++++----------- .../code_block/code_block_panel.tsx | 24 +++++++++++++++++ .../public/components/code_block/index.ts | 8 ++++++ .../code/public/components/editor/editor.tsx | 2 +- .../components/editor/references_panel.tsx | 4 +-- .../integrations/code_integrator.tsx | 2 +- .../public/components/integrations/index.tsx | 26 ++++++++----------- .../components/search_page/code_result.tsx | 4 +-- x-pack/legacy/plugins/code/public/index.ts | 2 ++ .../public/monaco/override_monaco_styles.scss | 2 +- x-pack/legacy/plugins/code/public/shared.ts | 11 ++++++++ 11 files changed, 69 insertions(+), 38 deletions(-) rename x-pack/legacy/plugins/code/public/components/{codeblock/codeblock.tsx => code_block/code_block.tsx} (89%) create mode 100644 x-pack/legacy/plugins/code/public/components/code_block/code_block_panel.tsx create mode 100644 x-pack/legacy/plugins/code/public/components/code_block/index.ts create mode 100644 x-pack/legacy/plugins/code/public/shared.ts diff --git a/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx b/x-pack/legacy/plugins/code/public/components/code_block/code_block.tsx similarity index 89% rename from x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx rename to x-pack/legacy/plugins/code/public/components/code_block/code_block.tsx index 89c9e9137158f..24524e9188105 100644 --- a/x-pack/legacy/plugins/code/public/components/codeblock/codeblock.tsx +++ b/x-pack/legacy/plugins/code/public/components/code_block/code_block.tsx @@ -4,9 +4,8 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiPanel } from '@elastic/eui'; import { editor, IRange } from 'monaco-editor'; -import React from 'react'; +import React, { createRef } from 'react'; import { ResizeChecker } from '../shared/resize_checker'; import { monaco } from '../../monaco/monaco'; @@ -19,7 +18,6 @@ export interface Position { export interface Props { content: string; - header: React.ReactNode; language: string; highlightRanges: IRange[]; onClick: (event: Position) => void; @@ -29,12 +27,10 @@ export interface Props { * @param lineIndex The index of the given line (0-indexed) */ lineNumber: (lineIndex: number) => string; - className?: string; } export class CodeBlock extends React.PureComponent { static defaultProps = { - header: undefined, folding: false, highlightRanges: [], language: 'text', @@ -42,7 +38,7 @@ export class CodeBlock extends React.PureComponent { onClick: () => {}, }; - private el: HTMLDivElement | null = null; + private el = createRef(); private ed?: editor.IStandaloneCodeEditor; private resizeChecker?: ResizeChecker; private currentHighlightDecorations: string[] = []; @@ -50,7 +46,7 @@ export class CodeBlock extends React.PureComponent { public async componentDidMount() { const { content, highlightRanges, language, onClick } = this.props; - if (this.el) { + if (this.el.current) { await this.tryLoadFile(content, language); this.ed!.onMouseDown((e: editor.IEditorMouseEvent) => { if ( @@ -80,7 +76,7 @@ export class CodeBlock extends React.PureComponent { }); this.currentHighlightDecorations = this.ed!.deltaDecorations([], decorations); } - this.resizeChecker = new ResizeChecker(this.el!); + this.resizeChecker = new ResizeChecker(this.el.current!); this.resizeChecker.on('resize', () => { setTimeout(() => { this.ed!.layout(); @@ -99,7 +95,7 @@ export class CodeBlock extends React.PureComponent { } private loadFile(code: string, language: string = 'text') { - this.ed = monaco.editor.create(this.el!, { + this.ed = monaco.editor.create(this.el.current!, { value: code, language, lineNumbers: this.lineNumber, @@ -160,15 +156,9 @@ export class CodeBlock extends React.PureComponent { } public render() { - const { className, header } = this.props; const height = this.lines.length * 18; - return ( - - {header} -
(this.el = r)} style={{ height }} /> - - ); + return
; } private lineNumber = (lineIndex: number) => this.props.lineNumber(lineIndex - 1); diff --git a/x-pack/legacy/plugins/code/public/components/code_block/code_block_panel.tsx b/x-pack/legacy/plugins/code/public/components/code_block/code_block_panel.tsx new file mode 100644 index 0000000000000..e8360c8f1998d --- /dev/null +++ b/x-pack/legacy/plugins/code/public/components/code_block/code_block_panel.tsx @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React, { ReactNode } from 'react'; +import { EuiPanel } from '@elastic/eui'; + +import { CodeBlock, Props as CodeBlockProps } from './code_block'; + +export interface Props extends CodeBlockProps { + className?: string; + header?: ReactNode; +} + +export const CodeBlockPanel = ({ className, header, ...rest }: Props) => ( + + {header} + + +); + +CodeBlockPanel.defaultProps = CodeBlock.defaultProps; diff --git a/x-pack/legacy/plugins/code/public/components/code_block/index.ts b/x-pack/legacy/plugins/code/public/components/code_block/index.ts new file mode 100644 index 0000000000000..f0a67df7fd546 --- /dev/null +++ b/x-pack/legacy/plugins/code/public/components/code_block/index.ts @@ -0,0 +1,8 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { CodeBlock, Position, Props as CodeBlockProps } from './code_block'; +export { CodeBlockPanel, Props as CodeBlockPanelProps } from './code_block_panel'; diff --git a/x-pack/legacy/plugins/code/public/components/editor/editor.tsx b/x-pack/legacy/plugins/code/public/components/editor/editor.tsx index 36821897571de..b5ac5b3733881 100644 --- a/x-pack/legacy/plugins/code/public/components/editor/editor.tsx +++ b/x-pack/legacy/plugins/code/public/components/editor/editor.tsx @@ -175,7 +175,7 @@ export class EditorComponent extends React.Component { />