Move template list to a separate component

Signed-off-by: Tim Hansen <timbonicus@gmail.com>

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?  */}
           </div>
           <div>
-            {/* TODO(mtlewis) figure out flash of error state when entities are loading */}
-            {/* TODO(mtlewis) move loading, error handling etc. inside card list */}
-            {loading && <Progress />}
-
-            {error && (
-              <WarningPanel title="Oops! Something went wrong loading the templates">
-                {error.message}
-              </WarningPanel>
-            )}
-
-            {!error && !loading && entities && !entities.length && (
-              <Typography variant="body2">
-                No templates found that match your filter. Learn more about{' '}
-                <Link href="https://backstage.io/docs/features/software-templates/adding-templates">
-                  adding templates
-                </Link>
-                .
-              </Typography>
-            )}
-
-            <ItemCardGrid>
-              {entities &&
-                entities?.length > 0 &&
-                entities.map((template, i) => (
-                  <TemplateCard
-                    key={i}
-                    template={template as TemplateEntityV1alpha1}
-                    deprecated={template.apiVersion === 'backstage.io/v1alpha1'}
-                  />
-                ))}
-            </ItemCardGrid>
+            <TemplateList />
           </div>
         </div>
       </Content>

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 && <Progress />}
+
+      {error && (
+        <WarningPanel title="Oops! Something went wrong loading the templates">
+          {error.message}
+        </WarningPanel>
+      )}
+
+      {!error && !loading && entities && !entities.length && (
+        <Typography variant="body2">
+          No templates found that match your filter. Learn more about{' '}
+          <Link href="https://backstage.io/docs/features/software-templates/adding-templates">
+            adding templates
+          </Link>
+          .
+        </Typography>
+      )}
+
+      <ItemCardGrid>
+        {entities &&
+          entities?.length > 0 &&
+          entities.map((template, i) => (
+            <TemplateCard
+              key={i}
+              template={template as TemplateEntityV1alpha1}
+              deprecated={template.apiVersion === 'backstage.io/v1alpha1'}
+            />
+          ))}
+      </ItemCardGrid>
+    </>
+  );
+};

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';