Events UI #3309

frontend/src/components/index.ts

@@ -66,6 +66,8 @@ export { default as ExpandableSection } from '@cloudscape-design/components/expa
 export { default as KeyValuePairs } from '@cloudscape-design/components/key-value-pairs';
 export { I18nProvider } from '@cloudscape-design/components/i18n';
 export { default as Wizard } from '@cloudscape-design/components/wizard';
+export { default as SegmentedControl } from '@cloudscape-design/components/segmented-control';
+export type { SegmentedControlProps } from '@cloudscape-design/components/segmented-control';
 
 // custom components
 export { NavigateLink } from './NavigateLink';

frontend/src/locale/en.json

@@ -182,6 +182,7 @@
     "repositories": "Repositories",
     "runs": "Runs",
     "tags": "Tags",
+    "events": "Events",
     "settings": "Settings",
     "join": "Join",
     "leave_confirm_title": "Leave project",
@@ -695,6 +696,7 @@
     "account_settings": "User settings",
     "settings": "Settings",
     "projects": "Projects",
+    "events": "Events",
     "create": {
       "page_title": "Create user",
       "error_notification": "Create user error",

frontend/src/pages/Events/List/ListPage.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Button, Header, SpaceBetween } from 'components';
+
+import { useBreadcrumbs } from 'hooks';
+import { ROUTES } from 'routes';
+
+import { EventList } from './index';
+
+export const ListPage: React.FC = () => {
+    const { t } = useTranslation();
+
+    useBreadcrumbs([
+        {
+            text: t('navigation.events'),
+            href: ROUTES.EVENTS.LIST,
+        },
+    ]);
+
+    return (
+        <EventList
+            variant="full-page"
+            withSearchParams
+            renderHeader={({ refreshAction, disabledRefresh }) => {
+                return (
+                    <Header
+                        variant="awsui-h1-sticky"
+                        actions={
+                            <SpaceBetween size="xs" direction="horizontal">
+                                <Button
+                                    iconName="refresh"
+                                    disabled={disabledRefresh}
+                                    ariaLabel={t('common.refresh')}
+                                    onClick={refreshAction}
+                                />
+                            </SpaceBetween>
+                        }
+                    >
+                        {t('navigation.events')}
+                    </Header>
+                );
+            }}
+        />
+    );
+};