diff --git a/src/app/(rucio)/layout.tsx b/src/app/(rucio)/layout.tsx index 19c32647b..26c67c33c 100644 --- a/src/app/(rucio)/layout.tsx +++ b/src/app/(rucio)/layout.tsx @@ -1,12 +1,9 @@ -'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({ @@ -14,19 +11,10 @@ export default function RootLayout({ }: { children: React.ReactNode }) { - return ( - - - {children} - - + + {children} + + ) } diff --git a/src/app/(rucio)/rucio-app-layout.tsx b/src/app/(rucio)/rucio-app-layout.tsx new file mode 100644 index 000000000..89fee66ca --- /dev/null +++ b/src/app/(rucio)/rucio-app-layout.tsx @@ -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({ + 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 ( + { return user.rucioAccount}) ?? [], + rucioProjectLink: "rucio.cern.ch", + experimentProjectLink: "atlas.cern", + }} + > + {props.children} + + ) +} diff --git a/src/component-library/Pages/Layout/AccountDropdown.tsx b/src/component-library/Pages/Layout/AccountDropdown.tsx index 36f4e4714..4f764df10 100644 --- a/src/component-library/Pages/Layout/AccountDropdown.tsx +++ b/src/component-library/Pages/Layout/AccountDropdown.tsx @@ -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" @@ -58,7 +58,7 @@ export const AccountDropdown = forwardRef(function AccountDropdown "text-right" )} key={index} - href="/switchaccount" + href="/api/account/switch" prefetch={false} > diff --git a/src/component-library/Pages/Layout/Layout.tsx b/src/component-library/Pages/Layout/Layout.tsx index f46f796b3..82d5040e7 100644 --- a/src/component-library/Pages/Layout/Layout.tsx +++ b/src/component-library/Pages/Layout/Layout.tsx @@ -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 ) { - const [isMouseOver, setIsMouseOver] = useState(false) const LinkElem = (props: { href: string, children: React.ReactNode }) => { return ( @@ -125,7 +128,6 @@ export const Layout = ( document.addEventListener("mousedown", handleClickOutside) }, [searchMenuRef]) - // images to be returned by static nextjs return (
- + setIsSearching(true)} // onBlur={() => setIsSearching(false)} - onChange={(e) => setSearchString(e.target.value)} + onChange={e => setSearchString(e.target.value)} ref={searchMenuInputRef} /> - + - setIsSearching(false)}>Create Rule - List DIDs - List Rules - - - - - + DIDs + + + RSEs + + + + + + + + + + + + + + diff --git a/src/component-library/Pages/Login/Login.tsx b/src/component-library/Pages/Login/Login.tsx index 01fbc9082..e650d4c67 100644 --- a/src/component-library/Pages/Login/Login.tsx +++ b/src/component-library/Pages/Login/Login.tsx @@ -116,12 +116,15 @@ export const Login = ({ } />
-

Rucio Login

+

Rucio Login

-
{ e.preventDefault() }} // TODO handle proper submit! + onSubmit={ (e) => { + e.preventDefault() + } + } // TODO handle proper submit! > vo.name)} @@ -171,7 +174,7 @@ export const Login = ({ setShowUserPassLoginForm(!showUserPassLoginForm) } } /> - +
{ setAccount(data) }} + updateFunc={(data: string) => { setAccount(data) }} />
+
- + ) } diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css index c4faf4c0f..8ae2fdcf6 100644 --- a/src/component-library/outputtailwind.css +++ b/src/component-library/outputtailwind.css @@ -1119,6 +1119,12 @@ html { margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); } +.space-x-12 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(3rem * var(--tw-space-x-reverse)); + margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -1725,6 +1731,10 @@ html { padding-top: 0.5rem; } +.pb-1 { + padding-bottom: 0.25rem; +} + .text-left { text-align: left; } @@ -2206,6 +2216,11 @@ html { color: rgb(37 99 235 / var(--tw-text-opacity)); } +.hover\:text-blue-700:hover { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity)); +} + .hover\:text-gray-400:hover { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -2221,11 +2236,6 @@ html { color: rgb(185 28 28 / var(--tw-text-opacity)); } -.hover\:text-blue-700:hover { - --tw-text-opacity: 1; - color: rgb(29 78 216 / var(--tw-text-opacity)); -} - .hover\:underline:hover { text-decoration-line: underline; } @@ -2560,6 +2570,11 @@ html { color: rgb(147 197 253 / var(--tw-text-opacity)); } + .dark\:text-blue-400 { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity)); + } + .dark\:text-emerald-300 { --tw-text-opacity: 1; color: rgb(110 231 183 / var(--tw-text-opacity)); @@ -2630,16 +2645,6 @@ html { color: rgb(255 255 255 / var(--tw-text-opacity)); } - .dark\:text-red-200 { - --tw-text-opacity: 1; - color: rgb(254 202 202 / var(--tw-text-opacity)); - } - - .dark\:text-blue-400 { - --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); - } - .dark\:ring-gray-900 { --tw-ring-opacity: 1; --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity)); @@ -2725,14 +2730,14 @@ html { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); } - .dark\:hover\:text-blue-400:hover { + .dark\:hover\:text-blue-300:hover { --tw-text-opacity: 1; - color: rgb(96 165 250 / var(--tw-text-opacity)); + color: rgb(147 197 253 / var(--tw-text-opacity)); } - .dark\:hover\:text-blue-300:hover { + .dark\:hover\:text-blue-400:hover { --tw-text-opacity: 1; - color: rgb(147 197 253 / var(--tw-text-opacity)); + color: rgb(96 165 250 / var(--tw-text-opacity)); } .dark\:focus\:ring-blue-800:focus { @@ -3057,6 +3062,10 @@ html { width: 12rem; } + .lg\:w-80 { + width: 20rem; + } + .lg\:w-96 { width: 24rem; }