backstage: ๐Ÿ› Bug Report: Installing the ADR Plugin

๐Ÿ“œ Description

There are a few things happening with this (these?) bug(s). I followed all the instructions here to install the backend plugin, and then the instructions here to install the front end application, and although I didnโ€™t see it mentioned I also installed the adr-common plugin due to dependencies.

First thing we noticed is that the annotation with a relative path doesnโ€™t seem to work. When reviewing the logs we noticed that an annotation of backstage.io/adr-location: docs/adrs and an annotation of backstage.io/source-location: url:https://github.com/{ORG}/{REPO} was producing an api call that omitted the {REPO} and did not point to the tree url. An example of the call would be GET /api/adr/list?url=https%3A%2F%2Fgithub.com%2F{ORG}%2Fdocs%2Fadrs or effectively a url of https://github.com/{ORG}/docs/adrs. We fixed this error by supplying a full url of backstage.io/adr-location: https://github.com/{ORG}/{REPO}/tree/main/docs/adrs, however, based on the docs it seems like the original version should be possible.

Next, when going to the ADR tab of an entity weโ€™re getting the following error Routable extension component with mount point routeRef{type=absolute,id=adr} was not discovered in the app element tree. Routable extension components may not be rendered by other components and must be directly available as an element within the App provider component.. No where in the docs does it say to add anything to the App router, but we gave it a try to see what happens. Initially, pulling up the tab did list out the ADRs, however when you click on any of the adrs it crashes with an Entity context not available error. Unfortunately, thereโ€™s no element that can be passed to the root level routes, when adding <Route path="/adrs" element={<EntityAdrContent />} /> to the App.tsx file it fails because itโ€™s expecting entity context.

Finally, this plugin doesnโ€™t appear to support this tutorial for authenticating api requests in the backend. When we add the authMiddleware to the handler we get consistent unauthorized requests back. I really donโ€™t know if this is a major issue or not, we left it off for testing, but does seem like a thing to bring up.

Iโ€™m probably doing something wrong here, but my code matches the tutorial.

๐Ÿ‘ Expected behavior

Plugin README installation tutorial should work as expected.

๐Ÿ‘Ž Actual Behavior with Screenshots

Errors with displaying the plugin:

image

๐Ÿ‘Ÿ Reproduction steps

Follow the README installation instructions for the adr and adr-backend plugins

๐Ÿ“ƒ Provide the context for the Bug.

We want to start displaying ADRs, but we canโ€™t at the moment.

๐Ÿ–ฅ๏ธ Your Environment

OS:   Linux 5.19.0-38-generic - linux/x64
node: v18.12.1
yarn: 1.22.19
cli:  0.22.2 (installed)
backstage:  1.11.0

