@backstage/plugin-catalog-react 0.0.0-nightly-20230116022721 → 0.0.0-nightly-20230117022622

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @backstage/plugin-catalog-react
 
-## 0.0.0-nightly-20230116022721
+## 0.0.0-nightly-20230117022622
 
 ### Patch Changes
 
@@ -8,18 +8,18 @@
 - 516b2039b6: Add a reusable pop over `EntityPeekAheadPopover` component. It shows more details about the associated entity. See the playbook here https://backstage.io/storybook/?path=/story/catalog-entitypeekaheadpopover--default
 - 0e33627996: Remove usage of raw span
 - Updated dependencies
-  - @backstage/catalog-model@0.0.0-nightly-20230116022721
-  - @backstage/catalog-client@0.0.0-nightly-20230116022721
-  - @backstage/core-components@0.0.0-nightly-20230116022721
-  - @backstage/core-plugin-api@0.0.0-nightly-20230116022721
-  - @backstage/plugin-permission-react@0.0.0-nightly-20230116022721
+  - @backstage/catalog-model@0.0.0-nightly-20230117022622
+  - @backstage/catalog-client@0.0.0-nightly-20230117022622
+  - @backstage/core-components@0.0.0-nightly-20230117022622
+  - @backstage/core-plugin-api@0.0.0-nightly-20230117022622
+  - @backstage/plugin-permission-react@0.0.0-nightly-20230117022622
   - @backstage/errors@1.1.4
-  - @backstage/integration@0.0.0-nightly-20230116022721
+  - @backstage/integration@0.0.0-nightly-20230117022622
   - @backstage/theme@0.2.16
   - @backstage/types@1.0.2
   - @backstage/version-bridge@1.0.3
-  - @backstage/plugin-catalog-common@0.0.0-nightly-20230116022721
-  - @backstage/plugin-permission-common@0.0.0-nightly-20230116022721
+  - @backstage/plugin-catalog-common@0.0.0-nightly-20230117022622
+  - @backstage/plugin-permission-common@0.0.0-nightly-20230117022622
 
 ## 1.2.4-next.2
 

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "0.0.0-nightly-20230116022721",
+  "version": "0.0.0-nightly-20230117022622",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/index.esm.js

@@ -1133,7 +1133,7 @@ const EntityOwnerPicker = () => {
   )));
 };
 
-const EntityCardActions = ({ entity }) => {
+const EntityCardActions = (props) => {
   const entityRoute = useRouteRef(entityRouteRef);
   return /* @__PURE__ */ React.createElement(
     IconButton,
@@ -1141,45 +1141,39 @@ const EntityCardActions = ({ entity }) => {
       component: Link,
       "aria-label": "Show",
       title: "Show details",
-      to: entityRoute({
-        name: entity.metadata.name,
-        namespace: entity.metadata.namespace || "default",
-        kind: entity.kind.toLocaleLowerCase("en-US")
-      })
+      to: entityRoute(getCompoundEntityRef(props.entity))
     },
     /* @__PURE__ */ React.createElement(InfoIcon, null)
   );
 };
 
-const EmailCardAction = ({ email }) => {
+const EmailCardAction = (props) => {
   return /* @__PURE__ */ React.createElement(
     IconButton,
     {
       component: Link,
       "aria-label": "Email",
-      title: `Email ${email}`,
-      to: `mailto:${email}`,
-      target: "_blank"
+      title: `Email ${props.email}`,
+      to: `mailto:${props.email}`
     },
     /* @__PURE__ */ React.createElement(EmailIcon, null)
   );
 };
 
-const GroupCardActions = ({ entity }) => {
+const GroupCardActions = (props) => {
   var _a;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_a = entity.spec.profile) == null ? void 0 : _a.email) && /* @__PURE__ */ React.createElement(EmailCardAction, { email: entity.spec.profile.email }));
+  const email = (_a = props.entity.spec.profile) == null ? void 0 : _a.email;
+  return email ? /* @__PURE__ */ React.createElement(EmailCardAction, { email }) : null;
 };
 
-const UserCardActions = ({ entity }) => {
+const UserCardActions = (props) => {
   var _a;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_a = entity.spec.profile) == null ? void 0 : _a.email) && /* @__PURE__ */ React.createElement(EmailCardAction, { email: entity.spec.profile.email }));
