address comments

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionCard.tsx

@@ -28,7 +28,7 @@ type Props = {
 };
 
 export const ApiDefinitionCard = (_: Props) => {
-  const entity = useEntity<ApiEntity>().entity;
+  const { entity } = useEntity<ApiEntity>();
   const config = useApi(apiDocsConfigRef);
   const { getApiDefinitionWidget } = config;
 

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx

@@ -55,9 +55,9 @@ export const GroupProfileCard = ({
   entity?: GroupEntity;
   variant?: InfoCardVariants;
 }) => {
-  const group = useEntity<GroupEntity>().entity;
+  const { entity: group } = useEntity<GroupEntity>();
   if (!group) {
-    return <Alert severity="error">User not found</Alert>;
+    return <Alert severity="error">Group not found</Alert>;
   }
 
   const {

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx

@@ -19,7 +19,13 @@ import {
   RELATION_MEMBER_OF,
   UserEntity,
 } from '@backstage/catalog-model';
-import { Avatar, InfoCard, Progress, useApi } from '@backstage/core';
+import {
+  Avatar,
+  InfoCard,
+  Progress,
+  ResponseErrorPanel,
+  useApi,
+} from '@backstage/core';
 import {
   catalogApiRef,
   entityRouteParams,
@@ -34,7 +40,6 @@ import {
   Theme,
   Typography,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -110,7 +115,7 @@ export const MembersListCard = (_props: {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: GroupEntity;
 }) => {
-  const groupEntity = useEntity<GroupEntity>().entity;
+  const { entity: groupEntity } = useEntity<GroupEntity>();
   const {
     metadata: { name: groupName },
     spec: { profile },
@@ -138,7 +143,7 @@ export const MembersListCard = (_props: {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return (

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx

@@ -15,7 +15,13 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { InfoCard, InfoCardVariants, Progress, useApi } from '@backstage/core';
+import {
+  InfoCard,
+  InfoCardVariants,
+  Progress,
+  ResponseErrorPanel,
+  useApi,
+} from '@backstage/core';
 import {
   catalogApiRef,
   isOwnerOf,
@@ -29,7 +35,6 @@ import {
   makeStyles,
   Typography,
 } from '@material-ui/core';
-import Alert from '@material-ui/lab/Alert';
 import React from 'react';
 import { useAsync } from 'react-use';
 
@@ -180,12 +185,12 @@ export const OwnershipCard = ({
         name: 'Tools',
       },
     ] as Array<{ counter: number; className: EntitiesTypes; name: string }>;
-  }, [catalogApi]);
+  }, [catalogApi, entity]);
 
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return (

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -51,7 +51,7 @@ export const UserProfileCard = ({
   entity?: UserEntity;
   variant?: InfoCardVariants;
 }) => {
-  const user = useEntity<UserEntity>().entity;
+  const { entity: user } = useEntity<UserEntity>();
   if (!user) {
     return <Alert severity="error">User not found</Alert>;
   }