Events UI #3309 User events refactoring after review

Author: olgenn

frontend/src/locale/en.json

@@ -182,7 +182,7 @@
     "repositories": "Repositories",
     "runs": "Runs",
     "tags": "Tags",
-    "events": "Project events",
+    "events": "Events",
     "settings": "Settings",
     "join": "Join",
     "leave_confirm_title": "Leave project",

frontend/src/pages/Project/Details/Events/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import { Button, Header, SpaceBetween } from 'components';
+
+import { useBreadcrumbs } from 'hooks';
+import { ROUTES } from 'routes';
+
+import { EventList } from 'pages/Events/List';
+
+export const Events: React.FC = () => {
+    const { t } = useTranslation();
+    const params = useParams();
+    const paramProjectName = params.projectName ?? '';
+    const navigate = useNavigate();
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.project_other'),
+            href: ROUTES.PROJECT.LIST,
+        },
+        {
+            text: paramProjectName,
+            href: ROUTES.PROJECT.DETAILS.FORMAT(paramProjectName),
+        },
+        {
+            text: t('projects.events'),
+            href: ROUTES.PROJECT.DETAILS.EVENTS.FORMAT(paramProjectName),
+        },
+    ]);
+
+    const goToEventsPage = () => {
+        navigate(ROUTES.EVENTS.LIST + `?within_projects=${paramProjectName}`);
+    };
+
+    return (
+        <EventList
+            renderHeader={() => {
+                return (
+                    <Header
+                        variant="awsui-h1-sticky"
+                        actions={
+                            <SpaceBetween size="xs" direction="horizontal">
+                                <Button onClick={goToEventsPage}>{t('common.full_view')}</Button>
+                            </SpaceBetween>
+                        }
+                    />
+                );
+            }}
+            permanentFilters={{ within_projects: [paramProjectName] }}
+            showFilters={false}
+        />
+    );
+};

frontend/src/pages/Project/Details/index.tsx

@@ -1,30 +1,49 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useParams } from 'react-router-dom';
+import { Outlet, useMatch, useParams } from 'react-router-dom';
 
-import { ContentLayout, DetailsHeader, NavigateLink } from 'components';
+import { ContentLayout, DetailsHeader, Tabs } from 'components';
 
 import { ROUTES } from 'routes';
 
+import styles from './styles.module.scss';
+
 export const ProjectDetails: React.FC = () => {
     const params = useParams();
     const paramProjectName = params.projectName ?? '';
     const { t } = useTranslation();
 
+    const matchSettings = useMatch(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(paramProjectName));
+    const matchEvents = useMatch(ROUTES.PROJECT.DETAILS.EVENTS.FORMAT(paramProjectName));
+
+    const tabs: {
+        label: string;
+        id: string;
+        href: string;
+    }[] = [
+        {
+            label: t('projects.settings'),
+            id: 'settings',
+            href: ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(paramProjectName),
+        },
+        {
+            label: t('projects.events'),
+            id: 'events',
+            href: ROUTES.PROJECT.DETAILS.EVENTS.FORMAT(paramProjectName),
+        },
+    ].filter(Boolean);
+
+    const showTabs = useMemo<boolean>(() => {
+        return Boolean(matchSettings) || Boolean(matchEvents);
+    }, [matchSettings, matchEvents]);
+
     return (
-        <ContentLayout
-            header={
-                <DetailsHeader
-                    title={paramProjectName}
-                    actionButtons={
-                        <NavigateLink href={ROUTES.EVENTS.LIST + `?within_projects=${paramProjectName}`}>
-                            {t('projects.events')}
-                        </NavigateLink>
-                    }
-                />
-            }
-        >
-            <Outlet />
-        </ContentLayout>
+        <div className={styles.page}>
+            <ContentLayout header={<DetailsHeader title={paramProjectName} />}>
+                {showTabs && <Tabs withNavigation tabs={tabs} />}
+
+                <Outlet />
+            </ContentLayout>
+        </div>
     );
 };

frontend/src/pages/Project/Details/styles.module.scss

@@ -0,0 +1,18 @@
+.page {
+    height: 100%;
+
+    & [class^="awsui_tabs-content"] {
+        display: none;
+    }
+
+    & > [class^="awsui_layout"] {
+        height: 100%;
+
+        & > [class^="awsui_content"] {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            height: 100%;
+        }
+    }
+}

frontend/src/pages/Project/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 export { ProjectList } from './List';
 export { ProjectDetails } from './Details';
 export { ProjectSettings } from './Details/Settings';
+export { Events as ProjectEvents } from './Details/Events';
 export { ProjectAdd } from './Add';
 export { CreateProjectWizard } from './CreateWizard';
 

frontend/src/pages/User/Details/Events/index.tsx

@@ -54,9 +54,7 @@ export const Events: React.FC = () => {
                                 <Button onClick={goToEventsPage}>{t('common.full_view')}</Button>
                             </SpaceBetween>
                         }
-                    >
-                        {/*{t('navigation.events')}*/}
-                    </Header>
+                    />
                 );
             }}
             permanentFilters={{ [filterParamName]: [paramUserName] }}

frontend/src/router.tsx

@@ -17,7 +17,7 @@ import { FleetInspect } from 'pages/Fleets/Details/Inspect';
 import { InstanceList } from 'pages/Instances';
 import { ModelsList } from 'pages/Models';
 import { ModelDetails } from 'pages/Models/Details';
-import { CreateProjectWizard, ProjectAdd, ProjectDetails, ProjectList, ProjectSettings } from 'pages/Project';
+import { CreateProjectWizard, ProjectAdd, ProjectDetails, ProjectEvents, ProjectList, ProjectSettings } from 'pages/Project';
 import { BackendAdd, BackendEdit } from 'pages/Project/Backends';
 import { AddGateway, EditGateway } from 'pages/Project/Gateways';
 import {
@@ -86,6 +86,10 @@ export const router = createBrowserRouter([
                         index: true,
                         element: <ProjectSettings />,
                     },
+                    {
+                        path: ROUTES.PROJECT.DETAILS.EVENTS.TEMPLATE,
+                        element: <ProjectEvents />,
+                    },
                     {
                         path: ROUTES.PROJECT.BACKEND.ADD.TEMPLATE,
                         element: <BackendAdd />,

frontend/src/routes.ts

@@ -23,6 +23,11 @@ export const ROUTES = {
                 FORMAT: (projectName: string) => buildRoute(ROUTES.PROJECT.DETAILS.SETTINGS.TEMPLATE, { projectName }),
             },
 
+            EVENTS: {
+                TEMPLATE: `/projects/:projectName/events`,
+                FORMAT: (projectName: string) => buildRoute(ROUTES.PROJECT.DETAILS.EVENTS.TEMPLATE, { projectName }),
+            },
+
             RUNS: {
                 DETAILS: {
                     TEMPLATE: `/projects/:projectName/runs/:runId`,