added a pop up in click of mongo shell if its entra only flow (#2531)

* added a pop up in click of mongo shell if its entra only flow

* formatting updated

---------

Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -19,10 +19,16 @@ import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { Platform, configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { userContext } from "../../../UserContext";
+import {
+  userContext,
+  isVCoreMongoNativeAuthDisabled,
+  VCoreMongoNativeAuthDisabledMessage,
+  VCoreMongoNativeAuthLearnMoreUrl,
+} from "../../../UserContext";
 import { isRunningOnNationalCloud } from "../../../Utils/CloudUtils";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import { useDialog } from "../../Controls/Dialog";
 import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
 import { BrowseQueriesPane } from "../../Panes/BrowseQueriesPane/BrowseQueriesPane";
@@ -499,12 +505,21 @@ function createOpenTerminalButtonByKind(
   const label = `Open ${terminalFriendlyName()} shell`;
   const tooltip =
     "This feature is not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks.";
+  const isNativeAuthDisabled = terminalKind === ViewModels.TerminalKind.VCoreMongo && isVCoreMongoNativeAuthDisabled();
   const disableButton =
-    !useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled;
+    (!useNotebook.getState().isNotebooksEnabledForAccount && !useNotebook.getState().isNotebookEnabled) ||
+    isNativeAuthDisabled;
   return {
     iconSrc: HostedTerminalIcon,
     iconAlt: label,
     onCommandClick: () => {
+      if (isNativeAuthDisabled) {
+        useDialog.getState().showOkModalDialog("Native Authentication Disabled", VCoreMongoNativeAuthDisabledMessage, {
+          linkText: "Learn more",
+          linkUrl: VCoreMongoNativeAuthLearnMoreUrl,
+        });
+        return;
+      }
       if (useNotebook.getState().isNotebookEnabled || userContext.features.enableCloudShell) {
         container.openNotebookTerminal(terminalKind);
       }
@@ -513,7 +528,7 @@ function createOpenTerminalButtonByKind(
     hasPopup: false,
     disabled: disableButton,
     ariaLabel: label,
-    tooltipText: !disableButton ? "" : tooltip,
+    tooltipText: isNativeAuthDisabled ? VCoreMongoNativeAuthDisabledMessage : !disableButton ? "" : tooltip,
   };
 }
 

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -33,8 +33,14 @@ import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
 import VisualStudioIcon from "../../../images/VisualStudio.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
 import * as Constants from "../../Common/Constants";
-import { userContext } from "../../UserContext";
+import {
+  isVCoreMongoNativeAuthDisabled,
+  userContext,
+  VCoreMongoNativeAuthDisabledMessage,
+  VCoreMongoNativeAuthLearnMoreUrl,
+} from "../../UserContext";
 import { getCollectionName } from "../../Utils/APITypeUtils";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import { useNotebook } from "../Notebook/useNotebook";
@@ -413,11 +419,23 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     }
 
     if (userContext.apiType === "VCoreMongo") {
+      const isNativeAuthDisabled = isVCoreMongoNativeAuthDisabled();
       return {
         iconSrc: PowerShellIcon,
         title: t(Keys.splashScreen.shell.vcoreMongo.title),
         description: t(Keys.splashScreen.shell.vcoreMongo.description),
-        onClick: () => container.openNotebookTerminal(TerminalKind.VCoreMongo),
+        onClick: () => {
+          if (isNativeAuthDisabled) {
+            useDialog
+              .getState()
+              .showOkModalDialog("Native Authentication Disabled", VCoreMongoNativeAuthDisabledMessage, {
+                linkText: "Learn more",
+                linkUrl: VCoreMongoNativeAuthLearnMoreUrl,
+              });
+          } else {
+            container.openNotebookTerminal(TerminalKind.VCoreMongo);
+          }
+        },
       };
     }
 

src/Explorer/Tabs/VCoreMongoQuickstartTab.tsx

@@ -1,24 +1,44 @@
-import { Stack } from "@fluentui/react";
+import { Link, MessageBar, MessageBarType, Stack, Text } from "@fluentui/react";
 
 import { TerminalKind } from "Contracts/ViewModels";
 import { VcoreMongoQuickstartGuide } from "Explorer/Quickstart/VCoreMongoQuickstartGuide";
 import { CloudShellTerminalComponent } from "Explorer/Tabs/CloudShellTab/CloudShellTerminalComponent";
-import { userContext } from "UserContext";
+import {
+  isVCoreMongoNativeAuthDisabled,
+  userContext,
+  VCoreMongoNativeAuthDisabledMessage,
+  VCoreMongoNativeAuthLearnMoreUrl,
+} from "UserContext";
 import React from "react";
 
 export const VcoreMongoQuickstartTab: React.FC = (): JSX.Element => {
+  const isNativeAuthDisabled = isVCoreMongoNativeAuthDisabled();
+
   return (
     <Stack style={{ width: "100%" }} horizontal>
       <Stack style={{ width: "50%" }}>
         <VcoreMongoQuickstartGuide />
       </Stack>
       <Stack style={{ width: "50%", borderLeft: "black solid 1px" }}>
-        <CloudShellTerminalComponent
-          databaseAccount={userContext.databaseAccount}
-          tabId="QuickstartVcoreMongoShell"
-          username={userContext.vcoreMongoConnectionParams?.adminLogin}
-          shellType={TerminalKind.VCoreMongo}
-        />
+        {isNativeAuthDisabled ? (
+          <Stack style={{ margin: "auto", padding: 20 }}>
+            <MessageBar messageBarType={MessageBarType.warning} isMultiline={true}>
+              <Text>
+                {VCoreMongoNativeAuthDisabledMessage}{" "}
+                <Link href={VCoreMongoNativeAuthLearnMoreUrl} target="_blank">
+                  Learn more
+                </Link>
+              </Text>
+            </MessageBar>
+          </Stack>
+        ) : (
+          <CloudShellTerminalComponent
+            databaseAccount={userContext.databaseAccount}
+            tabId="QuickstartVcoreMongoShell"
+            username={userContext.vcoreMongoConnectionParams?.adminLogin}
+            shellType={TerminalKind.VCoreMongo}
+          />
+        )}
       </Stack>
     </Stack>
   );