Skip to content

Commit

Permalink
feat: set styles for new routing
Browse files Browse the repository at this point in the history 
by default styles v2,
styles v1 apply only for /v1, /projects/*, /datasets/*
  • Loading branch information
@andre-code
andre-code committed Jan 21, 2025
1 parent 804df8d commit 1b9be89
Show file tree
Hide file tree
Showing 20 changed files with 393 additions and 189 deletions.
229 changes: 94 additions & 135 deletions client/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,32 +32,26 @@ 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";
Expand All @@ -74,142 +68,96 @@ export const ContainerWrap = ({ children, fullSize = false }) => {
};

function CentralContentContainer(props) {
const { coreApiVersionedUrlConfig, notifications, socket, user } = props;
const { notifications, socket, user } = props;

const { data: userInfo } = useGetUserQuery(
props.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"];

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="/">
{props.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={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="/v1">
<LazyRootV1 {...props} />
</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,18 +211,29 @@ 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}
/>
<AppContext.Provider value={appContext}>
<RenkuNavBar {...props} notifications={notifications} />
<CentralContentContainer
notifications={notifications}
socket={webSocket}
location={location}
{...props}
/>
</AppContext.Provider>
<FooterNavbar params={props.params} />
<Cookie />
<ToastContainer />
Expand Down
17 changes: 15 additions & 2 deletions client/src/components/navbar/AnonymousNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,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 Down
5 changes: 3 additions & 2 deletions client/src/components/navbar/LoggedInNavBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ 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 { ABSOLUTE_ROUTES } from "../../routing/routes.constants.ts";
import { AppParams } from "../../utils/context/appParams.types";
import { Url } from "../../utils/helpers/url";
import { RenkuNavLink } from "../RenkuNavLink";
Expand Down Expand Up @@ -85,7 +86,7 @@ export default function LoggedInNavBar({
>
<NavItem className="nav-item col-12 col-sm-4 col-lg-auto pe-lg-4">
<RenkuNavLink
to={Url.get(Url.pages.search)}
to={Url.get(ABSOLUTE_ROUTES.v1.search)}
title="Search"
id="link-search"
icon={<Search />}
Expand All @@ -98,7 +99,7 @@ export default function LoggedInNavBar({
className="nav-item col-12 col-sm-4 col-lg-auto pe-lg-4"
>
<RenkuNavLink
to={Url.get(Url.pages.landing)}
to={Url.get(ABSOLUTE_ROUTES.v1.root)}
title="Dashboard"
id="link-dashboard"
/>
Expand Down
11 changes: 7 additions & 4 deletions client/src/components/navbar/NavBarItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import {
getActiveProjectPathWithNamespace,
gitLabUrlFromProfileUrl,
} from "../../utils/helpers/HelperFunctions";
import { Url } from "../../utils/helpers/url";
import { ExternalDocsLink, ExternalLink } from "../ExternalLinks";
import { Loader } from "../Loader";
import BootstrapGitLabIcon from "../icons/BootstrapGitLabIcon";
Expand Down Expand Up @@ -212,7 +213,7 @@ export function RenkuToolbarHelpMenu({ firstItem }: RenkuToolbarHelpMenuProps) {
aria-labelledby="help-menu"
>
<DropdownItem className="p-0">
<Link className="dropdown-item" to="/help">
<Link className="dropdown-item" to={Url.get(ABSOLUTE_ROUTES.v1.help)}>
Help
</Link>
</DropdownItem>
Expand Down Expand Up @@ -306,7 +307,9 @@ export function RenkuToolbarItemUser({
);
}

const userSecretsUrl = isV2 ? ABSOLUTE_ROUTES.v2.secrets : "/secrets";
const userSecretsUrl = isV2
? ABSOLUTE_ROUTES.v2.secrets
: ABSOLUTE_ROUTES.v1.secrets;

return (
<UncontrolledDropdown className={cx("nav-item", "dropdown")}>
Expand Down Expand Up @@ -349,7 +352,7 @@ export function RenkuToolbarItemUser({
Integrations
</Link>
<DropdownItem divider />
<Link to={ABSOLUTE_ROUTES.root} className="dropdown-item">
<Link to={ABSOLUTE_ROUTES.v1.root} className="dropdown-item">
Back to <span className="fw-bold">Renku 1.0</span>
</Link>
</>
Expand All @@ -358,7 +361,7 @@ export function RenkuToolbarItemUser({
{!isV2 && (
<>
<DropdownItem divider />
<Link to={ABSOLUTE_ROUTES.v2.root} className="dropdown-item">
<Link to={ABSOLUTE_ROUTES.root} className="dropdown-item">
<span className="fw-bold">Renku 2.0</span> Early access
</Link>
</>
Expand Down
2 changes: 1 addition & 1 deletion client/src/features/projectsV2/shared/BackToV1Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function BackToV1Button({
outline ? `btn-outline-${color}` : `btn-${color}`,
"text-decoration-none"
)}
to="/"
to="/v1"
>
<BoxArrowInLeft className="bi" /> Back to <b>Renku 1.0</b>
</Link>
Expand Down
Loading

0 comments on commit 1b9be89

Please sign in to comment.