Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] refact: new router with all routes in one place #443

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[WIP] refact: new router with all routes in one place #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 41 additions & 8 deletions src/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,28 +22,46 @@ import { Layout, message, Modal } from "antd";
import { BENTO_URL_NO_TRAILING_SLASH, OPENID_CONFIG_URL } from "@/config";
import eventHandler from "@/events";
import SessionWorker from "@/session.worker";
import { nop } from "@/utils/misc";
import { useService } from "@/modules/services/hooks";
import { fetchUserDependentData } from "@/modules/user/actions";
import { nop } from "@/utils/misc";

import NotificationDrawer from "./notifications/NotificationDrawer";
import AutoAuthenticate from "./AutoAuthenticate";
import RequireAuth from "./RequireAuth";
import SiteHeader from "./SiteHeader";
import SiteFooter from "./SiteFooter";
import SitePageLoading from "./SitePageLoading";
import { useService } from "@/modules/services/hooks";

// Lazy-load route components
// --- Begin route element components ----------------------------------------------------------------------------------
// - Lazy-load route components

const OverviewContent = lazy(() => import("./OverviewContent"));

const DataExplorerContent = lazy(() => import("./DataExplorerContent"));
const ExplorerSearchContent = lazy(() => import("@/components/explorer/ExplorerSearchContent"));
const ExplorerIndividualContent = lazy(() => import("@/components/explorer/ExplorerIndividualContent"));
const ExplorerGenomeBrowserContent = lazy(() => import("@/components/explorer/ExplorerGenomeBrowserContent"));

const DataManagerContent = lazy(() => import("./DataManagerContent"));
const ManagerProjectDatasetContent = lazy(() => import("@/components/manager/projects/ManagerProjectDatasetContent"));
const ManagerAccessContent = lazy(() => import("@/components/manager/access/ManagerAccessContent"));
const ManagerDropBoxContent = lazy(() => import("@/components/manager/ManagerDropBoxContent"));
const ManagerIngestionContent = lazy(() => import("@/components/manager/ManagerIngestionContent"));
const ManagerAnalysisContent = lazy(() => import("@/components/manager/ManagerAnalysisContent"));
const ManagerExportContent = lazy(() => import("@/components/manager/ManagerExportContent"));
const ManagerRunsContent = lazy(() => import("@/components/manager/runs/ManagerRunsContent"));
const ManagerDRSContent = lazy(() => import("@/components/manager/drs/ManagerDRSContent"));

const ReferenceGenomesContent = lazy(() => import("./ReferenceGenomesContent"));
const CBioPortalContent = lazy(() => import("./CBioPortalContent"));
const NotificationsContent = lazy(() => import("./notifications/NotificationsContent"));
const ServiceContent = lazy(() => import("./ServiceContent"));
const ServiceDetail = lazy(() => import("./services/ServiceDetail"));
const UserProfileContent = lazy(() => import("./UserProfileContent"));

// ---------------------------------------------------------------------------------------------------------------------

const SIGN_IN_WINDOW_FEATURES = "scrollbars=no, toolbar=no, menubar=no, width=800, height=600";

