Add connect tab for new quick start (#1273)

* Add connect tab

* Error handling

* Add button to open quick start blade

* Handle scenario where user don't have write access

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -2,6 +2,7 @@
  * Accordion top class
  */
 import { Coachmark, DirectionalHint, Image, Link, Stack, TeachingBubbleContent, Text } from "@fluentui/react";
+import { useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddDatabaseIcon from "../../../images/AddDatabase.svg";
 import NewQueryIcon from "../../../images/AddSqlQuery_16x16.svg";
@@ -237,8 +238,7 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
         iconSrc: ConnectIcon,
         title: "Connect",
         description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
-        // TODO: replace onClick function
-        onClick: () => 2,
+        onClick: () => useTabs.getState().openAndActivateConnectTab(),
       };
       heroes.push(connectBtn);
     } else {