@backstage/plugin-catalog-react 1.5.0 → 1.6.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @backstage/plugin-catalog-react
 
+## 1.6.0-next.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.13.1-next.0
+  - @backstage/core-plugin-api@1.5.1
+  - @backstage/plugin-permission-react@0.4.12
+
+## 1.6.0-next.0
+
+### Minor Changes
+
+- 2258dcae970: Added an entity namespace filter and column on the default catalog page.
+
+  If you have a custom version of the catalog page, you can add this filter in your CatalogPage code:
+
+  ```ts
+  <CatalogFilterLayout>
+    <CatalogFilterLayout.Filters>
+      <EntityTypePicker />
+      <UserListPicker initialFilter={initiallySelectedFilter} />
+      <EntityTagPicker />
+      /* if you want namespace picker */
+      <EntityNamespacePicker />
+    </CatalogFilterLayout.Filters>
+    <CatalogFilterLayout.Content>
+      <CatalogTable columns={columns} actions={actions} />
+    </CatalogFilterLayout.Content>
+  </CatalogFilterLayout>
+  ```
+
+  The namespace column can be added using `createNamespaceColumn();`. This is only needed if you customized the columns for CatalogTable.
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/integration@1.4.5-next.0
+  - @backstage/core-components@0.13.0
+  - @backstage/core-plugin-api@1.5.1
+  - @backstage/catalog-client@1.4.1
+  - @backstage/catalog-model@1.3.0
+  - @backstage/errors@1.1.5
+  - @backstage/theme@0.2.19
+  - @backstage/types@1.0.2
+  - @backstage/version-bridge@1.0.4
+  - @backstage/plugin-catalog-common@1.0.13
+  - @backstage/plugin-permission-common@0.7.5
+  - @backstage/plugin-permission-react@0.4.12
+
 ## 1.5.0
 
 ### Minor Changes

package/alpha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-catalog-react",
-  "version": "1.5.0",
+  "version": "1.6.0-next.1",
   "main": "../dist/alpha.esm.js",
   "module": "../dist/alpha.esm.js",
   "types": "../dist/alpha.d.ts"

package/dist/index.d.ts

@@ -330,6 +330,11 @@ type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
 /** @public */
 declare const EntityProcessingStatusPicker: () => JSX.Element;
 
