Initial Fabric support (#1607)

* Add Platform.Fabric to run in context of Fabric

* Use separate StyleConstants

We want to have more flexibility with Styles at runtime
but Constants depend on ConfigContext and therefore
get loaded very early at startup.

* Add Fabric specific styles and Fluent theme

documentDBFabric.less contains all styles for Fabric.
We use React.lazy to import them conditionally at
runtime preventing webpack from preprocessing
them into main.css.

* Restyle CommandBar for Fabric
with more roundness and native colors.

* Disable Notebooks when running in Fabric

* Disable Synapse and Scripts commands for Fabric

* Fix code formatting issues

* Fetch encrypted token from sessionStorage for fabric platform

* Fix Tabs style

* Dark refresh icons for Fabric

* Use new ResourceTree2 for Fabric

* Fluent tree should have a fixed width
otherwise the action buttons jump around on hover.

* Disable remaining Script actions in Fabric

* Revert accidentally committed change
which broke a test

* Fix cross-origin error second try

* Adjust @FabrixBoxMargin css

* Hide Database Scale node on Fabric

* Remove all Collection child nodes on Fabric

* Add a comment about why we need FabricPlatform.tsx

* Fix equality checks

* Fix more Colors for Fabric

* Switch resource tree to "medium" size

* Fix formatting again

* Fix formatting again

* Disable no-var-requires error on some intended var import.

* Increase memory limit for build

* Use standard Segoe UI font for Fabric

* Improve Tabs design for Fabric

* Fix active Tab style bug in Portal
introduced with 39a7765aef

---------

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

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 <></>;
+}

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",
+  },
+});

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";

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<string> => {
+  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<Props> = ({
   setEncryptedToken,
   login,
@@ -44,16 +57,8 @@ export const ConnectExplorer: React.FunctionComponent<Props> = ({
                   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);
               }}
             >