feat: display view query text #1761
Conversation
|
Lets try to use Monaco because now we have different query colorization, and this may be confusing. |
|
Implemented using readonly MonacoEditor with some custom options |
|
Lets show buttons on the right, without shrinking the editor. |
| const themeValue = useThemeValue(); | ||
| const theme = `vs-${themeValue}`; | ||
|
|
||
| const editorOptions = React.useMemo<editor.IStandaloneEditorConstructionOptions>( |
There was a problem hiding this comment.
It's all constant options, let's move them outside from component.
|
|
||
| const editorOptions = React.useMemo<editor.IStandaloneEditorConstructionOptions>( | ||
| () => ({ | ||
| readOnly: true, |
There was a problem hiding this comment.
Is it possible to make editor totally not interactive?
| ); | ||
| } | ||
| return <React.Fragment>{value}</React.Fragment>; | ||
| export const TruncatedQuery = ({value = ''}: TruncatedQueryProps) => { |
There was a problem hiding this comment.
For now it's not truncated. Let's rename component
| className, | ||
| children, | ||
| language = YQL_LANGUAGE_ID, | ||
| }: SnippetProps): JSX.Element => { |
There was a problem hiding this comment.
for now we don't specify returning type. It seems we should always do (and add linter rule for this), or always don't...
| @@ -36,8 +20,11 @@ interface OneLineQueryWithPopoverProps { | |||
|
|
|||
| export const OneLineQueryWithPopover = ({value = ''}: OneLineQueryWithPopoverProps) => { | |||
| return ( | |||
| <CellWithPopover contentClassName={b('popover-content')} content={value}> | |||
| {value} | |||
| <CellWithPopover | |||
There was a problem hiding this comment.
It seems that popover is now redundant, because we don't truncate query any more.
| @@ -38,7 +37,7 @@ const queryTextColumn: Column<KeyValueRow> = { | |||
| sortAccessor: (row) => Number(row.CPUTimeUs), | |||
| render: ({row}) => ( | |||
| <div className={b('query')}> | |||
| <TruncatedQuery value={row.QueryText?.toString()} maxQueryHeight={MAX_QUERY_HEIGHT} /> | |||
| <TruncatedQuery value={row.QueryText?.toString()} /> | |||
| language={language} | ||
| theme={theme} | ||
| value={children} | ||
| height={SNIPPET_LENGTH * 20} |
There was a problem hiding this comment.
Let's make a variable height with maximum SNIPPET_LENGTH * 20
For example, here such height looks redundant.
|
Syntax is highlighted with a delay 
|
Closes #1755
Closes #919
Stand
CI Results
Test Status: ❌ FAILED
📊 Full Report
😟 No changes in tests. 😕
Bundle Size: ✅
Current: 65.89 MB | Main: 65.89 MB
Diff: +3.15 KB (0.00%)
✅ Bundle size unchanged.
ℹ️ CI Information