Skip to content

Commit

Permalink
Improve the site header
Browse files Browse the repository at this point in the history
  • Loading branch information
GooseNight authored and maany committed Apr 23, 2024
1 parent d16e90b commit c245081
Show file tree
Hide file tree
Showing 6 changed files with 237 additions and 74 deletions.
30 changes: 9 additions & 21 deletions src/app/(rucio)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,20 @@
'use client';
'use client'
import { QueryClient, QueryClientProvider } 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';


const queryClient = new QueryClient();
import '@/component-library/outputtailwind.css'
import 'reflect-metadata'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { RucioAppLayout } from './rucio-app-layout'


export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {

return (
<LayoutStory
LVM={{
accountActive: "test",
accountsPossible: ["test", "test2"],
rucioProjectLink: "rucio.cern.ch",
experimentProjectLink: "atlas.cern",
}}
>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</LayoutStory>
<QueryClientProvider client={new QueryClient()}>
<RucioAppLayout>{children}</RucioAppLayout>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
47 changes: 47 additions & 0 deletions src/app/(rucio)/rucio-app-layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, { useState } from "react"
import { Layout } from '@/component-library/Pages/Layout/Layout';
import { useQuery } from "@tanstack/react-query";
import { SiteHeaderViewModel } from "@/lib/infrastructure/data/view-model/site-header";
import { User } from "@/lib/core/entity/auth-models";

export interface QueryContextLayoutProps {
children: React.ReactNode;

}
export const RucioAppLayout = (props: QueryContextLayoutProps) => {
const [siteHeaderViewModel, setSiteHeaderViewModel] = useState<SiteHeaderViewModel>({
status: "error",
homeUrl: ""
})
const fetchAccounts = async () => {
await 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
console.error("Error fetching data:", error);
})
}

const fetchAccountKey = ['fetchAccounts']
useQuery(fetchAccountKey,fetchAccounts)
return (
<Layout
LVM={{
accountActive: siteHeaderViewModel.activeAccount?.rucioAccount ?? "",
accountsPossible: siteHeaderViewModel.availableAccounts?.map((user: User) => { return user.rucioAccount}) ?? [],
rucioProjectLink: "rucio.cern.ch",
experimentProjectLink: "atlas.cern",
}}
>
{props.children}
</Layout>
)
}
4 changes: 2 additions & 2 deletions src/component-library/Pages/Layout/AccountDropdown.tsx
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
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
20 changes: 13 additions & 7 deletions src/component-library/Pages/Login/Login.tsx
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,7 @@ export const Login = ({
setShowUserPassLoginForm(!showUserPassLoginForm)
}
} />

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

>
<LabelledInput
label="Username"
Expand All @@ -198,12 +202,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 +217,9 @@ export const Login = ({
account
)
}}
/>
/>
</fieldset>
</form>
<fieldset
className={twMerge(
"mx-2 md:mx-10",
Expand All @@ -229,7 +235,7 @@ export const Login = ({
/>
</fieldset>
</div>
</form >
</div >
</div >
)
}
Loading

0 comments on commit c245081

Please sign in to comment.