paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 24 Packages Projects Releases Wiki Activity

Clean up code according to review

Browse Source 
Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
This commit is contained in:
Philipp Hugenroth
2021-07-16 13:19:27 +02:00
parent 3ee8e75892
commit b044fa6f7c
19 changed files with 136 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/api-docs/src/components/ApiExplorerPage/ApiExplorerPage.tsx
+7 -10
View File
@@ -25,8 +25,8 @@ import { configApiRef, useApi, useRouteRef } from '@backstage/core-plugin-api';
import {
CatalogTable,
CatalogTableRow,
FilteredTableLayout,
TableContainer,
FilteredEntityLayout,
EntityListContainer,
FilterContainer,
} from '@backstage/plugin-catalog';
import {
@@ -54,11 +54,8 @@ const defaultColumns: TableColumn<CatalogTableRow>[] = [
CatalogTable.columns.createTagsColumn(),
];
interface IApiExplorerePageFilterProps {
type ApiExplorerPageProps = {
initiallySelectedFilter?: UserListFilterKind;
}
export type ApiExplorerPageProps = IApiExplorerePageFilterProps & {
columns?: TableColumn<CatalogTableRow>[];
};
@@ -94,7 +91,7 @@ export const ApiExplorerPage = ({
<SupportButton>All your APIs</SupportButton>
</ContentHeader>
<EntityListProvider>
<FilteredTableLayout>
<FilteredEntityLayout>
<FilterContainer>
<EntityKindPicker initialFilter="api" hidden />
<EntityTypePicker />
@@ -103,10 +100,10 @@ export const ApiExplorerPage = ({
<EntityLifecyclePicker />
<EntityTagPicker />
</FilterContainer>
<TableContainer>
<EntityListContainer>
<CatalogTable columns={columns || defaultColumns} />
</TableContainer>
</FilteredTableLayout>
</EntityListContainer>
</FilteredEntityLayout>
</EntityListProvider>
</Content>
</PageWithHeader>
plugins/catalog-react/src/hooks/useEntityListProvider.tsx
-7
View File
@@ -84,9 +84,6 @@ export type EntityListContextProps<
*/
queryParameters: Partial<Record<keyof EntityFilters, string | string[]>>;
showFiltersDrawer: boolean;
toggleFiltersDrawer: (showFiltersDrawer: boolean) => void;
loading: boolean;
error?: Error;
};
@@ -111,8 +108,6 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>({
const [requestedFilters, setRequestedFilters] = useState<EntityFilters>(
{} as EntityFilters,
);
// Show
const [showFiltersDrawer, toggleFiltersDrawer] = useState<boolean>(false);
const [outputState, setOutputState] = useState<OutputState<EntityFilters>>({
appliedFilters: {} as EntityFilters,
entities: [],
@@ -208,8 +203,6 @@ export const EntityListProvider = <EntityFilters extends DefaultEntityFilters>({
updateFilters,
queryParameters: outputState.queryParameters,
loading,
showFiltersDrawer,
toggleFiltersDrawer,
error,
}}
>
plugins/catalog-react/src/testUtils/providers.tsx
-3
View File
@@ -32,7 +32,6 @@ export const MockEntityListContextProvider = ({
const [filters, setFilters] = useState<DefaultEntityFilters>(
value.filters ?? {},
);
const [showFiltersDrawer, toggleFiltersDrawer] = useState(false);
const updateFilters = useCallback(
(
update:
@@ -57,8 +56,6 @@ export const MockEntityListContextProvider = ({
filters,
loading: false,
queryParameters: {},
showFiltersDrawer,
toggleFiltersDrawer,
};
// Extract value.filters to avoid overwriting it; some tests exercise filter updates. The value
plugins/catalog/src/components/CatalogFilter/CatalogFilter.tsx
-78
View File
@@ -1,78 +0,0 @@
/*
* 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 {
EntityKindPicker,
EntityLifecyclePicker,
EntityOwnerPicker,
EntityTagPicker,
EntityTypePicker,
UserListFilterKind,
UserListPicker,
} from '@backstage/plugin-catalog-react';
import {
Accordion,
AccordionDetails,
AccordionSummary,
Grid,
isWidthDown,
Typography,
withWidth,
} from '@material-ui/core';
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
import ExpandMore from '@material-ui/icons/ExpandMore';
import React, { PropsWithChildren } from 'react';
interface IProps {
initiallySelectedFilter?: UserListFilterKind;
initialFilter?: 'component' | 'api';
}
const CatalogFilterWrapper = withWidth()(
({ width, children }: PropsWithChildren<{ width: Breakpoint }>) =>
isWidthDown('md', width) ? (
<Accordion>
<AccordionSummary expandIcon={<ExpandMore />}>
<Typography>Filters</Typography>
</AccordionSummary>
<AccordionDetails>{children}</AccordionDetails>
</Accordion>
) : (
<React.Fragment>{children}</React.Fragment>
),
);
export const CatalogFilter = ({
initiallySelectedFilter = 'owned',
initialFilter = 'component',
}: IProps) => (
<CatalogFilterWrapper>
<Grid container alignContent="flex-start">
<Grid item xs={12} sm={4} lg={12}>
<EntityKindPicker initialFilter={initialFilter} hidden />
<EntityTypePicker />
</Grid>
<Grid item xs={12} sm={4} lg={12}>
<UserListPicker initialFilter={initiallySelectedFilter} />
</Grid>
<Grid item xs={12} sm={4} lg={12}>
<EntityOwnerPicker />
<EntityLifecyclePicker />
<EntityTagPicker />
</Grid>
</Grid>
</CatalogFilterWrapper>
);
plugins/catalog/src/components/CatalogPage/CatalogPage.tsx
+7 -7
View File
@@ -38,10 +38,10 @@ import { CatalogTable } from '../CatalogTable';
import { EntityRow } from '../CatalogTable/types';
import { CreateComponentButton } from '../CreateComponentButton/CreateComponentButton';
import {
FilteredTableLayout,
TableContainer,
FilteredEntityLayout,
EntityListContainer,
FilterContainer,
} from '../FilteredTableLayout';
} from '../FilteredEntityLayout';
export type CatalogPageProps = {
initiallySelectedFilter?: UserListFilterKind;
@@ -65,7 +65,7 @@ export const CatalogPage = ({
<SupportButton>All your software catalog entities</SupportButton>
</ContentHeader>
<EntityListProvider>
<FilteredTableLayout>
<FilteredEntityLayout>
<FilterContainer>
<EntityKindPicker initialFilter="component" hidden />
<EntityTypePicker />
@@ -74,10 +74,10 @@ export const CatalogPage = ({
<EntityLifecyclePicker />
<EntityTagPicker />
</FilterContainer>
<TableContainer>
<EntityListContainer>
<CatalogTable columns={columns} actions={actions} />
</TableContainer>
</FilteredTableLayout>
</EntityListContainer>
</FilteredEntityLayout>
</EntityListProvider>
</Content>
</PageWithHeader>
plugins/catalog/src/components/CreateComponentButton/CreateComponentButton.tsx
+2 -2
View File
@@ -23,7 +23,7 @@ import { useRouteRef } from '@backstage/core-plugin-api';
export const CreateComponentButton = () => {
const createComponentLink = useRouteRef(createComponentRouteRef);
return !createComponentLink ? null : (
return createComponentLink ? (
<Button
component={RouterLink}
variant="contained"
@@ -32,5 +32,5 @@ export const CreateComponentButton = () => {
>
Create Component
</Button>
);
) : null;
};
plugins/catalog/src/components/CreateComponentButton/indext.ts → plugins/catalog/src/components/CreateComponentButton/index.ts
View File
plugins/catalog/src/components/FilteredTableLayout/TableContainer.tsx → plugins/catalog/src/components/FilteredEntityLayout/EntityListContainer.tsx
+2 -2
View File
@@ -15,9 +15,9 @@
*/
import { Grid } from '@material-ui/core';
import React from 'react';
import React, { PropsWithChildren } from 'react';
export const TableContainer = ({ children }: React.PropsWithChildren<{}>) => (
export const EntityListContainer = ({ children }: PropsWithChildren<{}>) => (
<Grid item xs={12} lg={10}>
{children}
</Grid>
plugins/catalog/src/components/FilteredEntityLayout/FilterContainer.tsx
+68
View File
@@ -0,0 +1,68 @@
/*
* 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 { BackstageTheme } from '@backstage/theme';
import {
Box,
Button,
Drawer,
Grid,
useMediaQuery,
useTheme,
} from '@material-ui/core';
import FilterListIcon from '@material-ui/icons/FilterList';
import React, { useState } from 'react';
export const FilterContainer = ({ children }: React.PropsWithChildren<{}>) => {
const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
theme.breakpoints.down('md'),
);
const theme = useTheme<BackstageTheme>();
const [showFiltersDrawer, toggleFiltersDrawer] = useState<boolean>(false);
return isMidSizeScreen ? (
<>
<Button
style={{ marginTop: theme.spacing(1), marginLeft: theme.spacing(1) }}
onClick={() => toggleFiltersDrawer(!showFiltersDrawer)}
>
<Box display="flex" alignItems="center">
<FilterListIcon style={{ marginRight: theme.spacing(1) }} />
Filters
</Box>
</Button>
<Drawer
title="Filters"
data-testid="entity-filters-drawer"
open={showFiltersDrawer}
onClose={() => {
toggleFiltersDrawer(false);
}}
elevation={0}
anchor="left"
disableAutoFocus
keepMounted
variant="temporary"
>
<Box m={2}>{children}</Box>
</Drawer>
</>
) : (
<Grid data-testid="entity-filters-grid" item lg={2}>
{children}
</Grid>
);
};
plugins/catalog/src/components/CatalogFilter/index.ts → plugins/catalog/src/components/FilteredEntityLayout/FilteredEntityLayout.tsx
+9 -2
View File
@@ -1,5 +1,5 @@
/*
* Copyright 2020 The Backstage Authors
* 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.
@@ -14,4 +14,11 @@
* limitations under the License.
*/
export { CatalogFilter } from './CatalogFilter';
import { Grid } from '@material-ui/core';
import React, { PropsWithChildren } from 'react';
export const FilteredEntityLayout = ({ children }: PropsWithChildren<{}>) => (
<Grid container style={{ position: 'relative' }}>
{children}
</Grid>
);
plugins/catalog/src/components/FilteredTableLayout/index.ts → plugins/catalog/src/components/FilteredEntityLayout/index.ts
+2 -2
View File
@@ -14,6 +14,6 @@
* limitations under the License.
*/
export { FilteredTableLayout } from './FilteredTableLayout';
export { FilteredEntityLayout } from './FilteredEntityLayout';
export { FilterContainer } from './FilterContainer';
export { TableContainer } from './TableContainer';
export { EntityListContainer } from './EntityListContainer';
plugins/catalog/src/components/FilteredTableLayout/FilterContainer.tsx
-51
View File
@@ -1,51 +0,0 @@
/*
* 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 { Box, Drawer, Grid, useMediaQuery } from '@material-ui/core';
import { useEntityListProvider } from '@backstage/plugin-catalog-react';
import { BackstageTheme } from '@backstage/theme';
import React from 'react';
export const FilterContainer = ({ children }: React.PropsWithChildren<{}>) => {
const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
theme.breakpoints.down('md'),
);
const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider();
return isMidSizeScreen ? (
<Drawer
data-testid="entity-filters-drawer"
open={showFiltersDrawer}
onClose={() => {
toggleFiltersDrawer(false);
}}
PaperProps={{
style: { width: '300px' },
}}
elevation={0}
anchor="left"
disableAutoFocus
keepMounted
variant="temporary"
>
<Box m={2}>{children}</Box>
</Drawer>
) : (
<Grid data-testid="entity-filters-grid" item lg={2}>
{children}
</Grid>
);
};
plugins/catalog/src/components/FilteredTableLayout/FilteredTableLayout.tsx
-52
View File
@@ -1,52 +0,0 @@
/*
* 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 { useEntityListProvider } from '@backstage/plugin-catalog-react';
import { BackstageTheme } from '@backstage/theme';
import { Box, Button, Grid, useMediaQuery, useTheme } from '@material-ui/core';
import FilterListIcon from '@material-ui/icons/FilterList';
import React, { Fragment } from 'react';
interface IProps {}
export const FilteredTableLayout = ({
children,
}: React.PropsWithChildren<IProps>) => {
const isMidSizeScreen = useMediaQuery<BackstageTheme>(theme =>
theme.breakpoints.down('md'),
);
const { showFiltersDrawer, toggleFiltersDrawer } = useEntityListProvider();
const theme = useTheme<BackstageTheme>();
return (
<Fragment>
{isMidSizeScreen && (
<Button
style={{ paddingLeft: 0, marginBottom: theme.spacing(1) }}
onClick={() => toggleFiltersDrawer(!showFiltersDrawer)}
>
<Box display="flex" alignItems="center">
<FilterListIcon style={{ marginRight: theme.spacing(1) }} />
Filters
</Box>
</Button>
)}
<Grid container style={{ position: 'relative' }}>
{children}
</Grid>
</Fragment>
);
};
plugins/catalog/src/index.ts
+1 -2
View File
@@ -40,5 +40,4 @@ export {
EntitySystemDiagramCard,
} from './plugin';
export * from './components/CatalogTable/columns';
export * from './components/CatalogFilter';
export * from './components/FilteredTableLayout';
export * from './components/FilteredEntityLayout';