Skip to content

Conversation

@astandrik
Copy link
Collaborator

@astandrik astandrik commented Dec 17, 2024

Closes #1755
Closes #919

Stand

CI Results

Test Status: ❌ FAILED

πŸ“Š Full Report

Total Passed Failed Flaky Skipped
222 213 6 3 0

😟 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
  • Test recordings for failed tests are available in the full report.
  • Bundle size is measured for the entire 'dist' directory.
  • πŸ“Š indicates links to detailed reports.
  • πŸ”Ί indicates increase, πŸ”½ decrease, and βœ… no change in bundle size.

@Raubzeug
Copy link
Contributor

Lets try to use Monaco because now we have different query colorization, and this may be confusing.

@astandrik
Copy link
Collaborator Author

astandrik commented Dec 19, 2024

@Raubzeug

Implemented using readonly MonacoEditor with some custom options
Redeployed stand

@Raubzeug
Copy link
Contributor

Lets show buttons on the right, without shrinking the editor.
Screenshot 2024-12-20 at 09 49 27

const themeValue = useThemeValue();
const theme = `vs-${themeValue}`;

const editorOptions = React.useMemo<editor.IStandaloneEditorConstructionOptions>(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's all constant options, let's move them outside from component.


const editorOptions = React.useMemo<editor.IStandaloneEditorConstructionOptions>(
() => ({
readOnly: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to make editor totally not interactive?
Screen Recording 2024-12-20 at 09 54 35

);
}
return <React.Fragment>{value}</React.Fragment>;
export const TruncatedQuery = ({value = ''}: TruncatedQueryProps) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now it's not truncated. Let's rename component

className,
children,
language = YQL_LANGUAGE_ID,
}: SnippetProps): JSX.Element => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for now we don't specify returning type. It seems we should always do (and add linter rule for this), or always don't...

return (
<CellWithPopover contentClassName={b('popover-content')} content={value}>
{value}
<CellWithPopover
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that popover is now redundant, because we don't truncate query any more.

render: ({row}) => (
<div className={b('query')}>
<TruncatedQuery value={row.QueryText?.toString()} maxQueryHeight={MAX_QUERY_HEIGHT} />
<TruncatedQuery value={row.QueryText?.toString()} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-12-20 at 10 00 03

language={language}
theme={theme}
value={children}
height={SNIPPET_LENGTH * 20}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make a variable height with maximum SNIPPET_LENGTH * 20

For example, here such height looks redundant.
Screenshot 2024-12-20 at 10 07 00

@artemmufazalov
Copy link
Member

Syntax is highlighted with a delay

Screenshot 2024-12-20 at 13 02 06

@astandrik astandrik marked this pull request as draft December 20, 2024 11:06
@astandrik astandrik marked this pull request as draft December 20, 2024 11:06
@astandrik astandrik closed this Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

use read-only monaco editor to display queries in history and saved views Display VIEW query text on Info tab inside read-only monaco

4 participants