From 19cc6893ab435c825be6ae25ac1fbc0b21c15278 Mon Sep 17 00:00:00 2001
From: gabalafou <gabriel@fouasnon.com>
Date: Wed, 1 May 2024 04:26:48 -0400
Subject: [PATCH] Bye tabs, hi URLs (#389)

---
 src/App.tsx                                   |  18 +--
 .../components/EnvironmentCreate.tsx          |  40 +++---
 .../components/EnvironmentDetails.tsx         | 116 +++++++++++++-----
 .../environments/components/Environment.tsx   |   6 +-
 .../components/EnvironmentDropdown.tsx        |  53 ++------
 .../environments/components/Environments.tsx  |  78 ++++++------
 src/features/environments/reducer.ts          |  60 +++++----
 src/features/namespaces/reducer.ts            |  30 +++--
 src/features/notification/index.ts            |   1 +
 .../notification/notificationSlice.ts         |  30 +++++
 .../components/AddRequestedPackage.tsx        |   1 -
 src/features/tabs/components/PageTabs.tsx     | 114 -----------------
 src/features/tabs/components/index.tsx        |   1 -
 src/features/tabs/index.tsx                   |   1 -
 src/features/tabs/tabsSlice.ts                |   8 +-
 src/layouts/PageLayout.tsx                    |  70 ++++-------
 src/{AppExample.tsx => main.tsx}              |   0
 src/routes.tsx                                |  26 ++++
 src/store/rootReducer.ts                      |  10 +-
 src/styles/StyledIconButton.tsx               |   2 +-
 src/styles/StyledTab.tsx                      |  23 ----
 src/styles/StyledTabs.tsx                     |  13 --
 src/styles/index.tsx                          |   2 -
 src/utils/helpers/namespaces.ts               |  16 ++-
 test/PageTabs.test.tsx                        |  93 --------------
 .../EnvironmentCreate.test.tsx                |   9 +-
 .../EnvironmentDetails.test.tsx               |  17 +--
 .../EnvironmentDetailsHeader.test.tsx         |  18 ++-
 .../SpecificationEdit.test.tsx                |  13 +-
 test/environments/Environment.test.tsx        |  20 +--
 .../environments/EnvironmentDropdown.test.tsx |  20 +--
 test/environments/EnvironmentList.test.tsx    |   7 +-
 test/environments/Environments.test.tsx       |   9 +-
 test/playwright/test_ux.py                    |  43 +++----
 .../AddRequestedPackage.test.tsx              |  17 +--
 webpack.config.js                             |   7 +-
 36 files changed, 403 insertions(+), 589 deletions(-)
 create mode 100644 src/features/notification/index.ts
 create mode 100644 src/features/notification/notificationSlice.ts
 delete mode 100644 src/features/tabs/components/PageTabs.tsx
 delete mode 100644 src/features/tabs/components/index.tsx
 rename src/{AppExample.tsx => main.tsx} (100%)
 create mode 100644 src/routes.tsx
 delete mode 100644 src/styles/StyledTab.tsx
 delete mode 100644 src/styles/StyledTabs.tsx
 delete mode 100644 test/PageTabs.test.tsx

diff --git a/src/App.tsx b/src/App.tsx
index dae49ed7..f469c10e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,32 +1,20 @@
 import { ThemeProvider } from "@mui/material";
 import React from "react";
 import { Provider } from "react-redux";
-import { BrowserRouter as Router } from "react-router-dom";
-import { Route, Routes } from "react-router";
+import { RouterProvider } from "react-router-dom";
 
-import { PageLayout } from "./layouts";
 import {
   IPreferences,
   PrefContext,
   prefDefault,
   prefGlobal
 } from "./preferences";
+import { router } from "./routes";
 import { store } from "./store";
 import { condaStoreTheme, grayscaleTheme } from "./theme";
 
 import "../style/index.css";
 
-const AppRouter = () => {
-  // for now, trivial routing is sufficient
-  return (
-    <Router>
-      <Routes>
-        <Route path="*" element={<PageLayout />} />
-      </Routes>
-    </Router>
-  );
-};
-
 export interface IAppProps {
   pref?: Partial<IPreferences>;
 }
@@ -86,7 +74,7 @@ export class App<
           }
         >
           <Provider store={store}>
-            <AppRouter />
+            <RouterProvider router={router} />
           </Provider>
         </ThemeProvider>
       </PrefContext.Provider>
diff --git a/src/features/environmentCreate/components/EnvironmentCreate.tsx b/src/features/environmentCreate/components/EnvironmentCreate.tsx
index f369202c..a23306fb 100644
--- a/src/features/environmentCreate/components/EnvironmentCreate.tsx
+++ b/src/features/environmentCreate/components/EnvironmentCreate.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import { stringify } from "yaml";
@@ -16,23 +17,38 @@ import {
 } from "../../../features/metadata";
 import {
   environmentOpened,
-  closeCreateNewEnvironmentTab
+  closeCreateNewEnvironmentTab,
+  openCreateNewEnvironmentTab
 } from "../../../features/tabs";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
 import { SpecificationCreate, SpecificationReadOnly } from "./Specification";
 import { descriptionChanged, nameChanged } from "../environmentCreateSlice";
 import createLabel from "../../../common/config/labels";
-
-export interface IEnvCreate {
-  environmentNotification: (notification: any) => void;
-}
+import { showNotification } from "../../notification/notificationSlice";
 
 interface ICreateEnvironmentArgs {
   code: { channels: string[]; dependencies: string[] };
 }
 
