Skip to content

Commit 1a3d814

Browse files
andre-codeciyer
andre-code
authored and
ciyer
committed
feat: set styles for new routing launch build (#3494)
* feat: set styles for new routing fix #3499
1 parent cd0fdf1 commit 1a3d814

File tree

26 files changed

+414
-272
lines changed

26 files changed

+414
-272
lines changed

‎client/src/App.jsx

Lines changed: 89 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -24,43 +24,35 @@
2424
*/
2525

2626
import { skipToken } from "@reduxjs/toolkit/query";
27-
import { Fragment, useEffect, useState } from "react";
27+
import { Fragment, useContext, useEffect, useState } from "react";
2828
import { Helmet } from "react-helmet";
2929
import { Redirect, useLocation } from "react-router";
3030
import { Route, Switch } from "react-router-dom";
3131
import { CompatRoute } from "react-router-dom-v5-compat";
3232
import { ToastContainer } from "react-toastify";
3333

3434
import { LoginHelper } from "./authentication";
35-
import { DashboardBanner } from "./components/earlyAccessBanner/EarlyAccessBanner";
3635
import { Loader } from "./components/Loader";
3736
import LazyDatasetAddToProject from "./dataset/addtoproject/LazyDatasetAddToProject";
3837
import { DatasetCoordinator } from "./dataset/Dataset.state";
3938
import LazyShowDataset from "./dataset/LazyShowDataset";
4039
import LazyAdminPage from "./features/admin/LazyAdminPage";
41-
import LazyDashboard from "./features/dashboard/LazyDashboard";
40+
import LazyDashboardV2 from "./features/dashboardV2/LazyDashboardV2";
4241
import { Favicon } from "./features/favicon/Favicon";
43-
import LazyInactiveKGProjectsPage from "./features/inactiveKgProjects/LazyInactiveKGProjectsPage";
44-
import LazySearchPage from "./features/kgSearch/LazySearchPage";
4542
import { Unavailable } from "./features/maintenance/Maintenance";
43+
import LazyRootV1 from "./features/rootV1/LazyRootV1";
4644
import LazyRootV2 from "./features/rootV2/LazyRootV2";
47-
import LazySecrets from "./features/secrets/LazySecrets";
48-
import LazyAnonymousSessionsList from "./features/session/components/LazyAnonymousSessionsList";
4945
import { useGetUserQuery } from "./features/usersV2/api/users.api";
50-
import LazyHelp from "./help/LazyHelp";
5146
import LazyAnonymousHome from "./landing/LazyAnonymousHome";
5247
import { FooterNavbar, RenkuNavBar } from "./landing/NavBar";
5348
import LazyNotFound from "./not-found/LazyNotFound";
54-
import LazyNotificationsPage from "./notifications/LazyNotificationsPage";
5549
import NotificationsManager from "./notifications/NotificationsManager";
5650
import Cookie from "./privacy/Cookie";
5751
import LazyProjectView from "./project/LazyProjectView";
5852
import LazyProjectList from "./project/list/LazyProjectList";
5953
import LazyNewProject from "./project/new/LazyNewProject";
60-
import LazyStyleGuide from "./styleguide/LazyStyleGuide";
6154
import AppContext from "./utils/context/appContext";
6255
import useLegacySelector from "./utils/customHooks/useLegacySelector.hook";
63-
import { Url } from "./utils/helpers/url";
6456
import { setupWebSocket } from "./websocket";
6557

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

76-
function CentralContentContainer(props) {
77-
const { coreApiVersionedUrlConfig, notifications, socket, user } = props;
68+
function CentralContentContainer({ user, socket }) {
69+
const { params, model, client, notifications } = useContext(AppContext);
7870

7971
const { data: userInfo } = useGetUserQuery(
80-
props.user.logged ? undefined : skipToken
72+
user.logged ? undefined : skipToken
8173
);
8274

83-
const appContext = {
84-
client: props.client,
85-
coreApiVersionedUrlConfig,
86-
location: props.location,
87-
model: props.model,
88-
notifications,
89-
params: props.params,
90-
webSocket: socket,
91-
};
75+
// check anonymous sessions settings
76+
const blockAnonymous = !user.logged && !params["ANONYMOUS_SESSIONS"];
9277

9378
return (
9479
<div className="d-flex flex-grow-1">
95-
<AppContext.Provider value={appContext}>
96-
<Helmet>
97-
<title>Reproducible Data Science | Open Research | Renku</title>
98-
</Helmet>
99-
<Switch>
100-
<CompatRoute exact path="/">
101-
{props.user.logged ? (
102-
<ContainerWrap>
103-
<LazyDashboard />
104-
</ContainerWrap>
105-
) : (
106-
<div className="w-100">
107-
<LazyAnonymousHome />
108-
</div>
109-
)}
110-
</CompatRoute>
111-
<CompatRoute path="/help">
112-
<ContainerWrap>
113-
<LazyHelp />
114-
</ContainerWrap>
115-
</CompatRoute>
116-
<CompatRoute path="/search">
117-
<ContainerWrap>
118-
<LazySearchPage />
119-
</ContainerWrap>
120-
</CompatRoute>
121-
<CompatRoute path="/inactive-kg-projects">
122-
{props.user.logged ? (
123-
<ContainerWrap>
124-
<LazyInactiveKGProjectsPage />
125-
</ContainerWrap>
126-
) : (
127-
<LazyNotFound />
128-
)}
129-
</CompatRoute>
130-
{["/projects", "/projects/starred", "/projects/all"].map((path) => (
131-
<CompatRoute key={path} exact path={path}>
132-
<ContainerWrap>
133-
<LazyProjectList />
134-
</ContainerWrap>
135-
</CompatRoute>
136-
))}
137-
<CompatRoute exact path="/projects/new">
138-
<ContainerWrap>
139-
<LazyNewProject />
80+
<Helmet>
81+
<title>Reproducible Data Science | Open Research | Renku</title>
82+
</Helmet>
83+
<Switch>
84+
<CompatRoute exact path="/">
85+
{user.logged ? (
86+
<ContainerWrap fullSize={true}>
87+
<LazyDashboardV2 />
14088
</ContainerWrap>
141-
</CompatRoute>
142-
<CompatRoute path="/projects">
143-
<LazyProjectView />
144-
</CompatRoute>
145-
<Route exact path={Url.get(Url.pages.sessions)}>
146-
{!user.logged ? <LazyAnonymousSessionsList /> : <Redirect to="/" />}
147-
</Route>
148-
<Route path="/datasets/:identifier/add">
149-
<LazyDatasetAddToProject
150-
insideProject={false}
151-
model={props.model}
152-
/>
153-
</Route>
154-
<CompatRoute path="/datasets/:identifier">
155-
<LazyShowDataset
156-
insideProject={false}
157-
client={props.client}
158-
projectsUrl="/projects"
159-
datasetCoordinator={
160-
new DatasetCoordinator(
161-
props.client,
162-
props.model.subModel("dataset")
163-
)
164-
}
165-
logged={props.user.logged}
166-
model={props.model}
167-
/>
168-
</CompatRoute>
169-
<CompatRoute path="/datasets">
170-
<Redirect to="/search?type=dataset" />
171-
</CompatRoute>
172-
<CompatRoute path="/notifications">
173-
<ContainerWrap>
174-
<LazyNotificationsPage />
175-
</ContainerWrap>
176-
</CompatRoute>
177-
<CompatRoute path="/v2">
178-
<LazyRootV2 />
179-
</CompatRoute>
180-
<CompatRoute path="/style-guide">
89+
) : (
90+
<div className="w-100">
91+
<LazyAnonymousHome />
92+
</div>
93+
)}
94+
</CompatRoute>
95+
{["/projects", "/projects/starred", "/projects/all"].map((path) => (
96+
<CompatRoute key={path} exact path={path}>
18197
<ContainerWrap>
182-
<LazyStyleGuide />
98+
<LazyProjectList />
18399
</ContainerWrap>
184100
</CompatRoute>
185-
{userInfo?.isLoggedIn && userInfo.is_admin && (
186-
<CompatRoute path="/admin">
187-
<ContainerWrap>
188-
<LazyAdminPage />
189-
</ContainerWrap>
190-
</CompatRoute>
191-
)}
192-
<CompatRoute path="/secrets">
101+
))}
102+
<CompatRoute exact path="/projects/new">
103+
<ContainerWrap>
104+
<LazyNewProject />
105+
</ContainerWrap>
106+
</CompatRoute>
107+
<Route path="/projects/:subUrl+">
108+
<LazyProjectView
109+
client={client}
110+
params={params}
111+
model={model}
112+
user={user}
113+
blockAnonymous={blockAnonymous}
114+
notifications={notifications}
115+
socket={socket}
116+
/>
117+
</Route>
118+
<Route path="/datasets/:identifier/add">
119+
<LazyDatasetAddToProject insideProject={false} model={model} />
120+
</Route>
121+
<CompatRoute path="/datasets/:identifier">
122+
<LazyShowDataset
123+
insideProject={false}
124+
client={client}
125+
projectsUrl="/projects"
126+
datasetCoordinator={
127+
new DatasetCoordinator(client, model.subModel("dataset"))
128+
}
129+
logged={user.logged}
130+
model={model}
131+
/>
132+
</CompatRoute>
133+
<CompatRoute path="/datasets">
134+
<Redirect to="/search?type=dataset" />
135+
</CompatRoute>
136+
<CompatRoute path="/v1">
137+
<LazyRootV1 user={user} />
138+
</CompatRoute>
139+
<CompatRoute path="/v2">
140+
<LazyRootV2 />
141+
</CompatRoute>
142+
{userInfo?.isLoggedIn && userInfo.is_admin && (
143+
<CompatRoute path="/admin">
193144
<ContainerWrap>
194-
<LazySecrets />
145+
<LazyAdminPage />
195146
</ContainerWrap>
196147
</CompatRoute>
197-
<Route path="/*">
198-
<LazyNotFound />
199-
</Route>
200-
</Switch>
201-
</AppContext.Provider>
148+
)}
149+
<Route path="/*">
150+
<LazyNotFound />
151+
</Route>
152+
</Switch>
202153
</div>
203154
);
204155
}
@@ -252,19 +203,25 @@ function App(props) {
252203
<Unavailable model={props.model} statuspageId={props.statuspageId} />
253204
);
254205
}
206+
const { coreApiVersionedUrlConfig, socket } = props;
207+
const appContext = {
208+
client: props.client,
209+
coreApiVersionedUrlConfig,
210+
location: props.location,
211+
model: props.model,
212+
notifications,
213+
params: props.params,
214+
webSocket: socket,
215+
};
255216

256217
return (
257218
<Fragment>
258219
<Favicon />
259-
<RenkuNavBar {...props} notifications={notifications} />
260-
<DashboardBanner user={props.user} />
261-
<CentralContentContainer
262-
notifications={notifications}
263-
socket={webSocket}
264-
location={location}
265-
{...props}
266-
/>
267-
<FooterNavbar params={props.params} />
220+
<AppContext.Provider value={appContext}>
221+
<RenkuNavBar user={user} />
222+
<CentralContentContainer user={user} socket={webSocket} />
223+
</AppContext.Provider>
224+
<FooterNavbar />
268225
<Cookie />
269226
<ToastContainer />
270227
</Fragment>

‎client/src/components/navbar/AnonymousNavBar.tsx

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@
1717
*/
1818

1919
import cx from "classnames";
20-
import { useCallback, useState } from "react";
20+
import { useCallback, useContext, useState } from "react";
2121
import { List, Search } from "react-bootstrap-icons";
2222
import { Link } from "react-router-dom";
2323
import { Collapse, Nav, NavItem, Navbar, NavbarToggler } from "reactstrap";
2424

2525
import StatusBanner from "../../features/platform/components/StatusBanner";
2626
import { NavBarWarnings } from "../../landing/NavBarWarnings";
27-
import type { AppParams } from "../../utils/context/appParams.types";
27+
import { ABSOLUTE_ROUTES } from "../../routing/routes.constants";
28+
import AppContext from "../../utils/context/appContext";
2829
import { Url } from "../../utils/helpers/url";
2930
import { RenkuNavLink } from "../RenkuNavLink";
3031
import {
@@ -34,18 +35,9 @@ import {
3435
} from "./NavBarItems";
3536
import { RENKU_LOGO } from "./navbar.constans";
3637

37-
interface AnonymousNavBarProps {
38-
model: unknown;
39-
notifications: unknown;
40-
params: AppParams;
41-
}
42-
43-
export default function AnonymousNavBar({
44-
model,
45-
notifications,
46-
params,
47-
}: AnonymousNavBarProps) {
48-
const uiShortSha = params.UI_SHORT_SHA;
38+
export default function AnonymousNavBar() {
39+
const { params, model, notifications } = useContext(AppContext);
40+
const uiShortSha = params?.UI_SHORT_SHA;
4941

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

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

5648
return (
5749
<>
58-
<header className="navbar navbar-expand-lg navbar-dark rk-navbar p-0">
50+
<header
51+
className={cx(
52+
"navbar",
53+
"navbar-expand-lg",
54+
"bg-navy",
55+
"rk-navbar",
56+
"p-0"
57+
)}
58+
>
5959
<Navbar
6060
color="primary"
61-
className="container-fluid flex-wrap flex-lg-nowrap renku-container"
61+
className={cx(
62+
"container",
63+
"flex-wrap",
64+
"flex-lg-nowrap",
65+
"renku-container"
66+
)}
6267
>
6368
<Link
6469
id="link-home"
@@ -83,7 +88,7 @@ export default function AnonymousNavBar({
8388
>
8489
<NavItem className="nav-item col-12 col-sm-4 col-lg-auto pe-lg-4">
8590
<RenkuNavLink
86-
to={Url.get(Url.pages.search)}
91+
to={ABSOLUTE_ROUTES.v1.search}
8792
title="Search"
8893
id="link-search"
8994
icon={<Search />}
@@ -92,7 +97,7 @@ export default function AnonymousNavBar({
9297
</NavItem>
9398
<NavItem className="nav-item col-12 col-sm-4 col-lg-auto pe-lg-4">
9499
<RenkuNavLink
95-
to={Url.get(Url.pages.sessions)}
100+
to={ABSOLUTE_ROUTES.v1.sessions}
96101
title="Sessions"
97102
id="link-sessions"
98103
/>

0 commit comments

Comments
 (0)