Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the site header #409

Merged
merged 1 commit into from
Apr 23, 2024
Merged

Improve the site header #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 9 additions & 21 deletions src/app/(rucio)/layout.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
Open in desktop
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
View file
Open in desktop
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
Loading