Allow tableOptions to be passed to relatedEntity components

Signed-off-by: Michael Haley <mike.f.haley@gmail.com>
This commit is contained in:
Michael Haley
2022-05-10 11:08:13 -04:00
parent 978de7ae09
commit d329505d37
9 changed files with 59 additions and 25 deletions
@@ -23,6 +23,7 @@ import {
InfoCardVariants,
Table,
TableColumn,
TableProps,
} from '@backstage/core-components';
/**
@@ -36,6 +37,7 @@ export interface EntityTableProps<T extends Entity> {
entities: T[];
emptyContent?: ReactNode;
columns: TableColumn<T>[];
tableOptions?: TableProps<T>['options'];
}
const useStyles = makeStyles(theme => ({
@@ -59,6 +61,7 @@ export const EntityTable = <T extends Entity>(props: EntityTableProps<T>) => {
emptyContent,
variant = 'gridItem',
columns,
tableOptions,
} = props;
const classes = useStyles();
@@ -80,11 +83,14 @@ export const EntityTable = <T extends Entity>(props: EntityTableProps<T>) => {
emptyContent && <div className={classes.empty}>{emptyContent}</div>
}
options={{
// TODO: Toolbar padding if off compared to other cards, should be: padding: 16px 24px;
search: false,
paging: false,
actionsColumnIndex: -1,
padding: 'dense',
...{
// TODO: Toolbar padding if off compared to other cards, should be: padding: 16px 24px;
search: false,
paging: false,
actionsColumnIndex: -1,
padding: 'dense',
},
...tableOptions,
}}
data={entities}
/>
@@ -14,8 +14,11 @@
* limitations under the License.
*/
import { RELATION_DEPENDENCY_OF } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import {
ComponentEntity,
RELATION_DEPENDENCY_OF,
} from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -28,12 +31,17 @@ import {
export interface DependencyOfComponentsCardProps {
variant?: InfoCardVariants;
title?: string;
tableOptions?: TableProps<ComponentEntity>['options'];
}
export function DependencyOfComponentsCard(
props: DependencyOfComponentsCardProps,
) {
const { variant = 'gridItem', title = 'Dependency of components' } = props;
const {
variant = 'gridItem',
title = 'Dependency of components',
tableOptions,
} = props;
return (
<RelatedEntitiesCard
variant={variant}
@@ -44,6 +52,7 @@ export function DependencyOfComponentsCard(
emptyMessage="No component depends on this component"
emptyHelpLink={componentEntityHelpLink}
asRenderableEntities={asComponentEntities}
tableOptions={tableOptions}
/>
);
}
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { ComponentEntity, RELATION_DEPENDS_ON } from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -28,10 +28,15 @@ import {
export interface DependsOnComponentsCardProps {
variant?: InfoCardVariants;
title?: string;
tableOptions?: TableProps<ComponentEntity>['options'];
}
export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) {
const { variant = 'gridItem', title = 'Depends on components' } = props;
const {
variant = 'gridItem',
title = 'Depends on components',
tableOptions,
} = props;
return (
<RelatedEntitiesCard
variant={variant}
@@ -42,6 +47,7 @@ export function DependsOnComponentsCard(props: DependsOnComponentsCardProps) {
emptyMessage="No component is a dependency of this component"
emptyHelpLink={componentEntityHelpLink}
asRenderableEntities={asComponentEntities}
tableOptions={tableOptions}
/>
);
}
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import { RELATION_DEPENDS_ON } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { RELATION_DEPENDS_ON, ResourceEntity } from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asResourceEntities,
@@ -27,10 +27,11 @@ import {
/** @public */
export interface DependsOnResourcesCardProps {
variant?: InfoCardVariants;
tableOptions?: TableProps<ResourceEntity>['options'];
}
export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
const { variant = 'gridItem' } = props;
const { variant = 'gridItem', tableOptions } = props;
return (
<RelatedEntitiesCard
variant={variant}
@@ -41,6 +42,7 @@ export function DependsOnResourcesCard(props: DependsOnResourcesCardProps) {
emptyMessage="No resource is a dependency of this component"
emptyHelpLink={componentEntityHelpLink}
asRenderableEntities={asResourceEntities}
tableOptions={tableOptions}
/>
);
}
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { ComponentEntity, RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -27,10 +27,11 @@ import {
/** @public */
export interface HasComponentsCardProps {
variant?: InfoCardVariants;
tableOptions?: TableProps<ComponentEntity>['options'];
}
export function HasComponentsCard(props: HasComponentsCardProps) {
const { variant = 'gridItem' } = props;
const { variant = 'gridItem', tableOptions } = props;
return (
<RelatedEntitiesCard
variant={variant}
@@ -41,6 +42,7 @@ export function HasComponentsCard(props: HasComponentsCardProps) {
emptyMessage="No component is part of this system"
emptyHelpLink={componentEntityHelpLink}
asRenderableEntities={asComponentEntities}
tableOptions={tableOptions}
/>
);
}
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { RELATION_HAS_PART, ResourceEntity } from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asResourceEntities,
@@ -27,10 +27,11 @@ import {
/** @public */
export interface HasResourcesCardProps {
variant?: InfoCardVariants;
tableOptions?: TableProps<ResourceEntity>['options'];
}
export function HasResourcesCard(props: HasResourcesCardProps) {
const { variant = 'gridItem' } = props;
const { variant = 'gridItem', tableOptions } = props;
return (
<RelatedEntitiesCard
variant={variant}
@@ -41,6 +42,7 @@ export function HasResourcesCard(props: HasResourcesCardProps) {
asRenderableEntities={asResourceEntities}
emptyMessage="No resource is part of this system"
emptyHelpLink={resourceEntityHelpLink}
tableOptions={tableOptions}
/>
);
}
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { ComponentEntity, RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asComponentEntities,
@@ -26,10 +26,11 @@ import {
/** @public */
export interface HasSubcomponentsCardProps {
variant?: InfoCardVariants;
tableOptions?: TableProps<ComponentEntity>['options'];
}
export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
const { variant = 'gridItem' } = props;
const { variant = 'gridItem', tableOptions } = props;
return (
<RelatedEntitiesCard
variant={variant}
@@ -40,6 +41,7 @@ export function HasSubcomponentsCard(props: HasSubcomponentsCardProps) {
asRenderableEntities={asComponentEntities}
emptyMessage="No subcomponent is part of this component"
emptyHelpLink="https://backstage.io/docs/features/software-catalog/descriptor-format#specsubcomponentof-optional"
tableOptions={tableOptions}
/>
);
}
@@ -14,8 +14,8 @@
* limitations under the License.
*/
import { RELATION_HAS_PART } from '@backstage/catalog-model';
import { InfoCardVariants } from '@backstage/core-components';
import { RELATION_HAS_PART, SystemEntity } from '@backstage/catalog-model';
import { InfoCardVariants, TableProps } from '@backstage/core-components';
import React from 'react';
import {
asSystemEntities,
@@ -27,6 +27,7 @@ import {
/** @public */
export interface HasSystemsCardProps {
variant?: InfoCardVariants;
tableOptions?: TableProps<SystemEntity>['options'];
}
export function HasSystemsCard(props: HasSystemsCardProps) {
@@ -29,6 +29,7 @@ import {
Progress,
ResponseErrorPanel,
TableColumn,
TableProps,
} from '@backstage/core-components';
/** @public */
@@ -40,6 +41,7 @@ export type RelatedEntitiesCardProps<T extends Entity> = {
relationType: string;
emptyMessage: string;
emptyHelpLink: string;
tableOptions?: TableProps<T>['options'];
asRenderableEntities: (entities: Entity[]) => T[];
};
@@ -66,6 +68,7 @@ export function RelatedEntitiesCard<T extends Entity>(
relationType,
emptyMessage,
emptyHelpLink,
tableOptions,
asRenderableEntities,
} = props;
@@ -105,6 +108,7 @@ export function RelatedEntitiesCard<T extends Entity>(
}
columns={columns}
entities={asRenderableEntities(entities || [])}
tableOptions={tableOptions}
/>
);
}