Improve network settings warning message (#1380)

src/Contracts/ViewModels.ts

@@ -397,6 +397,7 @@ export interface DataExplorerInputsFrame {
   defaultCollectionThroughput?: CollectionCreationDefaults;
   isPostgresAccount?: boolean;
   isReplica?: boolean;
+  clientIpAddress?: string;
   // TODO: Update this param in the OSS extension to remove isFreeTier, isMarlinServerGroup, and make nodes a flat array instead of an nested array
   connectionStringParams?: any;
   flights?: readonly string[];

src/Explorer/Tabs/Tabs.tsx

@@ -24,11 +24,11 @@ interface TabsProps {
 }
 
 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab, showNetworkSettingsWarning } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs();
 
   return (
     <div className="tabsManagerContainer">
-      {showNetworkSettingsWarning && (
+      {networkSettingsWarning && (
         <MessageBar
           messageBarType={MessageBarType.warning}
           actions={
@@ -38,8 +38,7 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
           }
           messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
         >
-          The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure
+          {networkSettingsWarning}
-          Portal to proceed.
         </MessageBar>
       )}
       <div id="content" className="flexContainer hideOverflows">

src/Utils/NetworkUtility.ts

@@ -10,25 +10,25 @@ const PortalIPs: { [key: string]: string[] } = {
   usnat: ["7.28.202.68"],
 };
 
-export const doNetworkSettingsAllowDataExplorerAccess = (): boolean => {
+export const getNetworkSettingsWarningMessage = (clientIpAddress: string): string => {
+  const accountProperties = userContext.databaseAccount?.properties;
+
+  if (!accountProperties) {
+    return "";
+  }
+
+  // public network access is disabled
+  if (accountProperties.publicNetworkAccess !== "Enabled") {
+    return "The Network settings for this account are preventing access from Data Explorer. Please enable public access to proceed.";
+  }
+
+  const ipRules = accountProperties.ipRules;
+  // public network access is set to "All networks"
+  if (ipRules.length === 0) {
+    return "";
+  }
+
   if (userContext.apiType === "Cassandra" || userContext.apiType === "Mongo") {
-    const accountProperties = userContext.databaseAccount?.properties;
-
-    if (!accountProperties) {
-      return false;
-    }
-
-    // public network access is disabled
-    if (accountProperties.publicNetworkAccess !== "Enabled") {
-      return false;
-    }
-
-    const ipRules = accountProperties.ipRules;
-    // public network access is set to "All networks"
-    if (ipRules.length === 0) {
-      return true;
-    }
-
     const portalIPs = PortalIPs[userContext.portalEnv];
     let numberOfMatches = 0;
     ipRules.forEach((ipRule) => {
@@ -37,8 +37,16 @@ export const doNetworkSettingsAllowDataExplorerAccess = (): boolean => {
       }
     });
 
-    return numberOfMatches === portalIPs.length;
+    if (numberOfMatches !== portalIPs.length) {
-  }
+      return "The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure Portal to proceed.";
+    }
 
-  return true;
+    return "";
+  } else {
+    if (!clientIpAddress || ipRules.some((ipRule) => ipRule.ipAddressOrRange === clientIpAddress)) {
+      return "";
+    }
+
+    return "The Network settings for this account are preventing access from Data Explorer. Please add your current IP to the firewall rules to proceed.";
+  }
 };

src/hooks/useKnockoutExplorer.ts

@@ -1,6 +1,6 @@
 import { ReactTabKind, useTabs } from "hooks/useTabs";
 import { useEffect, useState } from "react";
-import { doNetworkSettingsAllowDataExplorerAccess } from "Utils/NetworkUtility";
+import { getNetworkSettingsWarningMessage } from "Utils/NetworkUtility";
 import { applyExplorerBindings } from "../applyExplorerBindings";
 import { AuthType } from "../AuthType";
 import { AccountKind, Flights } from "../Common/Constants";
@@ -382,8 +382,8 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     }
   }
 
-  const isDataExplorerAccessAllowed = doNetworkSettingsAllowDataExplorerAccess();
+  const warningMessage = getNetworkSettingsWarningMessage(inputs.clientIpAddress);
-  useTabs.getState().setShowNetworkSettingsWarning(!isDataExplorerAccessAllowed);
+  useTabs.getState().setNetworkSettingsWarning(warningMessage);
 
   if (inputs.features) {
     Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));

src/hooks/useTabs.ts

@@ -9,7 +9,7 @@ interface TabsState {
   openedReactTabs: ReactTabKind[];
   activeTab: TabsBase | undefined;
   activeReactTab: ReactTabKind | undefined;
-  showNetworkSettingsWarning: boolean;
+  networkSettingsWarning: string;
   activateTab: (tab: TabsBase) => void;
   activateNewTab: (tab: TabsBase) => void;
   activateReactTab: (tabkind: ReactTabKind) => void;
@@ -21,7 +21,7 @@ interface TabsState {
   closeAllNotebookTabs: (hardClose: boolean) => void;
   openAndActivateReactTab: (tabKind: ReactTabKind) => void;
   closeReactTab: (tabKind: ReactTabKind) => void;
-  setShowNetworkSettingsWarning: (showWarning: boolean) => void;
+  setNetworkSettingsWarning: (warningMessage: string) => void;
 }
 
 export enum ReactTabKind {
@@ -35,7 +35,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   openedReactTabs: [ReactTabKind.Home],
   activeTab: undefined,
   activeReactTab: ReactTabKind.Home,
-  showNetworkSettingsWarning: false,
+  networkSettingsWarning: "",
   activateTab: (tab: TabsBase): void => {
     if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
       set({ activeTab: tab, activeReactTab: undefined });
@@ -145,5 +145,5 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
 
     set({ openedReactTabs: updatedOpenedReactTabs });
   },
-  setShowNetworkSettingsWarning: (showWarning: boolean) => set({ showNetworkSettingsWarning: showWarning }),
+  setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
 }));