-export const EnvironmentCreate = ({ environmentNotification }: IEnvCreate) => {
+export const EnvironmentCreate = () => {
   const dispatch = useAppDispatch();
+
+  // Url routing params
+  // If user loads the app at /<namespace_name>/new-environment
+  // This will put the app in the correct state
+  const { namespaceName } = useParams<{
+    namespaceName: string;
+  }>();
+
+  useEffect(() => {
+    if (namespaceName) {
+      dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
+      dispatch(openCreateNewEnvironmentTab(namespaceName));
+    }
+  }, [namespaceName]);
+
+  const navigate = useNavigate();
+
   const { mode } = useAppSelector(state => state.environmentDetails);
   const { name, description } = useAppSelector(
     state => state.environmentCreate
@@ -84,17 +100,13 @@ export const EnvironmentCreate = ({ environmentNotification }: IEnvCreate) => {
       dispatch(
         environmentOpened({
           environment,
-          selectedEnvironmentId: newEnvId,
           canUpdate: true
         })
       );
+      // After new environment has been created, navigate to the new environment's web page
+      navigate(`/${namespace}/${name}`);
       dispatch(currentBuildIdChanged(data.build_id));
-      environmentNotification({
-        data: {
-          show: true,
-          description: createLabel(name, "create")
-        }
-      });
+      dispatch(showNotification(createLabel(name, "create")));
     } catch (e) {
       setError({
         message: e?.data?.message ?? createLabel(undefined, "error"),
diff --git a/src/features/environmentDetails/components/EnvironmentDetails.tsx b/src/features/environmentDetails/components/EnvironmentDetails.tsx
index 7b8e690e..21d1ed37 100644
--- a/src/features/environmentDetails/components/EnvironmentDetails.tsx
+++ b/src/features/environmentDetails/components/EnvironmentDetails.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { skipToken } from "@reduxjs/toolkit/query/react";
+import { useNavigate, useParams } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import { stringify } from "yaml";
@@ -8,7 +10,9 @@ import { SpecificationEdit, SpecificationReadOnly } from "./Specification";
 import { useGetBuildQuery } from "../environmentDetailsApiSlice";
 import {
   updateEnvironmentBuildId,
-  environmentClosed
+  environmentClosed,
+  environmentOpened,
+  toggleNewEnvironmentView
 } from "../../../features/tabs";
 import {
   useGetBuildPackagesQuery,
@@ -34,13 +38,15 @@ import artifactList from "../../../utils/helpers/artifact";
 import createLabel from "../../../common/config/labels";
 import { AlertDialog } from "../../../components/Dialog";
 import { useAppDispatch, useAppSelector } from "../../../hooks";
-import { CondaSpecificationPip } from "../../../common/models";
+import {
+  CondaSpecificationPip,
+  Environment,
+  Namespace
+} from "../../../common/models";
 import { useInterval } from "../../../utils/helpers";
+import { showNotification } from "../../notification/notificationSlice";
+import { useScrollRef } from "../../../layouts/PageLayout";
 
-interface IEnvDetails {
-  scrollRef: any;
-  environmentNotification: (notification: any) => void;
-}
 interface IUpdateEnvironmentArgs {
   dependencies: (string | CondaSpecificationPip)[];
   channels: string[];
@@ -48,16 +54,65 @@ interface IUpdateEnvironmentArgs {
 
 const INTERVAL_REFRESHING = 5000;
 
-export const EnvironmentDetails = ({
-  scrollRef,
-  environmentNotification
-}: IEnvDetails) => {
+export const EnvironmentDetails = () => {
   const dispatch = useAppDispatch();
+
+  // Url routing params
+  // If user loads the app at /<namespace_name>/<environment_name>
+  // This will put the app in the correct state
+  const { namespaceName, environmentName } = useParams<{
+    namespaceName: string;
+    environmentName: string;
+  }>();
+  const namespaces: Namespace[] = useAppSelector(
+    state => state.namespaces.data
+  );
+  const namespace = namespaces.find(({ name }) => name === namespaceName);
+  const environments: Environment[] = useAppSelector(
+    state => state.environments.data
+  );
+  const environment = environments.find(
+    environment =>
+      environment.namespace.name === namespaceName &&
+      environment.name === environmentName
+  );
+  useEffect(() => {
+    if (namespace && environment) {
+      dispatch(
+        environmentOpened({
+          environment,
+          canUpdate: namespace.canUpdate
+        })
+      );
+      dispatch(modeChanged(EnvironmentDetailsModes.READ));
+      dispatch(toggleNewEnvironmentView(false));
+    }
+  }, [
+    // We only want to run this effect when:
+    //
+    // 1. User navigates to different environment = change of 
+    //    (namespaceName, environmentName) in the URL
+    // 2. The corresponding (namespace, environment) data have been fetched
+    //
+    // We cannot pass [namespace, environment] as the dependencies to
+    // useEffect() because whenever an environment is created or updated, a
+    // refetch of the data is triggered, which creates new data objects for
+    // [namespace, environment] in the Redux store, which would cause this
+    // effect to rerun, but, again, we only want to run this effect when the
+    // user navigates to a new (namespaceName, environmentName), hence the `&&
+    // namespace.name` and `&& environment.name`.
+    namespace && namespace.name,
+    environment && environment.name
+  ]);
+
+  const navigate = useNavigate();
+
   const { mode } = useAppSelector(state => state.environmentDetails);
   const { page, dependencies } = useAppSelector(state => state.dependencies);
   const { selectedEnvironment } = useAppSelector(state => state.tabs);
   const { currentBuild } = useAppSelector(state => state.enviroments);
   const [name, setName] = useState(selectedEnvironment?.name || "");
+  const scrollRef = useScrollRef();
 
   const [descriptionIsUpdated, setDescriptionIsUpdated] = useState(false);
   const [description, setDescription] = useState(
@@ -81,7 +136,7 @@ export const EnvironmentDetails = ({
   const [updateBuildId] = useUpdateBuildIdMutation();
   const [deleteEnvironment] = useDeleteEnvironmentMutation();
 
-  useGetEnviromentBuildsQuery(selectedEnvironment, {
+  useGetEnviromentBuildsQuery(selectedEnvironment ?? skipToken, {
     pollingInterval: INTERVAL_REFRESHING
   });
 
@@ -112,7 +167,7 @@ export const EnvironmentDetails = ({
   };
 
   const loadArtifacts = async () => {
-    if (artifactType.includes("DOCKER_MANIFEST")) {
+    if (!currentBuildId || artifactType.includes("DOCKER_MANIFEST")) {
       return;
     }
 
@@ -122,7 +177,7 @@ export const EnvironmentDetails = ({
   };
 
   const loadDependencies = async () => {
-    if (dependencies.length) {
+    if (!currentBuildId || dependencies.length) {
       return;
     }
 
@@ -171,12 +226,7 @@ export const EnvironmentDetails = ({
       dispatch(modeChanged(EnvironmentDetailsModes.READ));
       setCurrentBuildId(data.build_id);
       dispatch(currentBuildIdChanged(data.build_id));
-      environmentNotification({
-        data: {
-          show: true,
-          description: createLabel(environment, "update")
-        }
-      });
+      dispatch(showNotification(createLabel(environment, "update")));
     } catch (e) {
       setError({
         message:
@@ -187,7 +237,7 @@ export const EnvironmentDetails = ({
         visible: true
       });
     }
-    scrollRef.current.scrollTo(0, 0);
+    scrollRef.current?.scrollTo(0, 0);
   };
 
   const updateBuild = async (buildId: number) => {
@@ -201,12 +251,9 @@ export const EnvironmentDetails = ({
         buildId
       }).unwrap();
       dispatch(updateEnvironmentBuildId(buildId));
-      environmentNotification({
-        data: {
-          show: true,
-          description: createLabel(selectedEnvironment.name, "updateBuild")
-        }
-      });
+      dispatch(
+        showNotification(createLabel(selectedEnvironment.name, "updateBuild"))
+      );
     } catch (e) {
       setError({
         message: createLabel(undefined, "error"),
@@ -232,19 +279,17 @@ export const EnvironmentDetails = ({
           selectedEnvironmentId: selectedEnvironment.id
         })
       );
-      environmentNotification({
-        data: {
-          show: true,
-          description: createLabel(selectedEnvironment.name, "delete")
-        }
-      });
+      dispatch(
+        showNotification(createLabel(selectedEnvironment.name, "delete"))
+      );
+      navigate("/");
     } catch (e) {
       setError({
         message: createLabel(undefined, "error"),
         visible: true
       });
     }
-    scrollRef.current.scrollTo(0, 0);
+    scrollRef.current?.scrollTo(0, 0);
     setShowDialog(false);
   };
 
@@ -255,10 +300,15 @@ export const EnvironmentDetails = ({
     })();
   }, INTERVAL_REFRESHING);
 
+  if (!selectedEnvironment) {
+    return null;
+  }
+
   return (
     <Box sx={{ padding: "15px 12px" }}>
       <EnvironmentDetailsHeader
         envName={name}
+        namespace={namespace?.name}
         onUpdateName={setName}
         showEditButton={selectedEnvironment?.canUpdate}
       />
diff --git a/src/features/environments/components/Environment.tsx b/src/features/environments/components/Environment.tsx
index 1f35642b..31dfc65d 100644
--- a/src/features/environments/components/Environment.tsx
+++ b/src/features/environments/components/Environment.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import CircleIcon from "@mui/icons-material/Circle";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import Button from "@mui/material/Button";
@@ -12,13 +13,11 @@ interface IEnvironmentProps {
    * @param selectedEnvironmentId id of the currently selected environment
    */
   environment: EnvironmentModel;
-  onClick: () => void;
   selectedEnvironmentId: number | undefined;
 }
 
 export const Environment = ({
   environment,
-  onClick,
   selectedEnvironmentId
 }: IEnvironmentProps) => {
   const isSelected = selectedEnvironmentId === environment.id;
@@ -44,7 +43,8 @@ export const Environment = ({
         />
       </ListItemIcon>
       <Button
-        onClick={onClick}
+        component={Link}
+        to={`/${environment.namespace.name}/${environment.name}`}
         sx={{
           color: isSelected
             ? theme.palette.primary.main
diff --git a/src/features/environments/components/EnvironmentDropdown.tsx b/src/features/environments/components/EnvironmentDropdown.tsx
index 12c19ccc..2fe7b41f 100644
--- a/src/features/environments/components/EnvironmentDropdown.tsx
+++ b/src/features/environments/components/EnvironmentDropdown.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import Accordion from "@mui/material/Accordion";
 import AddIcon from "@mui/icons-material/Add";
 import Tooltip from "@mui/material/Tooltip";
@@ -9,17 +10,8 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import useTheme from "@mui/material/styles/useTheme";
 import { Environment } from "./Environment";
+import { useAppSelector } from "../../../hooks";
 import { INamespaceEnvironments } from "../../../common/interfaces";
-import {
-  modeChanged,
-  EnvironmentDetailsModes
-} from "../../../features/environmentDetails";
-import {
-  environmentOpened,
-  openCreateNewEnvironmentTab,
-  toggleNewEnvironmentView
-} from "../../../features/tabs";
-import { useAppDispatch, useAppSelector } from "../../../hooks";
 import { StyledAccordionSummary, StyledIconButton } from "../../../styles";
 import { ArrowIcon } from "../../../components";
 
@@ -35,25 +27,8 @@ export const EnvironmentDropdown = ({
 }: IEnvironmentDropdownProps) => {
   const { selectedEnvironment } = useAppSelector(state => state.tabs);
   const [isExpanded, setIsExpanded] = useState(false);
-  const dispatch = useAppDispatch();
   const { palette } = useTheme();
 
-  const onCreateNewEnvironmentTab = (
-    event: React.SyntheticEvent,
-    namespace: string
-  ) => {
-    if (!canCreate) {
-      event.stopPropagation();
-      return;
-    }
-
-    if (isExpanded) {
-      event.stopPropagation();
-    }
-    dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
-    dispatch(openCreateNewEnvironmentTab(namespace));
-  };
-
   return (
     <Accordion
       sx={{
@@ -100,13 +75,20 @@ export const EnvironmentDropdown = ({
             }
           >
             <StyledIconButton
+              component={Link}
+              to={`/${namespace}/new-environment`}
               style={{
                 textTransform: "none",
                 paddingRight: "0.4rem"
               }}
-              onClick={e =>
-                canCreate && onCreateNewEnvironmentTab(e, namespace)
-              }
+              onClick={event => {
+                if (!canCreate) {
+                  event.preventDefault();
+                  event.stopPropagation();
+                } else if (isExpanded) {
+                  event.stopPropagation();
+                }
+              }}
               // Do not use the `disabled` attribute. Disable manually with
               // JavaScript and the `aria-disabled` attribute, otherwise the
               // tooltip won't work. More info:
@@ -129,17 +111,6 @@ export const EnvironmentDropdown = ({
               sx={{ marginBottom: "20px" }}
             >
               <Environment
-                onClick={() => {
-                  dispatch(
-                    environmentOpened({
-                      environment,
-                      selectedEnvironmentId: selectedEnvironment?.id,
-                      canUpdate
-                    })
-                  );
-                  dispatch(modeChanged(EnvironmentDetailsModes.READ));
-                  dispatch(toggleNewEnvironmentView(false));
-                }}
                 environment={environment}
                 selectedEnvironmentId={selectedEnvironment?.id}
               />
diff --git a/src/features/environments/components/Environments.tsx b/src/features/environments/components/Environments.tsx
index d1b1ba92..40073fe0 100644
--- a/src/features/environments/components/Environments.tsx
+++ b/src/features/environments/components/Environments.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useReducer } from "react";
+import React, { memo, useEffect } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
@@ -11,12 +11,8 @@ import {
   useLazyFetchNamespacesQuery,
   useLazyFetchPrimaryNamespaceQuery
 } from "../../../features/namespaces";
-import { ActionTypes, initialState, environmentsReducer } from "../reducer";
-import {
-  ActionTypes as NActionTypes,
-  initialState as NInitialState,
-  namespacesReducer
-} from "../../../features/namespaces/reducer";
+import { environmentsSlice } from "../reducer";
+import { dataFetched } from "../../../features/namespaces/reducer";
 import {
   isNamespaceListed,
   checkMyPrimaryNamespace,
@@ -24,6 +20,7 @@ import {
 } from "../../../utils/helpers/namespaces";
 import { Namespace } from "../../../common/models";
 import { BookIcon } from "../../../components";
+import { useAppDispatch, useAppSelector } from "../../../hooks";
 
 export interface IBaseEnvironments {
   refreshEnvironments: boolean;
@@ -37,8 +34,10 @@ const BaseEnvironments = ({
   const size = 100;
   const { palette } = useTheme();
   const version: string = process.env.REACT_APP_VERSION as string;
-  const [state, dispatch] = useReducer(environmentsReducer, initialState);
-  const [stateN, dispatchN] = useReducer(namespacesReducer, NInitialState);
+  const environmentsState = useAppSelector(state => state.environments);
+  const namespacesState = useAppSelector(state => state.namespaces);
+
+  const dispatch = useAppDispatch();
 
   const [triggerNamespacesQuery] = useLazyFetchNamespacesQuery();
   const [triggerPrimaryNamespace] = useLazyFetchPrimaryNamespaceQuery();
@@ -46,7 +45,7 @@ const BaseEnvironments = ({
 
   const getNamespaces = async () => {
     const { data: namespacesData } = await triggerNamespacesQuery({
-      page: stateN.page,
+      page: namespacesState.page,
       size
     });
 
@@ -55,15 +54,15 @@ const BaseEnvironments = ({
         namespacesData.data
       );
 
-      dispatchN({
-        type: NActionTypes.DATA_FETCHED,
-        payload: {
+      dispatch(
+        dataFetched({
           data: !isNamespaceListed(namespaces, primaryNamespace)
             ? [...namespaces, { ...primaryNamespace, isPrimary: true }]
             : checkMyPrimaryNamespace(namespaces, primaryNamespace),
           count: namespacesData.count
-        }
-      });
+        })
+      );
+
       await getEnvironments();
     }
   };
@@ -100,16 +99,18 @@ const BaseEnvironments = ({
 
   const getEnvironments = async () => {
     const { data: environmentsData } = await triggerQuery({
-      page: state.page,
+      page: environmentsState.page,
       size,
-      search: state.search
+      search: environmentsState.search
     });
 
     if (environmentsData) {
-      dispatch({
-        type: ActionTypes.DATA_FETCHED,
-        payload: { data: environmentsData.data, count: environmentsData.count }
-      });
+      dispatch(
+        environmentsSlice.actions.dataFetched({
+          data: environmentsData.data,
+          count: environmentsData.count
+        })
+      );
     }
   };
 
@@ -117,25 +118,30 @@ const BaseEnvironments = ({
     const { data } = await triggerQuery({ page: 1, size, search: value });
 
     if (data) {
-      dispatch({
-        type: ActionTypes.SEARCHED,
-        payload: { data: data.data, count: data.count, search: value }
-      });
+      dispatch(
+        environmentsSlice.actions.searched({
+          data: data.data,
+          count: data.count,
+          search: value
+        })
+      );
     }
   }, 500);
 
   const next = async () => {
     const { data } = await triggerQuery({
-      page: state.page + 1,
+      page: environmentsState.page + 1,
       size,
-      search: state.search
+      search: environmentsState.search
     });
 
     if (data) {
-      dispatch({
-        type: ActionTypes.NEXT_FETCHED,
-        payload: { data: data.data, count: data.count }
-      });
+      dispatch(
+        environmentsSlice.actions.nextFetched({
+          data: data.data,
+          count: data.count
+        })
+      );
     }
   };
 
@@ -175,13 +181,13 @@ const BaseEnvironments = ({
           overflowY: "auto"
         }}
       >
-        {state.data && (
+        {environmentsState.data && (
           <EnvironmentsList
             next={next}
-            hasMore={size * state.page < state.count}
-            environmentsList={state.data}
-            namespacesList={stateN.data}
-            search={state.search}
+            hasMore={size * environmentsState.page < environmentsState.count}
+            environmentsList={environmentsState.data}
+            namespacesList={namespacesState.data}
+            search={environmentsState.search}
           />
         )}
       </Box>
diff --git a/src/features/environments/reducer.ts b/src/features/environments/reducer.ts
index caca44b9..9cac4540 100644
--- a/src/features/environments/reducer.ts
+++ b/src/features/environments/reducer.ts
@@ -1,52 +1,46 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Environment } from "../../common/models";
 
-export enum ActionTypes {
-  DATA_FETCHED = "environments/data_fetched",
-  SEARCHED = "environments/searched",
-  NEXT_FETCHED = "environments/next_fetched"
-}
-
-interface IInitialState {
+export interface IEnvironmentsState {
   page: number;
   data: Environment[];
   count: number;
   search: string;
 }
 
-type Action =
-  | {
-      type: ActionTypes.DATA_FETCHED;
-      payload: { data: Environment[]; count: number };
-    }
-  | {
-      type: ActionTypes.SEARCHED;
-      payload: { data: Environment[]; count: number; search: string };
-    }
-  | {
-      type: ActionTypes.NEXT_FETCHED;
-      payload: { data: Environment[]; count: number };
-    };
-
-export const initialState: IInitialState = {
+export const initialState: IEnvironmentsState = {
   page: 1,
   data: [],
   count: 0,
   search: ""
 };
 
-export const environmentsReducer = (state: IInitialState, action: Action) => {
-  switch (action.type) {
-    case ActionTypes.DATA_FETCHED: {
+export const environmentsSlice = createSlice({
+  name: "environments",
+  initialState,
+  reducers: {
+    dataFetched: (
+      state: IEnvironmentsState,
+      action: PayloadAction<{ data: Environment[]; count: number }>
+    ) => {
       const { count, data } = action.payload;
 
       return { ...state, count: count, data: data };
-    }
-
-    case ActionTypes.SEARCHED: {
+    },
+    searched: (
+      state: IEnvironmentsState,
+      action: PayloadAction<{
+        data: Environment[];
+        count: number;
+        search: string;
+      }>
+    ) => {
       return { ...action.payload, page: 1 };
-    }
-
-    case ActionTypes.NEXT_FETCHED: {
+    },
+    nextFetched: (
+      state: IEnvironmentsState,
+      action: PayloadAction<{ data: Environment[]; count: number }>
+    ) => {
       const { data, count } = action.payload;
 
       const newData = state.data?.concat(data);
@@ -60,4 +54,6 @@ export const environmentsReducer = (state: IInitialState, action: Action) => {
       };
     }
   }
-};
+});
+
+export const { dataFetched, searched, nextFetched } = environmentsSlice.actions;
diff --git a/src/features/namespaces/reducer.ts b/src/features/namespaces/reducer.ts
index e5b5a05c..623daffa 100644
--- a/src/features/namespaces/reducer.ts
+++ b/src/features/namespaces/reducer.ts
@@ -1,32 +1,30 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Namespace } from "../../common/models";
 
-export enum ActionTypes {
-  DATA_FETCHED = "namespaces/data_fetched"
-}
-
-interface IInitialState {
+export interface INamespacesState {
   page: number;
   data: Namespace[];
   count: number;
 }
 
-type Action = {
-  type: ActionTypes.DATA_FETCHED;
-  payload: { data: Namespace[]; count: number };
-};
-
-export const initialState: IInitialState = {
+export const initialState: INamespacesState = {
   page: 1,
   data: [],
   count: 0
 };
 
-export const namespacesReducer = (state: IInitialState, action: Action) => {
-  switch (action.type) {
-    case ActionTypes.DATA_FETCHED: {
+export const namespacesSlice = createSlice({
+  name: "namespaces",
+  initialState,
+  reducers: {
+    dataFetched: (
+      state: INamespacesState,
+      action: PayloadAction<{ data: Namespace[]; count: number }>
+    ) => {
       const { count, data } = action.payload;
-
       return { ...state, count: count, data: data };
     }
   }
-};
+});
+
+export const { dataFetched } = namespacesSlice.actions;
diff --git a/src/features/notification/index.ts b/src/features/notification/index.ts
new file mode 100644
index 00000000..4226099c
--- /dev/null
+++ b/src/features/notification/index.ts
@@ -0,0 +1 @@
+export * from "./notificationSlice";
diff --git a/src/features/notification/notificationSlice.ts b/src/features/notification/notificationSlice.ts
new file mode 100644
index 00000000..6c1de6f0
--- /dev/null
+++ b/src/features/notification/notificationSlice.ts
@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface INotificationState {
+  show: boolean;
+  description: string;
+}
+
+const initialState: INotificationState = {
+  show: false,
+  description: ""
+};
+
+export const notificationSlice = createSlice({
+  name: "notification",
+  initialState,
+  reducers: {
+    showNotification: (state, action) => ({
+      ...state,
+      show: true,
+      description: action.payload
+    }),
+    closeNotification: state => ({
+      ...state,
+      show: false
+    })
+  }
+});
+
+export const { showNotification, closeNotification } =
+  notificationSlice.actions;
diff --git a/src/features/requestedPackages/components/AddRequestedPackage.tsx b/src/features/requestedPackages/components/AddRequestedPackage.tsx
index f75d2e6d..2f757b09 100644
--- a/src/features/requestedPackages/components/AddRequestedPackage.tsx
+++ b/src/features/requestedPackages/components/AddRequestedPackage.tsx
@@ -178,7 +178,6 @@ export const AddRequestedPackage = ({
         <StyledIconButton
           onClick={() => onCancel(false)}
           data-testid="cancelIcon"
-          theme={theme}
         >
           <DeleteIconAlt />
         </StyledIconButton>
diff --git a/src/features/tabs/components/PageTabs.tsx b/src/features/tabs/components/PageTabs.tsx
deleted file mode 100644
index d316bc8c..00000000
--- a/src/features/tabs/components/PageTabs.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import React from "react";
-import { StyledTab } from "../../../styles";
-import { StyledTabs } from "../../../styles/StyledTabs";
-import CloseIcon from "@mui/icons-material/Close";
-import { useAppDispatch, useAppSelector } from "../../../hooks";
-import {
-  modeChanged,
-  EnvironmentDetailsModes
-} from "../../../features/environmentDetails";
-import {
-  environmentClosed,
-  tabChanged,
-  closeCreateNewEnvironmentTab,
-  toggleNewEnvironmentView
-} from "../tabsSlice";
-import { currentBuildIdChanged } from "../../metadata";
-
-export const PageTabs = () => {
-  const { selectedEnvironments, value, selectedEnvironment, newEnvironment } =
-    useAppSelector(state => state.tabs);
-
-  const dispatch = useAppDispatch();
-
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    if (typeof newValue === "number") {
-      dispatch(toggleNewEnvironmentView(false));
-      dispatch(modeChanged(EnvironmentDetailsModes.READ));
-      dispatch(tabChanged(newValue));
-    } else {
-      dispatch(toggleNewEnvironmentView(true));
-      dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
-    }
-  };
-
-  const handleClick = (
-    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
-    envId: number
-  ) => {
-    e.stopPropagation();
-    dispatch(modeChanged(EnvironmentDetailsModes.READ));
-    dispatch(
-      environmentClosed({
-        envId,
-        selectedEnvironmentId: selectedEnvironment
-          ? selectedEnvironment.id
-          : envId
-      })
-    );
-    dispatch(currentBuildIdChanged(undefined));
-    if (selectedEnvironments.length === 1 && newEnvironment.isOpen) {
-      dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
-    }
-  };
-
-  const closeNewEnvironment = (
-    e: React.MouseEvent<HTMLSpanElement, MouseEvent>
-  ) => {
-    e.stopPropagation();
-    dispatch(modeChanged(EnvironmentDetailsModes.READ));
-    dispatch(closeCreateNewEnvironmentTab());
-  };
-
-  return (
-    <StyledTabs
-      TabIndicatorProps={{
-        style: {
-          display: "none"
-        }
-      }}
-      value={value}
-      onChange={handleChange}
-      variant="fullWidth"
-    >
-      {selectedEnvironments.map(env => (
-        <StyledTab
-          key={env.id}
-          label={env.name}
-          value={env.id}
-          wrapped
-          icon={
-            <span
-              style={{ marginTop: "5px" }}
-              role="button"
-              onClick={e => handleClick(e, env.id)}
-              data-testid="closeTab"
-            >
-              <CloseIcon sx={{ color: "#3D4043" }} />
-            </span>
-          }
-          iconPosition="end"
-        />
-      ))}
-      {newEnvironment.isOpen && (
-        <StyledTab
-          key="create"
-          label="Create Environment"
-          value="create"
-          wrapped
-          icon={
-            <span
-              style={{ marginTop: "5px" }}
-              role="button"
-              onClick={e => closeNewEnvironment(e)}
-              data-testid="closeNewTab"
-            >
-              <CloseIcon sx={{ color: "#3D4043" }} />
-            </span>
-          }
-          iconPosition="end"
-        />
-      )}
-    </StyledTabs>
-  );
-};
diff --git a/src/features/tabs/components/index.tsx b/src/features/tabs/components/index.tsx
deleted file mode 100644
index 676a8ad0..00000000
--- a/src/features/tabs/components/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./PageTabs";
diff --git a/src/features/tabs/index.tsx b/src/features/tabs/index.tsx
index 749a2190..99beef53 100644
--- a/src/features/tabs/index.tsx
+++ b/src/features/tabs/index.tsx
@@ -1,2 +1 @@
-export * from "./components";
 export * from "./tabsSlice";
diff --git a/src/features/tabs/tabsSlice.ts b/src/features/tabs/tabsSlice.ts
index 924722df..f28b4cdb 100644
--- a/src/features/tabs/tabsSlice.ts
+++ b/src/features/tabs/tabsSlice.ts
@@ -32,13 +32,11 @@ export const tabsSlice = createSlice({
       state,
       action: PayloadAction<{
         environment: Environment;
-        selectedEnvironmentId: number | undefined;
         canUpdate?: boolean;
       }>
     ) => {
       const environments = state.selectedEnvironments;
       const openedEnvironment = action.payload.environment;
-      const isSingleTabMode = process.env.REACT_APP_CONTEXT === "jupyterlab";
 
       state.selectedEnvironment = {
         ...openedEnvironment,
@@ -47,11 +45,7 @@ export const tabsSlice = createSlice({
       state.value = openedEnvironment.id;
 
       if (!environments.some(env => env.id === openedEnvironment.id)) {
-        if (!isSingleTabMode) {
-          state.selectedEnvironments.push(openedEnvironment);
-        } else {
-          state.selectedEnvironments[0] = openedEnvironment;
-        }
+        state.selectedEnvironments[0] = openedEnvironment;
       }
     },
     environmentClosed: (
diff --git a/src/layouts/PageLayout.tsx b/src/layouts/PageLayout.tsx
index f62c3b01..f9ab730f 100644
--- a/src/layouts/PageLayout.tsx
+++ b/src/layouts/PageLayout.tsx
@@ -1,36 +1,27 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect, RefObject } from "react";
+import { Outlet, useOutletContext, useParams } from "react-router-dom";
 import Box from "@mui/material/Box";
 import { Typography } from "@mui/material";
 import { Popup } from "../components";
 import { Environments } from "../features/environments";
-import { EnvironmentCreate } from "../features/environmentCreate";
-import { EnvironmentDetails } from "../features/environmentDetails";
-import { PageTabs } from "../features/tabs";
 import { StyledScrollContainer } from "../styles";
-import { useAppSelector } from "../hooks";
-
-interface IUpdateEnvironment {
-  data: {
-    show: boolean;
-    description: string;
-  };
-}
+import { useAppDispatch, useAppSelector } from "../hooks";
+import { closeNotification } from "../features/notification/notificationSlice";
 
 export const PageLayout = () => {
-  const { selectedEnvironment, newEnvironment } = useAppSelector(
-    state => state.tabs
-  );
+  const dispatch = useAppDispatch();
   const [refreshEnvironments, setRefreshEnvironments] = useState(false);
-  const [notification, setNotification] = useState({
-    show: false,
-    description: ""
-  });
-  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const notification = useAppSelector(state => state.notification);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
-  const onUpdateOrCreateEnv = ({ data }: IUpdateEnvironment) => {
+  // TODO remove this coupling between notifications and environment refreshes.
+  // This use of state to refetch the environment is an anti-pattern. We should
+  // leverage RTK's cache invalidation features instead.
+  useEffect(() => {
     setRefreshEnvironments(true);
-    setNotification(data);
-  };
+  }, [notification]);
+
+  const { namespaceName } = useParams();
 
   return (
     <Box
@@ -55,29 +46,9 @@ export const PageLayout = () => {
           overflowY: "scroll"
         }}
       >
-        {(selectedEnvironment || newEnvironment.isActive) && (
-          <>
-            <PageTabs />
-
-            {selectedEnvironment && !newEnvironment.isActive && (
-              <Box>
-                <EnvironmentDetails
-                  environmentNotification={onUpdateOrCreateEnv}
-                  scrollRef={scrollRef}
-                />
-              </Box>
-            )}
-
-            {!selectedEnvironment && newEnvironment.isActive && (
-              <Box>
-                <EnvironmentCreate
-                  environmentNotification={onUpdateOrCreateEnv}
-                />
-              </Box>
-            )}
-          </>
-        )}
-        {!selectedEnvironment && !newEnvironment.isActive && (
+        {namespaceName ? (
+          <Outlet context={scrollRef} />
+        ) : (
           <Box
             sx={{
               display: "flex",
@@ -96,8 +67,13 @@ export const PageLayout = () => {
       <Popup
         isVisible={notification.show}
         description={notification.description}
-        onClose={setNotification}
+        onClose={() => dispatch(closeNotification())}
       />
     </Box>
   );
 };
+
+// TypeScript-friendly version of the useOutletContext() hook
+export function useScrollRef() {
+  return useOutletContext<RefObject<HTMLDivElement>>();
+}
diff --git a/src/AppExample.tsx b/src/main.tsx
similarity index 100%
rename from src/AppExample.tsx
rename to src/main.tsx
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 00000000..c5c41db9
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { createBrowserRouter } from "react-router-dom";
+
+import { PageLayout } from "./layouts";
+import { EnvironmentDetails } from "./features/environmentDetails";
+import { EnvironmentCreate } from "./features/environmentCreate";
+
+/**
+ * Define URL routes for the single page app
+ */
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <PageLayout />,
+    children: [
+      {
+        path: ":namespaceName/new-environment",
+        element: <EnvironmentCreate />
+      },
+      {
+        path: ":namespaceName/:environmentName",
+        element: <EnvironmentDetails />
+      }
+    ]
+  }
+]);
diff --git a/src/store/rootReducer.ts b/src/store/rootReducer.ts
index d0a427ef..241e608f 100644
--- a/src/store/rootReducer.ts
+++ b/src/store/rootReducer.ts
@@ -7,6 +7,10 @@ import { environmentVariablesSlice } from "../features/environmentVariables";
 import { tabsSlice } from "../features/tabs";
 import { enviromentsSlice } from "../features/metadata";
 import { environmentCreateSlice } from "../features/environmentCreate/environmentCreateSlice";
+// TODO rename */reducer.ts files to match */*slice.ts pattern
+import { namespacesSlice } from "../features/namespaces/reducer";
+import { environmentsSlice } from "../features/environments/reducer";
+import { notificationSlice } from "../features/notification/notificationSlice";
 
 export const rootReducer = {
   [apiSlice.reducerPath]: apiSlice.reducer,
@@ -14,8 +18,12 @@ export const rootReducer = {
   requestedPackages: requestedPackagesSlice.reducer,
   environmentVariables: environmentVariablesSlice.reducer,
   tabs: tabsSlice.reducer,
+  // TODO: rename (fix spelling) and consolidate with environments slice
   enviroments: enviromentsSlice.reducer,
   environmentDetails: environmentDetailsSlice.reducer,
   dependencies: dependenciesSlice.reducer,
-  environmentCreate: environmentCreateSlice.reducer
+  environmentCreate: environmentCreateSlice.reducer,
+  namespaces: namespacesSlice.reducer,
+  environments: environmentsSlice.reducer,
+  notification: notificationSlice.reducer
 };
diff --git a/src/styles/StyledIconButton.tsx b/src/styles/StyledIconButton.tsx
index e4a39753..833471c0 100644
--- a/src/styles/StyledIconButton.tsx
+++ b/src/styles/StyledIconButton.tsx
@@ -23,4 +23,4 @@ export const StyledIconButton = styled(Button)(({ theme }) => ({
     border: "none",
     color: theme.palette.secondary[300]
   }
-}));
+})) as typeof Button;
diff --git a/src/styles/StyledTab.tsx b/src/styles/StyledTab.tsx
deleted file mode 100644
index a1b81f3f..00000000
--- a/src/styles/StyledTab.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Tab from "@mui/material/Tab";
-import { styled } from "@mui/system";
-
-export const StyledTab = styled(Tab, {
-  shouldForwardProp: prop => prop !== "styleType"
-})<{ styleType?: string }>(({ theme: { palette } }) => ({
-  border: "transparent",
-  padding: "7px 12px",
-  textTransform: "none",
-  fontSize: "14px",
-  minHeight: "48px",
-  maxHeight: "48px",
-  maxWidth: "340px",
-  justifyContent: "space-between",
-  "&.Mui-selected": {
-    color: "#333",
-    fontWeight: 400,
-    border: "1px solid #E0E0E0",
-    borderTop: "none",
-    borderBottom: "none",
-    background: "#F9F9F9"
-  }
-}));
diff --git a/src/styles/StyledTabs.tsx b/src/styles/StyledTabs.tsx
deleted file mode 100644
index 7400e831..00000000
--- a/src/styles/StyledTabs.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Tabs from "@mui/material/Tabs";
-import { styled } from "@mui/system";
-
-export const StyledTabs = styled(Tabs, {
-  shouldForwardProp: prop => prop !== "styleType"
-})<{ styleType?: string }>(({ theme: { palette } }) => ({
-  backgroundColor: "#FFF",
-  "& .MuiTabs-indicator": {
-    display: "flex",
-    justifyContent: "center",
-    backgroundColor: "#FFF"
-  }
-}));
diff --git a/src/styles/index.tsx b/src/styles/index.tsx
index e16a568f..17e478a6 100644
--- a/src/styles/index.tsx
+++ b/src/styles/index.tsx
@@ -7,8 +7,6 @@ export * from "./StyledRequestedPackagesTableCell";
 export * from "./StyledIconButton";
 export * from "./StyledAccordionExpandIcon";
 export * from "./StyledScrollContainer";
-export * from "./StyledTab";
-export * from "./StyledTabs";
 export * from "./StyledBox";
 export * from "./StyledMetadataItem";
 export * from "./StyledSwitchButton";
diff --git a/src/utils/helpers/namespaces.ts b/src/utils/helpers/namespaces.ts
index 5b08a3bf..12fd79ff 100644
--- a/src/utils/helpers/namespaces.ts
+++ b/src/utils/helpers/namespaces.ts
@@ -143,12 +143,16 @@ export const namespacesPermissionsMapper = (
     return {
       id: namespace.id,
       name: namespace.name,
-      canCreate: allPermissions
-        ? true
-        : namespacePermissions.includes(PERMISSIONS.namespaceCreate),
-      canUpdate: allPermissions
-        ? true
-        : namespacePermissions.includes(PERMISSIONS.environmentUpdate)
+      canCreate: Boolean(
+        allPermissions
+          ? true
+          : namespacePermissions.includes(PERMISSIONS.namespaceCreate)
+      ),
+      canUpdate: Boolean(
+        allPermissions
+          ? true
+          : namespacePermissions.includes(PERMISSIONS.environmentUpdate)
+      )
     };
   });
 };
diff --git a/test/PageTabs.test.tsx b/test/PageTabs.test.tsx
deleted file mode 100644
index a525ccef..00000000
--- a/test/PageTabs.test.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import { act, fireEvent, render, RenderResult } from "@testing-library/react";
-import {
-  environmentOpened,
-  openCreateNewEnvironmentTab,
-  PageTabs
-} from "../src/features/tabs";
-import { store } from "../src/store";
-import { ENVIRONMENTS } from "./testutils";
-
-describe("<PageTabs />", () => {
-  let component: RenderResult;
-
-  beforeEach(() => {
-    component = render(
-      <Provider store={store}>
-        <PageTabs />
-      </Provider>
-    );
-  });
-
-  it("should render component with default tab", () => {
-    act(() => {
-      store.dispatch(
-        environmentOpened({
-          environment: ENVIRONMENTS[0],
-          selectedEnvironmentId: 1
-        })
-      );
-    });
-
-    expect(component.container).toHaveTextContent("python-flask-env-2");
-    const closeIcon = component.getByTestId("closeTab");
-    fireEvent.click(closeIcon);
-
-    expect(component.container).not.toHaveTextContent("python-flask-env-2");
-  });
-
-  it("should open create environment tab", () => {
-    act(() => {
-      store.dispatch(openCreateNewEnvironmentTab("default"));
-    });
-    expect(component.container).toHaveTextContent("Create Environment");
-
-    const closeIcon = component.getByTestId("closeNewTab");
-    fireEvent.click(closeIcon);
-    expect(component.container).not.toHaveTextContent("Create Environment");
-  });
-
-  it("should open multiple environments", () => {
-    act(() => {
-      store.dispatch(
-        environmentOpened({
-          environment: ENVIRONMENTS[0],
-          selectedEnvironmentId: 1
-        })
-      );
-      store.dispatch(
-        environmentOpened({
-          environment: ENVIRONMENTS[1],
-          selectedEnvironmentId: 2
-        })
-      );
-    });
-    const firstTab = component.getByText(ENVIRONMENTS[0].name);
-    fireEvent.click(firstTab);
-
-    expect(component.container).toHaveTextContent(
-      `${ENVIRONMENTS[0].name}${ENVIRONMENTS[1].name}`
-    );
-
-    const [envTabCloseIcon] = component.getAllByTestId("closeTab");
-    fireEvent.click(envTabCloseIcon);
-  });
-
-  it("should maintain the new environment tab open ", () => {
-    act(() => {
-      store.dispatch(openCreateNewEnvironmentTab("default"));
-    });
-
-    const envTab = component.getByText(ENVIRONMENTS[1].name);
-    fireEvent.click(envTab);
-
-    const newEnvTab = component.getByText("Create Environment");
-    fireEvent.click(newEnvTab);
-
-    const envTabCloseIcon = component.getByTestId("closeTab");
-    fireEvent.click(envTabCloseIcon);
-
-    expect(component.container).toHaveTextContent("Create Environment");
-  });
-});
diff --git a/test/environmentCreate/EnvironmentCreate.test.tsx b/test/environmentCreate/EnvironmentCreate.test.tsx
index 16f36115..c29ca6b2 100644
--- a/test/environmentCreate/EnvironmentCreate.test.tsx
+++ b/test/environmentCreate/EnvironmentCreate.test.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import {
   render,
@@ -17,18 +18,16 @@ import { mockTheme } from "../testutils";
 
 describe("<EnvironmentCreate />", () => {
   window.HTMLElement.prototype.scrollTo = jest.fn();
-  const mockEnvironmentNotification = jest.fn();
   let component: RenderResult;
 
   beforeEach(() => {
     component = render(
       mockTheme(
         <Provider store={store}>
-          <EnvironmentCreate
-            environmentNotification={mockEnvironmentNotification}
-          />
+          <EnvironmentCreate />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
   });
 
diff --git a/test/environmentDetails/EnvironmentDetails.test.tsx b/test/environmentDetails/EnvironmentDetails.test.tsx
index dfb094b2..bf9303e0 100644
--- a/test/environmentDetails/EnvironmentDetails.test.tsx
+++ b/test/environmentDetails/EnvironmentDetails.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
 import { act, fireEvent, render, waitFor } from "@testing-library/react";
 import { ENVIRONMENTS, mockTheme } from "../testutils";
 import {
@@ -35,16 +36,16 @@ describe("<EnvironmentDetails />", () => {
     const component = render(
       mockTheme(
         <Provider store={store}>
-          <EnvironmentDetails environmentNotification={jest.fn()} />
+          <EnvironmentDetails />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
 
     act(() => {
       store.dispatch(
         environmentOpened({
-          environment: ENVIRONMENTS[0],
-          selectedEnvironmentId: 1
+          environment: ENVIRONMENTS[0]
         })
       );
     });
@@ -58,16 +59,16 @@ describe("<EnvironmentDetails />", () => {
     const component = render(
       mockTheme(
         <Provider store={store}>
-          <EnvironmentDetails environmentNotification={jest.fn()} />
+          <EnvironmentDetails />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
 
     act(() => {
       store.dispatch(
         environmentOpened({
-          environment: ENVIRONMENTS[0],
-          selectedEnvironmentId: 1
+          environment: ENVIRONMENTS[0]
         })
       );
       store.dispatch(modeChanged(EnvironmentDetailsModes.EDIT));
diff --git a/test/environmentDetails/EnvironmentDetailsHeader.test.tsx b/test/environmentDetails/EnvironmentDetailsHeader.test.tsx
index f7b7469d..37ecab57 100644
--- a/test/environmentDetails/EnvironmentDetailsHeader.test.tsx
+++ b/test/environmentDetails/EnvironmentDetailsHeader.test.tsx
@@ -8,6 +8,7 @@ import {
 } from "../../src/features/environmentDetails";
 import { store } from "../../src/store";
 import { mockTheme } from "../testutils";
+import { BrowserRouter } from "react-router-dom";
 
 describe("<EnvironmentDetailsHeader />", () => {
   it("should render component in read mode", () => {
@@ -20,7 +21,8 @@ describe("<EnvironmentDetailsHeader />", () => {
             showEditButton={true}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
 
     act(() => {
@@ -28,9 +30,10 @@ describe("<EnvironmentDetailsHeader />", () => {
     });
     expect(component.container).toHaveTextContent("Environment name");
 
-    const editButton = component.getByText("Edit");
+    const editButton = component.getByRole("button", { name: "Edit" });
+    expect(editButton).toBeInTheDocument();
     fireEvent.click(editButton);
-    expect(store.getState().environmentDetails.mode).toEqual("edit");
+    expect(editButton).not.toBeInTheDocument();
   });
 
   it("should render component in edit mode", async () => {
@@ -43,7 +46,8 @@ describe("<EnvironmentDetailsHeader />", () => {
             showEditButton={true}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     act(() => {
       store.dispatch(modeChanged(EnvironmentDetailsModes.EDIT));
@@ -64,7 +68,8 @@ describe("<EnvironmentDetailsHeader />", () => {
             showEditButton={true}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     act(() => {
       store.dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
@@ -89,7 +94,8 @@ describe("<EnvironmentDetailsHeader />", () => {
             showEditButton={true}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     act(() => {
       store.dispatch(modeChanged(EnvironmentDetailsModes.CREATE));
diff --git a/test/environmentDetails/SpecificationEdit.test.tsx b/test/environmentDetails/SpecificationEdit.test.tsx
index 8862b81b..ab730065 100644
--- a/test/environmentDetails/SpecificationEdit.test.tsx
+++ b/test/environmentDetails/SpecificationEdit.test.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import {
   act,
@@ -32,7 +33,8 @@ describe("<SpecificationEdit />", () => {
             onUpdateEnvironment={jest.fn()}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
 
     act(() => {
@@ -50,7 +52,8 @@ describe("<SpecificationEdit />", () => {
             onUpdateEnvironment={jest.fn()}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     const switchButton = component.getByLabelText("YAML", { exact: false });
     fireEvent.click(switchButton);
@@ -73,7 +76,8 @@ describe("<SpecificationEdit />", () => {
             onSpecificationIsChanged={jest.fn()}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     const cancelButton = component.getByText("Cancel");
     fireEvent.click(cancelButton);
@@ -90,7 +94,8 @@ describe("<SpecificationEdit />", () => {
             onUpdateEnvironment={jest.fn()}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     const switchButton = component.getByLabelText("YAML", { exact: false });
     fireEvent.click(switchButton);
diff --git a/test/environments/Environment.test.tsx b/test/environments/Environment.test.tsx
index 706bcf4e..b5ac9f0f 100644
--- a/test/environments/Environment.test.tsx
+++ b/test/environments/Environment.test.tsx
@@ -1,32 +1,22 @@
 import React from "react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { render, RenderResult } from "@testing-library/react";
 import { Environment } from "../../src/features/environments";
 import { ENVIRONMENT, mockTheme } from "../testutils";
 
 describe("<Environment />", () => {
-  const mockOnClick = jest.fn();
   let component: RenderResult;
 
   beforeEach(() => {
     component = render(
       mockTheme(
-        <Environment
-          environment={ENVIRONMENT}
-          onClick={mockOnClick}
-          selectedEnvironmentId={1}
-        />
-      )
+        <Environment environment={ENVIRONMENT} selectedEnvironmentId={1} />
+      ),
+      { wrapper: BrowserRouter }
     );
   });
 
   it("should render with correct text content", () => {
     expect(component.container).toHaveTextContent(ENVIRONMENT.name);
   });
-
-  it("should fire onClick event correctly", () => {
-    const btn = component.getByText(ENVIRONMENT.name);
-    fireEvent.click(btn);
-
-    expect(mockOnClick).toHaveBeenCalled();
-  });
 });
diff --git a/test/environments/EnvironmentDropdown.test.tsx b/test/environments/EnvironmentDropdown.test.tsx
index 9c7b0d7e..f6a0138f 100644
--- a/test/environments/EnvironmentDropdown.test.tsx
+++ b/test/environments/EnvironmentDropdown.test.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { fireEvent, render } from "@testing-library/react";
 import { ENVIRONMENT, mockTheme } from "../testutils";
@@ -17,21 +18,24 @@ const mountEnvironmentDropdownComponent = (props: any) => {
           }}
         />
       </Provider>
-    )
+    ),
+    { wrapper: BrowserRouter }
   );
 };
 describe("<EnvironmentDropdown />", () => {
-  it("should not open a new tab environment", () => {
+  it("should not open a new environment", () => {
     const component = mountEnvironmentDropdownComponent({
       canCreate: false,
       canUpdate: false
     });
     const namespaceButton = component.getByTestId("AddIcon");
+
+    expect(window.location.pathname).toBe("/");
     fireEvent.click(namespaceButton);
-    expect(store.getState().environmentDetails.mode).toBe("read-only");
+    expect(window.location.pathname).toBe("/");
   });
 
-  it("should open a new tab environment", () => {
+  it("should open a new environment", () => {
     const component = mountEnvironmentDropdownComponent({
       canCreate: true,
       canUpdate: true
@@ -40,8 +44,9 @@ describe("<EnvironmentDropdown />", () => {
     expect(component.container).toHaveTextContent("default");
 
     const namespaceButton = component.getByTestId("AddIcon");
+
     fireEvent.click(namespaceButton);
-    expect(store.getState().environmentDetails.mode).toBe("create");
+    expect(window.location.pathname).toBe("/default/new-environment");
   });
 
   it("should open selected environment", () => {
@@ -50,9 +55,8 @@ describe("<EnvironmentDropdown />", () => {
       canUpdate: true
     });
     const environmentButton = component.getByText(ENVIRONMENT.name);
+
     fireEvent.click(environmentButton);
-    expect(store.getState().tabs.selectedEnvironment?.name).toBe(
-      ENVIRONMENT.name
-    );
+    expect(window.location.pathname).toBe("/default/python-flask-env-2");
   });
 });
diff --git a/test/environments/EnvironmentList.test.tsx b/test/environments/EnvironmentList.test.tsx
index b22c5821..b287abcb 100644
--- a/test/environments/EnvironmentList.test.tsx
+++ b/test/environments/EnvironmentList.test.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { render } from "@testing-library/react";
 import { EnvironmentsList } from "../../src/features/environments";
@@ -31,7 +32,8 @@ describe("<EnvironmentsList />", () => {
             search={""}
           ></EnvironmentsList>
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
 
     expect(component.container).toHaveTextContent("python-flask-env");
@@ -54,7 +56,8 @@ describe("<EnvironmentsList />", () => {
             search={""}
           ></EnvironmentsList>
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
 
     expect(component.container).toHaveTextContent("Shared Environments");
diff --git a/test/environments/Environments.test.tsx b/test/environments/Environments.test.tsx
index d8101f0a..dcfb067c 100644
--- a/test/environments/Environments.test.tsx
+++ b/test/environments/Environments.test.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import {
   fireEvent,
@@ -70,7 +71,8 @@ describe("<Environment />", () => {
             onUpdateRefreshEnvironments={mockOnUpdateRefreshEnvironments}
           />
         </Provider>
-      )
+      ),
+      { wrapper: BrowserRouter }
     );
     await waitFor(() => {
       expect(component.queryByText("filesystem")).toBeInTheDocument();
@@ -91,7 +93,10 @@ describe("<Environment />", () => {
     const searchInput = component.getByPlaceholderText(
       "Search for environment"
     );
-    fireEvent.change(searchInput, { target: { value: "python-flask-env-2" } });
+
+    fireEvent.change(searchInput, {
+      target: { value: "python-flask-env-2" }
+    });
 
     await waitFor(() => {
       expect(screen.getByText("python-flask-env-2")).not.toBeNull();
diff --git a/test/playwright/test_ux.py b/test/playwright/test_ux.py
index 765c7953..4df6785d 100644
--- a/test/playwright/test_ux.py
+++ b/test/playwright/test_ux.py
@@ -119,20 +119,6 @@ def _create_new_environment(page, screenshot=False):
     return new_env_name
 
 
-def _close_environment_tabs(page):
-    """Close any open tabs in the UI. This will continue closing tabs
-    until no tabs remain open.
-
-    Paramaters
-    ----------
-    page: playwright.Page
-        page object for the current test being run
-    """
-    close_tab = page.get_by_test_id("closeTab")
-    while close_tab.count() > 0:
-        close_tab.first.click()
-
-
 def _existing_environment_interactions(
     page, env_name, time_to_build_env=3 * 60 * 1000, screenshot=False
 ):
@@ -156,9 +142,12 @@ def _existing_environment_interactions(
         grab screenshots
 
     """
+    env_link = page.get_by_role("link", name=env_name)
+    edit_button = page.get_by_role("button", name="Edit")
+
     # edit existing environment throught the YAML editor
-    page.get_by_role("button", name=env_name).click()
-    page.get_by_role("button", name="Edit").click()
+    env_link.click()
+    edit_button.click()
     page.get_by_label("YAML").check()
     if screenshot:
         page.screenshot(path="test-results/conda-store-yaml-editor.png")
@@ -169,13 +158,15 @@ def _existing_environment_interactions(
         "channels:\n  - conda-forge\ndependencies:\n  - rich\n  - python\n  - pip:\n      - nothing\n  - ipykernel\n\n"
     )
     page.get_by_role("button", name="Save").click()
+    edit_button.wait_for(state="attached")
+
     # wait until the status is `Completed`
     completed = page.get_by_text("Completed", exact=False)
     completed.wait_for(state="attached", timeout=time_to_build_env)
 
     # ensure the namespace is expanded
     try:
-        expect(page.get_by_role("button", name=env_name)).to_be_visible()
+        expect(env_link).to_be_visible()
     except Exception as e:
         # click to expand the `username` name space (but not click the +)
         page.get_by_role(
@@ -183,8 +174,8 @@ def _existing_environment_interactions(
         ).click()
 
     # edit existing environment
-    page.get_by_role("button", name=env_name).click()
-    page.get_by_role("button", name="Edit").click()
+    env_link.click()
+    edit_button.click()
     # page.get_by_placeholder("Enter here the description of your environment").click()
     # change the description
     page.get_by_placeholder("Enter here the description of your environment").fill(
@@ -221,22 +212,22 @@ def _existing_environment_interactions(
     page.get_by_label("Enter channel").press("Enter")
     # click save to start the new env build
     page.get_by_role("button", name="Save").click()
+    edit_button.wait_for(state="attached")
 
     # wait until the status is `Completed`
     completed = page.get_by_text("Completed", exact=False)
     completed.wait_for(state="attached", timeout=time_to_build_env)
 
     # Edit -> Cancel editing
-    page.get_by_role("button", name=env_name).click()
-    page.get_by_role("button", name="Edit").click()
+    edit_button.click()
     page.get_by_role("button", name="Cancel").click()
 
     # Edit -> Delete environment
-    page.get_by_role("button", name="Edit").click()
+    edit_button.click()
     page.get_by_text("Delete environment").click()
     page.get_by_role("button", name="Delete").click()
 
-    expect(page.get_by_role("button", name=env_name)).not_to_be_visible()
+    expect(env_link).not_to_be_visible()
 
 
 def test_integration(page: Page, test_config, screenshot):
@@ -288,9 +279,6 @@ def test_integration(page: Page, test_config, screenshot):
     # create a new environment
     env_name = _create_new_environment(page, screenshot=screenshot)
 
-    # close any open tabs on the conda-store ui
-    _close_environment_tabs(page)
-
     # interact with an existing environment
     _existing_environment_interactions(page, env_name, screenshot=screenshot)
 
@@ -323,9 +311,6 @@ def test_integration(page: Page, test_config, screenshot):
     # create a new environment
     env_name = _create_new_environment(page, screenshot=screenshot)
 
-    # close any open tabs on the conda-store ui
-    _close_environment_tabs(page)
-
     # interact with an existing environment
     _existing_environment_interactions(page, env_name, screenshot=screenshot)
 
diff --git a/test/requestedPackages/AddRequestedPackage.test.tsx b/test/requestedPackages/AddRequestedPackage.test.tsx
index bd1e8dcd..f9d32db0 100644
--- a/test/requestedPackages/AddRequestedPackage.test.tsx
+++ b/test/requestedPackages/AddRequestedPackage.test.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Provider } from "react-redux";
 import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { mockTheme } from "../testutils";
 import { AddRequestedPackage } from "../../src/features/requestedPackages/components/AddRequestedPackage";
 import { store } from "../../src/store";
 
@@ -11,13 +12,15 @@ describe("<AddRequestedPackage />", () => {
 
   beforeEach(() => {
     component = render(
-      <Provider store={store}>
-        <AddRequestedPackage
-          onCancel={mockOnCancel}
-          onSubmit={mockOnSubmit}
-          isCreating={true}
-        />
-      </Provider>
+      mockTheme(
+        <Provider store={store}>
+          <AddRequestedPackage
+            onCancel={mockOnCancel}
+            onSubmit={mockOnSubmit}
+            isCreating={true}
+          />
+        </Provider>
+      )
     );
   });
 
diff --git a/webpack.config.js b/webpack.config.js
index a73ad539..0e7fe2f0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -28,16 +28,17 @@ const isProd = process.env.NODE_ENV === "production";
 
 const basicConfig = {
   devServer: {
-    port: 8000
+    port: 8000,
   },
   devtool: isProd ? false : "source-map",
-  entry: ["src/index.tsx", "src/AppExample.tsx"],
+  entry: ["src/index.tsx", "src/main.tsx"],
   watch: false,
   ...getContext(__dirname),
 
   output: {
     path: path.resolve(__dirname, "dist"),
-    filename: "[name].js"
+    filename: "[name].js",
+    publicPath: "/"
   },
 
   module: {