From d1f456bb6e78343290738a48830fa67168b2fe39 Mon Sep 17 00:00:00 2001 From: Lavanya Sainik <137502642+lavanya-sainik-ericsson@users.noreply.github.com> Date: Tue, 9 Jul 2024 15:23:55 +0100 Subject: [PATCH] Bug Fix: Creating a category with a different slug and title will prevent the announcement from being created #351 (#360) * Update internal dependencies (#370) * Bug Fix: Creating a category with a different slug and title will prevent the announcement from being created #351 Signed-off-by: elavsai lavanya.sainik@ericsson.com * Bug Fix: Creating a category with a different slug and title will prevent the announcement from being created Signed-off-by: elavsai lavanya.sainik@ericsson.com * fix: yarn lockfile Signed-off-by: Kurt King --------- Signed-off-by: elavsai lavanya.sainik@ericsson.com Signed-off-by: Kurt King Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kurt King --- .changeset/gentle-seas-battle.md | 6 ++++++ .../persistence/AnnouncementsDatabase.ts | 7 ++++++- plugins/announcements/package.json | 3 ++- .../AnnouncementForm/CategoryInput.tsx | 21 +++++++++---------- .../CreateAnnouncementPage.tsx | 18 ++++++++++------ yarn.lock | 3 ++- 6 files changed, 38 insertions(+), 20 deletions(-) create mode 100644 .changeset/gentle-seas-battle.md diff --git a/.changeset/gentle-seas-battle.md b/.changeset/gentle-seas-battle.md new file mode 100644 index 00000000..6afcce2d --- /dev/null +++ b/.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 diff --git a/plugins/announcements-backend/src/service/persistence/AnnouncementsDatabase.ts b/plugins/announcements-backend/src/service/persistence/AnnouncementsDatabase.ts index e6c1aab3..1a25ea77 100644 --- a/plugins/announcements-backend/src/service/persistence/AnnouncementsDatabase.ts +++ b/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, diff --git a/plugins/announcements/package.json b/plugins/announcements/package.json index 24e21ca5..2e3e8757 100644 --- a/plugins/announcements/package.json +++ b/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", diff --git a/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx b/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx index 8136fdcb..2fd59d52 100644 --- a/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx +++ b/plugins/announcements/src/components/AnnouncementForm/CategoryInput.tsx @@ -31,6 +31,14 @@ type CategoryInputProps = { const filter = createFilterOptions(); +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) =>
  • {option.title}
    • } freeSolo diff --git a/plugins/announcements/src/components/CreateAnnouncementPage/CreateAnnouncementPage.tsx b/plugins/announcements/src/components/CreateAnnouncementPage/CreateAnnouncementPage.tsx index 2163e607..56c5004f 100644 --- a/plugins/announcements/src/components/CreateAnnouncementPage/CreateAnnouncementPage.tsx +++ b/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({ diff --git a/yarn.lock b/yarn.lock index b7665b64..d5637af4 100644 --- a/yarn.lock +++ b/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