Remove kind prefix on name column; case-insensitivity

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

plugins/catalog-react/src/hooks/useEntityKinds.ts

@@ -31,7 +31,9 @@ export function useEntityKinds() {
       .getEntities({ fields: ['kind'] })
       .then(response => response.items);
 
-    return [...new Set(entities.map(e => e.kind))].sort();
+    return [
+      ...new Set(entities.map(e => e.kind.toLocaleLowerCase('en-US'))),
+    ].sort();
   });
   return { error, loading, kinds };
 }

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

@@ -106,7 +106,7 @@ describe('<CatalogKindHeader />', () => {
     fireEvent.click(option);
 
     expect(updateFilters).toHaveBeenCalledWith({
-      kind: new EntityKindFilter('Template'),
+      kind: new EntityKindFilter('template'),
     });
   });
 });

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

@@ -43,14 +43,16 @@ type CatalogKindHeaderProps = {
 };
 
 export const CatalogKindHeader = ({
-  initialFilter = 'Component',
+  initialFilter = 'component',
 }: CatalogKindHeaderProps) => {
   const classes = useStyles();
-  const { kinds: allKinds } = useEntityKinds();
+  const { kinds: allKinds = [] } = useEntityKinds();
   const { updateFilters, queryParameters } = useEntityListProvider();
 
   const [selectedKind, setSelectedKind] = useState(
-    [queryParameters.kind].flat()[0] ?? initialFilter,
+    ([queryParameters.kind].flat()[0] ?? initialFilter).toLocaleLowerCase(
+      'en-US',
+    ),
   );
 
   useEffect(() => {
@@ -59,6 +61,8 @@ export const CatalogKindHeader = ({
     });
   }, [selectedKind, updateFilters]);
 
+  const options = [...new Set([selectedKind, ...allKinds])].sort();
+
   return (
     <Select
       input={<InputBase value={selectedKind} />}
@@ -66,9 +70,9 @@ export const CatalogKindHeader = ({
       onChange={e => setSelectedKind(e.target.value as string)}
       classes={classes}
     >
-      {(allKinds ?? ['Component']).map(kind => (
+      {options.map(kind => (
         <MenuItem value={kind} key={kind}>
-          {`${capitalize(kind)}s`}
+          {`${kind === 'api' ? 'API' : capitalize(kind)}s`}
         </MenuItem>
       ))}
     </Select>

plugins/catalog/src/components/CatalogTable/CatalogTable.tsx

@@ -27,7 +27,7 @@ import {
 import Edit from '@material-ui/icons/Edit';
 import OpenInNew from '@material-ui/icons/OpenInNew';
 import { capitalize } from 'lodash';
-import React from 'react';
+import React, { useMemo } from 'react';
 import * as columnFactories from './columns';
 import { EntityRow } from './types';
 import {
@@ -38,16 +38,6 @@ import {
   WarningPanel,
 } from '@backstage/core-components';
 
-const defaultColumns: TableColumn<EntityRow>[] = [
-  columnFactories.createNameColumn(),
-  columnFactories.createSystemColumn(),
-  columnFactories.createOwnerColumn(),
-  columnFactories.createSpecTypeColumn(),
-  columnFactories.createSpecLifecycleColumn(),
-  columnFactories.createMetadataDescriptionColumn(),
-  columnFactories.createTagsColumn(),
-];
-
 type CatalogTableProps = {
   columns?: TableColumn<EntityRow>[];
   actions?: TableProps<EntityRow>['actions'];
@@ -57,6 +47,19 @@ export const CatalogTable = ({ columns, actions }: CatalogTableProps) => {
   const { isStarredEntity, toggleStarredEntity } = useStarredEntities();
   const { loading, error, entities, filters } = useEntityListProvider();
 
+  const defaultColumns: TableColumn<EntityRow>[] = useMemo(
+    () => [
+      columnFactories.createNameColumn({ defaultKind: filters.kind?.value }),
+      columnFactories.createSystemColumn(),
+      columnFactories.createOwnerColumn(),
+      columnFactories.createSpecTypeColumn(),
+      columnFactories.createSpecLifecycleColumn(),
+      columnFactories.createMetadataDescriptionColumn(),
+      columnFactories.createTagsColumn(),
+    ],
+    [filters.kind?.value],
+  );
+
   const showTypeColumn = filters.type === undefined;
   // TODO(timbonicus): remove the title from the CatalogTable once using EntitySearchBar
   const titlePreamble = capitalize(filters.user?.value ?? 'all');