@spotify/backstage-plugin-soundcheck 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # @spotify/backstage-plugin-soundcheck
 
+## 0.12.4
+
+### Patch Changes
+
+- Updated dependency `@uiw/react-md-editor` to `3.20.10`.
+- Added tooltips to show the reason why collector is not configurable via No-Code UI.
+- Track Insights now takes a tracks' filter, custom track applicability filters, and the total number of applicable entities into account when calculating certification rates.
+- Fixed an issue in the filter dropdown where owner names could be displayed incorrectly.
+- Updated text colors and logos on Track, Check, Campaign and Collector list pages for improved readability.
+- Removing configuration option to enable non-virtualized Soundcheck Overview table.
+- Tech Health Entities and Teams tabs can now display unlimited number of entities.
+- Added a possibility to export full dataset as CSV in Tech Health.
+- Updated backstage dependencies to `v1.26.0`
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+- Updated dependencies
+  - @spotify/backstage-plugin-core@0.7.1
+  - @spotify/backstage-plugin-soundcheck-common@0.13.1
+
+## 0.12.3
+
+### Patch Changes
+
+- Minor tweaks to margins/padding to make things more visually distinct.
+- Improved the performance of the Track Insights page.
+- Fixes the campaign link on the card view of the Tech Health Campaigns page.
+- Add support for different track types in the overview card.
+- Added a "Systems" filter to the Track Insights page.
+- Fixed overview page route history. Browser controls (such as the forward and back buttons) now navigate the overview page correctly.
+- Fixed an issue with level progress bars on the Track page that caused them to only ever show 0 or 100%
+- Exported the RouteRef for the '/tracks/:trackId/checks/:checkId' route
+- Added a preview of the entities that will be affected by filter selections when creating checks, tracks, and campaigns.
+- Resolved an issue related to the caching of certain frontend queries.
+- Adjusted the "Filter by owner" options of the checks, tracks, and campaigns pages to show display names rather than identifiers.
+- Added a type filter for track insights page
+- Resolved an issue with the display of badges on the overview card.
+- Modified the track insights page so that the owner filter options display names instead of identifiers.
+- Minor update to the tracks GraphQL API allowing filtering tracks by type.
+- Fixed the results table width on the Soundcheck Overview page.
+- Adjusted the filters for track insights to only show the relevant options in the filter dropdowns.
+- Adjusted "Filter by owner" options to show all owners at all times for the checks, tracks, and campaigns pages.
+- Added logic to hide the lifecycle filter on track insights page if there are less than 2 options.
+- Added support for filtering Track Insights by owner and lifecycle.
+- Updated backstage dependencies to `v1.24.0`
+- Updated dependencies
+  - `@spotify/backstage-plugin-core` to `^0.7.0`
+  - `@spotify/backstage-plugin-soundcheck-common` to `^0.13.0`
+
 ## 0.12.2
 
 ### Patch Changes

package/README.md

@@ -1,513 +1,5 @@
 # Spotify Plugins for Backstage: Soundcheck
 
