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) && ( + + )} + + + )} - - )} + )} + )}