npm package: @seatgeek/backstage-plugin-awards
Description: This plugin offers a management system for awards that can be created and given to recipients in your Backstage deployment, and then displayed onto their Entity profile pages.
Latest version: 2.0.1

# @seatgeek/backstage-plugin-awards

This plugin offers a management system for awards that can be created and given to recipients in your Backstage deployment, and then displayed onto their Entity profile pages.

[![npm latest version](https://img.shields.io/npm/v/@seatgeek/backstage-plugin-awards/latest.svg)](https://www.npmjs.com/package/@seatgeek/backstage-plugin-awards)

The plugin offers a set of Page Components and an Information card to achieve
this. It also requires the installation of its dependency
`@seatgeek/backstage-plugin-awards-backend`.

Both the backend and the frontend rely on
[Backstage authentication](https://backstage.io/docs/auth/) in order to enforce
ownership of awards. Please follow the documentation to enable authentication
before attempting to use this plugin!

## Installation

### Install the package

Install the `@seatgeek/backstage-plugin-awards` package in your frontend app package:

```shell
# From your Backstage root directory
yarn add --cwd packages/app @seatgeek/backstage-plugin-awards
```

### Add routes for the plugin management pages

Open the file `packages/app/src/App.tsx` in your Backstage deployment and add
the following lines:

```tsx
// other imports
import { AwardsPage } from '@seatgeek/backstage-plugin-awards';

// Add the routes for the plugin pages before the <FlatRoutes> block is closed.
<FlatRoutes>
  // Many routes
  <Route path="/awards" element={<AwardsPage />} />
</FlatRoutes>;

// Rest of the file
```

### Add the Entity Info Card for Awards

Inside the file `packages/app/src/components/catalog/EntityPage.tsx` file in
your Backstage deployment, add the following items:

```tsx
import { UserAwardsCard } from '@seatgeek/backstage-plugin-awards';

// Look for the const userPage and add the card to the Grid
const userPage = (
  <EntityLayout>
    <EntityLayout.Route path="/" title="Overview">
      <Grid container spacing={3}>
        {entityWarningContent}
        <Grid item xs={12} md={6}>
          <EntityUserProfileCard variant="gridItem" />
        </Grid>
        <Grid item xs={12} md={6}>
          <EntityOwnershipCard
            variant="gridItem"
            entityFilterKind={OWNERSHIP_KINDS}
          />
        </Grid>
        {/* Add this here - BEGIN */}
        <Grid item xs={12} md={6}>
          <UserAwardsCard />
        </Grid>
        {/* Add this here - END */}
      </Grid>
    </EntityLayout.Route>
  </EntityLayout>
);
```

### Add a sidebar entry (recommended)

In the file `packages/app/src/components/Root/Root.tsx` in your Backstage
deployment, add the following code:

```tsx
// Many imports
import EmojiEventsIcon from '@material-ui/icons/EmojiEvents';

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <NewAnnouncementBanner max={3} />
    <Sidebar>
      <SidebarLogo />
      <SidebarSearch />
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create" />
        <SidebarItem icon={DoneAllIcon} to="soundcheck" text="Soundcheck" />
        <SidebarItem icon={AnnouncementIcon} to="/announcements" text="Announcements" />
        {/* End global nav */}
        {/* Add this here - BEGIN */}
        <SidebarItem icon={EmojiEventsIcon} to="awards" text="Awards" />
        <SidebarDivider />
        {/* Add this here - END */}
        {/* Other imports... */}
```

## Developing this plugin

Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/awards](http://localhost:3000/awards).

You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.