Bug Fix: Creating a category with a different slug and title will prevent the announcement from being created #351

.changeset/gentle-seas-battle.md

@@ -0,0 +1,6 @@
+---
+'@procore-oss/backstage-plugin-announcements-backend': minor
+'@procore-oss/backstage-plugin-announcements': minor
+---
+
+Bug Fix: Creating a category with a different slug and title will prevent the announcement from being created #351

plugins/announcements-backend/src/service/persistence/AnnouncementsDatabase.ts

@@ -5,6 +5,7 @@ import {
   AnnouncementsFilters,
   Announcement,
 } from '@procore-oss/backstage-plugin-announcements-common';
+import slugify from 'slugify';
 
 const announcementsTable = 'announcements';
 
@@ -47,7 +48,11 @@ const announcementUpsertToDB = (
 ): DbAnnouncement => {
   return {
     id: announcement.id,
-    category: announcement.category,
+    category: announcement.category
+      ? slugify(announcement.category, {
+          lower: true,
+        })
+      : announcement.category,
     title: announcement.title,
     excerpt: announcement.excerpt,
     body: announcement.body,

plugins/announcements/package.json

@@ -49,7 +49,8 @@
     "@uiw/react-md-editor": "^4.0.3",
     "add": "^2.0.6",
     "luxon": "^3.2.0",
-    "react-use": "^17.2.4"
+    "react-use": "^17.2.4",
+    "slugify": "1.6.6"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0",

plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx

@@ -31,6 +31,14 @@ type CategoryInputProps = {
 
 const filter = createFilterOptions<Category>();
 
+function prepareCategoryFromInput(inputCategory: Category | string): string {
+  return (
+    typeof inputCategory === 'string' ? inputCategory : inputCategory.title
+  )
+    .replace('Create ', '')
+    .replaceAll('"', '');
+}
+
 export default function CategoryInput({
   setForm,
   form,
@@ -48,12 +56,7 @@ export default function CategoryInput({
           return;
         }
 
-        const newCategory = (
-          typeof newValue === 'string' ? newValue : newValue.title
-        )
-          .replace('Create ', '')
-          .replaceAll('"', '');
-
+        const newCategory = prepareCategoryFromInput(newValue);
         setForm({ ...form, category: newCategory });
       }}
       filterOptions={(options, params) => {
@@ -83,11 +86,7 @@ export default function CategoryInput({
       options={categories || []}
       getOptionLabel={option => {
         // Value selected with enter, right from the input
-        if (typeof option === 'string') {
-          return option;
-        }
-
-        return option.slug;
+        return prepareCategoryFromInput(option);
       }}
       renderOption={(props, option) => <li {...props}>{option.title}</li>}
       freeSolo

plugins/announcements/src/components/CreateAnnouncementPage/CreateAnnouncementPage.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
+import slugify from 'slugify';
 import { Page, Header, Content } from '@backstage/core-components';
 import { alertApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { rootRouteRef } from '../../routes';
@@ -34,13 +35,18 @@ export const CreateAnnouncementPage = (props: CreateAnnouncementPageProps) => {
     let alertMsg = 'Announcement created.';
 
     try {
-      if (category && slugs.indexOf(category) === -1) {
-        alertMsg = alertMsg.replace('.', '');
-        alertMsg = `${alertMsg} with new category ${category}.`;
-
-        await announcementsApi.createCategory({
-          title: category,
+      if (category) {
+        const categorySlug = slugify(category, {
+          lower: true,
         });
+        if (slugs.indexOf(categorySlug) === -1) {
+          alertMsg = alertMsg.replace('.', '');
+          alertMsg = `${alertMsg} with new category ${category}.`;
+
+          await announcementsApi.createCategory({
+            title: category,
+          });
+        }
       }
 
       await announcementsApi.createAnnouncement({

yarn.lock

@@ -5881,6 +5881,7 @@ __metadata:
     luxon: ^3.2.0
     msw: ^1.3.2
     react-use: ^17.2.4
+    slugify: 1.6.6
   peerDependencies:
     react: ^16.13.1 || ^17.0.0 || ^18.0.0
     react-router-dom: 6.0.0-beta.0 || ^6.3.0
@@ -23207,7 +23208,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slugify@npm:^1.6.6":
+"slugify@npm:1.6.6, slugify@npm:^1.6.6":
   version: 1.6.6
   resolution: "slugify@npm:1.6.6"
   checksum: 04773c2d3b7aea8d2a61fa47cc7e5d29ce04e1a96cbaec409da57139df906acb3a449fac30b167d203212c806e73690abd4ff94fbad0a9a7b7ea109a2a638ae9