Skip to content

Commit c245081

Browse files
GooseNightmaany
GooseNight
authored and
maany
committed
Improve the site header
1 parent d16e90b commit c245081

File tree

6 files changed

+237
-74
lines changed

6 files changed

+237
-74
lines changed

‎src/app/(rucio)/layout.tsx

+9-21
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,20 @@
1-
'use client';
1+
'use client'
22
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
3-
import "@/component-library/outputtailwind.css";
4-
import "reflect-metadata";
5-
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
6-
import { Layout as LayoutStory } from '@/component-library/Pages/Layout/Layout';
7-
8-
9-
const queryClient = new QueryClient();
3+
import '@/component-library/outputtailwind.css'
4+
import 'reflect-metadata'
5+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
6+
import { RucioAppLayout } from './rucio-app-layout'
107

118

129
export default function RootLayout({
1310
children,
1411
}: {
1512
children: React.ReactNode
1613
}) {
17-
1814
return (
19-
<LayoutStory
20-
LVM={{
21-
accountActive: "test",
22-
accountsPossible: ["test", "test2"],
23-
rucioProjectLink: "rucio.cern.ch",
24-
experimentProjectLink: "atlas.cern",
25-
}}
26-
>
27-
<QueryClientProvider client={queryClient}>
28-
{children}
29-
</QueryClientProvider>
30-
</LayoutStory>
15+
<QueryClientProvider client={new QueryClient()}>
16+
<RucioAppLayout>{children}</RucioAppLayout>
17+
<ReactQueryDevtools initialIsOpen={false} />
18+
</QueryClientProvider>
3119
)
3220
}

