From be26d95141bd883874f9f4f787da50bcb385251e Mon Sep 17 00:00:00 2001
From: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
Date: Mon, 20 Jun 2022 12:19:11 -0500
Subject: [PATCH 1/3] Added EntityAdvancedPicker
Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
.changeset/wicked-ladybugs-argue.md | 43 +++++
plugins/catalog-react/api-report.md | 27 ++++
.../EntityAdvancedPicker.test.tsx | 152 ++++++++++++++++++
.../EntityAdvancedPicker.tsx | 109 +++++++++++++
.../components/EntityAdvancedPicker/index.ts | 17 ++
plugins/catalog-react/src/components/index.ts | 1 +
plugins/catalog-react/src/filters.test.ts | 55 ++++++-
plugins/catalog-react/src/filters.ts | 31 +++-
.../src/hooks/useEntityListProvider.tsx | 4 +
.../src/overridableComponents.ts | 2 +
.../CatalogPage/DefaultCatalogPage.tsx | 2 +
11 files changed, 440 insertions(+), 3 deletions(-)
create mode 100644 .changeset/wicked-ladybugs-argue.md
create mode 100644 plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
create mode 100644 plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
create mode 100644 plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts
diff --git a/.changeset/wicked-ladybugs-argue.md b/.changeset/wicked-ladybugs-argue.md
new file mode 100644
index 0000000000..d75f250689
--- /dev/null
+++ b/.changeset/wicked-ladybugs-argue.md
@@ -0,0 +1,43 @@
+---
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-catalog-react': patch
+---
+
+Added new `EntityAdvancedPicker` that will filter for entities with orphans and/or errors.
+
+If you are using the default Catalog page this picker will be added automatically. For those who have customized their Catalog page you'll need to add this manually by doing something like this:
+
+```diff
+...
+import {
+ CatalogFilterLayout,
+ EntityTypePicker,
+ UserListPicker,
+ EntityTagPicker
++ EntityAdvancedPicker,
+} from '@backstage/plugin-catalog-react';
+...
+export const CustomCatalogPage = ({
+ columns,
+ actions,
+ initiallySelectedFilter = 'owned',
+}: CatalogPageProps) => {
+ return (
+ ...
+
+
+
+
+
+
+
++
+
+
+
+
+
+
+ ...
+};
+```
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 285ecafd70..7f3d7a5f3c 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -78,8 +78,12 @@ export type CatalogReactComponentsNameToClassKey = {
CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey;
CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
+ CatalogReactEntityAdvancedPicker: CatalogReactEntityAdvancedPickerClassKey;
};
+// @public (undocumented)
+export type CatalogReactEntityAdvancedPickerClassKey = 'input';
+
// @public (undocumented)
export type CatalogReactEntityLifecyclePickerClassKey = 'input';
@@ -137,8 +141,22 @@ export type DefaultEntityFilters = {
lifecycles?: EntityLifecycleFilter;
tags?: EntityTagFilter;
text?: EntityTextFilter;
+ orphan?: EntityOrphanFilter;
+ error?: EntityErrorFilter;
};
+// @public (undocumented)
+export const EntityAdvancedPicker: () => JSX.Element;
+
+// @public
+export class EntityErrorFilter implements EntityFilter {
+ constructor(values: string[]);
+ // (undocumented)
+ filterEntity(entity: Entity): boolean;
+ // (undocumented)
+ readonly values: string[];
+}
+
// @public (undocumented)
export type EntityFilter = {
getCatalogFilters?: () => Record<
@@ -222,6 +240,15 @@ export type EntityLoadingStatus = {
refresh?: VoidFunction;
};
+// @public
+export class EntityOrphanFilter implements EntityFilter {
+ constructor(values: string[]);
+ // (undocumented)
+ filterEntity(entity: Entity): boolean;
+ // (undocumented)
+ readonly values: string[];
+}
+
// @public
export class EntityOwnerFilter implements EntityFilter {
constructor(values: string[]);
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
new file mode 100644
index 0000000000..8964038d42
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Entity } from '@backstage/catalog-model';
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
+import { MockEntityListContextProvider } from '../../testUtils/providers';
+import { EntityAdvancedPicker } from './EntityAdvancedPicker';
+
+const orphanAnnotation: Record = {};
+orphanAnnotation['backstage.io/orphan'] = 'true';
+
+const sampleEntities: Entity[] = [
+ {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'valid-component',
+ },
+ },
+ {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'orphan-component',
+ annotations: orphanAnnotation,
+ },
+ },
+ {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'error-component',
+ tags: ['Invalid Tag'],
+ },
+ },
+];
+
+describe('', () => {
+ it('renders all advanced options', () => {
+ const rendered = render(
+
+
+ ,
+ );
+ expect(rendered.getByText('Advanced')).toBeInTheDocument();
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ expect(rendered.getByText('Is Orphan')).toBeInTheDocument();
+ expect(rendered.getByText('Has Error')).toBeInTheDocument();
+ });
+
+ it('adds orphan to orphan filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Is Orphan'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ orphan: new EntityOrphanFilter(['true']),
+ });
+ });
+
+ it('adds error to error filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Has Error'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ error: new EntityErrorFilter(['true']),
+ });
+ });
+
+ it('remove orphan from orphan filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Is Orphan'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ orphan: undefined,
+ });
+ });
+
+ it('remove error from error filter', () => {
+ const updateFilters = jest.fn();
+ const rendered = render(
+
+
+ ,
+ );
+
+ fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByText('Has Error'));
+ expect(updateFilters).toHaveBeenCalledWith({
+ error: undefined,
+ });
+ });
+});
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
new file mode 100644
index 0000000000..9a813540f1
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
+import {
+ Box,
+ Checkbox,
+ FormControlLabel,
+ makeStyles,
+ TextField,
+ Typography,
+} from '@material-ui/core';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import React, { useState } from 'react';
+import { useEntityList } from '../../hooks';
+import { Autocomplete } from '@material-ui/lab';
+
+/** @public */
+export type CatalogReactEntityAdvancedPickerClassKey = 'input';
+
+const useStyles = makeStyles(
+ {
+ input: {},
+ },
+ {
+ name: 'CatalogReactEntityAdvancedPicker',
+ },
+);
+
+const icon = ;
+const checkedIcon = ;
+
+/** @public */
+export const EntityAdvancedPicker = () => {
+ const classes = useStyles();
+ const { updateFilters } = useEntityList();
+
+ const [selectedAdvancedItems, setSelectedAdvancedItems] = useState(
+ [],
+ );
+
+ function orphanChange(value: string) {
+ updateFilters({
+ orphan: value === 'true' ? new EntityOrphanFilter([value]) : undefined,
+ });
+ }
+
+ function errorChange(value: string) {
+ updateFilters({
+ error: value === 'true' ? new EntityErrorFilter([value]) : undefined,
+ });
+ }
+
+ const availableAdvancedItems = ['Is Orphan', 'Has Error'];
+
+ return (
+
+
+ Advanced
+ {
+ setSelectedAdvancedItems(value);
+ orphanChange(value.includes('Is Orphan') ? 'true' : 'false');
+ errorChange(value.includes('Has Error') ? 'true' : 'false');
+ }}
+ renderOption={(option, { selected }) => (
+
+ }
+ label={option}
+ />
+ )}
+ size="small"
+ popupIcon={}
+ renderInput={params => (
+
+ )}
+ />
+
+
+ );
+};
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts b/plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts
new file mode 100644
index 0000000000..160793f7f6
--- /dev/null
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { EntityAdvancedPicker } from './EntityAdvancedPicker';
+export type { CatalogReactEntityAdvancedPickerClassKey } from './EntityAdvancedPicker';
diff --git a/plugins/catalog-react/src/components/index.ts b/plugins/catalog-react/src/components/index.ts
index 7a26a72bf9..c495722243 100644
--- a/plugins/catalog-react/src/components/index.ts
+++ b/plugins/catalog-react/src/components/index.ts
@@ -27,3 +27,4 @@ export * from './FavoriteEntity';
export * from './InspectEntityDialog';
export * from './UnregisterEntityDialog';
export * from './UserListPicker';
+export * from './EntityAdvancedPicker';
diff --git a/plugins/catalog-react/src/filters.test.ts b/plugins/catalog-react/src/filters.test.ts
index ba31e21122..430bfb1360 100644
--- a/plugins/catalog-react/src/filters.test.ts
+++ b/plugins/catalog-react/src/filters.test.ts
@@ -14,9 +14,13 @@
* limitations under the License.
*/
-import { Entity } from '@backstage/catalog-model';
+import { AlphaEntity, Entity } from '@backstage/catalog-model';
import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { EntityTextFilter } from './filters';
+import {
+ EntityErrorFilter,
+ EntityOrphanFilter,
+ EntityTextFilter,
+} from './filters';
const entities: Entity[] = [
{
@@ -91,3 +95,50 @@ describe('EntityTextFilter', () => {
expect(filter.filterEntity(entities[1])).toBeTruthy();
});
});
+
+describe('EntityOrphanFilter', () => {
+ const orphanAnnotation: Record = {};
+ orphanAnnotation['backstage.io/orphan'] = 'true';
+
+ const orphan: Entity = {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'orphaned-service',
+ annotations: orphanAnnotation,
+ },
+ };
+
+ it('should find orphans', () => {
+ const filter = new EntityOrphanFilter(['true']);
+ expect(filter.filterEntity(orphan)).toBeTruthy();
+ expect(filter.filterEntity(entities[1])).toBeFalsy();
+ });
+});
+
+describe('EntityErrorFilter', () => {
+ const error: AlphaEntity = {
+ apiVersion: '1',
+ kind: 'Component',
+ metadata: {
+ name: 'service-with-error',
+ tags: ['Invalid Tag'],
+ },
+ status: {
+ items: [
+ {
+ type: 'invalid-tag',
+ level: 'error',
+ message: 'Tag is not valid',
+ error: undefined,
+ },
+ ],
+ },
+ };
+
+ it('should find errors', () => {
+ const filter = new EntityErrorFilter(['true']);
+ expect(filter.filterEntity(error)).toBeTruthy();
+ expect(filter.filterEntity(entities[1])).toBeFalsy();
+ });
+});
diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts
index 9fb057a01c..efd23552e9 100644
--- a/plugins/catalog-react/src/filters.ts
+++ b/plugins/catalog-react/src/filters.ts
@@ -14,7 +14,11 @@
* limitations under the License.
*/
-import { Entity, RELATION_OWNED_BY } from '@backstage/catalog-model';
+import {
+ AlphaEntity,
+ Entity,
+ RELATION_OWNED_BY,
+} from '@backstage/catalog-model';
import { humanizeEntityRef } from './components/EntityRefLink';
import { EntityFilter, UserListFilterKind } from './types';
import { getEntityRelations } from './utils';
@@ -159,3 +163,28 @@ export class UserListFilter implements EntityFilter {
return this.value;
}
}
+
+/**
+ * Filters entities based if it is an orphan or not.
+ * @public
+ */
+export class EntityOrphanFilter implements EntityFilter {
+ constructor(readonly values: string[]) {}
+ filterEntity(entity: Entity): boolean {
+ const orphan = entity.metadata.annotations?.['backstage.io/orphan'];
+ return orphan !== undefined && this.values.includes(orphan);
+ }
+}
+
+/**
+ * Filters entities based on if it has errors or not.
+ * @public
+ */
+export class EntityErrorFilter implements EntityFilter {
+ constructor(readonly values: string[]) {}
+ filterEntity(entity: Entity): boolean {
+ const error =
+ ((entity as AlphaEntity)?.status?.items?.length as number) > 0;
+ return error !== undefined && this.values.includes(error.toString());
+ }
+}
diff --git a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
index ccac475ae8..089701d8b4 100644
--- a/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
+++ b/plugins/catalog-react/src/hooks/useEntityListProvider.tsx
@@ -31,8 +31,10 @@ import useDebounce from 'react-use/lib/useDebounce';
import useMountedState from 'react-use/lib/useMountedState';
import { catalogApiRef } from '../api';
import {
+ EntityErrorFilter,
EntityKindFilter,
EntityLifecycleFilter,
+ EntityOrphanFilter,
EntityOwnerFilter,
EntityTagFilter,
EntityTextFilter,
@@ -52,6 +54,8 @@ export type DefaultEntityFilters = {
lifecycles?: EntityLifecycleFilter;
tags?: EntityTagFilter;
text?: EntityTextFilter;
+ orphan?: EntityOrphanFilter;
+ error?: EntityErrorFilter;
};
/** @public */
diff --git a/plugins/catalog-react/src/overridableComponents.ts b/plugins/catalog-react/src/overridableComponents.ts
index 1e654988e4..b06d832481 100644
--- a/plugins/catalog-react/src/overridableComponents.ts
+++ b/plugins/catalog-react/src/overridableComponents.ts
@@ -22,6 +22,7 @@ import {
CatalogReactEntitySearchBarClassKey,
CatalogReactEntityTagPickerClassKey,
CatalogReactEntityOwnerPickerClassKey,
+ CatalogReactEntityAdvancedPickerClassKey,
} from './components';
/** @public */
@@ -31,6 +32,7 @@ export type CatalogReactComponentsNameToClassKey = {
CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey;
CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
+ CatalogReactEntityAdvancedPicker: CatalogReactEntityAdvancedPickerClassKey;
};
/** @public */
diff --git a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
index 5250dcec0d..0e84fc00de 100644
--- a/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
+++ b/plugins/catalog/src/components/CatalogPage/DefaultCatalogPage.tsx
@@ -28,6 +28,7 @@ import {
CatalogFilterLayout,
EntityLifecyclePicker,
EntityListProvider,
+ EntityAdvancedPicker,
EntityOwnerPicker,
EntityTagPicker,
EntityTypePicker,
@@ -84,6 +85,7 @@ export function DefaultCatalogPage(props: DefaultCatalogPageProps) {
+
Date: Tue, 21 Jun 2022 16:35:04 -0500
Subject: [PATCH 2/3] Refactored based on PR feedback
Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
plugins/catalog-react/api-report.md | 8 ++++----
.../EntityAdvancedPicker.test.tsx | 4 ++--
.../EntityAdvancedPicker/EntityAdvancedPicker.tsx | 12 ++++++------
plugins/catalog-react/src/filters.test.ts | 4 ++--
plugins/catalog-react/src/filters.ts | 8 ++++----
5 files changed, 18 insertions(+), 18 deletions(-)
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 7f3d7a5f3c..61c1eb4592 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -150,11 +150,11 @@ export const EntityAdvancedPicker: () => JSX.Element;
// @public
export class EntityErrorFilter implements EntityFilter {
- constructor(values: string[]);
+ constructor(value: boolean);
// (undocumented)
filterEntity(entity: Entity): boolean;
// (undocumented)
- readonly values: string[];
+ readonly value: boolean;
}
// @public (undocumented)
@@ -242,11 +242,11 @@ export type EntityLoadingStatus = {
// @public
export class EntityOrphanFilter implements EntityFilter {
- constructor(values: string[]);
+ constructor(value: boolean);
// (undocumented)
filterEntity(entity: Entity): boolean;
// (undocumented)
- readonly values: string[];
+ readonly value: boolean;
}
// @public
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
index 8964038d42..c139c66505 100644
--- a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
@@ -83,7 +83,7 @@ describe('', () => {
fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
fireEvent.click(rendered.getByText('Is Orphan'));
expect(updateFilters).toHaveBeenCalledWith({
- orphan: new EntityOrphanFilter(['true']),
+ orphan: new EntityOrphanFilter(true),
});
});
@@ -104,7 +104,7 @@ describe('', () => {
fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
fireEvent.click(rendered.getByText('Has Error'));
expect(updateFilters).toHaveBeenCalledWith({
- error: new EntityErrorFilter(['true']),
+ error: new EntityErrorFilter(true),
});
});
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
index 9a813540f1..e3be9be3c5 100644
--- a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
@@ -54,15 +54,15 @@ export const EntityAdvancedPicker = () => {
[],
);
- function orphanChange(value: string) {
+ function orphanChange(value: boolean) {
updateFilters({
- orphan: value === 'true' ? new EntityOrphanFilter([value]) : undefined,
+ orphan: value ? new EntityOrphanFilter(value) : undefined,
});
}
- function errorChange(value: string) {
+ function errorChange(value: boolean) {
updateFilters({
- error: value === 'true' ? new EntityErrorFilter([value]) : undefined,
+ error: value ? new EntityErrorFilter(value) : undefined,
});
}
@@ -78,8 +78,8 @@ export const EntityAdvancedPicker = () => {
value={selectedAdvancedItems}
onChange={(_: object, value: string[]) => {
setSelectedAdvancedItems(value);
- orphanChange(value.includes('Is Orphan') ? 'true' : 'false');
- errorChange(value.includes('Has Error') ? 'true' : 'false');
+ orphanChange(value.includes('Is Orphan'));
+ errorChange(value.includes('Has Error'));
}}
renderOption={(option, { selected }) => (
{
};
it('should find orphans', () => {
- const filter = new EntityOrphanFilter(['true']);
+ const filter = new EntityOrphanFilter(true);
expect(filter.filterEntity(orphan)).toBeTruthy();
expect(filter.filterEntity(entities[1])).toBeFalsy();
});
@@ -137,7 +137,7 @@ describe('EntityErrorFilter', () => {
};
it('should find errors', () => {
- const filter = new EntityErrorFilter(['true']);
+ const filter = new EntityErrorFilter(true);
expect(filter.filterEntity(error)).toBeTruthy();
expect(filter.filterEntity(entities[1])).toBeFalsy();
});
diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts
index efd23552e9..a828015f0e 100644
--- a/plugins/catalog-react/src/filters.ts
+++ b/plugins/catalog-react/src/filters.ts
@@ -169,10 +169,10 @@ export class UserListFilter implements EntityFilter {
* @public
*/
export class EntityOrphanFilter implements EntityFilter {
- constructor(readonly values: string[]) {}
+ constructor(readonly value: boolean) {}
filterEntity(entity: Entity): boolean {
const orphan = entity.metadata.annotations?.['backstage.io/orphan'];
- return orphan !== undefined && this.values.includes(orphan);
+ return orphan !== undefined && this.value.toString() === orphan;
}
}
@@ -181,10 +181,10 @@ export class EntityOrphanFilter implements EntityFilter {
* @public
*/
export class EntityErrorFilter implements EntityFilter {
- constructor(readonly values: string[]) {}
+ constructor(readonly value: boolean) {}
filterEntity(entity: Entity): boolean {
const error =
((entity as AlphaEntity)?.status?.items?.length as number) > 0;
- return error !== undefined && this.values.includes(error.toString());
+ return error !== undefined && this.value === error;
}
}
From 5395ab9ebb3a3b32e10da138b2792a0163b20a23 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
Date: Fri, 24 Jun 2022 08:05:15 -0500
Subject: [PATCH 3/3] Renamed picker
Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>
---
.changeset/wicked-ladybugs-argue.md | 6 ++--
plugins/catalog-react/api-report.md | 14 +++++-----
.../EntityProcessingStatusPicker.test.tsx} | 28 +++++++++----------
.../EntityProcessingStatusPicker.tsx} | 12 ++++----
.../index.ts | 4 +--
plugins/catalog-react/src/components/index.ts | 2 +-
.../src/overridableComponents.ts | 4 +--
.../CatalogPage/DefaultCatalogPage.tsx | 4 +--
8 files changed, 38 insertions(+), 36 deletions(-)
rename plugins/catalog-react/src/components/{EntityAdvancedPicker/EntityAdvancedPicker.test.tsx => EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx} (81%)
rename plugins/catalog-react/src/components/{EntityAdvancedPicker/EntityAdvancedPicker.tsx => EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx} (89%)
rename plugins/catalog-react/src/components/{EntityAdvancedPicker => EntityProcessingStatusPicker}/index.ts (73%)
diff --git a/.changeset/wicked-ladybugs-argue.md b/.changeset/wicked-ladybugs-argue.md
index d75f250689..9a36cf17cb 100644
--- a/.changeset/wicked-ladybugs-argue.md
+++ b/.changeset/wicked-ladybugs-argue.md
@@ -3,7 +3,7 @@
'@backstage/plugin-catalog-react': patch
---
-Added new `EntityAdvancedPicker` that will filter for entities with orphans and/or errors.
+Added new `EntityProcessingStatusPicker` that will filter for entities with orphans and/or errors.
If you are using the default Catalog page this picker will be added automatically. For those who have customized their Catalog page you'll need to add this manually by doing something like this:
@@ -14,7 +14,7 @@ import {
EntityTypePicker,
UserListPicker,
EntityTagPicker
-+ EntityAdvancedPicker,
++ EntityProcessingStatusPicker,
} from '@backstage/plugin-catalog-react';
...
export const CustomCatalogPage = ({
@@ -31,7 +31,7 @@ export const CustomCatalogPage = ({
-+
++
diff --git a/plugins/catalog-react/api-report.md b/plugins/catalog-react/api-report.md
index 61c1eb4592..5232c49150 100644
--- a/plugins/catalog-react/api-report.md
+++ b/plugins/catalog-react/api-report.md
@@ -78,18 +78,18 @@ export type CatalogReactComponentsNameToClassKey = {
CatalogReactEntitySearchBar: CatalogReactEntitySearchBarClassKey;
CatalogReactEntityTagPicker: CatalogReactEntityTagPickerClassKey;
CatalogReactEntityOwnerPicker: CatalogReactEntityOwnerPickerClassKey;
- CatalogReactEntityAdvancedPicker: CatalogReactEntityAdvancedPickerClassKey;
+ CatalogReactEntityProcessingStatusPicker: CatalogReactEntityProcessingStatusPickerClassKey;
};
-// @public (undocumented)
-export type CatalogReactEntityAdvancedPickerClassKey = 'input';
-
// @public (undocumented)
export type CatalogReactEntityLifecyclePickerClassKey = 'input';
// @public (undocumented)
export type CatalogReactEntityOwnerPickerClassKey = 'input';
+// @public (undocumented)
+export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
+
// @public (undocumented)
export type CatalogReactEntitySearchBarClassKey = 'searchToolbar' | 'input';
@@ -145,9 +145,6 @@ export type DefaultEntityFilters = {
error?: EntityErrorFilter;
};
-// @public (undocumented)
-export const EntityAdvancedPicker: () => JSX.Element;
-
// @public
export class EntityErrorFilter implements EntityFilter {
constructor(value: boolean);
@@ -263,6 +260,9 @@ export class EntityOwnerFilter implements EntityFilter {
// @public (undocumented)
export const EntityOwnerPicker: () => JSX.Element | null;
+// @public (undocumented)
+export const EntityProcessingStatusPicker: () => JSX.Element;
+
// @public
export const EntityProvider: (props: EntityProviderProps) => JSX.Element;
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
similarity index 81%
rename from plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
rename to plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
index c139c66505..8e90e04148 100644
--- a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.test.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx
@@ -19,7 +19,7 @@ import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { EntityErrorFilter, EntityOrphanFilter } from '../../filters';
import { MockEntityListContextProvider } from '../../testUtils/providers';
-import { EntityAdvancedPicker } from './EntityAdvancedPicker';
+import { EntityProcessingStatusPicker } from './EntityProcessingStatusPicker';
const orphanAnnotation: Record = {};
orphanAnnotation['backstage.io/orphan'] = 'true';
@@ -50,18 +50,18 @@ const sampleEntities: Entity[] = [
},
];
-describe('', () => {
- it('renders all advanced options', () => {
+describe('', () => {
+ it('renders all processing status options', () => {
const rendered = render(
-
+
,
);
- expect(rendered.getByText('Advanced')).toBeInTheDocument();
+ expect(rendered.getByText('Processing Status')).toBeInTheDocument();
- fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByTestId('processing-status-picker-expand'));
expect(rendered.getByText('Is Orphan')).toBeInTheDocument();
expect(rendered.getByText('Has Error')).toBeInTheDocument();
});
@@ -76,11 +76,11 @@ describe('', () => {
updateFilters,
}}
>
-
+
,
);
- fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByTestId('processing-status-picker-expand'));
fireEvent.click(rendered.getByText('Is Orphan'));
expect(updateFilters).toHaveBeenCalledWith({
orphan: new EntityOrphanFilter(true),
@@ -97,11 +97,11 @@ describe('', () => {
updateFilters,
}}
>
-
+
,
);
- fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByTestId('processing-status-picker-expand'));
fireEvent.click(rendered.getByText('Has Error'));
expect(updateFilters).toHaveBeenCalledWith({
error: new EntityErrorFilter(true),
@@ -118,11 +118,11 @@ describe('', () => {
updateFilters,
}}
>
-
+
,
);
- fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByTestId('processing-status-picker-expand'));
fireEvent.click(rendered.getByText('Is Orphan'));
expect(updateFilters).toHaveBeenCalledWith({
orphan: undefined,
@@ -139,11 +139,11 @@ describe('', () => {
updateFilters,
}}
>
-
+
,
);
- fireEvent.click(rendered.getByTestId('advanced-picker-expand'));
+ fireEvent.click(rendered.getByTestId('processing-status-picker-expand'));
fireEvent.click(rendered.getByText('Has Error'));
expect(updateFilters).toHaveBeenCalledWith({
error: undefined,
diff --git a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
similarity index 89%
rename from plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
rename to plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
index e3be9be3c5..3fe3b60e25 100644
--- a/plugins/catalog-react/src/components/EntityAdvancedPicker/EntityAdvancedPicker.tsx
+++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx
@@ -31,14 +31,14 @@ import { useEntityList } from '../../hooks';
import { Autocomplete } from '@material-ui/lab';
/** @public */
-export type CatalogReactEntityAdvancedPickerClassKey = 'input';
+export type CatalogReactEntityProcessingStatusPickerClassKey = 'input';
const useStyles = makeStyles(
{
input: {},
},
{
- name: 'CatalogReactEntityAdvancedPicker',
+ name: 'CatalogReactEntityProcessingStatusPickerPicker',
},
);
@@ -46,7 +46,7 @@ const icon = ;
const checkedIcon = ;
/** @public */
-export const EntityAdvancedPicker = () => {
+export const EntityProcessingStatusPicker = () => {
const classes = useStyles();
const { updateFilters } = useEntityList();
@@ -71,7 +71,7 @@ export const EntityAdvancedPicker = () => {
return (
- Advanced
+ Processing Status
{
/>
)}
size="small"
- popupIcon={}
+ popupIcon={
+
+ }
renderInput={params => (
-
+