@backstage/plugin-catalog-react 0.9.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @backstage/plugin-catalog-react
 
+## 1.0.0
+
+### Major Changes
+
+- b58c70c223: This package has been promoted to v1.0! To understand how this change affects the package, please check out our [versioning policy](https://backstage.io/docs/overview/versioning-policy).
+
+### Minor Changes
+
+- f7fb7295e6: **BREAKING**: Removed the deprecated `favoriteEntityTooltip` and `favoriteEntityIcon` functions.
+- 4cd92028b8: **BREAKING**: The following deprecated annotation reading helper functions were removed:
+
+  - `getEntityMetadataViewUrl`, use `entity.metadata.annotations?.[ANNOTATION_VIEW_URL]` instead.
+  - `getEntityMetadataEditUrl`, use `entity.metadata.annotations?.[ANNOTATION_EDIT_URL]` instead.
+
+- 1f2757bb07: **BREAKING**: The `useEntity` hook no longer returns loading or error states, and will throw an error if the entity is not immediately available. In practice this means that `useEntity` can only be used in contexts where the entity is guaranteed to have been loaded, for example inside an `EntityLayout`. To access the loading state of the entity, use `useAsyncEntity` instead.
+- 0f3520d499: **BREAKING**: Removed the deprecated `formatEntityRefTitle`, use `humanizeEntityRef` instead.
+
+### Patch Changes
+
+- a422d7ce5e: chore(deps): bump `@testing-library/react` from 11.2.6 to 12.1.3
+- c689d7a94c: Added `CatalogFilterLayout`, which replaces `FilteredEntityLayout` from `@backstage/plugin-catalog`, as well as `FilterContainer` and `EntityListContainer`. It is used like this:
+
+  ```tsx
+  <CatalogFilterLayout>
+    <CatalogFilterLayout.Filters>
+      {/* filter drawer, for example <EntityTypePicker /> and friends */}
+    </CatalogFilterLayout.Filters>
+    <CatalogFilterLayout.Content>
+      {/* content view, for example a <CatalogTable /> */}
+    </CatalogFilterLayout.Content>
+  </CatalogFilterLayout>
+  ```
+
+- Updated dependencies
+  - @backstage/core-components@0.9.2
+  - @backstage/core-plugin-api@1.0.0
+  - @backstage/version-bridge@1.0.0
+  - @backstage/plugin-permission-react@0.3.4
+  - @backstage/catalog-model@1.0.0
+  - @backstage/integration@1.0.0
+  - @backstage/catalog-client@1.0.0
+  - @backstage/errors@1.0.0
+  - @backstage/types@1.0.0
+  - @backstage/plugin-permission-common@0.5.3
+
 ## 0.9.0
 
 ### Minor Changes

package/alpha/package.json

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

package/dist/index.alpha.d.ts

@@ -62,6 +62,19 @@ export { CatalogApi }
  */
 export declare const catalogApiRef: ApiRef<CatalogApi>;
 
+/** @public */
+export declare const CatalogFilterLayout: {
+    (props: {
+        children: React_2.ReactNode;
+    }): JSX.Element;
+    Filters: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+    Content: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+};
+
 /** @public */
 export declare type CatalogReactComponentsNameToClassKey = {
     CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
@@ -432,37 +445,11 @@ export declare interface EntityTypePickerProps {
  */
 export declare const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
-
 /** @public */
 export declare type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
     entity: Entity;
 };
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityTooltip: (isStarred: boolean) => "Remove from favorites" | "Add to favorites";
-
-/** @public @deprecated please use {@link humanizeEntityRef} instead */
-export declare const formatEntityRefTitle: typeof humanizeEntityRef;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_EDIT_URL] instead.
- */
-export declare function getEntityMetadataEditUrl(entity: Entity): string | undefined;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_VIEW_URL] instead. */
-export declare function getEntityMetadataViewUrl(entity: Entity): string | undefined;
-
 /**
  * Get the related entity references.
  *
@@ -571,12 +558,6 @@ export declare function useAsyncEntity<TEntity extends Entity = Entity>(): Entit
  */
 export declare function useEntity<TEntity extends Entity = Entity>(): {
     entity: TEntity;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    loading: boolean;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    error?: Error;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    refresh?: VoidFunction;
 };
 
 /**

package/dist/index.beta.d.ts

@@ -62,6 +62,19 @@ export { CatalogApi }
  */
 export declare const catalogApiRef: ApiRef<CatalogApi>;
 