‎src/app/(rucio)/rucio-app-layout.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { useState } from "react"
2+
import { Layout } from '@/component-library/Pages/Layout/Layout';
3+
import { useQuery } from "@tanstack/react-query";
4+
import { SiteHeaderViewModel } from "@/lib/infrastructure/data/view-model/site-header";
5+
import { User } from "@/lib/core/entity/auth-models";
6+
7+
export interface QueryContextLayoutProps {
8+
children: React.ReactNode;
9+
10+
}
11+
export const RucioAppLayout = (props: QueryContextLayoutProps) => {
12+
const [siteHeaderViewModel, setSiteHeaderViewModel] = useState<SiteHeaderViewModel>({
13+
status: "error",
14+
homeUrl: ""
15+
})
16+
const fetchAccounts = async () => {
17+
await fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-site-header`)
18+
.then(res => {
19+
if (res.ok) {
20+
return res.json()
21+
}
22+
throw new Error(res.statusText)
23+
})
24+
.then(viewModel => {
25+
setSiteHeaderViewModel(viewModel as SiteHeaderViewModel)
26+
})
27+
.catch(error => {
28+
// do sth with error
29+
console.error("Error fetching data:", error);
30+
})
31+
}
32+
33+
const fetchAccountKey = ['fetchAccounts']
34+
useQuery(fetchAccountKey,fetchAccounts)
35+
return (
36+
<Layout
37+
LVM={{
38+
accountActive: siteHeaderViewModel.activeAccount?.rucioAccount ?? "",
39+
accountsPossible: siteHeaderViewModel.availableAccounts?.map((user: User) => { return user.rucioAccount}) ?? [],
40+
rucioProjectLink: "rucio.cern.ch",
41+
experimentProjectLink: "atlas.cern",
42+
}}
43+
>
44+
{props.children}
45+
</Layout>
46+
)
47+
}

‎src/component-library/Pages/Layout/AccountDropdown.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { twMerge } from "tailwind-merge"
2-
import { ForwardedRef, forwardRef } from "react"
2+
import { ForwardedRef, forwardRef, useState } from "react"
33
import { HiCog, HiSwitchHorizontal, HiLogout } from "react-icons/hi"
44
import Link from "next/link"
55

@@ -58,7 +58,7 @@ export const AccountDropdown = forwardRef(function AccountDropdown
5858
"text-right"
5959
)}
6060
key={index}
61-
href="/switchaccount"
61+
href="/api/account/switch"
6262
prefetch={false}
6363
>
6464
<HiSwitchHorizontal className="text-2xl dark:text-gray-100 shrink-0" />

‎src/component-library/Pages/Layout/Layout.tsx

+138-25
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,18 @@ export const Layout = (
2828
const [isHamburgerOpen, setIsHamburgerOpen] = useState(false)
2929
const [isProfileOpen, setIsProfileOpen] = useState(false)
3030

31-
const SearchDropdown = forwardRef(function SearchDropdown
32-
(
33-
props: {
31+
/* Add contants with state for each section if it is clicked or not*/
32+
33+
const [isRulesDropDown, setIsRulesDropDown] = useState(false)
34+
const [isMoreDropDown, setIsMoreDropDown] = useState(false)
35+
36+
const SearchDropdown = forwardRef(function SearchDropdown(
37+
props: {
3438
inputSelected: boolean,
3539
searchstring: string,
3640
},
3741
ref: React.ForwardedRef<HTMLDivElement>
3842
) {
39-
4043
const [isMouseOver, setIsMouseOver] = useState(false)
4144
const LinkElem = (props: { href: string, children: React.ReactNode }) => {
4245
return (
@@ -125,7 +128,6 @@ export const Layout = (
125128
document.addEventListener("mousedown", handleClickOutside)
126129
}, [searchMenuRef])
127130

128-
129131
// images to be returned by static nextjs
130132
return (
131133
<div
@@ -162,7 +164,7 @@ export const Layout = (
162164
</a>
163165
<a className="bg-purple-500 w-12 h-12" href={props.LVM.experimentProjectLink} />
164166
</span>
165-
<span className="hidden md:visible md:flex space-x-4 items-center">
167+
<span className="hidden md:visible md:flex space-x-12 items-center pl-2 pr-2">
166168
<span className="relative">
167169
<input
168170
className={twMerge(
@@ -172,22 +174,52 @@ export const Layout = (
172174
placeholder="Search"
173175
onFocus={() => setIsSearching(true)}
174176
// onBlur={() => setIsSearching(false)}
175-
onChange={(e) => setSearchString(e.target.value)}
177+
onChange={e => setSearchString(e.target.value)}
176178
ref={searchMenuInputRef}
177179
/>
178-
<SearchDropdown inputSelected={isSearching} searchstring={searchString} ref={searchMenuRef} />
180+
<SearchDropdown
181+
inputSelected={isSearching}
182+
searchstring={searchString}
183+
ref={searchMenuRef}
184+
/>
179185
</span>
180-
<HeaderLinks href="/rule/create" onFocus={() => setIsSearching(false)}>Create Rule</HeaderLinks>
181-
<HeaderLinks href="/did/list">List DIDs</HeaderLinks>
182-
<HeaderLinks href="/rule/list">List Rules</HeaderLinks>
183-
</span>
184-
<span className="flex space-x-2 items-end relative">
185-
<a
186-
className="hidden md:block text-gray-100"
187-
href="/notifications"
186+
<HeaderLinks
187+
href="/did/list"
188+
className="w-full pt-2 pb-2 text-gray-100 text-left"
189+
188190
>
189-
<HiBell className="text-4xl" />
190-
</a>
191+
DIDs
192+
</HeaderLinks>
193+
<HeaderLinks
194+
href="/rse/list"
195+
className="w-full pt-2 pb-2 text-gray-100 text-center"
196+
>
197+
RSEs
198+
</HeaderLinks>
199+
200+
<button
201+
className="w-full pt-2 pb-2 text-gray-100 text-center"
202+
onClick={() => {
203+
setIsRulesDropDown(!isRulesDropDown)
204+
if (isMoreDropDown)
205+
{setIsMoreDropDown(!isMoreDropDown) }
206+
}}
207+
>
208+
Rules
209+
</button>
210+
<button
211+
className="w-full pt-2 pb-2 text-gray-100 text-center"
212+
onClick={() => {
213+
setIsMoreDropDown(!isMoreDropDown)
214+
if(isRulesDropDown){
215+
setIsRulesDropDown(!isRulesDropDown)}
216+
}}
217+
>
218+
...
219+
</button>
220+
</span>
221+
222+
<span className="flex space-x-2 items-end relative pl-2 pr-2">
191223
<button
192224
className="text-gray-100 flex items-center"
193225
onClick={() => setIsProfileOpen(!isProfileOpen)}
@@ -204,14 +236,95 @@ export const Layout = (
204236
/>
205237
</span>
206238
</nav>
239+
240+
<Collapsible showIf={isRulesDropDown} className="bg-gray-800">
241+
<nav className="w-full md:flex flex-col md:visible hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600">
242+
<HeaderLinks
243+
href="/rule/create"
244+
className="w-full pt-2 text-gray-100 text-center"
245+
>
246+
Create Rule
247+
</HeaderLinks>
248+
<HeaderLinks
249+
href="/rule/list"
250+
className="w-full pt-2 pb-2 text-gray-100 text-center"
251+
>
252+
List Rules
253+
</HeaderLinks>
254+
</nav>
255+
</Collapsible>
256+
<Collapsible showIf={isMoreDropDown} className="bg-gray-800 w-full">
257+
<nav className="w-full md:flex flex-col md:visible hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600">
258+
<HeaderLinks
259+
href="/subscription/list"
260+
className="w-full pt-2 pb-2 text-gray-100 text-center"
261+
>
262+
Subscription
263+
</HeaderLinks>
264+
</nav>
265+
</Collapsible>
266+
207267
<Collapsible showIf={isHamburgerOpen}>
208-
<nav
209-
className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 "
210-
>
211-
<HeaderLinks href="/rule/create" className="w-full pt-2">Create Rule</HeaderLinks>
212-
<HeaderLinks href="/did/list" className="w-full pt-2">List DIDs</HeaderLinks>
213-
<HeaderLinks href="/rule/list" className="w-full pt-2">List Rules</HeaderLinks>
214-
<HeaderLinks href="/notifications" className="w-full pt-2"><span className="flex justify-between items-center">Notifications <HiBell /></span></HeaderLinks>
268+
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 ">
269+
<HeaderLinks
270+
href="/did/list"
271+
className="w-full pt-2 text-gray-100 text-left"
272+
>
273+
List DIDs
274+
</HeaderLinks>
275+
<HeaderLinks
276+
href="/rse/list"
277+
className="w-full pt-2 text-gray-100 text-left"
278+
>
279+
List RSEs
280+
</HeaderLinks>
281+
282+
<button
283+
className="w-full pt-2 text-gray-100 text-left"
284+
onClick={() => {
285+
setIsRulesDropDown(!isRulesDropDown)
286+
if (isMoreDropDown)
287+
{setIsMoreDropDown(!isMoreDropDown) }
288+
}}
289+
>
290+
Rules
291+
</button>
292+
<Collapsible showIf={isRulesDropDown} className='w-full'>
293+
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 ">
294+
<HeaderLinks
295+
href="/rule/create"
296+
className="w-full pt-2 text-gray-100 text-left"
297+
>
298+
Create Rule
299+
</HeaderLinks>
300+
<HeaderLinks
301+
href="/rule/list"
302+
className="w-full pt-2 text-gray-100 text-left"
303+
>
304+
List Rules
305+
</HeaderLinks>
306+
</nav>
307+
</Collapsible>
308+
<button
309+
className="w-full pt-1 pb-1 text-gray-100 text-left"
310+
onClick={() => {
311+
setIsMoreDropDown(!isMoreDropDown)
312+
if(isRulesDropDown){
313+
setIsRulesDropDown(!isRulesDropDown)}
314+
}}
315+
>
316+
...
317+
</button>
318+
<Collapsible showIf={isMoreDropDown} className="w-full">
319+
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 ">
320+
<HeaderLinks
321+
href="/subscription/list"
322+
className="w-full pt-2 pb-2 text-gray-100 text-left"
323+
>
324+
Subscription
325+
</HeaderLinks>
326+
</nav>
327+
</Collapsible>
215328
</nav>
216329
</Collapsible>
217330
</header>

‎src/component-library/Pages/Login/Login.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -116,12 +116,15 @@ export const Login = ({
116116
} />
117117
</Collapsible>
118118
<div className="text-center dark:text-white">
119-
<H1 className="mt-4 mb-2">Rucio Login</H1>
119+
<H1 className="mt-4 mb-2">Rucio Login</H1>
120120
</div>
121121

122-
<form
122+
<div
123123
className="flex flex-col space-y-2"
124-
onSubmit={e => { e.preventDefault() }} // TODO handle proper submit!
124+
onSubmit={ (e) => {
125+
e.preventDefault()
126+
}
127+
} // TODO handle proper submit!
125128
>
126129
<Tabs
127130
tabs={loginViewModel.voList.map((vo) => vo.name)}
@@ -171,7 +174,7 @@ export const Login = ({
171174
setShowUserPassLoginForm(!showUserPassLoginForm)
172175
}
173176
} />
174-
177+
<form>
175178
<fieldset
176179
className={twMerge(
177180
"flex flex-col space-y-2",
@@ -183,6 +186,7 @@ export const Login = ({
183186
>
184187
<div
185188
className={twMerge("flex flex-col space-y-1")}
189+
186190
>
187191
<LabelledInput
188192
label="Username"
@@ -198,12 +202,13 @@ export const Login = ({
198202
<LabelledInput
199203
label="Account"
200204
idinput="account-input"
201-
updateFunc={(data: string) => { setAccount(data) }}
205+
updateFunc={(data: string) => { setAccount(data) }}
202206
/>
203207
</div>
204208
<Button
205209
label="Login"
206210
type="submit"
211+
role="button"
207212
onClick={async () => {
208213
await handleUserPassSubmit(
209214
username,
@@ -212,8 +217,9 @@ export const Login = ({
212217
account
213218
)
214219
}}
215-
/>
220+
/>
216221
</fieldset>
222+
</form>
217223
<fieldset
218224
className={twMerge(
219225
"mx-2 md:mx-10",
@@ -229,7 +235,7 @@ export const Login = ({
229235
/>
230236
</fieldset>
231237
</div>
232-
</form >
238+
</div >
233239
</div >
234240
)
235241
}

0 commit comments

Comments
 (0)