🚀 Feature: Take signals into use

[drodil]

🔖 Feature description

The signals plugin is coming in the Backstage 1.23.0 release. This allows to send push messages from backend to frontend plugins. Announcements plugin could also utilize this to show new announcements without need for polling or user to refresh the page.

🎤 Context

See backend integration: https://github.com/backstage/backstage/blob/master/plugins/signals-node/README.md And frontend: https://github.com/backstage/backstage/blob/master/plugins/signals-react/README.md

✌️ Possible Implementation

1. Create signal announcements and publish to that whenever there is new announcement created
2. In the frontend use useSignal('announcements') to get info about the changes
3. When the signal is received, re-fetch and re-render the announcements

👀 Have you spent some time to check if this feature request has been raised before?

• [X] I checked and didn't find similar issue

Are you willing to submit PR?

None

[gaelgoth]

@drodil I just read your medium post about Backstage notification, I think that announcements plugin is good candidate for using NotificationService

[kurtaking]

@gaelgoth, there is a bit more context around the use of signals in this discord thread.

I've also been thinking about ways the notifications plugins may make the announcements plugins obsolete. We could contribute a few components that render the output of the broadcast feature to announcement-styled components.

So users would receive a notification, but you could also broadcast as an announcement. Something along those lines.

[jjwedemyer]

I've also been thinking about ways the notifications plugins may make the announcements plugins obsolete. We could contribute a few components that render the output of the broadcast feature to announcement-styled components.

So users would receive a notification, but you could also broadcast as an announcement. Something along those lines.

Hi @kurtaking,

did you come to any conclusion regarding this integration? We would like to integrate announcements into our dev portal (with a possibility to notify with external tools like mattermost). In that matter we could contribute here to either an integration or the "announcement" components.

[kurtaking]

I've also been thinking about ways the notifications plugins may make the announcements plugins obsolete. We could contribute a few components that render the output of the broadcast feature to announcement-styled components. So users would receive a notification, but you could also broadcast as an announcement. Something along those lines.

Hi @kurtaking,

did you come to any conclusion regarding this integration? We would like to integrate announcements into our dev portal (with a possibility to notify with external tools like mattermost). In that matter we could contribute here to either an integration or the "announcement" components.

I haven't had the time lately to think through this. Others have asked for similar functionality to what you want, so the change is definitely welcome.

[kunickiaj]

Wanted to chime in here before I look into contributing. We're using the Announcements plugin and the Notifications plugin. Would love to see posting an Announcement also send a broadcast notification or some sort of integration. I don't think Notifications supersedes Announcements as a UI for creating one and browsing past announcements is necessary. But it would be helpful to have a richer way of notifying users.

[drodil]

IMO, this plugin might not need to integrate to notifications but instead only signals. This allows users to see new announcements without refreshing the page or navigating to the announcements page. Of course this does not mean it could not integrate to notifications as well but it should be done in a different PR and also make it configurable.

I've done both signals and notifications integration to my Q&A plugin that makes the UI update every time someone posts question/answer or votes and also sends a notification. For reference you might check it out here: https://github.com/drodil/backstage-plugin-qeta

[kurtaking]

hey @drodil, spent some time on this, but I am missing something you are doing in qeta. I cannot get a response on the frontend. I pushed up some sandbox code, but the gist is below.

// backend - router.ts

router.post(
    '/announcements',
    async (req: Request<{}, {}, AnnouncementRequest, {}>, res) => {
      if (!(await isRequestAuthorized(req, announcementCreatePermission))) {
        throw new NotAllowedError('Unauthorized');
      }

      const { publisher, category, title, excerpt, body } = req.body;

      const announcement =
        await persistenceContext.announcementsStore.insertAnnouncement({
          id: uuid(),
          publisher,
          category,
          title,
          excerpt,
          body,
          created_at: DateTime.now(),
        });

      await signalAnnouncement(announcement, signals);

      return res.status(201).json(announcement);
    },
  );

export const signalAnnouncement = async (
  announcement: AnnouncementModel,
  signalService: SignalsService,
) => {
  if (!announcement) {
    return;
  }

  await signalService.publish<AnnouncementSignal>({
    recipients: { type: 'broadcast' },
    channel: 'announcement:new',
    message: {
      data: {
        ...announcement,
        created_at: announcement.created_at.toString(),
      },
    },
  });
  console.log('Broadcasted announcement');
};

// frontend - banner component

export const SignalAnnouncementBanner = (props: NewAnnouncementBannerProps) => {
  const [announcement, setAnnouncement] = useState<
    AnnouncementSignal['data'] | undefined
  >();
  
  // I've tried a few different channel strings
  const { lastSignal } = useSignal<AnnouncementSignal>('announcements:announcements:new');

  useEffect(() => {
    if (!lastSignal) {
      console.log('is null', lastSignal);
      return;
    }

    setAnnouncement(lastSignal?.data);
  }, [lastSignal]);

  if (!announcement) {
    return null;
  }

  return (
    <AnnouncementBanner
      key={announcement.id}
      announcement={announcement}
      variant={props.variant}
    />
  );
};

Does the signals plugin require the events plugin?

[drodil]

Hi, yes it does and have you also installed the plugin on the frontend?

[kurtaking]

Hi, yes it does and have you also installed the plugin on the frontend?

Pretty sure I have the correct signals plugins installed, but I do not support events right now. Will need to do that first. I might be able to get to that tonight, but will be gone all day spending time with the family.

[kurtaking]

@drodil, do you have time to take a look at https://github.com/procore-oss/backstage-plugin-announcements/pull/436? The banner is still not appearing after creating a new announcement. lastSignal remains undefined regardless of what I try.

---

Implemented events system in https://github.com/procore-oss/backstage-plugin-announcements/pull/437.

[drodil]

https://github.com/procore-oss/backstage-plugin-announcements/blob/main/plugins%2Fannouncements%2Fdev%2Findex.tsx should include and initialize the signals-plugin and dependency should be changed to be devDependency.

[drodil]

Example here: https://github.com/drodil/backstage-plugin-qeta/blob/main/plugins%2Fqeta%2Fdev%2Findex.tsx#L42

[drodil]

Is there a release coming with this support?

[kurtaking]

Is there a release coming with this support?

I'm under the impression it's live. I had issues with the release job recently. I thought it's fixed but I'll double check when I get to a computer.

[drodil]

Thanks! Was just wondering as Github doesn't have any releases 🙂

[kurtaking]

Thanks! Was just wondering as Github doesn't have any releases 🙂

Sad day. That needs to be fixed. 😢

[kurtaking]

💭 ugh, another possible benefit of migrating to @backstage/community-plugins would be to leverage their release process.