@backstage/plugin-catalog-react 1.2.4-next.1 → 1.2.4-next.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @backstage/plugin-catalog-react
 
+## 1.2.4-next.2
+
+### Patch Changes
+
+- 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
+- Updated dependencies
+  - @backstage/core-plugin-api@1.3.0-next.1
+  - @backstage/catalog-client@1.3.0-next.2
+  - @backstage/plugin-permission-react@0.4.9-next.1
+  - @backstage/catalog-model@1.1.5-next.1
+  - @backstage/core-components@0.12.3-next.2
+  - @backstage/errors@1.1.4
+  - @backstage/integration@1.4.2-next.0
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.3
+  - @backstage/plugin-catalog-common@1.0.10-next.1
+  - @backstage/plugin-permission-common@0.7.3-next.0
+
 ## 1.2.4-next.1
 
 ### Patch Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.2.4-next.1",
+  "version": "1.2.4-next.2",
   "main": "../dist/index.esm.js",
   "types": "../dist/index.alpha.d.ts"
 }

package/dist/index.alpha.d.ts

@@ -286,6 +286,23 @@ export declare class EntityOwnerFilter implements EntityFilter {
 /** @public */
 export declare const EntityOwnerPicker: () => JSX.Element | null;
 
+/**
+ * Shows an entity popover on hover of a component.
+ *
+ * @public
+ */
+export declare const EntityPeekAheadPopover: (props: EntityPeekAheadPopoverProps) => JSX.Element;
+
+/**
+ * Properties for an entity popover on hover of a component.
+ *
+ * @public
+ */
+export declare type EntityPeekAheadPopoverProps = PropsWithChildren<{
+    entityRef: string;
+    delayTime?: number;
+}>;
+
 /** @public */
 export declare const EntityProcessingStatusPicker: () => JSX.Element;
 

package/dist/index.beta.d.ts

@@ -286,6 +286,23 @@ export declare class EntityOwnerFilter implements EntityFilter {
 /** @public */
 export declare const EntityOwnerPicker: () => JSX.Element | null;
 
+/**
+ * Shows an entity popover on hover of a component.
+ *
+ * @public
+ */
+export declare const EntityPeekAheadPopover: (props: EntityPeekAheadPopoverProps) => JSX.Element;
+
+/**
+ * Properties for an entity popover on hover of a component.
+ *
+ * @public
+ */
+export declare type EntityPeekAheadPopoverProps = PropsWithChildren<{
+    entityRef: string;
+    delayTime?: number;
+}>;
+
 /** @public */
 export declare const EntityProcessingStatusPicker: () => JSX.Element;
 

package/dist/index.d.ts

@@ -286,6 +286,23 @@ export declare class EntityOwnerFilter implements EntityFilter {
 /** @public */
 export declare const EntityOwnerPicker: () => JSX.Element | null;
 
+/**
+ * Shows an entity popover on hover of a component.
+ *
+ * @public
+ */
+export declare const EntityPeekAheadPopover: (props: EntityPeekAheadPopoverProps) => JSX.Element;
+
+/**
+ * Properties for an entity popover on hover of a component.
+ *
+ * @public
+ */
+export declare type EntityPeekAheadPopoverProps = PropsWithChildren<{
+    entityRef: string;
+    delayTime?: number;
+}>;
+
 /** @public */
 export declare const EntityProcessingStatusPicker: () => JSX.Element;
 

package/dist/index.esm.js

@@ -1,14 +1,14 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
-import { createApiRef, createRouteRef, useRouteRef, useApi, AnalyticsContext, identityApiRef, alertApiRef, useApp, configApiRef } from '@backstage/core-plugin-api';
+import { createApiRef, createRouteRef, useRouteRef, useApi, AnalyticsContext, identityApiRef, alertApiRef, useApiHolder, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
 import React, { useState, forwardRef, createContext, useMemo, useCallback, useContext, useEffect, useRef, useLayoutEffect, Fragment } from 'react';
-import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, Tooltip, makeStyles, FormControlLabel, Checkbox, TextField, Toolbar, FormControl, Input, InputAdornment, IconButton, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, Card, CardContent, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
+import { Grid, useMediaQuery, useTheme, Button, Drawer, Box, Typography, Tooltip, makeStyles, FormControlLabel, Checkbox, TextField, IconButton, Card, CardContent, Chip, CardActions, Toolbar, FormControl, Input, InputAdornment, withStyles, DialogContentText, ListItemText as ListItemText$1, ListSubheader as ListSubheader$1, ListItem, ListItemIcon, List, Dialog, DialogTitle, DialogContent, Tabs, Tab, DialogActions, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
 import FilterListIcon from '@material-ui/icons/FilterList';
-import { Link, Progress, ErrorPanel, Select, OverflowTooltip, Table, ResponseErrorPanel, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
-import { DEFAULT_NAMESPACE, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
+import { Link, Progress, ErrorPanel, Select, ResponseErrorPanel, OverflowTooltip, Table, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
+import { DEFAULT_NAMESPACE, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, isUserEntity, isGroupEntity, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
 import { getOrCreateGlobalSingleton, createVersionedContext, createVersionedValueMap, useVersionedContext } from '@backstage/version-bridge';
 import useAsync from 'react-use/lib/useAsync';
-import { compact, isEqual, groupBy, chunk } from 'lodash';
+import { compact, isEqual, groupBy, chunk, debounce } from 'lodash';
 import qs from 'qs';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
@@ -22,6 +22,10 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { Autocomplete, Alert } from '@material-ui/lab';
+import HoverPopover from 'material-ui-popup-state/HoverPopover';
+import { usePopupState, bindHover, bindPopover } from 'material-ui-popup-state/hooks';
+import InfoIcon from '@material-ui/icons/Info';
+import EmailIcon from '@material-ui/icons/Email';
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
 import Star from '@material-ui/icons/Star';
@@ -338,6 +342,7 @@ class EntityTypeFilter {
   constructor(value) {
     this.value = value;
   }
+  // Simplify `string | string[]` for consumers, always returns an array
   getTypes() {
     return Array.isArray(this.value) ? this.value : [this.value];
   }
@@ -725,6 +730,7 @@ function useRelatedEntities(entity, relationFilter) {
     const batchedRelationsByKindAndNamespace = [];
     for (const rs of relationsByKindAndNamespace) {
       batchedRelationsByKindAndNamespace.push({
+        // All relations in a group have the same kind and namespace, so its arbitrary which we pick
         kind: rs[0].target.kind,
         namespace: rs[0].target.namespace,
         nameBatches: chunk(
@@ -958,7 +964,7 @@ const EntityKindPicker = (props) => {
   ));
 };
 
-const useStyles$c = makeStyles(
+const useStyles$d = makeStyles(
   {
     input: {}
   },
@@ -970,7 +976,7 @@ const icon$3 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { f
 const checkedIcon$3 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityLifecyclePicker = () => {
   var _a, _b;
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const {
     updateFilters,
     backendEntities,
@@ -1042,7 +1048,7 @@ const EntityLifecyclePicker = () => {
   )));
 };
 
-const useStyles$b = makeStyles(
+const useStyles$c = makeStyles(
   {
     input: {}
   },
@@ -1054,7 +1060,7 @@ const icon$2 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { f
 const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityOwnerPicker = () => {
   var _a, _b;
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const {
     updateFilters,
     backendEntities,
@@ -1127,6 +1133,133 @@ const EntityOwnerPicker = () => {
   )));
 };
 
+const EntityCardActions = ({ entity }) => {
+  const entityRoute = useRouteRef(entityRouteRef);
+  return /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      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")
+      })
+    },
+    /* @__PURE__ */ React.createElement(InfoIcon, null)
+  );
+};
+
+const EmailCardAction = ({ email }) => {
+  return /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      component: Link,
+      "aria-label": "Email",
+      title: `Email ${email}`,
+      to: `mailto:${email}`,
+      target: "_blank"
+    },
+    /* @__PURE__ */ React.createElement(EmailIcon, null)
+  );
+};
+
+const GroupCardActions = ({ entity }) => {
+  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 UserCardActions = ({ entity }) => {
+  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 useStyles$b = makeStyles(() => {
+  return {
+    trigger: {
+      display: "inline-block"
+    },
+    popoverPaper: {
+      width: "30em"
+    },
+    descriptionTypography: {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: "vertical"
+    }
+  };
+});
+const maxTagChips = 4;
+const EntityPeekAheadPopover = (props) => {
+  var _a, _b, _c;
+  const { entityRef, children, delayTime = 500 } = props;
+  const classes = useStyles$b();
+  const apiHolder = useApiHolder();
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: "entity-peek-ahead"
+  });
+  const compoundEntityRef = parseEntityRef(entityRef);
+  const [isHovered, setIsHovered] = useState(false);
+  const debouncedHandleMouseEnter = debounce(
+    () => setIsHovered(true),
+    delayTime
+  );
+  const [{ loading, error, value: entity }, load] = useAsyncFn(async () => {
+    const catalogApi = apiHolder.get(catalogApiRef);
+    if (catalogApi) {
+      const retrievedEntity = await catalogApi.getEntityByRef(
+        compoundEntityRef
+      );
+      if (!retrievedEntity) {
+        throw new Error(`${compoundEntityRef.name} was not found`);
+      }
+      return retrievedEntity;
+    }
+    return void 0;
+  }, [apiHolder, compoundEntityRef]);
+  const handleOnMouseLeave = () => {
+    setIsHovered(false);
+    debouncedHandleMouseEnter.cancel();
+  };
+  useEffect(() => {
+    if (popupState.isOpen && !entity && !error && !loading) {
+      load();
+    }
+  }, [popupState.isOpen, load, entity, error, loading]);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { onMouseEnter: debouncedHandleMouseEnter }, /* @__PURE__ */ React.createElement("span", { "data-testid": "trigger", ...bindHover(popupState) }, children)), isHovered && /* @__PURE__ */ React.createElement(
+    HoverPopover,
+    {
+      PaperProps: {
+        className: classes.popoverPaper
+      },
+      ...bindPopover(popupState),
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "center"
+      },
+      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(
+      Typography,
+      {
+        className: classes.descriptionTypography,
+        paragraph: true
+      },
+      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 })))))
+  ));
+};
+
 const useStyles$a = makeStyles(
   (_theme) => ({
     searchToolbar: {
@@ -1337,6 +1470,7 @@ const EntityTable = (props) => {
       style: tableStyle,
       emptyContent: emptyContent && /* @__PURE__ */ React.createElement("div", { className: classes.empty }, emptyContent),
       options: {
+        // TODO: Toolbar padding if off compared to other cards, should be: padding: 16px 24px;
         search: false,
         paging: false,
         actionsColumnIndex: -1,
@@ -2248,7 +2382,8 @@ const UserListPicker = (props) => {
   const filterGroups = getFilterGroups(orgName).map((filterGroup) => ({
     ...filterGroup,
     items: filterGroup.items.filter(
-      ({ id }) => ["group", "user"].some((kind) => kind === kindParameter) ? userAndGroupFilterIds.includes(id) : !availableFilters || availableFilters.includes(id)
+      ({ id }) => // TODO: avoid hardcoding kinds here
+      ["group", "user"].some((kind) => kind === kindParameter) ? userAndGroupFilterIds.includes(id) : !availableFilters || availableFilters.includes(id)
     )
   })).filter(({ items }) => !!items.length);
   const { isStarredEntity } = useStarredEntities();
@@ -2449,5 +2584,5 @@ const MockEntityListContextProvider = ({
   return /* @__PURE__ */ React.createElement(EntityListContext.Provider, { value: resolvedValue }, children);
 };
 
-export { AsyncEntityProvider, CatalogFilterLayout, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityProcessingStatusPicker, EntityProvider, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, isOwnerOf, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPermission, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AsyncEntityProvider, CatalogFilterLayout, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityProcessingStatusPicker, EntityProvider, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, isOwnerOf, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPermission, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
 //# sourceMappingURL=index.esm.js.map