Fix Fabric Native ReadOnly mode (#2123)

* Add FabricNativeReadOnly mode

* Hide Settings for Fabric native readonly

* Fix strict compil

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, isFabricNativeReadOnly } from "Platform/Fabric/FabricUtil";
 import * as React from "react";
 import { userContext } from "UserContext";
 import CosmosDbBlackIcon from "../../../images/CosmosDB_black.svg";
@@ -62,6 +62,15 @@ const useStyles = makeStyles({
       margin: "auto",
     },
   },
+  single: {
+    gridColumn: "1 / 4",
+    gridRow: "1 / 3",
+    "& svg": {
+      width: "64px",
+      height: "64px",
+      margin: "auto",
+    },
+  },
   buttonContainer: {
     height: "100%",
     display: "flex",
@@ -150,7 +159,11 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
       },
     ];
 
-    return (
+    return isFabricNativeReadOnly() ? (
+      <div className={styles.buttonsContainer}>
+        <FabricHomeScreenButton className={styles.single} {...buttons[2]} />
+      </div>
+    ) : (
       <div className={styles.buttonsContainer}>
         <FabricHomeScreenButton className={styles.one} {...buttons[0]} />
         <FabricHomeScreenButton className={styles.two} {...buttons[1]} />
@@ -159,7 +172,7 @@ export const FabricHomeScreen: React.FC<SplashScreenProps> = (props: SplashScree
     );
   };
 
-  const title = "Build your database";
+  const title = isFabricNativeReadOnly() ? "Use your database" : "Build your database";
   return (
     <>
       <CosmosFluentProvider className={styles.homeContainer}>