diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx
index ed9ac7b9aa..2fcb89eed1 100644
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx
+++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx
@@ -13,9 +13,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Button, Tooltip } from '@material-ui/core';
+import { IconButton } from '@material-ui/core';
import EmailIcon from '@material-ui/icons/Email';
import React from 'react';
+import { Link } from '@backstage/core-components';
/**
* Email Card action link
@@ -24,10 +25,14 @@ import React from 'react';
*/
export const EmailCardAction = ({ email }: { email: string }) => {
return (
-
-
-
+
+
+
);
};
diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx
index d021a9f69d..fc8b5f4007 100644
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx
+++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { entityRouteRef } from '../../../routes';
-import { Tooltip } from '@material-ui/core';
+import { IconButton } from '@material-ui/core';
import InfoIcon from '@material-ui/icons/Info';
import React from 'react';
import { useRouteRef } from '@backstage/core-plugin-api';
@@ -30,19 +30,17 @@ export const EntityCardActions = ({ entity }: { entity: Entity }) => {
const entityRoute = useRouteRef(entityRouteRef);
return (
- <>
-
-
-
-
-
- >
+
+
+
);
};
diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityNotFoundCard.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityNotFoundCard.tsx
deleted file mode 100644
index 08d92cab22..0000000000
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityNotFoundCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2022 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.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Card, CardContent } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
-import React from 'react';
-
-/**
- * Entity not found card
- *
- * @private
- */
-export const EntityNotFoundCard = ({
- entityRef,
- error,
-}: {
- entityRef: string;
- error?: Error;
-}) => {
- return (
-
-
-
- {entityRef} was not found {error?.message}
-
-
-
- );
-};
diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx
index bb24f293cb..132042452b 100644
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx
+++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx
@@ -22,9 +22,15 @@ import {
import Button from '@material-ui/core/Button';
import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
import { catalogApiRef } from '../../api';
-import { CompoundEntityRef } from '@backstage/catalog-model';
+import {
+ CompoundEntityRef,
+ parseEntityRef,
+ stringifyEntityRef,
+} from '@backstage/catalog-model';
import { entityRouteRef } from '../../routes';
import { CatalogApi } from '@backstage/catalog-client';
+import { Table, TableColumn } from '@backstage/core-components';
+import { EntityRefLink } from '../EntityRefLink';
const mockCatalogApi = {
getEntityByRef: async (entityRef: CompoundEntityRef) => {
@@ -137,3 +143,55 @@ export const SlowCatalogItem = (args: EntityPeekAheadPopoverProps) => (
SlowCatalogItem.args = {
entityRef: 'component:default/slow.catalog.item',
};
+
+const columns: TableColumn[] = [
+ {
+ title: 'entity',
+ render: entityRef => {
+ return (
+
+
+
+ );
+ },
+ },
+ {
+ title: 'owner',
+ render: () => {
+ return (
+
+
+
+ );
+ },
+ },
+ {
+ title: 'name',
+ render: entityRef => stringifyEntityRef(entityRef),
+ },
+];
+export const TableOfItems = (args: { data: CompoundEntityRef[] }) => (
+
+);
+
+TableOfItems.args = {
+ data: [
+ {
+ name: 'playback',
+ kind: 'component',
+ namespace: 'default',
+ },
+ {
+ name: 'playback',
+ kind: 'component',
+ namespace: 'default',
+ },
+ {
+ name: 'playback',
+ kind: 'component',
+ namespace: 'default',
+ },
+ ],
+};
diff --git a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx
index 41b8cfbfb2..05a818fa1f 100644
--- a/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx
+++ b/plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx
@@ -38,13 +38,12 @@ import {
isUserEntity,
parseEntityRef,
} from '@backstage/catalog-model';
-import { Progress } from '@backstage/core-components';
+import { Progress, ResponseErrorPanel } from '@backstage/core-components';
import {
EntityCardActions,
UserCardActions,
GroupCardActions,
} from './CardActionComponents';
-import { EntityNotFoundCard } from './EntityNotFoundCard';
import { debounce } from 'lodash';
/**
@@ -126,11 +125,7 @@ export const EntityPeekAheadPopover = (props: EntityPeekAheadPopoverProps) => {
return (
<>
- {' '}
-
+
{children}
@@ -149,56 +144,62 @@ export const EntityPeekAheadPopover = (props: EntityPeekAheadPopoverProps) => {
vertical: 'top',
horizontal: 'center',
}}
+ onMouseLeave={handleOnMouseLeave}
>
<>
- {loading && }
- {!entity && !loading && (
-
- )}
- {entity && (
-
-
-
- {compoundEntityRef.namespace}
-
-
- {compoundEntityRef.name}
-
- {entity.kind}
-
- {entity.metadata.description}
-
- {entity.spec?.type}
-
- {(entity.metadata.tags || [])
- .slice(0, maxTagChips)
- .map(tag => {
- return ;
- })}
- {entity.metadata.tags?.length &&
- entity.metadata.tags?.length > maxTagChips && (
-
-
-
- )}
-
-
-
+ {error && }
+
+ {loading && }
+
+
+ {entity && (
<>
- {isUserEntity(entity) && (
-
- )}
- {isGroupEntity(entity) && (
-
- )}
-
+
+ {compoundEntityRef.namespace}
+
+
+ {compoundEntityRef.name}
+
+ {entity.kind}
+
+ {entity.metadata.description}
+
+ {entity.spec?.type}
+
+ {(entity.metadata.tags || [])
+ .slice(0, maxTagChips)
+ .map(tag => {
+ return ;
+ })}
+ {entity.metadata.tags?.length &&
+ entity.metadata.tags?.length > maxTagChips && (
+
+
+
+ )}
+
>
+ )}
+
+ {!error && (
+
+ {entity && (
+ <>
+ {isUserEntity(entity) && (
+
+ )}
+ {isGroupEntity(entity) && (
+
+ )}
+
+ >
+ )}
-
- )}
+ )}
+
>
)}