Review comments and fixing bug
Signed-off-by: sblausten <sam@roadie.io>
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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",
|
||||
|
||||
+6
-6
@@ -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,
|
||||
);
|
||||
|
||||
+9
-10
@@ -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: {
|
||||
|
||||
@@ -14,5 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export * from './EntityExplorerContent';
|
||||
export * from './CatalogKindExploreContent';
|
||||
export * from './ExploreLayout';
|
||||
export * from './DomainCard';
|
||||
|
||||
Reference in New Issue
Block a user