+/** @public */
+export declare const CatalogFilterLayout: {
+    (props: {
+        children: React_2.ReactNode;
+    }): JSX.Element;
+    Filters: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+    Content: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+};
+
 /** @public */
 export declare type CatalogReactComponentsNameToClassKey = {
     CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
@@ -432,37 +445,11 @@ export declare interface EntityTypePickerProps {
  */
 export declare const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
-
 /** @public */
 export declare type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
     entity: Entity;
 };
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityTooltip: (isStarred: boolean) => "Remove from favorites" | "Add to favorites";
-
-/** @public @deprecated please use {@link humanizeEntityRef} instead */
-export declare const formatEntityRefTitle: typeof humanizeEntityRef;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_EDIT_URL] instead.
- */
-export declare function getEntityMetadataEditUrl(entity: Entity): string | undefined;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_VIEW_URL] instead. */
-export declare function getEntityMetadataViewUrl(entity: Entity): string | undefined;
-
 /**
  * Get the related entity references.
  *
@@ -562,12 +549,6 @@ export declare function useAsyncEntity<TEntity extends Entity = Entity>(): Entit
  */
 export declare function useEntity<TEntity extends Entity = Entity>(): {
     entity: TEntity;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    loading: boolean;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    error?: Error;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    refresh?: VoidFunction;
 };
 
 /**

package/dist/index.d.ts

@@ -62,6 +62,19 @@ export { CatalogApi }
  */
 export declare const catalogApiRef: ApiRef<CatalogApi>;
 
