Use pluralize for catalog kind header component

Signed-off-by: Marek Šneberger <marek@sneberger.cz>

plugins/catalog/package.json

@@ -49,6 +49,7 @@
     "@material-ui/lab": "4.0.0-alpha.57",
     "history": "^5.0.0",
     "lodash": "^4.17.21",
+    "pluralize": "^8.0.0",
     "react-helmet": "6.1.0",
     "react-use": "^17.2.4",
     "zen-observable": "^0.9.0"

plugins/catalog/src/components/CatalogKindHeader/CatalogKindHeader.tsx

@@ -31,6 +31,7 @@ import {
 } from '@backstage/plugin-catalog-react';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
+import pluralize from 'pluralize';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -132,7 +133,7 @@ export function CatalogKindHeader(props: CatalogKindHeaderProps) {
     >
       {Object.keys(options).map(kind => (
         <MenuItem value={kind} key={kind}>
-          {`${options[kind]}s`}
+          {`${pluralize(options[kind])}`}
         </MenuItem>
       ))}
     </Select>