showcase: allow going to line from code search

finos · Jul 23, 2023 · 9e1985f · 9e1985f
1 parent c6e9bcb
commit 9e1985f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 36 deletions.
diff --git 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<HTMLInputElement> = (
@@ -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 && (
                     <BlankPanelContent>No results</BlankPanelContent>
                   )}
-                  {showcaseManagerState.showcaseSearchResults &&
-                    showcaseManagerState.showcaseSearchResults.map(
-                      (showcase) => (
-                        <div
-                          key={showcase.uuid}
-                          className="showcase-manager__search__showcase-result"
-                          title={`Showcase: ${showcase.title}\n\n${
-                            showcase.description ?? '(no description)'
-                          }\n\nClick to open showcase`}
-                          onClick={() => {
-                            flowResult(
-                              showcaseManagerState.openShowcase(showcase),
-                            ).catch(applicationStore.alertUnhandledError);
-                          }}
-                        >
-                          <div className="showcase-manager__search__showcase-result__title">
-                            {showcase.title}
-                          </div>
-                          <div className="showcase-manager__search__showcase-result__description">
-                            {showcase.description ?? '(no description)'}
-                          </div>
+                  {showcaseManagerState.showcaseSearchResults?.map(
+                    (showcase) => (
+                      <div
+                        key={showcase.uuid}
+                        className="showcase-manager__search__showcase-result"
+                        title={`Showcase: ${showcase.title}\n\n${
+                          showcase.description ?? '(no description)'
+                        }\n\nClick to open showcase`}
+                        onClick={() => {
+                          flowResult(
+                            showcaseManagerState.openShowcase(showcase),
+                          ).catch(applicationStore.alertUnhandledError);
+                        }}
+                      >
+                        <div className="showcase-manager__search__showcase-result__title">
+                          {showcase.title}
                         </div>
-                      ),
-                    )}
+                        <div className="showcase-manager__search__showcase-result__description">
+                          {showcase.description ?? '(no description)'}
+                        </div>
+                      </div>
+                    ),
+                  )}
                 </>
               )}
               {showcaseManagerState.currentSearchCaterogy ===
@@ -510,14 +512,13 @@ const ShowcaseManagerSearchPanel = observer(
                   {!showcaseManagerState.textSearchResults && (
                     <BlankPanelContent>No results</BlankPanelContent>
                   )}
-                  {showcaseManagerState.textSearchResults &&
-                    showcaseManagerState.textSearchResults.map((result) => (
-                      <ShowcaseManagerCodeSearchResult
-                        key={result.showcase.uuid}
-                        showcaseManagerState={showcaseManagerState}
-                        result={result}
-                      />
-                    ))}
+                  {showcaseManagerState.textSearchResults?.map((result) => (
+                    <ShowcaseManagerCodeSearchResult
+                      key={result.showcase.uuid}
+                      showcaseManagerState={showcaseManagerState}
+                      result={result}
+                    />
+                  ))}
                 </>
               )}
             </div>
@@ -590,6 +591,7 @@ const ShowcaseViewer = observer(
               language={CODE_EDITOR_LANGUAGE.PURE}
               inputValue={showcase.code}
               isReadOnly={true}
+              lineToScroll={showcaseManagerState.showcaseLineToScroll}
             />
           </div>
         </div>

diff --git 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<ShowcasesExplorerTreeNodeData> | 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<void> {
+  *openShowcase(
+    metadata: ShowcaseMetadata,
+    showcaseLineToScroll?: number | undefined,
+  ): GeneratorFn<void> {
     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<ShowcasesExplorerTreeNodeData>): void {

diff --git 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`