-![](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck.png)
+This plugin is part of [Spotify Plugins for Backstage](https://backstage.spotify.com/marketplace/spotify/bundle/spotify-plugins-bundle/).
 
-Soundcheck incentivizes quality, reliability, and alignment of your software ecosystem. With Soundcheck, engineering organizations define development and operational standards, and measure the health of software components. Soundcheck provides teams with strong guidance to cultivate behavior and improve an organization's DevOps practices. Prioritize and visualize tech health and alignment to organizational best practices within Backstage.
-
-There are 5 fundamental elements that make up Soundcheck:
-
-- **Check**: A standard or best practice a component is graded against.
-- **Check Result**: The result of running a check against a component. Possible results are passed, failed, warning or not applicable.
-- **Track**: A long-term tech health initiative.
-- **Level**: A group of checks that represent a milestone within a track.
-- **Certification**: The outcome of passing all applicable checks within a level.
-
-Together, they show you how any given software component is performing against your organization's long-term tech health initiatives.
-
-<!-- TOC -->
-
-- [Spotify Plugins for Backstage: Soundcheck](#spotify-plugins-for-backstage-soundcheck)
-  - [Prerequisites](#prerequisites)
-    - [1. Install the Soundcheck backend plugin](#1-install-the-soundcheck-backend-plugin)
-  - [Installation](#installation)
-    - [1. Install the plugin](#1-install-the-plugin)
-    - [2. Install Soundcheck Entity Content Page & Card](#2-install-soundcheck-entity-content-page--card)
-    - [3. Install Soundcheck Routing Page](#3-install-soundcheck-routing-page)
-    - [4. Setup sidebar item](#4-setup-sidebar-item)
-    - [5. Install Soundcheck Group Content Page](#5-install-soundcheck-group-content-page)
-    - [6. Check everything is working](#6-check-everything-is-working)
-- [Product Documentation](#product-documentation)
-  - [No-Code UI for checks, tracks and facts management](#no-code-ui-for-checks-tracks-and-facts-management)
-  - [Using the No-Code UI](#using-the-no-code-ui)
-    - [Checks](#checks)
-      - [Creating a new check](#creating-a-new-check)
-      - [Editing a check](#editing-a-check)
-    - [Tracks](#tracks)
-      - [Creating a new track](#creating-a-new-track)
-      - [Editing a track](#editing-a-track)
-    - [Fact Collectors](#fact-collectors)
-      - [Configuring a fact collector](#configuring-a-fact-collector)
-      - [Frequency](#frequency)
-      - [Filters](#filters)
-      - [Caching](#caching)
-  - [RBAC Integration](#rbac-integration)
-  - [Soundcheck Tech Health Page](#soundcheck-tech-health-page)
-    - [Aggregations](#aggregations)
-    - [Filters](#filters-1)
-    - [Trends](#trends)
-    - [Data Export](#data-export)
-    - [Data Caching](#data-caching)
-  - [Campaigns in Soundcheck](#campaigns-in-soundcheck)
-    - [Key features include:](#key-features-include)
-    - [Campaigns Library](#campaigns-library)
-    - [Campaign Creation](#campaign-creation)
-      - [Step 1: Campaign Details](#step-1-campaign-details)
-      - [Step 2: Selecting Checks](#step-2-selecting-checks)
-      - [Step 3: Applying Filters](#step-3-applying-filters)
-      - [Step 4: Defining Milestones](#step-4-defining-milestones)
-    - [Campaign Archival](#campaign-archival)
-    - [Campaign Progress and Milestones](#campaign-progress-and-milestones)
-    - [Campaign Notifications](#campaign-notifications)
-      - [Scenarios for Receiving Notifications](#scenarios-for-receiving-notifications)
-      <!-- TOC -->
-
-## Prerequisites
-
-### 1. Install the Soundcheck backend plugin
-
-You must install the [Soundcheck backend plugin](https://npmjs.com/package/@spotify/backstage-plugin-soundcheck-backend) and all of its prerequisites before installing the Soundcheck frontend plugin.
-
-## Installation
-
-The next steps describe how to install the Soundcheck frontend plugin.
-
-### 1. Install the plugin
-
-1. Add the Soundcheck packages as dependencies to your Backstage instance
-
-   ```sh
-   yarn workspace app add @spotify/backstage-plugin-soundcheck
-   ```
-
-### 2. Install Soundcheck Entity Content Page & Card
-
-The Soundcheck Entity Page consists of a view on the [Catalog Entity page](https://github.com/backstage/backstage/blob/master/packages/app/src/components/catalog/EntityPage.tsx), and lists
-all the related certifications, levels, checks and check results for a
-particular entity.
-
-The code below adds the Soundcheck card to the overview tab for all component types.
-The Soundcheck entity content component needs to be added to each relevant
-page type within your Backstage `EntityPage`. The snippets below insert the
-card/tabs at the end of their respective containers, but it's fine to reorder
-them as you wish. When reordering the card in particular, consider whether the
-[fluid layout](https://v4.mui.com/components/grid/#fluid-grids) of the grid
-should be adjusted to ensure the cards fill each row.
-
-```tsx
-// packages/app/src/components/catalog/EntityPage.tsx
-
-import {
-  EntitySoundcheckContent,
-  EntitySoundcheckCard,
-} from '@spotify/backstage-plugin-soundcheck';
-
-// ...
-
-const overviewContent = (
-  <Grid container spacing={3} alignItems="stretch">
-    {/* existing cards... */}
-
-    <Grid item md={6} xs={12}>
-      <EntitySoundcheckCard />
-    </Grid>
-  </Grid>
-);
-
-// ...
-
-// Repeat this for all component entity pages which use the `overviewContent`
-const serviceEntityPage = (
-  <EntityLayout>
-    {/* existing tabs... */}
-
-    <EntityLayout.Route path="/soundcheck" title="Soundcheck">
-      <EntitySoundcheckContent />
-    </EntityLayout.Route>
-  </EntityLayout>
-);
-```
-
-### 3. Install Soundcheck Routing Page
-
-Add a new Route element with the path `/soundcheck` and element of `<SoundcheckRoutingPage />`.
-
-`<SoundcheckRoutingPage />` supports the following props:
-
-```tsx
-{
-  title: string; // OPTIONAL - Defaults to 'Soundcheck' when excluded
-}
-```
-
-The route should look something like this:
-
-```tsx
-// packages/app/src/App.tsx
-import { SoundcheckRoutingPage } from '@spotify/backstage-plugin-soundcheck';
-
-const routes = (
-  <FlatRoutes>
-    {/* existing routes... */}
-
-    <Route
-      path="/soundcheck"
-      element={<SoundcheckRoutingPage title="My Optional Title" />}
-    />
-  </FlatRoutes>
-);
-```
-
-### 4. Setup sidebar item
-
-Add a sidebar menu item that routes to the path setup in the previous step
-
-```tsx
-// packages/app/src/components/Root.tsx
-import DoneAllIcon from '@material-ui/icons/DoneAll';
-
-export const Root = ({ children }: PropsWithChildren<{}>) => (
-  <SidebarPage>
-    <Sidebar>
-      <SidebarLogo />
-      {/* existing sidebar items... */}
-
-      <SidebarScrollWrapper>
-        {/* existing sidebar items... */}
-
-        <SidebarItem icon={DoneAllIcon} to="soundcheck" text="Soundcheck" />
-      </SidebarScrollWrapper>
-    </Sidebar>
-  </SidebarPage>
-);
-```
-
-### 5. Install Soundcheck Group Content Page
-
-The Soundcheck Group Content Page is a Soundcheck Overview Page that can be pinned to a selected group entity.
-It can only be added to a group page type within your Backstage `EntityPage`.
-
-```tsx
-// packages/app/src/components/catalog/EntityPage.tsx
-import { GroupSoundcheckContent } from '@spotify/backstage-plugin-soundcheck';
-
-const groupPage = (
-  <EntityLayout>
-    {/* existing tabs... */}
-
-    <EntityLayout.Route path="/soundcheck" title="Soundcheck">
-      <GroupSoundcheckContent />
-    </EntityLayout.Route>
-  </EntityLayout>
-);
-```
-
-### 6. Check everything is working
-
-If you have followed all steps up to this point, Soundcheck is set up and
-running. The backend successfully starts up if the track config is valid, and
-when you navigate to a catalog page for one of the entity types you configured
-above, you'll see the Soundcheck tab containing the applicable tracks for the
-current entity. If you visit `/soundcheck` or click the "Soundcheck" entry on the sidebar, you should see the overview page.
-
-# Product Documentation
-
-## No-Code UI for checks, tracks and facts management
-
-No-Code UI is a powerful user interface built into the Soundcheck plugin that allows users to manage checks, tracks and facts without writing YAML code. Prior to No-Code UI, users had to write YAML code to configure a new check, track or fact. Now, non-programmers can add checks, tracks and facts too – thereby making it easier for everyone to work within Soundcheck.
-
-No-Code UI has the same capabilities as its YAML configuration analog, however this capability simplifies and visualizes the process of managing checks, tracks and facts. Checks, tracks and facts created via No-Code UI are stored in the central Backstage database, or a [plugin-specific database](https://backstage.io/docs/tutorials/configuring-plugin-databases?__hstc=71158991.ce8f00825b31a2e008e99e7bf8c61d36.1687962480385.1687962480385.1687962480385.1&__hssc=71158991.1.1687962480385&__hsfp=2924083047#connection-configuration-per-plugin) if configured.
-
-The No-Code UI will allow non-programmers to easily manage checks, tracks and facts via the Soundcheck UI without needing to write code. However, if a user wishes to, they can still continue to create checks, tracks and facts through Soundcheck’s YAML configuration.
-
-## Using the No-Code UI
-
-### Checks
-
-A check is a comparison between a defined acceptable outcome and the actual outcome of a given process. Checks indicate where the software aligns to or deviates from organizational standards and best practices.
-
-![Soundcheck Checks](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-checks.png)
-
-Checks consist of four components: facts, paths, operators, and values. These components are then organized via a Boolean calculator in the UI. You can see an example of the rule layout a user will see when creating a check in the image below.
-
-![Soundcheck Boolean Calculator](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-boolean-calculator.png)
-
-#### Creating a new check
-
-To create a check, select the facts that you want to use, organize them into rules and give your check a meaningful name and a description. The rules are what defines a check and what a track will use in determining if an entity passes or fails. Simple expressions can be combined using Any Of / All Of to create more complex rules. You also have the option of adding Pass/Fail messages for additional details of why something passed/failed.
-
-![Soundcheck Create Check](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-new-check.png)
-
-#### Editing a check
-
-Once a check is created, you will be able to manage and edit your check on its detail page. You’ll find no differences in how the pages look when creating/editing a check. From the checks listing page, you will see an option to edit you check, which will bring you to the details page shown below.
-
-![Soundcheck Edit Check](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-edit-check.png)
-
-You can make as many changes as desired, but just keep in mind that changes are reflected in tracks that may already have said check assigned. Checks can also be a part of multiple tracks, which could have the unintentional effect of causing some tracks to start failing. While the track you want the check updated in may pass, a track setup somewhere else may fail.
-
-### Tracks
-
-Tracks are composed of levels and checks. Tracks encourage alignment to architectural best practices and standards and are analogous to an organization’s long-term tech health initiatives. Tracks are composed of one or more levels, and each level is composed of one or more checks. Each level of checks sets the standard for an organization and how they want to determine what passes and what fails in the individual track.
-
-![Soundcheck Tracks](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-tracks.png)
-
-#### Creating a new track
-
-To create a track, give your track a meaningful name and a description, and select the filters and checks that you want to use.
-
-![Soundcheck Create Track](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-create-track.png)
-
-Filters allow a user further customization for their tracks to only be applicable to specific entities in the Software Catalog. This allows users to tie their tracks to specific tags such as “Java”, “service” or “production” to name a few. You can have as many or as few selections per type as you want to include in each track. Each type of filter will display a dropdown menu with your choice for selection. You can select any number of filters per section as desired.
-
-Checks are searchable, and can be dragged-and-dropped from the list of checks into the level(s) of the track. Levels can be added to a track with the “+ Add Level” button shown above. Organizing checks into levels allows for a more nuanced read of what checks cleared and which ones didn’t. Most use levels by order of difficulty to clear, where level one means hardest to pass, level two is medium hard to pass, and level three is relatively easy to pass.
-
-#### Editing a track
-
-Once a track is created, you will be able to manage and edit your track on its detail page. From the tracks listing page, you will see an option to edit your track, which will bring you to the details page shown below.
-
-![Soundcheck Edit Track](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-edit-track.png)
-
-As with checks, you can make as many changes as desired when editing tracks. Just make sure to save your track in order for changes to take effect. Also, similar to checks,, editing a track and saving will immediately reflect onto anything that has been assigned to said track.
-
-### Fact Collectors
-
-While Soundcheck comes with two built-in fact collectors: catalog and soundcheck, soundcheck can be extended with additional fact collectors. A fact collector can collect one or more facts on a given entity. At the moment, only Github fact collectors are supported for No Code UI, with support for others coming in future releases.
-
-![Soundcheck FC Main Screen](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-fc-main.png)
-
-#### Configuring a fact collector
-
-To configure a fact collector, make sure you are on the Collectors tab. Click on a Fact's “Configure” link to open a modal that displays the Fact Collector's configuration form.
-
-- WARNING: If you already have a config YAML file setup, you will be unable to use No-Code UI to configure your collector. In order to use the No-Code UI, simply remove the YAML file/reference and you will have access to configure from No-Code UI.
-
-![Soundcheck FC Modal](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-fc-modal.png)
-
-Once you choose to configure a collector, you will see the following page with 3 configuration options. You can see what each configuration collects in its description. All 3 configs have the following options:
-
-#### Frequency
-
-![Soundcheck FC Frequency](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-fc-freq.png)
-
-You can set the frequency of how often to collect details from each collector option. The frequency of runs can be set using regular intervals or defined as custom cron expressions.
-
-#### Filters
-
-![Soundcheck FC Filters](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-fc-filters.png)
-
-You can set filters for each option as well. These filters contain the same options as Tracks. You can learn by going to the [Creating a new track](#creating-a-new-track) section.
-
-#### Caching
-
-![Soundcheck FC Cache](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-fc-cache.png)
-
-Lastly, you can enable Caching and set up an optional duration for said cache.
-
-Once you have finished making your desired changes, make sure to click on the save button in order to properly save you configuration. Optionally, you can click on the cancel button at anytime to discard your changes..
-
-## RBAC Integration
-
-Along with the No Code UI release, we have recently integrated Soundcheck with the [RBAC plugin](https://backstage.spotify.com/plugins/rbac/). Admins can now use the RBAC plugin to manage (allow and restrict) what individual users or groups can do within Soundcheck.
-
-Soundcheck’s No-Code UI integrates with Backstage’s permission framework on the RBAC plugin. This integration enables restricting which users/groups can Create, Read, Update, or Delete (CRUD) Soundcheck checks and tracks.
-
-![Soundcheck RBAC](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-rbac-setup.png)
-
-> Note: For the Soundcheck permissions to display as you see above sure you have added `soundcheck` to the list of `permissionedPlugins` in your `app-config.yaml`. For more details, [click here](https://www.npmjs.com/package/@spotify/backstage-plugin-rbac-backend#3-configure-permissioned-plugins).
-
-Take a look at the [RBAC Integration](https://backstage.spotify.com/plugins/rbac/) for details and [RBAC Readme](https://www.npmjs.com/package/@spotify/backstage-plugin-rbac) for steps.
-
-## Soundcheck Tech Health Page
-
-Soundcheck has the capability to aggregate, filter, and display check result and certification data.
-The `pass rate` is the aggregation metric representing the percentage of check results or
-certifications marked as 'passed' within a filterable group of current check results or certifications
-for the date the metric is calculated.
-
-The tech health page is available at the following link:
-http://[hostname]:[port]/soundcheck/tech-health
-
-![Soundcheck Aggregations](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/soundcheck-aggregations.png)
-
-### Aggregations
-
-The check result and certification data can be aggregated by:
-
-- `Checks`: Pass rates for checks, either organization-wide or filtered by specific checks,
-  tracks/levels, and entities based on the selections.
-- `Tracks`: Pass rates for track levels, either organization-wide or filtered by specific checks,
-  tracks/levels, and entities based on the selections.
-- `Entities`: Pass rates for entities, either organization-wide or filtered by specific checks,
-  tracks/levels, and entities based on the selections.
-- `Teams`: Pass rates for teams, either organization-wide or filtered by specific checks,
-  tracks/levels, and entities based on the selections.
-- `Campaigns`: Pass rates for campaigns, either organization-wide or filtered by specific checks,
-  tracks/levels, teams, and entities based on the selections.
-
-### Filters
-
-The data can be filtered by the following categories:
-
-- `Entities`: check and certification pass rates will be calculated only for selected entities.
-- `Entity Kind`: check and certification pass rates will be calculated only for the entities
-  with selected kinds.
-- `Entity Type`: check and certification pass rates will be calculated only for the entities
-  with selected types.
-- `Entity Owner`: check and certification pass rates will be calculated only for the entities
-  owned by selected teams and their child teams recursively.
-- `Entity Lifecycle`: check and certification pass rates will be calculated only for the entities
-  with selected lifecycles.
-- `Tracks`: check and certification pass rates will be calculated only for selected tracks and
-  checks included in these tracks.
-- `Track Level`: check and certification pass rates will be calculated only for selected track
-  levels and checks included in these track levels.
-- `Checks`: check pass rates will be calculated only for selected checks. Certification pass rates
-  will be calculated only for track levels that include these checks.
-- `Check Owner`: check pass rates will be calculated only for the checks owned by selected teams.
-  Certification pass rates will be calculated only for track levels that include checks owned by
-  selected teams.
-
-Filter rules:
-
-- If no filter values are selected the pass rates will be calculated across the entire organization.
-- Filter values within the same category are treated as ANY (OR).
-- Filter values within different categories are treated as ALL (AND).
-
-### Trends
-
-The pass rate metric can be calculated for up to the last 90 days so that the pass rates can be monitored over time.
-Check result history and certification history must be enabled in order to be able to see the trend data:
-
-- [Enabling check result history](https://www.npmjs.com/package/@spotify/backstage-plugin-soundcheck-backend#enabling-check-result-history)
-- [Enabling certification history](https://www.npmjs.com/package/@spotify/backstage-plugin-soundcheck-backend#enabling-certification-history)
-
-### Data Export
-
-The aggregated data from each Tech Health Page tab can be exported into a Comma-Separated Values (CSV)
-file format. The CSV format is widely supported and can be easily imported into various data analysis
-tools, spreadsheets, and databases.
-
-### Data Caching
-
-In order to improve Soundcheck Tech Health page performance you can enable data caching.
-Caching can be specified for trends and snapshots separately.
-Omitting a cache specification will disable caching for that data type.
-
-The configuration should be added to the soundcheck portion of `app-config.yaml`:
-
-```yaml
-# app-config.yaml
-soundcheck:
-  techHealth:
-    caching:
-      trends:
-        enabled: true
-        cacheTtl: 86400
-      snapshots:
-        enabled: true
-        cacheTtl: 600
-```
-
-- `caching`: A section in which caching per data type can be enabled/disabled. Default value is 'true' for both types.
-- `trends`: A section in which trend data caching can be configured.
-- `snapshots`: A section in which snapshot data caching can be configured.
-- `enabled`: A boolean value indicating whether caching is enabled for the data type. Default value is 'true'.
-- `cacheTtl`: The number of seconds for which the data will be cached, if enabled. Default value is 900 (15 minutes) for snapshots and 86400 (24 hours) for trends.
-
-## Campaigns in Soundcheck
-
-Soundcheck Campaigns provide a structured approach for organizations to drive focused initiatives, such as software updates or system transitions. They offer a way to create, manage, and monitor these initiatives within the Soundcheck framework.
-
-### Key features include:
-
-- **Initiation of Campaigns**: Users can create campaigns with specific goals, ownership, and timelines.
-- **Focused Initiatives**: Campaigns enable targeting specific organizational objectives, like updating a software library.
-- **Notification System**: Alerts are optionally sent out via Slack when there are changes in check statuses or certification levels, aiding prompt action.
-- **Dashboard Tracking**: Progress of campaigns across different teams or the entire organization is visually trackable.
-- **Archiving Feature**: Completed campaigns can be archived for historical reference.
-
-Campaigns are designed to enhance awareness and actionability in focused initiatives, providing an additional capability within Soundcheck to manage initiatives that run for shorter periods. Some example use cases include:
-
-**Examples include:**
-
-- There is a need to Upgrade Spring Libraries to use a specific version of Spring Boot.
-- When your organization wants to remove unneeded data endpoints to save cost.
-
-### Campaigns Library
-
-The Campaigns Library in Soundcheck serves as the central dashboard for all campaign-related activities. It is designed to provide users with a comprehensive overview of campaigns as well as control over various campaigns within the organization. Here, users can engage in several key activities:
-
-- **Navigate to Individual Campaign Details**: Users can view detailed information about each campaign, including its objectives, current status, assigned teams or individuals, and progress metrics. This detailed view helps in monitoring and managing specific campaigns more effectively.
-- **Create New Campaigns**: This function allows users to initiate new campaigns. Users can define the campaign's objectives, set timelines, assign owners, and specify other relevant parameters. The creation process is designed to be intuitive, guiding users through each step to ensure all necessary information is captured.
-- **Edit Campaigns**: Campaign creators have the flexibility to modify the details of existing campaigns. This includes changing objectives, timelines, ownership, and other critical campaign parameters. This feature is crucial for adapting to changing conditions or requirements within a project or organization.
-- **Delete Campaigns**: In cases where a campaign is no longer relevant or has been created by mistake, users can remove it from the system. This helps in maintaining a clean and up-to-date campaign dashboard.
-- **Archive Completed Campaigns**: Once a campaign has reached its conclusion or its goals have been met, users can archive the campaign. This feature keeps the main dashboard focused on active campaigns, while still preserving the data of completed initiatives for future reference or analysis.
-
-![Soundcheck Campaigns Library](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/campaign-tab.png)
-
-### Campaign Creation
-
-Creating campaigns in Soundcheck is a feature accessible to all users,
-allowing them to initiate new campaigns. This process is divided into four structured steps.
-
-#### Step 1: Campaign Details
-
-In this initial step, users establish the foundational elements of the campaign:
-
-- **Campaign Name**: Assign a unique and descriptive name for easy identification.
-- **Campaign Description**: Provide a detailed description of the campaign’s objectives and scope.
-- **Campaign Owner**: Designate the individual or team responsible for overseeing the campaign.
-- **Support Channel**: Optionally specify the Slack channel for campaign-related notifications.
-- **Start and End Dates**: Set definitive start and end dates to establish a clear timeline for the campaign.
-
-#### Step 2: Selecting Checks
-
-This step involves choosing specific checks that the campaign will use to track progress against.
-
-#### Step 3: Applying Filters
-
-Filters are used to determine which entities the campaign targets.
-
-#### Step 4: Defining Milestones
-
-Milestones are set to track progress and achieve specific targets within the campaign.
-Each milestone includes a name, description, and a defined pass rate, providing clear targets for
-campaign progression.
-
-![Soundcheck Campaign Creation](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/campaign-creation.png)
-
-### Campaign Archival
-
-The Soundcheck Campaigns page lists all active campaigns offers users tools for finalizing and
-archiving campaigns, ensuring the completion of objectives is clearly documented.
-Admins and authorized users can view archived campaigns, providing a historical perspective on past initiatives.
-
-### Campaign Progress and Milestones
-
-Milestones are an important part of campaigns, serving as tangible markers of progress and success.
-Each milestone’s progress is monitored, with updates provided on completion rates and remaining tasks.
-
-Campaign progress is monitored and displayed in various sections within Soundcheck:
-
-- **Overview Tab**: A dedicated section in the Overview tab provides a snapshot of all ongoing campaigns.
-- **Tech Health Page**: The Tech Health Page includes a tab for campaigns, showcasing detailed analytics and progress for each campaign. This helps in understanding the broader impact of campaigns on organizational tech health.
-- **Entity-Specific Progress**: For each entity page in Soundcheck, there's a section that displays the campaign progress related to that particular entity.
-- **Group-Specific Progress**: Similar to entity pages, each group page in Soundcheck includes a section that shows the campaign progress for the group.
-
-![Soundcheck Campaign Overview Page Progress](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/campaign-overview.png)
-![Soundcheck Campaign Progress](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/campaign-progress.png)
-
-### Campaign Notifications
-
-The optional notification feature for campaigns is designed to keep users informed and responsive to changes and developments within their software environment. They act as a proactive communication tool, enhancing awareness and efficiency in managing software health and compliance.
-
-For detailed documentation on getting notifications set up, refer to the [Slack Notifications section](../../plugins/soundcheck-backend/README.md#5-slack-notifications) of the Soundcheck Backend README.
-
-#### Scenarios for Receiving Notifications
-
-During campaign creation, the creator has the option to set up a Slack channel to be used for campaign notifications. If specified, campaign notifications will be sent to the provided channel.
-
-- **Assigned Campaigns**: When a new campaign is created, the campaign specific channel will receive a notification to acknowledge and start addressing the goals of the campaign.
-- **Campaign Updates**: Alerts are issued for any changes to a campaigns, including the checks associated with the campaign, the milestones of the campaign, or any related metadata.
-
-![Soundcheck Campaign Notification](https://spotify-plugins-for-backstage-readme-images.spotifycdn.com/campaign-notification.png)
+If you are already a customer, you can find detailed documentation about the Soundcheck Plugins [here](https://backstage.spotify.com/docs/soundcheck).

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spotify/backstage-plugin-soundcheck",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/config.d.ts

@@ -3,10 +3,6 @@ export interface Config {
    * Configuration options for the soundcheck plugin.
    */
   soundcheck?: {
-    /**
-     * @visibility frontend
-     */
-    virtualizeOverviewPage?: boolean;
     /**
      * @visibility frontend
      */

package/dist/alpha.esm.js

@@ -1,2 +1,2 @@
-import{createApiExtension as r,createApiFactory as i,discoveryApiRef as u,fetchApiRef as d,createPageExtension as c,createPlugin as p}from"@backstage/frontend-plugin-api";import{s,S as l,e as h,g as m,r as f,o as R}from"./esm/routes-93cd1496.esm.js";import{convertLegacyRouteRef as n,compatWrapper as t}from"@backstage/core-compat-api";import{createEntityContentExtension as a,createEntityCardExtension as g}from"@backstage/plugin-catalog-react/alpha";import o from"react";import"@backstage/core-plugin-api";import"graphql-request";import"graphql-tag";const k=r({factory:i({api:s,deps:{discoveryApi:u,fetchApi:d},factory:e=>new l(e)})}),v=a({defaultPath:"soundcheck",defaultTitle:"Soundcheck",name:"entity",routeRef:n(h),loader:()=>import("./esm/EntitySoundcheckContent-bc7bdbe2.esm.js").then(e=>t(o.createElement(e.EntitySoundcheckContent,null)))}),y=g({name:"card",loader:()=>import("./esm/index-f4bdaf5c.esm.js").then(e=>t(o.createElement(e.EntitySoundcheckCard,null)))}),E=a({defaultPath:"soundcheck",defaultTitle:"Soundcheck",name:"group",routeRef:n(m),attachTo:{id:"page:catalog/group-details",input:"contents"},loader:()=>import("./esm/index-5610fc82.esm.js").then(e=>t(o.createElement(e.FixedGroupOverviewPage,null)))}),P=c({name:"SoundcheckRoutingPage",namespace:"soundcheck",routeRef:n(f),defaultPath:"/soundcheck",loader:()=>import("./esm/index-99d39b7d.esm.js").then(e=>t(o.createElement(e.RoutingPage,null)))}),S=c({name:"overview",namespace:"soundcheck",routeRef:n(R),defaultPath:"/soundcheck",loader:()=>import("./esm/index-5610fc82.esm.js").then(e=>t(o.createElement(e.OverviewPage,null)))});var A=p({id:"soundcheck",extensions:[P,S,k,v,y,E]});export{A as default};
+import{createApiExtension as i,createApiFactory as u,discoveryApiRef as d,fetchApiRef as p,createPageExtension as c,createNavItemExtension as s,createPlugin as m}from"@backstage/frontend-plugin-api";import{s as h,S as l,e as f,g as R,r as a,o as k}from"./esm/routes-DcGwdXHX.esm.js";import{convertLegacyRouteRef as t,compatWrapper as o}from"@backstage/core-compat-api";import{createEntityContentExtension as r,createEntityCardExtension as g}from"@backstage/plugin-catalog-react/alpha";import n from"react";import v from"@material-ui/icons/DoneAll";import"@backstage/core-plugin-api";import"graphql-request";import"graphql-tag";const y=i({factory:u({api:h,deps:{discoveryApi:d,fetchApi:p},factory:e=>new l(e)})}),E=r({defaultPath:"soundcheck",defaultTitle:"Soundcheck",name:"entity",routeRef:t(f),loader:()=>import("./esm/EntitySoundcheckContent-Dm1OGOA5.esm.js").then(e=>o(n.createElement(e.EntitySoundcheckContent,null)))}),P=g({name:"card",loader:()=>import("./esm/index-ChMeGQBh.esm.js").then(e=>o(n.createElement(e.EntitySoundcheckCard,null)))}),S=r({defaultPath:"soundcheck",defaultTitle:"Soundcheck",name:"group",routeRef:t(R),attachTo:{id:"page:catalog/group-details",input:"contents"},loader:()=>import("./esm/index-e9SWucyI.esm.js").then(e=>o(n.createElement(e.FixedGroupOverviewPage,null)))}),A=c({name:"SoundcheckRoutingPage",namespace:"soundcheck",routeRef:t(a),defaultPath:"/soundcheck",loader:()=>import("./esm/index-DNAl7tKw.esm.js").then(e=>o(n.createElement(e.RoutingPage,null)))}),x=c({name:"overview",namespace:"soundcheck",routeRef:t(k),defaultPath:"/soundcheck",loader:()=>import("./esm/index-e9SWucyI.esm.js").then(e=>o(n.createElement(e.OverviewPage,null)))}),C=s({title:"Soundcheck",icon:v,routeRef:t(a)});var w=m({id:"soundcheck",extensions:[A,x,y,E,P,S,C]});export{w as default};
 //# sourceMappingURL=alpha.esm.js.map

package/dist/esm/Card-Dj5kNp2Q.esm.js

@@ -0,0 +1,2 @@
+import{Link as h,InfoCard as C}from"@backstage/core-components";import{useRouteRef as p}from"@backstage/core-plugin-api";import{useEntity as S}from"@backstage/plugin-catalog-react";import{Divider as I}from"@material-ui/core";import L from"@material-ui/core/styles/makeStyles";import{SpotifyLicenseBanner as R}from"@spotify/backstage-plugin-core";import e,{Fragment as b}from"react";import{g as f,a as w,b as D,d as N}from"./CertificationSidebar-CVyVchB8.esm.js";import"@tanstack/react-query";import{b as A,a as P}from"./routes-DcGwdXHX.esm.js";import{A as x,a as B}from"./EmptyState-CFyDYjmm.esm.js";import"@backstage/catalog-model";import"react-router-dom";import{s as F,i as M}from"./license-CQErZDIh.esm.js";import"@material-ui/lab";const T=()=>e.createElement(e.Fragment,null,e.createElement(f,{hideDescription:!0}),e.createElement(f,{hideDescription:!0})),u=L(t=>({certificationWrapper:{display:"flex",justifyContent:"space-between",alignItems:"center"},infoCard:{display:"grid",gridRowGap:t.spacing(2)},emptyState:{overflow:"hidden"}})),o=({children:t,title:n})=>{const a=u();return e.createElement(C,{title:n},e.createElement("div",{className:a.infoCard},e.createElement(R,{inline:!0,backend:F,invalidLicenseMessage:M}),t))},W=(t,n)=>{var a,i;return(i=(a=t.find(l=>l.trackIds.some(m=>m===n)))==null?void 0:a.id)!=null?i:""},$=({title:t="Soundcheck"})=>{const{entity:n}=S(),a=u(),{data:i,isError:l,isLoading:m}=w(n),{data:c,isError:g,isLoading:E}=D(n),y=p(A),k=p(P);return l||g?e.createElement(o,{title:t},e.createElement(x,{severity:"error",title:"Error loading certifications"})):m||E||!i||!c?e.createElement(o,{title:t},e.createElement(T,null)):i.length?e.createElement(o,{title:t},i.map((r,v)=>{var s,d;return e.createElement(b,{key:r.program.name},e.createElement("div",{className:a.certificationWrapper,"data-testid":"soundcheck-track-row"},e.createElement(N,{key:r.program.id,name:r.program.name,badge:(s=r.highestLevel)==null?void 0:s.badge,trackType:(d=r.program)==null?void 0:d.type}),e.createElement(h,{to:r.program.type==="playlist"?k({playlistId:W(c,r.program.id),trackId:r.program.id}):y({trackId:r.program.id})},"View Details")),v<i.length-1?e.createElement(I,null):null)})):e.createElement(o,{title:t},e.createElement("div",{className:a.emptyState},e.createElement(B,null)))};export{$ as C};
+//# sourceMappingURL=Card-Dj5kNp2Q.esm.js.map

package/dist/esm/CertificationSidebar-CVyVchB8.esm.js

@@ -0,0 +1,2 @@
+import{stringifyEntityRef as p}from"@backstage/catalog-model";import{useApi as g,useRouteRef as b}from"@backstage/core-plugin-api";import{useQuery as u}from"@tanstack/react-query";import{s as E,c as F,d as U}from"./routes-DcGwdXHX.esm.js";import{Q as C,C as P,L as N,N as H,b as Q,F as y,A as W}from"./EmptyState-CFyDYjmm.esm.js";import{useEntity as G}from"@backstage/plugin-catalog-react";import{makeStyles as m,Tooltip as M,Typography as c,Box as $}from"@material-ui/core";import t from"react";import{Link as j}from"react-router-dom";import K from"classnames";import O from"@material-ui/icons/Schedule";import{useAutoUpdatingRelativeTime as _}from"@spotify/backstage-plugin-core";import{DateTime as S}from"luxon";import{MarkdownContent as f,Link as q}from"@backstage/core-components";import{Skeleton as o}from"@material-ui/lab";function J(e){const a=g(E),r=p(e);return u([C.Certifications,r],async()=>a.getAllCertifications(r))}function I(e,a){const r=g(E),l=p(e);return u([C.CertificationDetails,l,a],async()=>r.getCertificationDetailsForTrack(l,a),{enabled:!!a})}function V(e){const a=g(E),r=p(e);return u(["soundcheck/playlists",r],async()=>a.getPlaylists(r))}const X=m(e=>({root:{display:"inline-flex",alignItems:"center",gap:e.spacing(1)}})),T=({timestamp:e,description:a})=>{const r=X(),l=S.fromISO(e).toLocaleString(S.DATETIME_FULL),i=_(e),n=a?`${a}: ${i}`:void 0;return t.createElement("div",{className:r.root},t.createElement(M,{title:l},t.createElement(c,{variant:"caption","aria-label":n},i)),t.createElement(O,null))},x=m(e=>({root:{display:"grid",width:"100%",gridTemplateColumns:"auto 1fr auto",gridColumnGap:e.spacing(1),padding:e.spacing(1),alignItems:"center","&.selected":{backgroundColor:e.palette.action.hover},"&:hover, &:active, &:focus":{backgroundColor:e.palette.action.hover}}})),Y=({className:e,href:a,children:r})=>a?t.createElement(j,{to:a,className:e},r):t.createElement("div",{className:e},r),Z=({result:e,name:a,timestamp:r,selected:l=!1,href:i})=>{const n=x(),d=K(n.root,{selected:l});return t.createElement(Y,{href:i,className:d},t.createElement(P,{result:e}),t.createElement(c,{variant:"body2"},a),r?t.createElement(T,{timestamp:r}):null)},ee=m(e=>({noChecks:{padding:e.spacing(1)},checks:{padding:0,margin:0,flex:1,listStyle:"none"},checkItem:{borderBottom:`1px solid ${e.palette.divider}`,"&:last-of-type":{borderBottom:"0"},color:e.palette.text.primary,"& a":{color:e.palette.text.primary,textDecoration:"none"}}})),te=({checks:e,playlistId:a,trackId:r,checkId:l})=>{const i=ee(),n=b(F),d=b(U);return e.length?t.createElement("ul",{className:i.checks},e.map(s=>t.createElement("li",{key:s.id,className:i.checkItem},t.createElement(Z,{...s,selected:s.id===l,href:a?d({playlistId:a,trackId:r,checkId:s.id}):n({trackId:r,checkId:s.id})})))):t.createElement(c,{variant:"body2",className:i.noChecks},"No applicable checks at this level.")},L=m(e=>({wrapper:{backgroundColor:e.palette.type==="dark"?e.palette.grey[700]:e.palette.grey[100],color:e.palette.text.primary,fontSize:e.typography.caption.fontSize,minHeight:"auto",borderTop:`1px solid ${e.palette.divider}`,borderBottom:`1px solid ${e.palette.divider}`,padding:e.spacing(1),display:"grid",gridTemplateAreas:({badge:a})=>[`"${a?"badge":"title"} title"`,`"${a?".":"description"} description"`].join(" "),gridTemplateColumns:"auto 1fr"},title:{gridArea:"title",textTransform:"uppercase",fontWeight:"bold",color:e.palette.text.primary,fontSize:e.typography.body2.fontSize,paddingTop:e.spacing(.5),paddingBottom:e.spacing(.5),lineHeight:1},badge:{gridArea:"badge",marginRight:e.spacing(1)},description:{gridArea:"description",color:e.palette.text.primary,fontSize:e.typography.subtitle2.fontSize,"& p":{marginBlockStart:0,marginBlockEnd:0}}})),ae=e=>{const a=L({badge:e.badge});return t.createElement("div",{className:a.wrapper},e.badge?t.createElement(N,{className:a.badge,badge:e.badge}):null,t.createElement(c,{className:a.title},e.title),e.description?t.createElement(f,{className:a.description,content:e.description}):null)},R=({level:e,checkId:a,trackId:r,playlistId:l,isCampaign:i})=>{var n;return t.createElement(t.Fragment,null,!i&&t.createElement(ae,{badge:e.badge,title:e.name,description:e.description}),t.createElement(te,{checks:(n=e.checks)!=null?n:[],playlistId:l,trackId:r,checkId:a}))},A=({badge:e,className:a,size:r="small",trackType:l})=>{const i=a||"";let n=t.createElement(H,{className:i,size:r});return l==="campaign"?n=t.createElement(Q,{className:i,size:r}):e&&(n=t.createElement(N,{className:i,size:r,badge:e})),n},h=m(e=>({description:{padding:0,margin:0,display:"block","& p":{margin:0}},root:{padding:e.spacing(2),margin:0,display:"grid",gridTemplateColumns:"min-content auto",gridGap:e.spacing(2)},title:{fontSize:e.typography.pxToRem(18),fontWeight:700,lineHeight:1.235,marginBottom:"6px"},level:{textTransform:"uppercase",color:e.palette.text.secondary,fontWeight:700,letterSpacing:"1px"}}));function re({description:e,documentationUrl:a}){const r=h();return a?t.createElement("div",{className:r.description},t.createElement(f,{content:e}),t.createElement(q,{to:a},"Learn more")):t.createElement("div",{className:r.description},t.createElement(f,{content:e}))}const z=({name:e,badge:a,description:r,documentationUrl:l,trackType:i="standard"})=>{const n=h();return t.createElement("div",{className:n.root},t.createElement(A,{badge:a,trackType:i,size:"large"}),t.createElement("div",null,t.createElement(c,{className:n.title},e),r&&t.createElement(re,{description:r,documentationUrl:l})))},B=({hideDescription:e=!1})=>{const a=h();return t.createElement(y,null,t.createElement("div",{className:a.root},t.createElement(o,{width:44,height:44}),t.createElement("div",null,t.createElement(c,{variant:"caption",className:a.level},t.createElement(o,{width:100})),t.createElement(c,{variant:"h4",className:a.title},t.createElement(o,{width:300})),!e&&t.createElement(c,{variant:"body2"},t.createElement(o,null)))))},k=()=>{const e=x();return t.createElement(y,null,t.createElement("div",{className:e.root},t.createElement(o,{width:24,height:24}),t.createElement(c,{variant:"body2"},t.createElement(o,null)),t.createElement(o,{width:100,height:24})))},ne=()=>{const e=L({});return t.createElement(y,null,t.createElement("div",{className:e.wrapper},t.createElement(o,{className:e.title}),t.createElement(c,{className:e.description},t.createElement(o,null))))},w=()=>{const e=ie();return t.createElement("div",null,t.createElement(B,null),new Array(3).fill(null).map((a,r)=>t.createElement(t.Fragment,{key:`skeleton-level-${r}`},t.createElement(ne,null),t.createElement("ul",{className:e.checks},t.createElement(k,null),t.createElement(k,null),t.createElement(k,null)))))},ie=m(()=>({checks:{padding:0,margin:0,flex:1,listStyle:"none"}})),le=({playlistId:e,trackId:a,checkId:r})=>{var l;const{entity:i}=G(),{data:n,isLoading:d,isError:s}=I(i,a);if(s)return t.createElement("div",null,t.createElement($,{padding:2},t.createElement(W,{severity:"error",title:"Error loading certification"})));if(d||!a)return t.createElement(w,null);if(!n)return null;const D=n.program.type==="campaign";return t.createElement("div",null,t.createElement(z,{name:n.program.name,badge:(l=n.highestLevel)==null?void 0:l.badge,description:n.program.description,documentationUrl:n.program.documentationURL,trackType:n.program.type}),n==null?void 0:n.levels.map(v=>t.createElement(R,{key:v.ordinal,level:v,checkId:r,trackId:a,playlistId:e,isCampaign:D})))};export{A as C,T as R,J as a,V as b,w as c,z as d,R as e,le as f,B as g,I as u};
+//# sourceMappingURL=CertificationSidebar-CVyVchB8.esm.js.map