diff --git a/.changeset/catalog-import-export-api-snow-fight.md b/.changeset/catalog-import-export-api-snow-fight.md new file mode 100644 index 0000000000..dce9811f10 --- /dev/null +++ b/.changeset/catalog-import-export-api-snow-fight.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-import': patch +--- + +Export _api_ (Client, API, ref) from the catalog import plugin. diff --git a/.changeset/chilly-dodos-drop.md b/.changeset/chilly-dodos-drop.md new file mode 100644 index 0000000000..2af5255e70 --- /dev/null +++ b/.changeset/chilly-dodos-drop.md @@ -0,0 +1,6 @@ +--- +'@backstage/techdocs-common': patch +'@backstage/plugin-techdocs-backend': patch +--- + +1. Added option to use Azure Blob Storage as a choice to store the static generated files for TechDocs. diff --git a/.changeset/cost-insights-tricky-moles-grin.md b/.changeset/cost-insights-tricky-moles-grin.md new file mode 100644 index 0000000000..c35769e03c --- /dev/null +++ b/.changeset/cost-insights-tricky-moles-grin.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-cost-insights': minor +--- + +add alert hooks diff --git a/.changeset/cyan-kiwis-suffer.md b/.changeset/cyan-kiwis-suffer.md new file mode 100644 index 0000000000..b59b0e9a32 --- /dev/null +++ b/.changeset/cyan-kiwis-suffer.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Update `create-plugin` template to use the new composability API, by switching to exporting a single routable extension component. diff --git a/.changeset/empty-hairs-fetch.md b/.changeset/empty-hairs-fetch.md new file mode 100644 index 0000000000..aedeb8a853 --- /dev/null +++ b/.changeset/empty-hairs-fetch.md @@ -0,0 +1,13 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-catalog-react': patch +'@backstage/plugin-org': patch +--- + +Display owner and system as entity page links in the tables of the `api-docs` +plugin. + +Move `isOwnerOf` and `getEntityRelations` from `@backstage/plugin-catalog` to +`@backstage/plugin-catalog-react` and export it from there to use it by other +plugins. diff --git a/.changeset/little-cherries-hug.md b/.changeset/little-cherries-hug.md new file mode 100644 index 0000000000..5fb42cbdad --- /dev/null +++ b/.changeset/little-cherries-hug.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-backend': patch +--- + +Attempt to fix windows test errors in master diff --git a/.changeset/loud-walls-collect.md b/.changeset/loud-walls-collect.md new file mode 100644 index 0000000000..78356eef38 --- /dev/null +++ b/.changeset/loud-walls-collect.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Fixed module resolution of external libraries during backend development. Modules used to be resolved relative to the backend entrypoint, but are now resolved relative to each individual module. diff --git a/.changeset/lovely-panthers-peel.md b/.changeset/lovely-panthers-peel.md new file mode 100644 index 0000000000..512f0ebd3f --- /dev/null +++ b/.changeset/lovely-panthers-peel.md @@ -0,0 +1,8 @@ +--- +'@backstage/core': minor +--- + +Closes #3556 +The scroll bar of collapsed sidebar is now hidden without full screen. + +![image](https://user-images.githubusercontent.com/46953622/105390193-0bfd0080-5c19-11eb-8e86-2161bbe6e8d9.png) diff --git a/.changeset/neat-brooms-allow.md b/.changeset/neat-brooms-allow.md new file mode 100644 index 0000000000..a4c69b0945 --- /dev/null +++ b/.changeset/neat-brooms-allow.md @@ -0,0 +1,5 @@ +--- +'@backstage/config-loader': patch +--- + +Each piece of the configuration schema is now validated upfront, in order to produce more informative errors. diff --git a/.changeset/nice-bottles-battle.md b/.changeset/nice-bottles-battle.md new file mode 100644 index 0000000000..a688241caa --- /dev/null +++ b/.changeset/nice-bottles-battle.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-app-backend': patch +--- + +Failures to load the frontend configuration schema now throws an error that includes more context and instructions for how to fix the issue. diff --git a/.changeset/ninety-keys-serve.md b/.changeset/ninety-keys-serve.md new file mode 100644 index 0000000000..d15884b1c4 --- /dev/null +++ b/.changeset/ninety-keys-serve.md @@ -0,0 +1,5 @@ +--- +'@backstage/core': patch +--- + +Add a `prop` union for `SignInPage` that allows it to be used for just a single provider, with inline errors, and optionally with automatic sign-in. diff --git a/.changeset/orange-pets-whisper.md b/.changeset/orange-pets-whisper.md new file mode 100644 index 0000000000..e96c210e43 --- /dev/null +++ b/.changeset/orange-pets-whisper.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Add check for outdated/duplicate packages to yarn start diff --git a/.changeset/poor-ligers-flow.md b/.changeset/poor-ligers-flow.md new file mode 100644 index 0000000000..1c3a8a742b --- /dev/null +++ b/.changeset/poor-ligers-flow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-backend': patch +--- + +Throw `NotAllowedError` when registering locations with entities of disallowed kinds diff --git a/.changeset/pretty-melons-prove.md b/.changeset/pretty-melons-prove.md new file mode 100644 index 0000000000..7048757e5a --- /dev/null +++ b/.changeset/pretty-melons-prove.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-fossa': minor +--- + +Port FOSSA plugin to new extension model. + +If you are using the FOSSA plugin adjust the plugin import from `plugin` to +`fossaPlugin` and replace `` with ``. diff --git a/.changeset/shaggy-dingos-suffer.md b/.changeset/shaggy-dingos-suffer.md new file mode 100644 index 0000000000..c1e200b701 --- /dev/null +++ b/.changeset/shaggy-dingos-suffer.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-tech-radar': patch +--- + +Fix mapping RadarEntry and Entry for moved and url attributes +Fix clicking of links in the radar legend diff --git a/.changeset/shiny-rabbits-unite.md b/.changeset/shiny-rabbits-unite.md new file mode 100644 index 0000000000..dca9ee0dd9 --- /dev/null +++ b/.changeset/shiny-rabbits-unite.md @@ -0,0 +1,5 @@ +--- +'@backstage/core': patch +--- + +Fix check that determines whether popup was closed or the messaging was misconfigured. diff --git a/.changeset/sour-gorillas-fail.md b/.changeset/sour-gorillas-fail.md new file mode 100644 index 0000000000..c6394ed76e --- /dev/null +++ b/.changeset/sour-gorillas-fail.md @@ -0,0 +1,23 @@ +--- +'@backstage/plugin-scaffolder-backend': patch +--- + +# Repo visibility for GitLab and BitBucket repos + +**NOTE: This changes default repo visibility from `private` to `public` for GitLab and BitBucket** which +is consistent with the GitHub default. If you were counting on `private` visibility, you'll need to update +your scaffolder config to use `private`. + +This adds repo visibility feature parity with GitHub for GitLab and BitBucket. + +To configure the repo visibility, set scaffolder._type_.visibility as in this example: + +```yaml +scaffolder: + github: + visibility: private # 'public' or 'internal' or 'private' (default is 'public') + gitlab: + visibility: public # 'public' or 'internal' or 'private' (default is 'public') + bitbucket: + visibility: public # 'public' or 'private' (default is 'public') +``` diff --git a/.changeset/tidy-news-perform.md b/.changeset/tidy-news-perform.md new file mode 100644 index 0000000000..055f051da7 --- /dev/null +++ b/.changeset/tidy-news-perform.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-user-settings': patch +--- + +Keep the Pin Sidebar setting visible on small screens. diff --git a/.changeset/wet-suits-live.md b/.changeset/wet-suits-live.md new file mode 100644 index 0000000000..27b8df8a84 --- /dev/null +++ b/.changeset/wet-suits-live.md @@ -0,0 +1,20 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-catalog-import': patch +'@backstage/plugin-circleci': patch +'@backstage/plugin-cloudbuild': patch +'@backstage/plugin-github-actions': patch +'@backstage/plugin-jenkins': patch +'@backstage/plugin-kafka': patch +'@backstage/plugin-lighthouse': patch +'@backstage/plugin-org': patch +'@backstage/plugin-register-component': patch +'@backstage/plugin-rollbar': patch +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-search': patch +'@backstage/plugin-sentry': patch +'@backstage/plugin-techdocs': patch +'@backstage/dev-utils': patch +--- + +Switch dependency from `@backstage/plugin-catalog` to `@backstage/plugin-catalog-react`. diff --git a/.changeset/wild-cows-exercise.md b/.changeset/wild-cows-exercise.md new file mode 100644 index 0000000000..cbc347888f --- /dev/null +++ b/.changeset/wild-cows-exercise.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-catalog': minor +'@backstage/create-app': minor +--- + +`@backstage/plugin-catalog` stopped exporting hooks and helpers for other +plugins. They are migrated to `@backstage/plugin-catalog-react`. +Change both your dependencies and imports to the new package. diff --git a/.github/styles/vocab.txt b/.github/styles/vocab.txt index 425e6eea6f..2991a6babd 100644 --- a/.github/styles/vocab.txt +++ b/.github/styles/vocab.txt @@ -130,6 +130,7 @@ middleware minikube Minikube misconfiguration +misconfigured misgendering mkdocs Mkdocs @@ -217,6 +218,7 @@ Spotify sqlite squidfunk src +stdout stefanalund subkey subtree @@ -257,6 +259,7 @@ Voi Wealthsimple Weaveworks Webpack +winston www WWW xyz diff --git a/.github/workflows/master-win.yml b/.github/workflows/master-win.yml index ca402c48d5..e6a9bf158b 100644 --- a/.github/workflows/master-win.yml +++ b/.github/workflows/master-win.yml @@ -1,6 +1,7 @@ name: Master Build Windows on: + workflow_dispatch: push: branches: [master] diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml index 68b08224ac..0a615b7c82 100644 --- a/.github/workflows/master.yml +++ b/.github/workflows/master.yml @@ -1,6 +1,7 @@ name: Main Master Build on: + workflow_dispatch: push: branches: [master] diff --git a/.tugboat/config.yml b/.tugboat/config.yml index 2be043cd78..b8c3c127c8 100644 --- a/.tugboat/config.yml +++ b/.tugboat/config.yml @@ -10,6 +10,8 @@ services: - echo "yarn --cwd ${TUGBOAT_ROOT} start-backend --config ${TUGBOAT_ROOT}/app-config.yaml --config ${TUGBOAT_ROOT}/.tugboat/tugboat.app-config.production.yaml" >> /etc/service/node/run - chmod +x /etc/service/node/run build: + - yarn install --frozen-lockfile - yarn workspace example-app build - update: - - yarn install + start: + # wget the endpoint. Will retry every 2 seconds. 30 retries = 1m for service to come up. Plenty. + - wget -O /dev/null -o /dev/null --tries=30 --timeout=5 --retry-connrefused http://localhost:7000 diff --git a/app-config.yaml b/app-config.yaml index 010c9b9710..763dd0c258 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -80,7 +80,7 @@ techdocs: generators: techdocs: 'docker' # Alternatives - 'local' publisher: - type: 'local' # Alternatives - 'googleGcs' or 'awsS3'. Read documentation for using alternatives. + type: 'local' # Alternatives - 'googleGcs' or 'awsS3' or 'azureBlobStorage'. Read documentation for using alternatives. sentry: organization: my-company @@ -243,6 +243,7 @@ scaffolder: baseUrl: https://gitlab.com token: $env: GITLAB_TOKEN + visibility: public # or 'internal' or 'private' azure: baseUrl: https://dev.azure.com/{your-organization} api: @@ -255,6 +256,7 @@ scaffolder: $env: BITBUCKET_USERNAME token: $env: BITBUCKET_TOKEN + visibility: public # or or 'private' auth: environment: development diff --git a/docs/architecture.drawio b/docs/architecture.drawio new file mode 100644 index 0000000000..dbe2a5f6fa --- /dev/null +++ b/docs/architecture.drawio @@ -0,0 +1 @@ +7VpLc6M4EP41PiaFBLbh6LxmLlubSqZ2Z+amBQVUBYgScmzPrx9hJIMQGJzEhtTOxUaNnp++bnU3mtm3yfYLQ1n0Fw1wPINWsJ3ZdzMIAfQ88VdIdqXEs2EpCBkJZKVK8Ex+YSm0pHRNApxrFTmlMSeZLvRpmmKfazLEGN3o1V5orI+aoRAbgmcfxab0XxLwqJS6cFnJv2ISRmpksJALTpCqLFeSRyigm5rIvp/Zt4xSXj4l21scF+ApXMp2Dx1vDxNjOOVDGvwk7Nv6n4erTfLNgzcr9/HvH5sru+zlFcVrueBVlsn58p0CId+QJEapKN3I+phxvO2cCDgsT/AC0wRzthNVZANXAiIZARayvKnwPdSJathCRwqR3NPw0HW1bPEgV34CCs4gFBhdpwEu+rEEEJuIcPycIb94uxHkF7KIJ2LcOzAUp+4t6QQP6uA5JnZt0J0NOduEzsAtFMBlnXhIxUX/qerWqXxyFv2EsuFFCQVNvbrfcpzmhKb5aMRyjsPo6CgCZ1xqKSbVMHyia46f8MtEEQSuDqEzNoLgsyPYRkLQpsrnw9CA8IHRVKhyIKSP8Tok6buPy7cgBVtsnHVRG2eSqwOOC1ELfqZz05ucZh6HDyygjh8cFz8wPdPWB+C0COga+I3voPRosM5AAMamoNUN4UQRbPjJYGQOgoWBoAGcOGhXRRgvSn6M8pz4OlYByqM9rhVwODBC+iGwiWHpmvl4wJZzxEJ8rMOOgKUG9LwFaCVjOEacvOqLaENfjvBIiVjeYZu9xjZbjf0rlykbwVrCQPWjGtqNhuWyjYb7vT+s8h10WL6fDmKf2e67VLN94UdRuIZzVb7b1t/e7VRpS/h31Yl4rjcTxapVUVCNzs63oXQblW9LnW/eqXRTNs7R+3EvzD7zRJy6R9F/IF42VgKmV1uciCxF8dSh7D8ZLxx2ms7F6baw1aQdt2iFLXuWQ1DGIxpSsXv3lbTTwvYZ2MnYSm9MW3lg1k63ne81lmA+zFoKwqBdrVpWVMiPzLcxzsI6bVq2Vl88lBP4UMsNB+Sga2px+A5j1d3HooBiEqaFNglGYiYEhaUhPopX8kVCgmCvBKKPrOg52YbFZ6/r8ksTLP+LbhXr9x/CgH0t8L1JKfcjKX+JSfb1zFbtqunvt+SMnBaqw7MZtXnr+TDpoLORj3THTumaIdPkIWy4Ke7IcTs0w4xVRibrmzSV2DWV+LLwfb7MEVhMTYvbHeVpYzgxNbZND1mo8QPyOZW9TxDDiemybWbRDeSGRhkqlBgSZczOHAsobvQGA+VZMFqizr2eL4ED3fJ3sdTY8eY8SiMfA5r0OXMiRV3w+rCs7ttj0jdm/ZafI+tnW7MRydtkWTNqGErXnuzhR8WxDTdq2RPHNr0u7wJxrG1eGjIU508cW23GaHEs+N9uVNellJ1uWj5+Y2bFtRt1U7ZUuOq+sX3/Gw== \ No newline at end of file diff --git a/docs/auth/index.md b/docs/auth/index.md index cf468c7bb7..a8ddf17c6b 100644 --- a/docs/auth/index.md +++ b/docs/auth/index.md @@ -86,7 +86,8 @@ to a `guest` identity for all users, without any ID token. To enable sign-in, a `SignInPage` needs to be configured, which in turn has to supply a user to the app. The `@backstage/core` package provides a basic sign-in page that allows both the user and the app developer to choose between a couple of different -sign-in methods. +sign-in methods, or to designate a single provider that may also be logged in to +automatically. ## Further Reading diff --git a/docs/features/kubernetes/installation.md b/docs/features/kubernetes/installation.md index 9e531de655..35a027df62 100644 --- a/docs/features/kubernetes/installation.md +++ b/docs/features/kubernetes/installation.md @@ -7,8 +7,8 @@ description: Installing Kubernetes plugin into Backstage The Kubernetes feature is a plugin to Backstage, and it is exposed as a tab when viewing entities in the software catalog. -If you haven't setup Backstage already, start -[here](../../getting-started/index.md). +If you haven't setup Backstage already, read the +[Getting Started](../../getting-started/index.md). ## Adding the Kubernetes frontend plugin @@ -111,7 +111,7 @@ Backstage app. ## Running Backstage locally Start the frontend and the backend app by -[running backstage locally](../../getting-started/running-backstage-locally.md). +[running Backstage locally](../../getting-started/running-backstage-locally.md). ## Configuration diff --git a/docs/features/search/README.md b/docs/features/search/README.md index 0b13b47979..cd971d9d41 100644 --- a/docs/features/search/README.md +++ b/docs/features/search/README.md @@ -67,7 +67,7 @@ more to come... - As a contributor I should be able to integrate plugin data to the indexing process of Backstage Search by using the standardized API. - As a software engineer I should be able to search for all content (for - example, entities, metadata, documentation) in backstage search. + example, entities, metadata, documentation) in Backstage search. more to come... diff --git a/docs/features/software-templates/extending/create-your-own-templater.md b/docs/features/software-templates/extending/create-your-own-templater.md index 37e68c4153..28769d77e1 100644 --- a/docs/features/software-templates/extending/create-your-own-templater.md +++ b/docs/features/software-templates/extending/create-your-own-templater.md @@ -86,7 +86,7 @@ follows: _note_ Currently the templaters that we provide are basically Docker action containers that are run on top of the skeleton folder. This keeps dependencies -to a minimum for running backstage scaffolder, but you don't _have_ to use +to a minimum for running Backstage scaffolder, but you don't _have_ to use Docker. You can `pip install cookiecutter` to run it locally in your backend. You could create your own templater that spins up an EC2 instance and downloads the folder and does everything using an AMI if you want. It's entirely up to diff --git a/docs/features/software-templates/index.md b/docs/features/software-templates/index.md index 1034ffef0f..12ce6e3ed3 100644 --- a/docs/features/software-templates/index.md +++ b/docs/features/software-templates/index.md @@ -39,13 +39,12 @@ internally. ![Enter some variables](../../assets/software-templates/template-picked.png) After filling in these variables, you'll get some more fields to fill out which -are required for backstage usage: the owner (which is a `user` in the backstage -system), the `storePath` (which right now must be a GitHub Organisation or -GitHub user and a non-existing GitHub repository name in the format -`organisation/reponame`), and a GitHub team or user account which should be -granted admin access to the repository. +are required for Backstage usage: the owner (which is a `user` in the backstage +system), and the `storePath` which is a destination URL to create for the +provider, for instance `https://github.com/backstage/my-new-repository`, or +`https://gitlab.com/myorg/myrepo`. -![Enter backstage vars](../../assets/software-templates/template-picked-2.png) +![Enter Backstage vars](../../assets/software-templates/template-picked-2.png) ### Run! diff --git a/docs/features/techdocs/README.md b/docs/features/techdocs/README.md index c43d6d978d..f81f41668d 100644 --- a/docs/features/techdocs/README.md +++ b/docs/features/techdocs/README.md @@ -108,12 +108,12 @@ providers are used. | GitLab | Yes ✅ | | GitLab Enterprise | Yes ✅ | -| File Storage Provider | Support Status | -| --------------------------------- | ----------------------------------------------------------------- | -| Local Filesystem of Backstage app | Yes ✅ | -| Google Cloud Storage (GCS) | Yes ✅ | -| Amazon Web Services (AWS) S3 | Yes ✅ | -| Azure Storage | No ❌ [#3938](https://github.com/backstage/backstage/issues/3938) | +| File Storage Provider | Support Status | +| --------------------------------- | -------------- | +| Local Filesystem of Backstage app | Yes ✅ | +| Google Cloud Storage (GCS) | Yes ✅ | +| Amazon Web Services (AWS) S3 | Yes ✅ | +| Azure Blob Storage | Yes ✅ | [Reach out to us](#feedback) if you want to request more platforms. diff --git a/docs/features/techdocs/architecture.md b/docs/features/techdocs/architecture.md index 92cd78b071..8d25b4047f 100644 --- a/docs/features/techdocs/architecture.md +++ b/docs/features/techdocs/architecture.md @@ -12,32 +12,31 @@ out-of-the box experience. TechDocs Architecture diagram > Note: See below for our recommended deployment architecture which takes care -> of stability, scalability and speed. +> of stability, scalability and speed. Also look at the +> [HOW TO migrate guide](how-to-guides.md#how-to-migrate-from-techdocs-basic-to-recommended-deployment-approach). When you open a TechDocs site in Backstage, the [TechDocs Reader](./concepts.md#techdocs-reader) makes a request to -`techdocs-backend` with the entity ID and the path of the current page you are -looking at. In response, it receives the static files (HTML, CSS, JSON, etc.) to -render on the page in TechDocs/Backstage. +`techdocs-backend` plugin with the entity ID and the path of the current page +you are looking at. In response, it receives the static files (HTML, CSS, JSON, +etc.) to render on the page in TechDocs/Backstage. The static files consist of HTML, CSS and Images generated by MkDocs. We remove all the JavaScript before adding them to Backstage for security reasons. And -there are some additional techdocs metadata JSON files that TechDocs needs to -render a site. +there is an additional `techdocs_metadata.json` file that TechDocs needs to +render a site. It's important that you use either +[techdocs-cli](https://github.com/backstage/techdocs-cli) or +[techdocs-container](https://github.com/backstage/techdocs-container) to +generate the docs for the expected output. The TechDocs Reader then applies a list of "Transformers" (see [Concepts](./concepts.md)) which modify the generated static HTML files for a number of use cases e.g. Remove certain headers, filter out some HTML tags, etc. Currently, we use the Backstage server's (or techdocs-backend's) local file -system to store the generated files. Publishing to an external storage system -(AWS S3, GCS, etc.) is also possible, but has not been implemented yet. - -A word about `UrlReader` vs Git preparer - Right now, we have two ways to fetch -files from its source repository for docs site generation. 1. By using Git -and 2. By directly using Source control (GitHub, Azure, etc.) APIs. This work is -heavily in progress. Please reach out to us on Discord in the #docs-like-code -channel to talk about it. +system to store the generated files. However, it's ideal to use an external +storage system (e.g. AWS S3, GCS or Azure Blob Storage). Read more in +[using cloud storage](using-cloud-storage.md). ## Recommended deployment @@ -49,22 +48,16 @@ The key difference in the recommended deployment approach is where the docs are built. We assume each entity lives in a repository somewhere (GitHub, GitLab, etc.). We -recommend using a CI/CD pipeline with the repository that has a dedicated -step/job to generate docs for TechDocs. The generated static files are then -stored in a cloud storage solution of your choice. -[Track progress here](https://github.com/backstage/backstage/issues/3096). +recommend [using a CI/CD pipeline](configuring-ci-cd.md) with the repository +that has a dedicated step/job to generate docs for TechDocs. The generated +static files are then [stored in a cloud storage](using-cloud-storage.md) +solution of your choice. Similar to how it is done in the Basic setup, the TechDocs Reader requests `techdocs-backend` plugin for the docs site. `techdocs-backend` then requests your configured storage solution for the necessary files and returns them to TechDocs Reader. -We will provide instructions, scripts and/or templates (e.g. GitHub Actions) to -generate docs in your CI/CD system. -[Track progress here.](https://github.com/backstage/backstage/issues/3400) You -will be able to use `techdocs-cli` to generate docs and publish the generated -docs site files to your cloud storage system. - Note about caching: We have noticed internally that some storage providers can be quite slow, which is why we are recommending a cache that sits between the TechDocs Reader and the Storage. @@ -97,7 +90,7 @@ permissions to publish the generated docs site files. **Q: Why do you have separate "basic" and "recommended" deployment approaches?** A: The basic or out-of-the-box setup is what you get when you create a new app -or do a git clone of the Backstage repository. We want the first experience to +or do a `git clone` of the Backstage repository. We want the first experience to _just work magically_ so that you can have your first experience with TechDocs which is smooth. However, if you decide to deploy Backstage/TechDocs for production use, the basic setup would work but there are going to be downsides @@ -109,19 +102,21 @@ and we welcome such "Alternative" ideas from the community. **Q: Why don't you recommend techdocs-backend local filesystem to serve static files?** -A: It would make scaling a Backstage instance harder. Think about the case where -we have distributed Backstage deployments. Using a separate file storage system -for TechDocs makes it easier to do some operations like delete a docs site and -wipe its contents. +A: It makes scaling a Backstage instance harder. Think about the case where we +have distributed Backstage deployments (e.g. multiple Kubernetes pods of your +Backstage app). Using a separate/central file storage system for TechDocs is +necessary to make sure sites are persistent when the servers/pods are restarted +and avoid duplicating sites per instance. By having an external storage, we are +making it easier to do some operations like delete a docs site or wipe its +contents. **Q: Why aren't docs built on the fly i.e. when users visits a page, generate docs site in real-time?** -A: Generating the content from Markdown on the fly is not optimal (although that -is how the basic out-of-the-box setup is implemented). Storage solutions act as -a cache for the generated static content. TechDocs is also currently built on -MkDocs which does not allow us to generate docs per-page, so we would have to -build all docs for a entity on every request. +A: Generating the content from Markdown on the fly is not optimal. Storage +solutions act as a cache for the generated static content. TechDocs is also +currently built on MkDocs which does not allow us to generate docs per-page, so +we would have to build all docs for a entity on every request. **Q. Can you use the techdocs plugin without the techdocs-backend plugin?** @@ -146,21 +141,5 @@ We currently depend on MkDocs to parse doc sites written in Markdown. And we store the generated static assets and re-use it later to render in Backstage. A better (futuristic) approach will be to directly parse whatever type of source files you have in your docs repository and directly render in Backstage in -real-time. - -# Features status - -Status of all the features mentioned above. - -**In place ✅** - -- Basic setup with techdocs-backend file server as storage. -- Basic setup with cloud storage solution. -- `techdocs-cli` is able to generate docs in CI/CD environment. -- `techdocs-cli` is able to publish docs site to any storage. - -**Work in progress 🚧** - -**Not implemented yet ❌** - -- `techdocs-backend` integration with Backstage access control management. +real-time. You can read more in this +[RFC - Simplifying TechDocs Frontend Architecture](https://github.com/backstage/backstage/issues/3998). diff --git a/docs/features/techdocs/configuration.md b/docs/features/techdocs/configuration.md index 1580abe69e..bb44050dcf 100644 --- a/docs/features/techdocs/configuration.md +++ b/docs/features/techdocs/configuration.md @@ -44,7 +44,7 @@ techdocs: # or you want to use External storage providers like Google Cloud Storage, AWS S3, etc. publisher: - # techdocs.publisher.type can be - 'local' or 'googleGcs' or 'awsS3' (azureStorage to be available in future). + # techdocs.publisher.type can be - 'local' or 'googleGcs' or 'awsS3' or 'azureBlobStorage'. # When set to 'local', techdocs-backend will create a 'static' directory at its root to store generated documentation files. # When set to 'googleGcs', techdocs-backend will use a Google Cloud Storage Bucket to store generated documentation files. # When set to 'awsS3', techdocs-backend will use an Amazon Web Service (AWS) S3 bucket to store generated documentation files. @@ -84,4 +84,21 @@ techdocs: # https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/setting-region.html region: $env: AWS_REGION + + # Required when techdocs.publisher.type is set to 'azureBlobStorage'. Skip otherwise. + + azureBlobStorage: + # (Required) Azure Blob Storage Container Name + containerName: 'techdocs-storage' + + # (Required) An account name is required to write to a storage blob container. + # https://docs.microsoft.com/en-us/rest/api/storageservices/authorize-with-shared-key + credentials: + accountName: + $env: TECHDOCS_AZURE_BLOB_STORAGE_ACCOUNT_NAME + # (Optional) An account key is required to write to a storage container. + # If missing,AZURE_TENANT_ID, AZURE_CLIENT_ID, AZURE_CLIENT_SECRET environment variable will be used. + # https://docs.microsoft.com/en-us/azure/storage/common/storage-auth?toc=/azure/storage/blobs/toc.json + accountKey: + $env: TECHDOCS_AZURE_BLOB_STORAGE_ACCOUNT_KEY ``` diff --git a/docs/features/techdocs/getting-started.md b/docs/features/techdocs/getting-started.md index e1ddfd23f9..5147e17aaa 100644 --- a/docs/features/techdocs/getting-started.md +++ b/docs/features/techdocs/getting-started.md @@ -158,7 +158,7 @@ techdocs: requestUrl: http://localhost:7000/api/techdocs/ ``` -`requestUrl` is used by TechDocs frontend plugin to discover techdocs-backend +`requestUrl` is used by TechDocs frontend plugin to discover `techdocs-backend` endpoints, and the `storageUrl` is another endpoint in `techdocs-backend` which acts as a middleware between TechDocs and the storage (where the static generated docs site are stored). These default values should mostly work for @@ -180,8 +180,8 @@ pipeline, and are being stored in a storage somewhere. When `techdocs.builder` is set to `'external'`, TechDocs becomes more or less a read-only experience where it serves static files from a storage containing all -the generated documentation. Read more in the "Basic" and "Recommended" setup of -TechDocs [here](architecture.md) +the generated documentation. Read more in the "Basic" and "Recommended" sections +of the [TechDocs Architecture](architecture.md). ### Choosing storage (publisher) @@ -190,9 +190,9 @@ fetch the sites from. This is managed by a [Publisher](./concepts.md#techdocs-publisher). Examples: Google Cloud Storage, Amazon S3, or local filesystem of Backstage server. -It is okay to use the local filesystem in a "Basic" setup when you are trying -out Backstage for the first time. Using Cloud Storage is documented -[here](./using-cloud-storage.md). +It is okay to use the local filesystem in a "basic" setup when you are trying +out Backstage for the first time. At a later time, review +[Using Cloud Storage](./using-cloud-storage.md). ```yaml techdocs: @@ -229,23 +229,23 @@ environment is compatible with techdocs. You will have to install the `mkdocs` and `mkdocs-techdocs-core` package from pip, as well as `graphviz` and `plantuml` from your OS package manager (e.g. apt). See our -[Dockerfile](https://github.com/backstage/techdocs-container/blob/main/Dockerfile) -for the latest requirements. You should be trying to match your Dockerfile with -this one. +[`Dockerfile`](https://github.com/backstage/techdocs-container/blob/main/Dockerfile) +for the latest requirements. You should be trying to match your `Dockerfile` +with this one. Note: We recommend Python version 3.7 or higher. -Caveat: Please install the `mkdocs-techdocs-core` package after all other Python -packages. The order is important to make sure we get correct version of some of -the dependencies. For example, we want `Markdown` version to be -[3.2.2](https://github.com/backstage/backstage/blob/f9f70c225548017b6a14daea75b00fbd399c11eb/packages/techdocs-container/techdocs-core/requirements.txt#L11). -You can also explicitly install `Markdown==3.2.2` after installing all other -Python packages. +> Caveat: Please install the `mkdocs-techdocs-core` package after all other +> Python packages. The order is important to make sure we get correct version of +> some of the dependencies. For example, we want `Markdown` version to be +> [3.2.2](https://github.com/backstage/backstage/blob/f9f70c225548017b6a14daea75b00fbd399c11eb/packages/techdocs-container/techdocs-core/requirements.txt#L11). +> You can also explicitly install `Markdown==3.2.2` after installing all other +> Python packages. ## Running Backstage locally Start the frontend and the backend app by -[running backstage locally](../../getting-started/running-backstage-locally.md). +[running Backstage locally](../../getting-started/running-backstage-locally.md). Open your browser at [http://localhost:3000/docs/](http://localhost:3000/docs/) to see all your documentation sites. diff --git a/docs/features/techdocs/how-to-guides.md b/docs/features/techdocs/how-to-guides.md index b32ff40589..2cb769b0e3 100644 --- a/docs/features/techdocs/how-to-guides.md +++ b/docs/features/techdocs/how-to-guides.md @@ -5,6 +5,36 @@ sidebar_label: "HOW TO" guides description: TechDocs "HOW TO" guides related to TechDocs --- +## How to migrate from TechDocs Basic to Recommended deployment approach? + +The main difference between TechDocs Basic and Recommended deployment approach +is where the docs are generated and stored. In Basic or the out-of-the-box +setup, docs are generated and stored at the server running your Backstage +instance. But the recommended setup is to generate docs on CI/CD and store the +generated sites to an external storage (e.g. AWS S3 or GCS). TechDocs in your +Backstage instance should turn into read-only mode. Read more details and the +benefits in the [TechDocs Architecture](architecture.md). + +Here are the steps needed to switch from the Basic to Recommended setup - + +### 1. Prepare a cloud storage + +Choose a cloud storage provider like AWS, Google Cloud or Microsoft Azure. +Follow the detailed instructions for +[using cloud storage](using-cloud-storage.md) in TechDocs. + +### 2. Publish to storage from CI/CD + +Start publishing your TechDocs sites from the CI/CD workflow of each repository +containing the source markdown files. Read the detailed instructions for +[configuring CI/CD](configuring-ci-cd.md). + +### 3. Switch TechDocs to read-only mode + +In your Backstage instance's `app-config.yaml`, set `techdocs.builder` from +`'local'` to `'external'`. By doing this, TechDocs will not try to generate +docs. Look at [TechDocs configuration](configuration.md) for reference. + ## How to use URL Reader in TechDocs Prepare step? If TechDocs is configured to generate docs, it will first download the diff --git a/docs/features/techdocs/using-cloud-storage.md b/docs/features/techdocs/using-cloud-storage.md index 21206dede5..de2d505c87 100644 --- a/docs/features/techdocs/using-cloud-storage.md +++ b/docs/features/techdocs/using-cloud-storage.md @@ -195,3 +195,94 @@ Your Backstage app is now ready to use AWS S3 for TechDocs, to store and read the static generated documentation files. When you start the backend of the app, you should be able to see `techdocs info Successfully connected to the AWS S3 bucket` in the logs. + +## Configuring Azure Blob Storage Container with TechDocs + +Follow the +[official Azure Blob Storage documentation](https://docs.microsoft.com/en-us/azure/storage/common/storage-auth?toc=/azure/storage/blobs/toc.json) +for the latest instructions on the following steps involving Azure Blob Storage. + +**1. Set `techdocs.publisher.type` config in your `app-config.yaml`** + +Set `techdocs.publisher.type` to `'azureBlobStorage'`. + +```yaml +techdocs: + publisher: + type: 'azureBlobStorage' +``` + +**2. Create an Azure Blob Storage Container** + +Create a dedicated container for TechDocs sites. +[Refer to the official documentation](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-quickstart-blobs-portal). + +TechDocs will publish documentation to this container and will fetch files from +here to serve documentation in Backstage. Note that the container names are +globally unique. + +Set the config `techdocs.publisher.azureBlobStorage.containerName` in your +`app-config.yaml` to the name of the container you just created. + +```yaml +techdocs: + publisher: + type: 'azureBlobStorage' + azureBlobStorage: + containerName: 'name-of-techdocs-storage-container' +``` + +**3a. (Recommended) Authentication using environment variable** + +Set the config `techdocs.publisher.azureBlobStorage.credentials.accountName` in +your `app-config.yaml` to the your account name. + +The storage blob client will automatically use the environment variable +`AZURE_TENANT_ID`, `AZURE_CLIENT_ID`, `AZURE_CLIENT_SECRET` to authenticate with +Azure Blob Storage. +[Steps to create the service where the variables can be retrieved from](https://docs.microsoft.com/en-us/azure/active-directory/develop/howto-create-service-principal-portal). + +https://docs.microsoft.com/en-us/azure/storage/common/storage-auth-aad for more +details. + +```yaml +techdocs: + publisher: + type: 'azureBlobStorage' + azureBlobStorage: + containerName: 'name-of-techdocs-storage-bucket' + credentials: + accountName: + $env: TECHDOCS_AZURE_BLOB_STORAGE_ACCOUNT_NAME +``` + +**3b. Authentication using app-config.yaml** + +If you do not prefer (3a) and optionally like to use a service account, you can +follow these steps. + +To get credentials, access the Azure Portal and go to "Settings > Access Keys", +and get your Storage account name and Primary Key. +https://docs.microsoft.com/en-us/rest/api/storageservices/authorize-with-shared-key +for more details. + +```yaml +techdocs: + publisher: + type: 'azureBlobStorage' + azureBlobStorage: + containerName: 'name-of-techdocs-storage-bucket' + credentials: + accountName: + $env: TECHDOCS_AZURE_BLOB_STORAGE_ACCOUNT_NAME + accountKey: + $env: TECHDOCS_AZURE_BLOB_STORAGE_ACCOUNT_KEY +``` + +**4. That's it!** + +Your Backstage app is now ready to use Azure Blob Storage for TechDocs, to store +and read the static generated documentation files. When you start the backend of +the app, you should be able to see +`techdocs info Successfully connected to the Azure Blob Storage container` in +the logs. diff --git a/docs/getting-started/development-environment.md b/docs/getting-started/development-environment.md index b5ff3885b3..01fd7bdc24 100644 --- a/docs/getting-started/development-environment.md +++ b/docs/getting-started/development-environment.md @@ -31,7 +31,7 @@ $ yarn start This should open a local instance of Backstage in your browser, otherwise open one of the URLs printed in the terminal. -By default, backstage will start on port 3000, however you can override this by +By default, Backstage will start on port 3000, however you can override this by setting an environment variable `PORT` on your local machine. e.g. `export PORT=8080` then running `yarn start`. Or `PORT=8080 yarn start`. diff --git a/docs/plugins/create-a-plugin.md b/docs/plugins/create-a-plugin.md index bcb86024fd..4ccd48f17e 100644 --- a/docs/plugins/create-a-plugin.md +++ b/docs/plugins/create-a-plugin.md @@ -9,8 +9,9 @@ A Backstage Plugin adds functionality to Backstage. ## Create a Plugin To create a new plugin, make sure you've run `yarn install` and installed -dependencies, then run the following on your command line (invoking the -`backstage-cli`). +dependencies, then run the following on your command line (a shortcut to +invoking the [`backstage-cli create-plugin`](../cli/commands.md#create-plugin)) +from the root of your project. ```bash yarn create-plugin diff --git a/docs/plugins/integrating-plugin-into-service-catalog.md b/docs/plugins/integrating-plugin-into-service-catalog.md index 51d2331140..01de779635 100644 --- a/docs/plugins/integrating-plugin-into-service-catalog.md +++ b/docs/plugins/integrating-plugin-into-service-catalog.md @@ -59,7 +59,7 @@ accordingly inside `Router.tsx`) ### Import and use router in the APP In the `app/src/components/catalog/EntityPage.tsx` (app === your folder, -containing backstage app) import your created Router: +containing Backstage app) import your created Router: ```tsx import { Router as MyPluginRouter } from '@backstage/plugin-my-plugin; diff --git a/docs/plugins/observability.md b/docs/plugins/observability.md new file mode 100644 index 0000000000..8b6668606f --- /dev/null +++ b/docs/plugins/observability.md @@ -0,0 +1,54 @@ +--- +id: observability +title: Observability +# prettier-ignore +description: Adding Observability to Your Plugin +--- + +This article briefly describes the observability options that are available to a +Backstage integrator. + +## Google Analytics + +There is a basic Google Analytics integration built into Backstage. You can +enable it by adding the following to your app configuration: + +```yaml +app: + googleAnalyticsTrackingId: UA-000000-0 +``` + +Replace the tracking ID with your own. + +For more information, learn about Google Analytics +[here](https://marketingplatform.google.com/about/analytics/). + +## Logging + +The backend supplies a central [winston](https://github.com/winstonjs/winston) +root logger that plugins are expected to use for their logging needs. In the +default production setup, it emits structured JSON logs on stdout, with a field +`"service": "backstage"` and also tagged on a per-plugin basis. Plugins that +want to more finely specify what part of their processes that emitted the log +message should add a `"component"` field to do so. + +An example log line could look as follows: + +```json +{ + "service": "backstage", + "type": "plugin", + "plugin": "catalog", + "component": "catalog-all-locations-refresh", + "level": "info", + "message": "Locations Refresh: Refreshing location bootstrap:bootstrap" +} +``` + +## Health Checks + +The example backend in the Backstage repository +[supplies](https://github.com/backstage/backstage/blob/bc18571b7a742863a770b2a54e785d6bbef7e184/packages/backend/src/index.ts#L99) +a very basic health check endpoint on the `/healthcheck` route. You may add such +a handler to your backend as well, and supply your own logic to it that fits +your particular health checking needs. diff --git a/docs/plugins/plugin-development.md b/docs/plugins/plugin-development.md index 109f6ed6ba..bfeed58c8f 100644 --- a/docs/plugins/plugin-development.md +++ b/docs/plugins/plugin-development.md @@ -23,35 +23,60 @@ browser APIs or by depending on external modules to do the work. ### Routing -Each plugin is responsible for registering its components to corresponding -routes in the app. +Each plugin can export routable extensions, which are then imported into the app +and mounted at a path. -The app will call the `createPlugin` method on each plugin, passing in a -`router` object with a set of methods on it. +First you will need a `RouteRef` instance to serve as the mount point of your +extensions. This can be used within your own plugin to create a link to the +extension page using `useRouteRef`, as well as for other plugins to link to your +extension. -```jsx +It is best to place these in a separate top-level `src/routes.ts` file, in order +to avoid import cycles, for example like this: + +```tsx +/* src/routes.ts */ +import { createRouteRef } from '@backstage/core'; + +// Note: This route ref is for internal use only, don't export it from the plugin +export const rootRouteRef = createRouteRef({ + title: 'Example Page', +}); +``` + +Now that we have a `RouteRef`, we import it into `src/plugin.ts`, create our +plugin instance with `createPlugin`, as well as create and wrap our routable +extension using `createRoutableExtension` from `@backstage/core`: + +```tsx +/* src/plugin.ts */ import { createPlugin, createRouteRef } from '@backstage/core'; import ExampleComponent from './components/ExampleComponent'; -export const rootRouteRef = createRouteRef({ - path: '/new-plugin', - title: 'New plugin', -}); - -export const plugin = createPlugin({ - id: 'new-plugin', - register({ router }) { - router.addRoute(rootRouteRef, ExampleComponent); +// Create a plugin instance and export this from your plugin package +export const examplePlugin = createPlugin({ + id: 'example', + routes: { + root: rootRouteRef, // This is where the route ref should be exported for usage in the app }, }); + +// This creates a routable extension, which are typically full pages of content. +// Each extension should also be exported from your plugin package. +export const ExamplePage = examplePlugin.provide( + createRoutableExtension({ + // The component needs to be lazy-loaded. It's what will actually be rendered in the end. + component: () => + import('./components/ExampleComponent').then(m => m.ExampleComponent), + // This binds the extension to this route ref, which allows for routing within and across plugin extensions + mountPoint: rootRouteRef, + }), +); ``` -#### `router` API +This extension can then be imported and used in the app as follow, typically +placed within the top-level ``: -```typescript -addRoute( - target: RouteRef, - Component: ComponentType, - options?: RouteOptions, -): void; +```tsx +} /> ``` diff --git a/docs/plugins/structure-of-a-plugin.md b/docs/plugins/structure-of-a-plugin.md index 3f631a9a46..2aacd02cf2 100644 --- a/docs/plugins/structure-of-a-plugin.md +++ b/docs/plugins/structure-of-a-plugin.md @@ -28,6 +28,7 @@ new-plugin/ index.ts plugin.test.ts plugin.ts + routes.ts jest.config.js jest.setup.ts package.json @@ -56,26 +57,30 @@ package.json to declare the plugin dependencies, metadata and scripts. In the `src` folder we get to the interesting bits. Check out the `plugin.ts`: ```jsx -import { createPlugin, createRouteRef } from '@backstage/core'; -import ExampleComponent from './components/ExampleComponent'; +import { createPlugin, createRoutableExtension } from '@backstage/core'; -export const rootRouteRef = createRouteRef({ - path: '/new-plugin', - title: 'New plugin', -}); +import { rootRouteRef } from './routes'; -export const plugin = createPlugin({ - id: 'new-plugin', - register({ router }) { - router.addRoute(rootRouteRef, ExampleComponent); +export const examplePlugin = createPlugin({ + id: 'example', + routes: { + root: rootRouteRef, }, }); + +export const ExamplePage = examplePlugin.provide( + createRoutableExtension({ + component: () => + import('./components/ExampleComponent').then(m => m.ExampleComponent), + mountPoint: rootRouteRef, + }), +); ``` -This is where the plugin is created and where it hooks into the app by declaring -what component should be shown on what URL. See reference docs for -[createPlugin](../reference/createPlugin.md) or -[router](../reference/createPlugin-router.md). +This is where the plugin is created and where it creates and exports extensions +that can be imported and used the app. See reference docs for +[createPlugin](../reference/createPlugin.md) or introduction to the new +[Composability System](./composability.md). ## Components @@ -91,12 +96,15 @@ You may tweak these components, rename them and/or replace them completely. ## Connecting the plugin to the Backstage app -There are two things needed for a Backstage app to start making use of a plugin. +There are three things needed for a Backstage app to start making use of a +plugin. 1. Add plugin as dependency in `app/package.json` 2. `import` plugin in `app/src/plugins.ts` +3. Import and use one or more plugin extensions, for example in + `app/src/App.tsx`. -Luckily these two steps happen automatically when you create a plugin with the +Luckily these three steps happen automatically when you create a plugin with the Backstage CLI. ## Talking to the outside world diff --git a/docs/reference/createPlugin-router.md b/docs/reference/createPlugin-router.md deleted file mode 100644 index 0ef5bdbd0f..0000000000 --- a/docs/reference/createPlugin-router.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -id: createPlugin-router -title: createPlugin - router -description: Documentation on createPlugin - router ---- - -The router that is passed to the `register` function makes it possible for -plugins to hook into routing of the Backstage app and provide the end users with -new views to navigate to. This is done by utilising the following methods on the -`router`: - -```typescript -addRoute( - target: RouteRef, - Component: ComponentType, - options?: RouteOptions, -): void; -``` - -## RouteRef - -`addRoute` method is using mutable RouteRefs, which can be created as following: - -```ts -import { createRouteRef } from '@backstage/core'; - -const myPluginRouteRef = createRouteRef({ - path: '/my-plugin', - title: 'My Plugin', -}); -``` diff --git a/docs/reference/createPlugin.md b/docs/reference/createPlugin.md index 4a58a5ecdc..e3df66fa12 100644 --- a/docs/reference/createPlugin.md +++ b/docs/reference/createPlugin.md @@ -17,32 +17,24 @@ type PluginConfig = { }; type PluginHooks = { - router: RouterHooks; + featureFlags: FeatureFlagsHooks; }; ``` -- [Read more about the router here](createPlugin-router.md) - [Read more about feature flags here](createPlugin-feature-flags.md) ## Example Uses ### Creating a basic plugin -Showcasing adding a route and a feature flag. +Showcasing adding a feature flag. ```jsx -import { createPlugin, createRouteRef } from '@backstage/core'; -import ExampleComponent from './components/ExampleComponent'; - -export const rootRouteRef = createRouteRef({ - path: '/new-plugin', - title: 'New Plugin', -}); +import { createPlugin } from '@backstage/core'; export default createPlugin({ id: 'new-plugin', register({ router, featureFlags }) { - router.addRoute(rootRouteRef, ExampleComponent); featureFlags.register('enable-example-component'); }, }); diff --git a/docs/reference/utility-apis/BackstageIdentityApi.md b/docs/reference/utility-apis/BackstageIdentityApi.md index dafdb7d55f..69fe5d26ba 100644 --- a/docs/reference/utility-apis/BackstageIdentityApi.md +++ b/docs/reference/utility-apis/BackstageIdentityApi.md @@ -79,7 +79,7 @@ Referenced by: [getBackstageIdentity](#getbackstageidentity). 
 export type BackstageIdentity = {
   /**
-   * The backstage user ID.
+   * The Backstage user ID.
    */
   id: string;
 
diff --git a/docs/tutorials/quickstart-app-auth.md b/docs/tutorials/quickstart-app-auth.md
index 1c661d274c..d322e2ec3c 100644
--- a/docs/tutorials/quickstart-app-auth.md
+++ b/docs/tutorials/quickstart-app-auth.md
@@ -349,22 +349,18 @@ const app = createApp({
   apis,
   plugins: Object.values(plugins),
   components: {
-    SignInPage: props => {
-      return (
-        
-      );
-    },
+    SignInPage: props => (
+      
+    ),
   },
 });
 ```
diff --git a/microsite/sidebars.json b/microsite/sidebars.json
index 99bd430b56..ebce8d900c 100644
--- a/microsite/sidebars.json
+++ b/microsite/sidebars.json
@@ -13,7 +13,6 @@
     "Getting Started": [
       "getting-started/index",
       "getting-started/running-backstage-locally",
-      "getting-started/installation",
       "getting-started/development-environment",
       "getting-started/create-an-app",
       {
@@ -130,7 +129,8 @@
         "ids": [
           "plugins/publishing",
           "plugins/publish-private",
-          "plugins/add-to-marketplace"
+          "plugins/add-to-marketplace",
+          "plugins/observability"
         ]
       }
     ],
diff --git a/microsite/siteConfig.js b/microsite/siteConfig.js
index 8d0c4ea57c..51354343d8 100644
--- a/microsite/siteConfig.js
+++ b/microsite/siteConfig.js
@@ -83,6 +83,7 @@ const siteConfig = {
     'https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js',
     '/js/medium-zoom.js',
     '/js/dismissable-banner.js',
+    '/js/scroll-nav-to-view-in-docs.js',
   ],
 
   // On page navigation for the current documentation page.
diff --git a/microsite/static/js/scroll-nav-to-view-in-docs.js b/microsite/static/js/scroll-nav-to-view-in-docs.js
new file mode 100644
index 0000000000..0e4da26674
--- /dev/null
+++ b/microsite/static/js/scroll-nav-to-view-in-docs.js
@@ -0,0 +1,23 @@
+// On backstage.io/docs pages, scroll the Nav sidebar to focus on
+// the page being viewed. Helpful when the Nav is large enough that
+// the selected page is hidden somewhere at bottom.
+// Credits: https://github.com/facebook/docusaurus/issues/823#issuecomment-421152269
+document.addEventListener('DOMContentLoaded', () => {
+  // Find the active nav item in the sidebar
+  const item = document.getElementsByClassName('navListItemActive')[0];
+  if (!item) {
+    return;
+  }
+  const bounding = item.getBoundingClientRect();
+  if (
+    bounding.top >= 0 &&
+    bounding.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight)
+  ) {
+    // Already visible.  Do nothing.
+  } else {
+    // Not visible.  Scroll sidebar.
+    item.scrollIntoView({ block: 'start', inline: 'nearest' });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+});
diff --git a/mkdocs.yml b/mkdocs.yml
index 6236d1c1a0..a303fd9978 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -80,6 +80,7 @@ nav:
       - Publishing:
           - Open source and npm: 'plugins/publishing.md'
           - Private/internal (non-open source): 'plugins/publish-private.md'
+          - Observability: 'plugins/observability.md'
   - Configuration:
       - Overview: 'conf/index.md'
       - Reading Configuration: 'conf/reading.md'
diff --git a/packages/app/package.json b/packages/app/package.json
index 36fe7651e6..9de8299d93 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -9,10 +9,11 @@
     "@backstage/core": "^0.5.0",
     "@backstage/plugin-api-docs": "^0.4.3",
     "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/plugin-catalog-import": "^0.3.6",
     "@backstage/plugin-circleci": "^0.2.6",
     "@backstage/plugin-cloudbuild": "^0.2.7",
-    "@backstage/plugin-cost-insights": "^0.6.0",
+    "@backstage/plugin-cost-insights": "^0.7.0",
     "@backstage/plugin-explore": "^0.2.3",
     "@backstage/plugin-gcp-projects": "^0.2.3",
     "@backstage/plugin-github-actions": "^0.3.0",
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index a1ab181211..0372c8759c 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -27,11 +27,8 @@ import {
   ProvidedApisCard,
   ProvidingComponentsCard,
 } from '@backstage/plugin-api-docs';
-import {
-  AboutCard,
-  EntityPageLayout,
-  useEntity,
-} from '@backstage/plugin-catalog';
+import { AboutCard, EntityPageLayout } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import {
   isPluginApplicableToEntity as isCircleCIAvailable,
   Router as CircleCIRouter,
@@ -50,6 +47,7 @@ import {
   LatestRunCard as JenkinsLatestRunCard,
   Router as JenkinsRouter,
 } from '@backstage/plugin-jenkins';
+import { Router as KafkaRouter } from '@backstage/plugin-kafka';
 import { Router as KubernetesRouter } from '@backstage/plugin-kubernetes';
 import {
   EmbeddedRouter as LighthouseRouter,
@@ -57,13 +55,16 @@ import {
   LastLighthouseAuditCard,
 } from '@backstage/plugin-lighthouse';
 import {
-  OwnershipCard,
-  MembersListCard,
   GroupProfileCard,
+  MembersListCard,
+  OwnershipCard,
   UserProfileCard,
 } from '@backstage/plugin-org';
+import {
+  isPluginApplicableToEntity as isPagerDutyAvailable,
+  PagerDutyCard,
+} from '@backstage/plugin-pagerduty';
 import { Router as SentryRouter } from '@backstage/plugin-sentry';
-import { Router as KafkaRouter } from '@backstage/plugin-kafka';
 import { EmbeddedDocsRouter as DocsRouter } from '@backstage/plugin-techdocs';
 import { Button, Grid } from '@material-ui/core';
 import {
@@ -82,10 +83,6 @@ import {
   PullRequestsStatsCard,
   Router as PullRequestsRouter,
 } from '@roadiehq/backstage-plugin-github-pull-requests';
-import {
-  isPluginApplicableToEntity as isPagerDutyAvailable,
-  PagerDutyCard,
-} from '@backstage/plugin-pagerduty';
 import {
   isPluginApplicableToEntity as isTravisCIAvailable,
   RecentTravisCIBuildsWidget,
diff --git a/packages/backend-common/src/reading/BitbucketUrlReader.test.ts b/packages/backend-common/src/reading/BitbucketUrlReader.test.ts
index 5571a07898..974c84b2c2 100644
--- a/packages/backend-common/src/reading/BitbucketUrlReader.test.ts
+++ b/packages/backend-common/src/reading/BitbucketUrlReader.test.ts
@@ -242,5 +242,17 @@ describe('BitbucketUrlReader', () => {
 
       expect(response.etag).toBe('12ab34cd56ef');
     });
+
+    it('should throw error when apiBaseUrl is missing', () => {
+      expect(() => {
+        /* eslint-disable no-new */
+        new BitbucketUrlReader(
+          {
+            host: 'bitbucket.mycompany.net',
+          },
+          { treeResponseFactory },
+        );
+      }).toThrowError('must configure an explicit apiBaseUrl');
+    });
   });
 });
diff --git a/packages/backend-common/src/reading/GithubUrlReader.test.ts b/packages/backend-common/src/reading/GithubUrlReader.test.ts
index 975be85ccc..fae3f3ba12 100644
--- a/packages/backend-common/src/reading/GithubUrlReader.test.ts
+++ b/packages/backend-common/src/reading/GithubUrlReader.test.ts
@@ -376,5 +376,20 @@ describe('GithubUrlReader', () => {
       };
       await expect(fnGithub).rejects.toThrow(NotFoundError);
     });
+
+    it('should throw error when apiBaseUrl is missing', () => {
+      expect(() => {
+        /* eslint-disable no-new */
+        new GithubUrlReader(
+          {
+            host: 'ghe.mycompany.net',
+          },
+          {
+            treeResponseFactory,
+            credentialsProvider: mockCredentialsProvider,
+          },
+        );
+      }).toThrowError('must configure an explicit apiBaseUrl');
+    });
   });
 });
diff --git a/packages/backend-common/src/reading/GitlabUrlReader.test.ts b/packages/backend-common/src/reading/GitlabUrlReader.test.ts
index 90acfd1ab9..b18e7a4294 100644
--- a/packages/backend-common/src/reading/GitlabUrlReader.test.ts
+++ b/packages/backend-common/src/reading/GitlabUrlReader.test.ts
@@ -379,5 +379,17 @@ describe('GitlabUrlReader', () => {
       };
       await expect(fnGithub).rejects.toThrow(NotFoundError);
     });
+
+    it('should throw error when apiBaseUrl is missing', () => {
+      expect(() => {
+        /* eslint-disable no-new */
+        new GitlabUrlReader(
+          {
+            host: 'gitlab.mycompany.com',
+          },
+          { treeResponseFactory },
+        );
+      }).toThrowError('must configure an explicit apiBaseUrl');
+    });
   });
 });
diff --git a/packages/backend-common/src/reading/GitlabUrlReader.ts b/packages/backend-common/src/reading/GitlabUrlReader.ts
index 22316f6895..8a763d1259 100644
--- a/packages/backend-common/src/reading/GitlabUrlReader.ts
+++ b/packages/backend-common/src/reading/GitlabUrlReader.ts
@@ -51,6 +51,12 @@ export class GitlabUrlReader implements UrlReader {
     deps: { treeResponseFactory: ReadTreeResponseFactory },
   ) {
     this.treeResponseFactory = deps.treeResponseFactory;
+
+    if (!config.apiBaseUrl) {
+      throw new Error(
+        `GitLab integration for '${config.host}' must configure an explicit apiBaseUrl`,
+      );
+    }
   }
 
   async read(url: string): Promise {
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 35ad049741..ed373f6058 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -35,7 +35,7 @@
     "@lerna/package-graph": "^3.18.5",
     "@lerna/project": "^3.18.0",
     "@octokit/request": "^5.4.12",
-    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-json": "^4.0.2",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-yaml": "^2.1.1",
diff --git a/packages/cli/src/commands/app/serve.ts b/packages/cli/src/commands/app/serve.ts
index dc165ecb90..b542030109 100644
--- a/packages/cli/src/commands/app/serve.ts
+++ b/packages/cli/src/commands/app/serve.ts
@@ -15,12 +15,43 @@
  */
 
 import fs from 'fs-extra';
+import chalk from 'chalk';
+import uniq from 'lodash/uniq';
 import { Command } from 'commander';
 import { serveBundle } from '../../lib/bundler';
 import { loadCliConfig } from '../../lib/config';
 import { paths } from '../../lib/paths';
+import { Lockfile } from '../../lib/versioning';
+import { includedFilter } from '../versions/lint';
 
 export default async (cmd: Command) => {
+  const lockfile = await Lockfile.load(paths.resolveTargetRoot('yarn.lock'));
+  const result = lockfile.analyze({
+    filter: includedFilter,
+  });
+  const problemPackages = [...result.newVersions, ...result.newRanges].map(
+    ({ name }) => name,
+  );
+
+  if (problemPackages.length > 1) {
+    console.log(
+      chalk.yellow(
+        `⚠️ Some of the following packages may be outdated or have duplicate installations:
+
+          ${uniq(problemPackages).join(', ')}
+        `,
+      ),
+    );
+    console.log(
+      chalk.yellow(
+        `⚠️ This can be resolved using the following command:
+
+          yarn backstage-cli versions:check --fix
+      `,
+      ),
+    );
+  }
+
   const { name } = await fs.readJson(paths.resolveTarget('package.json'));
   const waitForExit = await serveBundle({
     entry: 'src/index',
diff --git a/packages/cli/src/commands/create-plugin/createPlugin.ts b/packages/cli/src/commands/create-plugin/createPlugin.ts
index a2005c5580..affbf64922 100644
--- a/packages/cli/src/commands/create-plugin/createPlugin.ts
+++ b/packages/cli/src/commands/create-plugin/createPlugin.ts
@@ -20,6 +20,8 @@ import chalk from 'chalk';
 import inquirer, { Answers, Question } from 'inquirer';
 import { exec as execCb } from 'child_process';
 import { resolve as resolvePath, join as joinPath } from 'path';
+import camelCase from 'lodash/camelCase';
+import upperFirst from 'lodash/upperFirst';
 import os from 'os';
 import { Command } from 'commander';
 import {
@@ -104,16 +106,12 @@ export async function addPluginDependencyToApp(
   });
 }
 
-export async function addPluginToApp(
+export async function addPluginImportToApp(
   rootDir: string,
-  pluginName: string,
+  pluginVar: string,
   pluginPackage: string,
 ) {
-  const pluginNameCapitalized = pluginName
-    .split('-')
-    .map(name => capitalize(name))
-    .join('');
-  const pluginExport = `export { plugin as ${pluginNameCapitalized} } from '${pluginPackage}';`;
+  const pluginExport = `export { ${pluginVar} } from '${pluginPackage}';`;
   const pluginsFilePath = 'packages/app/src/plugins.ts';
   const pluginsFile = resolvePath(rootDir, pluginsFilePath);
 
@@ -126,6 +124,46 @@ export async function addPluginToApp(
   });
 }
 
+export async function addPluginExtensionToApp(
+  pluginId: string,
+  extensionName: string,
+  pluginPackage: string,
+) {
+  const pluginsFilePath = paths.resolveTargetRoot('packages/app/src/App.tsx');
+  if (!(await fs.pathExists(pluginsFilePath))) {
+    return;
+  }
+
+  await Task.forItem('processing', pluginsFilePath, async () => {
+    const content = await fs.readFile(pluginsFilePath, 'utf8');
+    const revLines = content.split('\n').reverse();
+
+    const lastImportIndex = revLines.findIndex(line =>
+      line.match(/ from ("|').*("|')/),
+    );
+    const lastRouteIndex = revLines.findIndex(line =>
+      line.match(/<\/FlatRoutes/),
+    );
+
+    if (lastImportIndex !== -1 && lastRouteIndex !== -1) {
+      revLines.splice(
+        lastImportIndex,
+        0,
+        `import { ${extensionName} } from '${pluginPackage}';`,
+      );
+      const [indentation] = revLines[lastRouteIndex + 1].match(/^\s*/) ?? [];
+      revLines.splice(
+        lastRouteIndex + 1,
+        0,
+        `${indentation}}/>`,
+      );
+
+      const newContent = revLines.reverse().join('\n');
+      await fs.writeFile(pluginsFilePath, newContent, 'utf8');
+    }
+  });
+}
+
 async function cleanUp(tempDir: string) {
   await Task.forItem('remove', 'temporary directory', async () => {
     await fs.remove(tempDir);
@@ -223,6 +261,8 @@ export default async (cmd: Command) => {
   const name = cmd.scope
     ? `@${cmd.scope.replace(/^@/, '')}/plugin-${pluginId}`
     : `plugin-${pluginId}`;
+  const pluginVar = `${camelCase(answers.id)}Plugin`;
+  const extensionName = `${upperFirst(camelCase(answers.id))}Page`;
   const npmRegistry = cmd.npmRegistry && cmd.scope ? cmd.npmRegistry : '';
   const privatePackage = cmd.private === false ? false : true;
   const isMonoRepo = await fs.pathExists(paths.resolveTargetRoot('lerna.json'));
@@ -259,7 +299,9 @@ export default async (cmd: Command) => {
       tempDir,
       {
         ...answers,
+        pluginVar,
         pluginVersion,
+        extensionName,
         name,
         privatePackage,
         npmRegistry,
@@ -278,7 +320,8 @@ export default async (cmd: Command) => {
       await addPluginDependencyToApp(paths.targetRoot, name, pluginVersion);
 
       Task.section('Import plugin in app');
-      await addPluginToApp(paths.targetRoot, pluginId, name);
+      await addPluginImportToApp(paths.targetRoot, pluginVar, name);
+      await addPluginExtensionToApp(pluginId, extensionName, name);
     }
 
     if (ownerIds && ownerIds.length) {
diff --git a/packages/cli/src/commands/plugin/diff.ts b/packages/cli/src/commands/plugin/diff.ts
index 416d67869b..fb96250567 100644
--- a/packages/cli/src/commands/plugin/diff.ts
+++ b/packages/cli/src/commands/plugin/diff.ts
@@ -39,6 +39,11 @@ const fileHandlers = [
     patterns: ['package.json'],
     handler: handlers.packageJson,
   },
+  {
+    // Not all plugins have routes
+    patterns: ['src/routes.ts'],
+    handler: handlers.skip,
+  },
   {
     // make sure files in 1st level of src/ and dev/ exist
     patterns: ['.eslintrc.js', /^(src|dev)\/[^/]+$/],
diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts
index c53a8329f5..6fbcc65c9a 100644
--- a/packages/cli/src/lib/bundler/config.ts
+++ b/packages/cli/src/lib/bundler/config.ts
@@ -219,7 +219,7 @@ export async function createBackendConfig(
         }
       : {}),
     externals: [
-      nodeExternals({
+      nodeExternalsWithResolve({
         modulesDir: paths.rootNodeModules,
         additionalModuleDirs: moduleDirs,
         allowlist: ['webpack/hot/poll?100', ...localPackageNames],
@@ -296,3 +296,32 @@ export async function createBackendConfig(
     ],
   };
 }
+
+// This makes the module resolution happen from the context of each non-external module, rather
+// than the main entrypoint. This fixes a bug where dependencies would be resolved from the backend
+// package rather than each individual backend package and plugin.
+//
+// TODO(Rugvip): Feature suggestion/contribute this to webpack-externals
+function nodeExternalsWithResolve(
+  options: Parameters[0],
+) {
+  let currentContext: string;
+  const externals = nodeExternals({
+    ...options,
+    importType(request) {
+      const resolved = require.resolve(request, {
+        paths: [currentContext],
+      });
+      return `commonjs ${resolved}`;
+    },
+  });
+
+  return (
+    context: string,
+    request: string,
+    callback: webpack.ExternalsFunctionCallback,
+  ) => {
+    currentContext = context;
+    return externals(context, request, callback);
+  };
+}
diff --git a/packages/cli/templates/default-plugin/dev/index.tsx b/packages/cli/templates/default-plugin/dev/index.tsx
deleted file mode 100644
index 6fce113093..0000000000
--- a/packages/cli/templates/default-plugin/dev/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
-
-createDevApp().registerPlugin(plugin).render();
diff --git a/packages/cli/templates/default-plugin/dev/index.tsx.hbs b/packages/cli/templates/default-plugin/dev/index.tsx.hbs
new file mode 100644
index 0000000000..ade00a1613
--- /dev/null
+++ b/packages/cli/templates/default-plugin/dev/index.tsx.hbs
@@ -0,0 +1,11 @@
+import React from 'react';
+import { createDevApp } from '@backstage/dev-utils';
+import { {{ pluginVar }}, {{ extensionName }} } from '../src/plugin';
+
+createDevApp()
+  .registerPlugin({{ pluginVar }})
+  .addPage({
+    element: <{{ extensionName }} />,
+    title: 'Root Page',
+  })
+  .render();
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
index e805900f36..e6eab17493 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs
@@ -1,13 +1,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ExampleComponent from './ExampleComponent';
+import { ExampleComponent } from './ExampleComponent';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { msw } from '@backstage/test-utils';
 
-
 describe('ExampleComponent', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
@@ -15,15 +14,17 @@ describe('ExampleComponent', () => {
 
   // setup mock response
   beforeEach(() => {
-    server.use(rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))))
-  })
+    server.use(
+      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
+    );
+  });
 
   it('should render', () => {
     const rendered = render(
       
         
       ,
-      );
-      expect(rendered.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
+    );
+    expect(rendered.getByText('Welcome to {{ id }}!')).toBeInTheDocument();
   });
 });
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
index 5f90f2de1e..dcecebdf46 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs
@@ -9,9 +9,9 @@ import {
   HeaderLabel,
   SupportButton,
 } from '@backstage/core';
-import ExampleFetchComponent from '../ExampleFetchComponent';
+import { ExampleFetchComponent } from '../ExampleFetchComponent';
 
-const ExampleComponent = () => (
+export const ExampleComponent = () => (
   
     

       
@@ -36,5 +36,3 @@ const ExampleComponent = () => (
     
   
 );
-  
-export default ExampleComponent;
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/index.ts b/packages/cli/templates/default-plugin/src/components/ExampleComponent/index.ts
index 520a3bf553..8b8437521b 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/index.ts
+++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/index.ts
@@ -1 +1 @@
-export { default } from './ExampleComponent';
+export { ExampleComponent } from './ExampleComponent';
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs
index 81e1b4be09..fa1e289d8e 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ExampleFetchComponent from './ExampleFetchComponent';
+import { ExampleFetchComponent } from './ExampleFetchComponent';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { msw } from '@backstage/test-utils';
@@ -9,11 +9,15 @@ describe('ExampleFetchComponent', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
   msw.setupDefaultHandlers(server);
-  
+
   // setup mock response
   beforeEach(() => {
-    server.use(rest.get('https://randomuser.me/*', (_, res, ctx) => res(ctx.status(200), ctx.delay(2000), ctx.json({}))))
-  })
+    server.use(
+      rest.get('https://randomuser.me/*', (_, res, ctx) =>
+        res(ctx.status(200), ctx.delay(2000), ctx.json({})),
+      ),
+    );
+  });
   it('should render', async () => {
     const rendered = render();
     expect(await rendered.findByTestId('progress')).toBeInTheDocument();
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
index 8cc5ed2ab7..20dd6d1f57 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs
@@ -48,7 +48,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
     { title: 'Nationality', field: 'nationality' },
   ];
 
-  const data = users.map((user) => {
+  const data = users.map(user => {
     return {
       avatar: (
          {
   );
 };
 
-const ExampleFetchComponent = () => {
+export const ExampleFetchComponent = () => {
   const { value, loading, error } = useAsync(async (): Promise => {
     const response = await fetch('https://randomuser.me/api/?results=20');
     const data = await response.json();
@@ -88,5 +88,3 @@ const ExampleFetchComponent = () => {
 
   return ;
 };
-
-export default ExampleFetchComponent;
diff --git a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts
index 3e53453948..41a43e84f1 100644
--- a/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts
+++ b/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts
@@ -1 +1 @@
-export { default } from './ExampleFetchComponent';
+export { ExampleFetchComponent } from './ExampleFetchComponent';
diff --git a/packages/cli/templates/default-plugin/src/index.ts b/packages/cli/templates/default-plugin/src/index.ts
deleted file mode 100644
index 99edba26c3..0000000000
--- a/packages/cli/templates/default-plugin/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { plugin } from './plugin';
diff --git a/packages/cli/templates/default-plugin/src/index.ts.hbs b/packages/cli/templates/default-plugin/src/index.ts.hbs
new file mode 100644
index 0000000000..be4881efaf
--- /dev/null
+++ b/packages/cli/templates/default-plugin/src/index.ts.hbs
@@ -0,0 +1 @@
+export { {{ pluginVar }}, {{ extensionName }} } from './plugin';
diff --git a/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs b/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs
index c2be0a5301..9d44a9c497 100644
--- a/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs
+++ b/packages/cli/templates/default-plugin/src/plugin.test.ts.hbs
@@ -1,7 +1,7 @@
-import { plugin } from './plugin';
+import { {{ pluginVar }} } from './plugin';
 
 describe('{{ id }}', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect({{ pluginVar }}).toBeDefined();
   });
 });
diff --git a/packages/cli/templates/default-plugin/src/plugin.ts.hbs b/packages/cli/templates/default-plugin/src/plugin.ts.hbs
index 1bf4d07cdb..0ae5356fd1 100644
--- a/packages/cli/templates/default-plugin/src/plugin.ts.hbs
+++ b/packages/cli/templates/default-plugin/src/plugin.ts.hbs
@@ -1,14 +1,18 @@
-import { createPlugin, createRouteRef } from '@backstage/core';
-import ExampleComponent from './components/ExampleComponent';
+import { createPlugin, createRoutableExtension } from '@backstage/core';
 
-export const rootRouteRef = createRouteRef({
-  path: '/{{ id }}',
-  title: '{{ id }}',
-});
+import { rootRouteRef } from './routes';
 
-export const plugin = createPlugin({
+export const {{ pluginVar }} = createPlugin({
   id: '{{ id }}',
-  register({ router }) {
-    router.addRoute(rootRouteRef, ExampleComponent);
+  routes: {
+    root: rootRouteRef,
   },
 });
+
+export const {{ extensionName }} = {{ pluginVar }}.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/ExampleComponent').then(m => m.ExampleComponent),
+    mountPoint: rootRouteRef,
+  }),
+);
diff --git a/packages/cli/templates/default-plugin/src/routes.ts.hbs b/packages/cli/templates/default-plugin/src/routes.ts.hbs
new file mode 100644
index 0000000000..b2afba074d
--- /dev/null
+++ b/packages/cli/templates/default-plugin/src/routes.ts.hbs
@@ -0,0 +1,5 @@
+import { createRouteRef } from '@backstage/core';
+
+export const rootRouteRef = createRouteRef({
+  title: '{{ id }}',
+});
diff --git a/packages/config-loader/src/lib/schema/compile.ts b/packages/config-loader/src/lib/schema/compile.ts
index 2607d51f80..e340d775a1 100644
--- a/packages/config-loader/src/lib/schema/compile.ts
+++ b/packages/config-loader/src/lib/schema/compile.ts
@@ -69,6 +69,14 @@ export function compileConfigSchemas(
     },
   });
 
+  for (const schema of schemas) {
+    try {
+      ajv.compile(schema.value);
+    } catch (error) {
+      throw new Error(`Schema at ${schema.path} is invalid, ${error}`);
+    }
+  }
+
   const merged = mergeAllOf(
     { allOf: schemas.map(_ => _.value) },
     {
diff --git a/packages/core-api/src/lib/loginPopup.ts b/packages/core-api/src/lib/loginPopup.ts
index 2e14447882..716c4f9651 100644
--- a/packages/core-api/src/lib/loginPopup.ts
+++ b/packages/core-api/src/lib/loginPopup.ts
@@ -82,7 +82,9 @@ export function showLoginPopup(options: LoginPopupOptions): Promise {
     let targetOrigin = '';
 
     if (!popup || typeof popup.closed === 'undefined' || popup.closed) {
-      reject(new Error('Failed to open auth popup.'));
+      const error = new Error('Failed to open auth popup.');
+      error.name = 'PopupRejectedError';
+      reject(error);
       return;
     }
 
@@ -120,7 +122,7 @@ export function showLoginPopup(options: LoginPopupOptions): Promise {
     const intervalId = setInterval(() => {
       if (popup.closed) {
         const errMessage = `Login failed, ${
-          targetOrigin !== window.location.origin
+          targetOrigin && targetOrigin !== window.location.origin
             ? `Incorrect app origin, expected ${targetOrigin}`
             : 'popup was closed'
         }`;
diff --git a/packages/core/src/layout/HomepageTimer/HomepageTimer.test.tsx b/packages/core/src/layout/HomepageTimer/HomepageTimer.test.tsx
new file mode 100644
index 0000000000..40b0c266e0
--- /dev/null
+++ b/packages/core/src/layout/HomepageTimer/HomepageTimer.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderWithEffects } from '@backstage/test-utils';
+import { HomepageTimer } from './HomepageTimer';
+import React from 'react';
+import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core';
+
+import {
+  ApiProvider,
+  ApiRegistry,
+  ConfigReader,
+  ConfigApi,
+  configApiRef,
+} from '@backstage/core-api';
+
+it('changes default timezone to GMT', async () => {
+  const configApi: ConfigApi = new ConfigReader({
+    homepage: {
+      clocks: [
+        {
+          label: 'New York',
+          timezone: 'America/New_Pork',
+        },
+      ],
+    },
+    context: 'test',
+  });
+
+  const rendered = await renderWithEffects(
+    
+      
+        
+      
+    ,
+  );
+
+  expect(rendered.getByText('GMT')).toBeInTheDocument();
+});
diff --git a/packages/core/src/layout/HomepageTimer/HomepageTimer.tsx b/packages/core/src/layout/HomepageTimer/HomepageTimer.tsx
index 59b7f3fb3d..2adbf8fbd5 100644
--- a/packages/core/src/layout/HomepageTimer/HomepageTimer.tsx
+++ b/packages/core/src/layout/HomepageTimer/HomepageTimer.tsx
@@ -39,18 +39,28 @@ function getTimes(configApi: ConfigApi) {
 
   for (const clock of clockConfigs) {
     if (clock.has('label') && clock.has('timezone')) {
+      let label = clock.getString('label');
+
       const options = {
         timeZone: clock.getString('timezone'),
         ...timeFormat,
       };
 
-      const time = d.toLocaleTimeString(lang, options);
-      const label = clock.getString('label');
+      try {
+        new Date().toLocaleString(lang, options);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `The timezone ${options.timeZone} is invalid. Defaulting to GMT`,
+        );
+        options.timeZone = 'GMT';
+        label = 'GMT';
+      }
 
+      const time = d.toLocaleTimeString(lang, options);
       clocks.push({ time, label });
     }
   }
-
   return clocks;
 }
 
diff --git a/packages/core/src/layout/Sidebar/Bar.tsx b/packages/core/src/layout/Sidebar/Bar.tsx
index d7318de27d..260593de95 100644
--- a/packages/core/src/layout/Sidebar/Bar.tsx
+++ b/packages/core/src/layout/Sidebar/Bar.tsx
@@ -39,6 +39,8 @@ const useStyles = makeStyles(theme => ({
     padding: 0,
     background: theme.palette.navigation.background,
     overflowX: 'hidden',
+    msOverflowStyle: 'none',
+    scrollbarWidth: 'none',
     width: sidebarConfig.drawerWidthClosed,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
@@ -47,6 +49,9 @@ const useStyles = makeStyles(theme => ({
     '& > *': {
       flexShrink: 0,
     },
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
   },
   drawerOpen: {
     width: sidebarConfig.drawerWidthOpen,
diff --git a/packages/core/src/layout/SignInPage/SignInPage.tsx b/packages/core/src/layout/SignInPage/SignInPage.tsx
index 83ef8fe8a8..c3e5b75bb7 100644
--- a/packages/core/src/layout/SignInPage/SignInPage.tsx
+++ b/packages/core/src/layout/SignInPage/SignInPage.tsx
@@ -14,30 +14,38 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Page } from '../Page';
 import { Header } from '../Header';
 import { Content } from '../Content/Content';
 import { ContentHeader } from '../ContentHeader/ContentHeader';
-import { Grid } from '@material-ui/core';
+import { Grid, Button, Typography } from '@material-ui/core';
 import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api';
 import { useSignInProviders, getSignInProviders } from './providers';
-import { IdentityProviders } from './types';
+import { IdentityProviders, SignInConfig } from './types';
 import { Progress } from '../../components/Progress';
-import { useStyles } from './styles';
+import { GridItem, useStyles } from './styles';
+import { InfoCard } from '../InfoCard';
 
-export type Props = SignInPageProps & {
+type MultiSignInPageProps = SignInPageProps & {
   providers: IdentityProviders;
   title?: string;
   align?: 'center' | 'left';
 };
 
-export const SignInPage = ({
+type SingleSignInPageProps = SignInPageProps & {
+  provider: SignInConfig;
+  auto?: boolean;
+};
+
+export type Props = MultiSignInPageProps | SingleSignInPageProps;
+
+export const MultiSignInPage = ({
   onResult,
   providers = [],
   title,
   align = 'left',
-}: Props) => {
+}: MultiSignInPageProps) => {
   const configApi = useApi(configApiRef);
   const classes = useStyles();
 
@@ -69,3 +77,86 @@ export const SignInPage = ({
     
   );
 };
+
+export const SingleSignInPage = ({
+  onResult,
+  provider,
+  auto,
+}: SingleSignInPageProps) => {
+  const classes = useStyles();
+  const authApi = useApi(provider.apiRef);
+  const configApi = useApi(configApiRef);
+
+  const [retry, setRetry] = useState<{} | boolean | undefined>(auto);
+  const [error, setError] = useState();
+
+  useEffect(() => {
+    const login = async () => {
+      const identity = await authApi.getBackstageIdentity({
+        instantPopup: true,
+      });
+
+      const profile = await authApi.getProfile();
+      onResult({
+        userId: identity!.id,
+        profile: profile!,
+        getIdToken: () => {
+          return authApi.getBackstageIdentity().then(i => i!.idToken);
+        },
+        signOut: async () => {
+          await authApi.signOut();
+        },
+      });
+    };
+
+    if (retry) {
+      login().catch(setError);
+    }
+  }, [onResult, authApi, retry]);
+
+  return (
+    
+      

+      
+        
+          
+             setRetry({})}
+                >
+                  Sign In
+                
+              }
+            >
+              {provider.message}
+              {error && error.name !== 'PopupRejectedError' && (
+                
+                  {error.message}
+                
+              )}
+            
+          
+        
+      
+    
+  );
+};
+
+export const SignInPage = (props: Props) => {
+  if ('provider' in props) {
+    return ;
+  }
+
+  return ;
+};
diff --git a/packages/create-app/src/lib/versions.ts b/packages/create-app/src/lib/versions.ts
index a703fb9305..e6a047921c 100644
--- a/packages/create-app/src/lib/versions.ts
+++ b/packages/create-app/src/lib/versions.ts
@@ -42,6 +42,7 @@ import { version as pluginApiDocs } from '../../../../plugins/api-docs/package.j
 import { version as pluginAppBackend } from '../../../../plugins/app-backend/package.json';
 import { version as pluginAuthBackend } from '../../../../plugins/auth-backend/package.json';
 import { version as pluginCatalog } from '../../../../plugins/catalog/package.json';
+import { version as pluginCatalogReact } from '../../../../plugins/catalog-react/package.json';
 import { version as pluginCatalogBackend } from '../../../../plugins/catalog-backend/package.json';
 import { version as pluginCatalogImport } from '../../../../plugins/catalog-import/package.json';
 import { version as pluginCircleci } from '../../../../plugins/circleci/package.json';
@@ -68,6 +69,7 @@ export const packageVersions = {
   '@backstage/plugin-app-backend': pluginAppBackend,
   '@backstage/plugin-auth-backend': pluginAuthBackend,
   '@backstage/plugin-catalog': pluginCatalog,
+  '@backstage/plugin-catalog-react': pluginCatalogReact,
   '@backstage/plugin-catalog-backend': pluginCatalogBackend,
   '@backstage/plugin-catalog-import': pluginCatalogImport,
   '@backstage/plugin-circleci': pluginCircleci,
diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs
index e40ed6f03d..c7561fe091 100644
--- a/packages/create-app/templates/default-app/packages/app/package.json.hbs
+++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs
@@ -10,6 +10,7 @@
     "@backstage/core": "^{{version '@backstage/core'}}",
     "@backstage/plugin-api-docs": "^{{version '@backstage/plugin-api-docs'}}",
     "@backstage/plugin-catalog": "^{{version '@backstage/plugin-catalog'}}",
+    "@backstage/plugin-catalog-react": "^{{version '@backstage/plugin-catalog-react'}}",
     "@backstage/plugin-catalog-import": "^{{version '@backstage/plugin-catalog-import'}}",
     "@backstage/plugin-scaffolder": "^{{version '@backstage/plugin-scaffolder'}}",
     "@backstage/plugin-techdocs": "^{{version '@backstage/plugin-techdocs'}}",
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index b5e384f7a9..a3a3715ab0 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -24,8 +24,10 @@ import {
 } from '@backstage/plugin-api-docs';
 import {
   AboutCard, EntityPageLayout,
-  useEntity
 } from '@backstage/plugin-catalog';
+import {
+  useEntity
+} from '@backstage/plugin-catalog-react';
 import {
   isPluginApplicableToEntity as isCircleCIAvailable, Router as CircleCIRouter
 } from '@backstage/plugin-circleci';
diff --git a/packages/dev-utils/package.json b/packages/dev-utils/package.json
index 93a5247c82..eff2d6e218 100644
--- a/packages/dev-utils/package.json
+++ b/packages/dev-utils/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@backstage/core": "^0.5.0",
     "@backstage/catalog-model": "^0.7.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/test-utils": "^0.1.5",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
diff --git a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx
index 077a8f85e8..825a207064 100644
--- a/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx
+++ b/packages/dev-utils/src/components/EntityGridItem/EntityGridItem.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Grid, GridProps, makeStyles } from '@material-ui/core';
 import { Entity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
+import { Grid, GridProps, makeStyles } from '@material-ui/core';
+import React from 'react';
 
 const useStyles = makeStyles(theme => ({
   root: ({ entity }) => ({
diff --git a/packages/techdocs-common/__mocks__/@azure/identity.ts b/packages/techdocs-common/__mocks__/@azure/identity.ts
new file mode 100644
index 0000000000..cc89a4d514
--- /dev/null
+++ b/packages/techdocs-common/__mocks__/@azure/identity.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export class DefaultAzureCredential {
+  /**
+   * Creates an instance of the DefaultAzureCredential class.
+   */
+}
diff --git a/packages/techdocs-common/__mocks__/@azure/storage-blob.ts b/packages/techdocs-common/__mocks__/@azure/storage-blob.ts
new file mode 100644
index 0000000000..60a705f6a7
--- /dev/null
+++ b/packages/techdocs-common/__mocks__/@azure/storage-blob.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import fs from 'fs';
+
+export class BlockBlobClient {
+  private readonly blobName;
+
+  constructor(blobName: string) {
+    this.blobName = blobName;
+  }
+
+  uploadFile(source: string) {
+    return new Promise((resolve, reject) => {
+      if (!fs.existsSync(source)) {
+        reject('');
+      } else {
+        resolve('');
+      }
+    });
+  }
+
+  exists() {
+    return new Promise((resolve, reject) => {
+      if (fs.existsSync(this.blobName)) {
+        resolve(true);
+      } else {
+        reject({ message: 'The object doest not exist !' });
+      }
+    });
+  }
+}
+
+export class ContainerClient {
+  private readonly containerName;
+
+  constructor(containerName: string) {
+    this.containerName = containerName;
+  }
+
+  getProperties() {
+    return new Promise(resolve => {
+      resolve('');
+    });
+  }
+
+  getBlockBlobClient(blobName: string) {
+    return new BlockBlobClient(blobName);
+  }
+}
+
+export class BlobServiceClient {
+  private readonly url;
+  private readonly credential;
+
+  constructor(url: string, credential?: StorageSharedKeyCredential) {
+    this.url = url;
+    this.credential = credential;
+  }
+
+  getContainerClient(containerName: string) {
+    return new ContainerClient(containerName);
+  }
+}
+
+export class StorageSharedKeyCredential {
+  private readonly accountName;
+  private readonly accountKey;
+
+  constructor(accountName: string, accountKey: string) {
+    this.accountName = accountName;
+    this.accountKey = accountKey;
+  }
+}
diff --git a/packages/techdocs-common/package.json b/packages/techdocs-common/package.json
index 64c5c19425..2a065600a1 100644
--- a/packages/techdocs-common/package.json
+++ b/packages/techdocs-common/package.json
@@ -37,6 +37,8 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1.0",
+    "@azure/identity": "^1.2.2",
+    "@azure/storage-blob": "^12.4.0",
     "@backstage/backend-common": "^0.5.1",
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/config": "^0.1.2",
diff --git a/packages/techdocs-common/src/stages/publish/azureBlobStorage.test.ts b/packages/techdocs-common/src/stages/publish/azureBlobStorage.test.ts
new file mode 100644
index 0000000000..80f3cb0cf7
--- /dev/null
+++ b/packages/techdocs-common/src/stages/publish/azureBlobStorage.test.ts
@@ -0,0 +1,147 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import mockFs from 'mock-fs';
+import { ConfigReader } from '@backstage/config';
+import { getVoidLogger } from '@backstage/backend-common';
+import { AzureBlobStoragePublish } from './azureBlobStorage';
+import { PublisherBase } from './types';
+import type { Entity } from '@backstage/catalog-model';
+
+const createMockEntity = (annotations = {}) => {
+  return {
+    apiVersion: 'version',
+    kind: 'TestKind',
+    metadata: {
+      name: 'test-component-name',
+      namespace: 'test-namespace',
+      annotations: {
+        ...annotations,
+      },
+    },
+  };
+};
+
+const getEntityRootDir = (entity: Entity) => {
+  const {
+    kind,
+    metadata: { namespace, name },
+  } = entity;
+  const entityRootDir = `${namespace}/${kind}/${name}`;
+  return entityRootDir;
+};
+
+const logger = getVoidLogger();
+jest.spyOn(logger, 'info').mockReturnValue(logger);
+jest.spyOn(logger, 'error').mockReturnValue(logger);
+
+let publisher: PublisherBase;
+
+beforeEach(async () => {
+  const mockConfig = new ConfigReader({
+    techdocs: {
+      requestUrl: 'http://localhost:7000',
+      publisher: {
+        type: 'azureBlobStorage',
+        azureBlobStorage: {
+          credentials: {
+            accountName: 'accountName',
+            accountKey: 'accountKey',
+          },
+          containerName: 'containerName',
+        },
+      },
+    },
+  });
+
+  publisher = await AzureBlobStoragePublish.fromConfig(mockConfig, logger);
+});
+
+describe('AzureBlobStoragePublish', () => {
+  describe('publish', () => {
+    it('should publish a directory', async () => {
+      const entity = createMockEntity();
+      const entityRootDir = getEntityRootDir(entity);
+
+      mockFs({
+        [entityRootDir]: {
+          'index.html': '',
+          '404.html': '',
+          assets: {
+            'main.css': '',
+          },
+        },
+      });
+
+      expect(
+        await publisher.publish({
+          entity,
+          directory: entityRootDir,
+        }),
+      ).toBeUndefined();
+      mockFs.restore();
+    });
+
+    it('should fail to publish a directory', async () => {
+      const wrongPathToGeneratedDirectory = 'wrong/path/to/generatedDirectory';
+      const entity = createMockEntity();
+      const entityRootDir = getEntityRootDir(entity);
+
+      mockFs({
+        [entityRootDir]: {
+          'index.html': '',
+          '404.html': '',
+          assets: {
+            'main.css': '',
+          },
+        },
+      });
+
+      await publisher
+        .publish({
+          entity,
+          directory: wrongPathToGeneratedDirectory,
+        })
+        .catch(error =>
+          expect(error.message).toContain(
+            'Unable to upload file(s) to Azure Blob Storage. Error Failed to read template directory: ENOENT, no such file or directory',
+          ),
+        );
+      mockFs.restore();
+    });
+  });
+
+  describe('hasDocsBeenGenerated', () => {
+    it('should return true if docs has been generated', async () => {
+      const entity = createMockEntity();
+      const entityRootDir = getEntityRootDir(entity);
+
+      mockFs({
+        [entityRootDir]: {
+          'index.html': 'file-content',
+        },
+      });
+
+      expect(await publisher.hasDocsBeenGenerated(entity)).toBe(true);
+      mockFs.restore();
+    });
+
+    it('should return false if docs has not been generated', async () => {
+      const entity = createMockEntity();
+
+      expect(await publisher.hasDocsBeenGenerated(entity)).toBe(false);
+    });
+  });
+});
diff --git a/packages/techdocs-common/src/stages/publish/azureBlobStorage.ts b/packages/techdocs-common/src/stages/publish/azureBlobStorage.ts
new file mode 100644
index 0000000000..a02639e63f
--- /dev/null
+++ b/packages/techdocs-common/src/stages/publish/azureBlobStorage.ts
@@ -0,0 +1,259 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import platformPath from 'path';
+import express from 'express';
+import {
+  BlobServiceClient,
+  BlobUploadCommonResponse,
+  StorageSharedKeyCredential,
+} from '@azure/storage-blob';
+import { DefaultAzureCredential } from '@azure/identity';
+import { Logger } from 'winston';
+import { Entity, EntityName } from '@backstage/catalog-model';
+import { Config } from '@backstage/config';
+import { getHeadersForFileExtension, getFileTreeRecursively } from './helpers';
+import { PublisherBase, PublishRequest, TechDocsMetadata } from './types';
+import limiterFactory from 'p-limit';
+import JSON5 from 'json5';
+
+// The number of batches that may be ongoing at the same time.
+const BATCH_CONCURRENCY = 3;
+
+export class AzureBlobStoragePublish implements PublisherBase {
+  static async fromConfig(
+    config: Config,
+    logger: Logger,
+  ): Promise {
+    let containerName = '';
+    try {
+      containerName = config.getString(
+        'techdocs.publisher.azureBlobStorage.containerName',
+      );
+    } catch (error) {
+      throw new Error(
+        "Since techdocs.publisher.type is set to 'azureBlobStorage' in your app config, " +
+          'techdocs.publisher.azureBlobStorage.containerName is required.',
+      );
+    }
+
+    let accountName = '';
+    try {
+      accountName = config.getString(
+        'techdocs.publisher.azureBlobStorage.credentials.accountName',
+      );
+    } catch (error) {
+      throw new Error(
+        "Since techdocs.publisher.type is set to 'azureBlobStorage' in your app config, " +
+          'techdocs.publisher.azureBlobStorage.credentials.accountName is required.',
+      );
+    }
+
+    // Credentials is an optional config. If missing, default Azure Blob Storage environment variables will be used.
+    // https://docs.microsoft.com/en-us/azure/storage/common/storage-auth-aad-app
+    const accountKey = config.getOptionalString(
+      'techdocs.publisher.azureBlobStorage.credentials.accountKey',
+    );
+
+    let credential;
+    if (accountKey) {
+      credential = new StorageSharedKeyCredential(accountName, accountKey);
+    } else {
+      credential = new DefaultAzureCredential();
+    }
+
+    const storageClient = new BlobServiceClient(
+      `https://${accountName}.blob.core.windows.net`,
+      credential,
+    );
+
+    await storageClient
+      .getContainerClient(containerName)
+      .getProperties()
+      .then(() => {
+        logger.info(
+          `Successfully connected to the Azure Blob Storage container ${containerName}.`,
+        );
+      })
+      .catch(reason => {
+        logger.error(
+          `Could not retrieve metadata about the Azure Blob Storage container ${containerName}. ` +
+            'Make sure that the Azure project and container exist and the access key is setup correctly ' +
+            'techdocs.publisher.azureBlobStorage.credentials defined in app config has correct permissions. ' +
+            'Refer to https://backstage.io/docs/features/techdocs/using-cloud-storage',
+        );
+        throw new Error(
+          `from Azure Blob Storage client library: ${reason.message}`,
+        );
+      });
+
+    return new AzureBlobStoragePublish(storageClient, containerName, logger);
+  }
+
+  constructor(
+    private readonly storageClient: BlobServiceClient,
+    private readonly containerName: string,
+    private readonly logger: Logger,
+  ) {
+    this.storageClient = storageClient;
+    this.containerName = containerName;
+    this.logger = logger;
+  }
+
+  /**
+   * Upload all the files from the generated `directory` to the Azure Blob Storage container.
+   * Directory structure used in the container is - entityNamespace/entityKind/entityName/index.html
+   */
+  async publish({ entity, directory }: PublishRequest): Promise {
+    try {
+      // Note: Azure Blob Storage manages creation of parent directories if they do not exist.
+      // So collecting path of only the files is good enough.
+      const allFilesToUpload = await getFileTreeRecursively(directory);
+
+      const uploadPromises: Array> = [];
+
+      // Bound the number of concurrent batches. We want a bit of concurrency for
+      // performance reasons, but not so much that we starve the connection pool
+      // or start thrashing.
+      const limiter = limiterFactory(BATCH_CONCURRENCY);
+
+      const promises = allFilesToUpload.map(filePath => {
+        // Remove the absolute path prefix of the source directory
+        // Path of all files to upload, relative to the root of the source directory
+        // e.g. ['index.html', 'sub-page/index.html', 'assets/images/favicon.png']
+        const relativeFilePath = filePath.replace(`${directory}/`, '');
+        const entityRootDir = `${entity.metadata.namespace}/${entity.kind}/${entity.metadata.name}`;
+        const destination = platformPath.normalize(
+          `${entityRootDir}/${relativeFilePath}`,
+        ); // Azure Blob Storage Container file relative path
+
+        return limiter(async () => {
+          await uploadPromises.push(
+            this.storageClient
+              .getContainerClient(this.containerName)
+              .getBlockBlobClient(destination)
+              .uploadFile(filePath),
+          );
+        });
+      });
+
+      await Promise.all(promises).then(() => {
+        this.logger.info(
+          `Successfully uploaded all the generated files for Entity ${entity.metadata.name}. Total number of files: ${allFilesToUpload.length}`,
+        );
+      });
+      return;
+    } catch (e) {
+      const errorMessage = `Unable to upload file(s) to Azure Blob Storage. Error ${e.message}`;
+      this.logger.error(errorMessage);
+      throw new Error(errorMessage);
+    }
+  }
+
+  private download(containerName: string, path: string): Promise {
+    return new Promise((resolve, reject) => {
+      const fileStreamChunks: Array = [];
+      this.storageClient
+        .getContainerClient(containerName)
+        .getBlockBlobClient(path)
+        .download()
+        .then(res => {
+          const body = res.readableStreamBody;
+          if (!body) {
+            reject(new Error(`Unable to parse the response data`));
+            return;
+          }
+          body
+            .on('error', e => {
+              this.logger.error(e.message);
+              reject(e.message);
+            })
+            .on('data', chunk => {
+              fileStreamChunks.push(chunk);
+            })
+            .on('end', () => {
+              resolve(Buffer.concat(fileStreamChunks));
+            });
+        });
+    });
+  }
+
+  async fetchTechDocsMetadata(
+    entityName: EntityName,
+  ): Promise {
+    const entityRootDir = `${entityName.namespace}/${entityName.kind}/${entityName.name}`;
+    try {
+      return await new Promise(resolve => {
+        const download = this.download(
+          this.containerName,
+          `${entityRootDir}/techdocs_metadata.json`,
+        );
+        resolve(JSON5.parse(download.toString()));
+      });
+    } catch (e) {
+      this.logger.error(e.message);
+      throw e;
+    }
+  }
+
+  /**
+   * Express route middleware to serve static files on a route in techdocs-backend.
+   */
+  docsRouter(): express.Handler {
+    return (req, res) => {
+      // Trim the leading forward slash
+      // filePath example - /default/Component/documented-component/index.html
+      const filePath = req.path.replace(/^\//, '');
+      // Files with different extensions (CSS, HTML) need to be served with different headers
+      const fileExtension = platformPath.extname(filePath);
+      const responseHeaders = getHeadersForFileExtension(fileExtension);
+
+      try {
+        this.download(this.containerName, filePath).then(fileContent => {
+          // Inject response headers
+          for (const [headerKey, headerValue] of Object.entries(
+            responseHeaders,
+          )) {
+            res.setHeader(headerKey, headerValue);
+          }
+          res.send(fileContent);
+        });
+      } catch (e) {
+        this.logger.error(e.message);
+        res.status(404).send(e.message);
+      }
+    };
+  }
+
+  /**
+   * A helper function which checks if index.html of an Entity's docs site is available. This
+   * can be used to verify if there are any pre-generated docs available to serve.
+   */
+  async hasDocsBeenGenerated(entity: Entity): Promise {
+    return new Promise(resolve => {
+      const entityRootDir = `${entity.metadata.namespace}/${entity.kind}/${entity.metadata.name}`;
+      this.storageClient
+        .getContainerClient(this.containerName)
+        .getBlockBlobClient(`${entityRootDir}/index.html`)
+        .exists()
+        .then((response: boolean) => {
+          resolve(response);
+        })
+        .catch(() => {
+          resolve(false);
+        });
+    });
+  }
+}
diff --git a/packages/techdocs-common/src/stages/publish/publish.test.ts b/packages/techdocs-common/src/stages/publish/publish.test.ts
index 89f2c0ffdd..d1faf82b78 100644
--- a/packages/techdocs-common/src/stages/publish/publish.test.ts
+++ b/packages/techdocs-common/src/stages/publish/publish.test.ts
@@ -22,6 +22,7 @@ import { Publisher } from './publish';
 import { LocalPublish } from './local';
 import { GoogleGCSPublish } from './googleStorage';
 import { AwsS3Publish } from './awsS3';
+import { AzureBlobStoragePublish } from './azureBlobStorage';
 
 const logger = getVoidLogger();
 const discovery: jest.Mocked = {
@@ -30,6 +31,10 @@ const discovery: jest.Mocked = {
 };
 
 describe('Publisher', () => {
+  beforeEach(() => {
+    jest.resetModules(); // clear the cache
+  });
+
   it('should create local publisher by default', async () => {
     const mockConfig = new ConfigReader({
       techdocs: {
@@ -105,4 +110,55 @@ describe('Publisher', () => {
     });
     expect(publisher).toBeInstanceOf(AwsS3Publish);
   });
+
+  it('should create Azure Blob Storage publisher from config', async () => {
+    const mockConfig = new ConfigReader({
+      techdocs: {
+        requestUrl: 'http://localhost:7000',
+        publisher: {
+          type: 'azureBlobStorage',
+          azureBlobStorage: {
+            credentials: {
+              accountName: 'accountName',
+              accountKey: 'accountKey',
+            },
+            containerName: 'containerName',
+          },
+        },
+      },
+    });
+
+    const publisher = await Publisher.fromConfig(mockConfig, {
+      logger,
+      discovery,
+    });
+    expect(publisher).toBeInstanceOf(AzureBlobStoragePublish);
+  });
+
+  it('should create Azure Blob Storage publisher from environment variables', async () => {
+    process.env.AZURE_TENANT_ID = 'AZURE_TENANT_ID';
+    process.env.AZURE_CLIENT_ID = 'AZURE_CLIENT_ID';
+    process.env.AZURE_CLIENT_SECRET = 'AZURE_CLIENT_SECRET';
+
+    const mockConfig = new ConfigReader({
+      techdocs: {
+        requestUrl: 'http://localhost:7000',
+        publisher: {
+          type: 'azureBlobStorage',
+          azureBlobStorage: {
+            credentials: {
+              accountName: 'accountName',
+            },
+            containerName: 'containerName',
+          },
+        },
+      },
+    });
+
+    const publisher = await Publisher.fromConfig(mockConfig, {
+      logger,
+      discovery,
+    });
+    expect(publisher).toBeInstanceOf(AzureBlobStoragePublish);
+  });
 });
diff --git a/packages/techdocs-common/src/stages/publish/publish.ts b/packages/techdocs-common/src/stages/publish/publish.ts
index 82232c2fd1..a4e33a2d9c 100644
--- a/packages/techdocs-common/src/stages/publish/publish.ts
+++ b/packages/techdocs-common/src/stages/publish/publish.ts
@@ -21,6 +21,7 @@ import { PublisherType, PublisherBase } from './types';
 import { LocalPublish } from './local';
 import { GoogleGCSPublish } from './googleStorage';
 import { AwsS3Publish } from './awsS3';
+import { AzureBlobStoragePublish } from './azureBlobStorage';
 
 type factoryOptions = {
   logger: Logger;
@@ -47,6 +48,11 @@ export class Publisher {
       case 'awsS3':
         logger.info('Creating AWS S3 Bucket publisher for TechDocs');
         return AwsS3Publish.fromConfig(config, logger);
+      case 'azureBlobStorage':
+        logger.info(
+          'Creating Azure Blob Storage Container publisher for TechDocs',
+        );
+        return AzureBlobStoragePublish.fromConfig(config, logger);
       case 'local':
         logger.info('Creating Local publisher for TechDocs');
         return new LocalPublish(config, logger, discovery);
diff --git a/packages/techdocs-common/src/stages/publish/types.ts b/packages/techdocs-common/src/stages/publish/types.ts
index db6a075d43..5e953deb81 100644
--- a/packages/techdocs-common/src/stages/publish/types.ts
+++ b/packages/techdocs-common/src/stages/publish/types.ts
@@ -19,7 +19,11 @@ import express from 'express';
 /**
  * Key for all the different types of TechDocs publishers that are supported.
  */
-export type PublisherType = 'local' | 'googleGcs' | 'awsS3';
+export type PublisherType =
+  | 'local'
+  | 'googleGcs'
+  | 'awsS3'
+  | 'azureBlobStorage';
 
 export type PublishRequest = {
   entity: Entity;
diff --git a/plugins/api-docs/package.json b/plugins/api-docs/package.json
index 5e3c42bfdf..4bd7bd1727 100644
--- a/plugins/api-docs/package.json
+++ b/plugins/api-docs/package.json
@@ -32,7 +32,7 @@
     "@asyncapi/react-component": "^0.18.2",
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-icons/font": "^1.0.2",
     "@material-ui/core": "^4.11.0",
diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx
index 10495bb957..67462b630c 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.test.tsx
@@ -16,7 +16,7 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
diff --git a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
index a602877525..df404ce7cd 100644
--- a/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
@@ -15,7 +15,7 @@
  */
 
 import { Content, ContentHeader, SupportButton, useApi } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button } from '@material-ui/core';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
diff --git a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
index 149f7470c3..101c28332a 100644
--- a/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
+++ b/plugins/api-docs/src/components/ApiExplorerTable/ApiExplorerTable.tsx
@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { ApiEntityV1alpha1, Entity } from '@backstage/catalog-model';
+import {
+  ApiEntityV1alpha1,
+  Entity,
+  EntityName,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+} from '@backstage/catalog-model';
 import {
   Table,
   TableColumn,
@@ -22,47 +28,77 @@ import {
   TableState,
   useQueryParamState,
 } from '@backstage/core';
+import {
+  EntityRefLink,
+  EntityRefLinks,
+  formatEntityRefTitle,
+  getEntityRelations,
+} from '@backstage/plugin-catalog-react';
 import { Chip } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React from 'react';
 import { ApiTypeTitle } from '../ApiDefinitionCard';
-import { EntityLink } from '../EntityLink';
 
-const columns: TableColumn[] = [
+type EntityRow = {
+  entity: ApiEntityV1alpha1;
+  resolved: {
+    name: string;
+    partOfSystemRelationTitle?: string;
+    partOfSystemRelations: EntityName[];
+    ownedByRelationsTitle?: string;
+    ownedByRelations: EntityName[];
+  };
+};
+
+const columns: TableColumn[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'resolved.name',
     highlight: true,
-    render: (entity: any) => (
-      {entity.metadata.name}
+    render: ({ entity }) => (
+      
+    ),
+  },
+  {
+    title: 'System',
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
+      
     ),
   },
   {
     title: 'Owner',
-    field: 'spec.owner',
-  },
-  {
-    title: 'Lifecycle',
-    field: 'spec.lifecycle',
-  },
-  {
-    title: 'Type',
-    field: 'spec.type',
-    render: (entity: Entity) => (
-      
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
+      
     ),
   },
+  {
+    title: 'Lifecycle',
+    field: 'entity.spec.lifecycle',
+  },
+  {
+    title: 'Type',
+    field: 'entity.spec.type',
+    render: ({ entity }) => ,
+  },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
   },
   {
     title: 'Tags',
-    field: 'metadata.tags',
+    field: 'entity.metadata.tags',
     cellStyle: {
       padding: '0px 16px 0px 20px',
     },
-    render: (entity: Entity) => (
+    render: ({ entity }) => (
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
@@ -123,8 +159,36 @@ export const ApiExplorerTable = ({
     );
   }
 
+  const rows = entities.map(entity => {
+    const partOfSystemRelations = getEntityRelations(entity, RELATION_PART_OF, {
+      kind: 'system',
+    });
+    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+
+    return {
+      entity: entity as ApiEntityV1alpha1,
+      resolved: {
+        name: formatEntityRefTitle(entity, {
+          defaultKind: 'API',
+        }),
+        ownedByRelationsTitle: ownedByRelations
+          .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
+          .join(', '),
+        ownedByRelations,
+        partOfSystemRelationTitle: partOfSystemRelations
+          .map(r =>
+            formatEntityRefTitle(r, {
+              defaultKind: 'system',
+            }),
+          )
+          .join(', '),
+        partOfSystemRelations,
+      },
+    };
+  });
+
   return (
-    
       isLoading={loading}
       columns={columns}
       options={{
@@ -134,7 +198,7 @@ export const ApiExplorerTable = ({
         padding: 'dense',
         showEmptyDataSourceMessage: !loading,
       }}
-      data={entities}
+      data={rows}
       filters={filters}
       initialState={queryParamState}
       onStateChange={setQueryParamState}
diff --git a/plugins/api-docs/src/components/ApisCards/ApisTable.tsx b/plugins/api-docs/src/components/ApisCards/ApisTable.tsx
index 7db62433eb..30716a61fb 100644
--- a/plugins/api-docs/src/components/ApisCards/ApisTable.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ApisTable.tsx
@@ -14,37 +14,73 @@
  * limitations under the License.
  */
 
-import { ApiEntity } from '@backstage/catalog-model';
+import {
+  ApiEntity,
+  EntityName,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+} from '@backstage/catalog-model';
 import { Table, TableColumn } from '@backstage/core';
+import {
+  EntityRefLink,
+  EntityRefLinks,
+  formatEntityRefTitle,
+  getEntityRelations,
+} from '@backstage/plugin-catalog-react';
 import React from 'react';
 import { ApiTypeTitle } from '../ApiDefinitionCard';
-import { EntityLink } from '../EntityLink';
 
-const columns: TableColumn[] = [
+type EntityRow = {
+  entity: ApiEntity;
+  resolved: {
+    partOfSystemRelationTitle?: string;
+    partOfSystemRelations: EntityName[];
+    ownedByRelationsTitle?: string;
+    ownedByRelations: EntityName[];
+  };
+};
+
+const columns: TableColumn[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'entity.metadata.name',
     highlight: true,
-    render: (entity: any) => (
-      {entity.metadata.name}
+    render: ({ entity }) => (
+      {entity.metadata.name}
+    ),
+  },
+  {
+    title: 'System',
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
+      
     ),
   },
   {
     title: 'Owner',
-    field: 'spec.owner',
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
+      
+    ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Type',
-    field: 'spec.type',
-    render: (entity: ApiEntity) => ,
+    field: 'entity.spec.type',
+    render: ({ entity }) => ,
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
     width: 'auto',
   },
 ];
@@ -65,8 +101,40 @@ export const ApisTable = ({ entities, title, variant = 'gridItem' }: Props) => {
     tableStyle.height = 'calc(100% - 10px)';
   }
 
+  const rows = entities
+    // TODO: For now we skip all APIs that we can't find without a warning!
+    .filter(e => e !== undefined)
+    .map(entity => {
+      const partOfSystemRelations = getEntityRelations(
+        entity,
+        RELATION_PART_OF,
+        {
+          kind: 'system',
+        },
+      );
+      const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+
+      return {
+        entity: entity as ApiEntity,
+        resolved: {
+          ownedByRelationsTitle: ownedByRelations
+            .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
+            .join(', '),
+          ownedByRelations,
+          partOfSystemRelationTitle: partOfSystemRelations
+            .map(r =>
+              formatEntityRefTitle(r, {
+                defaultKind: 'system',
+              }),
+            )
+            .join(', '),
+          partOfSystemRelations,
+        },
+      };
+    });
+
   return (
-    
+    
       columns={columns}
       title={title}
       style={tableStyle}
@@ -77,8 +145,7 @@ export const ApisTable = ({ entities, title, variant = 'gridItem' }: Props) => {
         actionsColumnIndex: -1,
         padding: 'dense',
       }}
-      // TODO: For now we skip all APIs that we can't find without a warning!
-      data={entities.filter(e => e !== undefined) as ApiEntity[]}
+      data={rows}
     />
   );
 };
diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
index a4a1e15511..54cf08a429 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.test.tsx
@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-import { Entity, RELATION_CONSUMES_API } from '@backstage/catalog-model';
+import {
+  Entity,
+  RELATION_CONSUMES_API,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+} from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -99,10 +104,27 @@ describe('', () => {
       },
       spec: {
         type: 'openapi',
-        owner: 'Test',
         lifecycle: 'production',
         definition: '...',
       },
+      relations: [
+        {
+          type: RELATION_PART_OF,
+          target: {
+            kind: 'System',
+            name: 'MySystem',
+            namespace: 'default',
+          },
+        },
+        {
+          type: RELATION_OWNED_BY,
+          target: {
+            kind: 'Group',
+            name: 'Test',
+            namespace: 'default',
+          },
+        },
+      ],
     });
     apiDocsConfig.getApiDefinitionWidget.mockReturnValue({
       type: 'openapi',
@@ -121,6 +143,7 @@ describe('', () => {
       expect(getByText(/target-name/i)).toBeInTheDocument();
       expect(getByText(/OpenAPI/)).toBeInTheDocument();
       expect(getByText(/Test/i)).toBeInTheDocument();
+      expect(getByText(/MySystem/i)).toBeInTheDocument();
       expect(getByText(/production/i)).toBeInTheDocument();
     });
   });
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
index 1f42ff9060..4300aeff6d 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.test.tsx
@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-import { Entity, RELATION_PROVIDES_API } from '@backstage/catalog-model';
+import {
+  Entity,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+  RELATION_PROVIDES_API,
+} from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -99,10 +104,27 @@ describe('', () => {
       },
       spec: {
         type: 'openapi',
-        owner: 'Test',
         lifecycle: 'production',
         definition: '...',
       },
+      relations: [
+        {
+          type: RELATION_PART_OF,
+          target: {
+            kind: 'System',
+            name: 'MySystem',
+            namespace: 'default',
+          },
+        },
+        {
+          type: RELATION_OWNED_BY,
+          target: {
+            kind: 'Group',
+            name: 'Test',
+            namespace: 'default',
+          },
+        },
+      ],
     });
     apiDocsConfig.getApiDefinitionWidget.mockReturnValue({
       type: 'openapi',
@@ -120,6 +142,7 @@ describe('', () => {
       expect(getByText(/Provided APIs/i)).toBeInTheDocument();
       expect(getByText(/target-name/i)).toBeInTheDocument();
       expect(getByText(/OpenAPI/)).toBeInTheDocument();
+      expect(getByText(/MySystem/)).toBeInTheDocument();
       expect(getByText(/Test/i)).toBeInTheDocument();
       expect(getByText(/production/i)).toBeInTheDocument();
     });
diff --git a/plugins/api-docs/src/components/ComponentsCards/ComponentsTable.tsx b/plugins/api-docs/src/components/ComponentsCards/ComponentsTable.tsx
index 1b62a56d10..bd9b0c765f 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ComponentsTable.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ComponentsTable.tsx
@@ -14,35 +14,71 @@
  * limitations under the License.
  */
 
-import { ComponentEntity } from '@backstage/catalog-model';
+import {
+  ComponentEntity,
+  EntityName,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+} from '@backstage/catalog-model';
 import { Table, TableColumn } from '@backstage/core';
+import {
+  EntityRefLink,
+  EntityRefLinks,
+  formatEntityRefTitle,
+  getEntityRelations,
+} from '@backstage/plugin-catalog-react';
 import React from 'react';
-import { EntityLink } from '../EntityLink';
 
-const columns: TableColumn[] = [
+type EntityRow = {
+  entity: ComponentEntity;
+  resolved: {
+    partOfSystemRelationTitle?: string;
+    partOfSystemRelations: EntityName[];
+    ownedByRelationsTitle?: string;
+    ownedByRelations: EntityName[];
+  };
+};
+
+const columns: TableColumn[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'entity.metadata.name',
     highlight: true,
-    render: (entity: any) => (
-      {entity.metadata.name}
+    render: ({ entity }) => (
+      {entity.metadata.name}
+    ),
+  },
+  {
+    title: 'System',
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
+      
     ),
   },
   {
     title: 'Owner',
-    field: 'spec.owner',
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
+      
+    ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Type',
-    field: 'spec.type',
+    field: 'entity.spec.type',
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
     width: 'auto',
   },
 ];
@@ -68,8 +104,40 @@ export const ComponentsTable = ({
     tableStyle.height = 'calc(100% - 10px)';
   }
 
+  const rows = entities
+    // TODO: For now we skip all Components that we can't find without a warning!
+    .filter(e => e !== undefined)
+    .map(entity => {
+      const partOfSystemRelations = getEntityRelations(
+        entity,
+        RELATION_PART_OF,
+        {
+          kind: 'system',
+        },
+      );
+      const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
+
+      return {
+        entity: entity as ComponentEntity,
+        resolved: {
+          ownedByRelationsTitle: ownedByRelations
+            .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
+            .join(', '),
+          ownedByRelations,
+          partOfSystemRelationTitle: partOfSystemRelations
+            .map(r =>
+              formatEntityRefTitle(r, {
+                defaultKind: 'system',
+              }),
+            )
+            .join(', '),
+          partOfSystemRelations,
+        },
+      };
+    });
+
   return (
-    
+    
       columns={columns}
       title={title}
       style={tableStyle}
@@ -80,8 +148,7 @@ export const ComponentsTable = ({
         actionsColumnIndex: -1,
         padding: 'dense',
       }}
-      // TODO: For now we skip all APIs that we can't find without a warning!
-      data={entities.filter(e => e !== undefined) as ComponentEntity[]}
+      data={rows}
     />
   );
 };
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
index 606ff7e77b..de66b2af06 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.test.tsx
@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-import { Entity, RELATION_API_CONSUMED_BY } from '@backstage/catalog-model';
+import {
+  Entity,
+  RELATION_API_CONSUMED_BY,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+} from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -104,9 +109,26 @@ describe('', () => {
       },
       spec: {
         type: 'service',
-        owner: 'Test',
         lifecycle: 'production',
       },
+      relations: [
+        {
+          type: RELATION_PART_OF,
+          target: {
+            kind: 'System',
+            name: 'MySystem',
+            namespace: 'default',
+          },
+        },
+        {
+          type: RELATION_OWNED_BY,
+          target: {
+            kind: 'Group',
+            name: 'Test',
+            namespace: 'default',
+          },
+        },
+      ],
     });
 
     const { getByText } = await renderInTestApp(
@@ -119,6 +141,7 @@ describe('', () => {
       expect(getByText(/Consumers/i)).toBeInTheDocument();
       expect(getByText(/target-name/i)).toBeInTheDocument();
       expect(getByText(/Test/i)).toBeInTheDocument();
+      expect(getByText(/MySystem/i)).toBeInTheDocument();
       expect(getByText(/production/i)).toBeInTheDocument();
     });
   });
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
index d1cec1722a..b7b1616e00 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.test.tsx
@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-import { Entity, RELATION_API_PROVIDED_BY } from '@backstage/catalog-model';
+import {
+  Entity,
+  RELATION_API_PROVIDED_BY,
+  RELATION_OWNED_BY,
+  RELATION_PART_OF,
+} from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
@@ -104,9 +109,26 @@ describe('', () => {
       },
       spec: {
         type: 'service',
-        owner: 'Test',
         lifecycle: 'production',
       },
+      relations: [
+        {
+          type: RELATION_PART_OF,
+          target: {
+            kind: 'System',
+            name: 'MySystem',
+            namespace: 'default',
+          },
+        },
+        {
+          type: RELATION_OWNED_BY,
+          target: {
+            kind: 'Group',
+            name: 'Test',
+            namespace: 'default',
+          },
+        },
+      ],
     });
 
     const { getByText } = await renderInTestApp(
@@ -119,6 +141,7 @@ describe('', () => {
       expect(getByText(/Providers/i)).toBeInTheDocument();
       expect(getByText(/target-name/i)).toBeInTheDocument();
       expect(getByText(/Test/i)).toBeInTheDocument();
+      expect(getByText(/MySystem/i)).toBeInTheDocument();
       expect(getByText(/production/i)).toBeInTheDocument();
     });
   });
diff --git a/plugins/api-docs/src/components/EntityLink/EntityLink.test.tsx b/plugins/api-docs/src/components/EntityLink/EntityLink.test.tsx
deleted file mode 100644
index 9221b96604..0000000000
--- a/plugins/api-docs/src/components/EntityLink/EntityLink.test.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Entity } from '@backstage/catalog-model';
-import { renderInTestApp } from '@backstage/test-utils';
-import React from 'react';
-import { EntityLink } from './EntityLink';
-
-describe('', () => {
-  it('provides link to entity page', async () => {
-    const entity: Entity = {
-      apiVersion: 'v1',
-      kind: 'Component',
-      metadata: {
-        name: 'my-name',
-        namespace: 'my-namespace',
-      },
-    };
-    const { getByText } = await renderInTestApp(
-      inner,
-    );
-    expect(getByText(/inner/i)).toBeInTheDocument();
-    expect(getByText(/inner/i)).toHaveAttribute(
-      'href',
-      '/catalog/my-namespace/component/my-name',
-    );
-  });
-});
diff --git a/plugins/api-docs/src/components/EntityLink/EntityLink.tsx b/plugins/api-docs/src/components/EntityLink/EntityLink.tsx
deleted file mode 100644
index 98b2103882..0000000000
--- a/plugins/api-docs/src/components/EntityLink/EntityLink.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Entity } from '@backstage/catalog-model';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
-import { Link } from '@material-ui/core';
-import React, { PropsWithChildren } from 'react';
-import { generatePath, Link as RouterLink } from 'react-router-dom';
-
-type Props = {
-  entity: Entity;
-};
-
-// TODO: Could be useful for others too, as part of the catalog plugin
-export const EntityLink = ({ entity, children }: PropsWithChildren) => {
-  return (
-    
-      {children}
-    
-  );
-};
diff --git a/plugins/api-docs/src/components/useRelatedEntities.ts b/plugins/api-docs/src/components/useRelatedEntities.ts
index 847ec30578..5c01d38189 100644
--- a/plugins/api-docs/src/components/useRelatedEntities.ts
+++ b/plugins/api-docs/src/components/useRelatedEntities.ts
@@ -15,7 +15,7 @@
  */
 import { Entity } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsyncRetry } from 'react-use';
 
 // TODO: Maybe this hook is interesting for others too?
diff --git a/plugins/app-backend/src/lib/config.ts b/plugins/app-backend/src/lib/config.ts
index 99590c1e2d..0607956894 100644
--- a/plugins/app-backend/src/lib/config.ts
+++ b/plugins/app-backend/src/lib/config.ts
@@ -84,13 +84,21 @@ export async function readConfigs(options: ReadOptions): Promise {
   const schemaPath = resolvePath(appDistDir, '.config-schema.json');
   if (await fs.pathExists(schemaPath)) {
     const serializedSchema = await fs.readJson(schemaPath);
-    const schema = await loadConfigSchema({ serialized: serializedSchema });
 
-    const frontendConfigs = await schema.process(
-      [{ data: config.get() as JsonObject, context: 'app' }],
-      { visibility: ['frontend'] },
-    );
-    appConfigs.push(...frontendConfigs);
+    try {
+      const schema = await loadConfigSchema({ serialized: serializedSchema });
+
+      const frontendConfigs = await schema.process(
+        [{ data: config.get() as JsonObject, context: 'app' }],
+        { visibility: ['frontend'] },
+      );
+      appConfigs.push(...frontendConfigs);
+    } catch (error) {
+      throw new Error(
+        'Invalid schema embedded in the app bundle, to fix this issue you need ' +
+          `to correct the schema and then rebuild the app bundle. ${error}`,
+      );
+    }
   }
 
   return appConfigs;
diff --git a/plugins/catalog-backend/src/ingestion/LocationReaders.ts b/plugins/catalog-backend/src/ingestion/LocationReaders.ts
index 046b6bdf76..a789e669d0 100644
--- a/plugins/catalog-backend/src/ingestion/LocationReaders.ts
+++ b/plugins/catalog-backend/src/ingestion/LocationReaders.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { UrlReader } from '@backstage/backend-common';
+import { NotAllowedError, UrlReader } from '@backstage/backend-common';
 import {
   Entity,
   EntityPolicy,
@@ -102,7 +102,7 @@ export class LocationReaders implements LocationReader {
           } else {
             output.errors.push({
               location: item.location,
-              error: new Error(
+              error: new NotAllowedError(
                 `Entity of kind ${item.entity.kind} is not allowed from location ${item.location.type} ${item.location.target}`,
               ),
             });
diff --git a/plugins/catalog-import/package.json b/plugins/catalog-import/package.json
index 5a4dbf8798..7f3cc3d1e3 100644
--- a/plugins/catalog-import/package.json
+++ b/plugins/catalog-import/package.json
@@ -33,7 +33,7 @@
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
     "@backstage/integration": "^0.3.1",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
@@ -49,6 +49,7 @@
     "yaml": "^1.10.0"
   },
   "devDependencies": {
+    "@backstage/catalog-client": "^0.3.5",
     "@backstage/cli": "^0.5.0",
     "@backstage/dev-utils": "^0.1.8",
     "@backstage/test-utils": "^0.1.6",
diff --git a/plugins/catalog-import/src/components/ComponentConfigDisplay.tsx b/plugins/catalog-import/src/components/ComponentConfigDisplay.tsx
index 96b1bf2298..9fb170c85c 100644
--- a/plugins/catalog-import/src/components/ComponentConfigDisplay.tsx
+++ b/plugins/catalog-import/src/components/ComponentConfigDisplay.tsx
@@ -14,32 +14,35 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
-import {
-  Button,
-  CircularProgress,
-  Grid,
-  Link,
-  List,
-  ListItem,
-  Typography,
-  Divider,
-} from '@material-ui/core';
-import { useGithubRepos } from '../util/useGithubRepos';
-import { ConfigSpec } from './ImportComponentPage';
+import { Entity } from '@backstage/catalog-model';
 import {
   errorApiRef,
   RouteRef,
   StructuredMetadataTable,
   useApi,
 } from '@backstage/core';
-import { PartialEntity } from '../util/types';
+import {
+  entityRoute,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
+import {
+  Button,
+  CircularProgress,
+  Divider,
+  Grid,
+  Link,
+  List,
+  ListItem,
+  Typography,
+} from '@material-ui/core';
+import React, { useCallback, useState } from 'react';
 import { generatePath, resolvePath } from 'react-router';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
 import { Link as RouterLink } from 'react-router-dom';
 import * as YAML from 'yaml';
+import { PartialEntity } from '../util/types';
 import { urlType } from '../util/urls';
+import { useGithubRepos } from '../util/useGithubRepos';
+import { ConfigSpec } from './ImportComponentPage';
 
 const getEntityCatalogPath = ({
   entity,
diff --git a/plugins/catalog-import/src/components/ImportComponentForm.test.tsx b/plugins/catalog-import/src/components/ImportComponentForm.test.tsx
index 91a5208bee..38b1065325 100644
--- a/plugins/catalog-import/src/components/ImportComponentForm.test.tsx
+++ b/plugins/catalog-import/src/components/ImportComponentForm.test.tsx
@@ -13,18 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { renderInTestApp } from '@backstage/test-utils';
-import { RegisterComponentForm } from './ImportComponentForm';
+import { CatalogClient } from '@backstage/catalog-client';
 import {
   ApiProvider,
   ApiRegistry,
   DiscoveryApi,
   errorApiRef,
 } from '@backstage/core';
-import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import React from 'react';
 import { catalogImportApiRef, CatalogImportClient } from '../api';
-import { fireEvent, waitFor, screen } from '@testing-library/react';
+import { RegisterComponentForm } from './ImportComponentForm';
 
 describe('', () => {
   let apis: ApiRegistry;
diff --git a/plugins/catalog-import/src/components/ImportComponentForm.tsx b/plugins/catalog-import/src/components/ImportComponentForm.tsx
index 0e59fed3c9..b3ec050ea3 100644
--- a/plugins/catalog-import/src/components/ImportComponentForm.tsx
+++ b/plugins/catalog-import/src/components/ImportComponentForm.tsx
@@ -15,6 +15,7 @@
  */
 
 import { errorApiRef, useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { BackstageTheme } from '@backstage/theme';
 import {
   Button,
@@ -26,11 +27,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useMountedState } from 'react-use';
-import { ComponentIdValidators } from '../util/validate';
-import { useGithubRepos } from '../util/useGithubRepos';
-import { ConfigSpec } from './ImportComponentPage';
-import { catalogApiRef } from '@backstage/plugin-catalog';
 import { urlType } from '../util/urls';
+import { useGithubRepos } from '../util/useGithubRepos';
+import { ComponentIdValidators } from '../util/validate';
+import { ConfigSpec } from './ImportComponentPage';
 
 const useStyles = makeStyles(theme => ({
   form: {
diff --git a/plugins/catalog-import/src/components/ImportComponentPage.test.tsx b/plugins/catalog-import/src/components/ImportComponentPage.test.tsx
index 932f9aafa0..f6ef07e1b2 100644
--- a/plugins/catalog-import/src/components/ImportComponentPage.test.tsx
+++ b/plugins/catalog-import/src/components/ImportComponentPage.test.tsx
@@ -13,22 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { msw, renderInTestApp } from '@backstage/test-utils';
-import { ImportComponentPage } from './ImportComponentPage';
+import { CatalogClient } from '@backstage/catalog-client';
 import {
   ApiProvider,
   ApiRegistry,
   configApiRef,
   errorApiRef,
 } from '@backstage/core';
-import { catalogApiRef, CatalogClient } from '@backstage/plugin-catalog';
-import { catalogImportApiRef, CatalogImportClient } from '../api';
-
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { msw, renderInTestApp } from '@backstage/test-utils';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
-
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
+import React from 'react';
+import { catalogImportApiRef, CatalogImportClient } from '../api';
+import { ImportComponentPage } from './ImportComponentPage';
 
 let codeSearchMockResponse: () => Promise<{
   data: {
diff --git a/plugins/catalog-import/src/index.ts b/plugins/catalog-import/src/index.ts
index ff7857cacd..dd8ca2bbb4 100644
--- a/plugins/catalog-import/src/index.ts
+++ b/plugins/catalog-import/src/index.ts
@@ -16,3 +16,4 @@
 
 export { plugin } from './plugin';
 export { Router } from './components/Router';
+export * from './api';
diff --git a/plugins/catalog-react/.eslintrc.js b/plugins/catalog-react/.eslintrc.js
new file mode 100644
index 0000000000..13573efa9c
--- /dev/null
+++ b/plugins/catalog-react/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: [require.resolve('@backstage/cli/config/eslint')],
+};
diff --git a/plugins/catalog-react/README.md b/plugins/catalog-react/README.md
new file mode 100644
index 0000000000..65ab45b9b2
--- /dev/null
+++ b/plugins/catalog-react/README.md
@@ -0,0 +1,14 @@
+# Catalog React
+
+WORK IN PROGRESS
+
+This is shared code of the frontend part of the default catalog plugin.
+
+It will implement the core API for handling your catalog of software, and
+supplies components that can be reused by third-party plugins.
+
+## Links
+
+- [Frontend part of the plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog)
+- [Backend part of the plugin](https://github.com/backstage/backstage/tree/master/plugins/catalog-backend)
+- [The Backstage homepage](https://backstage.io)
diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json
new file mode 100644
index 0000000000..94dc835d14
--- /dev/null
+++ b/plugins/catalog-react/package.json
@@ -0,0 +1,58 @@
+{
+  "name": "@backstage/plugin-catalog-react",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "homepage": "https://backstage.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/plugin-catalog-common-react"
+  },
+  "keywords": [
+    "backstage"
+  ],
+  "scripts": {
+    "build": "backstage-cli build",
+    "lint": "backstage-cli lint",
+    "test": "backstage-cli test",
+    "prepack": "backstage-cli prepack",
+    "postpack": "backstage-cli postpack",
+    "clean": "backstage-cli clean"
+  },
+  "dependencies": {
+    "@backstage/catalog-client": "^0.3.5",
+    "@backstage/catalog-model": "^0.7.0",
+    "@backstage/core": "^0.5.0",
+    "@material-ui/core": "^4.11.0",
+    "@types/react": "^16.9",
+    "react": "^16.13.1",
+    "react-router": "6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.0",
+    "react-use": "^15.3.3"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.5.0",
+    "@backstage/dev-utils": "^0.1.8",
+    "@backstage/test-utils": "^0.1.6",
+    "@testing-library/jest-dom": "^5.10.1",
+    "@testing-library/react": "^10.4.1",
+    "@testing-library/react-hooks": "^3.3.0",
+    "@testing-library/user-event": "^12.0.7",
+    "@types/jest": "^26.0.7",
+    "@types/node": "^12.0.0",
+    "cross-fetch": "^3.0.6",
+    "msw": "^0.21.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/plugins/catalog-react/src/api.ts b/plugins/catalog-react/src/api.ts
new file mode 100644
index 0000000000..9379fa7fb3
--- /dev/null
+++ b/plugins/catalog-react/src/api.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CatalogApi } from '@backstage/catalog-client';
+import { createApiRef } from '@backstage/core';
+
+export const catalogApiRef = createApiRef({
+  id: 'plugin.catalog.service',
+  description:
+    'Used by the Catalog plugin to make requests to accompanying backend',
+});
diff --git a/plugins/catalog/src/components/EntityProvider/EntityProvider.tsx b/plugins/catalog-react/src/components/EntityProvider/EntityProvider.tsx
similarity index 94%
rename from plugins/catalog/src/components/EntityProvider/EntityProvider.tsx
rename to plugins/catalog-react/src/components/EntityProvider/EntityProvider.tsx
index 9135b54638..45cdd56d04 100644
--- a/plugins/catalog/src/components/EntityProvider/EntityProvider.tsx
+++ b/plugins/catalog-react/src/components/EntityProvider/EntityProvider.tsx
@@ -15,7 +15,7 @@
  */
 import { Entity } from '@backstage/catalog-model';
 import React, { ReactNode } from 'react';
-import { EntityContext } from '../../hooks/useEntity';
+import { EntityContext } from '../../hooks';
 
 type EntityProviderProps = {
   entity: Entity;
diff --git a/plugins/catalog/src/components/EntityProvider/index.ts b/plugins/catalog-react/src/components/EntityProvider/index.ts
similarity index 100%
rename from plugins/catalog/src/components/EntityProvider/index.ts
rename to plugins/catalog-react/src/components/EntityProvider/index.ts
diff --git a/plugins/catalog/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
similarity index 100%
rename from plugins/catalog/src/components/EntityRefLink/EntityRefLink.test.tsx
rename to plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
diff --git a/plugins/catalog/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
similarity index 91%
rename from plugins/catalog/src/components/EntityRefLink/EntityRefLink.tsx
rename to plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
index 64b2bb8615..ae6f807275 100644
--- a/plugins/catalog/src/components/EntityRefLink/EntityRefLink.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
@@ -31,9 +31,6 @@ type EntityRefLinkProps = {
   children?: React.ReactNode;
 };
 
-// TODO: This component is private for now, as it should probably belong into
-// some kind of helper module for the catalog plugin to avoid a dependency on
-// the catalog plugin itself.
 export const EntityRefLink = ({
   entityRef,
   defaultKind,
diff --git a/plugins/catalog/src/components/EntityRefLink/EntityRefLinks.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx
similarity index 100%
rename from plugins/catalog/src/components/EntityRefLink/EntityRefLinks.test.tsx
rename to plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.test.tsx
diff --git a/plugins/catalog/src/components/EntityRefLink/EntityRefLinks.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
similarity index 96%
rename from plugins/catalog/src/components/EntityRefLink/EntityRefLinks.tsx
rename to plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
index 3c8beaec6f..fb99fad176 100644
--- a/plugins/catalog/src/components/EntityRefLink/EntityRefLinks.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLinks.tsx
@@ -22,7 +22,6 @@ type EntityRefLinksProps = {
   defaultKind?: string;
 };
 
-// TODO: Move into a shared helper package
 export const EntityRefLinks = ({
   entityRefs,
   defaultKind,
diff --git a/plugins/catalog/src/components/EntityRefLink/format.test.ts b/plugins/catalog-react/src/components/EntityRefLink/format.test.ts
similarity index 100%
rename from plugins/catalog/src/components/EntityRefLink/format.test.ts
rename to plugins/catalog-react/src/components/EntityRefLink/format.test.ts
diff --git a/plugins/catalog/src/components/EntityRefLink/format.ts b/plugins/catalog-react/src/components/EntityRefLink/format.ts
similarity index 100%
rename from plugins/catalog/src/components/EntityRefLink/format.ts
rename to plugins/catalog-react/src/components/EntityRefLink/format.ts
diff --git a/plugins/catalog/src/components/EntityRefLink/index.ts b/plugins/catalog-react/src/components/EntityRefLink/index.ts
similarity index 100%
rename from plugins/catalog/src/components/EntityRefLink/index.ts
rename to plugins/catalog-react/src/components/EntityRefLink/index.ts
diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts
new file mode 100644
index 0000000000..fcfa8207b3
--- /dev/null
+++ b/plugins/catalog-react/src/components/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export * from './EntityRefLink';
+export * from './EntityProvider';
diff --git a/plugins/catalog-react/src/hooks/index.ts b/plugins/catalog-react/src/hooks/index.ts
new file mode 100644
index 0000000000..77de70b8d4
--- /dev/null
+++ b/plugins/catalog-react/src/hooks/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityContext, useEntity, useEntityFromUrl } from './useEntity';
+export { useEntityCompoundName } from './useEntityCompoundName';
diff --git a/plugins/catalog/src/hooks/useEntity.ts b/plugins/catalog-react/src/hooks/useEntity.ts
similarity index 94%
rename from plugins/catalog/src/hooks/useEntity.ts
rename to plugins/catalog-react/src/hooks/useEntity.ts
index 289c4e26aa..faeeca11ed 100644
--- a/plugins/catalog/src/hooks/useEntity.ts
+++ b/plugins/catalog-react/src/hooks/useEntity.ts
@@ -18,8 +18,8 @@ import { errorApiRef, useApi } from '@backstage/core';
 import { createContext, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { useAsync } from 'react-use';
-import { useEntityCompoundName } from '../components/useEntityCompoundName';
-import { catalogApiRef } from '../plugin';
+import { useEntityCompoundName } from './useEntityCompoundName';
+import { catalogApiRef } from '../api';
 
 type EntityLoadingStatus = {
   entity?: Entity;
diff --git a/plugins/catalog/src/components/useEntityCompoundName.ts b/plugins/catalog-react/src/hooks/useEntityCompoundName.ts
similarity index 100%
rename from plugins/catalog/src/components/useEntityCompoundName.ts
rename to plugins/catalog-react/src/hooks/useEntityCompoundName.ts
diff --git a/plugins/catalog-react/src/index.ts b/plugins/catalog-react/src/index.ts
new file mode 100644
index 0000000000..af3eca4e0a
--- /dev/null
+++ b/plugins/catalog-react/src/index.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type { CatalogApi } from '@backstage/catalog-client';
+export { catalogApiRef } from './api';
+export * from './components';
+export * from './hooks';
+export {
+  catalogRouteRef,
+  entityRoute,
+  entityRouteParams,
+  entityRouteRef,
+  rootRoute,
+} from './routes';
+export * from './utils';
diff --git a/plugins/catalog/src/routes.ts b/plugins/catalog-react/src/routes.ts
similarity index 100%
rename from plugins/catalog/src/routes.ts
rename to plugins/catalog-react/src/routes.ts
diff --git a/plugins/cost-insights/src/components/AlertActionCardList/index.ts b/plugins/catalog-react/src/setupTests.ts
similarity index 89%
rename from plugins/cost-insights/src/components/AlertActionCardList/index.ts
rename to plugins/catalog-react/src/setupTests.ts
index a0ce118482..aea2220869 100644
--- a/plugins/cost-insights/src/components/AlertActionCardList/index.ts
+++ b/plugins/catalog-react/src/setupTests.ts
@@ -14,4 +14,5 @@
  * limitations under the License.
  */
 
-export { AlertActionCardList } from './AlertActionCardList';
+import '@testing-library/jest-dom';
+import 'cross-fetch/polyfill';
diff --git a/plugins/catalog/src/components/getEntityRelations.test.ts b/plugins/catalog-react/src/utils/getEntityRelations.test.ts
similarity index 100%
rename from plugins/catalog/src/components/getEntityRelations.test.ts
rename to plugins/catalog-react/src/utils/getEntityRelations.test.ts
diff --git a/plugins/catalog/src/components/getEntityRelations.ts b/plugins/catalog-react/src/utils/getEntityRelations.ts
similarity index 100%
rename from plugins/catalog/src/components/getEntityRelations.ts
rename to plugins/catalog-react/src/utils/getEntityRelations.ts
diff --git a/plugins/catalog-react/src/utils/index.ts b/plugins/catalog-react/src/utils/index.ts
new file mode 100644
index 0000000000..2efb35703e
--- /dev/null
+++ b/plugins/catalog-react/src/utils/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { getEntityRelations } from './getEntityRelations';
+export { isOwnerOf } from './isOwnerOf';
diff --git a/plugins/catalog/src/components/isOwnerOf.test.ts b/plugins/catalog-react/src/utils/isOwnerOf.test.ts
similarity index 100%
rename from plugins/catalog/src/components/isOwnerOf.test.ts
rename to plugins/catalog-react/src/utils/isOwnerOf.test.ts
diff --git a/plugins/catalog/src/components/isOwnerOf.ts b/plugins/catalog-react/src/utils/isOwnerOf.ts
similarity index 100%
rename from plugins/catalog/src/components/isOwnerOf.ts
rename to plugins/catalog-react/src/utils/isOwnerOf.ts
diff --git a/plugins/catalog/package.json b/plugins/catalog/package.json
index 90bdd2f3c7..bf30e28571 100644
--- a/plugins/catalog/package.json
+++ b/plugins/catalog/package.json
@@ -33,6 +33,7 @@
     "@backstage/catalog-client": "^0.3.5",
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/plugin-scaffolder": "^0.4.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
index 82652b3986..75b7827111 100644
--- a/plugins/catalog/src/components/AboutCard/AboutContent.tsx
+++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx
@@ -19,10 +19,12 @@ import {
   RELATION_OWNED_BY,
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
+import {
+  EntityRefLinks,
+  getEntityRelations,
+} from '@backstage/plugin-catalog-react';
 import { Chip, Grid, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
-import { EntityRefLinks } from '../EntityRefLink';
-import { getEntityRelations } from '../getEntityRelations';
 import { AboutField } from './AboutField';
 
 const useStyles = makeStyles({
diff --git a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx
index e78cedbe2d..efacfa4320 100644
--- a/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx
+++ b/plugins/catalog/src/components/CatalogFilter/AllServicesCount.tsx
@@ -15,10 +15,10 @@
  */
 
 import { useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { CircularProgress, useTheme } from '@material-ui/core';
 import React from 'react';
 import { useAsync } from 'react-use';
-import { catalogApiRef } from '../../plugin';
 
 export const AllServicesCount = () => {
   const theme = useTheme();
diff --git a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx
index b92fc3d4bc..0cc2108985 100644
--- a/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx
+++ b/plugins/catalog/src/components/CatalogFilter/CatalogFilter.test.tsx
@@ -23,11 +23,11 @@ import {
   identityApiRef,
   storageApiRef,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { EntityFilterGroupsProvider } from '../../filter';
-import { catalogApiRef } from '../../plugin';
 import { ButtonGroup, CatalogFilter } from './CatalogFilter';
 
 describe('Catalog Filter', () => {
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
index 28fb1b08c7..42c9cf1117 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.test.tsx
@@ -28,11 +28,11 @@ import {
   ProfileInfo,
   storageApiRef,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { EntityFilterGroupsProvider } from '../../filter';
-import { catalogApiRef } from '../../plugin';
 import { CatalogPage } from './CatalogPage';
 
 describe('CatalogPage', () => {
diff --git a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
index afb812ed06..1298d5e190 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
@@ -22,6 +22,7 @@ import {
   SupportButton,
   useApi,
 } from '@backstage/core';
+import { catalogApiRef, isOwnerOf } from '@backstage/plugin-catalog-react';
 import { rootRoute as scaffolderRootRoute } from '@backstage/plugin-scaffolder';
 import { Button, makeStyles } from '@material-ui/core';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -30,14 +31,12 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import { EntityFilterGroupsProvider, useFilteredEntities } from '../../filter';
 import { useStarredEntities } from '../../hooks/useStarredEntities';
-import { catalogApiRef } from '../../plugin';
 import { ButtonGroup, CatalogFilter } from '../CatalogFilter/CatalogFilter';
 import { CatalogTable } from '../CatalogTable/CatalogTable';
 import { ResultsFilter } from '../ResultsFilter/ResultsFilter';
+import { useOwnUser } from '../useOwnUser';
 import CatalogLayout from './CatalogLayout';
 import { CatalogTabs, LabeledComponentType } from './CatalogTabs';
-import { useOwnUser } from '../useOwnUser';
-import { isOwnerOf } from '../isOwnerOf';
 
 const useStyles = makeStyles(theme => ({
   contentWrapper: {
diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
index 18c61c2a04..30a19145f2 100644
--- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
+++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx
@@ -20,6 +20,12 @@ import {
   RELATION_PART_OF,
 } from '@backstage/catalog-model';
 import { Table, TableColumn, TableProps } from '@backstage/core';
+import {
+  EntityRefLink,
+  EntityRefLinks,
+  formatEntityRefTitle,
+  getEntityRelations,
+} from '@backstage/plugin-catalog-react';
 import { Chip } from '@material-ui/core';
 import Edit from '@material-ui/icons/Edit';
 import OpenInNew from '@material-ui/icons/OpenInNew';
@@ -28,19 +34,15 @@ import React from 'react';
 import { findLocationForEntityMeta } from '../../data/utils';
 import { useStarredEntities } from '../../hooks/useStarredEntities';
 import { createEditLink } from '../createEditLink';
-import {
-  EntityRefLink,
-  EntityRefLinks,
-  formatEntityRefTitle,
-} from '../EntityRefLink';
 import {
   favouriteEntityIcon,
   favouriteEntityTooltip,
 } from '../FavouriteEntity/FavouriteEntity';
-import { getEntityRelations } from '../getEntityRelations';
 
-type EntityRow = Entity & {
-  row: {
+type EntityRow = {
+  entity: Entity;
+  resolved: {
+    name: string;
     partOfSystemRelationTitle?: string;
     partOfSystemRelations: EntityName[];
     ownedByRelationsTitle?: string;
@@ -51,47 +53,47 @@ type EntityRow = Entity & {
 const columns: TableColumn[] = [
   {
     title: 'Name',
-    field: 'metadata.name',
+    field: 'resolved.name',
     highlight: true,
-    render: entity => (
-      {entity.metadata.name}
+    render: ({ entity }) => (
+      
     ),
   },
   {
     title: 'System',
-    field: 'row.partOfSystemRelationTitle',
-    render: entity => (
+    field: 'resolved.partOfSystemRelationTitle',
+    render: ({ resolved }) => (
       
     ),
   },
   {
     title: 'Owner',
-    field: 'row.ownedByRelationsTitle',
-    render: entity => (
+    field: 'resolved.ownedByRelationsTitle',
+    render: ({ resolved }) => (
       
     ),
   },
   {
     title: 'Lifecycle',
-    field: 'spec.lifecycle',
+    field: 'entity.spec.lifecycle',
   },
   {
     title: 'Description',
-    field: 'metadata.description',
+    field: 'entity.metadata.description',
   },
   {
     title: 'Tags',
-    field: 'metadata.tags',
+    field: 'entity.metadata.tags',
     cellStyle: {
       padding: '0px 16px 0px 20px',
     },
-    render: entity => (
+    render: ({ entity }) => (
       <>
         {entity.metadata.tags &&
           entity.metadata.tags.map(t => (
@@ -133,9 +135,9 @@ export const CatalogTable = ({
     );
   }
 
-  const actions: TableProps['actions'] = [
-    (rowData: Entity) => {
-      const location = findLocationForEntityMeta(rowData.metadata);
+  const actions: TableProps['actions'] = [
+    ({ entity }) => {
+      const location = findLocationForEntityMeta(entity.metadata);
       return {
         icon: () => ,
         tooltip: 'View',
@@ -145,8 +147,8 @@ export const CatalogTable = ({
         },
       };
     },
-    (rowData: Entity) => {
-      const location = findLocationForEntityMeta(rowData.metadata);
+    ({ entity }) => {
+      const location = findLocationForEntityMeta(entity.metadata);
       return {
         icon: () => ,
         tooltip: 'Edit',
@@ -156,36 +158,40 @@ export const CatalogTable = ({
         },
       };
     },
-    (rowData: Entity) => {
-      const isStarred = isStarredEntity(rowData);
+    ({ entity }) => {
+      const isStarred = isStarredEntity(entity);
       return {
         cellStyle: { paddingLeft: '1em' },
         icon: () => favouriteEntityIcon(isStarred),
         tooltip: favouriteEntityTooltip(isStarred),
-        onClick: () => toggleStarredEntity(rowData),
+        onClick: () => toggleStarredEntity(entity),
       };
     },
   ];
 
-  const rows = entities.map(e => {
-    const partOfSystemRelations = getEntityRelations(e, RELATION_PART_OF, {
+  const rows = entities.map(entity => {
+    const partOfSystemRelations = getEntityRelations(entity, RELATION_PART_OF, {
       kind: 'system',
     });
-    const ownedByRelations = getEntityRelations(e, RELATION_OWNED_BY);
+    const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
 
     return {
-      ...e,
-      row: {
+      entity,
+      resolved: {
+        name: formatEntityRefTitle(entity, {
+          defaultKind: 'Component',
+        }),
         ownedByRelationsTitle: ownedByRelations
           .map(r => formatEntityRefTitle(r, { defaultKind: 'group' }))
           .join(', '),
         ownedByRelations,
-        partOfSystemRelationTitle:
-          partOfSystemRelations.length > 0
-            ? formatEntityRefTitle(partOfSystemRelations[0], {
-                defaultKind: 'system',
-              })
-            : undefined,
+        partOfSystemRelationTitle: partOfSystemRelations
+          .map(r =>
+            formatEntityRefTitle(r, {
+              defaultKind: 'system',
+            }),
+          )
+          .join(', '),
         partOfSystemRelations,
       },
     };
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
index 5d1f010740..0d8ae56262 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.test.tsx
@@ -13,22 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { EntityLayout } from './EntityLayout';
+import { CatalogApi } from '@backstage/catalog-client';
+import { Entity } from '@backstage/catalog-model';
 import {
   AlertApi,
   alertApiRef,
   ApiProvider,
   ApiRegistry,
 } from '@backstage/core';
+import { catalogApiRef, EntityContext } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, withLogCollector } from '@backstage/test-utils';
 import { fireEvent } from '@testing-library/react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { Routes, Route } from 'react-router';
-import { Entity } from '@backstage/catalog-model';
-import { EntityContext } from '../../hooks/useEntity';
-import { catalogApiRef } from '../../plugin';
-import { CatalogApi } from '@backstage/catalog-client';
+import { Route, Routes } from 'react-router';
+import { EntityLayout } from './EntityLayout';
 
 const mockEntityData = {
   loading: false,
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
index 7f09cf557b..6f837211c7 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
@@ -14,15 +14,6 @@
  * limitations under the License.
  */
 
-import React, {
-  Children,
-  Fragment,
-  PropsWithChildren,
-  ReactNode,
-  isValidElement,
-  useContext,
-  useState,
-} from 'react';
 import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import {
   attachComponentData,
@@ -32,14 +23,25 @@ import {
   Page,
   Progress,
 } from '@backstage/core';
+import {
+  EntityContext,
+  useEntityCompoundName,
+} from '@backstage/plugin-catalog-react';
 import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import React, {
+  Children,
+  Fragment,
+  isValidElement,
+  PropsWithChildren,
+  ReactNode,
+  useContext,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router';
-import { EntityContext } from '../../hooks/useEntity';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-import { useEntityCompoundName } from '../useEntityCompoundName';
 import { TabbedLayout } from './TabbedLayout';
 
 type SubRoute = {
diff --git a/plugins/catalog/src/components/EntityLoaderProvider/EntityLoaderProvider.tsx b/plugins/catalog/src/components/EntityLoaderProvider/EntityLoaderProvider.tsx
index 98b8295047..97a4263e0d 100644
--- a/plugins/catalog/src/components/EntityLoaderProvider/EntityLoaderProvider.tsx
+++ b/plugins/catalog/src/components/EntityLoaderProvider/EntityLoaderProvider.tsx
@@ -13,8 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import {
+  EntityContext,
+  useEntityFromUrl,
+} from '@backstage/plugin-catalog-react';
 import React, { ReactNode } from 'react';
-import { useEntityFromUrl, EntityContext } from '../../hooks/useEntity';
 
 export const EntityLoaderProvider = ({ children }: { children: ReactNode }) => {
   const { entity, loading, error } = useEntityFromUrl();
diff --git a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
index eb75593ffc..1f42cc7cc1 100644
--- a/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
+++ b/plugins/catalog/src/components/EntityPageLayout/EntityPageLayout.tsx
@@ -19,11 +19,14 @@ import { Box } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
 import React, { PropsWithChildren, useContext, useState } from 'react';
 import { useNavigate } from 'react-router';
-import { EntityContext } from '../../hooks/useEntity';
+import {
+  EntityContext,
+  useEntityCompoundName,
+} from '@backstage/plugin-catalog-react';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-import { useEntityCompoundName } from '../useEntityCompoundName';
+
 import { Tabbed } from './Tabbed';
 
 const EntityPageTitle = ({
diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx
index 292cd37ede..20b9aaba4f 100644
--- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx
+++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.test.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { render } from '@testing-library/react';
-import { EntityContext } from '../../hooks/useEntity';
 import { Entity } from '@backstage/catalog-model';
-import { EntitySwitch } from './EntitySwitch';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { render } from '@testing-library/react';
+import React from 'react';
 import { isKind } from './conditions';
+import { EntitySwitch } from './EntitySwitch';
 
 describe('EntitySwitch', () => {
   it('should switch child when entity switches', () => {
diff --git a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx
index 3333a85d29..a3ede42288 100644
--- a/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx
+++ b/plugins/catalog/src/components/EntitySwitch/EntitySwitch.tsx
@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
+import { Entity } from '@backstage/catalog-model';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import {
-  ReactNode,
-  PropsWithChildren,
   Children,
   Fragment,
-  useMemo,
   isValidElement,
+  PropsWithChildren,
+  ReactNode,
+  useMemo,
 } from 'react';
-import { useEntity } from '../../hooks/useEntity';
-import { Entity } from '@backstage/catalog-model';
 
 const EntitySwitchCase = (_: {
   if?: (entity: Entity) => boolean;
diff --git a/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx b/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx
index d105979600..9be1c995e8 100644
--- a/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx
+++ b/plugins/catalog/src/components/ResultsFilter/ResultsFilter.test.tsx
@@ -23,11 +23,11 @@ import {
   identityApiRef,
   storageApiRef,
 } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi, wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { EntityFilterGroupsProvider } from '../../filter';
-import { catalogApiRef } from '../../plugin';
 import { ResultsFilter } from './ResultsFilter';
 
 describe('Results Filter', () => {
diff --git a/plugins/catalog/src/components/Router.tsx b/plugins/catalog/src/components/Router.tsx
index 6a4593fb80..3e51b74dc2 100644
--- a/plugins/catalog/src/components/Router.tsx
+++ b/plugins/catalog/src/components/Router.tsx
@@ -15,15 +15,18 @@
  */
 import { ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
 import { Content } from '@backstage/core';
+import {
+  entityRoute,
+  rootRoute,
+  useEntity,
+} from '@backstage/plugin-catalog-react';
 import { Link, Typography } from '@material-ui/core';
 import React, { ComponentType } from 'react';
 import { Navigate, Route, Routes, useParams } from 'react-router';
-import { useEntity } from '../hooks/useEntity';
-import { entityRoute, rootRoute } from '../routes';
 import { CatalogPage } from './CatalogPage';
+import { EntityLoaderProvider } from './EntityLoaderProvider';
 import { EntityNotFound } from './EntityNotFound';
 import { EntityPageLayout } from './EntityPageLayout';
-import { EntityLoaderProvider } from './EntityLoaderProvider';
 
 const DefaultEntityPage = () => (
   
diff --git a/plugins/catalog/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx b/plugins/catalog/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
index 2c8fcfd6e9..06ea1eee27 100644
--- a/plugins/catalog/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
+++ b/plugins/catalog/src/components/UnregisterEntityDialog/UnregisterEntityDialog.tsx
@@ -16,6 +16,10 @@
 
 import { Entity, ORIGIN_LOCATION_ANNOTATION } from '@backstage/catalog-model';
 import { alertApiRef, configApiRef, Progress, useApi } from '@backstage/core';
+import {
+  catalogApiRef,
+  formatEntityRefTitle,
+} from '@backstage/plugin-catalog-react';
 import {
   Button,
   Dialog,
@@ -31,8 +35,6 @@ import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
-import { catalogApiRef } from '../../plugin';
-import { formatEntityRefTitle } from '../EntityRefLink';
 
 type Props = {
   open: boolean;
diff --git a/plugins/catalog/src/components/useOwnUser.ts b/plugins/catalog/src/components/useOwnUser.ts
index 9aa4bda99c..29d8a0d11f 100644
--- a/plugins/catalog/src/components/useOwnUser.ts
+++ b/plugins/catalog/src/components/useOwnUser.ts
@@ -15,10 +15,10 @@
  */
 
 import { UserEntity } from '@backstage/catalog-model';
+import { identityApiRef, useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
-import { identityApiRef, useApi } from '@backstage/core';
-import { catalogApiRef } from '../plugin';
 
 /**
  * Get the catalog User entity (if any) that matches the logged-in user.
diff --git a/plugins/catalog/src/extensions.tsx b/plugins/catalog/src/extensions.tsx
index dcb9ba2aff..1eaa30b769 100644
--- a/plugins/catalog/src/extensions.tsx
+++ b/plugins/catalog/src/extensions.tsx
@@ -15,7 +15,10 @@
  */
 
 import { createRoutableExtension } from '@backstage/core';
-import { catalogRouteRef, entityRouteRef } from './routes';
+import {
+  catalogRouteRef,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
 import { plugin } from './plugin';
 
 export const CatalogIndexPage = plugin.provide(
diff --git a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx
index edda8eecb5..69ae9b83d6 100644
--- a/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx
+++ b/plugins/catalog/src/filter/EntityFilterGroupsProvider.tsx
@@ -16,9 +16,9 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useAsyncFn } from 'react-use';
-import { catalogApiRef } from '../plugin';
 import { filterGroupsContext, FilterGroupsContext } from './context';
 import {
   EntityFilterFn,
diff --git a/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx b/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx
index e9af063160..685fc751d2 100644
--- a/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx
+++ b/plugins/catalog/src/filter/useEntityFilterGroup.test.tsx
@@ -15,10 +15,10 @@
  */
 
 import { ApiProvider, ApiRegistry, storageApiRef } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { MockStorageApi } from '@backstage/test-utils';
 import { act, renderHook } from '@testing-library/react-hooks';
 import React from 'react';
-import { catalogApiRef } from '../plugin';
 import { EntityFilterGroupsProvider } from './EntityFilterGroupsProvider';
 import { FilterGroup, FilterGroupStatesReady } from './types';
 import { useEntityFilterGroup } from './useEntityFilterGroup';
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 2152933daf..80367f80e4 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -14,15 +14,10 @@
  * limitations under the License.
  */
 
-export * from '@backstage/catalog-client';
 export { AboutCard } from './components/AboutCard';
-export { EntityPageLayout } from './components/EntityPageLayout';
 export { EntityLayout } from './components/EntityLayout';
-export { EntityProvider } from './components/EntityProvider';
+export { EntityPageLayout } from './components/EntityPageLayout';
 export * from './components/EntitySwitch';
 export { Router } from './components/Router';
-export { useEntityCompoundName } from './components/useEntityCompoundName';
-export { EntityContext, useEntity } from './hooks/useEntity';
-export { catalogApiRef, plugin } from './plugin';
-export * from './routes';
 export * from './extensions';
+export { plugin } from './plugin';
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index 0c2b3b18c5..69a1285ab4 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/plugins/catalog/src/plugin.ts
@@ -14,20 +14,17 @@
  * limitations under the License.
  */
 
-import { CatalogApi, CatalogClient } from '@backstage/catalog-client';
+import { CatalogClient } from '@backstage/catalog-client';
 import {
   createApiFactory,
-  createApiRef,
   createPlugin,
   discoveryApiRef,
 } from '@backstage/core';
-import { catalogRouteRef, entityRouteRef } from './routes';
-
-export const catalogApiRef = createApiRef({
-  id: 'plugin.catalog.service',
-  description:
-    'Used by the Catalog plugin to make requests to accompanying backend',
-});
+import {
+  catalogApiRef,
+  catalogRouteRef,
+  entityRouteRef,
+} from '@backstage/plugin-catalog-react';
 
 export const plugin = createPlugin({
   id: 'catalog',
diff --git a/plugins/circleci/package.json b/plugins/circleci/package.json
index ddae98a566..f128540784 100644
--- a/plugins/circleci/package.json
+++ b/plugins/circleci/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/circleci/src/state/useBuilds.ts b/plugins/circleci/src/state/useBuilds.ts
index c172a88985..7968379ee4 100644
--- a/plugins/circleci/src/state/useBuilds.ts
+++ b/plugins/circleci/src/state/useBuilds.ts
@@ -15,14 +15,14 @@
  */
 
 import { errorApiRef, useApi } from '@backstage/core';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { BuildSummary, GitType } from 'circleci-api';
+import { getOr } from 'lodash/fp';
 import { useCallback, useEffect, useState } from 'react';
 import { useAsyncRetry } from 'react-use';
 import { circleCIApiRef } from '../api';
 import type { CITableBuildInfo } from '../components/BuildsPage/lib/CITable';
-import { useEntity } from '@backstage/plugin-catalog';
 import { CIRCLECI_ANNOTATION } from '../constants';
-import { getOr } from 'lodash/fp';
 
 const makeReadableStatus = (status: string | undefined) => {
   if (!status) return '';
diff --git a/plugins/cloudbuild/package.json b/plugins/cloudbuild/package.json
index 9a05a652b9..3e5bbef3a9 100644
--- a/plugins/cloudbuild/package.json
+++ b/plugins/cloudbuild/package.json
@@ -32,7 +32,6 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/cost-insights/CHANGELOG.md b/plugins/cost-insights/CHANGELOG.md
index a979f1476b..78d4c69da4 100644
--- a/plugins/cost-insights/CHANGELOG.md
+++ b/plugins/cost-insights/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @backstage/plugin-cost-insights
 
+## 0.7.0
+
+### Minor Changes
+
+- 19172f5a9: add alert hooks
+
 ## 0.6.0
 
 ### Minor Changes
diff --git a/plugins/cost-insights/package.json b/plugins/cost-insights/package.json
index 72a9e92633..022e778150 100644
--- a/plugins/cost-insights/package.json
+++ b/plugins/cost-insights/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-cost-insights",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
diff --git a/plugins/cost-insights/src/alerts/KubernetesMigrationAlert.tsx b/plugins/cost-insights/src/alerts/KubernetesMigrationAlert.tsx
new file mode 100644
index 0000000000..31a4d7e0e9
--- /dev/null
+++ b/plugins/cost-insights/src/alerts/KubernetesMigrationAlert.tsx
@@ -0,0 +1,159 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import pluralize from 'pluralize';
+import { MigrationAlertCard } from '../components/MigrationAlertCard';
+import { CostInsightsApi } from '../api';
+import {
+  Alert,
+  AlertForm,
+  AlertOptions,
+  AlertStatus,
+  AlertSnoozeFormData,
+  ChangeStatistic,
+  Entity,
+} from '../types';
+import { MigrationDismissForm, MigrationDismissFormData } from '../forms';
+
+export interface MigrationData {
+  startDate: string;
+  endDate: string;
+  change: ChangeStatistic;
+  services: Array;
+}
+
+export interface MigrationAlert extends Alert {
+  api: CostInsightsApi;
+  data: MigrationData;
+}
+
+/**
+ * This is an example of an Alert implementation using optional event hooks.
+ *
+ * Event hooks can be used to enable users to dismiss, snooze, or accept an action item
+ * - or any combination thereof. Defining a hook will generate default UI - button, dialog and
+ * form. Cost Insights does not preserve client side alert state - each hook is expected to return a new set of alerts.
+ *
+ * Snoozed, accepted, etc. alerts should define a corresponding status property. Alerts will be aggregated
+ * by status in a collapsed view below Alert Insights section and a badge will appear in Action Items
+ * showing the total alerts of that status.
+ *
+ * Customizing Alerts
+ * Default forms can be overridden in two ways - by setting a form property to null or defining a custom component.
+ *
+ * If a form property is set to null, the Dialog will not render a form. This can be useful in scenarios
+ * where data isn't needed from the user such as when a user accepts an action item's recommendation.
+ *
+ * If a form property is set to a React component, the Dialog will render the form component in place of the default form.
+ * Form components must return valid form elements, and accept a ref and onSubmit event handler.
+ * Custom forms must implement the corresponding event hook. See /forms for example implementations.
+ */
+
+export class KubernetesMigrationAlert implements MigrationAlert {
+  api: CostInsightsApi;
+  data: MigrationData;
+
+  subtitle =
+    'Services running on Kubernetes are estimated to save 50% or more compared to Compute Engine.';
+
+  // Dialog will not render a form if form property set to null.
+  AcceptForm = null;
+  // Overrides default Dismiss form with a custom form component.
+  DismissForm: AlertForm<
+    MigrationAlert,
+    MigrationDismissFormData
+  > = MigrationDismissForm;
+
+  constructor(api: CostInsightsApi, data: MigrationData) {
+    this.api = api;
+    this.data = data;
+  }
+
+  get title() {
+    return `Consider migrating ${pluralize(
+      'service',
+      this.data.services.length,
+      true,
+    )} to Kubernetes.`;
+  }
+
+  get element() {
+    const subheader = `${pluralize(
+      'Service',
+      this.data.services.length,
+      true,
+    )}, sorted by cost`;
+    return (
+      
+    );
+  }
+
+  /* Fires when the onSubmit event is raised on a Dismiss form. Displays custom dismiss form. */
+  async onDismissed(
+    options: AlertOptions,
+  ): Promise {
+    const alerts = await this.api.getAlerts(options.group);
+    return new Promise(resolve =>
+      setTimeout(resolve, 750, [
+        ...alerts.filter(a => a.title !== this.title),
+        {
+          title: this.title,
+          subtitle: this.subtitle,
+          status: AlertStatus.Dismissed,
+        },
+      ]),
+    );
+  }
+
+  /* Fires when the onSubmit event is raised on a Snooze form. Displays default snooze form. */
+  async onSnoozed(
+    options: AlertOptions,
+  ): Promise {
+    const alerts = await this.api.getAlerts(options.group);
+    return new Promise(resolve =>
+      setTimeout(resolve, 750, [
+        ...alerts.filter(a => a.title !== this.title),
+        {
+          title: this.title,
+          subtitle: this.subtitle,
+          status: AlertStatus.Snoozed,
+        },
+      ]),
+    );
+  }
+
+  /* Fires when the Accept button is clicked. Dialog does not render a form. See KubernetesMigrationAlert.AcceptForm */
+  async onAccepted(options: AlertOptions): Promise {
+    const alerts = await this.api.getAlerts(options.group);
+    return new Promise(resolve =>
+      setTimeout(resolve, 750, [
+        ...alerts.filter(a => a.title !== this.title),
+        {
+          title: this.title,
+          subtitle: this.subtitle,
+          status: AlertStatus.Accepted,
+        },
+      ]),
+    );
+  }
+}
diff --git a/plugins/cost-insights/src/alerts/ProjectGrowthAlert.tsx b/plugins/cost-insights/src/alerts/ProjectGrowthAlert.tsx
new file mode 100644
index 0000000000..67eb1b5071
--- /dev/null
+++ b/plugins/cost-insights/src/alerts/ProjectGrowthAlert.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { ProjectGrowthAlertCard } from '../components/ProjectGrowthAlertCard';
+import { Alert, ProjectGrowthData } from '../types';
+
+/**
+ * The alert below is an example of an Alert implementation; the CostInsightsApi permits returning
+ * any implementation of the Alert type, so adopters can create their own. The CostInsightsApi
+ * fetches alert data from the backend, then creates Alert classes with the data.
+ */
+
+export class ProjectGrowthAlert implements Alert {
+  data: ProjectGrowthData;
+
+  url = '/cost-insights/investigating-growth';
+  subtitle =
+    'Cost growth outpacing business growth is unsustainable long-term.';
+
+  constructor(data: ProjectGrowthData) {
+    this.data = data;
+  }
+
+  get title() {
+    return `Investigate cost growth in project ${this.data.project}`;
+  }
+
+  get element() {
+    return ;
+  }
+}
diff --git a/plugins/cost-insights/src/alerts/UnlabeledDataflowAlert.tsx b/plugins/cost-insights/src/alerts/UnlabeledDataflowAlert.tsx
new file mode 100644
index 0000000000..e889e0e3d4
--- /dev/null
+++ b/plugins/cost-insights/src/alerts/UnlabeledDataflowAlert.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { UnlabeledDataflowAlertCard } from '../components/UnlabeledDataflowAlertCard';
+import { Alert, AlertStatus, UnlabeledDataflowData } from '../types';
+
+/**
+ * The alert below is an example of an Alert implementation; the CostInsightsApi permits returning
+ * any implementation of the Alert type, so adopters can create their own. The CostInsightsApi
+ * fetches alert data from the backend, then creates Alert classes with the data.
+ */
+
+export class UnlabeledDataflowAlert implements Alert {
+  data: UnlabeledDataflowData;
+  status?: AlertStatus;
+
+  url = '/cost-insights/labeling-jobs';
+  title = 'Add labels to workflows';
+  subtitle =
+    'Labels show in billing data, enabling cost insights for each workflow.';
+
+  constructor(data: UnlabeledDataflowData) {
+    this.data = data;
+  }
+
+  get element() {
+    return ;
+  }
+}
diff --git a/plugins/cost-insights/src/alerts/index.ts b/plugins/cost-insights/src/alerts/index.ts
new file mode 100644
index 0000000000..b55c012a60
--- /dev/null
+++ b/plugins/cost-insights/src/alerts/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ProjectGrowthAlert } from './ProjectGrowthAlert';
+export { UnlabeledDataflowAlert } from './UnlabeledDataflowAlert';
+export { KubernetesMigrationAlert } from './KubernetesMigrationAlert';
+export type { MigrationAlert } from './KubernetesMigrationAlert';
+export type { MigrationData } from './KubernetesMigrationAlert';
diff --git a/plugins/cost-insights/src/client.ts b/plugins/cost-insights/src/client.ts
index fa9a1d23f5..2e70170fc1 100644
--- a/plugins/cost-insights/src/client.ts
+++ b/plugins/cost-insights/src/client.ts
@@ -31,7 +31,8 @@ import {
 import {
   ProjectGrowthAlert,
   UnlabeledDataflowAlert,
-} from '../src/utils/alerts';
+  KubernetesMigrationAlert,
+} from '../src/alerts';
 import {
   aggregationFor,
   changeOf,
@@ -177,9 +178,38 @@ export class ExampleCostInsightsClient implements CostInsightsApi {
       ],
     };
 
+    const today = dayjs();
     const alerts: Alert[] = await this.request({ group }, [
       new ProjectGrowthAlert(projectGrowthData),
       new UnlabeledDataflowAlert(unlabeledDataflowData),
+      new KubernetesMigrationAlert(this, {
+        startDate: today.subtract(30, 'day').format(DEFAULT_DATE_FORMAT),
+        endDate: today.format(DEFAULT_DATE_FORMAT),
+        change: {
+          ratio: 0,
+          amount: 0,
+        },
+        services: [
+          {
+            id: 'service-a',
+            aggregation: [20_000, 10_000],
+            change: {
+              ratio: -0.5,
+              amount: -10_000,
+            },
+            entities: {},
+          },
+          {
+            id: 'service-b',
+            aggregation: [30_000, 15_000],
+            change: {
+              ratio: -0.5,
+              amount: -15_000,
+            },
+            entities: {},
+          },
+        ],
+      }),
     ]);
 
     return alerts;
diff --git a/plugins/cost-insights/src/components/AlertActionCardList/AlertActionCard.test.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx
similarity index 87%
rename from plugins/cost-insights/src/components/AlertActionCardList/AlertActionCard.test.tsx
rename to plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx
index d896bf0d47..b72f050e5b 100644
--- a/plugins/cost-insights/src/components/AlertActionCardList/AlertActionCard.test.tsx
+++ b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.test.tsx
@@ -16,9 +16,9 @@
 
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { AlertActionCard } from './AlertActionCard';
+import { ActionItemCard } from './ActionItemCard';
 import { MockScrollProvider } from '../../utils/tests';
-import { ProjectGrowthAlert } from '../../utils/alerts';
+import { ProjectGrowthAlert } from '../../alerts';
 import { ProjectGrowthData } from '../../types';
 
 const data: ProjectGrowthData = {
@@ -31,11 +31,11 @@ const data: ProjectGrowthData = {
 };
 const alert = new ProjectGrowthAlert(data);
 
-describe('', () => {
+describe('', () => {
   it('Renders an alert', async () => {
     const rendered = await renderInTestApp(
       
-        ,
+        1} />
       ,
     );
 
diff --git a/plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx
new file mode 100644
index 0000000000..3c95fdaa2f
--- /dev/null
+++ b/plugins/cost-insights/src/components/ActionItems/ActionItemCard.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { MouseEventHandler } from 'react';
+import classnames from 'classnames';
+import { Card, CardHeader } from '@material-ui/core';
+import { useScroll } from '../../hooks';
+import { Alert } from '../../types';
+import { useActionItemCardStyles as useStyles } from '../../utils/styles';
+
+type ActionItemCardProps = {
+  alert: Alert;
+  number?: number;
+  avatar?: JSX.Element;
+  disableScroll?: boolean;
+};
+
+export const ActionItemCard = ({
+  alert,
+  avatar,
+  number,
+  disableScroll = false,
+}: ActionItemCardProps) => {
+  const classes = useStyles();
+  const rootClasses = classnames(classes.root, {
+    [classes.activeRoot]: !disableScroll,
+  });
+  const [, setScroll] = useScroll();
+
+  const onActionItemClick: MouseEventHandler = () => {
+    if (!disableScroll && number) {
+      setScroll(`alert-${number}`);
+    }
+  };
+
+  return (
+    
+      
+    
+  );
+};
diff --git a/plugins/cost-insights/src/components/ActionItems/ActionItems.test.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItems.test.tsx
new file mode 100644
index 0000000000..677ba99c6a
--- /dev/null
+++ b/plugins/cost-insights/src/components/ActionItems/ActionItems.test.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ActionItems } from './ActionItems';
+import { MockScrollProvider } from '../../utils/tests';
+
+function renderInContext(children: JSX.Element) {
+  return render({children});
+}
+
+describe('', () => {
+  it('should not display status buttons if there are no active alerts', () => {
+    const { queryByRole } = renderInContext(
+      ,
+    );
+    expect(queryByRole('button', { name: 'snoozed' })).not.toBeInTheDocument();
+    expect(queryByRole('button', { name: 'accepted' })).not.toBeInTheDocument();
+    expect(
+      queryByRole('button', { name: 'dismissed' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display status buttons with correct badge number', () => {
+    const { getByText, getByRole, getAllByText } = renderInContext(
+      ,
+    );
+    expect(getAllByText('1')).toHaveLength(2); // should be a badge of 1 and action item number of 1
+    expect(getByText('2')).toBeInTheDocument();
+    expect(getByText('3')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'snoozed' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'accepted' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'dismissed' })).toBeInTheDocument();
+  });
+});
diff --git a/plugins/cost-insights/src/components/ActionItems/ActionItems.tsx b/plugins/cost-insights/src/components/ActionItems/ActionItems.tsx
new file mode 100644
index 0000000000..4fbe3470b1
--- /dev/null
+++ b/plugins/cost-insights/src/components/ActionItems/ActionItems.tsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { Fragment, MouseEventHandler } from 'react';
+import {
+  Avatar,
+  Badge,
+  Box,
+  IconButtonProps,
+  IconButton,
+  Paper,
+  Divider,
+  Tooltip,
+} from '@material-ui/core';
+import { default as SnoozeIcon } from '@material-ui/icons/AccessTime';
+import { default as AcceptIcon } from '@material-ui/icons/Check';
+import { default as DismissIcon } from '@material-ui/icons/Delete';
+import { ActionItemCard } from './ActionItemCard';
+import { Alert, AlertStatus } from '../../types';
+import { useScroll, ScrollType } from '../../hooks';
+import { useActionItemCardStyles as useStyles } from '../../utils/styles';
+
+type AlertStatusButtonProps = {
+  title: string;
+  amount: number;
+  icon: JSX.Element;
+  onClick: MouseEventHandler;
+} & IconButtonProps;
+
+const AlertStatusButton = ({
+  title,
+  amount,
+  icon,
+  onClick,
+  ...buttonProps
+}: AlertStatusButtonProps) => (
+  
+    
+      {icon}
+    
+  
+);
+
+type ActionItemsProps = {
+  active: Alert[];
+  snoozed: Alert[];
+  accepted: Alert[];
+  dismissed: Alert[];
+};
+
+export const ActionItems = ({
+  active,
+  snoozed,
+  accepted,
+  dismissed,
+}: ActionItemsProps) => {
+  const classes = useStyles();
+  const [, setScroll] = useScroll();
+
+  const isSnoozedButtonDisplayed = !!snoozed.length;
+  const isAcceptedButtonDisplayed = !!accepted.length;
+  const isDismissedButtonDisplayed = !!dismissed.length;
+  const isStatusButtonGroupDisplayed = !!active.length;
+
+  const onStatusButtonClick: MouseEventHandler = () =>
+    setScroll(ScrollType.AlertSummary);
+
+  return (
+    <>
+      
+        {active.map((alert, index) => (
+          
+            {index + 1}}
+            />
+            {index < active.length - 1 && }
+          
+        ))}
+      
+      {isStatusButtonGroupDisplayed && (
+        
+          {isAcceptedButtonDisplayed && (
+            }
+              amount={accepted.length}
+              onClick={onStatusButtonClick}
+            />
+          )}
+          {isSnoozedButtonDisplayed && (
+            }
+              onClick={onStatusButtonClick}
+            />
+          )}
+          {isDismissedButtonDisplayed && (
+            }
+              amount={dismissed.length}
+              onClick={onStatusButtonClick}
+            />
+          )}
+        
+      )}
+    
+  );
+};
diff --git a/plugins/cost-insights/src/components/ActionItems/index.ts b/plugins/cost-insights/src/components/ActionItems/index.ts
new file mode 100644
index 0000000000..b63e34b0af
--- /dev/null
+++ b/plugins/cost-insights/src/components/ActionItems/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { ActionItems } from './ActionItems';
+export { ActionItemCard } from './ActionItemCard';
diff --git a/plugins/cost-insights/src/components/AlertActionCardList/AlertActionCard.tsx b/plugins/cost-insights/src/components/AlertActionCardList/AlertActionCard.tsx
deleted file mode 100644
index 78feade952..0000000000
--- a/plugins/cost-insights/src/components/AlertActionCardList/AlertActionCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { Avatar, Card, CardHeader } from '@material-ui/core';
-import { useScroll } from '../../hooks';
-import { Alert } from '../../types';
-import {
-  useAlertActionCardHeader as useHeaderStyles,
-  useAlertActionCardStyles as useStyles,
-} from '../../utils/styles';
-
-type AlertActionCardProps = {
-  alert: Alert;
-  number: number;
-};
-
-export const AlertActionCard = ({ alert, number }: AlertActionCardProps) => {
-  const { scrollIntoView } = useScroll(`alert-${number}`);
-  const headerClasses = useHeaderStyles();
-  const classes = useStyles();
-
-  return (
-    
-      {number}}
-        title={alert.title}
-        subheader={alert.subtitle}
-      />
-    
-  );
-};
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx
new file mode 100644
index 0000000000..7061f0736b
--- /dev/null
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertDialog.test.tsx
@@ -0,0 +1,174 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { capitalize } from '@material-ui/core';
+import { AlertDialog } from './AlertDialog';
+import { render } from '@testing-library/react';
+import { Alert, AlertFormProps, AlertStatus } from '../../types';
+
+type MockFormDataProps = AlertFormProps;
+
+function createForm(title: string) {
+  return React.forwardRef((props, ref) => (
+    

+      You. {title}. Me.
+    
+  ));
+}
+
+const snoozableAlert: Alert = {
+  title: 'title',
+  subtitle: 'test-subtitle',
+  onSnoozed: jest.fn(),
+};
+
+const dimissableAlert: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onDismissed: jest.fn(),
+};
+
+const acceptableAlert: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onAccepted: jest.fn(),
+};
+
+const customSnoozeAlert: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onSnoozed: jest.fn(),
+  SnoozeForm: createForm('Snooze'),
+};
+
+const customDismissAlert: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onDismissed: jest.fn(),
+  DismissForm: createForm('Dismiss'),
+};
+
+const customAcceptAlert: Alert = {
+  title: 'title',
+  subtitle: 'test-subtitle',
+  onAccepted: jest.fn(),
+  AcceptForm: createForm('Accept'),
+};
+
+const nullAcceptAlert: Alert = {
+  title: 'title',
+  subtitle: 'test-subtitle',
+  onAccepted: jest.fn(),
+  AcceptForm: null,
+};
+
+const nullDismissAlert: Alert = {
+  title: 'title',
+  subtitle: 'test-subtitle',
+  onDismissed: jest.fn(),
+  DismissForm: null,
+};
+
+const nullSnoozeAlert: Alert = {
+  title: 'title',
+  subtitle: 'test-subtitle',
+  onSnoozed: jest.fn(),
+  SnoozeForm: null,
+};
+
+describe('', () => {
+  describe.each`
+    alert              | status                   | action                      | text
+    ${acceptableAlert} | ${AlertStatus.Accepted}  | ${['accept', 'accepted']}   | ${'My team can commit to making this change soon, or has already.'}
+    ${dimissableAlert} | ${AlertStatus.Dismissed} | ${['dismiss', 'dismissed']} | ${'Reason for dismissing?'}
+    ${snoozableAlert}  | ${AlertStatus.Snoozed}   | ${['snooze', 'snoozed']}    | ${'For how long?'}
+  `('Default forms', ({ alert, status, action: [action, actioned], text }) => {
+    it(`Displays a default ${action} form`, () => {
+      const { getByText } = render(
+        ,
+      );
+      expect(getByText(text)).toBeInTheDocument();
+      expect(
+        getByText(`${capitalize(action)} this action item?`),
+      ).toBeInTheDocument();
+      expect(
+        getByText(`This action item will be ${actioned} for all of Ramones.`),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe.each`
+    alert                 | status                   | action                      | text
+    ${customAcceptAlert}  | ${AlertStatus.Accepted}  | ${['accept', 'accepted']}   | ${'My team can commit to making this change soon, or has already.'}
+    ${customDismissAlert} | ${AlertStatus.Dismissed} | ${['dismiss', 'dismissed']} | ${'Reason for dismissing?'}
+    ${customSnoozeAlert}  | ${AlertStatus.Snoozed}   | ${['snooze', 'snoozed']}    | ${'For how long?'}
+  `('Custom forms', ({ alert, status, action: [action, actioned] }) => {
+    it(`Displays a custom ${capitalize(action)} form`, () => {
+      const { getByText } = render(
+        ,
+      );
+      expect(getByText(`You. ${capitalize(action)}. Me.`)).toBeInTheDocument();
+      expect(
+        getByText(`${capitalize(action)} this action item?`),
+      ).toBeInTheDocument();
+      expect(
+        getByText(`This action item will be ${actioned} for all of Ramones.`),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe.each`
+    alert               | status                   | action                      | text
+    ${nullAcceptAlert}  | ${AlertStatus.Accepted}  | ${['accept', 'accepted']}   | ${'My team can commit to making this change soon, or has already.'}
+    ${nullDismissAlert} | ${AlertStatus.Dismissed} | ${['dismiss', 'dismissed']} | ${'Reason for dismissing?'}
+    ${nullSnoozeAlert}  | ${AlertStatus.Snoozed}   | ${['snooze', 'snoozed']}    | ${'For how long?'}
+  `('Null forms', ({ alert, status, action: [action, actioned], text }) => {
+    it(`Does NOT display a ${capitalize(action)} form`, () => {
+      const { getByText, getByRole, queryByText } = render(
+        ,
+      );
+      expect(queryByText(text)).not.toBeInTheDocument();
+      expect(getByRole('button', { name: action })).toBeInTheDocument();
+      expect(
+        getByText(`${capitalize(action)} this action item?`),
+      ).toBeInTheDocument();
+      expect(
+        getByText(`This action item will be ${actioned} for all of Ramones.`),
+      ).toBeInTheDocument();
+    });
+  });
+});
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx
new file mode 100644
index 0000000000..ab6f9fb9f0
--- /dev/null
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertDialog.tsx
@@ -0,0 +1,170 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  capitalize,
+  Box,
+  Button,
+  Divider,
+  Dialog,
+  DialogActions,
+  IconButton,
+  DialogContent,
+  Typography,
+} from '@material-ui/core';
+import { default as CloseIcon } from '@material-ui/icons/Close';
+import { useAlertDialogStyles as useStyles } from '../../utils/styles';
+import { Alert, AlertStatus, Maybe } from '../../types';
+import { choose, formOf } from '../../utils/alerts';
+
+const DEFAULT_FORM_ID = 'alert-form';
+
+type AlertDialogProps = {
+  open: boolean;
+  group: string;
+  alert: Maybe;
+  status: Maybe;
+  onClose: () => void;
+  onSubmit: (data: any) => void;
+};
+
+export const AlertDialog = ({
+  open,
+  group,
+  alert,
+  status,
+  onClose,
+  onSubmit,
+}: AlertDialogProps) => {
+  const classes = useStyles();
+  const [isSubmitDisabled, setSubmitDisabled] = useState(true);
+  const formRef = useRef>(null);
+
+  useEffect(() => {
+    setSubmitDisabled(open);
+  }, [open]);
+
+  function disableSubmit(isDisabled: boolean) {
+    setSubmitDisabled(isDisabled);
+  }
+
+  function onDialogClose() {
+    onClose();
+    setSubmitDisabled(true);
+  }
+
+  const [action, actioned] = choose(
+    status,
+    [
+      ['snooze', 'snoozed'],
+      ['accept', 'accepted'],
+      ['dismiss', 'dismissed'],
+    ],
+    ['', ''],
+  );
+
+  const TransitionProps = {
+    mountOnEnter: true,
+    unmountOnExit: true,
+    onEntered() {
+      if (formRef.current) {
+        formRef.current.id = DEFAULT_FORM_ID;
+      }
+    },
+  };
+
+  const Form = formOf(alert, status);
+
+  return (
+    
+      
+        
+          
+        
+      
+      
+        
+          
+            {capitalize(action)} this action item?
+          
+          
+            
+              This action item will be {actioned} for all of {group}.
+            
+          
+        
+        
+          
+            {alert?.title}
+          
+          {alert?.subtitle}
+        
+        {Form && (
+          

+        )}
+      
+      
+      
+        {Form ? (
+          
+        ) : (
+          
+        )}
+      
+    
+  );
+};
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsights.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsights.test.tsx
new file mode 100644
index 0000000000..98f75b1d41
--- /dev/null
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsights.test.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { AlertInsights } from './AlertInsights';
+import { MockScrollProvider, MockLoadingProvider } from '../../utils/tests';
+
+function renderInContext(children: JSX.Element) {
+  return render(
+    
+      {children}
+    ,
+  );
+}
+
+describe('', () => {
+  it('should display the correct header if there are active action items', () => {
+    const { getByText, queryByText } = renderInContext(
+      ,
+    );
+    expect(
+      getByText(
+        'This section outlines suggested action items your team can address to improve cloud costs.',
+      ),
+    ).toBeInTheDocument();
+    expect(queryByText('Hidden Action Item')).not.toBeInTheDocument();
+  });
+
+  it('should display alert summary if there are hidden action items', async () => {
+    const { getByText, getByRole } = renderInContext(
+      ,
+    );
+
+    expect(
+      getByText(
+        "All of your team's action items are hidden. Maybe it's time to give them another look?",
+      ),
+    ).toBeInTheDocument();
+    expect(getByText('Hidden Action Item')).toBeInTheDocument();
+
+    fireEvent.click(getByRole('button', { name: 'expand' }));
+    await waitFor(() => getByRole('img', { name: 'snoozed' }));
+
+    expect(getByText('Vol. 4')).toBeInTheDocument();
+    expect(getByText('Sabotage')).toBeInTheDocument();
+  });
+});
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx
index 4606906f04..5204686118 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsights.tsx
@@ -14,31 +14,214 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Grid } from '@material-ui/core';
-import { AlertInsightsSection } from './AlertInsightsSection';
+import React, { useEffect, useState } from 'react';
+import pluralize from 'pluralize';
+import { Box, Grid, Snackbar } from '@material-ui/core';
+import { default as MuiAlert } from '@material-ui/lab/Alert';
+import { AlertDialog } from './AlertDialog';
+import { AlertStatusSummary } from './AlertStatusSummary';
+import { AlertStatusSummaryButton } from './AlertStatusSummaryButton';
 import { AlertInsightsHeader } from './AlertInsightsHeader';
-import { Alert } from '../../types';
+import { AlertInsightsSection } from './AlertInsightsSection';
+import {
+  useScroll,
+  useLoading,
+  ScrollType,
+  MapLoadingToProps,
+} from '../../hooks';
+import { DefaultLoadingAction } from '../../utils/loading';
+import { Alert, AlertOptions, AlertStatus, Maybe } from '../../types';
+import {
+  isStatusSnoozed,
+  isStatusAccepted,
+  isStatusDismissed,
+  sumOfAllAlerts,
+} from '../../utils/alerts';
+import { ScrollAnchor } from '../../utils/scroll';
 
-const title = "Your team's action items";
-const subtitle =
-  'This section outlines suggested action items your team can address to improve cloud costs.';
+type MapLoadingtoAlerts = (isLoading: boolean) => void;
+
+const mapLoadingToAlerts: MapLoadingToProps = ({
+  dispatch,
+}) => (isLoading: boolean) =>
+  dispatch({ [DefaultLoadingAction.CostInsightsAlerts]: isLoading });
 
 type AlertInsightsProps = {
-  alerts: Array;
+  group: string;
+  active: Alert[];
+  snoozed: Alert[];
+  accepted: Alert[];
+  dismissed: Alert[];
+  onChange: (alerts: Alert[]) => void;
 };
 
-export const AlertInsights = ({ alerts }: AlertInsightsProps) => (
-  
-    
-      
-    
-    
-      {alerts.map((alert, index) => (
-        
-          
+export const AlertInsights = ({
+  group,
+  active,
+  snoozed,
+  accepted,
+  dismissed,
+  onChange,
+}: AlertInsightsProps) => {
+  const [scroll] = useScroll();
+  const [alert, setAlert] = useState>(null);
+  const dispatchLoadingAlerts = useLoading(mapLoadingToAlerts);
+  const [status, setStatus] = useState>(null);
+  // Allow users to pass null values for data.
+  const [data, setData] = useState>(undefined);
+  const [error, setError] = useState>(null);
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [isSummaryOpen, setSummaryOpen] = useState(false);
+  const [isSnackbarOpen, setSnackbarOpen] = useState(false);
+
+  useEffect(() => {
+    async function callAlertHook(
+      options: AlertOptions,
+      callback: (options: AlertOptions) => Promise,
+    ) {
+      setAlert(null);
+      setStatus(null);
+      setData(undefined);
+      setDialogOpen(false);
+      dispatchLoadingAlerts(true);
+      try {
+        const alerts: Alert[] = await callback(options);
+        onChange(alerts);
+      } catch (e) {
+        setError(e);
+      } finally {
+        dispatchLoadingAlerts(false);
+      }
+    }
+
+    const options: AlertOptions = { data, group };
+    const onSnoozed = alert?.onSnoozed?.bind(alert);
+    const onAccepted = alert?.onAccepted?.bind(alert);
+    const onDismissed = alert?.onDismissed?.bind(alert);
+
+    if (data !== undefined) {
+      if (isStatusSnoozed(status) && onSnoozed) {
+        callAlertHook(options, onSnoozed);
+      } else if (isStatusAccepted(status) && onAccepted) {
+        callAlertHook(options, onAccepted);
+      } else if (isStatusDismissed(status) && onDismissed) {
+        callAlertHook(options, onDismissed);
+      }
+    }
+  }, [group, data, alert, status, onChange, dispatchLoadingAlerts]);
+
+  useEffect(() => {
+    if (scroll === ScrollType.AlertSummary) {
+      setSummaryOpen(true);
+    }
+  }, [scroll]);
+
+  useEffect(() => {
+    setDialogOpen(!!status);
+  }, [status]);
+
+  useEffect(() => {
+    setSnackbarOpen(!!error);
+  }, [error]);
+
+  function onSnooze(alertProp: Alert) {
+    setAlert(alertProp);
+    setStatus(AlertStatus.Snoozed);
+  }
+
+  function onAccept(alertProp: Alert) {
+    setAlert(alertProp);
+    setStatus(AlertStatus.Accepted);
+  }
+
+  function onDismiss(alertProp: Alert) {
+    setAlert(alertProp);
+    setStatus(AlertStatus.Dismissed);
+  }
+
+  function onSnackbarClose() {
+    setError(null);
+  }
+
+  function onDialogClose() {
+    setAlert(null);
+    setStatus(null);
+  }
+
+  function onDialogFormSubmit(inputData: any) {
+    setData(inputData);
+  }
+
+  function onSummaryButtonClick() {
+    setSummaryOpen(prevOpen => !prevOpen);
+  }
+
+  const total = [accepted, snoozed, dismissed].reduce(sumOfAllAlerts, 0);
+
+  const isAlertStatusSummaryDisplayed = !!total;
+  const isAlertInsightSectionDisplayed = !!active.length;
+
+  return (
+    
+      
+        
+      
+      {isAlertInsightSectionDisplayed && (
+        
+          {active.map((alertItem, index) => (
+            
+              
+            
+          ))}
         
-      ))}
+      )}
+      {isAlertStatusSummaryDisplayed && (
+        
+          
+            
+            
+              {pluralize('Hidden Action Item', total)}
+            
+          
+          
+        
+      )}
+      
+      
+        
+          {error?.message}
+        
+      
     
-  
-);
+  );
+};
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx
index b58f6973ae..86a4334d67 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsHeader.tsx
@@ -17,7 +17,7 @@
 import React from 'react';
 import { Box, Typography } from '@material-ui/core';
 import { useCostInsightsStyles as useStyles } from '../../utils/styles';
-import { useScroll } from '../../hooks';
+import { ScrollAnchor } from '../../utils/scroll';
 import { DefaultNavigation } from '../../utils/navigation';
 
 type AlertInsightsHeaderProps = {
@@ -30,10 +30,10 @@ export const AlertInsightsHeader = ({
   subtitle,
 }: AlertInsightsHeaderProps) => {
   const classes = useStyles();
-  const { ScrollAnchor } = useScroll(DefaultNavigation.AlertInsightsHeader);
+
   return (
     
-      
+      
       
         {title}{' '}
         
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx
index 54d350298c..937e099356 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.test.tsx
@@ -17,38 +17,115 @@ import React from 'react';
 import { AlertInsightsSection } from './AlertInsightsSection';
 import { render } from '@testing-library/react';
 import { Alert } from '../../types';
-import { MockScrollProvider } from '../..';
+import { MockScrollProvider } from '../../utils/tests';
 
 const mockAlert: Alert = {
-  element: 
,
   subtitle:
     'Wherefore was I to this keen mockery born? When at your hands did I deserve this scorn?',
   title: 'Mock alert',
   url: '/cost-insights/test',
 };
 
+function renderInContext(children: JSX.Element) {
+  return render({children});
+}
+
 describe('', () => {
   it('Renders alert without exploding', () => {
-    const { getByText } = render(
-      
-        
-      ,
+    const { getByText, queryByText } = renderInContext(
+      ,
     );
     expect(getByText(mockAlert.title)).toBeInTheDocument();
     expect(getByText(mockAlert.subtitle)).toBeInTheDocument();
     expect(getByText('View Instructions')).toBeInTheDocument();
+    expect(queryByText('Snooze')).not.toBeInTheDocument();
+    expect(queryByText('Accept')).not.toBeInTheDocument();
+    expect(queryByText('Dismiss')).not.toBeInTheDocument();
   });
 
   it('Hides instructions button if url is not provided', () => {
-    const alert = {
+    const alert: Alert = {
       ...mockAlert,
       url: undefined,
     };
-    const { queryByText } = render(
-      
-        
-      ,
+    const { queryByText } = renderInContext(
+      ,
     );
     expect(queryByText('View Instructions')).not.toBeInTheDocument();
   });
+
+  it('Displays a snooze button if a hook is provided', () => {
+    const alert: Alert = {
+      ...mockAlert,
+      onSnoozed: jest.fn(),
+    };
+
+    const { queryByText, getByText } = renderInContext(
+      ,
+    );
+
+    expect(getByText('Snooze')).toBeInTheDocument();
+    expect(queryByText('Accept')).not.toBeInTheDocument();
+    expect(queryByText('Dismiss')).not.toBeInTheDocument();
+  });
+
+  it('Displays a dismiss button if a hook is provided', () => {
+    const alert: Alert = {
+      ...mockAlert,
+      onDismissed: jest.fn(),
+    };
+
+    const { queryByText, getByText } = renderInContext(
+      ,
+    );
+
+    expect(getByText('Dismiss')).toBeInTheDocument();
+    expect(queryByText('Accept')).not.toBeInTheDocument();
+    expect(queryByText('Snooze')).not.toBeInTheDocument();
+  });
+
+  it('Displays an accept button if a hook is provided', () => {
+    const alert: Alert = {
+      ...mockAlert,
+      onAccepted: jest.fn(),
+    };
+
+    const { queryByText, getByText } = renderInContext(
+      ,
+    );
+
+    expect(getByText('Accept')).toBeInTheDocument();
+    expect(queryByText('Snooze')).not.toBeInTheDocument();
+    expect(queryByText('Dismiss')).not.toBeInTheDocument();
+  });
 });
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx
index 7e371c8001..d52687ae19 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSection.tsx
@@ -15,30 +15,84 @@
  */
 import React from 'react';
 import { Box, Button } from '@material-ui/core';
+import { default as SnoozeIcon } from '@material-ui/icons/AccessTime';
+import { default as AcceptIcon } from '@material-ui/icons/Check';
+import { default as DismissIcon } from '@material-ui/icons/Delete';
 import { AlertInsightsSectionHeader } from './AlertInsightsSectionHeader';
 import { Alert } from '../../types';
+import {
+  isSnoozeEnabled,
+  isAcceptEnabled,
+  isDismissEnabled,
+} from '../../utils/alerts';
 
 type AlertInsightsSectionProps = {
   alert: Alert;
   number: number;
+  onSnooze: (alert: Alert) => void;
+  onAccept: (alert: Alert) => void;
+  onDismiss: (alert: Alert) => void;
 };
 
 export const AlertInsightsSection = ({
   alert,
   number,
+  onSnooze,
+  onAccept,
+  onDismiss,
 }: AlertInsightsSectionProps) => {
+  const isSnoozeButtonDisplayed = isSnoozeEnabled(alert);
+  const isAcceptButtonDisplayed = isAcceptEnabled(alert);
+  const isDismissButtonDisplayed = isDismissEnabled(alert);
+  const isButtonGroupDisplayed =
+    isSnoozeButtonDisplayed ||
+    isAcceptButtonDisplayed ||
+    isDismissButtonDisplayed;
+
   return (
-    
-      
-      {alert.url && (
-        
-          
+    
+      
+      {isButtonGroupDisplayed && (
+        
+          {isAcceptButtonDisplayed && (
+            
+              
+            
+          )}
+          {isSnoozeButtonDisplayed && (
+            
+              
+            
+          )}
+          {isDismissButtonDisplayed && (
+            
+          )}
         
       )}
       {alert.element}
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx
index 3613e3adc8..30b8985934 100644
--- a/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertInsightsSectionHeader.tsx
@@ -15,34 +15,46 @@
  */
 
 import React from 'react';
-import { Avatar, Box, Grid, Typography } from '@material-ui/core';
+import { Avatar, Box, Button, Grid, Typography } from '@material-ui/core';
 import { useAlertInsightsSectionStyles as useStyles } from '../../utils/styles';
-import { useScroll } from '../../hooks';
+import { ScrollAnchor } from '../../utils/scroll';
+import { Alert } from '../../types';
 
 type AlertInsightsSectionHeaderProps = {
+  alert: Alert;
   number: number;
-  title: string;
-  subtitle: string;
 };
 
 export const AlertInsightsSectionHeader = ({
+  alert,
   number,
-  title,
-  subtitle,
 }: AlertInsightsSectionHeaderProps) => {
-  const { ScrollAnchor } = useScroll(`alert-${number}`);
   const classes = useStyles();
+
+  const isViewInstructionsButtonDisplayed = !!alert.url;
+
   return (
     
-      
-      
+      
+      
         
-          {number}
-        
-        
-          {title}
-          {subtitle}
+          
+            
+              {number}
+            
+            
+              {alert.title}
+              {alert.subtitle}
+            
+          
         
+        {isViewInstructionsButtonDisplayed && (
+          
+            
+          
+        )}
       
     
   );
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx
new file mode 100644
index 0000000000..830db19fcd
--- /dev/null
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react';
+import { AlertStatusSummary } from './AlertStatusSummary';
+import { render } from '@testing-library/react';
+import { Alert, AlertStatus } from '../../types';
+import { MockScrollProvider } from '../../utils/tests';
+
+const mockSnoozed: Alert = {
+  title: 'snoozed-title',
+  subtitle: 'snoozed-subtitle',
+  status: AlertStatus.Snoozed,
+};
+
+const mockAccepted: Alert = {
+  title: 'accepted-title',
+  subtitle: 'accepted-subtitle',
+  status: AlertStatus.Accepted,
+};
+
+const mockDismissed: Alert = {
+  title: 'dismissed-title',
+  subtitle: 'dismissed-subtitle',
+  status: AlertStatus.Dismissed,
+};
+
+describe('', () => {
+  it('should display alerts', () => {
+    const { getByText, getByRole } = render(
+      
+        
+      ,
+    );
+    [mockSnoozed, mockAccepted, mockDismissed].forEach(a => {
+      expect(getByText(a.title)).toBeInTheDocument();
+      expect(getByText(a.subtitle)).toBeInTheDocument();
+      expect(getByRole('img', { name: a.status })).toBeInTheDocument();
+    });
+  });
+});
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx
new file mode 100644
index 0000000000..caee99dc5e
--- /dev/null
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummary.tsx
@@ -0,0 +1,118 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Fragment } from 'react';
+import { Avatar, Box, Collapse, Divider, Tooltip } from '@material-ui/core';
+import { default as AcceptIcon } from '@material-ui/icons/Check';
+import { default as DismissIcon } from '@material-ui/icons/Delete';
+import { default as SnoozeIcon } from '@material-ui/icons/AccessTime';
+import { ActionItemCard } from '../ActionItems';
+import { Alert, AlertStatus } from '../../types';
+import { useActionItemCardStyles as useStyles } from '../../utils/styles';
+
+type AlertGroupProps = {
+  alerts: Alert[];
+  status: AlertStatus;
+  title: string;
+  icon: JSX.Element;
+};
+
+const AlertGroup = ({ alerts, status, title, icon }: AlertGroupProps) => {
+  const classes = useStyles();
+  return (
+    
+      {alerts.map((alert, index) => (
+        
+          
+                {icon}
+              
+            }
+          />
+          {index < alerts.length - 1 && }
+        
+      ))}
+    
+  );
+};
+
+type AlertStatusSummaryProps = {
+  open: boolean;
+  snoozed: Alert[];
+  accepted: Alert[];
+  dismissed: Alert[];
+};
+
+export const AlertStatusSummary = ({
+  open,
+  snoozed,
+  accepted,
+  dismissed,
+}: AlertStatusSummaryProps) => {
+  const isSnoozedListDisplayed = !!snoozed.length;
+  const isAcceptedListDisplayed = !!accepted.length;
+  const isDismissedListDisplayed = !!dismissed.length;
+
+  return (
+    
+      {isAcceptedListDisplayed && (
+        
+          }
+        />
+      )}
+      {isSnoozedListDisplayed && (
+        
+          }
+        />
+      )}
+      {isDismissedListDisplayed && (
+        
+          }
+        />
+      )}
+    
+  );
+};
diff --git a/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx
new file mode 100644
index 0000000000..ed8c7fabbb
--- /dev/null
+++ b/plugins/cost-insights/src/components/AlertInsights/AlertStatusSummaryButton.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, MouseEventHandler, PropsWithChildren } from 'react';
+import classnames from 'classnames';
+import { Button } from '@material-ui/core';
+import { default as ExpandMoreIcon } from '@material-ui/icons/ExpandMore';
+import { useAlertStatusSummaryButtonStyles as useStyles } from '../../utils/styles';
+
+type AlertStatusSummaryButtonProps = {
+  onClick: MouseEventHandler;
+};
+
+export const AlertStatusSummaryButton = ({
+  children,
+  onClick,
+}: PropsWithChildren) => {
+  const classes = useStyles();
+  const [clicked, setClicked] = useState(false);
+  const iconClassName = classnames(classes.icon, {
+    [classes.clicked]: clicked,
+  });
+
+  const handleOnClick: MouseEventHandler = e => {
+    setClicked(prevClicked => !prevClicked);
+    onClick(e);
+  };
+
+  return (
+    
+  );
+};
diff --git a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
index 5a25216909..1e2bd8bb6b 100644
--- a/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
+++ b/plugins/cost-insights/src/components/CostInsightsNavigation/CostInsightsNavigation.tsx
@@ -41,13 +41,13 @@ type CostInsightsNavigationProps = {
 
 const NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {
   const classes = useStyles();
-  const { scrollIntoView } = useScroll(navigation);
+  const [, setScroll] = useScroll();
   return (
      setScroll(navigation)}
     >
       {icon}
        {
   const classes = useSubtleTypographyStyles();
@@ -54,16 +67,24 @@ export const CostInsightsPage = () => {
   const config = useConfig();
   const groups = useGroups();
   const lastCompleteBillingDate = useLastCompleteBillingDate();
+  const [alerts, setAlerts] = useState([]);
   const [currency, setCurrency] = useCurrency();
   const [projects, setProjects] = useState>(null);
   const [products, setProducts] = useState>(null);
   const [dailyCost, setDailyCost] = useState>(null);
   const [metricData, setMetricData] = useState>(null);
-  const [alerts, setAlerts] = useState>(null);
   const [error, setError] = useState>(null);
 
   const { pageFilters, setPageFilters } = useFilters(p => p);
 
+  const active = useMemo(() => alerts.filter(isAlertActive), [alerts]);
+  const snoozed = useMemo(() => alerts.filter(isAlertSnoozed), [alerts]);
+  const accepted = useMemo(() => alerts.filter(isAlertAccepted), [alerts]);
+  const dismissed = useMemo(() => alerts.filter(isAlertDismissed), [alerts]);
+
+  const isActionItemsDisplayed = !!active.length;
+  const isAlertInsightsDisplayed = !!alerts.length;
+
   const {
     loadingActions,
     loadingGroups,
@@ -177,8 +198,8 @@ export const CostInsightsPage = () => {
       
     );
   }
-  // These should be defined, alerts can be an empty array but that's truthy
-  if (!dailyCost || !alerts) {
+
+  if (!dailyCost) {
     return (
       {`Error: Could not fetch cost insights data for team ${pageFilters.group}`}
     );
@@ -228,7 +249,7 @@ export const CostInsightsPage = () => {
           
             
           
         
@@ -249,19 +270,22 @@ export const CostInsightsPage = () => {
                   owner={pageFilters.group}
                   groups={groups}
                   hasCostData={!!dailyCost.aggregation.length}
-                  alerts={alerts.length}
+                  alerts={active.length}
                 />
               
-              {!!alerts.length && (
-                <>
-                  
-                    
-                      
-                    
-                  
-                  
-                
-              )}
+              
+                
+                  
+                    
+                  
+                
+                
+              
               
                 
               
@@ -276,14 +300,21 @@ export const CostInsightsPage = () => {
                   
                 
               
-              
-                {!!alerts?.length && (
+              
+                
                   
-                    
+                    
                   
-                )}
-              
-              {!alerts.length && }
+                
+              
+              {!isAlertInsightsDisplayed && }
               
                 
                   ;
 };
 
 export const CostOverviewCard = ({
@@ -47,8 +48,12 @@ export const CostOverviewCard = ({
   metricData,
 }: CostOverviewCardProps) => {
   const theme = useTheme();
+  const styles = useOverviewTabsStyles(theme);
   const config = useConfig();
   const [tabIndex, setTabIndex] = useState(0);
+  const { setDuration, setProject, setMetric, ...filters } = useFilters(
+    mapFiltersToProps,
+  );
 
   // Reset tabIndex if breakdowns available change
   useEffect(() => {
@@ -59,15 +64,9 @@ export const CostOverviewCard = ({
     }
   }, [dailyCostData, tabIndex, setTabIndex]);
 
-  const { ScrollAnchor } = useScroll(DefaultNavigation.CostOverviewCard);
-  const { setDuration, setProject, setMetric, ...filters } = useFilters(
-    mapFiltersToProps,
-  );
-
   const metric = filters.metric
     ? findAlways(config.metrics, m => m.kind === filters.metric)
     : null;
-  const styles = useOverviewTabsStyles(theme);
 
   const breakdownTabs = Object.keys(dailyCostData.groupedCosts ?? {}).map(
     key => ({
@@ -109,7 +108,7 @@ export const CostOverviewCard = ({
 
   return (
     
-      
+      
       
         {dailyCostData.groupedCosts && }
         
diff --git a/plugins/cost-insights/src/components/MigrationAlertCard/MigrationAlertCard.tsx b/plugins/cost-insights/src/components/MigrationAlertCard/MigrationAlertCard.tsx
new file mode 100644
index 0000000000..56d636d8aa
--- /dev/null
+++ b/plugins/cost-insights/src/components/MigrationAlertCard/MigrationAlertCard.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Box } from '@material-ui/core';
+import { InfoCard } from '@backstage/core';
+import { MigrationBarChartLegend } from './MigrationBarChartLegend';
+import { MigrationBarChart } from './MigrationBarChart';
+import { MigrationData } from '../../alerts';
+
+type MigrationAlertProps = {
+  data: MigrationData;
+  title: string;
+  subheader: string;
+  currentProduct: string;
+  comparedProduct: string;
+};
+
+export const MigrationAlertCard = ({
+  data,
+  title,
+  subheader,
+  currentProduct,
+  comparedProduct,
+}: MigrationAlertProps) => {
+  return (
+    
+      
+        
+          
+        
+        
+          
+        
+      
+    
+  );
+};
diff --git a/plugins/cost-insights/src/components/MigrationAlertCard/MigrationBarChart.tsx b/plugins/cost-insights/src/components/MigrationAlertCard/MigrationBarChart.tsx
new file mode 100644
index 0000000000..60aa49b2bc
--- /dev/null
+++ b/plugins/cost-insights/src/components/MigrationAlertCard/MigrationBarChart.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { BarChart } from '../BarChart';
+import {
+  BarChartOptions,
+  CostInsightsTheme,
+  Entity,
+  ResourceData,
+} from '../../types';
+import { useTheme } from '@material-ui/core';
+
+type MigrationBarChartProps = {
+  currentProduct: string;
+  comparedProduct: string;
+  services: Array;
+};
+
+export const MigrationBarChart = ({
+  currentProduct,
+  comparedProduct,
+  services,
+}: MigrationBarChartProps) => {
+  const theme = useTheme();
+
+  const options: BarChartOptions = {
+    previousFill: theme.palette.magenta,
+    currentFill: theme.palette.yellow,
+    previousName: comparedProduct,
+    currentName: currentProduct,
+  };
+
+  const resources: ResourceData[] = services.map(service => ({
+    name: service.id,
+    previous: service.aggregation[0],
+    current: service.aggregation[1],
+  }));
+
+  return ;
+};
diff --git a/plugins/cost-insights/src/components/MigrationAlertCard/MigrationBarChartLegend.tsx b/plugins/cost-insights/src/components/MigrationAlertCard/MigrationBarChartLegend.tsx
new file mode 100644
index 0000000000..a84e865e28
--- /dev/null
+++ b/plugins/cost-insights/src/components/MigrationAlertCard/MigrationBarChartLegend.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Box, useTheme } from '@material-ui/core';
+import { CostGrowth } from '../CostGrowth';
+import { LegendItem } from '../LegendItem';
+import { ChangeStatistic, CostInsightsTheme, Duration } from '../../types';
+import { monthOf } from '../../utils/formatters';
+
+export type MigrationBarChartLegendProps = {
+  change: ChangeStatistic;
+  startDate: string;
+  currentProduct: string;
+  comparedProduct: string;
+};
+
+export const MigrationBarChartLegend = ({
+  currentProduct,
+  comparedProduct,
+  change,
+  startDate,
+}: MigrationBarChartLegendProps) => {
+  const theme = useTheme();
+  return (
+    
+      
+        
+          {currentProduct}
+        
+      
+      
+        
+          {comparedProduct}
+        
+      
+      
+        
+      
+    
+  );
+};
diff --git a/plugins/api-docs/src/components/EntityLink/index.ts b/plugins/cost-insights/src/components/MigrationAlertCard/index.ts
similarity index 90%
rename from plugins/api-docs/src/components/EntityLink/index.ts
rename to plugins/cost-insights/src/components/MigrationAlertCard/index.ts
index 44875e4634..4feb749c27 100644
--- a/plugins/api-docs/src/components/EntityLink/index.ts
+++ b/plugins/cost-insights/src/components/MigrationAlertCard/index.ts
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { EntityLink } from './EntityLink';
+export { MigrationAlertCard } from './MigrationAlertCard';
diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.test.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.test.tsx
index bd3585f739..a2f87b1d86 100644
--- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.test.tsx
+++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.test.tsx
@@ -77,17 +77,6 @@ const renderProductInsightsCardInTestApp = async (
   );
 
 describe('', () => {
-  it('Renders the scroll anchors', async () => {
-    const rendered = await renderProductInsightsCardInTestApp(
-      mockProductCost,
-      MockComputeEngine,
-      Duration.P30D,
-    );
-    expect(
-      rendered.queryByTestId(`scroll-test-compute-engine`),
-    ).toBeInTheDocument();
-  });
-
   it('Should render the right subheader for products with cost data', async () => {
     const entity = {
       ...mockProductCost,
diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx
index 291044c977..d46737cafb 100644
--- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx
+++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.tsx
@@ -34,9 +34,9 @@ import {
   MapLoadingToProps,
   useLastCompleteBillingDate,
   useLoading,
-  useScroll,
 } from '../../hooks';
 import { findAnyKey } from '../../utils/assert';
+import { ScrollAnchor } from '../../utils/scroll';
 
 type LoadingProps = (isLoading: boolean) => void;
 
@@ -60,7 +60,6 @@ export const ProductInsightsCard = ({
 }: PropsWithChildren) => {
   const classes = useStyles();
   const mountedRef = useRef(false);
-  const { ScrollAnchor } = useScroll(product.kind);
   const [error, setError] = useState>(null);
   const dispatchLoading = useLoading(mapLoadingToProps);
   const lastCompleteBillingDate = useLastCompleteBillingDate();
@@ -108,7 +107,7 @@ export const ProductInsightsCard = ({
   if (error || !entity) {
     return (
       
-        
+        
         
           {error
             ? error.message
@@ -124,7 +123,7 @@ export const ProductInsightsCard = ({
       subheader={subheader}
       headerProps={headerProps}
     >
-      
+      
       {entities.length ? (
         ;
+
+export const AlertAcceptForm = forwardRef<
+  HTMLFormElement,
+  AlertAcceptFormProps
+>(({ onSubmit, disableSubmit }, ref) => {
+  const [checked, setChecked] = useState(false);
+
+  const onFormSubmit: FormEventHandler = e => {
+    e.preventDefault();
+    onSubmit(null);
+  };
+
+  const onChecked = (_: ChangeEvent, isChecked: boolean) => {
+    setChecked(isChecked);
+    disableSubmit(!isChecked);
+  };
+
+  return (
+    
+      
+        
+          }
+        />
+      
+    
+  );
+});
diff --git a/plugins/cost-insights/src/forms/AlertDismissForm.tsx b/plugins/cost-insights/src/forms/AlertDismissForm.tsx
new file mode 100644
index 0000000000..4271785958
--- /dev/null
+++ b/plugins/cost-insights/src/forms/AlertDismissForm.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {
+  ChangeEvent,
+  useEffect,
+  useState,
+  forwardRef,
+  FormEventHandler,
+} from 'react';
+import {
+  Box,
+  Collapse,
+  FormControl,
+  FormControlLabel,
+  TextField,
+  Typography,
+  Radio,
+  RadioGroup,
+} from '@material-ui/core';
+import {
+  Alert,
+  AlertFormProps,
+  AlertDismissReason,
+  AlertDismissOptions,
+  AlertDismissFormData,
+  Maybe,
+} from '../types';
+import { useAlertDialogStyles as useStyles } from '../utils/styles';
+
+export type AlertDismissFormProps = AlertFormProps;
+
+export const AlertDismissForm = forwardRef<
+  HTMLFormElement,
+  AlertDismissFormProps
+>(({ onSubmit, disableSubmit }, ref) => {
+  const classes = useStyles();
+  const [other, setOther] = useState>(null);
+  const [feedback, setFeedback] = useState>(null);
+  const [reason, setReason] = useState(
+    AlertDismissReason.Resolved,
+  );
+
+  const onFormSubmit: FormEventHandler = e => {
+    e.preventDefault();
+    if (reason) {
+      onSubmit({
+        other: other,
+        reason: reason,
+        feedback: feedback,
+      });
+    }
+  };
+
+  const onReasonChange = (_: ChangeEvent, value: string) => {
+    setReason(value as AlertDismissReason);
+  };
+
+  const onOtherChange = (e: ChangeEvent) => {
+    return e.target.value
+      ? setOther(e.target.value as AlertDismissReason)
+      : setOther(null);
+  };
+
+  const onFeedbackChange = (e: ChangeEvent) => {
+    return e.target.value
+      ? setFeedback(e.target.value as AlertDismissReason)
+      : setFeedback(null);
+  };
+
+  useEffect(() => {
+    function validateDismissForm() {
+      if (reason === AlertDismissReason.Other) {
+        if (other) {
+          disableSubmit(false);
+        } else {
+          disableSubmit(true);
+        }
+      } else if (reason) {
+        disableSubmit(false);
+      } else {
+        disableSubmit(true);
+      }
+    }
+
+    validateDismissForm();
+  }, [reason, other, disableSubmit]);
+
+  return (
+    

+      
+        
+          Reason for dismissing?
+        
+        
+          
+            {AlertDismissOptions.map(option => (
+              }
+              />
+            ))}
+          
+          
+            
+              
+            
+          
+        
+        
+          Any other feedback you can provide?
+        
+        
+      
+    
+  );
+});
diff --git a/plugins/cost-insights/src/forms/AlertSnoozeForm.tsx b/plugins/cost-insights/src/forms/AlertSnoozeForm.tsx
new file mode 100644
index 0000000000..743b5ddac1
--- /dev/null
+++ b/plugins/cost-insights/src/forms/AlertSnoozeForm.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {
+  ChangeEvent,
+  useEffect,
+  useState,
+  forwardRef,
+  FormEventHandler,
+} from 'react';
+import dayjs from 'dayjs';
+import {
+  Box,
+  FormControl,
+  FormControlLabel,
+  RadioGroup,
+  Radio,
+  Typography,
+} from '@material-ui/core';
+import {
+  Alert,
+  AlertFormProps,
+  Duration,
+  DEFAULT_DATE_FORMAT,
+  Maybe,
+  AlertSnoozeFormData,
+  AlertSnoozeOptions,
+} from '../types';
+import { useAlertDialogStyles as useStyles } from '../utils/styles';
+import { intervalsOf } from '../utils/duration';
+
+export type AlertSnoozeFormProps = AlertFormProps;
+
+export const AlertSnoozeForm = forwardRef<
+  HTMLFormElement,
+  AlertSnoozeFormProps
+>(({ onSubmit, disableSubmit }, ref) => {
+  const classes = useStyles();
+  const [duration, setDuration] = useState>(Duration.P7D);
+
+  useEffect(() => disableSubmit(false), [disableSubmit]);
+
+  const onFormSubmit: FormEventHandler = e => {
+    e.preventDefault();
+    if (duration) {
+      const repeatInterval = 1;
+      const today = dayjs().format(DEFAULT_DATE_FORMAT);
+      onSubmit({
+        intervals: intervalsOf(duration, today, repeatInterval),
+      });
+    }
+  };
+
+  const onSnoozeDurationChange = (
+    _: ChangeEvent,
+    value: string,
+  ) => {
+    setDuration(value as Duration);
+  };
+
+  return (
+    

+      
+        
+          For how long?
+        
+        
+          
+            {AlertSnoozeOptions.map(option => (
+              }
+              />
+            ))}
+          
+        
+      
+    
+  );
+});
diff --git a/plugins/cost-insights/src/forms/MigrationDismissForm.tsx b/plugins/cost-insights/src/forms/MigrationDismissForm.tsx
new file mode 100644
index 0000000000..ce71af3a37
--- /dev/null
+++ b/plugins/cost-insights/src/forms/MigrationDismissForm.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, {
+  useEffect,
+  useState,
+  forwardRef,
+  FormEventHandler,
+  ChangeEvent,
+} from 'react';
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  Typography,
+} from '@material-ui/core';
+import { AlertFormProps, Entity } from '../types';
+import { MigrationAlert } from '../alerts';
+import { findAlways } from '../utils/assert';
+
+export type MigrationDismissFormData = {
+  services: Entity[];
+};
+
+export type MigrationDismissFormProps = AlertFormProps<
+  MigrationAlert,
+  MigrationDismissFormData
+>;
+
+export const MigrationDismissForm = forwardRef<
+  HTMLFormElement,
+  MigrationDismissFormProps
+>(({ onSubmit, disableSubmit, alert }, ref) => {
+  const [services, setServices] = useState(alert.data.services);
+
+  const onFormSubmit: FormEventHandler = e => {
+    /* Remember to prevent default form behavior */
+    e.preventDefault();
+    onSubmit({ services: services });
+  };
+
+  const onCheckboxChange = (
+    e: ChangeEvent,
+    checked: boolean,
+  ) => {
+    if (checked) {
+      const service = findAlways(
+        alert.data.services,
+        s => s.id === e.target.value,
+      );
+      setServices(prevServices => prevServices.concat(service));
+    } else {
+      setServices(prevServices =>
+        prevServices.filter(p => p.id !== e.target.value),
+      );
+    }
+  };
+
+  /* Submit button is disabled by default. Use props.disableSubmit to toggle disabled state. */
+  useEffect(() => {
+    if (services.length) {
+      disableSubmit(false);
+    } else {
+      disableSubmit(true);
+    }
+  }, [services, disableSubmit]);
+
+  return (
+    /* All custom forms must accept a ref and implement an onSubmit handler. */
+    

+      
+        
+          Or choose which services to dismiss this alert for.
+        
+        
+          {alert.data.services.map((service, index) => (
+             p.id === service.id)}
+                  onChange={onCheckboxChange}
+                />
+              }
+            />
+          ))}
+        
+      
+    
+  );
+});
diff --git a/plugins/cost-insights/src/forms/index.ts b/plugins/cost-insights/src/forms/index.ts
new file mode 100644
index 0000000000..5b8384a293
--- /dev/null
+++ b/plugins/cost-insights/src/forms/index.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { AlertAcceptForm } from './AlertAcceptForm';
+export { AlertSnoozeForm } from './AlertSnoozeForm';
+export { AlertDismissForm } from './AlertDismissForm';
+export { MigrationDismissForm } from './MigrationDismissForm';
+export type { MigrationDismissFormData } from './MigrationDismissForm';
diff --git a/plugins/cost-insights/src/hooks/useScroll.tsx b/plugins/cost-insights/src/hooks/useScroll.tsx
index 0a1abbdad3..137762cc2d 100644
--- a/plugins/cost-insights/src/hooks/useScroll.tsx
+++ b/plugins/cost-insights/src/hooks/useScroll.tsx
@@ -18,105 +18,44 @@ import React, {
   SetStateAction,
   useState,
   useContext,
-  useEffect,
-  useRef,
   PropsWithChildren,
 } from 'react';
-import { CSSProperties } from '@material-ui/styles';
 import { Maybe } from '../types';
 
 export type ScrollTo = Maybe;
 
 export type ScrollContextProps = {
-  scrollTo: ScrollTo;
-  setScrollTo: Dispatch>;
+  scroll: ScrollTo;
+  setScroll: Dispatch>;
 };
 
-export type ScrollUtils = {
-  ScrollAnchor: (props: Omit) => JSX.Element;
-  scrollIntoView: () => void;
-};
-
-export interface ScrollAnchorProps extends ScrollIntoViewOptions {
-  id: ScrollTo;
-  top?: number;
-  left?: number;
-}
-
 export const ScrollContext = React.createContext<
   ScrollContextProps | undefined
 >(undefined);
 
-export const ScrollAnchor = ({
-  id,
-  top,
-  left,
-  behavior,
-  block,
-  inline,
-}: ScrollAnchorProps) => {
-  const divRef = useRef(null);
-  const context = useContext(ScrollContext);
-
-  if (!context) {
-    assertNever();
-  }
-
-  const { scrollTo, setScrollTo } = context;
-
-  const styles: CSSProperties = {
-    position: 'absolute',
-    height: 0,
-    width: 0,
-    top: top || 0,
-    left: left || 0,
-  };
-
-  useEffect(() => {
-    function scrollIntoView() {
-      const options = {
-        behavior: behavior || 'auto',
-        block: block || 'start',
-        inline: inline || 'nearest',
-      };
-
-      if (divRef.current && scrollTo === id) {
-        divRef.current.scrollIntoView(options);
-        setScrollTo(null);
-      }
-    }
-
-    scrollIntoView();
-  }, [scrollTo, setScrollTo, id, behavior, block, inline]);
-
-  return 
;
-};
-
 export const ScrollProvider = ({ children }: PropsWithChildren<{}>) => {
-  const [scrollTo, setScrollTo] = useState(null);
-
+  const [scroll, setScroll] = useState(null);
   return (
-    
+    
       {children}
     
   );
 };
 
-export function useScroll(id: ScrollTo): ScrollUtils {
+export enum ScrollType {
+  AlertSummary = 'alert-status-summary',
+}
+
+export function useScroll() {
   const context = useContext(ScrollContext);
 
   if (!context) {
     assertNever();
   }
 
-  return {
-    ScrollAnchor: props => ,
-    scrollIntoView: () => context.setScrollTo(id),
-  };
+  return [context.scroll, context.setScroll] as const;
 }
 
 function assertNever(): never {
-  throw new Error(
-    `Cannot use useScroll or ScrollAnchor outside ScrollProvider`,
-  );
+  throw new Error(`Cannot use useScroll outside ScrollProvider`);
 }
diff --git a/plugins/cost-insights/src/index.ts b/plugins/cost-insights/src/index.ts
index 7cd0456ad1..13ce929401 100644
--- a/plugins/cost-insights/src/index.ts
+++ b/plugins/cost-insights/src/index.ts
@@ -17,8 +17,8 @@
 export { plugin } from './plugin';
 export * from './client';
 export * from './api';
+export { ProjectGrowthAlert, UnlabeledDataflowAlert } from './alerts';
 export * from './components';
 export { useCurrency } from './hooks';
 export * from './types';
 export * from './utils/tests';
-export * from './utils/alerts';
diff --git a/plugins/cost-insights/src/types/Alert.ts b/plugins/cost-insights/src/types/Alert.ts
index 18b86c8cb8..eb8919b71a 100644
--- a/plugins/cost-insights/src/types/Alert.ts
+++ b/plugins/cost-insights/src/types/Alert.ts
@@ -13,23 +13,147 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { ChangeStatistic } from './ChangeStatistic';
+import { Duration } from './Duration';
 import { Maybe } from './Maybe';
 
 /**
  * Generic alert type with required fields for display. The `element` field will be rendered in
  * the Cost Insights "Action Items" section. This should use data fetched in the CostInsightsApi
  * implementation to render an InfoCard or other visualization.
+ *
+ * The alert type exposes hooks which can be used to enable and access various events,
+ * such as when a user dismisses or snoozes an alert. Default forms and buttons
+ * will be rendered if a hook is defined.
+ *
+ * Each default form can be overridden with a custom component. It must be implemented using
+ * React.forwardRef. See https://reactjs.org/docs/forwarding-refs
+ *
+ * Errors thrown within hooks will generate a snackbar error notification.
  */
+
 export type Alert = {
   title: string;
   subtitle: string;
+  element?: JSX.Element;
+  status?: AlertStatus;
   url?: string;
   buttonText?: string; // Default: View Instructions
-  element: JSX.Element;
+  SnoozeForm?: Maybe;
+  AcceptForm?: Maybe;
+  DismissForm?: Maybe;
+  onSnoozed?(options: AlertOptions): Promise;
+  onAccepted?(options: AlertOptions): Promise;
+  onDismissed?(options: AlertOptions): Promise;
 };
 
+export type AlertForm<
+  A extends Alert = any,
+  Data = any
+> = ForwardRefExoticComponent<
+  AlertFormProps & RefAttributes
+>;
+
+export interface AlertOptions {
+  data: T;
+  group: string;
+}
+
+/**
+ * Default snooze form intervals are expressed using an ISO 8601 repeating interval string.
+ * For example, R1/P7D/2020-09-02 for 1 week or R1/P30D/2020-09-02 for 1 month.
+ *
+ * For example, if a user dismisses an alert on Monday January 01 for 1 week,
+ * it can be re-served on Monday, January 08. 7 calendar days from January 02,
+ * inclusive of the last day.
+ *
+ * https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals
+ */
+export interface AlertSnoozeFormData {
+  intervals: string;
+}
+
+export interface AlertDismissFormData {
+  other: Maybe;
+  reason: AlertDismissReason;
+  feedback: Maybe;
+}
+
+// TODO: Convert enum to literal
+export enum AlertStatus {
+  Snoozed = 'snoozed',
+  Accepted = 'accepted',
+  Dismissed = 'dismissed',
+}
+
+export type AlertFormProps = {
+  alert: A;
+  onSubmit: (data: FormData) => void;
+  disableSubmit: (isDisabled: boolean) => void;
+};
+
+export interface AlertDismissOption {
+  label: string;
+  reason: string;
+}
+
+export enum AlertDismissReason {
+  Other = 'other',
+  Resolved = 'resolved',
+  Expected = 'expected',
+  Seasonal = 'seasonal',
+  Migration = 'migration',
+  NotApplicable = 'not-applicable',
+}
+
+export const AlertDismissOptions: AlertDismissOption[] = [
+  {
+    reason: AlertDismissReason.Resolved,
+    label: 'This action item is now resolved.',
+  },
+  {
+    reason: AlertDismissReason.Seasonal,
+    label: 'This is an expected increase at this time of year.',
+  },
+  {
+    reason: AlertDismissReason.Migration,
+    label: 'This increase is from a migration in process.',
+  },
+  {
+    reason: AlertDismissReason.Expected,
+    label: 'This is an expected increase due to our team’s priorities.',
+  },
+  {
+    reason: AlertDismissReason.NotApplicable,
+    label: 'This action item doesn’t make sense for my team.',
+  },
+  {
+    reason: AlertDismissReason.Other,
+    label: 'Other (please specify)',
+  },
+];
+
+export type AlertSnoozeOption = {
+  label: string;
+  duration: Duration;
+};
+
+export const AlertSnoozeOptions: AlertSnoozeOption[] = [
+  {
+    duration: Duration.P7D,
+    label: '1 Week',
+  },
+  {
+    duration: Duration.P30D,
+    label: '1 Month',
+  },
+  {
+    duration: Duration.P3M,
+    label: '1 Quarter',
+  },
+];
+
 export interface AlertCost {
   id: string;
   aggregation: [number, number];
diff --git a/plugins/cost-insights/src/types/Duration.ts b/plugins/cost-insights/src/types/Duration.ts
index c0f03d5c27..e25f38e63d 100644
--- a/plugins/cost-insights/src/types/Duration.ts
+++ b/plugins/cost-insights/src/types/Duration.ts
@@ -21,6 +21,7 @@
  * September 15.
  */
 export enum Duration {
+  P7D = 'P7D',
   P30D = 'P30D',
   P90D = 'P90D',
   P3M = 'P3M',
diff --git a/plugins/cost-insights/src/utils/alerts.test.tsx b/plugins/cost-insights/src/utils/alerts.test.tsx
new file mode 100644
index 0000000000..d821fd9f1f
--- /dev/null
+++ b/plugins/cost-insights/src/utils/alerts.test.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { ReactNode } from 'react';
+import { formOf } from './alerts';
+import { AlertAcceptForm, AlertDismissForm, AlertSnoozeForm } from '../forms';
+import { Alert, AlertStatus, AlertFormProps } from '../types';
+
+type Props = AlertFormProps;
+
+const createMockForm = (children: ReactNode) =>
+  React.forwardRef((props, ref) => (
+    

+      {children}
+    
+  ));
+
+const snoozeDefault: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onSnoozed: jest.fn(),
+};
+
+const snoozeCustom: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onSnoozed: jest.fn(),
+  SnoozeForm: createMockForm('Snooze'),
+};
+
+const snoozeNull: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onSnoozed: jest.fn(),
+  SnoozeForm: null,
+};
+
+const acceptDefault: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onAccepted: jest.fn(),
+};
+
+const acceptCustom: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onAccepted: jest.fn(),
+  AcceptForm: createMockForm('Accept'),
+};
+
+const acceptNull: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onAccepted: jest.fn(),
+  AcceptForm: null,
+};
+
+const dismissDefault: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onDismissed: jest.fn(),
+};
+
+const dismissCustom: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onDismissed: jest.fn(),
+  DismissForm: createMockForm('Dismiss'),
+};
+
+const dismissNull: Alert = {
+  title: 'title',
+  subtitle: 'subtitle',
+  onDismissed: jest.fn(),
+  DismissForm: null,
+};
+
+describe('formOf', () => {
+  describe.each`
+    msg                       | alert             | status                   | expected
+    ${'default snooze form'}  | ${snoozeDefault}  | ${AlertStatus.Snoozed}   | ${AlertSnoozeForm}
+    ${'custom snooze form'}   | ${snoozeCustom}   | ${AlertStatus.Snoozed}   | ${snoozeCustom.SnoozeForm}
+    ${'null snooze form'}     | ${snoozeNull}     | ${AlertStatus.Snoozed}   | ${null}
+    ${'default accept form'}  | ${acceptDefault}  | ${AlertStatus.Accepted}  | ${AlertAcceptForm}
+    ${'custom accept form'}   | ${acceptCustom}   | ${AlertStatus.Accepted}  | ${acceptCustom.AcceptForm}
+    ${'null accept form'}     | ${acceptNull}     | ${AlertStatus.Accepted}  | ${null}
+    ${'default dismiss form'} | ${dismissDefault} | ${AlertStatus.Dismissed} | ${AlertDismissForm}
+    ${'custom dismiss form'}  | ${dismissCustom}  | ${AlertStatus.Dismissed} | ${dismissCustom.DismissForm}
+    ${'null dismiss form'}    | ${dismissNull}    | ${AlertStatus.Dismissed} | ${null}
+    ${'no form or status'}    | ${null}           | ${null}                  | ${null}
+  `('Should render the correct form', ({ msg, alert, status, expected }) => {
+    it(`for ${msg}`, () => {
+      const result = formOf(alert, status);
+      expect(result).toBe(expected);
+    });
+  });
+});
diff --git a/plugins/cost-insights/src/utils/alerts.tsx b/plugins/cost-insights/src/utils/alerts.tsx
index fbb148f38a..56403a664c 100644
--- a/plugins/cost-insights/src/utils/alerts.tsx
+++ b/plugins/cost-insights/src/utils/alerts.tsx
@@ -14,50 +14,118 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { Alert, UnlabeledDataflowData, ProjectGrowthData } from '../types';
-import { UnlabeledDataflowAlertCard } from '../components/UnlabeledDataflowAlertCard';
-import { ProjectGrowthAlertCard } from '../components/ProjectGrowthAlertCard';
+import { Alert, AlertForm, AlertStatus, Maybe } from '../types';
+import { AlertAcceptForm, AlertDismissForm, AlertSnoozeForm } from '../forms';
+
+const createAlertHandler = (status?: AlertStatus) => (alert: Alert) =>
+  alert.status === status;
+export const isAlertActive = (alert: Alert) => !hasProperty(alert, 'status');
+export const isAlertSnoozed = createAlertHandler(AlertStatus.Snoozed);
+export const isAlertAccepted = createAlertHandler(AlertStatus.Accepted);
+export const isAlertDismissed = createAlertHandler(AlertStatus.Dismissed);
+
+const createStatusHandler = (status: AlertStatus) => (s: Maybe) =>
+  s === status;
+export const isStatusSnoozed = createStatusHandler(AlertStatus.Snoozed);
+export const isStatusAccepted = createStatusHandler(AlertStatus.Accepted);
+export const isStatusDismissed = createStatusHandler(AlertStatus.Dismissed);
+
+const createAlertEventHandler = (
+  onEvent: 'onSnoozed' | 'onAccepted' | 'onDismissed',
+) => (alert: Maybe): boolean => hasProperty(alert, onEvent);
+export const isSnoozeEnabled = createAlertEventHandler('onSnoozed');
+export const isAcceptEnabled = createAlertEventHandler('onAccepted');
+export const isDismissEnabled = createAlertEventHandler('onDismissed');
+
+const createFormEnabledHandler = (
+  Form: 'SnoozeForm' | 'AcceptForm' | 'DismissForm',
+) => (alert: Maybe): boolean => {
+  if (!alert) return false;
+  if (alert[Form] === null) return false;
+  switch (Form) {
+    case 'SnoozeForm':
+      return isSnoozeEnabled(alert);
+    case 'AcceptForm':
+      return isAcceptEnabled(alert);
+    case 'DismissForm':
+      return isDismissEnabled(alert);
+    default:
+      return false;
+  }
+};
+export const isSnoozeFormEnabled = createFormEnabledHandler('SnoozeForm');
+export const isAcceptFormEnabled = createFormEnabledHandler('AcceptForm');
+export const isDismissFormEnabled = createFormEnabledHandler('DismissForm');
 
 /**
- * The alerts below are examples of Alert implementation; the CostInsightsApi permits returning
- * any implementation of the Alert type, so adopters can create their own. The CostInsightsApi
- * fetches alert data from the backend, then creates Alert classes with the data.
+ * Utility for determining if a form is disabled.
+ * When a form is disabled, the dialog button's type should convert from submit to button.
+ * @param alert
+ * @param status
  */
-
-export class UnlabeledDataflowAlert implements Alert {
-  data: UnlabeledDataflowData;
-
-  constructor(data: UnlabeledDataflowData) {
-    this.data = data;
+export const isFormDisabled = (
+  alert: Maybe,
+  status: Maybe,
+): boolean => {
+  switch (status) {
+    case AlertStatus.Snoozed:
+      return alert?.SnoozeForm === null;
+    case AlertStatus.Accepted:
+      return alert?.AcceptForm === null;
+    case AlertStatus.Dismissed:
+      return alert?.DismissForm === null;
+    default:
+      return false;
   }
+};
 
-  title = 'Add labels to workflows';
-  subtitle =
-    'Labels show in billing data, enabling cost insights for each workflow.';
-  url = '/cost-insights/labeling-jobs';
-
-  get element() {
-    return ;
+export function formOf(
+  alert: Maybe,
+  status: Maybe,
+): Maybe {
+  switch (status) {
+    case AlertStatus.Snoozed: {
+      const SnoozeForm = alert?.SnoozeForm ?? AlertSnoozeForm;
+      return isSnoozeFormEnabled(alert) ? SnoozeForm : null;
+    }
+    case AlertStatus.Accepted: {
+      const AcceptForm = alert?.AcceptForm ?? AlertAcceptForm;
+      return isAcceptFormEnabled(alert) ? AcceptForm : null;
+    }
+    case AlertStatus.Dismissed: {
+      const DismissForm = alert?.DismissForm ?? AlertDismissForm;
+      return isDismissFormEnabled(alert) ? DismissForm : null;
+    }
+    default:
+      return null;
   }
 }
 
-export class ProjectGrowthAlert implements Alert {
-  data: ProjectGrowthData;
-
-  constructor(data: ProjectGrowthData) {
-    this.data = data;
-  }
-
-  get title() {
-    return `Investigate cost growth in project ${this.data.project}`;
-  }
-
-  subtitle =
-    'Cost growth outpacing business growth is unsustainable long-term.';
-  url = '/cost-insights/investigating-growth';
-
-  get element() {
-    return ;
+/**
+ * Utility for choosing from a fixed set of values for a given alert status.
+ * @param status
+ * @param values
+ */
+export function choose(
+  status: Maybe,
+  values: [T, T, T],
+  none: T,
+): T {
+  switch (status) {
+    case AlertStatus.Snoozed:
+      return values[0];
+    case AlertStatus.Accepted:
+      return values[1];
+    case AlertStatus.Dismissed:
+      return values[2];
+    default:
+      return none;
   }
 }
+
+export function hasProperty(alert: Maybe, prop: keyof Alert): boolean {
+  return prop in (alert ?? {});
+}
+
+export const sumOfAllAlerts = (sum: number, alerts: Alert[]) =>
+  sum + alerts.length;
diff --git a/plugins/cost-insights/src/utils/currency.ts b/plugins/cost-insights/src/utils/currency.ts
index f1d67a14e4..8adbc4dcaa 100644
--- a/plugins/cost-insights/src/utils/currency.ts
+++ b/plugins/cost-insights/src/utils/currency.ts
@@ -20,6 +20,7 @@ export const rateOf = (cost: number, duration: Duration) => {
   switch (duration) {
     case Duration.P30D:
       return cost / 12;
+    case Duration.P7D:
     case Duration.P90D:
     case Duration.P3M:
       return cost / 4;
diff --git a/plugins/cost-insights/src/utils/duration.ts b/plugins/cost-insights/src/utils/duration.ts
index 6eebead1d7..79ea150fc5 100644
--- a/plugins/cost-insights/src/utils/duration.ts
+++ b/plugins/cost-insights/src/utils/duration.ts
@@ -31,6 +31,7 @@ export function inclusiveStartDateOf(
   exclusiveEndDate: string,
 ): string {
   switch (duration) {
+    case Duration.P7D:
     case Duration.P30D:
     case Duration.P90D:
       return moment(exclusiveEndDate)
@@ -53,6 +54,7 @@ export function exclusiveEndDateOf(
   inclusiveEndDate: string,
 ): string {
   switch (duration) {
+    case Duration.P7D:
     case Duration.P30D:
     case Duration.P90D:
       return moment(inclusiveEndDate)
@@ -80,8 +82,15 @@ export function inclusiveEndDateOf(
 }
 
 // https://en.wikipedia.org/wiki/ISO_8601#Repeating_intervals
-export function intervalsOf(duration: Duration, inclusiveEndDate: string) {
-  return `R2/${duration}/${exclusiveEndDateOf(duration, inclusiveEndDate)}`;
+export function intervalsOf(
+  duration: Duration,
+  inclusiveEndDate: string,
+  repeating: number = 2,
+) {
+  return `R${repeating}/${duration}/${exclusiveEndDateOf(
+    duration,
+    inclusiveEndDate,
+  )}`;
 }
 
 export function quarterEndDate(inclusiveEndDate: string): string {
diff --git a/plugins/cost-insights/src/utils/loading.ts b/plugins/cost-insights/src/utils/loading.ts
index 3328f23cfc..d15101075d 100644
--- a/plugins/cost-insights/src/utils/loading.ts
+++ b/plugins/cost-insights/src/utils/loading.ts
@@ -29,6 +29,7 @@ export enum DefaultLoadingAction {
   CostInsightsInitial = 'cost-insights-initial',
   CostInsightsPage = 'cost-insights-page',
   CostInsightsProducts = 'cost-insights-products',
+  CostInsightsAlerts = 'cost-insights-alerts',
 }
 
 export const INITIAL_LOADING_ACTIONS = [
diff --git a/plugins/cost-insights/src/utils/scroll.tsx b/plugins/cost-insights/src/utils/scroll.tsx
new file mode 100644
index 0000000000..06f01775df
--- /dev/null
+++ b/plugins/cost-insights/src/utils/scroll.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { useEffect, useRef } from 'react';
+import { ScrollTo, useScroll } from '../hooks/useScroll';
+
+/*
+  Utility component use in conjuction with useScroll that allows scrollable components to control behavior and offset.
+  1. ScrollAnchor must be a direct child of a scrollable component.
+  2. ScrollAnchor's parent position must be relative. 
+  3. ScrollAnchor's id must be unique.
+*/
+
+export interface ScrollAnchorProps extends ScrollIntoViewOptions {
+  id: ScrollTo;
+  top?: number;
+  left?: number;
+}
+
+export const ScrollAnchor = ({
+  id,
+  left = 0,
+  top = -20,
+  block = 'start',
+  inline = 'nearest',
+  behavior = 'smooth',
+}: ScrollAnchorProps) => {
+  const divRef = useRef(null);
+  const [scroll, setScroll] = useScroll();
+
+  useEffect(() => {
+    function scrollIntoView() {
+      if (divRef.current && scroll === id) {
+        divRef.current.scrollIntoView({
+          block,
+          inline,
+          behavior,
+        });
+        setScroll(null);
+      }
+    }
+
+    scrollIntoView();
+  }, [scroll, setScroll, id, behavior, block, inline]);
+
+  return (
+    

+  );
+};
diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts
index c04ceba8e3..acb900c490 100644
--- a/plugins/cost-insights/src/utils/styles.ts
+++ b/plugins/cost-insights/src/utils/styles.ts
@@ -479,8 +479,8 @@ export const useSelectStyles = makeStyles(
     }),
 );
 
-export const useAlertActionCardStyles = makeStyles(
-  (theme: BackstageTheme) =>
+export const useActionItemCardStyles = makeStyles(
+  (theme: CostInsightsTheme) =>
     createStyles({
       card: {
         boxShadow: 'none',
@@ -489,15 +489,12 @@ export const useAlertActionCardStyles = makeStyles(
         backgroundColor: theme.palette.textVerySubtle,
         color: theme.palette.text.primary,
       },
-    }),
-);
-
-export const useAlertActionCardHeader = makeStyles(
-  (theme: CostInsightsTheme) =>
-    createStyles({
       root: {
+        minHeight: 80,
         paddingBottom: theme.spacing(2),
         borderRadius: theme.shape.borderRadius,
+      },
+      activeRoot: {
         cursor: 'pointer',
         transition: theme.transitions.create('background', {
           duration: theme.transitions.duration.short,
@@ -599,3 +596,31 @@ export const useEntityDialogStyles = makeStyles(theme =>
     },
   }),
 );
+
+export const useAlertDialogStyles = makeStyles((theme: BackstageTheme) =>
+  createStyles({
+    content: {
+      padding: theme.spacing(0, 5, 2, 5),
+    },
+    actions: {
+      padding: theme.spacing(2, 5),
+    },
+    radio: {
+      margin: theme.spacing(-0.5, 0, -0.5, 0),
+    },
+    icon: {
+      color: theme.palette.primary.dark,
+      margin: theme.spacing(2.5, 2.5, 0, 0),
+      padding: 0,
+    },
+  }),
+);
+
+export const useAlertStatusSummaryButtonStyles = makeStyles(() => ({
+  icon: {
+    transform: 'transform 5s',
+  },
+  clicked: {
+    transform: 'rotate(180deg)',
+  },
+}));
diff --git a/plugins/cost-insights/src/utils/tests.tsx b/plugins/cost-insights/src/utils/tests.tsx
index 852330acc3..aae2800573 100644
--- a/plugins/cost-insights/src/utils/tests.tsx
+++ b/plugins/cost-insights/src/utils/tests.tsx
@@ -163,8 +163,8 @@ export type MockScrollProviderProps = PropsWithChildren<{}>;
 
 export const MockScrollProvider = ({ children }: MockScrollProviderProps) => {
   const defaultContext: ScrollContextProps = {
-    scrollTo: null,
-    setScrollTo: jest.fn(),
+    scroll: null,
+    setScroll: jest.fn(),
   };
   return (
     
diff --git a/plugins/fossa/README.md b/plugins/fossa/README.md
index 489aef90ab..6e53ced0cf 100644
--- a/plugins/fossa/README.md
+++ b/plugins/fossa/README.md
@@ -19,21 +19,21 @@ yarn add @backstage/plugin-fossa
 ```js
 // packages/app/src/plugins.ts
 
-export { plugin as Fossa } from '@backstage/plugin-fossa';
+export { fossaPlugin } from '@backstage/plugin-fossa';
 ```
 
-3. Add the `FossaCard` to the EntityPage:
+3. Add the `EntityFossaCard` to the EntityPage:
 
 ```jsx
 // packages/app/src/components/catalog/EntityPage.tsx
 
-import { FossaCard } from '@backstage/plugin-fossa';
+import { EntityFossaCard } from '@backstage/plugin-fossa';
 
 const OverviewContent = ({ entity }: { entity: Entity }) => (
   
     // ...
     
-      
+      
     
     // ...
   
diff --git a/plugins/fossa/dev/index.tsx b/plugins/fossa/dev/index.tsx
index 7846324b25..06c71c48b7 100644
--- a/plugins/fossa/dev/index.tsx
+++ b/plugins/fossa/dev/index.tsx
@@ -14,21 +14,28 @@
  * limitations under the License.
  */
 
-import { createDevApp } from '@backstage/dev-utils';
-import {
-  Content,
-  createPlugin,
-  createRouteRef,
-  Header,
-  Page,
-} from '@backstage/core';
-import React from 'react';
-import { Grid } from '@material-ui/core';
-import { FossaApi, fossaApiRef } from '../src/api';
-import { FossaCard } from '../src';
 import { Entity } from '@backstage/catalog-model';
+import { Content, Header, Page } from '@backstage/core';
+import { createDevApp } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Grid } from '@material-ui/core';
+import React from 'react';
+import { EntityFossaCard } from '../src';
+import { FossaApi, fossaApiRef } from '../src/api';
 import { FOSSA_PROJECT_NAME_ANNOTATION } from '../src/components/useProjectName';
 
+const entity = (name?: string) =>
+  ({
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      annotations: {
+        [FOSSA_PROJECT_NAME_ANNOTATION]: name,
+      },
+      name: name,
+    },
+  } as Entity);
+
 createDevApp()
   .registerApi({
     api: fossaApiRef,
@@ -76,58 +83,51 @@ createDevApp()
         },
       } as FossaApi),
   })
-  .registerPlugin(
-    createPlugin({
-      id: 'fossa-demo',
-      register({ router }) {
-        const entity = (name?: string) =>
-          ({
-            apiVersion: 'backstage.io/v1alpha1',
-            kind: 'Component',
-            metadata: {
-              annotations: {
-                [FOSSA_PROJECT_NAME_ANNOTATION]: name,
-              },
-              name: name,
-            },
-          } as Entity);
-
-        const ExamplePage = () => (
-          
-            

-            
-              
-                
-                  
-                
-                
-                  
-                
-                
-                  
-                
-                
-                  
-                
-                
-                  
-                
-                
-                  
-                
-                
-                  
-                
-              
-            
-          
-        );
-
-        router.addRoute(
-          createRouteRef({ path: '/', title: 'Fossa' }),
-          ExamplePage,
-        );
-      },
-    }),
-  )
+  .addPage({
+    title: 'Entity Content',
+    element: (
+      
+        

+        
+          
+            
+              
+                
+              
+            
+            
+              
+                
+              
+            
+            
+              
+                
+              
+            
+            
+              
+                
+              
+            
+            
+              
+                
+              
+            
+            
+              
+                
+              
+            
+            
+              
+                
+              
+            
+          
+        
+      
+    ),
+  })
   .render();
diff --git a/plugins/fossa/package.json b/plugins/fossa/package.json
index b69039fa00..879f12c6f6 100644
--- a/plugins/fossa/package.json
+++ b/plugins/fossa/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/fossa/src/components/FossaCard/FossaCard.tsx b/plugins/fossa/src/components/FossaCard/FossaCard.tsx
index d1ac06d365..4cc27f5d03 100644
--- a/plugins/fossa/src/components/FossaCard/FossaCard.tsx
+++ b/plugins/fossa/src/components/FossaCard/FossaCard.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   EmptyState,
   InfoCard,
@@ -22,15 +21,16 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
-import { useAsync } from 'react-use';
-import { Entity } from '@backstage/catalog-model';
-import { fossaApiRef } from '../../api';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import { Grid, Tooltip } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { useAsync } from 'react-use';
+import { fossaApiRef } from '../../api';
 import {
   FOSSA_PROJECT_NAME_ANNOTATION,
   useProjectName,
 } from '../useProjectName';
-import { Grid, Tooltip } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
   numberError: {
@@ -65,13 +65,8 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export const FossaCard = ({
-  entity,
-  variant = 'gridItem',
-}: {
-  entity: Entity;
-  variant?: string;
-}) => {
+export const FossaCard = () => {
+  const { entity } = useEntity();
   const fossaApi = useApi(fossaApiRef);
 
   const projectTitle = useProjectName(entity);
@@ -96,7 +91,7 @@ export const FossaCard = ({
       ;
-};
+import { createComponentExtension } from '@backstage/core';
+import { fossaPlugin } from './plugin';
 
-export const AlertActionCardList = ({ alerts }: AlertActionCardListType) => (
-  
-    {alerts.map((alert, index) => (
-      
-        
-        {index < alerts.length - 1 && }
-      
-    ))}
-  
+export const EntityFossaCard = fossaPlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () => import('./components/FossaCard').then(m => m.FossaCard),
+    },
+  }),
 );
diff --git a/plugins/fossa/src/index.ts b/plugins/fossa/src/index.ts
index c35c534122..f1b645c29b 100644
--- a/plugins/fossa/src/index.ts
+++ b/plugins/fossa/src/index.ts
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
-export * from './components';
+export { fossaPlugin } from './plugin';
+export { EntityFossaCard } from './extensions';
diff --git a/plugins/fossa/src/plugin.test.ts b/plugins/fossa/src/plugin.test.ts
index 4f9b00a02b..9aed1387c5 100644
--- a/plugins/fossa/src/plugin.test.ts
+++ b/plugins/fossa/src/plugin.test.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { fossaPlugin } from './plugin';
 
 describe('fossa', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(fossaPlugin).toBeDefined();
   });
 });
diff --git a/plugins/fossa/src/plugin.ts b/plugins/fossa/src/plugin.ts
index d1fe621018..cb1de3911f 100644
--- a/plugins/fossa/src/plugin.ts
+++ b/plugins/fossa/src/plugin.ts
@@ -22,7 +22,7 @@ import {
 } from '@backstage/core';
 import { fossaApiRef, FossaClient } from './api';
 
-export const plugin = createPlugin({
+export const fossaPlugin = createPlugin({
   id: 'fossa',
   apis: [
     createApiFactory({
diff --git a/plugins/github-actions/package.json b/plugins/github-actions/package.json
index 7b7cf539f9..beb35b3cb0 100644
--- a/plugins/github-actions/package.json
+++ b/plugins/github-actions/package.json
@@ -35,7 +35,6 @@
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
     "@backstage/integration": "^0.3.1",
-    "@backstage/plugin-catalog": "^0.2.14",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/jenkins/package.json b/plugins/jenkins/package.json
index a99b9937b1..7456d4be53 100644
--- a/plugins/jenkins/package.json
+++ b/plugins/jenkins/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/jenkins/src/components/useProjectSlugFromEntity.ts b/plugins/jenkins/src/components/useProjectSlugFromEntity.ts
index 1dca918990..ac2d6c7e8f 100644
--- a/plugins/jenkins/src/components/useProjectSlugFromEntity.ts
+++ b/plugins/jenkins/src/components/useProjectSlugFromEntity.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEntity } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { JENKINS_ANNOTATION } from '../constants';
 
 export const useProjectSlugFromEntity = () => {
diff --git a/plugins/kafka/package.json b/plugins/kafka/package.json
index eef14439fd..546d20bc67 100644
--- a/plugins/kafka/package.json
+++ b/plugins/kafka/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.test.tsx b/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.test.tsx
index 3bee4e2e88..a28d1af15d 100644
--- a/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.test.tsx
+++ b/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.test.tsx
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { useConsumerGroupsForEntity } from './useConsumerGroupsForEntity';
-import { EntityContext } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { renderHook } from '@testing-library/react-hooks';
+import React, { PropsWithChildren } from 'react';
+import { useConsumerGroupsForEntity } from './useConsumerGroupsForEntity';
 
 describe('useConsumerGroupOffsets', () => {
   let entity: Entity;
diff --git a/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.ts b/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.ts
index 522a6273fe..11155dca10 100644
--- a/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.ts
+++ b/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsForEntity.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEntity } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { useMemo } from 'react';
 import { KAFKA_CONSUMER_GROUP_ANNOTATION } from '../../constants';
 
diff --git a/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsOffsetsForEntity.test.tsx b/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsOffsetsForEntity.test.tsx
index b7e3a29e80..9609654a90 100644
--- a/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsOffsetsForEntity.test.tsx
+++ b/plugins/kafka/src/components/ConsumerGroupOffsets/useConsumerGroupsOffsetsForEntity.test.tsx
@@ -13,19 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { EntityContext } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
-import * as data from './__fixtures__/consumer-group-offsets.json';
+import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { renderHook } from '@testing-library/react-hooks';
+import { when } from 'jest-when';
+import React, { PropsWithChildren } from 'react';
 import {
   ConsumerGroupOffsetsResponse,
   KafkaApi,
   kafkaApiRef,
 } from '../../api/types';
-import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
 import { useConsumerGroupsOffsetsForEntity } from './useConsumerGroupsOffsetsForEntity';
-import { when } from 'jest-when';
+import * as data from './__fixtures__/consumer-group-offsets.json';
 
 const consumerGroupOffsets = data as ConsumerGroupOffsetsResponse;
 
diff --git a/plugins/lighthouse/package.json b/plugins/lighthouse/package.json
index 3463842bc5..5b45bfa48b 100644
--- a/plugins/lighthouse/package.json
+++ b/plugins/lighthouse/package.json
@@ -34,7 +34,7 @@
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/config": "^0.1.2",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx b/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx
index 15a4ba3255..483d630db8 100644
--- a/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx
+++ b/plugins/lighthouse/src/components/AuditList/AuditListForEntity.test.tsx
@@ -14,23 +14,22 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { render } from '@testing-library/react';
+import { Entity } from '@backstage/catalog-model';
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import {
   lighthouseApiRef,
   LighthouseRestApi,
   WebsiteListResponse,
 } from '../../api';
-
-import * as data from '../../__fixtures__/website-list-response.json';
-import { EntityContext } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
-import { AuditListForEntity } from './AuditListForEntity';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
-import { MemoryRouter } from 'react-router-dom';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
+import * as data from '../../__fixtures__/website-list-response.json';
+import { AuditListForEntity } from './AuditListForEntity';
 
 jest.mock('../../hooks/useWebsiteForEntity', () => ({
   useWebsiteForEntity: jest.fn(),
diff --git a/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx b/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx
index 42c213b42e..1322736321 100644
--- a/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx
+++ b/plugins/lighthouse/src/components/Cards/LastLighthouseAuditCard.test.tsx
@@ -14,21 +14,21 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import { Entity } from '@backstage/catalog-model';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { lightTheme } from '@backstage/theme';
+import { ThemeProvider } from '@material-ui/core';
 import { render } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import {
   AuditCompleted,
   LighthouseCategoryId,
   WebsiteListResponse,
 } from '../../api';
-import { EntityContext } from '@backstage/plugin-catalog';
-import { Entity } from '@backstage/catalog-model';
-import { LastLighthouseAuditCard } from './LastLighthouseAuditCard';
-import { lightTheme } from '@backstage/theme';
-import { ThemeProvider } from '@material-ui/core';
 import { useWebsiteForEntity } from '../../hooks/useWebsiteForEntity';
-import { MemoryRouter } from 'react-router-dom';
 import * as data from '../../__fixtures__/website-list-response.json';
+import { LastLighthouseAuditCard } from './LastLighthouseAuditCard';
 
 jest.mock('../../hooks/useWebsiteForEntity', () => ({
   useWebsiteForEntity: jest.fn(),
diff --git a/plugins/lighthouse/src/hooks/useWebsiteForEntity.test.tsx b/plugins/lighthouse/src/hooks/useWebsiteForEntity.test.tsx
index c1773921cf..e22a64bdc1 100644
--- a/plugins/lighthouse/src/hooks/useWebsiteForEntity.test.tsx
+++ b/plugins/lighthouse/src/hooks/useWebsiteForEntity.test.tsx
@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { PropsWithChildren } from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
-import { lighthouseApiRef, WebsiteListResponse } from '../api';
-import { useWebsiteForEntity } from './useWebsiteForEntity';
-import { EntityContext } from '@backstage/plugin-catalog';
 import { Entity } from '@backstage/catalog-model';
+import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import { EntityContext } from '@backstage/plugin-catalog-react';
+import { renderHook } from '@testing-library/react-hooks';
+import React, { PropsWithChildren } from 'react';
+import { lighthouseApiRef, WebsiteListResponse } from '../api';
 import * as data from '../__fixtures__/website-list-response.json';
+import { useWebsiteForEntity } from './useWebsiteForEntity';
 
 const websiteListResponse = data as WebsiteListResponse;
 const website = websiteListResponse.items[0];
diff --git a/plugins/lighthouse/src/hooks/useWebsiteForEntity.ts b/plugins/lighthouse/src/hooks/useWebsiteForEntity.ts
index 08d9925b7a..e6713cf320 100644
--- a/plugins/lighthouse/src/hooks/useWebsiteForEntity.ts
+++ b/plugins/lighthouse/src/hooks/useWebsiteForEntity.ts
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useEntity } from '@backstage/plugin-catalog';
-import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../../constants';
 import { errorApiRef, useApi } from '@backstage/core';
-import { lighthouseApiRef } from '../api';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
+import { LIGHTHOUSE_WEBSITE_URL_ANNOTATION } from '../../constants';
+import { lighthouseApiRef } from '../api';
 
 // For the sake of simplicity we assume that an entity has only one website url. This is to avoid encoding a list
 // type in an annotation which is a plain string.
diff --git a/plugins/org/package.json b/plugins/org/package.json
index fbb3bd1afb..e376dea5bc 100644
--- a/plugins/org/package.json
+++ b/plugins/org/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index 0bf104bf61..506a98d012 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
@@ -21,7 +21,7 @@ import {
   RELATION_PARENT_OF,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { entityRouteParams } from '@backstage/plugin-catalog';
+import { entityRouteParams } from '@backstage/plugin-catalog-react';
 import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import EmailIcon from '@material-ui/icons/Email';
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
index 535b2acd0e..6815fd0e55 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.test.tsx
@@ -14,11 +14,11 @@
  * limitations under the License.
  */
 
+import { Entity, GroupEntity } from '@backstage/catalog-model';
+import { ApiProvider, ApiRegistry } from '@backstage/core';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
 import React from 'react';
-import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
-import { Entity, GroupEntity } from '@backstage/catalog-model';
 import { MembersListCard } from './MembersListCard';
 
 describe('MemberTab Test', () => {
diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index 04a137d515..f644e7db7e 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -20,7 +20,10 @@ import {
   UserEntity,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard, Progress, useApi } from '@backstage/core';
-import { catalogApiRef, entityRouteParams } from '@backstage/plugin-catalog';
+import {
+  catalogApiRef,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
 import {
   Box,
   createStyles,
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
index a61dd55161..60f06bd53a 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { InfoCard, useApi, Progress } from '@backstage/core';
 import { Entity } from '@backstage/catalog-model';
-import { catalogApiRef } from '@backstage/plugin-catalog';
-import { useAsync } from 'react-use';
-import Alert from '@material-ui/lab/Alert';
+import { InfoCard, Progress, useApi } from '@backstage/core';
+import { catalogApiRef, isOwnerOf } from '@backstage/plugin-catalog-react';
+import { pageTheme } from '@backstage/theme';
 import {
   Box,
   createStyles,
@@ -28,8 +26,9 @@ import {
   Theme,
   Typography,
 } from '@material-ui/core';
-import { pageTheme } from '@backstage/theme';
-import { isOwnerOf } from '../../isOwnerOf';
+import Alert from '@material-ui/lab/Alert';
+import React from 'react';
+import { useAsync } from 'react-use';
 
 type EntitiesKinds = 'Component' | 'API';
 type EntitiesTypes =
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
index 99048c0cd8..bdd0cd15f6 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+++ b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
@@ -19,7 +19,7 @@ import {
   UserEntity,
 } from '@backstage/catalog-model';
 import { Avatar, InfoCard } from '@backstage/core';
-import { entityRouteParams } from '@backstage/plugin-catalog';
+import { entityRouteParams } from '@backstage/plugin-catalog-react';
 import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
 import EmailIcon from '@material-ui/icons/Email';
 import GroupIcon from '@material-ui/icons/Group';
diff --git a/plugins/org/src/components/getEntityRelations.ts b/plugins/org/src/components/getEntityRelations.ts
deleted file mode 100644
index 9230aaebee..0000000000
--- a/plugins/org/src/components/getEntityRelations.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Entity, EntityName } from '@backstage/catalog-model';
-
-// TODO: this file is copied from /packages/app/catalog/src/components/getEntityRelations.ts and
-//       should be replaced once common relation-functions are introduced.
-
-/**
- * Get the related entity references.
- */
-export function getEntityRelations(
-  entity: Entity | undefined,
-  relationType: string,
-  filter?: { kind: string },
-): EntityName[] {
-  let entityNames =
-    entity?.relations
-      ?.filter(r => r.type === relationType)
-      ?.map(r => r.target) || [];
-
-  if (filter?.kind) {
-    entityNames = entityNames?.filter(
-      e => e.kind.toLowerCase() === filter.kind.toLowerCase(),
-    );
-  }
-
-  return entityNames;
-}
diff --git a/plugins/org/src/components/isOwnerOf.ts b/plugins/org/src/components/isOwnerOf.ts
deleted file mode 100644
index 51b3f41ae8..0000000000
--- a/plugins/org/src/components/isOwnerOf.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * Copyright 2020 Spotify AB
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {
-  Entity,
-  EntityName,
-  getEntityName,
-  RELATION_MEMBER_OF,
-  RELATION_OWNED_BY,
-} from '@backstage/catalog-model';
-import { getEntityRelations } from './getEntityRelations';
-
-// TODO: this file is copied from /packages/app/catalog/src/components/isOwnerOf.ts and
-//       should be replaced once common relation-functions are introduced.
-
-/**
- * Check if one entity is owned by another. Returns true, if the entity is owned by the
- * owner directly, or if the entity is owned by a group that the owner is a member of.
- */
-export function isOwnerOf(owner: Entity, owned: Entity) {
-  const possibleOwners: EntityName[] = [
-    ...getEntityRelations(owner, RELATION_MEMBER_OF, { kind: 'group' }),
-    ...(owner ? [getEntityName(owner)] : []),
-  ];
-
-  const owners = getEntityRelations(owned, RELATION_OWNED_BY);
-
-  for (const ownerItem of owners) {
-    if (
-      possibleOwners.find(
-        o =>
-          ownerItem.kind.toLowerCase() === o.kind.toLowerCase() &&
-          ownerItem.namespace.toLowerCase() === o.namespace.toLowerCase() &&
-          ownerItem.name.toLowerCase() === o.name.toLowerCase(),
-      ) !== undefined
-    ) {
-      return true;
-    }
-  }
-
-  return false;
-}
diff --git a/plugins/register-component/package.json b/plugins/register-component/package.json
index 29b629de9b..39c431b3cd 100644
--- a/plugins/register-component/package.json
+++ b/plugins/register-component/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx
index 6b097085e9..e9da8ef84d 100644
--- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx
+++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx
@@ -20,7 +20,7 @@ import {
   createRouteRef,
   errorApiRef,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
 import { render, screen } from '@testing-library/react';
diff --git a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
index d0b56598b2..8dbf712559 100644
--- a/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
+++ b/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.tsx
@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import { Grid, makeStyles } from '@material-ui/core';
+import { Entity, Location } from '@backstage/catalog-model';
 import {
-  InfoCard,
-  Page,
   Content,
-  useApi,
+  ContentHeader,
   errorApiRef,
   Header,
-  SupportButton,
-  ContentHeader,
+  InfoCard,
+  Page,
   RouteRef,
+  SupportButton,
+  useApi,
 } from '@backstage/core';
-import { RegisterComponentForm } from '../RegisterComponentForm';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { Grid, makeStyles } from '@material-ui/core';
+import React, { useState } from 'react';
 import { useMountedState } from 'react-use';
-import { Entity, Location } from '@backstage/catalog-model';
+import { RegisterComponentForm } from '../RegisterComponentForm';
 import { RegisterComponentResultDialog } from '../RegisterComponentResultDialog';
 
 const useStyles = makeStyles(theme => ({
diff --git a/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx b/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx
index c31d1344cb..87248cb6db 100644
--- a/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx
+++ b/plugins/register-component/src/components/RegisterComponentResultDialog/RegisterComponentResultDialog.tsx
@@ -16,7 +16,10 @@
 
 import { Entity } from '@backstage/catalog-model';
 import { RouteRef, StructuredMetadataTable } from '@backstage/core';
-import { entityRoute, entityRouteParams } from '@backstage/plugin-catalog';
+import {
+  entityRoute,
+  entityRouteParams,
+} from '@backstage/plugin-catalog-react';
 import {
   Button,
   Dialog,
diff --git a/plugins/rollbar/package.json b/plugins/rollbar/package.json
index f3a21709db..7ba72dad0d 100644
--- a/plugins/rollbar/package.json
+++ b/plugins/rollbar/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/rollbar/src/components/RollbarHome/RollbarHome.test.tsx b/plugins/rollbar/src/components/RollbarHome/RollbarHome.test.tsx
index ff3e909bf7..5bd885c488 100644
--- a/plugins/rollbar/src/components/RollbarHome/RollbarHome.test.tsx
+++ b/plugins/rollbar/src/components/RollbarHome/RollbarHome.test.tsx
@@ -21,7 +21,7 @@ import {
   ConfigApi,
   configApiRef,
 } from '@backstage/core';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog';
+import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import { RollbarApi, rollbarApiRef } from '../../api/RollbarApi';
diff --git a/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.test.tsx b/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.test.tsx
index a1c54dfd5a..6aeee782c4 100644
--- a/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.test.tsx
+++ b/plugins/rollbar/src/components/RollbarProjectPage/RollbarProjectPage.test.tsx
@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import * as React from 'react';
 import {
   ApiProvider,
   ApiRegistry,
   ConfigApi,
   configApiRef,
 } from '@backstage/core';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
+import * as React from 'react';
 import { RollbarApi, rollbarApiRef } from '../../api/RollbarApi';
 import { RollbarTopActiveItem } from '../../api/types';
 import { RollbarProjectPage } from './RollbarProjectPage';
-import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog';
 
 describe('RollbarProjectPage component', () => {
   const items: RollbarTopActiveItem[] = [
diff --git a/plugins/rollbar/src/hooks/useCatalogEntity.ts b/plugins/rollbar/src/hooks/useCatalogEntity.ts
index 172d057738..e39a7a75f7 100644
--- a/plugins/rollbar/src/hooks/useCatalogEntity.ts
+++ b/plugins/rollbar/src/hooks/useCatalogEntity.ts
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import { useAsync } from 'react-use';
 import { useApi } from '@backstage/core';
 import {
   catalogApiRef,
   useEntityCompoundName,
-} from '@backstage/plugin-catalog';
+} from '@backstage/plugin-catalog-react';
+import { useAsync } from 'react-use';
 
 export function useCatalogEntity() {
   const catalogApi = useApi(catalogApiRef);
diff --git a/plugins/rollbar/src/hooks/useRollbarEntities.ts b/plugins/rollbar/src/hooks/useRollbarEntities.ts
index 5979c5832a..3f3415b176 100644
--- a/plugins/rollbar/src/hooks/useRollbarEntities.ts
+++ b/plugins/rollbar/src/hooks/useRollbarEntities.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import { configApiRef, useApi } from '@backstage/core';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
-import { useApi, configApiRef } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
 import { ROLLBAR_ANNOTATION } from '../constants';
 
 export function useRollbarEntities() {
diff --git a/plugins/scaffolder-backend/config.d.ts b/plugins/scaffolder-backend/config.d.ts
index 28e2515471..3b31b4f951 100644
--- a/plugins/scaffolder-backend/config.d.ts
+++ b/plugins/scaffolder-backend/config.d.ts
@@ -19,9 +19,17 @@ export interface Config {
   scaffolder?: {
     github?: {
       [key: string]: string;
+      /**
+       * The visibility to set on created repositories.
+       */
+      visiblity?: 'public' | 'internal' | 'private';
     };
     gitlab?: {
       api: { [key: string]: string };
+      /**
+       * The visibility to set on created repositories.
+       */
+      visiblity?: 'public' | 'internal' | 'private';
     };
     azure?: {
       baseUrl: string;
@@ -29,6 +37,10 @@ export interface Config {
     };
     bitbucket?: {
       api: { [key: string]: string };
+      /**
+       * The visibility to set on created repositories.
+       */
+      visiblity?: 'public' | 'private';
     };
   };
 }
diff --git a/plugins/scaffolder-backend/package.json b/plugins/scaffolder-backend/package.json
index 57b62be2cd..7af9f567e3 100644
--- a/plugins/scaffolder-backend/package.json
+++ b/plugins/scaffolder-backend/package.json
@@ -62,7 +62,9 @@
     "@backstage/cli": "^0.5.0",
     "@backstage/test-utils": "^0.1.5",
     "@types/fs-extra": "^9.0.1",
+    "@types/mock-fs": "^4.13.0",
     "@types/supertest": "^2.0.8",
+    "mock-fs": "^4.13.0",
     "supertest": "^4.0.2",
     "yaml": "^1.10.0",
     "msw": "^0.21.2"
diff --git a/plugins/scaffolder-backend/src/scaffolder/jobs/processor.test.ts b/plugins/scaffolder-backend/src/scaffolder/jobs/processor.test.ts
index 0492400db6..c782037ec8 100644
--- a/plugins/scaffolder-backend/src/scaffolder/jobs/processor.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/jobs/processor.test.ts
@@ -13,11 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { JobProcessor } from './processor';
 import { TemplateEntityV1alpha1 } from '@backstage/catalog-model';
-import { StageInput } from './types';
-import { RequiredTemplateValues } from '../stages/templater';
 import parseGitUrl from 'git-url-parse';
+import mockFs from 'mock-fs';
+import os from 'os';
+import { RequiredTemplateValues } from '../stages/templater';
+import { makeLogStream } from './logger';
+import { JobProcessor } from './processor';
+import { StageInput } from './types';
 
 describe('JobProcessor', () => {
   const mockEntity: TemplateEntityV1alpha1 = {
@@ -31,7 +34,7 @@ describe('JobProcessor', () => {
       name: 'graphql-starter',
       title: 'GraphQL Service',
       description:
-        'A GraphQL starter template for backstage to get you up and running\nthe best pracices with GraphQL\n',
+        'A GraphQL starter template for backstage to get you up and running\nthe best practices with GraphQL\n',
       uid: '9cf16bad-16e0-4213-b314-c4eec773c50b',
       etag: 'ZTkxMjUxMjUtYWY3Yi00MjU2LWFkYWMtZTZjNjU5ZjJhOWM2',
 
@@ -68,9 +71,30 @@ describe('JobProcessor', () => {
     },
   };
 
+  const workingDirectory = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
+
+  // NOTE(freben): Without this line, mock-fs makes winston/logform break.
+  // There are a number of reported issues with logform and its use of dynamic
+  // strings for imports. It confuses webpack. The basic fix is to trigger
+  // those imports before mock-fs runs. I wanted to add a mock dir
+  // 'node_modules': mockFs.passthrough(), but that doesn't seem to be a thing
+  // in mock-fs 4.
+  // Probable REAL fix: https://github.com/winstonjs/logform/pull/117
+  makeLogStream({});
+
+  beforeEach(() => {
+    mockFs({
+      [workingDirectory]: mockFs.directory(),
+    });
+  });
+
+  afterEach(() => {
+    mockFs.restore();
+  });
+
   describe('create', () => {
     it('creates should create a new job with a unique id', async () => {
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
 
       const job = processor.create({
         entity: mockEntity,
@@ -84,7 +108,7 @@ describe('JobProcessor', () => {
     });
 
     it('should setup the correct context for the job', async () => {
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
 
       const job = processor.create({
         entity: mockEntity,
@@ -97,7 +121,7 @@ describe('JobProcessor', () => {
     });
 
     it('should set the status as pending', async () => {
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
 
       const job = processor.create({
         entity: mockEntity,
@@ -120,7 +144,7 @@ describe('JobProcessor', () => {
         },
       ];
 
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
 
       const job = processor.create({
         entity: mockEntity,
@@ -139,12 +163,12 @@ describe('JobProcessor', () => {
 
   describe('get', () => {
     it('return undefined for when the job does not exist', () => {
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       expect(processor.get('123')).not.toBeDefined();
     });
 
     it('should return the exact same instance of the job when one is created', async () => {
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       const job = processor.create({
         entity: mockEntity,
         values: mockValues,
@@ -154,9 +178,10 @@ describe('JobProcessor', () => {
       expect(processor.get(job.id)).toBe(job);
     });
   });
+
   describe('process', () => {
     it('throws an error when the status of the job is not in pending state', async () => {
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       const job = processor.create({
         entity: mockEntity,
         values: mockValues,
@@ -182,7 +207,7 @@ describe('JobProcessor', () => {
         },
       ];
 
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       const job = processor.create({
         entity: mockEntity,
         values: mockValues,
@@ -208,7 +233,7 @@ describe('JobProcessor', () => {
         },
       ];
 
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       const job = processor.create({
         entity: mockEntity,
         values: mockValues,
@@ -244,7 +269,7 @@ describe('JobProcessor', () => {
         },
       ];
 
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       const job = processor.create({
         entity: mockEntity,
         values: mockValues,
@@ -283,7 +308,7 @@ describe('JobProcessor', () => {
         },
       ];
 
-      const processor = new JobProcessor('/tmp');
+      const processor = new JobProcessor(workingDirectory);
       const job = processor.create({
         entity: mockEntity,
         values: mockValues,
diff --git a/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts b/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts
index 08423872f2..425fc07946 100644
--- a/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/jobs/processor.ts
@@ -131,7 +131,7 @@ export class JobProcessor implements Processor {
 
     try {
       for (const stage of job.stages) {
-        // Create a logger for each stage so we can create seperate
+        // Create a logger for each stage so we can create separate
         // Streams for each step.
         const { logger, log, stream } = makeLogStream({
           id: job.id,
@@ -151,8 +151,8 @@ export class JobProcessor implements Processor {
             logStream: stream,
           });
 
-          // If the handler returns something, then let's merge this onto the ontext
-          // For the next stage to use as it might be relevant.
+          // If the handler returns something, then let's merge this onto the
+          // context for the next stage to use as it might be relevant.
           if (handlerResponse) {
             job.context = {
               ...job.context,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/azure.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/azure.test.ts
index 9c4cccb5dc..6637a68e4b 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/azure.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/azure.test.ts
@@ -16,7 +16,7 @@
 
 import fs from 'fs-extra';
 import os from 'os';
-import { resolve } from 'path';
+import path from 'path';
 import { AzurePreparer } from './azure';
 import { getVoidLogger, Git } from '@backstage/backend-common';
 
@@ -37,8 +37,8 @@ describe('AzurePreparer', () => {
   });
 
   const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
-  const checkoutPath = resolve(workspacePath, 'checkout');
-  const templatePath = resolve(workspacePath, 'template');
+  const checkoutPath = path.resolve(workspacePath, 'checkout');
+  const templatePath = path.resolve(workspacePath, 'template');
   const prepareOptions = {
     url:
       'https://dev.azure.com/backstage-org/backstage-project/_git/template-repo',
@@ -54,7 +54,7 @@ describe('AzurePreparer', () => {
       username: 'notempty',
     });
     expect(fs.move).toHaveBeenCalledWith(checkoutPath, templatePath);
-    expect(fs.rmdir).toHaveBeenCalledWith(resolve(templatePath, '.git'));
+    expect(fs.rmdir).toHaveBeenCalledWith(path.resolve(templatePath, '.git'));
   });
 
   it('calls the clone command with the correct arguments for a repository', async () => {
@@ -100,17 +100,16 @@ describe('AzurePreparer', () => {
   });
 
   it('moves the template from path if it is specified', async () => {
-    const path = './subdir';
     await preparer.prepare({
       url: `https://dev.azure.com/backstage-org/backstage-project/_git/template-repo?path=${encodeURIComponent(
-        path,
+        './subdir',
       )}`,
       logger,
       workspacePath,
     });
 
     expect(fs.move).toHaveBeenCalledWith(
-      resolve(checkoutPath, 'subdir'),
+      path.resolve(checkoutPath, 'subdir'),
       templatePath,
     );
   });
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/bitbucket.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/bitbucket.test.ts
index 8af266f58e..faf7f0f6ff 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/bitbucket.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/bitbucket.test.ts
@@ -17,7 +17,7 @@
 import fs from 'fs-extra';
 import { BitbucketPreparer } from './bitbucket';
 import { getVoidLogger, Git } from '@backstage/backend-common';
-import { resolve } from 'path';
+import path from 'path';
 import os from 'os';
 
 jest.mock('fs-extra');
@@ -41,8 +41,8 @@ describe('BitbucketPreparer', () => {
   });
 
   const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
-  const checkoutPath = resolve(workspacePath, 'checkout');
-  const templatePath = resolve(workspacePath, 'template');
+  const checkoutPath = path.resolve(workspacePath, 'checkout');
+  const templatePath = path.resolve(workspacePath, 'template');
 
   const prepareOptions = {
     url: 'https://bitbucket.org/backstage-project/backstage-repo',
@@ -58,7 +58,7 @@ describe('BitbucketPreparer', () => {
       ref: expect.any(String),
     });
     expect(fs.move).toHaveBeenCalledWith(checkoutPath, templatePath);
-    expect(fs.rmdir).toHaveBeenCalledWith(resolve(templatePath, '.git'));
+    expect(fs.rmdir).toHaveBeenCalledWith(path.resolve(templatePath, '.git'));
   });
 
   it('calls the clone command with the correct arguments if an app password is provided for a repository', async () => {
@@ -92,7 +92,7 @@ describe('BitbucketPreparer', () => {
       workspacePath,
     });
     expect(fs.move).toHaveBeenCalledWith(
-      resolve(checkoutPath, '1', '2', '3'),
+      path.resolve(checkoutPath, '1', '2', '3'),
       templatePath,
     );
   });
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.test.ts
index 408653aee0..0c94edce42 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.test.ts
@@ -18,7 +18,7 @@ import { getVoidLogger } from '@backstage/backend-common';
 import fs from 'fs-extra';
 import { FilePreparer } from './file';
 import os from 'os';
-import { resolve } from 'path';
+import path from 'path';
 
 jest.mock('fs-extra');
 
@@ -26,16 +26,17 @@ describe('File preparer', () => {
   it('prepares templates from a file path', async () => {
     const logger = getVoidLogger();
     const preparer = new FilePreparer();
-    const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
-    const checkoutPath = resolve(workspacePath, 'checkout');
+    const root = os.platform() === 'win32' ? 'C:\\' : '/';
+    const workspacePath = path.join(root, 'tmp');
+    const checkoutPath = path.resolve(workspacePath, 'checkout');
 
     await preparer.prepare({
-      url: 'file:///path/to/template',
+      url: `file:///${root}path/to/template`,
       logger,
       workspacePath,
     });
     expect(fs.copy).toHaveBeenCalledWith(
-      resolve('/path', 'to', 'template'),
+      path.join(root, 'path', 'to', 'template'),
       checkoutPath,
       {
         recursive: true,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts
index cbf81bdb06..4d49ba222e 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/file.ts
@@ -15,6 +15,7 @@
  */
 import fs from 'fs-extra';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import { InputError } from '@backstage/backend-common';
 import { PreparerBase, PreparerOptions } from './types';
 
@@ -27,7 +28,7 @@ export class FilePreparer implements PreparerBase {
     const checkoutDir = path.join(workspacePath, 'checkout');
     await fs.ensureDir(checkoutDir);
 
-    const templatePath = url.slice('file://'.length);
+    const templatePath = fileURLToPath(url);
 
     await fs.copy(templatePath, checkoutDir, {
       recursive: true,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.test.ts
index fd8ab1880e..301f015c1e 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/github.test.ts
@@ -16,7 +16,7 @@
 
 import fs from 'fs-extra';
 import os from 'os';
-import { resolve } from 'path';
+import path from 'path';
 import { GithubPreparer } from './github';
 import { getVoidLogger, Git } from '@backstage/backend-common';
 
@@ -24,8 +24,8 @@ jest.mock('fs-extra');
 
 describe('GitHubPreparer', () => {
   const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
-  const checkoutPath = resolve(workspacePath, 'checkout');
-  const templatePath = resolve(workspacePath, 'template');
+  const checkoutPath = path.resolve(workspacePath, 'checkout');
+  const templatePath = path.resolve(workspacePath, 'template');
 
   const mockGitClient = {
     clone: jest.fn(),
@@ -57,10 +57,10 @@ describe('GitHubPreparer', () => {
       ref: expect.any(String),
     });
     expect(fs.move).toHaveBeenCalledWith(
-      resolve(checkoutPath, 'templates', 'graphql-starter', 'template'),
+      path.resolve(checkoutPath, 'templates', 'graphql-starter', 'template'),
       templatePath,
     );
-    expect(fs.rmdir).toHaveBeenCalledWith('/tmp/template/.git');
+    expect(fs.rmdir).toHaveBeenCalledWith(path.resolve(templatePath, '.git'));
   });
 
   it('calls the clone command with the correct arguments for a repository when no path is provided', async () => {
@@ -77,7 +77,7 @@ describe('GitHubPreparer', () => {
       ref: 'master',
     });
     expect(fs.move).toHaveBeenCalledWith(checkoutPath, templatePath);
-    expect(fs.rmdir).toHaveBeenCalledWith(resolve(templatePath, '.git'));
+    expect(fs.rmdir).toHaveBeenCalledWith(path.resolve(templatePath, '.git'));
   });
 
   it('calls the clone command with token', async () => {
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts
index 6c04ce3a00..6ed4651e4f 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/prepare/gitlab.test.ts
@@ -15,7 +15,7 @@
  */
 import fs from 'fs-extra';
 import os from 'os';
-import { resolve } from 'path';
+import path from 'path';
 import { GitlabPreparer } from './gitlab';
 import { getVoidLogger, Git } from '@backstage/backend-common';
 
@@ -23,8 +23,8 @@ jest.mock('fs-extra');
 
 describe('GitLabPreparer', () => {
   const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
-  const checkoutPath = resolve(workspacePath, 'checkout');
-  const templatePath = resolve(workspacePath, 'template');
+  const checkoutPath = path.resolve(workspacePath, 'checkout');
+  const templatePath = path.resolve(workspacePath, 'template');
 
   const mockGitClient = {
     clone: jest.fn(),
@@ -62,7 +62,7 @@ describe('GitLabPreparer', () => {
     });
 
     expect(fs.move).toHaveBeenCalledWith(checkoutPath, templatePath);
-    expect(fs.rmdir).toHaveBeenCalledWith(resolve(templatePath, '.git'));
+    expect(fs.rmdir).toHaveBeenCalledWith(path.resolve(templatePath, '.git'));
   });
 
   it(`clones the template from a sub directory if specified`, async () => {
@@ -73,7 +73,7 @@ describe('GitLabPreparer', () => {
       workspacePath,
     });
     expect(fs.move).toHaveBeenCalledWith(
-      resolve(checkoutPath, '1', '2', '3'),
+      path.resolve(checkoutPath, '1', '2', '3'),
       templatePath,
     );
   });
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/azure.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/azure.test.ts
index 81901809e4..1ce47e04dd 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/azure.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/azure.test.ts
@@ -20,6 +20,8 @@ jest.mock('azure-devops-node-api', () => ({
   getPersonalAccessTokenHandler: jest.fn().mockReturnValue(() => {}),
 }));
 
+import os from 'os';
+import { resolve } from 'path';
 import { AzurePublisher } from './azure';
 import { WebApi } from 'azure-devops-node-api';
 import * as helpers from './helpers';
@@ -28,6 +30,9 @@ import { getVoidLogger } from '@backstage/backend-common';
 describe('Azure Publisher', () => {
   const logger = getVoidLogger();
 
+  const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
+  const resultPath = resolve(workspacePath, 'result');
+
   describe('publish: createRemoteInAzure', () => {
     it('should use azure-devops-node-api to create a repo in the given project', async () => {
       const mockGitClient = {
@@ -53,7 +58,7 @@ describe('Azure Publisher', () => {
           storePath: 'https://dev.azure.com/organisation/project/_git/repo',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger,
       });
 
@@ -74,7 +79,7 @@ describe('Azure Publisher', () => {
         'project',
       );
       expect(helpers.initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'https://dev.azure.com/organization/project/_git/repo',
         auth: { username: 'notempty', password: 'fake-azure-token' },
         logger,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.test.ts
index 3b6ec9da89..4cf5e83ba3 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.test.ts
@@ -16,6 +16,8 @@
 
 jest.mock('./helpers');
 
+import os from 'os';
+import { resolve } from 'path';
 import { BitbucketPublisher } from './bitbucket';
 import { initRepoAndPush } from './helpers';
 import { getVoidLogger } from '@backstage/backend-common';
@@ -32,6 +34,9 @@ describe('Bitbucket Publisher', () => {
     jest.clearAllMocks();
   });
 
+  const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
+  const resultPath = resolve(workspacePath, 'result');
+
   describe('publish: createRemoteInBitbucketCloud', () => {
     it('should create repo in bitbucket cloud', async () => {
       server.use(
@@ -58,18 +63,21 @@ describe('Bitbucket Publisher', () => {
         ),
       );
 
-      const publisher = await BitbucketPublisher.fromConfig({
-        host: 'bitbucket.org',
-        username: 'fake-user',
-        appPassword: 'fake-token',
-      });
+      const publisher = await BitbucketPublisher.fromConfig(
+        {
+          host: 'bitbucket.org',
+          username: 'fake-user',
+          appPassword: 'fake-token',
+        },
+        { repoVisibility: 'private' },
+      );
 
       const result = await publisher.publish({
         values: {
           storePath: 'https://bitbucket.org/project/repo',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger: logger,
       });
 
@@ -80,7 +88,7 @@ describe('Bitbucket Publisher', () => {
       });
 
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'https://bitbucket.org/project/repo',
         auth: { username: 'fake-user', password: 'fake-token' },
         logger: logger,
@@ -117,17 +125,20 @@ describe('Bitbucket Publisher', () => {
         ),
       );
 
-      const publisher = await BitbucketPublisher.fromConfig({
-        host: 'bitbucket.mycompany.com',
-        token: 'fake-token',
-      });
+      const publisher = await BitbucketPublisher.fromConfig(
+        {
+          host: 'bitbucket.mycompany.com',
+          token: 'fake-token',
+        },
+        { repoVisibility: 'private' },
+      );
 
       const result = await publisher.publish({
         values: {
           storePath: 'https://bitbucket.mycompany.com/project/repo',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger: logger,
       });
 
@@ -138,7 +149,7 @@ describe('Bitbucket Publisher', () => {
       });
 
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'https://bitbucket.mycompany.com/scm/project/repo',
         auth: { username: 'x-token-auth', password: 'fake-token' },
         logger: logger,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.ts
index 2a274144ff..373920c005 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/bitbucket.ts
@@ -21,17 +21,23 @@ import { BitbucketIntegrationConfig } from '@backstage/integration';
 import parseGitUrl from 'git-url-parse';
 import path from 'path';
 
+export type RepoVisibilityOptions = 'private' | 'public';
+
 // TODO(blam): We should probably start to use a bitbucket client here that we can change
 // the baseURL to point at on-prem or public bitbucket versions like we do for
 // github and ghe. There's to much logic and not enough types here for us to say that this way is better than using
 // a supported bitbucket client if one exists.
 export class BitbucketPublisher implements PublisherBase {
-  static async fromConfig(config: BitbucketIntegrationConfig) {
+  static async fromConfig(
+    config: BitbucketIntegrationConfig,
+    { repoVisibility }: { repoVisibility: RepoVisibilityOptions },
+  ) {
     return new BitbucketPublisher({
       host: config.host,
       token: config.token,
       appPassword: config.appPassword,
       username: config.username,
+      repoVisibility,
     });
   }
 
@@ -41,6 +47,7 @@ export class BitbucketPublisher implements PublisherBase {
       token?: string;
       appPassword?: string;
       username?: string;
+      repoVisibility: RepoVisibilityOptions;
     },
   ) {}
 
@@ -101,6 +108,7 @@ export class BitbucketPublisher implements PublisherBase {
       body: JSON.stringify({
         scm: 'git',
         description: description,
+        is_private: this.config.repoVisibility === 'private',
       }),
       headers: {
         Authorization: `Basic ${buffer.toString('base64')}`,
@@ -144,6 +152,7 @@ export class BitbucketPublisher implements PublisherBase {
       body: JSON.stringify({
         name: name,
         description: description,
+        is_private: this.config.repoVisibility === 'private',
       }),
       headers: {
         Authorization: `Bearer ${this.config.token}`,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts
index faa8c49124..30fe8fd65a 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/github.test.ts
@@ -17,6 +17,9 @@
 jest.mock('@octokit/rest');
 jest.mock('./helpers');
 
+import os from 'os';
+import { resolve } from 'path';
+
 import { getVoidLogger } from '@backstage/backend-common';
 import { Octokit, RestEndpointMethodTypes } from '@octokit/rest';
 import { GithubPublisher } from './github';
@@ -36,6 +39,9 @@ describe('GitHub Publisher', () => {
     jest.clearAllMocks();
   });
 
+  const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
+  const resultPath = resolve(workspacePath, 'result');
+
   describe('with public repo visibility', () => {
     describe('publish: createRemoteInGithub', () => {
       it('should use octokit to create a repo in an organisation if the organisation property is set', async () => {
@@ -64,7 +70,7 @@ describe('GitHub Publisher', () => {
             owner: 'bob',
             access: 'blam/team',
           },
-          workspacePath: '/tmp/test',
+          workspacePath,
           logger,
         });
 
@@ -89,7 +95,7 @@ describe('GitHub Publisher', () => {
           permission: 'admin',
         });
         expect(initRepoAndPush).toHaveBeenCalledWith({
-          dir: '/tmp/test/result',
+          dir: resultPath,
           remoteUrl: 'https://github.com/backstage/backstage.git',
           auth: { username: 'fake-token', password: 'x-oauth-basic' },
           logger,
@@ -122,7 +128,7 @@ describe('GitHub Publisher', () => {
             owner: 'bob',
             access: 'blam',
           },
-          workspacePath: '/tmp/test',
+          workspacePath,
           logger,
         });
 
@@ -140,7 +146,7 @@ describe('GitHub Publisher', () => {
         expect(mockGithubClient.repos.addCollaborator).not.toHaveBeenCalled();
 
         expect(initRepoAndPush).toHaveBeenCalledWith({
-          dir: '/tmp/test/result',
+          dir: resultPath,
           remoteUrl: 'https://github.com/backstage/backstage.git',
           auth: { username: 'fake-token', password: 'x-oauth-basic' },
           logger,
@@ -175,7 +181,7 @@ describe('GitHub Publisher', () => {
           access: 'bob',
           description: 'description',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger,
       });
 
@@ -198,7 +204,7 @@ describe('GitHub Publisher', () => {
         permission: 'admin',
       });
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'https://github.com/backstage/backstage.git',
         auth: { username: 'fake-token', password: 'x-oauth-basic' },
         logger,
@@ -233,7 +239,7 @@ describe('GitHub Publisher', () => {
           storePath: 'https://github.com/blam/test',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger,
       });
 
@@ -249,7 +255,7 @@ describe('GitHub Publisher', () => {
         visibility: 'internal',
       });
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'https://github.com/backstage/backstage.git',
         auth: { username: 'fake-token', password: 'x-oauth-basic' },
         logger,
@@ -283,7 +289,7 @@ describe('GitHub Publisher', () => {
           storePath: 'https://github.com/blam/test',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger,
       });
 
@@ -299,7 +305,7 @@ describe('GitHub Publisher', () => {
         private: true,
       });
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'https://github.com/backstage/backstage.git',
         auth: { username: 'fake-token', password: 'x-oauth-basic' },
         logger,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts
index 99ddbbb2b7..61c8480efb 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.test.ts
@@ -20,6 +20,8 @@ jest.mock('@gitbeaker/node', () => ({
 
 jest.mock('./helpers');
 
+import os from 'os';
+import path from 'path';
 import { GitlabPublisher } from './gitlab';
 import { Gitlab } from '@gitbeaker/node';
 import { initRepoAndPush } from './helpers';
@@ -47,13 +49,19 @@ describe('GitLab Publisher', () => {
     );
   });
 
+  const workspacePath = os.platform() === 'win32' ? 'C:\\tmp' : '/tmp';
+  const resultPath = path.resolve(workspacePath, 'result');
+
   describe('publish: createRemoteInGitLab', () => {
     it('should use gitbeaker to create a repo in a namespace if the namespace property is set', async () => {
-      const publisher = await GitlabPublisher.fromConfig({
-        host: 'gitlab.com',
-        token: 'fake-token',
-        baseUrl: 'https://gitlab.hosted.com',
-      });
+      const publisher = await GitlabPublisher.fromConfig(
+        {
+          host: 'gitlab.com',
+          token: 'fake-token',
+          baseUrl: 'https://gitlab.hosted.com',
+        },
+        { repoVisibility: 'public' },
+      );
 
       mockGitlabClient.Namespaces.show.mockResolvedValue({
         id: 42,
@@ -68,7 +76,7 @@ describe('GitLab Publisher', () => {
           storePath: 'https://gitlab.com/blam/test',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger,
       });
 
@@ -83,9 +91,10 @@ describe('GitLab Publisher', () => {
       expect(mockGitlabClient.Projects.create).toHaveBeenCalledWith({
         namespace_id: 42,
         name: 'test',
+        visibility: 'public',
       });
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'mockclone',
         auth: { username: 'oauth2', password: 'fake-token' },
         logger,
@@ -93,10 +102,13 @@ describe('GitLab Publisher', () => {
     });
 
     it('should use gitbeaker to create a repo in the authed user if the namespace property is not set', async () => {
-      const publisher = await GitlabPublisher.fromConfig({
-        host: 'gitlab.com',
-        token: 'fake-token',
-      });
+      const publisher = await GitlabPublisher.fromConfig(
+        {
+          host: 'gitlab.com',
+          token: 'fake-token',
+        },
+        { repoVisibility: 'public' },
+      );
 
       mockGitlabClient.Namespaces.show.mockResolvedValue({});
       mockGitlabClient.Users.current.mockResolvedValue({
@@ -111,7 +123,7 @@ describe('GitLab Publisher', () => {
           storePath: 'https://gitlab.com/blam/test',
           owner: 'bob',
         },
-        workspacePath: '/tmp/test',
+        workspacePath,
         logger,
       });
 
@@ -123,9 +135,10 @@ describe('GitLab Publisher', () => {
       expect(mockGitlabClient.Projects.create).toHaveBeenCalledWith({
         namespace_id: 21,
         name: 'test',
+        visibility: 'public',
       });
       expect(initRepoAndPush).toHaveBeenCalledWith({
-        dir: '/tmp/test/result',
+        dir: resultPath,
         remoteUrl: 'mockclone',
         auth: { username: 'oauth2', password: 'fake-token' },
         logger,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts
index ace5791b1f..4b10d653da 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/gitlab.ts
@@ -22,18 +22,31 @@ import parseGitUrl from 'git-url-parse';
 import path from 'path';
 import { GitLabIntegrationConfig } from '@backstage/integration';
 
+export type RepoVisibilityOptions = 'private' | 'internal' | 'public';
+
 export class GitlabPublisher implements PublisherBase {
-  static async fromConfig(config: GitLabIntegrationConfig) {
+  static async fromConfig(
+    config: GitLabIntegrationConfig,
+    { repoVisibility }: { repoVisibility: RepoVisibilityOptions },
+  ) {
     if (!config.token) {
       return undefined;
     }
 
     const client = new Gitlab({ host: config.baseUrl, token: config.token });
-    return new GitlabPublisher({ token: config.token, client });
+    return new GitlabPublisher({
+      token: config.token,
+      client,
+      repoVisibility,
+    });
   }
 
   constructor(
-    private readonly config: { token: string; client: GitlabClient },
+    private readonly config: {
+      token: string;
+      client: GitlabClient;
+      repoVisibility: RepoVisibilityOptions;
+    },
   ) {}
 
   async publish({
@@ -85,6 +98,7 @@ export class GitlabPublisher implements PublisherBase {
     const project = (await this.config.client.Projects.create({
       namespace_id: targetNamespace,
       name: name,
+      visibility: this.config.repoVisibility,
     })) as { http_url_to_repo: string };
 
     return project?.http_url_to_repo;
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts b/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts
index 79eb3b7708..30201e6dca 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/publish/publishers.ts
@@ -16,10 +16,19 @@
 
 import { Config } from '@backstage/config';
 import { PublisherBase, PublisherBuilder } from './types';
-import { GithubPublisher, RepoVisibilityOptions } from './github';
-import { GitlabPublisher } from './gitlab';
+import {
+  GithubPublisher,
+  RepoVisibilityOptions as GithubRepoVisibilityOptions,
+} from './github';
+import {
+  GitlabPublisher,
+  RepoVisibilityOptions as GitlabRepoVisibilityOptions,
+} from './gitlab';
 import { AzurePublisher } from './azure';
-import { BitbucketPublisher } from './bitbucket';
+import {
+  BitbucketPublisher,
+  RepoVisibilityOptions as BitbucketRepoVisibilityOptions,
+} from './bitbucket';
 import { Logger } from 'winston';
 import { ScmIntegrations } from '@backstage/integration';
 
@@ -74,7 +83,7 @@ export class Publishers implements PublisherBuilder {
     for (const integration of scm.github.list()) {
       const repoVisibility = (config.getOptionalString(
         'scaffolder.github.visibility',
-      ) ?? 'public') as RepoVisibilityOptions;
+      ) ?? 'public') as GithubRepoVisibilityOptions;
 
       const publisher = await GithubPublisher.fromConfig(integration.config, {
         repoVisibility,
@@ -98,7 +107,13 @@ export class Publishers implements PublisherBuilder {
     }
 
     for (const integration of scm.gitlab.list()) {
-      const publisher = await GitlabPublisher.fromConfig(integration.config);
+      const repoVisibility = (config.getOptionalString(
+        'scaffolder.gitlab.visibility',
+      ) ?? 'public') as GitlabRepoVisibilityOptions;
+
+      const publisher = await GitlabPublisher.fromConfig(integration.config, {
+        repoVisibility,
+      });
 
       if (publisher) {
         publishers.register(integration.config.host, publisher);
@@ -107,16 +122,28 @@ export class Publishers implements PublisherBuilder {
 
         publishers.register(
           integration.config.host,
-          await GitlabPublisher.fromConfig({
-            token: config.getOptionalString('scaffolder.gitlab.token') ?? '',
-            host: integration.config.host,
-          }),
+          await GitlabPublisher.fromConfig(
+            {
+              token: config.getOptionalString('scaffolder.gitlab.token') ?? '',
+              host: integration.config.host,
+            },
+            { repoVisibility },
+          ),
         );
       }
     }
 
     for (const integration of scm.bitbucket.list()) {
-      const publisher = await BitbucketPublisher.fromConfig(integration.config);
+      const repoVisibility = (config.getOptionalString(
+        'scaffolder.bitbucket.visibility',
+      ) ?? 'public') as BitbucketRepoVisibilityOptions;
+
+      const publisher = await BitbucketPublisher.fromConfig(
+        integration.config,
+        {
+          repoVisibility,
+        },
+      );
 
       if (publisher) {
         publishers.register(integration.config.host, publisher);
@@ -125,15 +152,19 @@ export class Publishers implements PublisherBuilder {
 
         publishers.register(
           integration.config.host,
-          await BitbucketPublisher.fromConfig({
-            token: config.getOptionalString('scaffolder.bitbucket.token') ?? '',
-            username:
-              config.getOptionalString('scaffolder.bitbucket.username') ?? '',
-            appPassword:
-              config.getOptionalString('scaffolder.bitbucket.appPassword') ??
-              '',
-            host: integration.config.host,
-          }),
+          await BitbucketPublisher.fromConfig(
+            {
+              token:
+                config.getOptionalString('scaffolder.bitbucket.token') ?? '',
+              username:
+                config.getOptionalString('scaffolder.bitbucket.username') ?? '',
+              appPassword:
+                config.getOptionalString('scaffolder.bitbucket.appPassword') ??
+                '',
+              host: integration.config.host,
+            },
+            { repoVisibility },
+          ),
         );
       }
     }
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.test.ts b/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.test.ts
index f3c716e8a7..1a3ad76499 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.test.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.test.ts
@@ -24,6 +24,7 @@ jest.mock('fs-extra');
 
 import { CookieCutter } from './cookiecutter';
 import fs from 'fs-extra';
+import path from 'path';
 import { PassThrough } from 'stream';
 import Docker from 'dockerode';
 import parseGitUrl from 'git-url-parse';
@@ -56,7 +57,7 @@ describe('CookieCutter Templater', () => {
     });
 
     expect(fs.writeJson).toBeCalledWith(
-      'tempdir/template/cookiecutter.json',
+      path.join('tempdir', 'template', 'cookiecutter.json'),
       expect.objectContaining(values),
     );
   });
@@ -87,13 +88,16 @@ describe('CookieCutter Templater', () => {
       dockerClient: mockDocker,
     });
 
-    expect(fs.writeJSON).toBeCalledWith('tempdir/template/cookiecutter.json', {
-      ...existingJson,
-      ...values,
-      destination: {
-        git: expect.objectContaining({ organization: 'org', name: 'repo' }),
+    expect(fs.writeJSON).toBeCalledWith(
+      path.join('tempdir', 'template', 'cookiecutter.json'),
+      {
+        ...existingJson,
+        ...values,
+        destination: {
+          git: expect.objectContaining({ organization: 'org', name: 'repo' }),
+        },
       },
-    });
+    );
   });
 
   it('should throw an error if the cookiecutter json is malformed and not missing', async () => {
@@ -148,8 +152,8 @@ describe('CookieCutter Templater', () => {
         '/template',
         '--verbose',
       ],
-      templateDir: 'tempdir/template',
-      resultDir: 'tempdir/intermediate',
+      templateDir: path.join('tempdir', 'template'),
+      resultDir: path.join('tempdir', 'intermediate'),
       logStream: undefined,
       dockerClient: mockDocker,
     });
@@ -187,8 +191,8 @@ describe('CookieCutter Templater', () => {
         '/template',
         '--verbose',
       ],
-      templateDir: 'tempdir/template',
-      resultDir: 'tempdir/intermediate',
+      templateDir: path.join('tempdir', 'template'),
+      resultDir: path.join('tempdir', 'intermediate'),
       logStream: stream,
       dockerClient: mockDocker,
     });
@@ -223,8 +227,8 @@ describe('CookieCutter Templater', () => {
         args: expect.arrayContaining([
           '--no-input',
           '-o',
-          'tempdir/intermediate',
-          'tempdir/template',
+          path.join('tempdir', 'intermediate'),
+          path.join('tempdir', 'template'),
           '--verbose',
         ]),
         logStream: stream,
diff --git a/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.ts b/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.ts
index d19112561a..09d4faa37c 100644
--- a/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.ts
+++ b/plugins/scaffolder-backend/src/scaffolder/stages/templater/cookiecutter.ts
@@ -26,7 +26,7 @@ export class CookieCutter implements TemplaterBase {
     directory: string,
   ): Promise> {
     try {
-      return await fs.readJSON(`${directory}/cookiecutter.json`);
+      return await fs.readJSON(path.join(directory, 'cookiecutter.json'));
     } catch (ex) {
       if (ex.code !== 'ENOENT') {
         throw ex;
@@ -54,7 +54,7 @@ export class CookieCutter implements TemplaterBase {
       ...values,
     };
 
-    await fs.writeJSON(`${templateDir}/cookiecutter.json`, cookieInfo);
+    await fs.writeJSON(path.join(templateDir, 'cookiecutter.json'), cookieInfo);
 
     const cookieCutterInstalled = await commandExists('cookiecutter');
     if (cookieCutterInstalled) {
diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json
index d81d176232..d174991bb7 100644
--- a/plugins/scaffolder/package.json
+++ b/plugins/scaffolder/package.json
@@ -32,7 +32,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index 39999f938f..75ee2d07df 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -27,7 +27,7 @@ import {
   useApi,
   WarningPanel,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Button, Grid, Link, Typography } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
index 62963b58b8..f3f97be877 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.test.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { renderInTestApp, renderWithEffects } from '@backstage/test-utils';
 import { lightTheme } from '@backstage/theme';
 import { ThemeProvider } from '@material-ui/core';
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index e385f9adc3..e1422d4ec1 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
@@ -27,19 +27,19 @@ import {
   catalogApiRef,
   entityRoute,
   entityRouteParams,
-} from '@backstage/plugin-catalog';
+} from '@backstage/plugin-catalog-react';
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
-import React, { useState, useCallback } from 'react';
+import parseGitUrl from 'git-url-parse';
+import React, { useCallback, useState } from 'react';
 import { generatePath, Navigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
 import { scaffolderApiRef } from '../../api';
 import { rootRoute } from '../../routes';
+import { useJobPolling } from '../hooks/useJobPolling';
 import { JobStatusModal } from '../JobStatusModal';
 import { MultistepJsonForm } from '../MultistepJsonForm';
-import { useJobPolling } from '../hooks/useJobPolling';
-import parseGitUrl from 'git-url-parse';
 
 const useTemplate = (
   templateName: string,
diff --git a/plugins/search/package.json b/plugins/search/package.json
index 9409a416a0..28627b88ea 100644
--- a/plugins/search/package.json
+++ b/plugins/search/package.json
@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
     "@backstage/catalog-model": "^0.7.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/search/src/apis.ts b/plugins/search/src/apis.ts
index e74741e27b..9d88227a44 100644
--- a/plugins/search/src/apis.ts
+++ b/plugins/search/src/apis.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import { CatalogApi } from '@backstage/plugin-catalog';
 import { Entity, ENTITY_DEFAULT_NAMESPACE } from '@backstage/catalog-model';
+import { CatalogApi } from '@backstage/plugin-catalog-react';
 
 export type Result = {
   name: string;
diff --git a/plugins/search/src/components/SearchResult/SearchResult.tsx b/plugins/search/src/components/SearchResult/SearchResult.tsx
index dc4a502515..c4d8809732 100644
--- a/plugins/search/src/components/SearchResult/SearchResult.tsx
+++ b/plugins/search/src/components/SearchResult/SearchResult.tsx
@@ -13,23 +13,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState, useEffect } from 'react';
-import { useAsync } from 'react-use';
-
-import { makeStyles, Typography, Grid, Divider } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
 import {
-  Link,
   EmptyState,
+  Link,
   Progress,
   Table,
   TableColumn,
   useApi,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
-
-import { FiltersButton, Filters, FiltersState } from '../Filters';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { Divider, Grid, makeStyles, Typography } from '@material-ui/core';
+import { Alert } from '@material-ui/lab';
+import React, { useEffect, useState } from 'react';
+import { useAsync } from 'react-use';
 import SearchApi, { Result, SearchResults } from '../../apis';
+import { Filters, FiltersButton, FiltersState } from '../Filters';
 
 const useStyles = makeStyles(theme => ({
   searchQuery: {
diff --git a/plugins/sentry/dev/index.tsx b/plugins/sentry/dev/index.tsx
index c9313911b2..87e03605e4 100644
--- a/plugins/sentry/dev/index.tsx
+++ b/plugins/sentry/dev/index.tsx
@@ -15,17 +15,17 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { EntityProvider } from '@backstage/plugin-catalog';
 import { Content, Header, Page } from '@backstage/core';
 import { createDevApp, EntityGridItem } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import {
+  EntitySentryCard,
+  EntitySentryContent,
   MockSentryApi,
   SentryApi,
   sentryApiRef,
-  EntitySentryCard,
-  EntitySentryContent,
 } from '../src';
 import { SENTRY_PROJECT_SLUG_ANNOTATION } from '../src/components/useProjectSlug';
 
diff --git a/plugins/sentry/package.json b/plugins/sentry/package.json
index 52343ad332..38e1c55ed0 100644
--- a/plugins/sentry/package.json
+++ b/plugins/sentry/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
diff --git a/plugins/sentry/src/extensions.tsx b/plugins/sentry/src/extensions.tsx
index a66080f2b6..ea63cd472a 100644
--- a/plugins/sentry/src/extensions.tsx
+++ b/plugins/sentry/src/extensions.tsx
@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   createComponentExtension,
   createRoutableExtension,
 } from '@backstage/core';
-import { useEntity } from '@backstage/plugin-catalog';
+import { useEntity } from '@backstage/plugin-catalog-react';
+import React from 'react';
 import { plugin, rootRouteRef } from './plugin';
 
 export const EntitySentryContent = plugin.provide(
diff --git a/plugins/tech-radar/src/components/RadarComponent.tsx b/plugins/tech-radar/src/components/RadarComponent.tsx
index 583a7c91e0..759fec62c3 100644
--- a/plugins/tech-radar/src/components/RadarComponent.tsx
+++ b/plugins/tech-radar/src/components/RadarComponent.tsx
@@ -59,7 +59,7 @@ const RadarComponent = (props: TechRadarComponentProps): JSX.Element => {
         ring: loaderResponse!.rings.find(
           r => r.id === entry.timeline[0].ringId,
         )!,
-        history: entry.timeline.map(e => {
+        timeline: entry.timeline.map(e => {
           return {
             date: e.date,
             ring: loaderResponse!.rings.find(a => a.id === e.ringId)!,
@@ -67,6 +67,8 @@ const RadarComponent = (props: TechRadarComponentProps): JSX.Element => {
             moved: e.moved,
           };
         }),
+        moved: entry.timeline[0].moved,
+        url: entry.url,
       };
     });
   };
diff --git a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
index e319846d78..e10993b010 100644
--- a/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
+++ b/plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx
@@ -71,12 +71,12 @@ const useStyles = makeStyles(theme => ({
     'font-feature-settings': 'pnum',
   },
   entry: {
-    pointerEvents: 'none',
+    pointerEvents: 'visiblePainted',
     userSelect: 'none',
     fontSize: '11px',
   },
   entryLink: {
-    pointerEvents: 'none',
+    pointerEvents: 'visiblePainted',
   },
 }));
 
diff --git a/plugins/tech-radar/src/sampleData.ts b/plugins/tech-radar/src/sampleData.ts
index 914bc30931..613e7b3cdc 100644
--- a/plugins/tech-radar/src/sampleData.ts
+++ b/plugins/tech-radar/src/sampleData.ts
@@ -53,7 +53,7 @@ entries.push({
 entries.push({
   timeline: [
     {
-      moved: 0,
+      moved: -1,
       ringId: 'use',
       date: new Date('2020-08-06'),
       description:
@@ -69,7 +69,7 @@ entries.push({
 entries.push({
   timeline: [
     {
-      moved: 0,
+      moved: 1,
       ringId: 'use',
       date: new Date('2020-08-06'),
     },
@@ -88,7 +88,7 @@ entries.push({
       date: new Date('2020-08-06'),
     },
   ],
-  url: '#',
+  url: 'https://reactjs.org/',
   key: 'react',
   id: 'react',
   title: 'React',
diff --git a/plugins/techdocs-backend/src/service/router.ts b/plugins/techdocs-backend/src/service/router.ts
index 5ad23cde84..dc5e6a4911 100644
--- a/plugins/techdocs-backend/src/service/router.ts
+++ b/plugins/techdocs-backend/src/service/router.ts
@@ -148,6 +148,7 @@ export async function createRouter({
           }
           break;
         case 'awsS3':
+        case 'azureBlobStorage':
         case 'googleGcs':
           // This block should be valid for all external storage implementations. So no need to duplicate in future,
           // add the publisher type in the list here.
diff --git a/plugins/techdocs/config.d.ts b/plugins/techdocs/config.d.ts
index f9831f27cb..0af3ab4290 100644
--- a/plugins/techdocs/config.d.ts
+++ b/plugins/techdocs/config.d.ts
@@ -114,6 +114,47 @@ export interface Config {
             region?: string;
           };
         }
+      | {
+          /**
+           * attr: 'type' - accepts a string value
+           * e.g. type: 'azureBlobStorage'
+           * alternatives: 'azureBlobStorage' etc.
+           * @see http://backstage.io/docs/features/techdocs/configuration
+           */
+          type: 'azureBlobStorage';
+
+          /**
+           * azureBlobStorage required when 'type' is set to azureBlobStorage
+           */
+          azureBlobStorage?: {
+            /**
+             * (Required) Credentials used to access a storage container.
+             * @visibility secret
+             */
+            credentials: {
+              /**
+               * Account access name
+               * attr: 'account' - accepts a string value
+               * @visibility secret
+               */
+              accountName: string;
+              /**
+               * (Optional) Account secret primary key
+               * If not set, environment variables will be used to authenticate.
+               * https://docs.microsoft.com/en-us/azure/storage/common/storage-auth?toc=/azure/storage/blobs/toc.json
+               * attr: 'accountKey' - accepts a string value
+               * @visibility secret
+               */
+              accountKey?: string;
+            };
+            /**
+             * (Required) Cloud Storage Container Name
+             * attr: 'containerName' - accepts a string value
+             * @visibility backend
+             */
+            containerName: string;
+          };
+        }
       | {
           /**
            * attr: 'type' - accepts a string value
diff --git a/plugins/techdocs/package.json b/plugins/techdocs/package.json
index 2c1e0e5911..90c8fd3840 100644
--- a/plugins/techdocs/package.json
+++ b/plugins/techdocs/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
     "@backstage/core": "^0.5.0",
-    "@backstage/plugin-catalog": "^0.2.14",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/test-utils": "^0.1.6",
     "@backstage/theme": "^0.2.2",
     "@backstage/techdocs-common": "^0.3.6",
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.test.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.test.tsx
index 4979f027a6..fb951f0a19 100644
--- a/plugins/techdocs/src/reader/components/TechDocsHome.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsHome.test.tsx
@@ -15,7 +15,7 @@
  */
 
 import { ApiProvider, ApiRegistry } from '@backstage/core';
-import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog';
+import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
diff --git a/plugins/techdocs/src/reader/components/TechDocsHome.tsx b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
index 9f569dd167..2d8b5c7dcc 100644
--- a/plugins/techdocs/src/reader/components/TechDocsHome.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsHome.tsx
@@ -22,7 +22,7 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
-import { catalogApiRef } from '@backstage/plugin-catalog';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
 import { Grid } from '@material-ui/core';
 import React from 'react';
 import { generatePath, useNavigate } from 'react-router-dom';
diff --git a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx
index 5df4df4450..de6f4703e0 100644
--- a/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx
+++ b/plugins/user-settings/src/components/FeatureFlags/EmptyFlags.tsx
@@ -32,11 +32,11 @@ export const EmptyFlags = () => (
   
         
-          An example how how to add a feature flags is highlighted below:
+          An example for how to add a feature flag is highlighted below:
         
          {
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
   return (
     
       
@@ -32,7 +30,7 @@ export const General = () => {
         
           
             
-            {!fullScreen && }
+            
           
         
       
diff --git a/plugins/user-settings/src/components/General/Profile.tsx b/plugins/user-settings/src/components/General/Profile.tsx
index b0231d95b6..c8034085bd 100644
--- a/plugins/user-settings/src/components/General/Profile.tsx
+++ b/plugins/user-settings/src/components/General/Profile.tsx
@@ -24,31 +24,27 @@ export const Profile = () => {
   const { profile, displayName } = useUserProfile();
 
   return (
-    
-      
-        
-          
-            
-              
-            
-            
-              
-                
-                  
-                    {displayName}
-                  
-                  
-                    {profile.email}
-                  
-                
-              
-              
-                
-              
+    
+      
+        
+          
+        
+        
+          
+            
+              
+                {displayName}
+              
+              
+                {profile.email}
+              
             
           
-        
+          
+            
+          
+        
       
-    
+    
   );
 };
diff --git a/yarn.lock b/yarn.lock
index c40b1ab675..973fb44a15 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -954,6 +954,101 @@
   dependencies:
     tslib "^1.8.0"
 
+"@azure/abort-controller@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-1.0.2.tgz#822405c966b2aec16fb62c1b19d37eaccf231995"
+  integrity sha512-XUyTo+bcyxHEf+jlN2MXA7YU9nxVehaubngHV1MIZZaqYmZqykkoeAz/JMMEeR7t3TcyDwbFa3Zw8BZywmIx4g==
+  dependencies:
+    tslib "^2.0.0"
+
+"@azure/core-asynciterator-polyfill@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@azure/core-asynciterator-polyfill/-/core-asynciterator-polyfill-1.0.0.tgz#dcccebb88406e5c76e0e1d52e8cc4c43a68b3ee7"
+  integrity sha512-kmv8CGrPfN9SwMwrkiBK9VTQYxdFQEGe0BmQk+M8io56P9KNzpAxcWE/1fxJj7uouwN4kXF0BHW8DNlgx+wtCg==
+
+"@azure/core-auth@^1.1.3":
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.1.4.tgz#af9a334acf3cb9c49e6013e6caf6dc9d43476030"
+  integrity sha512-+j1embyH1jqf04AIfJPdLafd5SC1y6z1Jz4i+USR1XkTp6KM8P5u4/AjmWMVoEQdM/M29PJcRDZcCEWjK9S1bw==
+  dependencies:
+    "@azure/abort-controller" "^1.0.0"
+    tslib "^2.0.0"
+
+"@azure/core-http@^1.2.0":
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/@azure/core-http/-/core-http-1.2.2.tgz#a6f7717184fd2657d3acabd1d64dfdc0bd531ce3"
+  integrity sha512-9eu2OcbR7e44gqBy4U1Uv8NTWgLIMwKXMEGgO2MahsJy5rdTiAhs5fJHQffPq8uX2MFh21iBODwO9R/Xlov88A==
+  dependencies:
+    "@azure/abort-controller" "^1.0.0"
+    "@azure/core-auth" "^1.1.3"
+    "@azure/core-tracing" "1.0.0-preview.9"
+    "@azure/logger" "^1.0.0"
+    "@opentelemetry/api" "^0.10.2"
+    "@types/node-fetch" "^2.5.0"
+    "@types/tunnel" "^0.0.1"
+    form-data "^3.0.0"
+    node-fetch "^2.6.0"
+    process "^0.11.10"
+    tough-cookie "^4.0.0"
+    tslib "^2.0.0"
+    tunnel "^0.0.6"
+    uuid "^8.3.0"
+    xml2js "^0.4.19"
+
+"@azure/core-lro@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@azure/core-lro/-/core-lro-1.0.3.tgz#1ddfb4ecdb81ce87b5f5d972ffe2acbbc46e524e"
+  integrity sha512-Py2crJ84qx1rXkzIwfKw5Ni4WJuzVU7KAF6i1yP3ce8fbynUeu8eEWS4JGtSQgU7xv02G55iPDROifmSDbxeHA==
+  dependencies:
+    "@azure/abort-controller" "^1.0.0"
+    "@azure/core-http" "^1.2.0"
+    events "^3.0.0"
+    tslib "^2.0.0"
+
+"@azure/core-paging@^1.1.1":
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.1.3.tgz#3587c9898a0530cacb64bab216d7318468aa5efc"
+  integrity sha512-his7Ah40ThEYORSpIAwuh6B8wkGwO/zG7gqVtmSE4WAJ46e36zUDXTKReUCLBDc6HmjjApQQxxcRFy5FruG79A==
+  dependencies:
+    "@azure/core-asynciterator-polyfill" "^1.0.0"
+
+"@azure/core-tracing@1.0.0-preview.9":
+  version "1.0.0-preview.9"
+  resolved "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.0.0-preview.9.tgz#84f3b85572013f9d9b85e1e5d89787aa180787eb"
+  integrity sha512-zczolCLJ5QG42AEPQ+Qg9SRYNUyB+yZ5dzof4YEc+dyWczO9G2sBqbAjLB7IqrsdHN2apkiB2oXeDKCsq48jug==
+  dependencies:
+    "@opencensus/web-types" "0.0.7"
+    "@opentelemetry/api" "^0.10.2"
+    tslib "^2.0.0"
+
+"@azure/identity@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/@azure/identity/-/identity-1.2.2.tgz#00d673c8881778c55777fcc76e822b42466d3fc7"
+  integrity sha512-aYkeNXl52aEHW1iOZQJb3SC7Vvbu87f01iNT+pSVHwj09LpN9+gP/Lb9uoWy36Fgv9WlukM55LbjLSbb1Renqw==
+  dependencies:
+    "@azure/core-http" "^1.2.0"
+    "@azure/core-tracing" "1.0.0-preview.9"
+    "@azure/logger" "^1.0.0"
+    "@azure/msal-node" "1.0.0-beta.3"
+    "@opentelemetry/api" "^0.10.2"
+    axios "^0.21.1"
+    events "^3.0.0"
+    jws "^4.0.0"
+    msal "^1.0.2"
+    open "^7.0.0"
+    qs "^6.7.0"
+    tslib "^2.0.0"
+    uuid "^8.3.0"
+  optionalDependencies:
+    keytar "^5.4.0"
+
+"@azure/logger@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@azure/logger/-/logger-1.0.1.tgz#19b333203d1b2931353d8879e814b64a7274837a"
+  integrity sha512-QYQeaJ+A5x6aMNu8BG5qdsVBnYBop9UMwgUvGihSjf1PdZZXB+c/oMdM2ajKwzobLBh9e9QuMQkN9iL+IxLBLA==
+  dependencies:
+    tslib "^2.0.0"
+
 "@azure/msal-common@^2.1.0":
   version "2.1.0"
   resolved "https://registry.npmjs.org/@azure/msal-common/-/msal-common-2.1.0.tgz#a4bc17e254d6ec524016f13267947dd4ff4a624d"
@@ -961,7 +1056,7 @@
   dependencies:
     debug "^4.1.1"
 
-"@azure/msal-node@^1.0.0-beta.3":
+"@azure/msal-node@1.0.0-beta.3", "@azure/msal-node@^1.0.0-beta.3":
   version "1.0.0-beta.3"
   resolved "https://registry.npmjs.org/@azure/msal-node/-/msal-node-1.0.0-beta.3.tgz#c84c7948028b39e48b901f5fac35bdedcbc8772e"
   integrity sha512-/KfYRfrsOIrZONvo/0Vi5umuqbPBtCWNtmRvkse64uI0C4CP/W4WXwRD42VMws/8LtKvr1I5rYlYgFzt5zDz/A==
@@ -971,6 +1066,21 @@
     jsonwebtoken "^8.5.1"
     uuid "^8.3.0"
 
+"@azure/storage-blob@^12.4.0":
+  version "12.4.0"
+  resolved "https://registry.npmjs.org/@azure/storage-blob/-/storage-blob-12.4.0.tgz#7127ddd9f413105e2c3688691bc4c6245d0806b3"
+  integrity sha512-OnhVSoKD1HzBB79/rFzPbC4w9TdzFXeoOwkX+aIu3rb8qvN0VaqvUqZXSrBCyG2LcLyVkY4MPCJQBrmEUm9kvw==
+  dependencies:
+    "@azure/abort-controller" "^1.0.0"
+    "@azure/core-http" "^1.2.0"
+    "@azure/core-lro" "^1.0.2"
+    "@azure/core-paging" "^1.1.1"
+    "@azure/core-tracing" "1.0.0-preview.9"
+    "@azure/logger" "^1.0.0"
+    "@opentelemetry/api" "^0.10.2"
+    events "^3.0.0"
+    tslib "^2.0.0"
+
 "@babel/code-frame@7.0.0":
   version "7.0.0"
   resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
@@ -4917,6 +5027,23 @@
     fast-deep-equal "^3.1.3"
     lodash.clonedeep "^4.5.0"
 
+"@opencensus/web-types@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/@opencensus/web-types/-/web-types-0.0.7.tgz#4426de1fe5aa8f624db395d2152b902874f0570a"
+  integrity sha512-xB+w7ZDAu3YBzqH44rCmG9/RlrOmFuDPt/bpf17eJr8eZSrLt7nc7LnWdxM9Mmoj/YKMHpxRg28txu3TcpiL+g==
+
+"@opentelemetry/api@^0.10.2":
+  version "0.10.2"
+  resolved "https://registry.npmjs.org/@opentelemetry/api/-/api-0.10.2.tgz#9647b881f3e1654089ff7ea59d587b2d35060654"
+  integrity sha512-GtpMGd6vkzDMYcpu2t9LlhEgMy/SzBwRnz48EejlRArYqZzqSzAsKmegUK7zHgl+EOIaK9mKHhnRaQu3qw20cA==
+  dependencies:
+    "@opentelemetry/context-base" "^0.10.2"
+
+"@opentelemetry/context-base@^0.10.2":
+  version "0.10.2"
+  resolved "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.10.2.tgz#55bea904b2b91aa8a8675df9eaba5961bddb1def"
+  integrity sha512-hZNKjKOYsckoOEgBziGMnBcX0M7EtstnCmwz5jZUOUYwlZ+/xxX6z3jPu1XVO2Jivk0eLfuP9GP+vFD49CMetw==
+
 "@panva/asn1.js@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@panva/asn1.js/-/asn1.js-1.0.0.tgz#dd55ae7b8129e02049f009408b97c61ccf9032f6"
@@ -5107,10 +5234,10 @@
     react-router-dom "6.0.0-beta.0"
     react-use "^15.3.3"
 
-"@rollup/plugin-commonjs@^16.0.0":
-  version "16.0.0"
-  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz#169004d56cd0f0a1d0f35915d31a036b0efe281f"
-  integrity sha512-LuNyypCP3msCGVQJ7ki8PqYdpjfEkE/xtFa5DqlF+7IBD0JsfMZ87C58heSwIMint58sAUZbt3ITqOmdQv/dXw==
+"@rollup/plugin-commonjs@^17.1.0":
+  version "17.1.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz#757ec88737dffa8aa913eb392fade2e45aef2a2d"
+  integrity sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
     commondir "^1.0.1"
@@ -6527,9 +6654,9 @@
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.5":
-  version "4.17.9"
-  resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.9.tgz#2d7b34dcfd25ec663c25c85d76608f8b249667f1"
-  integrity sha512-DG0BYg6yO+ePW+XoDENYz8zhNGC3jDDEpComMYn7WJc4mY1Us8Rw9ax2YhJXxpyk2SF47PQAoQ0YyVT1a0bEkA==
+  version "4.17.18"
+  resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.18.tgz#8371e260f40e0e1ca0c116a9afcd9426fa094c40"
+  integrity sha512-m4JTwx5RUBNZvky/JJ8swEJPKFd8si08pPF2PfizYjGZOKr/svUWPcoUmLow6MmPzhasphB7gSTINY67xn3JNA==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -6949,6 +7076,14 @@
     "@types/node" "*"
     form-data "^3.0.0"
 
+"@types/node-fetch@^2.5.0":
+  version "2.5.8"
+  resolved "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.5.8.tgz#e199c835d234c7eb0846f6618012e558544ee2fb"
+  integrity sha512-fbjI6ja0N5ZA8TV53RUqzsKNkl9fv8Oj3T7zxW7FGv1GSH7gwJaNF8dzCjrqKaxKeUpTz4yT1DaJFq/omNpGfw==
+  dependencies:
+    "@types/node" "*"
+    form-data "^3.0.0"
+
 "@types/node@*", "@types/node@>= 8":
   version "14.0.26"
   resolved "https://registry.npmjs.org/@types/node/-/node-14.0.26.tgz#22a3b8a46510da8944b67bfc27df02c34a35331c"
@@ -7408,6 +7543,13 @@
   resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.0.tgz#fef1904e4668b6e5ecee60c52cc6a078ffa6697d"
   integrity sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==
 
+"@types/tunnel@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/@types/tunnel/-/tunnel-0.0.1.tgz#0d72774768b73df26f25df9184273a42da72b19c"
+  integrity sha512-AOqu6bQu5MSWwYvehMXLukFHnupHrpZ8nvgae5Ggie9UwzDR1CCwoXgSSWNZJuyOlCdfdsWMA5F2LlmvyoTv8A==
+  dependencies:
+    "@types/node" "*"
+
 "@types/uglify-js@*":
   version "3.0.4"
   resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082"
@@ -11882,7 +12024,7 @@ detect-indent@^6.0.0:
   resolved "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
   integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
 
-detect-libc@^1.0.2:
+detect-libc@^1.0.2, detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@@ -13125,6 +13267,11 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expand-template@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
+  integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
+
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
@@ -14207,6 +14354,11 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
+github-from-package@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+  integrity sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=
+
 github-slugger@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz#9bd0a95c5efdfc46005e82a906ef8e2a059124c9"
@@ -16286,9 +16438,9 @@ jake@^10.6.1:
     minimatch "^3.0.4"
 
 jenkins@^0.28.0:
-  version "0.28.0"
-  resolved "https://registry.npmjs.org/jenkins/-/jenkins-0.28.0.tgz#72d6fcc452145403b34f6d4ecbd877ee1ab77fca"
-  integrity sha512-EGzzZcyFwXBCPZZoDNvZTPmZOqaHALfAStNfCF37oh+Mc6G/e0MwIuQjx5kMEynTXR9bF5EwLiuMTiTf5kHk5g==
+  version "0.28.1"
+  resolved "https://registry.npmjs.org/jenkins/-/jenkins-0.28.1.tgz#f7951798ee5d2bb501a831979b6b5ecc1a922a64"
+  integrity sha512-gcC4QUrP4VzdqOMHoVzh36XlJprxJkI2HGLQSY7w84KoCTVNDcR/8O00tYyXp9vrZOx4wl5zCXLVKMgH2IoyJQ==
   dependencies:
     papi "^0.29.0"
 
@@ -17253,6 +17405,14 @@ kafkajs@^1.16.0-beta.6:
   resolved "https://registry.npmjs.org/kafkajs/-/kafkajs-1.16.0-beta.6.tgz#650f4d16abd60516aa0c375be613368391216df1"
   integrity sha512-R4DT3s7oCAoxdq3tN8w2WkUxLXcZgLQSjQVSmEZpEmT6hVdZ5AUZWqyLYr1IRbQowsJK4Z7eWJAk68J0JiRlUw==
 
+keytar@^5.4.0:
+  version "5.6.0"
+  resolved "https://registry.npmjs.org/keytar/-/keytar-5.6.0.tgz#7b5d4bd043d17211163640be6c4a27a49b12bb39"
+  integrity sha512-ueulhshHSGoryfRXaIvTj0BV1yB0KddBGhGoqCxSN9LR1Ks1GKuuCdVhF+2/YOs5fMl6MlTI9On1a4DHDXoTow==
+  dependencies:
+    nan "2.14.1"
+    prebuild-install "5.3.3"
+
 keyv@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
@@ -18822,6 +18982,13 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+msal@^1.0.2:
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/msal/-/msal-1.4.4.tgz#3f9b5a4442aa711c12ab8e88b8ed89b293f99711"
+  integrity sha512-aOBD/L6jAsizDFzKxxvXxH0FEDjp6Inr3Ufi/Y2o7KCFKN+akoE2sLeszEb/0Y3VxHxK0F0ea7xQ/HHTomKivw==
+  dependencies:
+    tslib "^1.9.3"
+
 msw@^0.20.5:
   version "0.20.5"
   resolved "https://registry.npmjs.org/msw/-/msw-0.20.5.tgz#b6141080c0d8b17c451d9ca36c28cc47b4ac487a"
@@ -18926,7 +19093,7 @@ mz@^2.5.0, mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.12.1, nan@^2.14.0:
+nan@2.14.1, nan@^2.12.1, nan@^2.14.0:
   version "2.14.1"
   resolved "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
@@ -18967,6 +19134,11 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+napi-build-utils@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
+  integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
+
 native-url@^0.2.6:
   version "0.2.6"
   resolved "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz#ca1258f5ace169c716ff44eccbddb674e10399ae"
@@ -19041,6 +19213,13 @@ nock@^13.0.5:
     lodash.set "^4.3.2"
     propagate "^2.0.0"
 
+node-abi@^2.7.0:
+  version "2.19.3"
+  resolved "https://registry.npmjs.org/node-abi/-/node-abi-2.19.3.tgz#252f5dcab12dad1b5503b2d27eddd4733930282d"
+  integrity sha512-9xZrlyfvKhWme2EXFKQhZRp1yNWT/uI1luYPr3sFl+H4keYY4xR+1jO7mvTTijIsHf1M+QDe9uWuKeEpLInIlg==
+  dependencies:
+    semver "^5.4.1"
+
 node-addon-api@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-2.0.0.tgz#f9afb8d777a91525244b01775ea0ddbe1125483b"
@@ -19235,6 +19414,11 @@ nodemon@^2.0.2:
     undefsafe "^2.0.3"
     update-notifier "^4.1.0"
 
+noop-logger@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz#94a2b1633c4f1317553007d8966fd0e841b6a4c2"
+  integrity sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=
+
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -19372,7 +19556,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.2, npmlog@^4.1.2:
+"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
   integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -19620,6 +19804,14 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+open@^7.0.0:
+  version "7.3.1"
+  resolved "https://registry.npmjs.org/open/-/open-7.3.1.tgz#111119cb919ca1acd988f49685c4fdd0f4755356"
+  integrity sha512-f2wt9DCBKKjlFbjzGb8MOAW8LH8F0mrs1zc7KTjAJ9PZNQbfenzWbNP1VZJvw6ICMG9r14Ah6yfwPn7T7i646A==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 open@^7.0.2, open@^7.0.3:
   version "7.2.1"
   resolved "https://registry.npmjs.org/open/-/open-7.2.1.tgz#07b0ade11a43f2a8ce718480bdf3d7563a095195"
@@ -21044,6 +21236,27 @@ postgres-interval@^1.1.0:
   dependencies:
     xtend "^4.0.0"
 
+prebuild-install@5.3.3:
+  version "5.3.3"
+  resolved "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.3.tgz#ef4052baac60d465f5ba6bf003c9c1de79b9da8e"
+  integrity sha512-GV+nsUXuPW2p8Zy7SarF/2W/oiK8bFQgJcncoJ0d7kRpekEA0ftChjfEaF9/Y+QJEc/wFR7RAEa8lYByuUIe2g==
+  dependencies:
+    detect-libc "^1.0.3"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.0"
+    mkdirp "^0.5.1"
+    napi-build-utils "^1.0.1"
+    node-abi "^2.7.0"
+    noop-logger "^0.1.1"
+    npmlog "^4.0.1"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^3.0.3"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+    which-pm-runs "^1.0.0"
+
 precond@0.2:
   version "0.2.3"
   resolved "https://registry.npmjs.org/precond/-/precond-0.2.3.tgz#aa9591bcaa24923f1e0f4849d240f47efc1075ac"
@@ -21311,7 +21524,7 @@ pseudomap@^1.0.2:
   resolved "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-psl@^1.1.28:
+psl@^1.1.28, psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
   integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
@@ -21404,6 +21617,11 @@ qs@^6.5.1, qs@^6.6.0, qs@^6.9.1, qs@^6.9.4:
   resolved "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
   integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
 
+qs@^6.7.0:
+  version "6.9.6"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz#26ed3c8243a431b2924aca84cc90471f35d5a0ee"
+  integrity sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ==
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -24558,6 +24776,16 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
+tar-fs@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
+  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
 tar-fs@~2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"
@@ -24993,6 +25221,15 @@ tough-cookie@^3.0.1:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+tough-cookie@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.1.2"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -25200,7 +25437,7 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel@0.0.6:
+tunnel@0.0.6, tunnel@^0.0.6:
   version "0.0.6"
   resolved "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
   integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
@@ -25513,7 +25750,7 @@ universal-user-agent@^6.0.0:
   resolved "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
   integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
 
-universalify@^0.1.0:
+universalify@^0.1.0, universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
@@ -26460,7 +26697,7 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xml2js@^0.4.23:
+xml2js@^0.4.19, xml2js@^0.4.23:
   version "0.4.23"
   resolved "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
   integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==