Add firewall notification in quickstart tab (#1337)

src/Explorer/Tabs/PostgresConnectTab.tsx

@@ -120,7 +120,7 @@ You can enable or disable public IP addresses on the worker nodes on 'Networking
       </Stack>
 
       <Label>Secure connections</Label>
-      <Text>
+      <Text style={{ marginBottom: 8 }}>
         Only secure connections are supported. For production use cases, we recommend using the &apos;verify-full&apos;
         mode to enforce TLS certificate verification. You will need to download the Hyperscale (Citus) certificate, and
         provide it when connecting to the database.{" "}
@@ -128,6 +128,18 @@ You can enable or disable public IP addresses on the worker nodes on 'Networking
           Learn more
         </Link>
       </Text>
+
+      <Label>Connect with pgAdmin</Label>
+      <Text>
+        Refer to our{" "}
+        <Link
+          href="https://learn.microsoft.com/en-us/azure/postgresql/hyperscale/howto-connect?tabs=pgadmin"
+          target="_blank"
+        >
+          guide
+        </Link>{" "}
+        to help you connect via pgAdmin.
+      </Text>
     </div>
   );
 };

src/Explorer/Tabs/QuickstartTab.tsx

@@ -1,11 +1,15 @@
 import { Spinner, SpinnerSize, Stack } from "@fluentui/react";
-import { NotebookWorkspaceConnectionInfo } from "Contracts/DataModels";
+import { configContext } from "ConfigContext";
+import { NotebookWorkspaceConnectionInfo, PostgresFirewallRule } from "Contracts/DataModels";
 import { NotebookTerminalComponent } from "Explorer/Controls/Notebook/NotebookTerminalComponent";
 import Explorer from "Explorer/Explorer";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
+import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
 import { QuickstartGuide } from "Explorer/Quickstart/QuickstartGuide";
-import React, { useEffect } from "react";
+import { ReactTabKind, useTabs } from "hooks/useTabs";
+import React, { useEffect, useState } from "react";
 import { userContext } from "UserContext";