+/** @public */
+export declare const CatalogFilterLayout: {
+    (props: {
+        children: React_2.ReactNode;
+    }): JSX.Element;
+    Filters: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+    Content: (props: {
+        children: React_2.ReactNode;
+    }) => JSX.Element;
+};
+
 /** @public */
 export declare type CatalogReactComponentsNameToClassKey = {
     CatalogReactUserListPicker: CatalogReactUserListPickerClassKey;
@@ -432,37 +445,11 @@ export declare interface EntityTypePickerProps {
  */
 export declare const FavoriteEntity: (props: FavoriteEntityProps) => JSX.Element;
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityIcon: (isStarred: boolean) => JSX.Element;
-
 /** @public */
 export declare type FavoriteEntityProps = ComponentProps<typeof IconButton> & {
     entity: Entity;
 };
 
-/**
- * @public
- * @deprecated due to low utility value.
- */
-export declare const favoriteEntityTooltip: (isStarred: boolean) => "Remove from favorites" | "Add to favorites";
-
-/** @public @deprecated please use {@link humanizeEntityRef} instead */
-export declare const formatEntityRefTitle: typeof humanizeEntityRef;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_EDIT_URL] instead.
- */
-export declare function getEntityMetadataEditUrl(entity: Entity): string | undefined;
-
-/**
- * @public
- * @deprecated use entity.metadata.annotations?.[ANNOTATION_VIEW_URL] instead. */
-export declare function getEntityMetadataViewUrl(entity: Entity): string | undefined;
-
 /**
  * Get the related entity references.
  *
@@ -562,12 +549,6 @@ export declare function useAsyncEntity<TEntity extends Entity = Entity>(): Entit
  */
 export declare function useEntity<TEntity extends Entity = Entity>(): {
     entity: TEntity;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    loading: boolean;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    error?: Error;
-    /** @deprecated use {@link useAsyncEntity} instead */
-    refresh?: VoidFunction;
 };
 
 /**

package/dist/index.esm.js

@@ -1,7 +1,9 @@
 export { CATALOG_FILTER_EXISTS } from '@backstage/catalog-client';
 import { createApiRef, useApi, createRouteRef, useRouteRef, identityApiRef, alertApiRef, useApp, configApiRef } from '@backstage/core-plugin-api';
 import ObservableImpl from 'zen-observable';
-import React, { createContext, useState, useMemo, useCallback, useContext, forwardRef, useEffect, useRef, useLayoutEffect, Fragment } from 'react';
+import React, { useState, createContext, useMemo, useCallback, useContext, forwardRef, 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 FilterListIcon from '@material-ui/icons/FilterList';
 import { Alert, Autocomplete } from '@material-ui/lab';
 import { createVersionedContext, createVersionedValueMap, useVersionedContext, getOrCreateGlobalSingleton } from '@backstage/version-bridge';
 import { compact, isEqual, groupBy, chunk } from 'lodash';
@@ -10,12 +12,11 @@ import { useLocation, useNavigate } from 'react-router';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import useMountedState from 'react-use/lib/useMountedState';
-import { ANNOTATION_VIEW_URL, ANNOTATION_EDIT_URL, parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
+import { parseEntityRef, ANNOTATION_SOURCE_LOCATION, parseLocationRef, RELATION_MEMBER_OF, getCompoundEntityRef, stringifyEntityRef, RELATION_OWNED_BY, DEFAULT_NAMESPACE, RELATION_PART_OF, ANNOTATION_LOCATION, ANNOTATION_ORIGIN_LOCATION } from '@backstage/catalog-model';
 import useAsync from 'react-use/lib/useAsync';
 import isEqual$1 from 'lodash/isEqual';
 import sortBy from 'lodash/sortBy';
 import { Link, OverflowTooltip, Table, Select, Progress, ResponseErrorPanel, DependencyGraph, DependencyGraphTypes, CodeSnippet } from '@backstage/core-components';
-import { Tooltip, makeStyles, Box, Typography, 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, Button, Divider, MenuItem, ListItemSecondaryAction } from '@material-ui/core';
 import useObservable from 'react-use/lib/useObservable';
 import { usePermission } from '@backstage/plugin-permission-react';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -69,6 +70,48 @@ class MockStarredEntitiesApi {
   }
 }
 
+const Filters = (props) => {
+  const isMidSizeScreen = useMediaQuery((theme2) => theme2.breakpoints.down("md"));
+  const theme = useTheme();
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
+  return isMidSizeScreen ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Button, {
+    style: { marginTop: theme.spacing(1), marginLeft: theme.spacing(1) },
+    onClick: () => setFilterDrawerOpen(true),
+    startIcon: /* @__PURE__ */ React.createElement(FilterListIcon, null)
+  }, "Filters"), /* @__PURE__ */ React.createElement(Drawer, {
+    open: filterDrawerOpen,
+    onClose: () => setFilterDrawerOpen(false),
+    anchor: "left",
+    disableAutoFocus: true,
+    keepMounted: true,
+    variant: "temporary"
+  }, /* @__PURE__ */ React.createElement(Box, {
+    m: 2
+  }, /* @__PURE__ */ React.createElement(Typography, {
+    variant: "h6",
+    component: "h2",
+    style: { marginBottom: theme.spacing(1) }
+  }, "Filters"), props.children))) : /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    lg: 2
+  }, props.children);
+};
+const Content = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, {
+    item: true,
+    xs: 12,
+    lg: 10
+  }, props.children);
+};
+const CatalogFilterLayout = (props) => {
+  return /* @__PURE__ */ React.createElement(Grid, {
+    container: true,
+    style: { position: "relative" }
+  }, props.children);
+};
+CatalogFilterLayout.Filters = Filters;
+CatalogFilterLayout.Content = Content;
+
 const NewEntityContext = createVersionedContext("entity-context");
 const AsyncEntityProvider = ({
   children,
@@ -99,10 +142,9 @@ function useEntity() {
     throw new Error("EntityContext v1 not available");
   }
   if (!value.entity) {
-    console.warn("DEPRECATION: useEntity hook is being called outside of an EntityLayout where the entity has not been loaded. If this is intentional, please use useAsyncEntity instead. This warning will be replaced with an error in future releases.");
+    throw new Error("useEntity hook is being called outside of an EntityLayout where the entity has not been loaded. If this is intentional, please use useAsyncEntity instead.");
   }
-  const { entity, loading, error, refresh } = value;
-  return { entity, loading, error, refresh };
+  return { entity: value.entity };
 }
 function useAsyncEntity() {
   const versionedHolder = useVersionedContext("entity-context");
@@ -129,15 +171,6 @@ function reduceEntityFilters(filters) {
   return (entity) => filters.every((filter) => !filter.filterEntity || filter.filterEntity(entity));
 }
 
-function getEntityMetadataViewUrl(entity) {
-  var _a;
-  return (_a = entity.metadata.annotations) == null ? void 0 : _a[ANNOTATION_VIEW_URL];
-}
-function getEntityMetadataEditUrl(entity) {
-  var _a;
-  return (_a = entity.metadata.annotations) == null ? void 0 : _a[ANNOTATION_EDIT_URL];
-}
-
 function getEntityRelations(entity, relationType, filter) {
   var _a;
   let entityNames = ((_a = entity == null ? void 0 : entity.relations) == null ? void 0 : _a.filter((r) => r.type === relationType).map((r) => parseEntityRef(r.targetRef))) || [];
@@ -278,7 +311,6 @@ function entityRouteParams(entity) {
   };
 }
 
-const formatEntityRefTitle = humanizeEntityRef;
 function humanizeEntityRef(entityRef, opts) {
   const defaultKind = opts == null ? void 0 : opts.defaultKind;
   let kind;
@@ -609,7 +641,11 @@ function useEntityOwnership() {
 }
 
 function useEntityPermission(permission) {
-  const { entity, loading: loadingEntity, error: entityError } = useEntity();
+  const {
+    entity,
+    loading: loadingEntity,
+    error: entityError
+  } = useAsyncEntity();
   const {
     allowed,
     loading: loadingPermission,
@@ -1083,8 +1119,6 @@ const YellowStar = withStyles({
     color: "#f3ba37"
   }
 })(Star);
-const favoriteEntityTooltip = (isStarred) => isStarred ? "Remove from favorites" : "Add to favorites";
-const favoriteEntityIcon = (isStarred) => isStarred ? /* @__PURE__ */ React.createElement(YellowStar, null) : /* @__PURE__ */ React.createElement(StarBorder, null);
 const FavoriteEntity = (props) => {
   const { toggleStarredEntity, isStarredEntity } = useStarredEntity(props.entity);
   return /* @__PURE__ */ React.createElement(IconButton, {
@@ -2022,5 +2056,5 @@ const MockEntityListContextProvider = ({
   }, children);
 };
 
-export { AsyncEntityProvider, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOwnerFilter, EntityOwnerPicker, EntityProvider, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, favoriteEntityIcon, favoriteEntityTooltip, formatEntityRefTitle, getEntityMetadataEditUrl, getEntityMetadataViewUrl, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, isOwnerOf, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityPermission, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AsyncEntityProvider, CatalogFilterLayout, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOwnerFilter, EntityOwnerPicker, 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