Dependencies:
  @backstage/app-defaults                               1.2.0
  @backstage/backend-app-api                            0.4.0, 0.4.1
  @backstage/backend-common                             0.18.2, 0.18.3
  @backstage/backend-dev-utils                          0.1.0, 0.1.1
  @backstage/backend-plugin-api                         0.4.0, 0.5.0
  @backstage/backend-tasks                              0.4.3, 0.5.0
  @backstage/catalog-client                             0.9.0, 1.3.1, 1.4.0
  @backstage/catalog-model                              0.13.0, 1.2.0, 1.2.1
  @backstage/cli-common                                 0.1.11, 0.1.12
  @backstage/cli                                        0.22.2, 0.22.3
  @backstage/config-loader                              1.1.8, 1.1.9
  @backstage/config                                     0.1.15, 1.0.6, 1.0.7
  @backstage/core-api                                   0.2.23
  @backstage/core-app-api                               1.5.0
  @backstage/core-components                            0.11.2, 0.12.4, 0.12.5, 0.9.5
  @backstage/core-plugin-api                            0.1.13, 0.8.0, 1.4.0, 1.5.0
  @backstage/core                                       0.7.14
  @backstage/dev-utils                                  1.0.12
  @backstage/errors                                     0.1.5, 0.2.2, 1.1.4, 1.1.5
  @backstage/eslint-plugin                              0.1.0, 0.1.1
  @backstage/integration-aws-node                       0.1.1, 0.1.2
  @backstage/integration-react                          0.1.25, 1.1.10, 1.1.11
  @backstage/integration                                0.8.0, 1.4.2, 1.4.3
  @backstage/plugin-adr-backend                         0.3.1
  @backstage/plugin-adr-common                          0.2.7
  @backstage/plugin-adr                                 0.4.1
  @backstage/plugin-analytics-module-ga                 0.1.26
  @backstage/plugin-api-docs                            0.9.0
  @backstage/plugin-app-backend                         0.3.42
  @backstage/plugin-auth-backend                        0.18.0
  @backstage/plugin-auth-node                           0.2.11, 0.2.12
  @backstage/plugin-catalog-backend-module-github       0.2.5
  @backstage/plugin-catalog-backend-module-openapi      0.1.8
  @backstage/plugin-catalog-backend                     1.7.2
  @backstage/plugin-catalog-common                      1.0.11, 1.0.12
  @backstage/plugin-catalog-graph                       0.2.27
  @backstage/plugin-catalog-import                      0.9.5
  @backstage/plugin-catalog-node                        1.3.3
  @backstage/plugin-catalog-react                       0.9.0, 1.3.0, 1.4.0
  @backstage/plugin-catalog                             1.8.0
  @backstage/plugin-entity-feedback-backend             0.1.0
  @backstage/plugin-entity-feedback-common              0.1.0
  @backstage/plugin-entity-feedback                     0.1.0
  @backstage/plugin-entity-validation                   0.1.0
  @backstage/plugin-events-node                         0.2.3
  @backstage/plugin-github-actions                      0.5.15
  @backstage/plugin-github-issues                       0.2.4
  @backstage/plugin-home                                0.4.31
  @backstage/plugin-org                                 0.6.5
  @backstage/plugin-permission-common                   0.5.3, 0.6.4, 0.7.3, 0.7.4
  @backstage/plugin-permission-node                     0.7.5, 0.7.6
  @backstage/plugin-permission-react                    0.3.4, 0.4.10, 0.4.11
  @backstage/plugin-proxy-backend                       0.2.36
  @backstage/plugin-scaffolder-backend                  1.11.0
  @backstage/plugin-scaffolder-common                   1.2.5
  @backstage/plugin-scaffolder-node                     0.1.0
  @backstage/plugin-scaffolder-react                    1.1.0
  @backstage/plugin-scaffolder                          1.11.0
  @backstage/plugin-search-backend-module-elasticsearch 1.1.3
  @backstage/plugin-search-backend-module-pg            0.5.3
  @backstage/plugin-search-backend-node                 1.1.3
  @backstage/plugin-search-backend                      1.2.3
  @backstage/plugin-search-common                       0.3.4, 1.2.1, 1.2.2
  @backstage/plugin-search-react                        1.5.0, 1.5.1
  @backstage/plugin-search                              1.1.0
  @backstage/plugin-shortcuts                           0.3.7
  @backstage/plugin-stack-overflow                      0.1.11
  @backstage/plugin-tech-radar                          0.6.1
  @backstage/plugin-techdocs-addons-test-utils          1.0.10
  @backstage/plugin-techdocs-backend                    1.5.3
  @backstage/plugin-techdocs-module-addons-contrib      1.0.10
  @backstage/plugin-techdocs-node                       1.5.0
  @backstage/plugin-techdocs-react                      1.1.3
  @backstage/plugin-techdocs                            1.5.0
  @backstage/plugin-user-settings                       0.7.0
  @backstage/release-manifests                          0.0.8
  @backstage/search-common                              0.3.4
  @backstage/test-utils                                 1.2.5
  @backstage/theme                                      0.2.17, 0.2.18
  @backstage/types                                      0.1.3, 1.0.2
  @backstage/version-bridge                             0.1.2, 1.0.3
Done in 0.74s.

๐Ÿ‘€ Have you spent some time to check if this bug has been raised before?

  • I checked and didnโ€™t find similar issue

๐Ÿข Have you read the Code of Conduct?

Are you willing to submit PR?

No, I donโ€™t have time to work on this right now

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 21 (10 by maintainers)

Most upvoted comments

You have to replace those with @types/react and @types/react-dom. See example here https://github.com/drodil/backstage-plugin-qeta/commit/d972168210a40b85f54b9748ac86c71e580c54d2

It seems that the AdrClient correctly uses the fetchApi. That should be enough to ensure that it injects a Backstage auth token with every request to the backend.

This was actually just released in the latest version that came out today. @voodooGQ can you try updating to the latest and re-testing?

Regarding Routable extension component ...:

const ComponentEntityPage: React.FC

is the source of that. You need to make it

const componentEntityPage = (
  <EntitySwitch>
    ...

(note the lowercase c)

essentially the entire tree there needs to be static JSX elements, no components (functions or classes) at all.