Skip to content

Commit

Permalink
add support for enterprise-only notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
@rudream
rudream committed Apr 5, 2024
1 parent 7b9212e commit 649164b
Show file tree
Hide file tree
Showing 6 changed files with 190 additions and 212 deletions.
178 changes: 30 additions & 148 deletions web/packages/teleport/src/Notifications/Notification.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,167 +23,49 @@ import { rest } from 'msw';

import { Flex } from 'design';

import {
NotificationSubKind,
Notification as NotificationType,
} from 'teleport/services/notifications';
import { NotificationSubKind } from 'teleport/services/notifications';
import cfg from 'teleport/config';
import { createTeleportContext } from 'teleport/mocks/contexts';

import { Notification } from './Notification';
import { Notifications as NotificationsComponent } from './Notifications';
import { createTeleportContext } from 'teleport/mocks/contexts';
import { Notifications as NotificationsListComponent } from './Notifications';
import { notifications as mockNotifications } from './fixtures';
import { ContextProvider } from '..';
import cfg from 'teleport/config';

export default {
title: 'Teleport/Notifications',
loaders: [mswLoader],
};

initialize();
export const NotificationTypes = () => {
const ctx = createTeleportContext();

export const Notifications = () => {
return (
<Flex
css={`
background: ${props => props.theme.colors.levels.surface};
padding: 24px;
width: fit-content;
height: fit-content;
flex-direction: column;
gap: 24px;
`}
>
{mockNotifications.map(notification => {
return (
<Notification notification={notification} key={notification.id} />
);
})}
</Flex>
<ContextProvider ctx={ctx}>
Enterprise notifications can be viewed in the
"TeleportE/Notifications/Notification Types E" story.
<Flex
mt={4}
css={`
background: ${props => props.theme.colors.levels.surface};
padding: 24px;
width: fit-content;
height: fit-content;
flex-direction: column;
gap: 24px;
`}
>
{mockNotifications.map(notification => {
return (
<Notification notification={notification} key={notification.id} />
);
})}
</Flex>
</ContextProvider>
);
};

const mockNotifications: NotificationType[] = [
{
id: '1',
title: 'joe approved your access request for 5 resources.',
subKind: NotificationSubKind.AccessRequestApproved,
createdDate: new Date(Date.now() - 30 * 1000), // 30 seconds ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '2',
title: `joe approved your access request for the 'auditor' role,`,
subKind: NotificationSubKind.AccessRequestApproved,
createdDate: new Date(Date.now() - 4 * 60 * 1000), // 4 minutes ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '3',
title: `joe denied your access request for the 'auditor' role,`,
subKind: NotificationSubKind.AccessRequestDenied,
createdDate: new Date(Date.now() - 15 * 60 * 1000), // 15 minutes ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '4',
title: 'bob requested access to 2 resources.',
subKind: NotificationSubKind.AccessRequestPending,
createdDate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '5',
title: `bob requested access to the 'intern' role.`,
subKind: NotificationSubKind.AccessRequestPending,
createdDate: new Date(Date.now() - 15 * 60 * 60 * 1000), // 15 hours ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '6',
title: `2 resources are now available to access.`,
subKind: NotificationSubKind.AccessRequestNowAssumable,
createdDate: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
{ name: 'request-type', value: 'resource' },
],
},
{
id: '7',
title: `"node-5" is now available to access.`,
subKind: NotificationSubKind.AccessRequestNowAssumable,
createdDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
{ name: 'request-type', value: 'resource' },
],
},
{
id: '8',
title: `"auditor" is now ready to assume.`,
subKind: NotificationSubKind.AccessRequestNowAssumable,
createdDate: new Date(Date.now() - 2 * 7 * 24 * 60 * 60 * 1000), // 2 weeks ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
{ name: 'request-type', value: 'role' },
],
},
{
id: '9',
title: 'This is an example user-created warning notification',
subKind: NotificationSubKind.UserCreatedWarning,
createdDate: new Date(Date.now() - 93 * 24 * 60 * 60 * 1000), // 3 months ago
clicked: true,
labels: [
{
name: 'text-content',
value: 'This is the text content of a warning notification.',
},
],
},
];
initialize();

