From e220e0e74bdd5012368b67085fa35d24aa7abacd Mon Sep 17 00:00:00 2001
From: Laurent Nguyen <laurent.nguyen@microsoft.com>
Date: Tue, 29 Apr 2025 14:31:56 +0200
Subject: [PATCH] Fabric Home App Dev button opens Fabric UX extension Settings
 Connection tab

---
 src/Contracts/DataExplorerMessagesContract.ts | 9 ++++++---
 src/Contracts/FabricMessageTypes.ts           | 1 +
 src/Explorer/SplashScreen/FabricHome.tsx      | 4 ++--
 src/Platform/Fabric/FabricUtil.ts             | 9 +++++++++
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/Contracts/DataExplorerMessagesContract.ts b/src/Contracts/DataExplorerMessagesContract.ts
index a38940120..1dd9e049a 100644
--- a/src/Contracts/DataExplorerMessagesContract.ts
+++ b/src/Contracts/DataExplorerMessagesContract.ts
@@ -18,10 +18,13 @@ export type DataExploreMessageV3 =
   | {
       type: FabricMessageTypes.GetAllResourceTokens;
       id: string;
+    }
+  | {
+      type: FabricMessageTypes.OpenSettings;
+      params: [{ settingsId?: "About" | "Connection" }];
     };
-
-export type GetCosmosTokenMessageOptions = {
+export interface GetCosmosTokenMessageOptions {
   verb: "connect" | "delete" | "get" | "head" | "options" | "patch" | "post" | "put" | "trace";
   resourceType: "" | "dbs" | "colls" | "docs" | "sprocs" | "pkranges";
   resourceId: string;
-};
+}
diff --git a/src/Contracts/FabricMessageTypes.ts b/src/Contracts/FabricMessageTypes.ts
index 1d4576391..02871ca47 100644
--- a/src/Contracts/FabricMessageTypes.ts
+++ b/src/Contracts/FabricMessageTypes.ts
@@ -6,6 +6,7 @@ export enum FabricMessageTypes {
   GetAllResourceTokens = "GetAllResourceTokens",
   GetAccessToken = "GetAccessToken",
   Ready = "Ready",
+  OpenSettings = "OpenSettings",
 }
 
 export interface AuthorizationToken {
diff --git a/src/Explorer/SplashScreen/FabricHome.tsx b/src/Explorer/SplashScreen/FabricHome.tsx
index c235604d4..b95cc877d 100644
--- a/src/Explorer/SplashScreen/FabricHome.tsx
+++ b/src/Explorer/SplashScreen/FabricHome.tsx
@@ -5,7 +5,7 @@ import { Link, makeStyles, tokens } from "@fluentui/react-components";
 import { DocumentAddRegular, LinkMultipleRegular } from "@fluentui/react-icons";
 import { SampleDataImportDialog } from "Explorer/SplashScreen/SampleDataImportDialog";
 import { CosmosFluentProvider } from "Explorer/Theme/ThemeUtil";
-import { isFabricNative } from "Platform/Fabric/FabricUtil";
+import { isFabricNative, openSettingsConnectionTab } from "Platform/Fabric/FabricUtil";
 import * as React from "react";
 import { userContext } from "UserContext";
 import CosmosDbBlackIcon from "../../../images/CosmosDB_black.svg";
@@ -146,7 +146,7 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
         title: "App development",
         description: "Start here to use an SDK to build your apps",
         icon: <LinkMultipleRegular />,
-        onClick: () => window.open("https://aka.ms/cosmosdbfabricsdk", "_blank"),
+        onClick: () => openSettingsConnectionTab(),
       },
     ];
 
diff --git a/src/Platform/Fabric/FabricUtil.ts b/src/Platform/Fabric/FabricUtil.ts
index a9a653dd7..22767d20a 100644
--- a/src/Platform/Fabric/FabricUtil.ts
+++ b/src/Platform/Fabric/FabricUtil.ts
@@ -128,6 +128,15 @@ export const checkDatabaseResourceTokensValidity = (tokenTimestamp: number): voi
   }
 };
 
+/**
+ * Open the connection tab in the settings page of the Fabric UX extension
+ */
+export const openSettingsConnectionTab = (): void => {
+  if (configContext.platform === Platform.Fabric) {
+    sendCachedDataMessage(FabricMessageTypes.OpenSettings, [{ settingsId: "Connection" }]);
+  }
+};
+
 export const isFabric = (): boolean => configContext.platform === Platform.Fabric;
 export const isFabricMirroredKey = (): boolean =>
   isFabric() && userContext.fabricContext?.artifactType === CosmosDbArtifactType.MIRRORED_KEY;