Add a refresh button to the data extensions editor

This adds a refresh button to the data extensions editor when the
framework mode feature flag is enabled. If you are using framework mode,
you can have multiple tabs of the data extensions editor open in which
you are modeling the library separately from the application. When you
save the library in framework mode, the application mode will not
refresh and show that these calls have been modeled. Rather than using
apply, which might also save all modeled methods, you can now use the
refresh button to refresh the external API usages and whether they are
supported.

Author: koesie10

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

@@ -536,9 +536,8 @@ export interface OpenExtensionPackMessage {
   t: "openExtensionPack";
 }
 
-export interface OpenModelFileMessage {
-  t: "openModelFile";
-  library: string;
+export interface RefreshExternalApiUsages {
+  t: "refreshExternalApiUsages";
 }
 
 export interface SaveModeledMethods {
@@ -566,7 +565,7 @@ export type ToDataExtensionsEditorMessage =
 export type FromDataExtensionsEditorMessage =
   | ViewLoadedMsg
   | SwitchModeMessage
-  | OpenModelFileMessage
+  | RefreshExternalApiUsages
   | OpenExtensionPackMessage
   | JumpToUsageMessage
   | SaveModeledMethods

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

@@ -4,7 +4,6 @@ import {
   Uri,
   ViewColumn,
   window,
-  workspace,
 } from "vscode";
 import { join } from "path";
 import { RequestError } from "@octokit/request-error";
@@ -38,7 +37,6 @@ import { readQueryResults, runQuery } from "./external-api-usage-query";
 import {
   createDataExtensionYamlsForApplicationMode,
   createDataExtensionYamlsForFrameworkMode,
-  createFilenameForLibrary,
   loadDataExtensionYaml,
 } from "./yaml";
 import { ExternalApiUsage } from "./external-api-usage";
@@ -108,15 +106,8 @@ export class DataExtensionsEditorView extends AbstractWebview<
         );
 
         break;
-      case "openModelFile":
-        await window.showTextDocument(
-          await workspace.openTextDocument(
-            join(
-              this.extensionPack.path,
-              createFilenameForLibrary(msg.library),
-            ),
-          ),
-        );
+      case "refreshExternalApiUsages":
+        await this.loadExternalApiUsages();
 
         break;
       case "jumpToUsage":

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

@@ -139,6 +139,12 @@ export function DataExtensionsEditor({
     [],
   );
 
+  const onRefreshClick = useCallback(() => {
+    vscode.postMessage({
+      t: "refreshExternalApiUsages",
+    });
+  }, []);
+
   const onApplyClick = useCallback(() => {
     vscode.postMessage({
       t: "saveModeledMethods",
@@ -228,6 +234,11 @@ export function DataExtensionsEditor({
           <EditorContainer>
             <ButtonsContainer>
               <VSCodeButton onClick={onApplyClick}>Apply</VSCodeButton>
+              {viewState?.enableFrameworkMode && (
+                <VSCodeButton appearance="secondary" onClick={onRefreshClick}>
+                  Refresh
+                </VSCodeButton>
+              )}
               <VSCodeButton onClick={onGenerateClick}>
                 {viewState?.mode === Mode.Framework
                   ? "Generate"