export const NotificationsList = () => <ListComponent />;
NotificationsList.parameters = {
Expand Down Expand Up @@ -248,7 +130,7 @@ const ListComponent = () => {
height: ${p => p.theme.topBarHeight[2]}px;
`}
>
<NotificationsComponent />
<NotificationsListComponent />
</Flex>
</ContextProvider>
</MemoryRouter>
Expand Down
10 changes: 9 additions & 1 deletion web/packages/teleport/src/Notifications/Notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,21 @@ import {
NotificationContent,
notificationContentFactory,
} from './notificationContentFactory';
import { useTeleport } from '..';

export function Notification({
notification,
}: {
notification: NotificationType;
}) {
const content = notificationContentFactory(notification);
const ctx = useTeleport();

const content = ctx.notificationContentFactory(notification);

// If the notification is unsupported, it should not be shown.
if (!content) {
return null;
}

// Whether to show the text content dialog. This is only ever used for user-created notifications which only contain informational text
// and don't redirect to any page.
Expand Down
143 changes: 143 additions & 0 deletions web/packages/teleport/src/Notifications/fixtures.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/**
* Teleport
* Copyright (C) 2024 Gravitational, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import { NotificationSubKind } from 'teleport/services/notifications';
import { Notification } from 'teleport/services/notifications';

export const notifications: Notification[] = [
{
id: '1',
title: 'joe approved your access request for 5 resources.',
subKind: NotificationSubKind.AccessRequestApproved,
createdDate: new Date(Date.now() - 30 * 1000), // 30 seconds ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '2',
title: `joe approved your access request for the 'auditor' role,`,
subKind: NotificationSubKind.AccessRequestApproved,
createdDate: new Date(Date.now() - 4 * 60 * 1000), // 4 minutes ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '3',
title: `joe denied your access request for the 'auditor' role,`,
subKind: NotificationSubKind.AccessRequestDenied,
createdDate: new Date(Date.now() - 15 * 60 * 1000), // 15 minutes ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '4',
title: 'bob requested access to 2 resources.',
subKind: NotificationSubKind.AccessRequestPending,
createdDate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '5',
title: `bob requested access to the 'intern' role.`,
subKind: NotificationSubKind.AccessRequestPending,
createdDate: new Date(Date.now() - 15 * 60 * 60 * 1000), // 15 hours ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
],
},
{
id: '6',
title: `2 resources are now available to access.`,
subKind: NotificationSubKind.AccessRequestNowAssumable,
createdDate: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
{ name: 'request-type', value: 'resource' },
],
},
{
id: '7',
title: `"node-5" is now available to access.`,
subKind: NotificationSubKind.AccessRequestNowAssumable,
createdDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
clicked: false,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
{ name: 'request-type', value: 'resource' },
],
},
{
id: '8',
title: `"auditor" is now ready to assume.`,
subKind: NotificationSubKind.AccessRequestNowAssumable,
createdDate: new Date(Date.now() - 2 * 7 * 24 * 60 * 60 * 1000), // 2 weeks ago
clicked: true,
labels: [
{
name: 'request-id',
value: '3bd7d71f-64ad-588a-988c-22f3853910fa',
},
{ name: 'request-type', value: 'role' },
],
},
{
id: '9',
title: 'This is an example user-created warning notification',
subKind: NotificationSubKind.UserCreatedWarning,
createdDate: new Date(Date.now() - 93 * 24 * 60 * 60 * 1000), // 3 months ago
clicked: true,
labels: [
{
name: 'text-content',
value: 'This is the text content of a warning notification.',
},
],
},
];
1 change: 1 addition & 0 deletions web/packages/teleport/src/Notifications/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@
*/

export { Notifications } from './Notifications';
export { notificationContentFactory } from './notificationContentFactory';
Loading

0 comments on commit 649164b

Please sign in to comment.