Merge branch '492-console-wide-account' of github.com:eth-cscs/firecrest-ui into 492-console-wide-account

Author: theely

app/components/switchers/GroupSwitcher.tsx

@@ -6,29 +6,64 @@
 *************************************************************************/
 
 import { useNavigate } from '@remix-run/react'
+import { createPortal } from 'react-dom'
+import React, { useEffect, useState } from 'react'
 
 // contexts
 import { useGroup } from '~/contexts/GroupContext'
 
-// TODO: improve the UI/UX of this switcher and implement the redirect upon switch
-const GroupSwitcher: React.FC<any> = () => {
-  const navigate = useNavigate()
+interface GroupSwitcherPortalProps {
+  systemName: string
+  basePath: '/compute' | '/filesystems'
+}
+
+export const GroupSwitcherPortal: React.FC<GroupSwitcherPortalProps> = ({
+  systemName,
+  basePath,
+}) => {
+  const [target, setTarget] = useState<HTMLElement | null>(null)
+  useEffect(() => {
+    const el = document.getElementById('app-header-slot')
+    setTarget(el)
+  }, [])
+  if (!target) return null
+  return createPortal(<GroupSwitcher systemName={systemName} basePath={basePath} />, target)
+}
 
-  const { groups, selectedGroup } = useGroup()
+interface GroupSwitcherProps {
+  systemName: string
+  basePath: '/compute' | '/filesystems'
+}
 
+export const GroupSwitcher: React.FC<GroupSwitcherProps> = ({
+  systemName,
+  basePath,
+}: GroupSwitcherProps) => {
+  const navigate = useNavigate()
+  const { groups, selectedGroup, setSelectedGroupId } = useGroup()
   const handleSwitch = (groupId: string) => {
-    navigate(`/tbd`)
+    setSelectedGroupId(groupId)
+    const group = groups.find((g) => g.id === groupId)
+    if (!group || !systemName) return
+    navigate(`${basePath}/systems/${systemName}/accounts/${group.name}`)
   }
-
   return (
-    <select value={selectedGroup?.id ?? ''} onChange={(e) => handleSwitch(e.target.value)}>
-      {groups.map((p) => (
-        <option key={p.id} value={p.id}>
-          {p.name}
-        </option>
-      ))}
-    </select>
+    <>
+      <div className='flex items-center gap-2'>
+        <span className='text-sm text-gray-600'>Account</span>
+        <select
+          value={selectedGroup?.id ?? ''}
+          onChange={(e) => handleSwitch(e.target.value)}
+          className='block rounded-md border-gray-300 bg-white py-1 pl-2 pr-6 text-sm shadow-sm cursor-pointer'
+        >
+          {groups.map((g) => (
+            <option key={g.id} value={g.id}>
+              {g.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className='h-6 w-px bg-gray-300 ml-8 mr-0'></div>
+    </>
   )
 }
-
-export default GroupSwitcher

app/layouts/Header.tsx

@@ -14,12 +14,14 @@ interface HeaderProps {
   setSidebarOpen: (open: boolean) => void
   authUser: any
   fixed?: boolean
+  hasRightSidebar?: boolean
 }
 
 const Header: React.FC<HeaderProps> = ({
   setSidebarOpen,
   authUser,
   fixed = false,
+  hasRightSidebar = false,
 }: HeaderProps) => {
   return (
     <div
@@ -35,11 +37,13 @@ const Header: React.FC<HeaderProps> = ({
       </button>
       <div className='flex-1 px-4 flex justify-between'>
         <div className='flex-1 flex'></div>
-        <div className='ml-4 flex items-center md:ml-6'>
+        <div className='ml-4 flex items-center gap-4 md:ml-6'>
+          {/* Slot to insert additional components */}
+          <div id='app-header-slot' className='flex items-center' />
           {/* Profile dropdown */}
-          <Menu as='div' className='ml-3 relative'>
+          <Menu as='div' className='relative'>
             <div>
-              <Menu.Button className='max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 lg:p-2 lg:rounded-md lg:hover:bg-gray-50'>
+              <Menu.Button className='max-w-xs bg-white rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 lg:py-2 lg:rounded-md lg:hover:bg-gray-50'>
                 <span className='hidden ml-3 text-gray-700 text-sm font-medium lg:block'>
                   <span className='sr-only'>Open user menu for </span>
                   <span>

app/routes/_app.compute.systems.$systemName.accounts.$accountName._index.tsx

@@ -16,7 +16,6 @@ import { useLoaderData, useRouteError } from '@remix-run/react'
 import type { LoaderFunction, LoaderFunctionArgs } from '@remix-run/node'
 // types
 import type { GetSystemJobsResponse } from '~/types/api-job'
-import type { System } from '~/types/api-status'
 // loggers
 import logger from '~/logger/logger'
 // helpers

app/routes/_app.compute.systems.$systemName.tsx

@@ -26,6 +26,8 @@ import { getUserInfo } from '~/apis/status-api'
 import ErrorView from '~/components/views/ErrorView'
 // contexts
 import { GroupProvider } from '~/contexts/GroupContext'
+// switchers
+import { GroupSwitcherPortal } from '~/components/switchers/GroupSwitcher'
 
 export const loader: LoaderFunction = async ({ request, params }: LoaderFunctionArgs) => {
   // Check authentication
@@ -50,6 +52,7 @@ export default function AppComputeIndexRoute() {
   const { groups, systemName }: any = useLoaderData()
   return (
     <GroupProvider groups={groups}>
+      <GroupSwitcherPortal systemName={systemName} basePath='/compute' />
       <Outlet />
     </GroupProvider>
   )

app/routes/_app.filesystems.systems.$systemName.tsx

@@ -0,0 +1,65 @@
+/*************************************************************************
+ Copyright (c) 2025, ETH Zurich. All rights reserved.
+
+  Please, refer to the LICENSE file in the root directory.
+  SPDX-License-Identifier: BSD-3-Clause
+*************************************************************************/
+
+/*************************************************************************
+ Copyright (c) 2025, ETH Zurich. All rights reserved.
+
+  Please, refer to the LICENSE file in the root directory.
+  SPDX-License-Identifier: BSD-3-Clause
+*************************************************************************/
+
+import { Outlet, useLoaderData, useRouteError } from '@remix-run/react'
+import type { LoaderFunction, LoaderFunctionArgs } from '@remix-run/node'
+// loggers
+import logger from '~/logger/logger'
+// helpers
+import { logInfoHttp } from '~/helpers/log-helper'
+// utils
+import { getAuthAccessToken, authenticator } from '~/utils/auth.server'
+// apis
+import { getUserInfo } from '~/apis/status-api'
+// views
+import ErrorView from '~/components/views/ErrorView'
+// contexts
+import { GroupProvider } from '~/contexts/GroupContext'
+// switchers
+import { GroupSwitcherPortal } from '~/components/switchers/GroupSwitcher'
+
+export const loader: LoaderFunction = async ({ request, params }: LoaderFunctionArgs) => {
+  // Check authentication
+  const auth = await authenticator.isAuthenticated(request, {
+    failureRedirect: '/login',
+  })
+  const systemName = params.systemName!
+  logInfoHttp({
+    message: `Filesystems system ${systemName} layout page`,
+    request: request,
+    extraInfo: { username: auth.user.username },
+  })
+  // Get auth access token
+  const accessToken = await getAuthAccessToken(request)
+  // Call api/s and fetch data
+  const { groups } = await getUserInfo(accessToken, systemName)
+  // Return response
+  return { groups, systemName }
+}
+
+export default function AppFilesystemsIndexRoute() {
+  const { groups, systemName }: any = useLoaderData()
+  return (
+    <GroupProvider groups={groups}>
+      <GroupSwitcherPortal systemName={systemName} basePath='/filesystems' />
+      <Outlet />
+    </GroupProvider>
+  )
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError()
+  logger.error(error)
+  return <ErrorView error={error} />
+}