+  const email = (_a = props.entity.spec.profile) == null ? void 0 : _a.email;
+  return email ? /* @__PURE__ */ React.createElement(EmailCardAction, { email }) : null;
 };
 
 const useStyles$b = makeStyles(() => {
   return {
-    trigger: {
-      display: "inline-block"
-    },
     popoverPaper: {
       width: "30em"
     },
@@ -1202,25 +1196,22 @@ const EntityPeekAheadPopover = (props) => {
     variant: "popover",
     popupId: "entity-peek-ahead"
   });
-  const compoundEntityRef = parseEntityRef(entityRef);
   const [isHovered, setIsHovered] = useState(false);
-  const debouncedHandleMouseEnter = debounce(
-    () => setIsHovered(true),
-    delayTime
+  const debouncedHandleMouseEnter = useMemo(
+    () => debounce(() => setIsHovered(true), delayTime),
+    [delayTime]
   );
   const [{ loading, error, value: entity }, load] = useAsyncFn(async () => {
     const catalogApi = apiHolder.get(catalogApiRef);
     if (catalogApi) {
-      const retrievedEntity = await catalogApi.getEntityByRef(
-        compoundEntityRef
-      );
+      const retrievedEntity = await catalogApi.getEntityByRef(entityRef);
       if (!retrievedEntity) {
-        throw new Error(`${compoundEntityRef.name} was not found`);
+        throw new Error(`${entityRef} not found`);
       }
       return retrievedEntity;
     }
     return void 0;
-  }, [apiHolder, compoundEntityRef]);
+  }, [apiHolder, entityRef]);
   const handleOnMouseLeave = () => {
     setIsHovered(false);
     debouncedHandleMouseEnter.cancel();
@@ -1255,7 +1246,7 @@ const EntityPeekAheadPopover = (props) => {
       },
       onMouseLeave: handleOnMouseLeave
     },
-    /* @__PURE__ */ React.createElement(React.Fragment, null, error && /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }), /* @__PURE__ */ React.createElement(Card, null, loading && /* @__PURE__ */ React.createElement(Progress, null), /* @__PURE__ */ React.createElement(CardContent, null, entity && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary" }, compoundEntityRef.namespace), /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "div" }, compoundEntityRef.name), /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary" }, entity.kind), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardContent, null, error && /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error }), loading && /* @__PURE__ */ React.createElement(Progress, null), entity && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary" }, entity.metadata.namespace), /* @__PURE__ */ React.createElement(Typography, { variant: "h5", component: "div" }, entity.metadata.name), /* @__PURE__ */ React.createElement(Typography, { color: "textSecondary", gutterBottom: true }, entity.kind), entity.metadata.description && /* @__PURE__ */ React.createElement(
       Typography,
       {
         className: classes.descriptionTypography,
@@ -1264,7 +1255,7 @@ const EntityPeekAheadPopover = (props) => {
       entity.metadata.description
     ), /* @__PURE__ */ React.createElement(Typography, null, (_a = entity.spec) == null ? void 0 : _a.type), /* @__PURE__ */ React.createElement(Box, { marginTop: "0.5em" }, (entity.metadata.tags || []).slice(0, maxTagChips).map((tag) => {
       return /* @__PURE__ */ React.createElement(Chip, { key: tag, size: "small", label: tag });
-    }), ((_b = entity.metadata.tags) == null ? void 0 : _b.length) && ((_c = entity.metadata.tags) == null ? void 0 : _c.length) > maxTagChips && /* @__PURE__ */ React.createElement(Tooltip, { title: "Drill into the entity to see all of the tags." }, /* @__PURE__ */ React.createElement(Chip, { key: "other-tags", size: "small", label: "..." }))))), !error && /* @__PURE__ */ React.createElement(CardActions, null, entity && /* @__PURE__ */ React.createElement(React.Fragment, null, isUserEntity(entity) && /* @__PURE__ */ React.createElement(UserCardActions, { entity }), isGroupEntity(entity) && /* @__PURE__ */ React.createElement(GroupCardActions, { entity }), /* @__PURE__ */ React.createElement(EntityCardActions, { entity })))))
+    }), ((_b = entity.metadata.tags) == null ? void 0 : _b.length) && ((_c = entity.metadata.tags) == null ? void 0 : _c.length) > maxTagChips && /* @__PURE__ */ React.createElement(Tooltip, { title: "Drill into the entity to see all of the tags." }, /* @__PURE__ */ React.createElement(Chip, { key: "other-tags", size: "small", label: "..." }))))), !error && entity && /* @__PURE__ */ React.createElement(CardActions, null, /* @__PURE__ */ React.createElement(React.Fragment, null, isUserEntity(entity) && /* @__PURE__ */ React.createElement(UserCardActions, { entity }), isGroupEntity(entity) && /* @__PURE__ */ React.createElement(GroupCardActions, { entity }), /* @__PURE__ */ React.createElement(EntityCardActions, { entity }))))
   ));
 };