Jamakase/add workspaces word to url (#8878)

* Prepend all workspaces resources with /workspaces
airbytehq · Dec 17, 2021 · 31fcbed · 31fcbed
1 parent 33e0efc
commit 31fcbed
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 67 deletions.
diff --git a/airbyte-webapp/src/components/SideMenu/SideMenu.tsx b/airbyte-webapp/src/components/SideMenu/SideMenu.tsx
@@ -50,7 +50,7 @@ const SideMenu: React.FC<SideMenuProps> = ({ data, onSelect, activeItem }) => {
             <MenuItem
               key={route.path}
               name={route.name}
-              isActive={activeItem?.includes(route.path)}
+              isActive={activeItem?.endsWith(route.path)}
               count={route.indicatorCount}
               onClick={() => onSelect(route.path)}
             />

diff --git a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx
@@ -130,7 +130,7 @@ const MainViewRoutes = () => {
       <Route path={CloudRoutes.SelectWorkspace} element={<WorkspacesPage />} />
       <Route path={CloudRoutes.AuthFlow} element={<CompleteOauthRequest />} />
       <Route
-        path=":workspaceId/*"
+        path={`${RoutePaths.Workspaces}/:workspaceId/*`}
         element={
           <MainView>
             <MainRoutes />

diff --git a/...d/views/layout/MainView/ErrorBoundary.tsx → .../InsufficientPermissionsErrorBoundary.tsx b/...d/views/layout/MainView/ErrorBoundary.tsx → .../InsufficientPermissionsErrorBoundary.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { FormattedMessage } from "react-intl";
 
 import { CommonRequestError } from "core/request/CommonRequestError";
 
@@ -10,18 +9,13 @@ const initialState: BoundaryState = {
   message: null,
 };
 
-export class ErrorBoundary extends React.Component<
+export class InsufficientPermissionsErrorBoundary extends React.Component<
   { errorComponent: React.ReactElement },
   BoundaryState
 > {
   static getDerivedStateFromError(error: CommonRequestError): BoundaryState {
     if (error.message.startsWith("Insufficient permissions")) {
       return { hasError: true, message: error.message };
-    } else if (error.status === 422) {
-      return {
-        hasError: true,
-        message: <FormattedMessage id="errorView.notFound" />,
-      };
     } else {
       throw error;
     }

diff --git a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx
@@ -5,7 +5,7 @@ import { Outlet } from "react-router-dom";
 import { LoadingPage } from "components";
 
 import SideBar from "packages/cloud/views/layout/SideBar";
-import { ErrorBoundary } from "./ErrorBoundary";
+import { InsufficientPermissionsErrorBoundary } from "./InsufficientPermissionsErrorBoundary";
 import { StartOverErrorView } from "views/common/StartOverErrorView";
 import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 
@@ -24,18 +24,20 @@ const Content = styled.div`
   height: 100%;
 `;
 
-const MainView: React.FC = ({ children }) => (
+const MainView: React.FC = (props) => (
   <MainContainer>
-    <ErrorBoundary errorComponent={<StartOverErrorView />}>
+    <InsufficientPermissionsErrorBoundary
+      errorComponent={<StartOverErrorView />}
+    >
       <SideBar />
       <Content>
         <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
-          <React.Suspense fallback={LoadingPage}>
-            {children ?? <Outlet />}
+          <React.Suspense fallback={<LoadingPage />}>
+            {props.children ?? <Outlet />}
           </React.Suspense>
         </ResourceNotFoundErrorBoundary>
       </Content>
-    </ErrorBoundary>
+    </InsufficientPermissionsErrorBoundary>
   </MainContainer>
 );
 

diff --git a/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx
@@ -1,14 +1,13 @@
 import React, { Suspense } from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
-import { NetworkErrorBoundary as ErrorBoundary } from "rest-hooks";
+import { Route, Routes } from "react-router-dom";
 
 import { RoutePaths } from "../routes";
 import LoadingPage from "components/LoadingPage";
 import ConnectionItemPage from "./pages/ConnectionItemPage";
 import CreationFormPage from "./pages/CreationFormPage";
 import AllConnectionsPage from "./pages/AllConnectionsPage";
-
-const FallbackRootNavigateor = () => <Navigate to={RoutePaths.Root} />;
+import { StartOverErrorView } from "views/common/StartOverErrorView";
+import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 
 const ConnectionPage: React.FC = () => {
   return (
@@ -18,9 +17,11 @@ const ConnectionPage: React.FC = () => {
         <Route
           path=":id/*"
           element={
-            <ErrorBoundary fallbackComponent={FallbackRootNavigateor}>
+            <ResourceNotFoundErrorBoundary
+              errorComponent={<StartOverErrorView />}
+            >
               <ConnectionItemPage />
-            </ErrorBoundary>
+            </ResourceNotFoundErrorBoundary>
           }
         />
         <Route index element={<AllConnectionsPage />} />

diff --git a/airbyte-webapp/src/pages/DestinationPage/DestinationPage.tsx b/airbyte-webapp/src/pages/DestinationPage/DestinationPage.tsx
@@ -1,14 +1,13 @@
 import React from "react";
-import { Navigate, Route, Routes } from "react-router-dom";
-import { NetworkErrorBoundary as ErrorBoundary } from "rest-hooks";
+import { Route, Routes } from "react-router-dom";
 
 import { RoutePaths } from "../routes";
 import AllDestinationsPage from "./pages/AllDestinationsPage";
 import DestinationItemPage from "./pages/DestinationItemPage";
 import CreateDestinationPage from "./pages/CreateDestinationPage";
 import CreationFormPage from "../ConnectionPage/pages/CreationFormPage";
-
-const FallbackRootNavigateor = () => <Navigate to={RoutePaths.Destination} />;
+import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
+import { StartOverErrorView } from "views/common/StartOverErrorView";
 
 const DestinationsPage: React.FC = () => {
   return (
@@ -21,13 +20,14 @@ const DestinationsPage: React.FC = () => {
       <Route
         path=":id"
         element={
-          <ErrorBoundary fallbackComponent={FallbackRootNavigateor}>
+          <ResourceNotFoundErrorBoundary
+            errorComponent={<StartOverErrorView />}
+          >
             <DestinationItemPage />
-          </ErrorBoundary>
+          </ResourceNotFoundErrorBoundary>
         }
       />
       <Route index element={<AllDestinationsPage />} />
-      <Route element={<Navigate to={RoutePaths.Root} />} />
     </Routes>
   );
 };

diff --git a/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx b/airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx
@@ -9,7 +9,6 @@ import PageTitle from "components/PageTitle";
 import LoadingPage from "components/LoadingPage";
 import HeadTitle from "components/HeadTitle";
 import SideMenu from "components/SideMenu";
-import { RoutePaths } from "pages/routes";
 import useRouter from "hooks/useRouter";
 import NotificationPage from "./pages/NotificationPage";
 import ConfigurationsPage from "./pages/ConfigurationsPage";
@@ -90,7 +89,7 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ pageConfig }) => {
   ];
 
   const onSelectMenuItem = (newPath: string) => push(newPath);
-  const firstRoute = menuItems?.[0].routes?.[0]?.path;
+  const firstRoute = menuItems[0].routes?.[0]?.path;
 
   return (
     <MainPageWithScroll
@@ -109,29 +108,13 @@ const SettingsPage: React.FC<SettingsPageProps> = ({ pageConfig }) => {
         <MainView>
           <Suspense fallback={<LoadingPage />}>
             <Routes>
-              {menuItems.flatMap((menuItem) =>
-                menuItem.routes.map(({ path, component: Component }) => (
-                  <Route
-                    key={`${path}`}
-                    path={`${path}`}
-                    element={<Component />}
-                  />
-                ))
-              )}
+              {menuItems
+                .flatMap((menuItem) => menuItem.routes)
+                .map(({ path, component: Component }) => (
+                  <Route key={path} path={path} element={<Component />} />
+                ))}
 
-              <Route
-                path="*"
-                element={
-                  <Navigate
-                    to={
-                      firstRoute
-                        ? `${menuItems?.[0].routes?.[0]?.path}`
-                        : RoutePaths.Root
-                    }
-                    replace
-                  />
-                }
-              />
+              <Route path="*" element={<Navigate to={firstRoute} replace />} />
             </Routes>
           </Suspense>
         </MainView>

diff --git a/airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx b/airbyte-webapp/src/pages/SourcesPage/SourcesPage.tsx
@@ -1,14 +1,13 @@
 import React from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
-import { NetworkErrorBoundary as ErrorBoundary } from "rest-hooks";
 
 import { RoutePaths } from "pages/routes";
 import AllSourcesPage from "./pages/AllSourcesPage";
 import CreateSourcePage from "./pages/CreateSourcePage";
 import SourceItemPage from "./pages/SourceItemPage";
 import CreationFormPage from "pages/ConnectionPage/pages/CreationFormPage";
-
-const FallbackRootNavigateor = () => <Navigate to="" />;
+import { StartOverErrorView } from "views/common/StartOverErrorView";
+import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 
 const SourcesPage: React.FC = () => (
   <Routes>
@@ -17,9 +16,9 @@ const SourcesPage: React.FC = () => (
     <Route
       path=":id"
       element={
-        <ErrorBoundary fallbackComponent={FallbackRootNavigateor}>
+        <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
           <SourceItemPage />
-        </ErrorBoundary>
+        </ResourceNotFoundErrorBoundary>
       }
     />
     <Route index element={<AllSourcesPage />} />

diff --git a/airbyte-webapp/src/pages/routes.tsx b/airbyte-webapp/src/pages/routes.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { useIntl } from "react-intl";
+import { useLocation } from "react-use";
 
 import { useConfig } from "config";
 
@@ -23,13 +24,13 @@ import {
 import { useListWorkspaces } from "services/workspaces/WorkspacesService";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
-import { useLocation } from "react-use";
 import { Workspace } from "core/domain/workspace/Workspace";
 
 export enum RoutePaths {
   AuthFlow = "/auth_flow",
   Root = "/",
 
+  Workspaces = "workspaces",
   Preferences = "preferences",
   Onboarding = "onboarding",
   Connections = "connections",
@@ -117,14 +118,18 @@ const PreferencesRoutes = () => (
   </Routes>
 );
 
-export const AutoSelectFirstWorkspace: React.FC = () => {
+export const AutoSelectFirstWorkspace: React.FC<{ includePath?: boolean }> = ({
+  includePath,
+}) => {
   const location = useLocation();
   const workspaces = useListWorkspaces();
   const currentWorkspace = workspaces[0];
 
   return (
     <Navigate
-      to={`/${currentWorkspace.workspaceId}${location.pathname}`}
+      to={`/${RoutePaths.Workspaces}/${currentWorkspace.workspaceId}${
+        includePath ? location.pathname : ""
+      }`}
       replace={true}
     />
   );
@@ -152,15 +157,23 @@ export const Routing: React.FC = () => {
   const OldRoutes = useMemo(
     () =>
       Object.values(RoutePaths).map((r) => (
-        <Route path={`${r}/*`} key={r} element={<AutoSelectFirstWorkspace />} />
+        <Route
+          path={`${r}/*`}
+          key={r}
+          element={<AutoSelectFirstWorkspace includePath />}
+        />
       )),
     []
   );
   return (
     <Routes>
       {OldRoutes}
       <Route path={RoutePaths.AuthFlow} element={<CompleteOauthRequest />} />
-      <Route path="/:workspaceId/*" element={<RoutingWithWorkspace />} />
+      <Route
+        path={`${RoutePaths.Workspaces}/:workspaceId/*`}
+        element={<RoutingWithWorkspace />}
+      />
+      <Route path="*" element={<AutoSelectFirstWorkspace />} />
     </Routes>
   );
 };
diff --git a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
@@ -5,6 +5,7 @@ import { useResetter, useResource } from "rest-hooks";
 import WorkspaceResource from "core/resources/Workspace";
 import useRouter from "hooks/useRouter";
 import { Workspace } from "core/domain/workspace/Workspace";
+import { RoutePaths } from "pages/routes";
 
 type Context = {
   selectWorkspace: (workspaceId?: string | null | Workspace) => void;
@@ -25,9 +26,9 @@ const useSelectWorkspace = (): ((
   return useCallback(
     async (workspace) => {
       if (typeof workspace === "object") {
-        push(workspace?.workspaceId ?? "/");
+        push(`/${RoutePaths.Workspaces}/${workspace?.workspaceId}`);
       } else {
-        push(workspace ?? "/");
+        push(`/${RoutePaths.Workspaces}/${workspace}`);
       }
       await queryClient.resetQueries();
       resetCache();

diff --git a/airbyte-webapp/src/views/common/StartOverErrorView.tsx b/airbyte-webapp/src/views/common/StartOverErrorView.tsx
@@ -8,6 +8,8 @@ import { Button } from "components";
 
 const ResetSection = styled.div`
   margin-top: 30px;
+  display: flex;
+  justify-content: space-around;
 `;
 
 export const StartOverErrorView: React.FC<{

diff --git a/airbyte-webapp/src/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/views/layout/MainView/MainView.tsx
@@ -1,15 +1,18 @@
-import React, { Suspense } from "react";
+import React from "react";
 import styled from "styled-components";
 
+import { LoadingPage } from "components";
 import SideBar from "views/layout/SideBar";
-import LoadingPage from "components/LoadingPage";
+import { StartOverErrorView } from "views/common/StartOverErrorView";
+import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary";
 
 const MainContainer = styled.div`
   width: 100%;
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: row;
+  min-height: 680px;
 `;
 
 const Content = styled.div`
@@ -22,7 +25,11 @@ const MainView: React.FC = (props) => (
   <MainContainer>
     <SideBar />
     <Content>
-      <Suspense fallback={<LoadingPage />}>{props.children}</Suspense>
+      <ResourceNotFoundErrorBoundary errorComponent={<StartOverErrorView />}>
+        <React.Suspense fallback={<LoadingPage />}>
+          {props.children}
+        </React.Suspense>
+      </ResourceNotFoundErrorBoundary>
     </Content>
   </MainContainer>
 );