From 5f50c92dc3f06b4099be7f5bc7aa48e1469f7a9c Mon Sep 17 00:00:00 2001 From: "antonio.bergas" Date: Mon, 20 Mar 2023 18:06:36 +0100 Subject: [PATCH] [Playlist]feat: rename new config prop to title and use pluralize to manage nouns Signed-off-by: antonio.bergas --- app-config.yaml | 3 ++ plugins/playlist/CHANGELOG.md | 4 --- plugins/playlist/README.md | 9 ++---- plugins/playlist/config.d.ts | 12 ++------ plugins/playlist/package.json | 28 ++++--------------- .../CreatePlaylistButton.tsx | 8 +++--- .../EntityPlaylistDialog.tsx | 22 +++++++-------- .../PlaylistEditDialog/PlaylistEditDialog.tsx | 8 +++--- .../PlaylistIndexPage/PlaylistIndexPage.tsx | 6 ++-- .../components/PlaylistList/PlaylistList.tsx | 6 ++-- .../PlaylistPage/PlaylistEntitiesTable.tsx | 8 +++--- .../PlaylistPage/PlaylistHeader.tsx | 6 ++-- plugins/playlist/src/hooks/index.ts | 2 +- .../src/hooks/{useConfig.ts => useTitle.ts} | 14 ++++++---- yarn.lock | 1 + 15 files changed, 56 insertions(+), 81 deletions(-) rename plugins/playlist/src/hooks/{useConfig.ts => useTitle.ts} (65%) diff --git a/app-config.yaml b/app-config.yaml index 385c9c2e0e..ba9df18085 100644 --- a/app-config.yaml +++ b/app-config.yaml @@ -126,6 +126,9 @@ proxy: organization: name: My Company +playlist: + title: Module + # Reference documentation http://backstage.io/docs/features/techdocs/configuration # Note: After experimenting with basic setup, use CI/CD to generate docs # and an external cloud storage when deploying TechDocs for production use-case. diff --git a/plugins/playlist/CHANGELOG.md b/plugins/playlist/CHANGELOG.md index 648ff6319d..43a7ff4e4d 100644 --- a/plugins/playlist/CHANGELOG.md +++ b/plugins/playlist/CHANGELOG.md @@ -1,9 +1,5 @@ # @backstage/plugin-playlist -## 0.1.8 - -- Added config properties to change dynamically the group noun for all the components in the UI - ## 0.1.7 ### Patch Changes diff --git a/plugins/playlist/README.md b/plugins/playlist/README.md index c85eee8f94..e35f94b9e5 100644 --- a/plugins/playlist/README.md +++ b/plugins/playlist/README.md @@ -131,18 +131,15 @@ const defaultEntityPage = ( Note: the above only shows an example for the `defaultEntityPage` for a full example of this you can look at [this EntityPage](../../packages/app/src/components/catalog/EntityPage.tsx) -## Custom Group Noun +## Custom Title -You can define your custom group noun to shown in all the components of the Playlist plugin in the UI. To do this you just need to add some config in your **app-config.yaml**, here's an example: +You can define a custom title to be shown in all the components of this plugin to replace the default term "playlist" in the UI. To do this you just need to add some config in your **app-config.yaml**, here's an example: ```yaml playlist: - groupPluralNoun: Collections - groupSingularNoun: Collection + title: Collection ``` -_You will always need the plural and the singular matching to have a consistency in the UI_ - ## Features ### View All Playlists diff --git a/plugins/playlist/config.d.ts b/plugins/playlist/config.d.ts index 5f59ffc236..e6245e22a6 100644 --- a/plugins/playlist/config.d.ts +++ b/plugins/playlist/config.d.ts @@ -15,17 +15,11 @@ */ export interface Config { - playlist: { + playlist?: { /** - * (Optional) The plural noun for the entities grouping that will shown in the UI; leave empty for `PLaylists`. + * (Optional) The title that will shown in the UI; leave empty for `PLaylist`. * @visibility frontend */ - groupPluralNoun: string; - - /** - * (Optional) The singular noun for the entities grouping that will shown in the UI; leave empty for `PLaylists`. - * @visibility frontend - */ - groupSingularNoun: string; + title?: string | undefined; }; } diff --git a/plugins/playlist/package.json b/plugins/playlist/package.json index 289236428b..285673a99c 100644 --- a/plugins/playlist/package.json +++ b/plugins/playlist/package.json @@ -1,6 +1,6 @@ { "name": "@backstage/plugin-playlist", - "version": "0.1.8", + "version": "0.1.7", "main": "src/index.ts", "types": "src/index.ts", "license": "Apache-2.0", @@ -42,6 +42,7 @@ "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.57", "lodash": "^4.17.21", + "pluralize": "^8.0.0", "qs": "^6.9.4", "react-hook-form": "^7.13.0", "react-use": "^17.2.4" @@ -65,27 +66,8 @@ "swr": "^2.0.0" }, "files": [ - "dist" + "dist", + "config.d.ts" ], - "configSchema": { - "$schema": "https://backstage.io/schema/config-v1", - "type": "object", - "properties": { - "playlist": { - "type": "object", - "properties": { - "groupPluralNoun": { - "type": "string", - "description": "Frontend plural entities grouping name", - "visibility": "frontend" - }, - "groupSingularNoun": { - "type": "string", - "description": "Frontend singular entities grouping name", - "visibility": "frontend" - } - } - } - } - } + "configSchema": "config.d.ts" } diff --git a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx index cc7427c96c..3859b2aa1e 100644 --- a/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx +++ b/plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx @@ -29,7 +29,7 @@ import { useNavigate } from 'react-router-dom'; import { playlistApiRef } from '../../api'; import { playlistRouteRef } from '../../routes'; import { PlaylistEditDialog } from '../PlaylistEditDialog'; -import { useGroupNoun } from '../../hooks/useConfig'; +import { useTitle } from '../../hooks'; export const CreatePlaylistButton = () => { const navigate = useNavigate(); @@ -56,7 +56,7 @@ export const CreatePlaylistButton = () => { [errorApi, navigate, playlistApi, playlistRoute], ); - const groupSingularNounLowerCase = useGroupNoun(false, false); + const singularTitle = useTitle(false, false); return ( <> @@ -64,7 +64,7 @@ export const CreatePlaylistButton = () => { setOpenDialog(true)} > @@ -77,7 +77,7 @@ export const CreatePlaylistButton = () => { color="primary" onClick={() => setOpenDialog(true)} > - Create {groupSingularNounLowerCase} + Create {singularTitle} )} { [playlistApi], ); - const groupSingularNoun = useGroupNoun(true, false); - const groupSingularNounLowerCase = useGroupNoun(false, true); - const groupPluralNounLowerCase = useGroupNoun(true, true); + const singularTitle = useTitle(true, false); + const singularTitleLowerCase = useTitle(false, true); + const plurlaTitleLowerCase = useTitle(true, true); useEffect(() => { if (open) { @@ -125,7 +125,7 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => { navigate(playlistRoute({ playlistId })); } catch (e) { alertApi.post({ - message: `Failed to add entity to ${groupSingularNounLowerCase}: ${e}`, + message: `Failed to add entity to ${singularTitleLowerCase}: ${e}`, severity: 'error', }); } @@ -136,7 +136,7 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => { navigate, playlistApi, playlistRoute, - groupSingularNounLowerCase, + singularTitleLowerCase, ], ); @@ -153,12 +153,12 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => { }); } catch (e) { alertApi.post({ - message: `Failed to add entity to ${groupSingularNounLowerCase}: ${e}`, + message: `Failed to add entity to ${singularTitleLowerCase}: ${e}`, severity: 'error', }); } }, - [alertApi, closeDialog, entity, playlistApi, groupSingularNounLowerCase], + [alertApi, closeDialog, entity, playlistApi, singularTitleLowerCase], ); return ( @@ -172,7 +172,7 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => { > {(loading || addEntityLoading) && } - Add to {groupSingularNoun} + Add to {singularTitle} { {error && ( )} @@ -221,7 +221,7 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => { )} diff --git a/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx b/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx index d8f48cbecf..1989f25ae7 100644 --- a/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx +++ b/plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx @@ -39,7 +39,7 @@ import React from 'react'; import { useForm, Controller } from 'react-hook-form'; import useAsync from 'react-use/lib/useAsync'; import useAsyncFn from 'react-use/lib/useAsyncFn'; -import { useGroupNoun } from '../../hooks/useConfig'; +import { useTitle } from '../../hooks'; const useStyles = makeStyles({ buttonWrapper: { @@ -106,7 +106,7 @@ export const PlaylistEditDialog = ({ } }; - const groupSingularNounLowercase = useGroupNoun(false, false); + const titleSingularLowerCase = useTitle(false, false); return ( @@ -124,7 +124,7 @@ export const PlaylistEditDialog = ({ fullWidth label="Name" margin="dense" - placeholder={`Give your ${groupSingularNounLowercase} name`} + placeholder={`Give your ${titleSingularLowerCase} name`} required type="text" /> @@ -142,7 +142,7 @@ export const PlaylistEditDialog = ({ label="Description" margin="dense" multiline - placeholder={`Describe your ${groupSingularNounLowercase}`} + placeholder={`Describe your ${titleSingularLowerCase}`} type="text" /> )} diff --git a/plugins/playlist/src/components/PlaylistIndexPage/PlaylistIndexPage.tsx b/plugins/playlist/src/components/PlaylistIndexPage/PlaylistIndexPage.tsx index 6a92718df2..eabce5d0c6 100644 --- a/plugins/playlist/src/components/PlaylistIndexPage/PlaylistIndexPage.tsx +++ b/plugins/playlist/src/components/PlaylistIndexPage/PlaylistIndexPage.tsx @@ -23,7 +23,7 @@ import { } from '@backstage/core-components'; import { CatalogFilterLayout } from '@backstage/plugin-catalog-react'; -import { PlaylistListProvider, useGroupNoun } from '../../hooks'; +import { PlaylistListProvider, useTitle } from '../../hooks'; import { CreatePlaylistButton } from '../CreatePlaylistButton'; import { PersonalListPicker } from '../PersonalListPicker'; import { PlaylistList } from '../PlaylistList'; @@ -32,10 +32,10 @@ import { PlaylistSearchBar } from '../PlaylistSearchBar'; import { PlaylistSortPicker } from '../PlaylistSortPicker'; export const PlaylistIndexPage = () => { - const groupPluralNoun = useGroupNoun(true, false); + const pluralTitle = useTitle(true, false); return ( - + diff --git a/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx b/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx index fd8569e758..6c90914c49 100644 --- a/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx +++ b/plugins/playlist/src/components/PlaylistList/PlaylistList.tsx @@ -23,12 +23,12 @@ import { } from '@backstage/core-components'; import { Typography } from '@material-ui/core'; -import { useGroupNoun, usePlaylistList } from '../../hooks'; +import { useTitle, usePlaylistList } from '../../hooks'; import { PlaylistCard } from '../PlaylistCard'; export const PlaylistList = () => { const { loading, error, playlists } = usePlaylistList(); - const groupPluralNounLowercase = useGroupNoun(true, true); + const pluralTitleLowerCase = useTitle(true, true); return ( <> @@ -36,7 +36,7 @@ export const PlaylistList = () => { {error && ( {error.message} diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx index 3f9e10c4c8..69a6beadb2 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx @@ -32,7 +32,7 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react'; import useAsyncFn from 'react-use/lib/useAsyncFn'; import { playlistApiRef } from '../../api'; -import { useGroupNoun } from '../../hooks/useConfig'; +import { useTitle } from '../../hooks'; import { AddEntitiesDrawer } from './AddEntitiesDrawer'; export const PlaylistEntitiesTable = ({ @@ -85,18 +85,18 @@ export const PlaylistEntitiesTable = ({ [errorApi, loadEntities, playlistApi, playlistId], ); - const groupSingularNounLowerCase = useGroupNoun(false, true); + const singularTitleLowerCase = useTitle(false, true); const actions = editAllowed ? [ { icon: DeleteIcon, - tooltip: `Remove from ${groupSingularNounLowerCase}`, + tooltip: `Remove from ${singularTitleLowerCase}`, onClick: removeEntity, }, { icon: AddBoxIcon, - tooltip: `Add entities to ${groupSingularNounLowerCase}`, + tooltip: `Add entities to ${singularTitleLowerCase}`, isFreeAction: true, onClick: () => setOpenAddEntitiesDrawer(true), }, diff --git a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx index ecf443b565..8ead799db2 100644 --- a/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx +++ b/plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx @@ -45,7 +45,7 @@ import useAsyncFn from 'react-use/lib/useAsyncFn'; import { playlistApiRef } from '../../api'; import { rootRouteRef } from '../../routes'; import { PlaylistEditDialog } from '../PlaylistEditDialog'; -import { useGroupNoun } from '../../hooks/useConfig'; +import { useTitle } from '../../hooks'; const useStyles = makeStyles({ buttonWrapper: { @@ -110,7 +110,7 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => { } }, [playlistApi]); - const groupSingularNoun = useGroupNoun(false, false); + const singularTitle = useTitle(false, false); return (
{ onClick: () => setOpenEditDialog(true), }, { - label: `Delete ${groupSingularNoun}`, + label: `Delete ${singularTitle}`, icon: , disabled: !deleteAllowed, onClick: () => setOpenDeleteDialog(true), diff --git a/plugins/playlist/src/hooks/index.ts b/plugins/playlist/src/hooks/index.ts index da045fbf65..bb164d961c 100644 --- a/plugins/playlist/src/hooks/index.ts +++ b/plugins/playlist/src/hooks/index.ts @@ -15,4 +15,4 @@ */ export * from './usePlaylistList'; -export * from './useConfig'; +export * from './useTitle'; diff --git a/plugins/playlist/src/hooks/useConfig.ts b/plugins/playlist/src/hooks/useTitle.ts similarity index 65% rename from plugins/playlist/src/hooks/useConfig.ts rename to plugins/playlist/src/hooks/useTitle.ts index 15d44570a8..ade68d03e8 100644 --- a/plugins/playlist/src/hooks/useConfig.ts +++ b/plugins/playlist/src/hooks/useTitle.ts @@ -15,13 +15,15 @@ */ import { configApiRef, useApi } from '@backstage/core-plugin-api'; +import pluralize from 'pluralize'; -export function useGroupNoun(inPlural: boolean, inLowerCase: boolean) { +export function useTitle(inPlural: boolean, inLowerCase: boolean) { const configApi = useApi(configApiRef); - const defaultNoun = inPlural ? 'Playlists' : 'Playlist'; - const configProp = inPlural ? 'groupPluralNoun' : 'groupSingularNoun'; - const groupNoun = - configApi.getOptionalString(`playlist.${configProp}`) ?? `${defaultNoun}`; + let title = configApi.getOptionalString('playlist.title') ?? 'Playlist'; - return inLowerCase ? groupNoun.toLocaleLowerCase('en-US') : groupNoun; + if (inPlural) { + title = pluralize(title); + } + + return inLowerCase ? title.toLocaleLowerCase('en-US') : title; } diff --git a/yarn.lock b/yarn.lock index 3cf7b49696..2687870b8f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7380,6 +7380,7 @@ __metadata: cross-fetch: ^3.1.5 lodash: ^4.17.21 msw: ^1.0.0 + pluralize: ^8.0.0 qs: ^6.9.4 react-hook-form: ^7.13.0 react-use: ^17.2.4