Add check and guidance for networking settings (#1348)

src/Explorer/Tabs/Tabs.tsx

@@ -1,3 +1,6 @@
+import { MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
 import { CollectionTabKind } from "Contracts/ViewModels";
 import Explorer from "Explorer/Explorer";
 import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
@@ -21,10 +24,24 @@ interface TabsProps {
 }
 
 export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
-  const { openedTabs, openedReactTabs, activeTab, activeReactTab } = useTabs();
+  const { openedTabs, openedReactTabs, activeTab, activeReactTab, showNetworkSettingsWarning } = useTabs();
 
   return (
     <div className="tabsManagerContainer">
+      {showNetworkSettingsWarning && (
+        <MessageBar
+          messageBarType={MessageBarType.warning}
+          actions={
+            <MessageBarButton onClick={() => sendMessage({ type: MessageTypes.OpenCosmosDBNetworkingBlade })}>
+              Change network settings
+            </MessageBarButton>
+          }
+          messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
+        >
+          The Network settings for this account are preventing access from Data Explorer. Please allow access from Azure
+          Portal to proceed.
+        </MessageBar>
+      )}
       <div id="content" className="flexContainer hideOverflows">
         <div className="nav-tabs-margin">
           <ul className="nav nav-tabs level navTabHeight" id="navTabs" role="tablist">

src/Explorer/Tree/Collection.ts

@@ -1160,23 +1160,6 @@ export default class Collection implements ViewModels.Collection {
     this.onDocumentDBDocumentsClick();
   }
 
-  /**
-   * Get correct collection label depending on account API
-   */
-  public getLabel(): string {
-    if (userContext.apiType === "Tables") {
-      return "Entities";
-    } else if (userContext.apiType === "Cassandra") {
-      return "Rows";
-    } else if (userContext.apiType === "Gremlin") {
-      return "Graph";
-    } else if (userContext.apiType === "Mongo") {
-      return "Documents";
-    }
-
-    return "Items";
-  }
-
   public getDatabase(): ViewModels.Database {
     return useDatabases.getState().findDatabaseWithId(this.databaseId);
   }

src/Explorer/Tree/ResourceTree.tsx

@@ -1,5 +1,6 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as React from "react";
+import { getItemName } from "Utils/APITypeUtils";
 import shallow from "zustand/shallow";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import DeleteIcon from "../../../images/delete.svg";
@@ -497,7 +498,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
   const buildCollectionNode = (database: ViewModels.Database, collection: ViewModels.Collection): TreeNode => {
     const children: TreeNode[] = [];
     children.push({
-      label: collection.getLabel(),
+      label: getItemName(),
       id: collection.isSampleCollection ? "sampleItems" : "",
       onClick: () => {
         collection.openTab();

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -1,6 +1,7 @@
 import { Callout, DirectionalHint, ICalloutProps, ILinkProps, Link, Stack, Text } from "@fluentui/react";
 import * as ko from "knockout";
 import * as React from "react";
+import { getItemName } from "Utils/APITypeUtils";
 import CosmosDBIcon from "../../../images/Azure-Cosmos-DB.svg";
 import DeleteIcon from "../../../images/delete.svg";
 import GalleryIcon from "../../../images/GalleryIcon.svg";
@@ -254,7 +255,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
   private buildCollectionNode(database: ViewModels.Database, collection: ViewModels.Collection): TreeNode {
     const children: TreeNode[] = [];
     children.push({
-      label: collection.getLabel(),
+      label: getItemName(),
       onClick: () => {
         collection.openTab();
         // push to most recent