+/** @public */
+type CatalogReactEntityNamespacePickerClassKey = 'input';
+/** @public */
+declare const EntityNamespacePicker: () => JSX.Element;
+
 /** @public */
 type EntityLoadingStatus<TEntity extends Entity = Entity> = {
     entity?: TEntity;
@@ -453,6 +458,16 @@ declare class EntityLifecycleFilter implements EntityFilter {
     filterEntity(entity: Entity): boolean;
     toQueryValue(): string[];
 }
+/**
+ * Filters entities to those within the given namespace(s).
+ * @public
+ */
+declare class EntityNamespaceFilter implements EntityFilter {
+    readonly values: string[];
+    constructor(values: string[]);
+    filterEntity(entity: Entity): boolean;
+    toQueryValue(): string[];
+}
 /**
  * Filters entities based on whatever the user has starred or owns them.
  * @public
@@ -495,6 +510,7 @@ type DefaultEntityFilters = {
     text?: EntityTextFilter;
     orphan?: EntityOrphanFilter;
     error?: EntityErrorFilter;
+    namespace?: EntityNamespaceFilter;
 };
 /** @public */
 type EntityListContextProps<EntityFilters extends DefaultEntityFilters = DefaultEntityFilters> = {
@@ -651,4 +667,4 @@ type EntitySourceLocation = {
 /** @public */
 declare function getEntitySourceLocation(entity: Entity, scmIntegrationsApi: ScmIntegrationRegistry): EntitySourceLocation | undefined;
 
-export { AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { AsyncEntityProvider, AsyncEntityProviderProps, BackstageOverrides, CatalogFilterLayout, CatalogReactComponentsNameToClassKey, CatalogReactEntityLifecyclePickerClassKey, CatalogReactEntityNamespacePickerClassKey, CatalogReactEntityOwnerPickerClassKey, CatalogReactEntityProcessingStatusPickerClassKey, CatalogReactEntitySearchBarClassKey, CatalogReactEntityTagPickerClassKey, CatalogReactUserListPickerClassKey, DefaultEntityFilters, EntityErrorFilter, EntityFilter, EntityKindFilter, EntityKindPicker, EntityKindPickerProps, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListContextProps, EntityListProvider, EntityLoadingStatus, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityPeekAheadPopoverProps, EntityProcessingStatusPicker, EntityProvider, EntityProviderProps, EntityRefLink, EntityRefLinkProps, EntityRefLinks, EntityRefLinksProps, EntitySearchBar, EntitySourceLocation, EntityTable, EntityTableProps, EntityTagFilter, EntityTagPicker, EntityTagPickerProps, EntityTextFilter, EntityTypeFilter, EntityTypePicker, EntityTypePickerProps, FavoriteEntity, FavoriteEntityProps, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, StarredEntitiesApi, UnregisterEntityDialog, UnregisterEntityDialogProps, UserListFilter, UserListFilterKind, UserListPicker, UserListPickerProps, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntityRelations, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useAsyncEntity, useEntity, useEntityList, useEntityOwnership, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };

package/dist/index.esm.js

@@ -255,6 +255,17 @@ class EntityLifecycleFilter {
     return this.values;
   }
 }
+class EntityNamespaceFilter {
+  constructor(values) {
+    this.values = values;
+  }
+  filterEntity(entity) {
+    return this.values.some((v) => entity.metadata.namespace === v);
+  }
+  toQueryValue() {
+    return this.values;
+  }
+}
 class UserListFilter {
   constructor(value, isOwnedEntity, isStarredEntity) {
     this.value = value;
@@ -712,7 +723,7 @@ const EntityKindPicker = (props) => {
   ));
 };
 
-const useStyles$e = makeStyles(
+const useStyles$f = makeStyles(
   {
     input: {}
   },
@@ -725,7 +736,7 @@ const checkedIcon$3 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSi
 const EntityLifecyclePicker = (props) => {
   var _a, _b;
   const { initialFilter = [] } = props;
-  const classes = useStyles$e();
+  const classes = useStyles$f();
   const {
     updateFilters,
     backendEntities,
@@ -837,7 +848,7 @@ function humanizeEntity(entity, opts) {
   return humanizeEntityRef(entity, opts);
 }
 
-const useStyles$d = makeStyles(
+const useStyles$e = makeStyles(
   {
     input: {}
   },
@@ -849,7 +860,7 @@ const icon$2 = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { f
 const checkedIcon$2 = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityOwnerPicker = () => {
   var _a, _b, _c;
-  const classes = useStyles$d();
+  const classes = useStyles$e();
   const {
     updateFilters,
     backendEntities,
@@ -1139,7 +1150,7 @@ const UserCardActions = (props) => {
   return email ? /* @__PURE__ */ React.createElement(EmailCardAction, { email }) : null;
 };
 
-const useStyles$c = makeStyles(() => {
+const useStyles$d = makeStyles(() => {
   return {
     popoverPaper: {
       width: "30em"
@@ -1157,7 +1168,7 @@ const maxTagChips = 4;
 const EntityPeekAheadPopover = (props) => {
   var _a, _b, _c;
   const { entityRef, children, delayTime = 500 } = props;
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const apiHolder = useApiHolder();
   const popupState = usePopupState({
     variant: "popover",
@@ -1226,7 +1237,7 @@ const EntityPeekAheadPopover = (props) => {
   ));
 };
 
-const useStyles$b = makeStyles(
+const useStyles$c = makeStyles(
   (_theme) => ({
     searchToolbar: {
       paddingLeft: 0,
@@ -1240,7 +1251,7 @@ const useStyles$b = makeStyles(
 );
 const EntitySearchBar = () => {
   var _a, _b;
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const { filters, updateFilters } = useEntityList();
   const [search, setSearch] = useState((_b = (_a = filters.text) == null ? void 0 : _a.value) != null ? _b : "");
   useDebounce(
@@ -1405,7 +1416,7 @@ const componentEntityColumns = [
   columnFactories.createMetadataDescriptionColumn()
 ];
 
-const useStyles$a = makeStyles((theme) => ({
+const useStyles$b = makeStyles((theme) => ({
   empty: {
     padding: theme.spacing(2),
     display: "flex",
@@ -1420,7 +1431,7 @@ const EntityTable = (props) => {
     variant = "gridItem",
     columns
   } = props;
-  const classes = useStyles$a();
+  const classes = useStyles$b();
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -1469,7 +1480,7 @@ const EntityAutocompletePickerOption = memo((props) => {
   );
 });
 
-const useStyles$9 = makeStyles(
+const useStyles$a = makeStyles(
   {
     input: {}
   },
@@ -1478,7 +1489,7 @@ const useStyles$9 = makeStyles(
   }
 );
 function EntityAutocompletePickerInput(params) {
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   return /* @__PURE__ */ React.createElement(
     TextField,
     {
@@ -1532,6 +1543,8 @@ function EntityAutocompletePicker(props) {
   if (filter && typeof filter === "object" && !("values" in filter) || !availableOptions.length) {
     return null;
   }
+  if (availableOptions.length <= 1)
+    return null;
   return /* @__PURE__ */ React.createElement(Box, { pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "button", component: "label" }, label, /* @__PURE__ */ React.createElement(
     Autocomplete,
     {
@@ -1556,12 +1569,12 @@ function EntityAutocompletePicker(props) {
   )));
 }
 
-const useStyles$8 = makeStyles(
+const useStyles$9 = makeStyles(
   { input: {} },
   { name: "CatalogReactEntityTagPicker" }
 );
 const EntityTagPicker = (props) => {
-  const classes = useStyles$8();
+  const classes = useStyles$9();
   return /* @__PURE__ */ React.createElement(
     EntityAutocompletePicker,
     {
@@ -1667,7 +1680,7 @@ function EntityKindIcon(props) {
   return /* @__PURE__ */ React.createElement(Icon, { ...otherProps });
 }
 
-const useStyles$7 = makeStyles((theme) => ({
+const useStyles$8 = makeStyles((theme) => ({
   node: {
     fill: theme.palette.grey[300],
     stroke: theme.palette.grey[300],
@@ -1721,7 +1734,7 @@ function useAncestry(root) {
   };
 }
 function CustomNode({ node }) {
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   const navigate = useNavigate();
   const entityRoute = useRouteRef(entityRouteRef);
   const [width, setWidth] = useState(0);
@@ -1816,7 +1829,7 @@ function AncestryPage(props) {
   )));
 }
 
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$7 = makeStyles((theme) => ({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -1833,7 +1846,7 @@ const useStyles$6 = makeStyles((theme) => ({
   }
 }));
 function ListItemText(props) {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   return /* @__PURE__ */ React.createElement(
     ListItemText$1,
     {
@@ -1844,7 +1857,7 @@ function ListItemText(props) {
   );
 }
 function ListSubheader(props) {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   return /* @__PURE__ */ React.createElement(ListSubheader$1, { className: classes.monospace }, props.children);
 }
 function Container(props) {
@@ -1871,11 +1884,11 @@ function KeyValueListItem(props) {
   ));
 }
 function HelpIcon(props) {
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   return /* @__PURE__ */ React.createElement(Link, { to: props.to, className: classes.helpIcon }, /* @__PURE__ */ React.createElement(HelpOutlineIcon, { fontSize: "inherit" }));
 }
 
-const useStyles$5 = makeStyles({
+const useStyles$6 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -1955,7 +1968,7 @@ function Contents$1(props) {
   ));
 }
 function ColocatedPage(props) {
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogContentText, { variant: "h2" }, "Colocated"), /* @__PURE__ */ React.createElement(DialogContentText, null, "These are the entities that are colocated with this entity - as in, they originated from the same data source (e.g. came from the same YAML file), or from the same origin (e.g. the originally registered URL)."), /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(Contents$1, { entity: props.entity })));
 }
 
@@ -1976,7 +1989,7 @@ function JsonPage(props) {
   ))));
 }
 
-const useStyles$4 = makeStyles({
+const useStyles$5 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column"
@@ -1984,7 +1997,7 @@ const useStyles$4 = makeStyles({
 });
 function OverviewPage(props) {
   var _a, _b;
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   const {
     apiVersion,
     kind,
@@ -2039,7 +2052,7 @@ function YamlPage(props) {
   ))));
 }
 
-const useStyles$3 = makeStyles((theme) => ({
+const useStyles$4 = makeStyles((theme) => ({
   fullHeightDialog: {
     height: "calc(100% - 64px)"
   },
@@ -2060,7 +2073,7 @@ const useStyles$3 = makeStyles((theme) => ({
 }));
 function TabPanel(props) {
   const { children, value, index, ...other } = props;
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -2081,7 +2094,7 @@ function a11yProps(index) {
   };
 }
 function InspectEntityDialog(props) {
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   const [activeTab, setActiveTab] = React.useState(0);
   useEffect(() => {
     setActiveTab(0);
@@ -2185,7 +2198,7 @@ function useUnregisterEntityDialogState(entity) {
   };
 }
 
-const useStyles$2 = makeStyles({
+const useStyles$3 = makeStyles({
   advancedButton: {
     fontSize: "0.7em"
   },
@@ -2201,7 +2214,7 @@ const Contents = ({
   var _a;
   const alertApi = useApi(alertApiRef);
   const configApi = useApi(configApiRef);
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const state = useUnregisterEntityDialogState(entity);
   const [showDelete, setShowDelete] = useState(false);
   const [busy, setBusy] = useState(false);
@@ -2319,7 +2332,7 @@ const UnregisterEntityDialog = (props) => {
   return /* @__PURE__ */ React.createElement(Dialog, { open, onClose }, /* @__PURE__ */ React.createElement(DialogTitle, { id: "responsive-dialog-title" }, "Are you sure you want to unregister this entity?"), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Contents, { entity, onConfirm, onClose })));
 };
 
-const useStyles$1 = makeStyles(
+const useStyles$2 = makeStyles(
   (theme) => ({
     root: {
       backgroundColor: "rgba(0, 0, 0, .11)",
@@ -2378,7 +2391,7 @@ function getFilterGroups(orgName) {
 const UserListPicker = (props) => {
   var _a;
   const { initialFilter, availableFilters } = props;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const configApi = useApi(configApiRef);
   const orgName = (_a = configApi.getOptionalString("organization.name")) != null ? _a : "Company";
   const {
@@ -2487,7 +2500,7 @@ const UserListPicker = (props) => {
   }))))));
 };
 
-const useStyles = makeStyles(
+const useStyles$1 = makeStyles(
   {
     input: {}
   },
@@ -2498,7 +2511,7 @@ const useStyles = makeStyles(
 const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
 const EntityProcessingStatusPicker = () => {
-  const classes = useStyles();
+  const classes = useStyles$1();
   const { updateFilters } = useEntityList();
   const [selectedAdvancedItems, setSelectedAdvancedItems] = useState(
     []
@@ -2555,6 +2568,28 @@ const EntityProcessingStatusPicker = () => {
   )));
 };
 
+const useStyles = makeStyles(
+  {
+    input: {}
+  },
+  {
+    name: "CatalogReactEntityNamespacePicker"
+  }
+);
+const EntityNamespacePicker = () => {
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(
+    EntityAutocompletePicker,
+    {
+      label: "Namespace",
+      name: "namespace",
+      path: "metadata.namespace",
+      Filter: EntityNamespaceFilter,
+      InputProps: { className: classes.input }
+    }
+  );
+};
+
 function MockEntityListContextProvider(props) {
   var _a;
   const { children, value } = props;
@@ -2594,5 +2629,5 @@ function MockEntityListContextProvider(props) {
   return /* @__PURE__ */ React.createElement(EntityListContext.Provider, { value: resolvedValue }, children);
 }
 
-export { CatalogFilterLayout, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityProcessingStatusPicker, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useEntityList, useEntityOwnership, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
+export { CatalogFilterLayout, EntityErrorFilter, EntityKindFilter, EntityKindPicker, EntityLifecycleFilter, EntityLifecyclePicker, EntityListContext, EntityListProvider, EntityNamespaceFilter, EntityNamespacePicker, EntityOrphanFilter, EntityOwnerFilter, EntityOwnerPicker, EntityPeekAheadPopover, EntityProcessingStatusPicker, EntityRefLink, EntityRefLinks, EntitySearchBar, EntityTable, EntityTagFilter, EntityTagPicker, EntityTextFilter, EntityTypeFilter, EntityTypePicker, FavoriteEntity, InspectEntityDialog, MockEntityListContextProvider, MockStarredEntitiesApi, UnregisterEntityDialog, UserListFilter, UserListPicker, catalogApiRef, columnFactories, entityRouteParams, entityRouteRef, getEntitySourceLocation, humanizeEntityRef, starredEntitiesApiRef, useEntityList, useEntityOwnership, useEntityTypeFilter, useRelatedEntities, useStarredEntities, useStarredEntity };
 //# sourceMappingURL=index.esm.js.map