Merge pull request #2266 from github/koesie10/data-extension-editor-jump-to-usage

Add link to example usage in data extensions editor

Author: koesie10

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-view.ts

@@ -3,6 +3,7 @@ import {
   ExtensionContext,
   Uri,
   ViewColumn,
+  window,
   workspace,
 } from "vscode";
 import { AbstractWebview, WebviewPanelConfig } from "../abstract-webview";
@@ -25,6 +26,8 @@ import {
 import { DatabaseItem } from "../local-databases";
 import { CodeQLCliServer } from "../cli";
 import { asError, assertNever, getErrorMessage } from "../pure/helpers-pure";
+import { ResolvableLocationValue } from "../pure/bqrs-cli-types";
+import { showResolvableLocation } from "../interface-utils";
 import { decodeBqrsToExternalApiUsages } from "./bqrs";
 import { redactableError } from "../pure/errors";
 import { createDataExtensionYaml, loadDataExtensionYaml } from "./yaml";
@@ -73,6 +76,10 @@ export class DataExtensionsEditorView extends AbstractWebview<
       case "viewLoaded":
         await this.onWebViewLoaded();
 
+        break;
+      case "jumpToUsage":
+        await this.jumpToUsage(msg.location);
+
         break;
       case "saveModeledMethods":
         await this.saveModeledMethods(
@@ -96,6 +103,26 @@ export class DataExtensionsEditorView extends AbstractWebview<
     ]);
   }
 
+  protected async jumpToUsage(
+    location: ResolvableLocationValue,
+  ): Promise<void> {
+    try {
+      await showResolvableLocation(location, this.databaseItem);
+    } catch (e) {
+      if (e instanceof Error) {
+        if (e.message.match(/File not found/)) {
+          void window.showErrorMessage(
+            "Original file of this result is not in the database's source archive.",
+          );
+        } else {
+          void extLogger.log(`Unable to handleMsgFromView: ${e.message}`);
+        }
+      } else {
+        void extLogger.log(`Unable to handleMsgFromView: ${e}`);
+      }
+    }
+  }
+
   protected async saveModeledMethods(
     externalApiUsages: ExternalApiUsage[],
     modeledMethods: Record<string, ModeledMethod>,

extensions/ql-vscode/src/pure/interface-types.ts

@@ -493,6 +493,11 @@ export interface ShowProgressMessage {
   message: string;
 }
 
+export interface JumpToUsageMessage {
+  t: "jumpToUsage";
+  location: ResolvableLocationValue;
+}
+
 export interface SetExistingModeledMethods {
   t: "setExistingModeledMethods";
   existingModeledMethods: Record<string, ModeledMethod>;
@@ -511,4 +516,5 @@ export type ToDataExtensionsEditorMessage =
 
 export type FromDataExtensionsEditorMessage =
   | ViewLoadedMsg
+  | JumpToUsageMessage
   | SaveModeledMethods;

extensions/ql-vscode/src/view/data-extensions-editor/MethodRow.tsx

@@ -8,6 +8,7 @@ import {
 import * as React from "react";
 import { useCallback, useMemo } from "react";
 import styled from "styled-components";
+import { vscode } from "../vscode-api";
 
 import { ExternalApiUsage } from "../../data-extensions-editor/external-api-usage";
 import {
@@ -31,6 +32,13 @@ const SupportSpan = styled.span<SupportedUnsupportedSpanProps>`
   color: ${(props) => (props.supported ? "green" : "red")};
 `;
 
+const UsagesButton = styled.button`
+  color: var(--vscode-editor-foreground);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`;
+
 type Props = {
   externalApiUsage: ExternalApiUsage;
   modeledMethod: ModeledMethod | undefined;
@@ -115,6 +123,13 @@ export const MethodRow = ({
     [onChange, externalApiUsage, modeledMethod],
   );
 
+  const jumpToUsage = useCallback(() => {
+    vscode.postMessage({
+      t: "jumpToUsage",
+      location: externalApiUsage.usages[0].url,
+    });
+  }, [externalApiUsage]);
+
   return (
     <VSCodeDataGridRow>
       <VSCodeDataGridCell gridColumn={1}>
@@ -129,7 +144,9 @@ export const MethodRow = ({
         </SupportSpan>
       </VSCodeDataGridCell>
       <VSCodeDataGridCell gridColumn={3}>
-        {externalApiUsage.usages.length}
+        <UsagesButton onClick={jumpToUsage}>
+          {externalApiUsage.usages.length}
+        </UsagesButton>
       </VSCodeDataGridCell>
       <VSCodeDataGridCell gridColumn={4}>
         {(!externalApiUsage.supported ||