Disappeared CreateButton after catalog customization - `useRouteRef(createComponentRouteRef)` returns `undefined` after checking in `DefaultCatalogPage.tsx` code into app instance

[piatkiewicz]

📜 Description

I'm trying to customize catalog look. Inspired by documentation I copied the code from backstage/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx and checked that into my app, but after that CreateButton disappears.

Logic in DefaultCatalogPage looks like this:

<CreateButton
  title={t('indexPage.createButtonTitle')}
  to={createComponentLink && createComponentLink()}
/>

and inside CreateButton if createComponentLink is falsy then it's not getting generated.

createComponentLink is defined few lines before, like that:

const createComponentLink = useRouteRef(createComponentRouteRef);

For some reason when you import CatalogIndexPage from @backstage/plugin-catalog it shows the button, but not when imported from local.

Exact reproduction steps are:

1. Create new app
2. Copy src/components/CatalogPage/DefaultCatalogPage.tsx, src/translation.ts, src/routes.ts from plugins/catalog into your codespace
3. Update imports in DefaultCatalogPage.tsx - point local translation.ts and routes.ts files, the rest could be imported from @backstage/plugin-catalog package.
4. Update App.tsx to use custom <DefaultCatalogPage /> on the /catalog route

   <Route path="/catalog" element={<CatalogIndexPage />}>
   <DefaultCatalogPage />
   </Route>

I know I can hardcode const createComponentLink = () => '/create' as a workaround and then CreateButton appears, but would like to understand why not initially.

👍 Expected behavior

CreateButton should stil be shown

👎 Actual Behavior with Screenshots

described above

👟 Reproduction steps

described above

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

backstage 1.29.2

👀 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?

No, but I'm happy to collaborate on a PR with someone else

[github-actions[bot]]

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.

[freben]

You probably didn't want to copy the routes and translations. My initial suspicion here is that by copying the routes you ended up with duplicate "twins" of the route refs. Your copy of the page didn't find a populated version of its shadow twin (which makes the button disappear), while the original route ref is the one that actually was populated.