Review comments and fixing bug

Signed-off-by: sblausten <sam@roadie.io>
This commit is contained in:
sblausten
2023-03-17 15:41:10 +01:00
parent 91306c7aa8
commit dfecc7db6b
11 changed files with 181 additions and 30 deletions
+9 -5
View File
@@ -9,6 +9,7 @@ import { ApiRef } from '@backstage/core-plugin-api';
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { default as default_2 } from 'react';
import { DiscoveryApi } from '@backstage/core-plugin-api';
import { DomainEntity } from '@backstage/catalog-model';
import { ExploreToolsConfig } from '@backstage/plugin-explore-react';
import { ExternalRouteRef } from '@backstage/core-plugin-api';
import { FetchApi } from '@backstage/core-plugin-api';
@@ -32,14 +33,17 @@ export const catalogEntityRouteRef: ExternalRouteRef<
>;
// @public (undocumented)
export const DomainExplorerContent: (props: {
title?: string | undefined;
export const CatalogKindExploreContent: (props: {
tabTitle?: string;
kind: string;
}) => JSX.Element;
// @public (undocumented)
export const EntityExplorerContent: (props: {
tabTitle?: string;
kind: string;
export const DomainCard: (props: { entity: DomainEntity }) => JSX.Element;
// @public (undocumented)
export const DomainExplorerContent: (props: {
title?: string | undefined;
}) => JSX.Element;
// @public
+2 -1
View File
@@ -46,7 +46,8 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.57",
"classnames": "^2.2.6",
"react-use": "^17.2.4"
"react-use": "^17.2.4",
"pluralize": "^8.0.0"
},
"peerDependencies": {
"@types/react": "^16.13.1 || ^17.0.0",
@@ -19,9 +19,9 @@ import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
import { EntityExplorerContent } from './EntityExplorerContent';
import { CatalogKindExploreContent } from './CatalogKindExploreContent';
describe('<EntityExplorerContent />', () => {
describe('<CatalogKindExploreContent />', () => {
const catalogApi = {
addLocation: jest.fn(),
getEntities: jest.fn(),
@@ -79,7 +79,7 @@ describe('<EntityExplorerContent />', () => {
const { getByText } = await renderInTestApp(
<Wrapper>
<EntityExplorerContent kind="domain" />
<CatalogKindExploreContent kind="domain" />
</Wrapper>,
mountedRoutes,
);
@@ -95,7 +95,7 @@ describe('<EntityExplorerContent />', () => {
const { getByText } = await renderInTestApp(
<Wrapper>
<EntityExplorerContent kind="domain" tabTitle="Our Areas" />
<CatalogKindExploreContent kind="domain" tabTitle="Our Areas" />
</Wrapper>,
mountedRoutes,
);
@@ -108,7 +108,7 @@ describe('<EntityExplorerContent />', () => {
const { getByText } = await renderInTestApp(
<Wrapper>
<EntityExplorerContent kind="domain" />
<CatalogKindExploreContent kind="domain" />
</Wrapper>,
mountedRoutes,
);
@@ -124,7 +124,7 @@ describe('<EntityExplorerContent />', () => {
const { getByText } = await renderInTestApp(
<Wrapper>
<EntityExplorerContent kind="domain" />
<CatalogKindExploreContent kind="domain" />
</Wrapper>,
mountedRoutes,
);
@@ -30,10 +30,11 @@ import {
WarningPanel,
} from '@backstage/core-components';
import { useApi } from '@backstage/core-plugin-api';
import pluralize from 'pluralize';
const Body = (props: { kind: string }) => {
const { kind } = props;
const kindPlural = `${kind}s`;
const kindPlural = pluralize(kind);
const catalogApi = useApi(catalogApiRef);
const {
value: entities,
@@ -44,7 +45,7 @@ const Body = (props: { kind: string }) => {
filter: { kind },
});
return response.items as Entity[];
}, [catalogApi]);
}, [kind]);
if (loading) {
return <Progress />;
@@ -87,23 +88,21 @@ const Body = (props: { kind: string }) => {
};
/** @public */
export const EntityExplorerContent = (props: {
export const CatalogKindExploreContent = (props: {
tabTitle?: string;
kind: string;
}) => {
const { kind, tabTitle } = props;
const kindLowercase = kind.toLocaleLowerCase();
const kindCapitalized = `${kind[0].toLocaleUpperCase()}${kind.substring(1)}`;
return (
<Content noPadding>
<ContentHeader
title={
tabTitle || `${kind[0].toLocaleUpperCase()}${kind.substring(1)}s`
}
>
<ContentHeader title={tabTitle || `${pluralize(kindCapitalized)}`}>
<SupportButton>
Discover the {kind.toLocaleLowerCase()}s in your ecosystem.
Discover the {pluralize(kindLowercase)} in your ecosystem.
</SupportButton>
</ContentHeader>
<Body kind={kind.toLocaleLowerCase()} />
<Body kind={kindLowercase} />
</Content>
);
};
@@ -14,4 +14,4 @@
* limitations under the License.
*/
export { EntityExplorerContent } from './EntityExplorerContent';
export { CatalogKindExploreContent } from './CatalogKindExploreContent';
@@ -19,7 +19,7 @@ import { ExploreLayout } from '../ExploreLayout';
import { GroupsExplorerContent } from '../GroupsExplorerContent';
import { ToolExplorerContent } from '../ToolExplorerContent';
import { configApiRef, useApi } from '@backstage/core-plugin-api';
import { EntityExplorerContent } from '../EntityExplorerContent';
import { CatalogKindExploreContent } from '../CatalogKindExploreContent';
export const DefaultExplorePage = () => {
const configApi = useApi(configApiRef);
@@ -32,10 +32,10 @@ export const DefaultExplorePage = () => {
subtitle="Discover solutions available in your ecosystem"
>
<ExploreLayout.Route path="domains" title="Domains">
<EntityExplorerContent kind="domain" />
<CatalogKindExploreContent kind="domain" />
</ExploreLayout.Route>
<ExploreLayout.Route path="systems" title="Systems">
<EntityExplorerContent kind="system" />
<CatalogKindExploreContent kind="system" />
</ExploreLayout.Route>
<ExploreLayout.Route path="groups" title="Groups">
<GroupsExplorerContent />
@@ -1,3 +1,57 @@
/*
* Copyright 2020 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 { DomainEntity } from '@backstage/catalog-model';
import { entityRouteRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import React from 'react';
import { DomainCard } from './DomainCard';
describe('<DomainCard />', () => {
it('renders a domain card', async () => {
const entity: DomainEntity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'Domain',
metadata: {
name: 'artists',
description: 'Everything about artists',
tags: ['a-tag'],
},
spec: {
owner: 'guest',
},
};
const { getByText } = await renderInTestApp(
<DomainCard entity={entity} />,
{
mountedRoutes: {
'/catalog/:namespace/:kind/:name': entityRouteRef,
},
},
);
expect(getByText('artists')).toBeInTheDocument();
expect(getByText('Everything about artists')).toBeInTheDocument();
expect(getByText('a-tag')).toBeInTheDocument();
expect(getByText('Explore').parentElement).toHaveAttribute(
'href',
'/catalog/default/domain/artists',
);
});
});
/*
* Copyright 2023 The Backstage Authors
*
@@ -1,3 +1,78 @@
/*
* Copyright 2021 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 { DomainEntity, RELATION_OWNED_BY } from '@backstage/catalog-model';
import {
EntityRefLinks,
entityRouteParams,
getEntityRelations,
entityRouteRef,
} from '@backstage/plugin-catalog-react';
import {
Box,
Card,
CardActions,
CardContent,
CardMedia,
Chip,
} from '@material-ui/core';
import React from 'react';
import { LinkButton, ItemCardHeader } from '@backstage/core-components';
import { useRouteRef } from '@backstage/core-plugin-api';
/** @public */
export const DomainCard = (props: { entity: DomainEntity }) => {
const { entity } = props;
const catalogEntityRoute = useRouteRef(entityRouteRef);
const ownedByRelations = getEntityRelations(entity, RELATION_OWNED_BY);
const url = catalogEntityRoute(entityRouteParams(entity));
const owner = (
<EntityRefLinks
entityRefs={ownedByRelations}
defaultKind="group"
color="inherit"
/>
);
return (
<Card>
<CardMedia>
<ItemCardHeader title={entity.metadata.name} subtitle={owner} />
</CardMedia>
<CardContent>
{entity.metadata.tags?.length ? (
<Box>
{entity.metadata.tags.map(tag => (
<Chip size="small" label={tag} key={tag} />
))}
</Box>
) : null}
{entity.metadata.description}
</CardContent>
<CardActions>
<LinkButton to={url} color="primary">
Explore
</LinkButton>
</CardActions>
</Card>
);
};
/*
* Copyright 2023 The Backstage Authors
*
@@ -1,3 +1,20 @@
/*
* Copyright 2021 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 { DomainCard } from './DomainCard';
/*
* Copyright 2023 The Backstage Authors
*
@@ -14,15 +14,15 @@
* limitations under the License.
*/
import { DomainEntity } from '@backstage/catalog-model';
import { Entity } from '@backstage/catalog-model';
import { entityRouteRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp } from '@backstage/test-utils';
import React from 'react';
import { EntityCard } from './EntityCard';
describe('<EntityCard />', () => {
it('renders a domain card', async () => {
const entity: DomainEntity = {
it('renders an entity card', async () => {
const entity: Entity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'Domain',
metadata: {
+2 -1
View File
@@ -14,5 +14,6 @@
* limitations under the License.
*/
export * from './EntityExplorerContent';
export * from './CatalogKindExploreContent';
export * from './ExploreLayout';
export * from './DomainCard';