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

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @backstage/plugin-catalog-react
 
+## 1.3.0-next.0
+
+### Minor Changes
+
+- 929e1afe1b: Add `initialFilter` prop to EntityLifecyclePicker. This allows you to set an initial lifecycle for the catalog.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-model@1.1.6-next.0
+  - @backstage/catalog-client@1.3.1-next.0
+  - @backstage/plugin-catalog-common@1.0.11-next.0
+
+## 1.2.4
+
+### Patch Changes
+
+- 37426f6f5e: Fixed bug in `EntityTagPicker` that filtered on unavailable tags for the selected kind.
+- 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@1.1.5
+  - @backstage/catalog-client@1.3.0
+  - @backstage/core-components@0.12.3
+  - @backstage/core-plugin-api@1.3.0
+  - @backstage/plugin-permission-react@0.4.9
+  - @backstage/errors@1.1.4
+  - @backstage/integration@1.4.2
+  - @backstage/theme@0.2.16
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.3
+  - @backstage/plugin-catalog-common@1.0.10
+  - @backstage/plugin-permission-common@0.7.3
+
 ## 1.2.4-next.2
 
 ### Patch Changes

package/alpha/package.json

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

package/dist/index.alpha.d.ts

@@ -212,7 +212,9 @@ export declare class EntityLifecycleFilter implements EntityFilter {
 }
 
 /** @public */
-export declare const EntityLifecyclePicker: () => JSX.Element | null;
+export declare const EntityLifecyclePicker: (props: {
+    initialFilter?: string[];
+}) => JSX.Element | null;
 
 /**
  * Creates new context for entity listing and filtering.

package/dist/index.beta.d.ts

@@ -212,7 +212,9 @@ export declare class EntityLifecycleFilter implements EntityFilter {
 }
 
 /** @public */
-export declare const EntityLifecyclePicker: () => JSX.Element | null;
+export declare const EntityLifecyclePicker: (props: {
+    initialFilter?: string[];
+}) => JSX.Element | null;
 
 /**
  * Creates new context for entity listing and filtering.

package/dist/index.d.ts

@@ -212,7 +212,9 @@ export declare class EntityLifecycleFilter implements EntityFilter {
 }
 
 /** @public */
-export declare const EntityLifecyclePicker: () => JSX.Element | null;
+export declare const EntityLifecyclePicker: (props: {
+    initialFilter?: string[];
+}) => JSX.Element | null;
 
 /**
  * Creates new context for entity listing and filtering.

package/dist/index.esm.js

@@ -974,8 +974,9 @@ const useStyles$d = makeStyles(
 );
 const icon$3 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon$3 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-const EntityLifecyclePicker = () => {
+const EntityLifecyclePicker = (props) => {
   var _a, _b;
+  const { initialFilter = [] } = props;
   const classes = useStyles$d();
   const {
     updateFilters,
@@ -988,7 +989,7 @@ const EntityLifecyclePicker = () => {
     [lifecyclesParameter]
   );
   const [selectedLifecycles, setSelectedLifecycles] = useState(
-    queryParamLifecycles.length ? queryParamLifecycles : (_b = (_a = filters.lifecycles) == null ? void 0 : _a.values) != null ? _b : []
+    queryParamLifecycles.length ? queryParamLifecycles : (_b = (_a = filters.lifecycles) == null ? void 0 : _a.values) != null ? _b : initialFilter
   );
   useEffect(() => {
     if (queryParamLifecycles.length) {
@@ -1133,7 +1134,7 @@ const EntityOwnerPicker = () => {
   )));
 };
 
-const EntityCardActions = ({ entity }) => {
+const EntityCardActions = (props) => {
   const entityRoute = useRouteRef(entityRouteRef);
   return /* @__PURE__ */ React.createElement(
     IconButton,
@@ -1141,45 +1142,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 +1197,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();
@@ -1230,7 +1222,15 @@ const EntityPeekAheadPopover = (props) => {
       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(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { component: "span", onMouseEnter: debouncedHandleMouseEnter }, /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      component: "span",
+      "data-testid": "trigger",
+      ...bindHover(popupState)
+    },
+    children
+  )), isHovered && /* @__PURE__ */ React.createElement(
     HoverPopover,
     {
       PaperProps: {
@@ -1247,7 +1247,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,
@@ -1256,7 +1256,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 }))))
   ));
 };