const CALLBACK_PATH = "/callback";
Expand Down Expand Up @@ -237,13 +255,18 @@ const App = () => {
}
/>
<Route
path="/data/explorer/*"
path="/data/explorer"
element={
<RequireAuth>
<DataExplorerContent />
</RequireAuth>
}
/>
>
<Route path="search/*" element={<ExplorerSearchContent />} />
<Route path="individuals/:individual/*" element={<ExplorerIndividualContent />} />
<Route path="genome/*" element={<ExplorerGenomeBrowserContent />} />
<Route index element={<Navigate to="search" replace={true} />} />
</Route>
{/* Reference content is available to everyone to view, at least, so wrap it in an
AutoAuthenticate (to re-authenticate if we were before) rather than requiring auth. */}
<Route
Expand Down Expand Up @@ -279,13 +302,23 @@ const App = () => {
}
/>
<Route
path="/data/manager/*"
path="/data/manager"
element={
<RequireAuth>
<DataManagerContent />
</RequireAuth>
}
/>
>
<Route path="projects/*" element={<ManagerProjectDatasetContent />} />
<Route path="access/*" element={<ManagerAccessContent />} />
<Route path="files" element={<ManagerDropBoxContent />} />
<Route path="ingestion" element={<ManagerIngestionContent />} />
<Route path="analysis" element={<ManagerAnalysisContent />} />
<Route path="export" element={<ManagerExportContent />} />
<Route path="drs" element={<ManagerDRSContent />} />
<Route path="runs/*" element={<ManagerRunsContent />} />
<Route index element={<Navigate to="projects" replace={true} />} />
</Route>
<Route
path="/notifications"
element={
Expand All @@ -302,7 +335,7 @@ const App = () => {
</RequireAuth>
}
/>
<Route path="/*" element={<Navigate to="/overview" replace={true} />} />
<Route index element={<Navigate to="/overview" replace={true} />} />
</Routes>
</Suspense>
</Layout.Content>
Expand Down
12 changes: 2 additions & 10 deletions src/components/DataExplorerContent.js → src/components/DataExplorerContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import { useEffect } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { Outlet } from "react-router-dom";

import { SITE_NAME } from "@/constants";
import { useCanQueryAtLeastOneProjectOrDataset } from "@/modules/authz/hooks";

import ExplorerGenomeBrowserContent from "./explorer/ExplorerGenomeBrowserContent";
import ExplorerIndividualContent from "./explorer/ExplorerIndividualContent";
import ExplorerSearchContent from "./explorer/ExplorerSearchContent";
import ForbiddenContent from "./ForbiddenContent";

const DataExplorerContent = () => {
Expand All @@ -22,12 +19,7 @@ const DataExplorerContent = () => {
}

return (
<Routes>
<Route path="search/*" element={<ExplorerSearchContent />} />
<Route path="individuals/:individual/*" element={<ExplorerIndividualContent />} />
<Route path="genome/*" element={<ExplorerGenomeBrowserContent />} />
<Route path="*" element={<Navigate to="search" replace={true} />} />
</Routes>
<Outlet />
);
};
export default DataExplorerContent;
36 changes: 14 additions & 22 deletions src/components/DataManagerContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Suspense, lazy, useEffect } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { Suspense, useEffect } from "react";
import { Outlet } from "react-router-dom";

import { Menu, Skeleton } from "antd";

Expand All @@ -9,15 +9,6 @@ import { matchingMenuKeys, transformMenuItem } from "@/utils/menu";

import SitePageHeader from "./SitePageHeader";

const ManagerProjectDatasetContent = lazy(() => import("./manager/projects/ManagerProjectDatasetContent"));
const ManagerAccessContent = lazy(() => import("./manager/access/ManagerAccessContent"));
const ManagerDropBoxContent = lazy(() => import("./manager/ManagerDropBoxContent"));
const ManagerIngestionContent = lazy(() => import("./manager/ManagerIngestionContent"));
const ManagerAnalysisContent = lazy(() => import("./manager/ManagerAnalysisContent"));
const ManagerExportContent = lazy(() => import("./manager/ManagerExportContent"));
const ManagerRunsContent = lazy(() => import("./manager/runs/ManagerRunsContent"));
const ManagerDRSContent = lazy(() => import("./manager/drs/ManagerDRSContent"));

const styles = {
menu: {
marginLeft: "-24px",
Expand Down Expand Up @@ -112,17 +103,18 @@ const DataManagerContent = () => {
</div>
}
>
<Routes>
<Route path="projects/*" element={<ManagerProjectDatasetContent />} />
<Route path="access/*" element={<ManagerAccessContent />} />
<Route path="files" element={<ManagerDropBoxContent />} />
<Route path="ingestion" element={<ManagerIngestionContent />} />
<Route path="analysis" element={<ManagerAnalysisContent />} />
<Route path="export" element={<ManagerExportContent />} />
<Route path="drs" element={<ManagerDRSContent />} />
<Route path="runs/*" element={<ManagerRunsContent />} />
<Route path="*" element={<Navigate to="projects" replace={true} />} />
</Routes>
<Outlet />
{/*<Routes>*/}
{/* <Route path="projects/*" element={<ManagerProjectDatasetContent />} />*/}
{/* <Route path="access/*" element={<ManagerAccessContent />} />*/}
{/* <Route path="files" element={<ManagerDropBoxContent />} />*/}
{/* <Route path="ingestion" element={<ManagerIngestionContent />} />*/}
{/* <Route path="analysis" element={<ManagerAnalysisContent />} />*/}
{/* <Route path="export" element={<ManagerExportContent />} />*/}
{/* <Route path="drs" element={<ManagerDRSContent />} />*/}
{/* <Route path="runs/*" element={<ManagerRunsContent />} />*/}
{/* <Route path="*" element={<Navigate to="projects" replace={true} />} />*/}
{/*</Routes>*/}
</Suspense>
</>
);
Expand Down