🚀 Feature: Export components that make up Notification page

[awanlin]

🔖 Feature description

We would like to be able to re-use the components that make up the Notification page - filters and table - as part of a custom plugin. Would a PR to add exports for these be accepted?

🎤 Context

We are building a custom plugin and would like to use the Notification components but currently it's all in the page which includes the header. This doesn't work well with what we are trying to build.

✌️ Possible Implementation

Export the Notification filter and table components

👀 Have you spent some time to check if this feature request 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

[Dharmil4602]

Hi @awanlin, I can take this issue. Please assign it to me

[awanlin]

Sure @Dharmil4602, but I'd like to make sure this is something that the Maintainers of the Notification project area are open to first.

[Dharmil4602]

Got it

[awanlin]

Hi @drodil, @mareklibra, what are your thoughts on this?

[drodil]

@awanlin makes sense. Though I would move those to react plugin (if they are not yet, can't remember the details) instead as frontend plugin depending on another frontend plugin is not the right way.

[awanlin]

Thanks @drodil!

@Dharmil4602, can you run with this based on the above guidance?

[Dharmil4602]

Sure, I'll give it a try

[awanlin]

Looks like we would need to create the -react package and move the components into that.

[drodil]

@Dharmil4602 just remember if there is need to move some already exported component from notifications to notifications-react, remeber to re-export those and mark as deprecated in the notifications to not break the API contract right away. I am not sure if there are any cases this would be necessary..

Additionally it seems the react plugin is non-existing so you need to create that. I would probably move also the API (ref and type def) to the react plugin so it could be used from other plugins but that can be done in another PR if needed.

[Dharmil4602]

Got it. I'll make sure of it. Thanks @drodil @awanlin

[drodil]

Noticed that also the settings card could be moved to react plugin. That's at least one component that is exported already from the notifications plugin itself and needs a deprecated re-export.

[Dharmil4602]

Got it

[Dharmil4602]

@drodil @awanlin I have a question. How to mark component as deprecated?

[drodil]

You want to re-export the deprecated components in the notifications plugin. So you should add the following to the notifications/src/deprecated.ts:

import { UserNotificationSettingsCard as UserNotificationSettingsCardTemp } from '@backstage/plugin-notifications-react';

/**
 * @public
 * @deprecated use import from {@link @backstage/plugin-notifications-react#UserNotificationSettingsCard} instead as this has now been moved.
 */
export const UserNotificationSettingsCard = UserNotificationSettingsCardTemp;

And then in the src/index.ts:

export * from './deprecated';

Were there public interfaces you had to move?

[Dharmil4602]

Not so far

[Dharmil4602]

@drodil I think there is routeRef used in Notifications. If I'll be creating new package, how should I handle the routeRef? What should be done?

[drodil]

@Dharmil4602 rhe routeRef should stay in the frontend package as well as the NotificationPage. But other components can be moved to the react plugin

[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.

[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.