Merge pull request #36 from wenytang-ms/wenyt/deeplink

feat: support the deeplink to connect data plane api to vscode extension for api center
Azure · Sep 9, 2024 · 9ff1b8e · 9ff1b8e
2 parents c8052ff + 8edb32e
commit 9ff1b8e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -18,16 +18,19 @@ import css from "./index.module.scss";
 const Header = () => {
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const dataApiEndpoint = useLocalStorage(LocalStorageKey.dataApiEndpoint);
+    const dataApiClientId = useLocalStorage(LocalStorageKey.dataApiClientId);
+    const dataApiTenantId = useLocalStorage(LocalStorageKey.dataApiTenantId);
     const [config, setConfig] = useState<Settings>();
     const configService = useConfigService();
     const authService = useAuthService();
     const session = useSession();
-
+    
     const fetchConfig = async () => {
         const config = await configService.getSettings();
         setConfig(config);
         dataApiEndpoint.set(config.dataApiHostName);
-
+        dataApiClientId.set(config.authentication.clientId);
+        dataApiTenantId.set(config.authentication.tenantId);
         const isAuthenticatedResponse = await authService.isAuthenticated();
         setIsAuthenticated(isAuthenticatedResponse);
     };

diff --git a/src/routes/Main/ApisList/ApisCards/index.tsx b/src/routes/Main/ApisList/ApisCards/index.tsx
@@ -13,7 +13,7 @@ import {
     MoreHorizontalRegular,
     ShareRegular,
 } from "@fluentui/react-icons";
-
+import { LocalStorageKey, useLocalStorage } from "../../../../util/useLocalStorage";
 import VsCodeLogo from "../../../../components/logos/VsCodeLogo";
 import { Api } from "../../../../contracts/api";
 
@@ -57,7 +57,9 @@ const ShareSubmenu: FC<{ shareLink: string; onLinkCopy: (isCopied: boolean) => v
 const ApiCard: FC<{ api: Api }> = ({ api }) => {
     const navigate = useNavigate();
     const [isCopied, setIsCopied] = useState<boolean>(false);
-
+    const dataApiEndpoint = useLocalStorage(LocalStorageKey.dataApiEndpoint).get()?.split('/')[0];
+    const dataApiClientId = useLocalStorage(LocalStorageKey.dataApiClientId).get();
+    const dataApiTenantId = useLocalStorage(LocalStorageKey.dataApiTenantId).get();
     return (
         <Tooltip
             content={
@@ -100,7 +102,7 @@ const ApiCard: FC<{ api: Api }> = ({ api }) => {
                                 icon={<VsCodeLogo />}
                                 onClick={e => {
                                     e.stopPropagation();
-                                    window.open(`vscode:extension/apidev.azure-api-center`);
+                                    window.open(`vscode://apidev.azure-api-center?clientId=${dataApiClientId}&tenantId=${dataApiTenantId}&runtimeUrl=${dataApiEndpoint}`);
                                 }}
                             >
                                 Open in Visual Studio Code

diff --git a/src/util/useLocalStorage.tsx b/src/util/useLocalStorage.tsx
@@ -15,6 +15,8 @@ export enum LocalStorageKey {
     searchRecents = "searchRecents",
     dataApiEndpoint = "dataApiEndpoint",
     isRestricted = "isRestricted",
+    dataApiClientId = "dataApiClientId",
+    dataApiTenantId = "dataApiTenantId",
 }
 
 type TLocalStorageValuesMap = {
@@ -23,6 +25,8 @@ type TLocalStorageValuesMap = {
     [LocalStorageKey.searchRecents]: string;
     [LocalStorageKey.dataApiEndpoint]: string;
     [LocalStorageKey.isRestricted]: string;
+    [LocalStorageKey.dataApiClientId]: string;
+    [LocalStorageKey.dataApiTenantId]: string;
 };
 
 const LocalStorageContext = createContext<{ iterator?: number; update?: Dispatch<SetStateAction<number>> }>({