add entity peek ahead component #15014

punkle · 2022-12-05T09:13:59Z

Signed-off-by: Brian Fletcher brian@roadie.io

Hey, I just made a Pull Request!

add entity peek ahead component

closes #13678

It looks like this:

or for a group / user with an email it looks like this:

✔️ Checklist

A changeset describing the change and affected packages. (more info)
Added or updated documentation
Tests for new functionality and regression tests for bug fixes
Screenshots attached (for UI changes)
All your commits have a Signed-off-by line in the message. (more info)

Signed-off-by: Brian Fletcher <brian@roadie.io>

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx

Signed-off-by: Brian Fletcher <brian@roadie.io>

github-actions · 2022-12-05T09:20:32Z

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-catalog-react	plugins/catalog-react	patch	`v1.2.2`

Signed-off-by: Brian Fletcher <brian@roadie.io>

packages/catalog-model/examples/acme/team-a-group.yaml

Signed-off-by: Brian Fletcher <brian@roadie.io>

punkle · 2022-12-06T07:44:34Z

We have the option of using the color of the text, chips or italics to allow the reader to understand the information a little better.

freben

Cool stuff!

packages/catalog-model/examples/acme/team-a-group.yaml

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx

Signed-off-by: Brian Fletcher <brian@roadie.io>

…-entity-peek-ahead

Signed-off-by: Brian Fletcher <brian@roadie.io>

freben · 2022-12-15T09:27:44Z

That MUST be a builtin feature of material-ui-popup-state I'd hope!

punkle · 2022-12-15T09:30:44Z

@freben I havent quite found that setting yet. But let me drill further.

punkle · 2022-12-15T09:54:29Z

There is an open issue for this jcoreio/material-ui-popup-state#85

Signed-off-by: irma12 <irma@roadie.io>

Irma12 · 2022-12-19T08:24:01Z

@freben I have added a prop 'delayTime' so we should be able to make it work now 🤞🏼

github-actions · 2022-12-19T08:24:50Z

Uffizzi Preview deployment-9292 was deleted.

Signed-off-by: irma12 <irma@roadie.io>

punkle · 2022-12-19T12:00:58Z

Thanks Irma for helping me out. I felt a little stuck there.

@freben I am noticing that gmail has a delay of 1.5 seconds and github has a delay of less than a second.

Irma has set the default value to 0.5 seconds. Let us know if you would like it longer.

Signed-off-by: Brian Fletcher <brian@roadie.io>

…-entity-peek-ahead-irma

Signed-off-by: Brian Fletcher <brian@roadie.io>

…eHQ-entity-peek-ahead

Signed-off-by: Brian Fletcher <brian@roadie.io>

backstage-goalie · 2022-12-20T16:40:31Z

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@backstage/plugin-catalog-react	plugins/catalog-react	patch	`v1.2.4-next.1`

freben

Still some behavioural issues I think

freben · 2022-12-21T09:09:21Z

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityNotFoundCard.tsx

+    <Card>
+      <CardContent>
+        <Alert severity="warning">
+          {entityRef} was not found {error?.message}


Wording gets odd.

Should probably be a <ResponseErrorPanel error={error} /> instead of an Alert

freben · 2022-12-21T09:09:58Z

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx

+
+  return (
+    <>
+      {' '}


probably unintentional?

I think so. Its removed now.

freben · 2022-12-21T09:11:24Z

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx

+          }}
+        >
+          <>
+            {loading && <Progress />}


note in the story how the progress looks (stacked at the top with no padding), it should probably be inside a card content as well

freben · 2022-12-21T09:13:13Z

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.tsx

+      {' '}
+      <span
+        onMouseEnter={debouncedHandleMouseEnter}
+        onMouseLeave={handleOnMouseLeave}


This doesn't seem to work, did you try it out carefully in the storybook? You can't enter the popover card at all; it closes if you try. If you try to slowly go with the mouse pointer into the test button in the storybook from below, the popover never shows.

I tried to fix this. Could you take a look now.

freben · 2022-12-21T09:17:45Z

...catalog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EmailCardAction.tsx

