From 89749bc2eff7a720edc5075e631304f7ff2be814 Mon Sep 17 00:00:00 2001 From: Tim Hansen Date: Thu, 24 Jun 2021 20:15:44 -0600 Subject: [PATCH] Move template list to a separate component Signed-off-by: Tim Hansen --- .../ScaffolderPage/ScaffolderPage.tsx | 42 +----------- .../components/TemplateList/TemplateList.tsx | 64 +++++++++++++++++++ .../src/components/TemplateList/index.ts | 16 +++++ 3 files changed, 83 insertions(+), 39 deletions(-) create mode 100644 plugins/scaffolder/src/components/TemplateList/TemplateList.tsx create mode 100644 plugins/scaffolder/src/components/TemplateList/index.ts diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx index 8881b69460..56c371e825 100644 --- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx +++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx @@ -14,17 +14,13 @@ * limitations under the License. */ -import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; import { Content, ContentHeader, Header, - ItemCardGrid, Lifecycle, Page, - Progress, SupportButton, - WarningPanel, } from '@backstage/core-components'; import { useRouteRef } from '@backstage/core-plugin-api'; import { @@ -32,14 +28,13 @@ import { EntityListProvider, EntitySearchBar, EntityTypePicker, - useEntityListProvider, UserListPicker, } from '@backstage/plugin-catalog-react'; -import { Button, Link, makeStyles, Typography } from '@material-ui/core'; +import { Button, makeStyles } from '@material-ui/core'; import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { registerComponentRouteRef } from '../../routes'; -import { TemplateCard } from '../TemplateCard'; +import { TemplateList } from '../TemplateList'; const useStyles = makeStyles(theme => ({ contentWrapper: { @@ -52,7 +47,6 @@ const useStyles = makeStyles(theme => ({ export const ScaffolderPageContents = () => { const styles = useStyles(); - const { loading, error, entities } = useEntityListProvider(); const registerComponentLink = useRouteRef(registerComponentRouteRef); @@ -99,37 +93,7 @@ export const ScaffolderPageContents = () => { {/* TODO(mtlewis) consider adding tag picker? */}
- {/* TODO(mtlewis) figure out flash of error state when entities are loading */} - {/* TODO(mtlewis) move loading, error handling etc. inside card list */} - {loading && } - - {error && ( - - {error.message} - - )} - - {!error && !loading && entities && !entities.length && ( - - No templates found that match your filter. Learn more about{' '} - - adding templates - - . - - )} - - - {entities && - entities?.length > 0 && - entities.map((template, i) => ( - - ))} - +
diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx new file mode 100644 index 0000000000..4b9a7030d9 --- /dev/null +++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx @@ -0,0 +1,64 @@ +/* + * 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 React from 'react'; +import { TemplateEntityV1alpha1 } from '@backstage/catalog-model'; +import { + ItemCardGrid, + Progress, + WarningPanel, +} from '@backstage/core-components'; +import { useEntityListProvider } from '@backstage/plugin-catalog-react'; +import { Link, Typography } from '@material-ui/core'; +import { TemplateCard } from '../TemplateCard'; + +export const TemplateList = () => { + const { loading, error, entities } = useEntityListProvider(); + return ( + <> + {/* TODO(mtlewis) figure out flash of error state when entities are loading */} + {loading && } + + {error && ( + + {error.message} + + )} + + {!error && !loading && entities && !entities.length && ( + + No templates found that match your filter. Learn more about{' '} + + adding templates + + . + + )} + + + {entities && + entities?.length > 0 && + entities.map((template, i) => ( + + ))} + + + ); +}; diff --git a/plugins/scaffolder/src/components/TemplateList/index.ts b/plugins/scaffolder/src/components/TemplateList/index.ts new file mode 100644 index 0000000000..b9ec700d74 --- /dev/null +++ b/plugins/scaffolder/src/components/TemplateList/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export { TemplateList } from './TemplateList';