+
+ );
+ } else {
+ return <>;
+ }
+}
+
function LoadingExplorer(): JSX.Element {
return (
diff --git a/src/Platform/Fabric/FabricPlatform.tsx b/src/Platform/Fabric/FabricPlatform.tsx
new file mode 100644
index 000000000..267584725
--- /dev/null
+++ b/src/Platform/Fabric/FabricPlatform.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+import "../../../less/documentDBFabric.less";
+// This is a dummy export, allowing us to conditionally import documentDBFabric.less
+// by lazy-importing this in Main.tsx (see LoadFabricOverrides() there)
+export default function InitFabric() {
+ return <>;
+}
diff --git a/src/Platform/Fabric/FabricTheme.tsx b/src/Platform/Fabric/FabricTheme.tsx
new file mode 100644
index 000000000..5288d91c4
--- /dev/null
+++ b/src/Platform/Fabric/FabricTheme.tsx
@@ -0,0 +1,208 @@
+import { Theme, createTheme } from "@fluentui/react";
+
+export const appThemeFabric: Theme = createTheme({
+ palette: {
+ /**
+ * Color code for themeDarker.
+ */
+ themeDarker: "#033f38",
+ /**
+ * Color code for themeDark.
+ */
+ themeDark: "#0a5c50",
+ /**
+ * Color code for themeDarkAlt.
+ */
+ themeDarkAlt: "#0c695a",
+ /**
+ * Color code for themePrimary.
+ */
+ themePrimary: "#117865",
+ /**
+ * Color code for themeSecondary.
+ */
+ themeSecondary: "#1f937e",
+ /**
+ * Color code for themeTertiary.
+ */
+ themeTertiary: "#52c7aa",
+ /**
+ * Color code for themeLight.
+ */
+ themeLight: "#9ee0cb",
+ /**
+ * Color code for themeLighter.
+ */
+ themeLighter: "#c0ecdd",
+ /**
+ * Color code for themeLighterAlt.
+ */
+ themeLighterAlt: "#e3f7ef",
+ /**
+ * Color code for the strongest color, which is black in the default theme.
+ * This is a very light color in inverted themes.
+ */
+ black: "#000000",
+ /**
+ * Color code for blackTranslucent40.
+ */
+ blackTranslucent40: "rgba(0, 0, 0, 0.4)",
+ /**
+ * Color code for neutralDark.
+ */
+ neutralDark: "#141414",
+ /**
+ * Color code for neutralPrimary.
+ */
+ neutralPrimary: "#242424",
+ /**
+ * Color code for neutralPrimaryAlt.
+ */
+ neutralPrimaryAlt: "#383838",
+ /**
+ * Color code for neutralSecondary.
+ */
+ neutralSecondary: "#5c5c5c",
+ /**
+ * Color code for neutralSecondaryAlt.
+ */
+ neutralSecondaryAlt: "#858585",
+ /**
+ * Color code for neutralTertiary.
+ */
+ neutralTertiary: "#9e9e9e",
+ /**
+ * Color code for neutralTertiaryAlt.
+ */
+ neutralTertiaryAlt: "#c7c7c7",
+ /**
+ * Color code for neutralQuaternary.
+ */
+ neutralQuaternary: "#d1d1d1",
+ /**
+ * Color code for neutralQuaternaryAlt.
+ */
+ neutralQuaternaryAlt: "#e0e0e0",
+ /**
+ * Color code for neutralLight.
+ */
+ neutralLight: "#ebebeb",
+ /**
+ * Color code for neutralLighter.
+ */
+ neutralLighter: "#f5f5f5",
+ /**
+ * Color code for neutralLighterAlt.
+ */
+ neutralLighterAlt: "#fafafa",
+ /**
+ * Color code for the accent.
+ */
+ accent: "#117865",
+ /**
+ * Color code for the softest color, which is white in the default theme. This is a very dark color in dark themes.
+ * This is the page background.
+ */
+ white: "#ffffff",
+ /**
+ * Color code for whiteTranslucent40
+ */
+ whiteTranslucent40: "rgba(255, 255, 255, 0.4)",
+ /**
+ * Color code for yellowDark.
+ */
+ yellowDark: "#d39300",
+ /**
+ * Color code for yellow.
+ */
+ yellow: "#fde300",
+ /**
+ * Color code for yellowLight.
+ */
+ yellowLight: "#fef7b2",
+ /**
+ * Color code for orange.
+ */
+ orange: "#f7630c",
+ /**
+ * Color code for orangeLight.
+ */
+ orangeLight: "#f98845",
+ /**
+ * Color code for orangeLighter.
+ */
+ orangeLighter: "#fdcfb4",
+ /**
+ * Color code for redDark.
+ */
+ redDark: "#750b1c",
+ /**
+ * Color code for red.
+ */
+ red: "#d13438",
+ /**
+ * Color code for magentaDark.
+ */
+ magentaDark: "#6b0043",
+ /**
+ * Color code for magenta.
+ */
+ magenta: "#bf0077",
+ /**
+ * Color code for magentaLight.
+ */
+ magentaLight: "#d957a8",
+ /**
+ * Color code for purpleDark.
+ */
+ purpleDark: "#401b6c",
+ /**
+ * Color code for purple.
+ */
+ purple: "#5c2e91",
+ /**
+ * Color code for purpleLight.
+ */
+ purpleLight: "#c6b1de",
+ /**
+ * Color code for blueDark.
+ */
+ blueDark: "#003966",
+ /**
+ * Color code for blueMid.
+ */
+ blueMid: "#004e8c",
+ /**
+ * Color code for blue.
+ */
+ blue: "#0078d4",
+ /**
+ * Color code for blueLight.
+ */
+ blueLight: "#3a96dd",
+ /**
+ * Color code for tealDark.
+ */
+ tealDark: "#006666",
+ /**
+ * Color code for teal.
+ */
+ teal: "#038387",
+ /**
+ * Color code for tealLight.
+ */
+ tealLight: "#00b7c3",
+ /**
+ * Color code for greenDark.
+ */
+ greenDark: "#0b6a0b",
+ /**
+ * Color code for green.
+ */
+ green: "#107c10",
+ /**
+ * Color code for greenLight.
+ */
+ greenLight: "#13a10e",
+ },
+});
diff --git a/src/Platform/Hosted/Components/AccountSwitcher.tsx b/src/Platform/Hosted/Components/AccountSwitcher.tsx
index c1085e0fc..d5690e848 100644
--- a/src/Platform/Hosted/Components/AccountSwitcher.tsx
+++ b/src/Platform/Hosted/Components/AccountSwitcher.tsx
@@ -4,7 +4,7 @@
import { DefaultButton, IButtonStyles, IContextualMenuItem } from "@fluentui/react";
import * as React from "react";
import { FunctionComponent, useEffect, useState } from "react";
-import { StyleConstants } from "../../../Common/Constants";
+import { StyleConstants } from "../../../Common/StyleConstants";
import { DatabaseAccount } from "../../../Contracts/DataModels";
import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
import { useSubscriptions } from "../../../hooks/useSubscriptions";
diff --git a/src/Platform/Hosted/Components/ConnectExplorer.tsx b/src/Platform/Hosted/Components/ConnectExplorer.tsx
index 3639bd113..575093bc2 100644
--- a/src/Platform/Hosted/Components/ConnectExplorer.tsx
+++ b/src/Platform/Hosted/Components/ConnectExplorer.tsx
@@ -1,7 +1,7 @@
import { useBoolean } from "@fluentui/react-hooks";
import * as React from "react";
-import ErrorImage from "../../../../images/error.svg";
import ConnectImage from "../../../../images/HdeConnectCosmosDB.svg";
+import ErrorImage from "../../../../images/error.svg";
import { AuthType } from "../../../AuthType";
import { HttpHeaders } from "../../../Common/Constants";
import { configContext } from "../../../ConfigContext";
@@ -16,6 +16,19 @@ interface Props {
setAuthType: (authType: AuthType) => void;
}
+export const fetchEncryptedToken = async (connectionString: string): Promise
=> {
+ const headers = new Headers();
+ headers.append(HttpHeaders.connectionString, connectionString);
+ const url = configContext.BACKEND_ENDPOINT + "/api/guest/tokens/generateToken";
+ const response = await fetch(url, { headers, method: "POST" });
+ if (!response.ok) {
+ throw response;
+ }
+ // This API has a quirk where it must be parsed twice
+ const result: GenerateTokenResponse = JSON.parse(await response.json());
+ return decodeURIComponent(result.readWrite || result.read);
+};
+
export const ConnectExplorer: React.FunctionComponent = ({
setEncryptedToken,
login,
@@ -44,16 +57,8 @@ export const ConnectExplorer: React.FunctionComponent = ({
return;
}
- const headers = new Headers();
- headers.append(HttpHeaders.connectionString, connectionString);
- const url = configContext.BACKEND_ENDPOINT + "/api/guest/tokens/generateToken";
- const response = await fetch(url, { headers, method: "POST" });
- if (!response.ok) {
- throw response;
- }
- // This API has a quirk where it must be parsed twice
- const result: GenerateTokenResponse = JSON.parse(await response.json());
- setEncryptedToken(decodeURIComponent(result.readWrite || result.read));
+ const encryptedToken = await fetchEncryptedToken(connectionString);
+ setEncryptedToken(encryptedToken);
setAuthType(AuthType.ConnectionString);
}}
>
diff --git a/src/SelfServe/SelfServeStyles.tsx b/src/SelfServe/SelfServeStyles.tsx
index 58688b505..5563286a5 100644
--- a/src/SelfServe/SelfServeStyles.tsx
+++ b/src/SelfServe/SelfServeStyles.tsx
@@ -1,5 +1,5 @@
import { IButtonStyles, ICommandBarStyles, ISeparatorStyles, IStackTokens } from "@fluentui/react";
-import { StyleConstants } from "../Common/Constants";
+import { StyleConstants } from "../Common/StyleConstants";
export const commandBarItemStyles: IButtonStyles = { root: { paddingLeft: 20 } };
diff --git a/src/Utils/WindowUtils.ts b/src/Utils/WindowUtils.ts
index 1ddd451e8..8776796f7 100644
--- a/src/Utils/WindowUtils.ts
+++ b/src/Utils/WindowUtils.ts
@@ -1,3 +1,5 @@
+import { Platform, configContext } from "./../ConfigContext";
+
export const getDataExplorerWindow = (currentWindow: Window): Window | undefined => {
// Data explorer is always loaded in an iframe, so traverse the parents until we hit the top and return the first child window.
try {
@@ -5,7 +7,11 @@ export const getDataExplorerWindow = (currentWindow: Window): Window | undefined
if (currentWindow.parent === currentWindow) {
return undefined;
}
- if (currentWindow.parent === currentWindow.top) {
+ if (configContext.platform === Platform.Fabric && currentWindow.parent.parent === currentWindow.top) {
+ // in Fabric data explorer is inside an extension iframe, so we have two parent iframes
+ return currentWindow;
+ }
+ if (configContext.platform !== Platform.Fabric && currentWindow.parent === currentWindow.top) {
return currentWindow;
}
currentWindow = currentWindow.parent;
diff --git a/src/hooks/useKnockoutExplorer.ts b/src/hooks/useKnockoutExplorer.ts
index 4492fe8e9..119e419cf 100644
--- a/src/hooks/useKnockoutExplorer.ts
+++ b/src/hooks/useKnockoutExplorer.ts
@@ -1,6 +1,8 @@
import { createUri } from "Common/UrlUtility";
import Explorer from "Explorer/Explorer";
+import { fetchEncryptedToken } from "Platform/Hosted/Components/ConnectExplorer";
import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
+import { fetchAccessData } from "hooks/usePortalAccessToken";
import { ReactTabKind, useTabs } from "hooks/useTabs";
import { useEffect, useState } from "react";
import { AuthType } from "../AuthType";
@@ -60,6 +62,26 @@ export function useKnockoutExplorer(platform: Platform): Explorer {
} else if (platform === Platform.Portal) {
const explorer = await configurePortal();
setExplorer(explorer);
+ } else if (platform === Platform.Fabric) {
+ // TODO For now, retrieve info from session storage. Replace with info injected into Data Explorer
+ const connectionString = sessionStorage.getItem("connectionString");
+ if (!connectionString) {
+ console.error("No connection string found in session storage");
+ return;
+ }
+ const encryptedToken = await fetchEncryptedToken(connectionString);
+ // TODO Duplicated from useTokenMetadata
+ const encryptedTokenMetadata = await fetchAccessData(encryptedToken);
+
+ const win = (window as unknown) as HostedExplorerChildFrame;
+ win.hostedConfig = {
+ authType: AuthType.EncryptedToken,
+ encryptedToken,
+ encryptedTokenMetadata,
+ };
+
+ const explorer = await configureHosted();
+ setExplorer(explorer);
}
}
};