# @janus-idp/plugin-notifications

> Frontend part of the notifications providing the Notifications API, Notifications page, left-side menu item and other REACT components.

Latest version **1.5.0** (published 2024-07-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @janus-idp/plugin-notifications
pnpm add @janus-idp/plugin-notifications
yarn add @janus-idp/plugin-notifications
bun add @janus-idp/plugin-notifications
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; large bundle.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2024-07-24 |
| First published | 2024-01-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 11.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 163 |
| Author | The Backstage Community |
| Maintainers | nickboldt, tomaskral, tumido |
| Keywords | support:tech-preview, lifecycle:active, backstage, plugin |

## Links

- npm: https://www.npmjs.com/package/@janus-idp/plugin-notifications
- Repository: https://github.com/janus-idp/backstage-plugins
- Homepage: https://red.ht/rhdh
- Issues: https://github.com/janus-idp/backstage-plugins/issues
- npm.io page: https://npm.io/package/@janus-idp/plugin-notifications

## Dependencies (11)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-use](https://npm.io/package/react-use.md) ^17.4.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.12.2
- [@backstage/theme](https://npm.io/package/@backstage/theme.md) ^0.5.6
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.45
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.9.13
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.3
- [react-relative-time](https://npm.io/package/react-relative-time.md) ^0.0.9
- [@material-table/core](https://npm.io/package/@material-table/core.md) ^3.1.0
- [@backstage/core-components](https://npm.io/package/@backstage/core-components.md) ^0.14.8
- [@backstage/core-plugin-api](https://npm.io/package/@backstage/core-plugin-api.md) ^1.9.3

## Recent versions

- 1.5.0 (latest) — 2024-07-24
- 1.4.1 — 2024-06-19
- 1.4.0 — 2024-06-13
- 1.3.9 — 2024-06-13
- 1.3.8 — 2024-06-07
- 1.3.7 — 2024-06-05
- 1.3.6 — 2024-06-04
- 1.3.5 — 2024-06-03
- 1.3.4 — 2024-05-31
- 1.3.3 — 2024-05-29
- 1.3.2 — 2024-05-29
- 1.3.1 — 2024-05-16
- 1.3.0 — 2024-05-14
- 1.2.6 — 2024-05-09
- 1.2.5 — 2024-05-02
- … 28 more at https://npm.io/package/@janus-idp/plugin-notifications/versions

## README

# Notifications

This Backstage front-end plugin provides:

- the `Notifications` page listing notifications from the logged-in user's perspective
- the NotificationsApi for accessing the notifications backend from front-end plugins
- an active item to the main left side menu to both notify the user about new messages and provide navigation to the Notifications page
- an alert about new system notifications

## Getting started

### Prerequisities

Have `@janus-idp/plugin-notifications-backend` installed and running.

## Installing as a dynamic plugin

The sections below are relevant for static plugins. If the plugin is expected to be installed as a dynamic one:

- follow https://github.com/janus-idp/backstage-showcase/blob/main/showcase-docs/dynamic-plugins.md#installing-a-dynamic-plugin-package-in-the-showcase
- add content of `app-config.janus-idp.yaml` into `app-config.local.yaml`.
- customize configuration configure as needed

### Configuration

There is polling used to check for new notifications. It can be tuned via `pollingIntervalMs` config property (see `app-config.janus-idp.yaml`). When set to 0, the polling is turned off.

## Installing as a static plugin

### Add NPM dependency

```
cd packages/app
yarn add @janus-idp/plugin-notifications
```

### Add left-side menu item

In the `packages/app/src/components/Root/Root.tsx`:

```
import { NotificationsActiveIcon } from '@janus-idp/plugin-notifications';

...
export const Root = ({ children }: PropsWithChildren<{}>) => (
    ...
      {/* New code: */}
      <SidebarDivider />
      <SidebarItem icon={NotificationsActiveIcon} to="notifications" text="Notifications" />

      {/* Existing code for reference: */}
      <SidebarSpace />
      <SidebarSpace />
      <SidebarDivider />
      <SidebarDivider />
      <SidebarGroup
        <SidebarGroup label="Settings"
```

### Add to router

In the `packages/app/src/App.tsx`:

```
import { NotificationsPage } from '@janus-idp/plugin-notifications';
...

export const AppBase = () => {
    ...
      {/* New code: */}
      <Route path="/notifications" element={<NotificationsPage />} />
```

## How to use the NotificationApi

Once installed as either static or dynamic plugin, a 3rd party frontend plugin can access the notifications via its frontend API:

```
import { notificationsApiRef, Notification } from '@janus-idp/plugin-notifications';

...

const notificationsApi = useApi(notificationsApiRef);
const notifications: Notification[] = await notificationsApi.getNotifications(params);

```

See `src/api/notificationsApi.ts` for more details.

---
_Source: https://npm.io/package/@janus-idp/plugin-notifications · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._