Skip to content

Commit

Permalink
feat: set styles for new routing launch build (#3494)
Browse files Browse the repository at this point in the history 
* feat: set styles for new routing

fix #3499
  • Loading branch information
@andre-code
andre-code authored Jan 27, 2025
1 parent 804df8d commit 814ef0f
Show file tree
Hide file tree
Showing 26 changed files with 438 additions and 281 deletions.
230 changes: 88 additions & 142 deletions client/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,43 +24,35 @@
*/

import { skipToken } from "@reduxjs/toolkit/query";
import { Fragment, useEffect, useState } from "react";
import { Fragment, useContext, useEffect, useState } from "react";
import { Helmet } from "react-helmet";
import { Redirect, useLocation } from "react-router";
import { Route, Switch } from "react-router-dom";
import { CompatRoute } from "react-router-dom-v5-compat";
import { ToastContainer } from "react-toastify";

import { LoginHelper } from "./authentication";
import { DashboardBanner } from "./components/earlyAccessBanner/EarlyAccessBanner";
import { Loader } from "./components/Loader";
import LazyDatasetAddToProject from "./dataset/addtoproject/LazyDatasetAddToProject";
import { DatasetCoordinator } from "./dataset/Dataset.state";
import LazyShowDataset from "./dataset/LazyShowDataset";
import LazyAdminPage from "./features/admin/LazyAdminPage";
import LazyDashboard from "./features/dashboard/LazyDashboard";
import LazyDashboardV2 from "./features/dashboardV2/LazyDashboardV2";
import { Favicon } from "./features/favicon/Favicon";
import LazyInactiveKGProjectsPage from "./features/inactiveKgProjects/LazyInactiveKGProjectsPage";
import LazySearchPage from "./features/kgSearch/LazySearchPage";
import { Unavailable } from "./features/maintenance/Maintenance";
import LazyRootV1 from "./features/rootV1/LazyRootV1";
import LazyRootV2 from "./features/rootV2/LazyRootV2";
import LazySecrets from "./features/secrets/LazySecrets";
import LazyAnonymousSessionsList from "./features/session/components/LazyAnonymousSessionsList";
import { useGetUserQuery } from "./features/usersV2/api/users.api";
import LazyHelp from "./help/LazyHelp";
import LazyAnonymousHome from "./landing/LazyAnonymousHome";
import { FooterNavbar, RenkuNavBar } from "./landing/NavBar";
import LazyNotFound from "./not-found/LazyNotFound";
import LazyNotificationsPage from "./notifications/LazyNotificationsPage";
import NotificationsManager from "./notifications/NotificationsManager";
import Cookie from "./privacy/Cookie";
import LazyProjectView from "./project/LazyProjectView";
import LazyProjectList from "./project/list/LazyProjectList";
import LazyNewProject from "./project/new/LazyNewProject";
import LazyStyleGuide from "./styleguide/LazyStyleGuide";
import AppContext from "./utils/context/appContext";
import useLegacySelector from "./utils/customHooks/useLegacySelector.hook";
import { Url } from "./utils/helpers/url";
import { setupWebSocket } from "./websocket";

import "react-toastify/dist/ReactToastify.css";
Expand All @@ -73,143 +65,91 @@ export const ContainerWrap = ({ children, fullSize = false }) => {
return <div className={classContainer}>{children}</div>;
};

function CentralContentContainer(props) {
const { coreApiVersionedUrlConfig, notifications, socket, user } = props;
function CentralContentContainer({ user, socket }) {
const { params, model, client, notifications } = useContext(AppContext);

const { data: userInfo } = useGetUserQuery(
props.user.logged ? undefined : skipToken
user.logged ? undefined : skipToken
);

const appContext = {
client: props.client,
coreApiVersionedUrlConfig,
location: props.location,
model: props.model,
notifications,
params: props.params,
webSocket: socket,
};

// check anonymous sessions settings
const blockAnonymous = !user.logged && !props.params["ANONYMOUS_SESSIONS"];
const blockAnonymous = !user.logged && !params["ANONYMOUS_SESSIONS"];

return (
<div className="d-flex flex-grow-1">
<AppContext.Provider value={appContext}>
<Helmet>
<title>Reproducible Data Science | Open Research | Renku</title>
</Helmet>
<Switch>
<CompatRoute exact path="/">
{props.user.logged ? (
<ContainerWrap>
<LazyDashboard />
</ContainerWrap>
) : (
<div className="w-100">
<LazyAnonymousHome />
</div>
)}
</CompatRoute>
<CompatRoute path="/help">
<ContainerWrap>
<LazyHelp />
</ContainerWrap>
</CompatRoute>
<CompatRoute path="/search">
<ContainerWrap>
<LazySearchPage />
<Helmet>
<title>Reproducible Data Science | Open Research | Renku</title>
</Helmet>
<Switch>
<CompatRoute exact path="/">
{user.logged ? (
<ContainerWrap fullSize={true}>
<LazyDashboardV2 />
</ContainerWrap>
</CompatRoute>
<CompatRoute path="/inactive-kg-projects">
{props.user.logged ? (
<ContainerWrap>
<LazyInactiveKGProjectsPage />
</ContainerWrap>
) : (
<LazyNotFound />
)}
</CompatRoute>
{["/projects", "/projects/starred", "/projects/all"].map((path) => (
<CompatRoute key={path} exact path={path}>
<ContainerWrap>
<LazyProjectList />
</ContainerWrap>
</CompatRoute>
))}
<CompatRoute exact path="/projects/new">
<ContainerWrap>
<LazyNewProject />
</ContainerWrap>
</CompatRoute>
<Route path="/projects/:subUrl+">
<LazyProjectView
client={props.client}
params={props.params}
model={props.model}
user={props.user}
blockAnonymous={blockAnonymous}
notifications={notifications}
socket={socket}
/>
</Route>
<Route exact path={Url.get(Url.pages.sessions)}>
{!user.logged ? <LazyAnonymousSessionsList /> : <Redirect to="/" />}
</Route>
<Route path="/datasets/:identifier/add">
<LazyDatasetAddToProject
insideProject={false}
model={props.model}
/>
</Route>
<CompatRoute path="/datasets/:identifier">
<LazyShowDataset
insideProject={false}
client={props.client}
projectsUrl="/projects"
datasetCoordinator={
new DatasetCoordinator(
props.client,
props.model.subModel("dataset")
)
}
logged={props.user.logged}
model={props.model}
/>
</CompatRoute>
<CompatRoute path="/datasets">
<Redirect to="/search?type=dataset" />
</CompatRoute>
<CompatRoute path="/notifications">
<ContainerWrap>
<LazyNotificationsPage />
</ContainerWrap>
</CompatRoute>
<CompatRoute path="/v2">
<LazyRootV2 />
</CompatRoute>
<CompatRoute path="/style-guide">
) : (
<div className="w-100">
<LazyAnonymousHome />
</div>
)}
</CompatRoute>
{["/projects", "/projects/starred", "/projects/all"].map((path) => (
<CompatRoute key={path} exact path={path}>
<ContainerWrap>
<LazyStyleGuide />
<LazyProjectList />
</ContainerWrap>
</CompatRoute>
{userInfo?.isLoggedIn && userInfo.is_admin && (
<CompatRoute path="/admin">
<ContainerWrap>
<LazyAdminPage />
</ContainerWrap>
</CompatRoute>
)}
<CompatRoute path="/secrets">
))}
<CompatRoute exact path="/projects/new">
<ContainerWrap>
<LazyNewProject />
</ContainerWrap>
</CompatRoute>
<Route path="/projects/:subUrl+">
<LazyProjectView
client={client}
params={params}
model={model}
user={user}
blockAnonymous={blockAnonymous}
notifications={notifications}
socket={socket}
/>
</Route>
<Route path="/datasets/:identifier/add">
<LazyDatasetAddToProject insideProject={false} model={model} />
</Route>
<CompatRoute path="/datasets/:identifier">
<LazyShowDataset
insideProject={false}
client={client}
projectsUrl="/projects"
datasetCoordinator={
new DatasetCoordinator(client, model.subModel("dataset"))
}
logged={user.logged}
model={model}
/>
</CompatRoute>
<CompatRoute path="/datasets">
<Redirect to="/search?type=dataset" />
</CompatRoute>
<CompatRoute path="/v1">
<LazyRootV1 user={user} />
</CompatRoute>
<CompatRoute path="/v2">
<LazyRootV2 />
</CompatRoute>
{userInfo?.isLoggedIn && userInfo.is_admin && (
<CompatRoute path="/admin">
<ContainerWrap>
<LazySecrets />
<LazyAdminPage />
</ContainerWrap>
</CompatRoute>
<Route path="/*">
<LazyNotFound />
</Route>
</Switch>
</AppContext.Provider>
)}
<Route path="/*">
<LazyNotFound />
</Route>
</Switch>
</div>
);
}
Expand Down Expand Up @@ -263,19 +203,25 @@ function App(props) {
<Unavailable model={props.model} statuspageId={props.statuspageId} />
);
}
const { coreApiVersionedUrlConfig, socket } = props;
const appContext = {
client: props.client,
coreApiVersionedUrlConfig,
location: props.location,
model: props.model,
notifications,
params: props.params,
webSocket: socket,
};

return (
<Fragment>
<Favicon />
<RenkuNavBar {...props} notifications={notifications} />
<DashboardBanner user={props.user} />
<CentralContentContainer
notifications={notifications}
socket={webSocket}
location={location}
{...props}
/>
<FooterNavbar params={props.params} />
<AppContext.Provider value={appContext}>
<RenkuNavBar user={user} />
<CentralContentContainer user={user} socket={webSocket} />
</AppContext.Provider>
<FooterNavbar />
<Cookie />
<ToastContainer />
</Fragment>
Expand Down
41 changes: 23 additions & 18 deletions client/src/components/navbar/AnonymousNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@
*/

import cx from "classnames";
import { useCallback, useState } from "react";
import { useCallback, useContext, useState } from "react";
import { List, Search } from "react-bootstrap-icons";
import { Link } from "react-router-dom";
import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";

import StatusBanner from "../../features/platform/components/StatusBanner";
import { NavBarWarnings } from "../../landing/NavBarWarnings";
import type { AppParams } from "../../utils/context/appParams.types";
import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
import AppContext from "../../utils/context/appContext";
import { Url } from "../../utils/helpers/url";
import { RenkuNavLink } from "../RenkuNavLink";
import {
Expand All @@ -34,18 +35,9 @@ import {
} from "./NavBarItems";
import { RENKU_LOGO } from "./navbar.constans";

interface AnonymousNavBarProps {
model: unknown;
notifications: unknown;
params: AppParams;
}

export default function AnonymousNavBar({
model,
notifications,
params,
}: AnonymousNavBarProps) {
const uiShortSha = params.UI_SHORT_SHA;
export default function AnonymousNavBar() {
const { params, model, notifications } = useContext(AppContext);
const uiShortSha = params?.UI_SHORT_SHA;

const [isOpen, setIsOpen] = useState(false);

Expand All @@ -55,10 +47,23 @@ export default function AnonymousNavBar({

return (
<>
<header className="navbar navbar-expand-lg navbar-dark rk-navbar p-0">
<header
className={cx(
"navbar",
"navbar-expand-lg",
"bg-navy",
"rk-navbar",
"p-0"
)}
>
<Navbar
color="primary"
className="container-fluid flex-wrap flex-lg-nowrap renku-container"
className={cx(
"container",
"flex-wrap",
"flex-lg-nowrap",
"renku-container"
)}
>
<Link
id="link-home"
Expand All @@ -83,7 +88,7 @@ export default function AnonymousNavBar({
>
<NavItem className="nav-item col-12 col-sm-4 col-lg-auto pe-lg-4">
<RenkuNavLink
to={Url.get(Url.pages.search)}
to={ABSOLUTE_ROUTES.v1.search}
title="Search"
id="link-search"
icon={<Search />}
Expand All @@ -92,7 +97,7 @@ export default function AnonymousNavBar({
</NavItem>
<NavItem className="nav-item col-12 col-sm-4 col-lg-auto pe-lg-4">
<RenkuNavLink
to={Url.get(Url.pages.sessions)}
to={ABSOLUTE_ROUTES.v1.sessions}
title="Sessions"
id="link-sessions"
/>
Expand Down
Loading

0 comments on commit 814ef0f

Please sign in to comment.