Add firewall notification in quickstart tab (#1337)

src/Explorer/Quickstart/QuickstartFirewallNotification.tsx

@@ -0,0 +1,21 @@
+import { Image, PrimaryButton, Stack, Text } from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
+import React from "react";
+
+export const QuickstartFirewallNotification: React.FC = (): JSX.Element => (
+  <Stack style={{ padding: "16px 20px" }}>
+    <Text block>
+      To use the PostgreSQL shell, you need to add a firewall rule to allow access from all IP addresses
+      (0.0.0.0-255.255.255).
+    </Text>
+    <Text block>We strongly recommend removing this rule once you finish using the PostgreSQL shell.</Text>
+    <Image style={{ margin: "20px 0" }} src="../../../images/firewallRule.png" />
+    <PrimaryButton
+      style={{ width: 150 }}
+      onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}
+    >
+      Add firewall rule
+    </PrimaryButton>
+  </Stack>
+);