chore: reworking some of the table to provider better links

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/components/ListTasksPage/ListTasksPage.tsx

@@ -24,7 +24,10 @@ import {
   Progress,
 } from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
-import { CatalogFilterLayout } from '@backstage/plugin-catalog-react';
+import {
+  CatalogFilterLayout,
+  EntityRefLink,
+} from '@backstage/plugin-catalog-react';
 import useAsync from 'react-use/lib/useAsync';
 import MaterialTable from '@material-table/core';
 import React, { useState } from 'react';
@@ -38,6 +41,7 @@ import {
   TaskStatusColumn,
   TemplateTitleColumn,
 } from './columns';
+import { parseEntityRef } from '@backstage/catalog-model';
 
 export interface MyTaskPageProps {
   initiallySelectedFilter?: TasksOwnerFilterKind;

plugins/scaffolder/src/components/ListTasksPage/columns/OwnerEntityColumn.tsx

@@ -13,37 +13,37 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Link } from '@backstage/core-components';
-import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { useApi } from '@backstage/core-plugin-api';
 import React from 'react';
 
 import useAsync from 'react-use/lib/useAsync';
-import { ListItemText } from '@material-ui/core';
 
-import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
+import { catalogApiRef, EntityRefLink } from '@backstage/plugin-catalog-react';
 import { parseEntityRef, UserEntity } from '@backstage/catalog-model';
 
 export const OwnerEntityColumn = ({ entityRef }: { entityRef?: string }) => {
   const catalogApi = useApi(catalogApiRef);
-  const catalogEntityRoute = useRouteRef(entityRouteRef);
 
   const { value, loading, error } = useAsync(
     () => catalogApi.getEntityByRef(entityRef || ''),
     [catalogApi, entityRef],
   );
 
+  if (!entityRef) {
+    return <p>Unknown</p>;
+  }
+
   if (loading || error) {
     return null;
   }
 
   return (
-    <Link to={catalogEntityRoute(parseEntityRef(entityRef || ''))}>
-      <ListItemText
-        primary={
-          (value as UserEntity)?.spec?.profile?.displayName ??
-          value?.metadata.name
-        }
-      />
-    </Link>
+    <EntityRefLink
+      entityRef={parseEntityRef(entityRef)}
+      title={
+        (value as UserEntity)?.spec?.profile?.displayName ??
+        value?.metadata.name
+      }
+    />
   );
 };

plugins/scaffolder/src/components/ListTasksPage/columns/TemplateTitleColumn.tsx

@@ -17,6 +17,8 @@ import { useApi } from '@backstage/core-plugin-api';
 import React from 'react';
 import { scaffolderApiRef } from '../../../api';
 import useAsync from 'react-use/lib/useAsync';
+import { parseEntityRef } from '@backstage/catalog-model';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
 
 export const TemplateTitleColumn = ({ entityRef }: { entityRef?: string }) => {
   const scaffolder = useApi(scaffolderApiRef);
@@ -25,9 +27,11 @@ export const TemplateTitleColumn = ({ entityRef }: { entityRef?: string }) => {
     [scaffolder, entityRef],
   );
 
-  if (loading || error) {
+  if (loading || error || !entityRef) {
     return null;
   }
 
-  return <p>{value?.title}</p>;
+  return (
+    <EntityRefLink entityRef={parseEntityRef(entityRef)} title={value?.title} />
+  );
 };