Skip to content

Commit

Permalink
Improve the site header
Browse files Browse the repository at this point in the history
  • Loading branch information
@GooseNight
GooseNight committed Apr 18, 2024
1 parent a2df395 commit 52c4580
Show file tree
Hide file tree
Showing 5 changed files with 213 additions and 58 deletions.
33 changes: 28 additions & 5 deletions src/app/(rucio)/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
import "@/component-library/outputtailwind.css";
import "reflect-metadata";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Layout as LayoutStory } from '@/component-library/Pages/Layout/Layout';
import { useEffect, useState } from 'react';
import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
import { User } from '@/lib/core/entity/auth-models';


const queryClient = new QueryClient();
Expand All @@ -14,12 +16,33 @@ export default function RootLayout({
}: {
children: React.ReactNode
}) {

const [siteHeaderViewModel, setSiteHeaderViewModel] = useState<SiteHeaderViewModel>({
status: "error",
homeUrl: ""
})
const fetchAccounts = () => {
fetch(`${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/get-site-header`)
.then(res => {
if (res.ok) {
return res.json()
}
throw new Error(res.statusText)
})
.then(viewModel => {
setSiteHeaderViewModel(viewModel as SiteHeaderViewModel)
})
.catch(error => {
// do sth with error
})
}
useEffect(() => {
fetchAccounts()
}, [])
return (
<LayoutStory
LVM={{
accountActive: "test",
accountsPossible: ["test", "test2"],
accountActive: siteHeaderViewModel.activeAccount?.rucioAccount ?? "",
accountsPossible: siteHeaderViewModel.availableAccounts?.map((user: User) => { return user.rucioAccount}) ?? [],
rucioProjectLink: "rucio.cern.ch",
experimentProjectLink: "atlas.cern",
}}
Expand Down
4 changes: 2 additions & 2 deletions src/component-library/Pages/Layout/AccountDropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { twMerge } from "tailwind-merge"
import { ForwardedRef, forwardRef } from "react"
import { ForwardedRef, forwardRef, useState } from "react"
import { HiCog, HiSwitchHorizontal, HiLogout } from "react-icons/hi"
import Link from "next/link"

Expand Down Expand Up @@ -58,7 +58,7 @@ export const AccountDropdown = forwardRef(function AccountDropdown
"text-right"
)}
key={index}
href="/switchaccount"
href="/api/account/switch"
prefetch={false}
>
<HiSwitchHorizontal className="text-2xl dark:text-gray-100 shrink-0" />
Expand Down
163 changes: 138 additions & 25 deletions src/component-library/Pages/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,18 @@ export const Layout = (
const [isHamburgerOpen, setIsHamburgerOpen] = useState(false)
const [isProfileOpen, setIsProfileOpen] = useState(false)

const SearchDropdown = forwardRef(function SearchDropdown
(
props: {
/* Add contants with state for each section if it is clicked or not*/

const [isRulesDropDown, setIsRulesDropDown] = useState(false)
const [isMoreDropDown, setIsMoreDropDown] = useState(false)

const SearchDropdown = forwardRef(function SearchDropdown(
props: {
inputSelected: boolean,
searchstring: string,
},
ref: React.ForwardedRef<HTMLDivElement>
) {

const [isMouseOver, setIsMouseOver] = useState(false)
const LinkElem = (props: { href: string, children: React.ReactNode }) => {
return (
Expand Down Expand Up @@ -125,7 +128,6 @@ export const Layout = (
document.addEventListener("mousedown", handleClickOutside)
}, [searchMenuRef])


// images to be returned by static nextjs
return (
<div
Expand Down Expand Up @@ -162,7 +164,7 @@ export const Layout = (
</a>
<a className="bg-purple-500 w-12 h-12" href={props.LVM.experimentProjectLink} />
</span>
<span className="hidden md:visible md:flex space-x-4 items-center">
<span className="hidden md:visible md:flex space-x-12 items-center pl-2 pr-2">
<span className="relative">
<input
className={twMerge(
Expand All @@ -172,22 +174,52 @@ export const Layout = (
placeholder="Search"
onFocus={() => setIsSearching(true)}
// onBlur={() => setIsSearching(false)}
onChange={(e) => setSearchString(e.target.value)}
onChange={e => setSearchString(e.target.value)}
ref={searchMenuInputRef}
/>
<SearchDropdown inputSelected={isSearching} searchstring={searchString} ref={searchMenuRef} />
<SearchDropdown
inputSelected={isSearching}
searchstring={searchString}
ref={searchMenuRef}
/>
</span>
<HeaderLinks href="/rule/create" onFocus={() => setIsSearching(false)}>Create Rule</HeaderLinks>
<HeaderLinks href="/did/list">List DIDs</HeaderLinks>
<HeaderLinks href="/rule/list">List Rules</HeaderLinks>
</span>
<span className="flex space-x-2 items-end relative">
<a
className="hidden md:block text-gray-100"
href="/notifications"
<HeaderLinks
href="/did/list"
className="w-full pt-2 pb-2 text-gray-100 text-left"

>
<HiBell className="text-4xl" />
</a>
DIDs
</HeaderLinks>
<HeaderLinks
href="/rse/list"
className="w-full pt-2 pb-2 text-gray-100 text-center"
>
RSEs
</HeaderLinks>

<button
className="w-full pt-2 pb-2 text-gray-100 text-center"
onClick={() => {
setIsRulesDropDown(!isRulesDropDown)
if (isMoreDropDown)
{setIsMoreDropDown(!isMoreDropDown) }
}}
>
Rules
</button>
<button
className="w-full pt-2 pb-2 text-gray-100 text-center"
onClick={() => {
setIsMoreDropDown(!isMoreDropDown)
if(isRulesDropDown){
setIsRulesDropDown(!isRulesDropDown)}
}}
>
...
</button>
</span>

<span className="flex space-x-2 items-end relative pl-2 pr-2">
<button
className="text-gray-100 flex items-center"
onClick={() => setIsProfileOpen(!isProfileOpen)}
Expand All @@ -204,14 +236,95 @@ export const Layout = (
/>
</span>
</nav>

<Collapsible showIf={isRulesDropDown} className="bg-gray-800">
<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">
<HeaderLinks
href="/rule/create"
className="w-full pt-2 text-gray-100 text-center"
>
Create Rule
</HeaderLinks>
<HeaderLinks
href="/rule/list"
className="w-full pt-2 pb-2 text-gray-100 text-center"
>
List Rules
</HeaderLinks>
</nav>
</Collapsible>
<Collapsible showIf={isMoreDropDown} className="bg-gray-800 w-full">
<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">
<HeaderLinks
href="/subscription/list"
className="w-full pt-2 pb-2 text-gray-100 text-center"
>
Subscription
</HeaderLinks>
</nav>
</Collapsible>

<Collapsible showIf={isHamburgerOpen}>
<nav
className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 "
>
<HeaderLinks href="/rule/create" className="w-full pt-2">Create Rule</HeaderLinks>
<HeaderLinks href="/did/list" className="w-full pt-2">List DIDs</HeaderLinks>
<HeaderLinks href="/rule/list" className="w-full pt-2">List Rules</HeaderLinks>
<HeaderLinks href="/notifications" className="w-full pt-2"><span className="flex justify-between items-center">Notifications <HiBell /></span></HeaderLinks>
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 ">
<HeaderLinks
href="/did/list"
className="w-full pt-2 text-gray-100 text-left"
>
List DIDs
</HeaderLinks>
<HeaderLinks
href="/rse/list"
className="w-full pt-2 text-gray-100 text-left"
>
List RSEs
</HeaderLinks>

<button
className="w-full pt-2 text-gray-100 text-left"
onClick={() => {
setIsRulesDropDown(!isRulesDropDown)
if (isMoreDropDown)
{setIsMoreDropDown(!isMoreDropDown) }
}}
>
Rules
</button>
<Collapsible showIf={isRulesDropDown} className='w-full'>
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 ">
<HeaderLinks
href="/rule/create"
className="w-full pt-2 text-gray-100 text-left"
>
Create Rule
</HeaderLinks>
<HeaderLinks
href="/rule/list"
className="w-full pt-2 text-gray-100 text-left"
>
List Rules
</HeaderLinks>
</nav>
</Collapsible>
<button
className="w-full pt-1 pb-1 text-gray-100 text-left"
onClick={() => {
setIsMoreDropDown(!isMoreDropDown)
if(isRulesDropDown){
setIsRulesDropDown(!isRulesDropDown)}
}}
>
...
</button>
<Collapsible showIf={isMoreDropDown} className="w-full">
<nav className="w-full flex flex-col md:hidden items-start space-y-2 divide-y divide-gray-600 border-t border-gray-600 ">
<HeaderLinks
href="/subscription/list"
className="w-full pt-2 pb-2 text-gray-100 text-left"
>
Subscription
</HeaderLinks>
</nav>
</Collapsible>
</nav>
</Collapsible>
</header>
Expand Down
24 changes: 17 additions & 7 deletions src/component-library/Pages/Login/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,15 @@ export const Login = ({
} />
</Collapsible>
<div className="text-center dark:text-white">
<H1 className="mt-4 mb-2">Rucio Login</H1>
<H1 className="mt-4 mb-2">Rucio Login</H1>
</div>

<form
<div
className="flex flex-col space-y-2"
onSubmit={e => { e.preventDefault() }} // TODO handle proper submit!
onSubmit={ (e) => {
e.preventDefault()
}
} // TODO handle proper submit!
>
<Tabs
tabs={loginViewModel.voList.map((vo) => vo.name)}
Expand Down Expand Up @@ -171,7 +174,11 @@ export const Login = ({
setShowUserPassLoginForm(!showUserPassLoginForm)
}
} />

<form
onSubmit={(e) => {
e.preventDefault()
} }
>
<fieldset
className={twMerge(
"flex flex-col space-y-2",
Expand All @@ -183,6 +190,7 @@ export const Login = ({
>
<div
className={twMerge("flex flex-col space-y-1")}

>
<LabelledInput
label="Username"
Expand All @@ -198,12 +206,13 @@ export const Login = ({
<LabelledInput
label="Account"
idinput="account-input"
updateFunc={(data: string) => { setAccount(data) }}
updateFunc={(data: string) => { setAccount(data) }}
/>
</div>
<Button
label="Login"
type="submit"
role="button"
onClick={async () => {
await handleUserPassSubmit(
username,
Expand All @@ -212,8 +221,9 @@ export const Login = ({
account
)
}}
/>
/>
</fieldset>
</form>
<fieldset
className={twMerge(
"mx-2 md:mx-10",
Expand All @@ -229,7 +239,7 @@ export const Login = ({
/>
</fieldset>
</div>
</form >
</div >
</div >
)
}
Loading

0 comments on commit 52c4580

Please sign in to comment.