backstage
🐛 Bug Report: Can't hide register existing component button in Scaffolder page
📜 Description
I'm a bit confused, I want to disable the register existing component button on the scaffolder page but somehow I can't, this is my bindRoutes config
bindRoutes({ bind }) {
bind(catalogPlugin.externalRoutes, {
createComponent: scaffolderPlugin.routes.root,
viewTechDoc: techdocsPlugin.routes.docRoot,
});
bind(orgPlugin.externalRoutes, {
catalogIndex: catalogPlugin.routes.catalogIndex,
});
},
Reading the doc I'm supposed to don't have that button but it's there.
I'd also like to disable the 3 dots in the header, is that possible?
We show the import page only in staging, we do it like this:
Root.tsx
{window.location.hostname !== 'production URL' && (
<SidebarItem
className="catalog-import-sidebar"
icon={UploadFileIcon as IconComponent}
to="/catalog-import"
text="Catalog Import"
/>
)}
👍 Expected behavior
the register existing component button on the scaffolder page should be hidden/disabled
👎 Actual Behavior with Screenshots
the register existing component button on the scaffolder page is visible
👟 Reproduction steps
Add this code to the App.tsx
bindRoutes({ bind }) {
bind(catalogPlugin.externalRoutes, {
createComponent: scaffolderPlugin.routes.root,
viewTechDoc: techdocsPlugin.routes.docRoot,
});
bind(orgPlugin.externalRoutes, {
catalogIndex: catalogPlugin.routes.catalogIndex,
});
},
📃 Provide the context for the Bug.
No response
🖥️ Your Environment
OS: Darwin 23.6.0 - darwin/arm64
node: v18.18.0
yarn: 1.22.22
cli: 0.26.11 (installed)
backstage: 1.29.1
Dependencies:
@backstage/app-defaults 1.5.8
@backstage/backend-app-api 0.8.0
@backstage/backend-common 0.23.3
@backstage/backend-defaults 0.4.1
@backstage/backend-dev-utils 0.1.4
@backstage/backend-openapi-utils 0.1.15
@backstage/backend-plugin-api 0.7.0
@backstage/backend-tasks 0.5.27
@backstage/backend-test-utils 0.4.4
@backstage/catalog-client 1.6.5
@backstage/catalog-model 1.5.0
@backstage/cli-common 0.1.14
@backstage/cli-node 0.2.7
@backstage/cli 0.26.11
@backstage/config-loader 1.8.1
@backstage/config 1.2.0
@backstage/core-app-api 1.14.0
@backstage/core-compat-api 0.2.7
@backstage/core-components 0.14.9
@backstage/core-plugin-api 1.9.3
@backstage/dev-utils 1.0.35
@backstage/errors 1.2.4
@backstage/eslint-plugin 0.1.8
@backstage/frontend-plugin-api 0.6.7
@backstage/integration-aws-node 0.1.12
@backstage/integration-react 1.1.29
@backstage/integration 1.13.0
@backstage/plugin-api-docs 0.11.7
@backstage/plugin-app-backend 0.3.71
@backstage/plugin-app-node 0.1.22
@backstage/plugin-auth-backend-module-atlassian-provider 0.2.3
@backstage/plugin-auth-backend-module-aws-alb-provider 0.1.14
@backstage/plugin-auth-backend-module-azure-easyauth-provider 0.1.5
@backstage/plugin-auth-backend-module-bitbucket-provider 0.1.5
@backstage/plugin-auth-backend-module-cloudflare-access-provider 0.1.5
@backstage/plugin-auth-backend-module-gcp-iap-provider 0.2.17
@backstage/plugin-auth-backend-module-github-provider 0.1.19
@backstage/plugin-auth-backend-module-gitlab-provider 0.1.19
@backstage/plugin-auth-backend-module-google-provider 0.1.19
@backstage/plugin-auth-backend-module-microsoft-provider 0.1.17
@backstage/plugin-auth-backend-module-oauth2-provider 0.2.3
@backstage/plugin-auth-backend-module-oauth2-proxy-provider 0.1.15
@backstage/plugin-auth-backend-module-oidc-provider 0.2.3
@backstage/plugin-auth-backend-module-okta-provider 0.0.15
@backstage/plugin-auth-backend-module-onelogin-provider 0.1.3
@backstage/plugin-auth-backend 0.22.9
@backstage/plugin-auth-node 0.4.17
@backstage/plugin-auth-react 0.1.4
@backstage/plugin-bitbucket-cloud-common 0.2.21
@backstage/plugin-catalog-backend-module-aws 0.3.17
@backstage/plugin-catalog-backend-module-github 0.6.5
@backstage/plugin-catalog-backend-module-logs 0.0.1
@backstage/plugin-catalog-backend-module-openapi 0.1.40
@backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.20
@backstage/plugin-catalog-backend 1.24.0
@backstage/plugin-catalog-common 1.0.25
@backstage/plugin-catalog-graph 0.4.7
@backstage/plugin-catalog-import 0.12.1
@backstage/plugin-catalog-node 1.12.4
@backstage/plugin-catalog-react 1.11.3, 1.12.2
@backstage/plugin-catalog 1.21.1
@backstage/plugin-events-node 0.3.8
@backstage/plugin-home-react 0.1.15
@backstage/plugin-home 0.7.7
@backstage/plugin-kubernetes-backend 0.18.3
@backstage/plugin-kubernetes-common 0.7.5, 0.8.1
@backstage/plugin-kubernetes-node 0.1.16
@backstage/plugin-org 0.6.27
@backstage/plugin-permission-backend-module-allow-all-policy 0.1.19
@backstage/plugin-permission-backend 0.5.46
@backstage/plugin-permission-common 0.7.14, 0.8.0
@backstage/plugin-permission-node 0.8.0
@backstage/plugin-permission-react 0.4.24
@backstage/plugin-proxy-backend 0.5.3
@backstage/plugin-scaffolder-backend-module-azure 0.1.14
@backstage/plugin-scaffolder-backend-module-bitbucket-cloud 0.1.12
@backstage/plugin-scaffolder-backend-module-bitbucket-server 0.1.12
@backstage/plugin-scaffolder-backend-module-bitbucket 0.2.12
@backstage/plugin-scaffolder-backend-module-gerrit 0.1.14
@backstage/plugin-scaffolder-backend-module-gitea 0.1.12
@backstage/plugin-scaffolder-backend-module-github 0.4.0
@backstage/plugin-scaffolder-backend-module-gitlab 0.4.4
@backstage/plugin-scaffolder-backend 1.23.0
@backstage/plugin-scaffolder-common 1.5.4
@backstage/plugin-scaffolder-node 0.4.8
@backstage/plugin-scaffolder-react 1.10.0
@backstage/plugin-scaffolder 1.23.0
@backstage/plugin-search-backend-module-catalog 0.1.28
@backstage/plugin-search-backend-module-explore 0.1.28
@backstage/plugin-search-backend-module-pg 0.5.32
@backstage/plugin-search-backend-module-techdocs 0.1.27
@backstage/plugin-search-backend-node 1.2.27
@backstage/plugin-search-backend 1.5.14
@backstage/plugin-search-common 1.2.13
@backstage/plugin-search-react 1.7.13
@backstage/plugin-search 1.4.14
@backstage/plugin-signals-react 0.0.4
@backstage/plugin-techdocs-backend 1.10.9
@backstage/plugin-techdocs-module-addons-contrib 1.1.12
@backstage/plugin-techdocs-node 1.12.8
@backstage/plugin-techdocs-react 1.2.6
@backstage/plugin-techdocs 1.10.7
@backstage/plugin-user-settings-common 0.0.1
@backstage/plugin-user-settings 0.8.9
@backstage/release-manifests 0.0.11
@backstage/test-utils 1.5.8
@backstage/theme 0.5.6
@backstage/types 1.1.1
@backstage/version-bridge 1.0.8
👀 Have you spent some time to check if this bug has been raised before?
- [X] I checked and didn't find similar issue
🏢 Have you read the Code of Conduct?
- [X] I have read the Code of Conduct
Are you willing to submit PR?
None
Hello @LegendSebastianoL ,
The way to acheive this is to leverage permission plugin.
the example in the document does exactly what you're looking for https://backstage.io/docs/permissions/frontend-integration
hey @fjudith I'm a bit confused, what do permissions have to do with the scaffolder page?
YES, we are hiding the catalog-import page if is not production but independently, I want to remove the register existing component button on the scaffolder page in all environments, I don't want to see it at all.
@LegendSebastianoL there's two ways to hide that button, you can either use the permissions framework to disable the button, and if the user doesn't have catalogEntityCreatePermission then it won't be shown as mentioned by @fjudith :
https://github.com/backstage/backstage/blob/43fd3eacba9928e4fb497cf073b60dd097ce1cbd/plugins/scaffolder/src/next/TemplateListPage/RegisterExistingButton.tsx#L42-L44
Or you can bind the externalRoute for registerComponent to undefined which should hide it.
Something like this in App.tsx similar to the demo site
bindRoutes({ bind }) {
bind(scaffolderPlugin.externalRoutes, {
registerComponent: undefined
});
},
As an aside, I think if you don't actually install the catalog-import plugin in production it would also hide that button as the default target is the catalog-import plugin. You're just hiding the item from the sidebar in production, but the plugin is still available if you know the URL right?
hey @benjdlambert thanks for your answer, we aren't using permissions in our Backstage ATM.
I tried your solution but it doesn't work, so besides the already existing check to hide the sidebar link, I added this code
const importRoute = (): React.ReactElement | null =>
window.location.hostname !== 'prod URL' ? (
<Route path="/catalog-import" element={<CatalogImportPage />} />
) : null;
const routes = (
<FlatRoutes>
<Route path="/search" element={<SearchPage />}>
{searchPage}
</Route>
...
{importRoute()}
...
this seems to do the trick :)
I guess that by having the Route inside the const routes it still doesn't hide it and you need to completely remove the component.
Hmm @LegendSebastianoL the setting of undefined should definitely work - I think it's a bug because I just tried it locally too, think that it's probably something to do with https://github.com/backstage/backstage/pull/24777 that's caused this to stop working.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@Rugvip it looks like we still might need to fix the undefined default routeRef bindings. Or can you remember if there was a PR to fix this?
Today I encoutered the same issue with @backstage/[email protected].
Also, the docs are misleading -> https://backstage.io/docs/features/software-templates/#disable-register-existing-component-button
It says we should set registerComponent to false, but when I do it I get:
TS2322: Type false is not assignable to type
RouteRef<AnyRouteRefParams> | SubRouteRef<AnyRouteRefParams> | undefined
From https://github.com/backstage/backstage/issues/27337#issuecomment-2465012618
After chats with @Rugvip and @freben we think that config should win over code, as right now that's not the case.
Happy for some contributions here to make this possible, or some doc updates where necessary 🙏
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Just moved this around a little bit as this is not just a scaffolder issue it's more of a core frontend system issue. But still 100% still relevant, and still an issue.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
hi @benjdlambert, do you know if there is any update on this? I would find it very useful if we could enable the register button only in dev environment.
Can you try this again on latest Backstage? We made some changes a while back that addressed this type of override. If it still persists, a reproduction repo would be very welcome so that we can see it precisely where/when it happens to debug more easily.
Can you try this again on latest Backstage? We made some changes a while back that addressed this type of override. If it still persists, a reproduction repo would be very welcome so that we can see it precisely where/when it happens to debug more easily.
this setting still does not hide the button like it says in the docs https://github.com/backstage/backstage/issues/26446#issuecomment-2827284591
This bug report has been automatically marked as stale because it has not had recent activity and does not have valid steps to reproduce. It will be closed if no further activity occurs. If the PR was closed and you want it re-opened, let us know and we'll re-open the PR so that you can continue the contribution!
Hi, I was looking into this today and wanted to share my findings. If I removed this if statement:
https://github.com/backstage/backstage/blob/6ef06cc84e555de13910814a0dc6798d2805716e/packages/core-app-api/src/app/resolveRouteBindings.ts#L126
Then I see it get added to disabledExternalRefs but then it seems to fail this has check here:
https://github.com/backstage/backstage/blob/6ef06cc84e555de13910814a0dc6798d2805716e/packages/core-app-api/src/app/resolveRouteBindings.ts#L147
I did a short dive into how has works with Sets but came out more confused then when I started. I "feel" like maybe this check isn't doing what we think it is but I can't explain why.
Some updated steps to reproduce:
- Create a new Backstage instance:
npx @backstage/create-app@latest - Add this to the
app-config.yamlunder theappsection:
routes:
bindings:
scaffolder.registerComponent: false
- Run
yarn start - Click on "Create" in the sidebar
Notice that there is still a "Register Existing Component" button.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.