[Playlist]feat: improve useTitle hook and fixing tests

Signed-off-by: antonio.bergas <anthonyprincedom@hotmail.com>

plugins/playlist/src/components/CreatePlaylistButton/CreatePlaylistButton.tsx

@@ -56,7 +56,10 @@ export const CreatePlaylistButton = () => {
     [errorApi, navigate, playlistApi, playlistRoute],
   );
 
-  const singularTitle = useTitle(false, false);
+  const singularTitle = useTitle({
+    pluralize: false,
+    lowerCase: false,
+  });
 
   return (
     <>

plugins/playlist/src/components/EntityPlaylistDialog/EntityPlaylistDialog.tsx

@@ -105,9 +105,18 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => {
     [playlistApi],
   );
 
-  const singularTitle = useTitle(true, false);
-  const singularTitleLowerCase = useTitle(false, true);
-  const plurlaTitleLowerCase = useTitle(true, true);
+  const singularTitle = useTitle({
+    pluralize: true,
+    lowerCase: false,
+  });
+  const singularTitleLowerCase = useTitle({
+    pluralize: false,
+    lowerCase: true,
+  });
+  const pluralTitleLowerCase = useTitle({
+    pluralize: true,
+    lowerCase: true,
+  });
 
   useEffect(() => {
     if (open) {
@@ -204,7 +213,7 @@ export const EntityPlaylistDialog = (props: EntityPlaylistDialogProps) => {
         <DialogContent className={classes.dialogContent}>
           {error && (
             <ResponseErrorPanel
-              title={`Error loading ${plurlaTitleLowerCase}`}
+              title={`Error loading ${pluralTitleLowerCase}`}
               error={error}
             />
           )}

plugins/playlist/src/components/PlaylistEditDialog/PlaylistEditDialog.tsx

@@ -106,7 +106,10 @@ export const PlaylistEditDialog = ({
     }
   };
 
-  const titleSingularLowerCase = useTitle(false, false);
+  const titleSingularLowerCase = useTitle({
+    pluralize: false,
+    lowerCase: false,
+  });
 
   return (
     <Dialog fullWidth maxWidth="xs" onClose={closeDialog} open={open}>
@@ -124,7 +127,7 @@ export const PlaylistEditDialog = ({
               fullWidth
               label="Name"
               margin="dense"
-              placeholder={`Give your ${titleSingularLowerCase} name`}
+              placeholder={`Give your ${titleSingularLowerCase} a name`}
               required
               type="text"
             />

plugins/playlist/src/components/PlaylistIndexPage/PlaylistIndexPage.tsx

@@ -32,7 +32,10 @@ import { PlaylistSearchBar } from '../PlaylistSearchBar';
 import { PlaylistSortPicker } from '../PlaylistSortPicker';
 
 export const PlaylistIndexPage = () => {
-  const pluralTitle = useTitle(true, false);
+  const pluralTitle = useTitle({
+    pluralize: true,
+    lowerCase: false,
+  });
 
   return (
     <PageWithHeader themeId="home" title={pluralTitle}>

plugins/playlist/src/components/PlaylistList/PlaylistList.test.tsx

@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 
+import { ConfigApi, configApiRef } from '@backstage/core-plugin-api';
 import { Playlist } from '@backstage/plugin-playlist-common';
+import { TestApiProvider } from '@backstage/test-utils';
 import { render } from '@testing-library/react';
 import React from 'react';
 
 import { MockPlaylistListProvider } from '../../testUtils';
 import { PlaylistList } from './PlaylistList';
 
+const mockConfigApi = {
+  getOptionalString: () => undefined,
+} as Partial<ConfigApi>;
+
 jest.mock('../PlaylistCard', () => ({
   PlaylistCard: ({ playlist }: { playlist: Playlist }) => (
     <div>{playlist.name}</div>
@@ -30,9 +36,11 @@ jest.mock('../PlaylistCard', () => ({
 describe('<PlaylistList/>', () => {
   it('renders error on error', () => {
     const rendered = render(
-      <MockPlaylistListProvider value={{ error: new Error('Test Error') }}>
-        <PlaylistList />
-      </MockPlaylistListProvider>,
+      <TestApiProvider apis={[[configApiRef, mockConfigApi]]}>
+        <MockPlaylistListProvider value={{ error: new Error('Test Error') }}>
+          <PlaylistList />
+        </MockPlaylistListProvider>
+      </TestApiProvider>,
     );
 
     expect(rendered.getByText('Test Error')).toBeInTheDocument();
@@ -40,9 +48,11 @@ describe('<PlaylistList/>', () => {
 
   it('handles no playlists', () => {
     const rendered = render(
-      <MockPlaylistListProvider value={{ playlists: [] }}>
-        <PlaylistList />
-      </MockPlaylistListProvider>,
+      <TestApiProvider apis={[[configApiRef, mockConfigApi]]}>
+        <MockPlaylistListProvider value={{ playlists: [] }}>
+          <PlaylistList />
+        </MockPlaylistListProvider>
+      </TestApiProvider>,
     );
 
     expect(
@@ -52,32 +62,34 @@ describe('<PlaylistList/>', () => {
 
   it('renders playlists', () => {
     const rendered = render(
-      <MockPlaylistListProvider
-        value={{
-          playlists: [
-            {
-              id: 'id1',
-              name: 'playlist-1',
-              owner: 'group:default/some-owner',
-              public: true,
-              entities: 1,
-              followers: 2,
-              isFollowing: false,
-            },
-            {
-              id: 'id2',
-              name: 'playlist-2',
-              owner: 'group:default/another-owner',
-              public: true,
-              entities: 2,
-              followers: 1,
-              isFollowing: true,
-            },
-          ],
-        }}
-      >
-        <PlaylistList />
-      </MockPlaylistListProvider>,
+      <TestApiProvider apis={[[configApiRef, mockConfigApi]]}>
+        <MockPlaylistListProvider
+          value={{
+            playlists: [
+              {
+                id: 'id1',
+                name: 'playlist-1',
+                owner: 'group:default/some-owner',
+                public: true,
+                entities: 1,
+                followers: 2,
+                isFollowing: false,
+              },
+              {
+                id: 'id2',
+                name: 'playlist-2',
+                owner: 'group:default/another-owner',
+                public: true,
+                entities: 2,
+                followers: 1,
+                isFollowing: true,
+              },
+            ],
+          }}
+        >
+          <PlaylistList />
+        </MockPlaylistListProvider>
+      </TestApiProvider>,
     );
 
     expect(rendered.getByText('playlist-1')).toBeInTheDocument();

plugins/playlist/src/components/PlaylistList/PlaylistList.tsx

@@ -28,7 +28,10 @@ import { PlaylistCard } from '../PlaylistCard';
 
 export const PlaylistList = () => {
   const { loading, error, playlists } = usePlaylistList();
-  const pluralTitleLowerCase = useTitle(true, true);
+  const pluralTitleLowerCase = useTitle({
+    pluralize: true,
+    lowerCase: true,
+  });
 
   return (
     <>

plugins/playlist/src/components/PlaylistPage/PlaylistEntitiesTable.tsx

@@ -85,7 +85,10 @@ export const PlaylistEntitiesTable = ({
     [errorApi, loadEntities, playlistApi, playlistId],
   );
 
-  const singularTitleLowerCase = useTitle(false, true);
+  const singularTitleLowerCase = useTitle({
+    pluralize: false,
+    lowerCase: true,
+  });
 
   const actions = editAllowed
     ? [

plugins/playlist/src/components/PlaylistPage/PlaylistHeader.tsx

@@ -110,7 +110,10 @@ export const PlaylistHeader = ({ playlist, onUpdate }: PlaylistHeaderProps) => {
     }
   }, [playlistApi]);
 
-  const singularTitle = useTitle(false, false);
+  const singularTitle = useTitle({
+    pluralize: false,
+    lowerCase: false,
+  });
 
   return (
     <Header

plugins/playlist/src/hooks/useTitle.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2022 The Backstage Authors
+ * Copyright 2023 The Backstage Authors
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,13 +17,18 @@
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import pluralize from 'pluralize';
 
-export function useTitle(inPlural: boolean, inLowerCase: boolean) {
+interface UseTitleOptions {
+  pluralize?: boolean;
+  lowerCase?: boolean;
+}
+
+export function useTitle(opts: UseTitleOptions) {
   const configApi = useApi(configApiRef);
   let title = configApi.getOptionalString('playlist.title') ?? 'Playlist';
 
-  if (inPlural) {
+  if (opts.pluralize) {
     title = pluralize(title);
   }
 
-  return inLowerCase ? title.toLocaleLowerCase('en-US') : title;
+  return opts.lowerCase ? title.toLocaleLowerCase('en-US') : title;
 }