+export const EmailCardAction = ({ email }: { email: string }) => {
+  return (
+    <Tooltip title={`Email ${email}`}>
+      <Button target="_blank" href={`mailto:${email}`} size="small">


To get it behaviorally the same as our links, could you try out whether <IconButton component={Link} to={<url>} size="small"> works as intended? I think it might. See for example

backstage/plugins/catalog/src/components/AboutCard/AboutCard.tsx

Line 172 in e253423

component={Link}

Using our Link of course, not the one in MUI. Adding aria-label is bonus points

freben · 2022-12-21T09:19:37Z

...talog-react/src/components/EntityPeekAheadPopover/CardActionComponents/EntityCardActions.tsx

+  return (
+    <>
+      <Tooltip title="Show details">
+        <Link


should this also have been IconButton and component={Link}?

freben · 2022-12-21T09:20:51Z

plugins/catalog-react/src/components/EntityPeekAheadPopover/EntityPeekAheadPopover.stories.tsx

+import { CompoundEntityRef } from '@backstage/catalog-model';
+import { entityRouteRef } from '../../routes';
+import { CatalogApi } from '@backstage/catalog-client';
+


I think it would be really valuable to have a table as one of the stories, to get a feeling for how it feels in a context where there are lots of links and getting some of the overlap problems visible if any

…-tttentity-peek-ahead

Signed-off-by: Brian Fletcher <brian@roadie.io>

freben · 2022-12-28T15:31:06Z

(just popping in to mention I'm off for the holidays and reviews might take a while longer)

…eek-ahead

freben

Alright, let's

github-actions · 2023-01-05T13:37:59Z

Thank you for contributing to Backstage! The changes in this pull request will be part of the 1.10.0 release, scheduled for Tue, 17 Jan 2023.

add entity peek ahead component

248ed0f

Signed-off-by: Brian Fletcher <brian@roadie.io>

punkle requested a review from a team as a code owner December 5, 2022 09:13

punkle commented Dec 5, 2022

View reviewed changes

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx Outdated Show resolved Hide resolved

punkle commented Dec 5, 2022

View reviewed changes

plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx Outdated Show resolved Hide resolved

tidy

d4d0ffc

Signed-off-by: Brian Fletcher <brian@roadie.io>

github-actions bot added the area:catalog Related to the Catalog Project Area label Dec 5, 2022

backstage-goalie bot assigned freben and samiramkr Dec 5, 2022

changeset

516b203

Signed-off-by: Brian Fletcher <brian@roadie.io>

punkle requested a review from a team as a code owner December 5, 2022 09:20

yarn update

dcc65c6

Signed-off-by: Brian Fletcher <brian@roadie.io>

punkle requested a review from backstage-service as a code owner December 5, 2022 09:35

punkle added 2 commits December 5, 2022 10:02

fix width of popover

f68ff9a

Signed-off-by: Brian Fletcher <brian@roadie.io>

fix tests and improve error handling

281df37

Signed-off-by: Brian Fletcher <brian@roadie.io>

punkle commented Dec 5, 2022

View reviewed changes

packages/catalog-model/examples/acme/team-a-group.yaml Outdated Show resolved Hide resolved

github-actions bot added the area:techdocs Related to the TechDocs Project Area label Dec 5, 2022

fix more tests

7b1fe36

Signed-off-by: Brian Fletcher <brian@roadie.io>

github-actions bot added the area:scaffolder Everything and all things related to the scaffolder project area label Dec 5, 2022

punkle added 2 commits December 5, 2022 19:36

more test fixes

ca6510f

Signed-off-by: Brian Fletcher <brian@roadie.io>

imports

f39bec7

Signed-off-by: Brian Fletcher <brian@roadie.io>

freben reviewed Dec 7, 2022

View reviewed changes

punkle added 4 commits December 7, 2022 14:45

some code review comments addressed

f877061

Signed-off-by: Brian Fletcher <brian@roadie.io>

Merge branch 'master' of github.com:backstage/backstage into RoadieHQ…

3f7790e

…-entity-peek-ahead

remove wait

347648d

Signed-off-by: Brian Fletcher <brian@roadie.io>

revert more test changes

8f74261

Signed-off-by: Brian Fletcher <brian@roadie.io>

github-actions bot removed area:techdocs Related to the TechDocs Project Area area:scaffolder Everything and all things related to the scaffolder project area labels Dec 7, 2022

more reverted tests

d83d7d5

Signed-off-by: Brian Fletcher <brian@roadie.io>

Add delay to popup

645161d

Signed-off-by: irma12 <irma@roadie.io>

Add default delayTime value

665bbd3

Signed-off-by: irma12 <irma@roadie.io>

fix api docs

1252ff9

Signed-off-by: Brian Fletcher <brian@roadie.io>

github-actions bot added the area:scaffolder Everything and all things related to the scaffolder project area label Dec 19, 2022

punkle added 4 commits December 19, 2022 13:43

Merge branch 'master' of github.com:backstage/backstage into RoadieHQ…

2c0c100

…-entity-peek-ahead-irma

add delay time to api report

2e633f5

Signed-off-by: Brian Fletcher <brian@roadie.io>

Merge branch 'master' of github.com:backstage/backstage into Road222i…

7d4d545

…eHQ-entity-peek-ahead

remove api report for scaffolder

e253423

Signed-off-by: Brian Fletcher <brian@roadie.io>

github-actions bot removed the area:scaffolder Everything and all things related to the scaffolder project area label Dec 20, 2022

freben reviewed Dec 21, 2022

View reviewed changes

punkle added 3 commits December 22, 2022 15:31

Merge branch 'master' of github.com:backstage/backstage into RoadieHQ…

ad5c714

…-tttentity-peek-ahead

address review comments

3d679f8

Signed-off-by: Brian Fletcher <brian@roadie.io>

fixes test

a06b01e

Signed-off-by: Brian Fletcher <brian@roadie.io>

punkle requested a review from freben January 3, 2023 21:17

Merge branch 'master' of github.com:backstage/backstage into entity-p…

4663f6c

…eek-ahead

freben approved these changes Jan 5, 2023

View reviewed changes

freben merged commit 2ba88fe into backstage:master Jan 5, 2023

freben mentioned this pull request Jan 5, 2023

minor updates to the entity peek-ahead #15595

Merged

punkle mentioned this pull request Mar 23, 2023

Org Member: punkle backstage/community#79

Closed

1 task

freben mentioned this pull request Apr 20, 2023

An entityPresentationApiRef, for rendering rich entity refs #17474

Merged

awanlin mentioned this pull request Aug 3, 2023

🚀 Feature: Enhance "Your Starred Entities" component in Home Plugin with Kind #16909

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add entity peek ahead component #15014

add entity peek ahead component #15014

punkle commented Dec 5, 2022 •

edited

Loading

github-actions bot commented Dec 5, 2022 •

edited by backstage-goalie bot

Loading

punkle commented Dec 6, 2022

freben left a comment

freben commented Dec 15, 2022

punkle commented Dec 15, 2022

punkle commented Dec 15, 2022

Irma12 commented Dec 19, 2022

github-actions bot commented Dec 19, 2022 •

edited

Loading

punkle commented Dec 19, 2022

backstage-goalie bot commented Dec 20, 2022 •

edited

Loading

freben left a comment

freben Dec 21, 2022

punkle Dec 22, 2022

freben Dec 21, 2022

punkle Dec 22, 2022

freben Dec 21, 2022

punkle Dec 22, 2022

freben Dec 21, 2022

punkle Dec 22, 2022

freben Dec 21, 2022

punkle Dec 22, 2022

freben Dec 21, 2022

punkle Dec 22, 2022

freben Dec 21, 2022

punkle Dec 22, 2022

freben commented Dec 28, 2022

freben left a comment

github-actions bot commented Jan 5, 2023

add entity peek ahead component #15014

add entity peek ahead component #15014

Conversation

punkle commented Dec 5, 2022 • edited Loading

Hey, I just made a Pull Request!

✔️ Checklist

github-actions bot commented Dec 5, 2022 • edited by backstage-goalie bot Loading

Changed Packages

punkle commented Dec 6, 2022

freben left a comment

Choose a reason for hiding this comment

freben commented Dec 15, 2022

punkle commented Dec 15, 2022

punkle commented Dec 15, 2022

Irma12 commented Dec 19, 2022

github-actions bot commented Dec 19, 2022 • edited Loading

punkle commented Dec 19, 2022

backstage-goalie bot commented Dec 20, 2022 • edited Loading

Changed Packages

freben left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

freben commented Dec 28, 2022

freben left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 5, 2023

punkle commented Dec 5, 2022 •

edited

Loading

github-actions bot commented Dec 5, 2022 •

edited by backstage-goalie bot

Loading

github-actions bot commented Dec 19, 2022 •

edited

Loading

backstage-goalie bot commented Dec 20, 2022 •

edited

Loading