diff --git a/packages/legend-application-studio/src/components/ShowcaseManager.tsx b/packages/legend-application-studio/src/components/ShowcaseManager.tsx index 2ffea894e7..3c6111b82a 100644 --- a/packages/legend-application-studio/src/components/ShowcaseManager.tsx +++ b/packages/legend-application-studio/src/components/ShowcaseManager.tsx @@ -271,7 +271,10 @@ const ShowcaseManagerCodeSearchResult = observer( className="showcase-manager__search__code-result__content__line" onClick={() => { flowResult( - showcaseManagerState.openShowcase(result.showcase), + showcaseManagerState.openShowcase( + result.showcase, + entry.line, + ), ).catch(applicationStore.alertUnhandledError); }} > @@ -330,7 +333,7 @@ const ShowcaseManagerSearchPanel = observer( if (!value) { showcaseManagerState.resetSearch(); } else { - debouncedSearch(); + debouncedSearch()?.catch(applicationStore.alertUnhandledError); } }; const onSearchKeyDown: React.KeyboardEventHandler = ( @@ -339,7 +342,7 @@ const ShowcaseManagerSearchPanel = observer( if (event.code === 'Enter') { debouncedSearch.cancel(); if (showcaseManagerState.searchText) { - debouncedSearch(); + debouncedSearch()?.catch(applicationStore.alertUnhandledError); } } else if (event.code === 'Escape') { searchTextInpurRef.current?.select(); @@ -478,30 +481,29 @@ const ShowcaseManagerSearchPanel = observer( {!showcaseManagerState.showcaseSearchResults && ( No results )} - {showcaseManagerState.showcaseSearchResults && - showcaseManagerState.showcaseSearchResults.map( - (showcase) => ( -
{ - flowResult( - showcaseManagerState.openShowcase(showcase), - ).catch(applicationStore.alertUnhandledError); - }} - > -
- {showcase.title} -
-
- {showcase.description ?? '(no description)'} -
+ {showcaseManagerState.showcaseSearchResults?.map( + (showcase) => ( +
{ + flowResult( + showcaseManagerState.openShowcase(showcase), + ).catch(applicationStore.alertUnhandledError); + }} + > +
+ {showcase.title}
- ), - )} +
+ {showcase.description ?? '(no description)'} +
+
+ ), + )} )} {showcaseManagerState.currentSearchCaterogy === @@ -510,14 +512,13 @@ const ShowcaseManagerSearchPanel = observer( {!showcaseManagerState.textSearchResults && ( No results )} - {showcaseManagerState.textSearchResults && - showcaseManagerState.textSearchResults.map((result) => ( - - ))} + {showcaseManagerState.textSearchResults?.map((result) => ( + + ))} )}
@@ -590,6 +591,7 @@ const ShowcaseViewer = observer( language={CODE_EDITOR_LANGUAGE.PURE} inputValue={showcase.code} isReadOnly={true} + lineToScroll={showcaseManagerState.showcaseLineToScroll} /> diff --git a/packages/legend-application-studio/src/stores/ShowcaseManagerState.ts b/packages/legend-application-studio/src/stores/ShowcaseManagerState.ts index ccc73cf8c5..e0a8e4b207 100644 --- a/packages/legend-application-studio/src/stores/ShowcaseManagerState.ts +++ b/packages/legend-application-studio/src/stores/ShowcaseManagerState.ts @@ -161,6 +161,7 @@ export class ShowcaseManagerState extends ApplicationExtensionState { showcases: ShowcaseMetadata[] = []; currentShowcase?: Showcase | undefined; + showcaseLineToScroll?: number | undefined; currentView = SHOWCASE_MANAGER_VIEW.EXPLORER; explorerTreeData?: TreeData | undefined; @@ -182,6 +183,7 @@ export class ShowcaseManagerState extends ApplicationExtensionState { textSearchResults: observable.ref, showcaseSearchResults: observable.ref, currentSearchCaterogy: observable, + showcaseLineToScroll: observable, setCurrentView: action, closeShowcase: action, setExplorerTreeData: action, @@ -253,13 +255,17 @@ export class ShowcaseManagerState extends ApplicationExtensionState { this.currentView = val; } - *openShowcase(metadata: ShowcaseMetadata): GeneratorFn { + *openShowcase( + metadata: ShowcaseMetadata, + showcaseLineToScroll?: number | undefined, + ): GeneratorFn { this.fetchShowcaseState.inProgress(); try { this.currentShowcase = (yield this.client.getShowcase( metadata.path, )) as Showcase; + this.showcaseLineToScroll = showcaseLineToScroll; this.fetchShowcaseState.pass(); } catch (error) { assertErrorThrown(error); @@ -273,6 +279,7 @@ export class ShowcaseManagerState extends ApplicationExtensionState { closeShowcase(): void { this.currentShowcase = undefined; + this.showcaseLineToScroll = undefined; } setExplorerTreeData(val: TreeData): void { diff --git a/packages/legend-lego/src/code-editor/CodeEditor.tsx b/packages/legend-lego/src/code-editor/CodeEditor.tsx index 47c85b3cea..dc15c72d22 100644 --- a/packages/legend-lego/src/code-editor/CodeEditor.tsx +++ b/packages/legend-lego/src/code-editor/CodeEditor.tsx @@ -40,10 +40,11 @@ export const CodeEditor: React.FC<{ hideGutter?: boolean | undefined; hidePadding?: boolean | undefined; hideActionBar?: boolean | undefined; + updateInput?: ((val: string) => void) | undefined; + lineToScroll?: number | undefined; extraEditorOptions?: | (monacoEditorAPI.IEditorOptions & monacoEditorAPI.IGlobalEditorOptions) | undefined; - updateInput?: ((val: string) => void) | undefined; }> = (props) => { const { inputValue, @@ -55,6 +56,7 @@ export const CodeEditor: React.FC<{ hideGutter, hidePadding, hideActionBar, + lineToScroll, extraEditorOptions, } = props; const applicationStore = useApplicationStore(); @@ -116,6 +118,12 @@ export const CodeEditor: React.FC<{ } }, [editor, language]); + useEffect(() => { + if (editor && lineToScroll !== undefined) { + editor.revealLineInCenter(lineToScroll); + } + }, [editor, lineToScroll]); + if (editor) { // dispose the old editor content setter in case the `updateInput` handler changes // for a more extensive note on this, see `LambdaEditor`