Added preview environment tab and automatic selection of tab based on query param to cluster dashboard

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -12,13 +12,23 @@ import ClusterSettings from "./ClusterSettings";
 import useAuth from "shared/auth/useAuth";
 import Metrics from "./Metrics";
 import EventsTab from "./events/EventsTab";
-
-type TabEnum = "nodes" | "settings" | "namespaces" | "metrics" | "events";
+import EnvironmentList from "./preview-environments/EnvironmentList";
+import { useLocation } from "react-router";
+import { getQueryParam } from "shared/routing";
+
+type TabEnum =
+  | "preview_environments"
+  | "nodes"
+  | "settings"
+  | "namespaces"
+  | "metrics"
+  | "events";
 
 const tabOptions: {
   label: string;
   value: TabEnum;
 }[] = [
+  { label: "PR preview", value: "preview_environments" },
   { label: "Nodes", value: "nodes" },
   { label: "Events", value: "events" },
   { label: "Metrics", value: "metrics" },
@@ -27,13 +37,16 @@ const tabOptions: {
 ];
 
 export const Dashboard: React.FunctionComponent = () => {
-  const [currentTab, setCurrentTab] = useState<TabEnum>("nodes");
+  const [currentTab, setCurrentTab] = useState<TabEnum>("preview_environments");
   const [currentTabOptions, setCurrentTabOptions] = useState(tabOptions);
   const [isAuthorized] = useAuth();
+  const location = useLocation();
 
   const context = useContext(Context);
   const renderTab = () => {
     switch (currentTab) {
+      case "preview_environments":
+        return <EnvironmentList />;
       case "events":
         return <EventsTab />;
       case "settings":
@@ -59,6 +72,13 @@ export const Dashboard: React.FunctionComponent = () => {
     );
   }, [isAuthorized]);
 
+  useEffect(() => {
+    const selectedTab = getQueryParam({ location }, "selected_tab");
+    if (tabOptions.find((tab) => tab.value === selectedTab)) {
+      setCurrentTab(selectedTab as any);
+    }
+  }, [location]);
+
   return (
     <>
       <TitleSection>