+import { armRequest } from "Utils/arm/request";
 
 interface QuickstartTabProps {
   explorer: Explorer;
@@ -13,29 +17,58 @@ interface QuickstartTabProps {
 
 export const QuickstartTab: React.FC<QuickstartTabProps> = ({ explorer }: QuickstartTabProps): JSX.Element => {
   const notebookServerInfo = useNotebook((state) => state.notebookServerInfo);
-  useEffect(() => {
-    explorer.allocateContainer();
-  }, []);
+  const [isAllPublicIPAddressEnabled, setIsAllPublicIPAddressEnabled] = useState<boolean>(true);
+
   const getNotebookServerInfo = (): NotebookWorkspaceConnectionInfo => ({
     authToken: notebookServerInfo.authToken,
     notebookServerEndpoint: `${notebookServerInfo.notebookServerEndpoint?.replace(/\/+$/, "")}/postgresql`,
     forwardingId: notebookServerInfo.forwardingId,
   });
 
+  const checkFirewallRules = async (): Promise<void> => {
+    const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response: any = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: firewallRulesUri,
+      method: "GET",
+      apiVersion: "2020-10-05-privatepreview",
+    });
+    const firewallRules: PostgresFirewallRule[] = response?.data?.value || response?.value || [];
+    const isEnabled = firewallRules.some(
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
+    );
+    setIsAllPublicIPAddressEnabled(isEnabled);
+
+    // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
+    if (!isEnabled && useTabs.getState().activeReactTab === ReactTabKind.Quickstart) {
+      setTimeout(checkFirewallRules, 30000);
+    }
+  };
+
+  useEffect(() => {
+    checkFirewallRules();
+  });
+
+  useEffect(() => {
+    explorer.allocateContainer();
+  }, []);
+
   return (
     <Stack style={{ width: "100%" }} horizontal>
       <Stack style={{ width: "50%" }}>
         <QuickstartGuide />
       </Stack>
       <Stack style={{ width: "50%", borderLeft: "black solid 1px" }}>
-        {notebookServerInfo?.notebookServerEndpoint && (
+        {!isAllPublicIPAddressEnabled && <QuickstartFirewallNotification />}
+        {isAllPublicIPAddressEnabled && notebookServerInfo?.notebookServerEndpoint && (
           <NotebookTerminalComponent
             notebookServerInfo={getNotebookServerInfo()}
             databaseAccount={userContext.databaseAccount}
             tabId="QuickstartPSQLShell"
           />
         )}
-        {!notebookServerInfo?.notebookServerEndpoint && (
+        {isAllPublicIPAddressEnabled && !notebookServerInfo?.notebookServerEndpoint && (
           <Spinner styles={{ root: { marginTop: 10 } }} size={SpinnerSize.large}></Spinner>
         )}
       </Stack>

src/Explorer/Tabs/TerminalTab.tsx

@@ -1,6 +1,9 @@
 import { Spinner, SpinnerSize } from "@fluentui/react";
+import { configContext } from "ConfigContext";
+import { QuickstartFirewallNotification } from "Explorer/Quickstart/QuickstartFirewallNotification";
 import * as ko from "knockout";
 import * as React from "react";
+import { armRequest } from "Utils/arm/request";
 import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -26,10 +29,15 @@ class NotebookTerminalComponentAdapter implements ReactAdapter {
   constructor(
     private getNotebookServerInfo: () => DataModels.NotebookWorkspaceConnectionInfo,
     private getDatabaseAccount: () => DataModels.DatabaseAccount,
-    private getTabId: () => string
+    private getTabId: () => string,
+    private isAllPublicIPAddressesEnabled: ko.Observable<boolean>
   ) {}
 
   public renderComponent(): JSX.Element {
+    if (!this.isAllPublicIPAddressesEnabled()) {
+      return <QuickstartFirewallNotification />;
+    }
+
     return this.parameters() ? (
       <NotebookTerminalComponent
         notebookServerInfo={this.getNotebookServerInfo()}
@@ -46,25 +54,33 @@ export default class TerminalTab extends TabsBase {
   public readonly html = '<div style="height: 100%" data-bind="react:notebookTerminalComponentAdapter"></div>  ';
   private container: Explorer;
   private notebookTerminalComponentAdapter: NotebookTerminalComponentAdapter;
+  private isAllPublicIPAddressesEnabled: ko.Observable<boolean>;
 
   constructor(options: TerminalTabOptions) {
     super(options);
     this.container = options.container;
+    this.isAllPublicIPAddressesEnabled = ko.observable(true);
     this.notebookTerminalComponentAdapter = new NotebookTerminalComponentAdapter(
       () => this.getNotebookServerInfo(options),
       () => userContext?.databaseAccount,
-      () => this.tabId
+      () => this.tabId,
+      this.isAllPublicIPAddressesEnabled
     );
     this.notebookTerminalComponentAdapter.parameters = ko.computed<boolean>(() => {
       if (
         this.isTemplateReady() &&
         useNotebook.getState().isNotebookEnabled &&
-        useNotebook.getState().notebookServerInfo?.notebookServerEndpoint
+        useNotebook.getState().notebookServerInfo?.notebookServerEndpoint &&
+        this.isAllPublicIPAddressesEnabled()
       ) {
         return true;
       }
       return false;
     });
+
+    if (options.kind === ViewModels.TerminalKind.Postgres) {
+      this.checkPostgresFirewallRules();
+    }
   }
 
   public getContainer(): Explorer {
@@ -110,4 +126,25 @@ export default class TerminalTab extends TabsBase {
       forwardingId: info.forwardingId,
     };
   }
+
+  private async checkPostgresFirewallRules(): Promise<void> {
+    const firewallRulesUri = `${userContext.databaseAccount.id}/firewallRules`;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response: any = await armRequest({
+      host: configContext.ARM_ENDPOINT,
+      path: firewallRulesUri,
+      method: "GET",
+      apiVersion: "2020-10-05-privatepreview",
+    });
+    const firewallRules: DataModels.PostgresFirewallRule[] = response?.data?.value || response?.value || [];
+    const isEnabled = firewallRules.some(
+      (rule) => rule.properties.startIpAddress === "0.0.0.0" && rule.properties.endIpAddress === "255.255.255.255"
+    );
+    this.isAllPublicIPAddressesEnabled(isEnabled);
+
+    // If the firewall rule is not added, check every 30 seconds to see if the user has added the rule
+    if (!isEnabled) {
+      setTimeout(() => this.checkPostgresFirewallRules(), 30000);
+    }
+  }
 }