rucio · maany · Nov 12, 2024 · Oct 9, 2024 · Oct 9, 2024
diff --git a/src/app/(rucio)/dashboard/page.tsx b/src/app/(rucio)/dashboard/page.tsx
@@ -1,5 +1,9 @@
-'use client';
 import { Dashboard } from '@/component-library/pages/Dashboard/Dashboard';
+
 export default function Page() {
     return <Dashboard />;
 }
+
+export const metadata = {
+    title: 'Dashboard - Rucio',
+};
diff --git a/src/app/(rucio)/did/list/page.tsx b/src/app/(rucio)/did/list/page.tsx
@@ -1,14 +1,16 @@
-'use client';
-
 import { ListDID } from '@/component-library/pages/DID/list/ListDID';
-import { didMetaQueryBase } from '../queries';
-import { useSearchParams } from 'next/navigation';
 
-export default function Page() {
-    const searchParams = useSearchParams();
-    const firstPattern = searchParams?.get('pattern');
+export default function Page({ searchParams }: { searchParams?: { [key: string]: string | string[] | undefined } }) {
+    let firstPattern: string | undefined = undefined;
+    const searchPattern = searchParams?.['pattern'];
 
+    if (typeof searchPattern === 'string') {
+        firstPattern = searchPattern;
+    }
     // TODO: fetch initial data
-
     return <ListDID firstPattern={firstPattern ?? undefined} />;
 }
+
+export const metadata = {
+    title: 'DIDs List - Rucio',
+};
diff --git a/src/app/(rucio)/rse/list/page.tsx b/src/app/(rucio)/rse/list/page.tsx
@@ -1,12 +1,17 @@
-'use client';
-
 import { ListRSE } from '@/component-library/pages/RSE/list/ListRSE';
-import { useSearchParams } from 'next/navigation';
-export default function Page() {
-    const searchParams = useSearchParams();
-    const firstExpression = searchParams?.get('expression');
 
+export default function Page({ searchParams }: { searchParams?: { [key: string]: string | string[] | undefined } }) {
+    let firstExpression: string | undefined = undefined;
+    const searchExpression = searchParams?.['expression'];
+
+    if (typeof searchExpression === 'string') {
+        firstExpression = searchExpression;
+    }
     // TODO: fetch initial data
 
     return <ListRSE initialExpression={firstExpression ?? undefined} />;
 }
+
+export const metadata = {
+    title: 'RSEs List - Rucio',
+};
diff --git a/src/app/(rucio)/rule/create/page.tsx b/src/app/(rucio)/rule/create/page.tsx
@@ -1,12 +1,16 @@
 'use client';
 import { CreateRule } from '@/component-library/pages/Rule/create/CreateRule';
-import { parameters } from '../../../../../.storybook/preview';
 import { CreateRuleParameters } from '@/lib/infrastructure/data/view-model/rule';
+import { useEffect } from 'react';
 
 const PARAMS_KEY = 'create_rule_parameters';
 const ACTIVE_KEY = 'create_rule_active';
 
 export default function Page() {
+    useEffect(() => {
+        document.title = 'Create Rule - Rucio';
+    }, []);
+
     const getSavedParameters = () => {
         const initialParametersString = localStorage.getItem(PARAMS_KEY);
         // TODO: check with zod

diff --git a/src/app/(rucio)/rule/list/page.tsx b/src/app/(rucio)/rule/list/page.tsx
@@ -1,7 +1,9 @@
-'use client';
-
 import { ListRule } from '@/component-library/pages/Rule/list/ListRule';
 
 export default function Page() {
     return <ListRule />;
 }
+
+export const metadata = {
+    title: 'Rules List - Rucio',
+};
diff --git a/src/app/auth/login/page.tsx b/src/app/auth/login/page.tsx
@@ -7,6 +7,10 @@ import { Login as LoginStory } from '@/component-library/pages/legacy/Login/Logi
 import { AuthType, Role, VO } from '@/lib/core/entity/auth-models';
 
 export default function Login() {
+    useEffect(() => {
+        document.title = 'Login - Rucio';
+    }, []);
+
     const [redirectURL, setRedirectURL] = useState<string>('/dashboard' as string);
     const [viewModel, setViewModel] = useState<LoginViewModel>();
     const [authViewModel, setAuthViewModel] = useState<AuthViewModel>();

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -9,7 +9,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <head /> will contain the components returned by the nearest parent
         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
       */}
-            <head />
+            <head>
+                <link rel="icon" href="/logo192.png" sizes="any" />
+            </head>
             <body>{children}</body>
         </html>
     );

diff --git a/src/component-library/pages/DID/list/ListDID.tsx b/src/component-library/pages/DID/list/ListDID.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { DIDMetaViewModel, DIDViewModel } from '@/lib/infrastructure/data/view-model/did';
 import React, { useEffect, useState } from 'react';
 import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';

diff --git a/src/component-library/pages/Dashboard/Dashboard.tsx b/src/component-library/pages/Dashboard/Dashboard.tsx
@@ -1,16 +1,18 @@
-import {useQuery} from '@tanstack/react-query';
-import {SiteHeaderViewModel} from '@/lib/infrastructure/data/view-model/site-header';
-import {getSiteHeader} from '@/app/(rucio)/queries';
-import {LoadingSpinner} from '@/component-library/atoms/loading/LoadingSpinner';
-import {Heading} from '@/component-library/atoms/misc/Heading';
-import {WarningField} from '@/component-library/features/fields/WarningField';
-import {AccountRoleBadge} from '@/component-library/features/badges/account/AccountRoleBadge';
-import {TopRulesWidget} from '@/component-library/pages/Dashboard/widgets/TopRulesWidget';
-import {useEffect, useRef, useState} from 'react';
-import {RuleViewModel} from '@/lib/infrastructure/data/view-model/rule';
-import useStreamReader, {StreamingStatus} from '@/lib/infrastructure/hooks/useStreamReader';
-import {RSEAccountUsageViewModel} from '@/lib/infrastructure/data/view-model/rse';
-import {TopStorageUsageWidget} from '@/component-library/pages/Dashboard/widgets/TopStorageUsageWidget';
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { SiteHeaderViewModel } from '@/lib/infrastructure/data/view-model/site-header';
+import { getSiteHeader } from '@/app/(rucio)/queries';
+import { LoadingSpinner } from '@/component-library/atoms/loading/LoadingSpinner';
+import { Heading } from '@/component-library/atoms/misc/Heading';
+import { WarningField } from '@/component-library/features/fields/WarningField';
+import { AccountRoleBadge } from '@/component-library/features/badges/account/AccountRoleBadge';
+import { TopRulesWidget } from '@/component-library/pages/Dashboard/widgets/TopRulesWidget';
+import { useEffect, useRef, useState } from 'react';
+import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
+import useStreamReader, { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
+import { RSEAccountUsageViewModel } from '@/lib/infrastructure/data/view-model/rse';
+import { TopStorageUsageWidget } from '@/component-library/pages/Dashboard/widgets/TopStorageUsageWidget';
 
 const AccountHeading = () => {
     const querySiteHeader = async () => {
@@ -34,7 +36,7 @@ const AccountHeading = () => {
         retry: false,
     });
 
-    if (isHeaderFetching) return <LoadingSpinner/>;
+    if (isHeaderFetching) return <LoadingSpinner />;
 
     if (headerError || !header?.activeAccount) {
         return (
@@ -46,16 +48,16 @@ const AccountHeading = () => {
 
     return (
         <div className="flex space-x-2 items-center">
-            <Heading text={`Hello, ${header.activeAccount.rucioAccount}!`}/>
-            <AccountRoleBadge className="text-xl" value={header.activeAccount.role}/>
+            <Heading text={`Hello, ${header.activeAccount.rucioAccount}!`} />
+            <AccountRoleBadge className="text-xl" value={header.activeAccount.role} />
         </div>
     );
 };
 
 const UsageView = () => {
     const usageBuffer = useRef<RSEAccountUsageViewModel[] | undefined>([]);
     const [usages, setUsages] = useState<RSEAccountUsageViewModel[]>();
-    const {start, stop, error, status} = useStreamReader<RSEAccountUsageViewModel>();
+    const { start, stop, error, status } = useStreamReader<RSEAccountUsageViewModel>();
 
     useEffect(() => {
         // TODO: handle error view models
@@ -80,13 +82,13 @@ const UsageView = () => {
 
     const isLoading = (!usages && !error) || status === StreamingStatus.RUNNING;
 
-    return <TopStorageUsageWidget usages={usages} isLoading={isLoading} errorMessage={error?.message}/>;
+    return <TopStorageUsageWidget usages={usages} isLoading={isLoading} errorMessage={error?.message} />;
 };
 
 const RulesView = () => {
     const rulesBuffer = useRef<RuleViewModel[] | undefined>([]);
     const [rules, setRules] = useState<RuleViewModel[]>();
-    const {start, stop, error, status} = useStreamReader<RuleViewModel>();
+    const { start, stop, error, status } = useStreamReader<RuleViewModel>();
 
     const getCreatedAfterDate = () => {
         // Only the rules that were created less than 15 days ago should get loaded
@@ -122,17 +124,17 @@ const RulesView = () => {
 
     const isLoading = (!rules && !error) || status === StreamingStatus.RUNNING;
 
-    return <TopRulesWidget rules={rules} isLoading={isLoading} errorMessage={error?.message}/>;
+    return <TopRulesWidget rules={rules} isLoading={isLoading} errorMessage={error?.message} />;
 };
 
 export const Dashboard = () => {
     return (
         <div className="flex flex-col space-y-3 w-full">
             <div className="h-14">
-                <AccountHeading/>
+                <AccountHeading />
             </div>
-            <RulesView/>
-            <UsageView/>
+            <RulesView />
+            <UsageView />
         </div>
     );
 };
diff --git a/src/component-library/pages/RSE/list/ListRSE.tsx b/src/component-library/pages/RSE/list/ListRSE.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { RSEViewModel } from '@/lib/infrastructure/data/view-model/rse';
 import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';
 import { ListRSETable } from '@/component-library/pages/RSE/list/ListRSETable';

diff --git a/src/component-library/pages/Rule/list/ListRule.tsx b/src/component-library/pages/Rule/list/ListRule.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { ChangeEvent, useState } from 'react';
 import { RuleViewModel } from '@/lib/infrastructure/data/view-model/rule';
 import { StreamingStatus } from '@/lib/infrastructure/hooks/useStreamReader';