backstage: πŸ› Bug Report: Entity page tab navigation duplicates url path parameters

πŸ“œ Description

Using Backstage 1.20.3, navigation across entity page tabs is not working as expected.

The URL is appending duplicate paths instead of replacing/updating the path. The user experience is that the first tab navigation works as expected, but subsequent tab changes do not result in the expected UI navigation changes.

πŸ‘ Expected behavior

Navigate the user to the tab UI that they have selected and present relevant information

πŸ‘Ž Actual Behavior with Screenshots

Navigation across tabs fails and the URL is not updated as expected EntityTabNavigation

πŸ‘Ÿ Reproduction steps

Install a new 1.20.x Backstage

  1. BACKSTAGE_APP_NAME=backstage npx -y -q @backstage/create-app@0.5.7 --path ./backstage_1.20

Change to the new directory and start the local instance

  1. cd backstage_1.20
  2. yarn dev

In the Backstage UI, reproduce the navigation behavior

  1. Select an entity that has multiple tabs on the Entity Page (e.g. β€˜example-website’)
  2. Select one of the available tabs. Navigation works as expected; however, the URL includes a duplicated path entry
  3. Select another tab. Navigation to the selected tab does not occur. The URL is appended with duplicated identifiers for the selected tab.

πŸ“ƒ Provide the context for the Bug.

This behavior is preventing users from easily browsing the available entity information. They have to navigation to another page and then back into an Entity Page to access the data that they need.

πŸ–₯️ Your Environment

yarn run v1.22.21
$ $HOME/tmp/backstage_1.20/node_modules/.bin/backstage-cli info
OS:   Darwin 23.1.0 - darwin/arm64
node: v18.18.2
yarn: 1.22.21
cli:  0.24.0 (installed)
backstage:  1.20.0

Dependencies:
  @backstage/app-defaults                                          1.4.5
  @backstage/backend-app-api                                       0.5.8
  @backstage/backend-common                                        0.19.9
  @backstage/backend-dev-utils                                     0.1.2
  @backstage/backend-openapi-utils                                 0.1.0
  @backstage/backend-plugin-api                                    0.6.7
  @backstage/backend-tasks                                         0.5.12
  @backstage/catalog-client                                        1.4.6
  @backstage/catalog-model                                         1.4.3
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.0
  @backstage/cli                                                   0.24.0
  @backstage/config-loader                                         1.5.3
  @backstage/config                                                1.1.1
  @backstage/core-app-api                                          1.11.1
  @backstage/core-components                                       0.13.8
  @backstage/core-plugin-api                                       1.8.0
  @backstage/e2e-test-utils                                        0.1.0
  @backstage/errors                                                1.2.3
  @backstage/eslint-plugin                                         0.1.3
  @backstage/frontend-plugin-api                                   0.3.0
  @backstage/integration-aws-node                                  0.1.8
  @backstage/integration-react                                     1.1.21
  @backstage/integration                                           1.7.2
  @backstage/plugin-api-docs                                       0.10.1
  @backstage/plugin-app-backend                                    0.3.55
  @backstage/plugin-app-node                                       0.1.7
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.1
  @backstage/plugin-auth-backend-module-github-provider            0.1.4
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.4
  @backstage/plugin-auth-backend-module-google-provider            0.1.4
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.4
  @backstage/plugin-auth-backend                                   0.20.0
  @backstage/plugin-auth-node                                      0.4.1
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.4
  @backstage/plugin-catalog-backend                                1.15.0
  @backstage/plugin-catalog-common                                 1.0.18
  @backstage/plugin-catalog-graph                                  0.3.1
  @backstage/plugin-catalog-import                                 0.10.3
  @backstage/plugin-catalog-node                                   1.5.0
  @backstage/plugin-catalog-react                                  1.9.1
  @backstage/plugin-catalog                                        1.15.1
  @backstage/plugin-events-node                                    0.2.16
  @backstage/plugin-github-actions                                 0.6.8
  @backstage/plugin-org                                            0.6.17
  @backstage/plugin-permission-common                              0.7.10
  @backstage/plugin-permission-node                                0.7.18
  @backstage/plugin-permission-react                               0.4.17
  @backstage/plugin-proxy-backend                                  0.4.5
  @backstage/plugin-scaffolder-backend                             1.19.1
  @backstage/plugin-scaffolder-common                              1.4.3
  @backstage/plugin-scaffolder-node                                0.2.8
  @backstage/plugin-scaffolder-react                               1.6.1
  @backstage/plugin-scaffolder                                     1.16.1
  @backstage/plugin-search-backend-module-catalog                  0.1.11
  @backstage/plugin-search-backend-module-pg                       0.5.16
  @backstage/plugin-search-backend-module-techdocs                 0.1.11
  @backstage/plugin-search-backend-node                            1.2.11
  @backstage/plugin-search-backend                                 1.4.7
  @backstage/plugin-search-common                                  1.2.8
  @backstage/plugin-search-react                                   1.7.3
  @backstage/plugin-search                                         1.4.3
  @backstage/plugin-tech-radar                                     0.6.10
  @backstage/plugin-techdocs-backend                               1.9.0
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.2
  @backstage/plugin-techdocs-node                                  1.10.0
  @backstage/plugin-techdocs-react                                 1.1.13
  @backstage/plugin-techdocs                                       1.9.1
  @backstage/plugin-user-settings                                  0.7.13
  @backstage/release-manifests                                     0.0.11
  @backstage/test-utils                                            1.4.5
  @backstage/theme                                                 0.4.4
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.7
Done in 0.62s.

πŸ‘€ 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 7 months ago
  • Reactions: 2
  • Comments: 16 (3 by maintainers)

Most upvoted comments

As a temporary fix adding this to the root package.json resolutions fixed the issue for me:

"resolutions": {
    "react-router": "6.19.0",
    "react-router-dom": "6.19.0"
  },

Seems like this has been fixed in the v6.20.1 release of react-router! πŸŽ‰ https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v6201.