fix(scaffolder): avoid missing key prop console warning

packages/core/src/components/WarningPanel/WarningPanel.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
-import { Typography, makeStyles } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
+import { makeStyles, Typography } from '@material-ui/core';
 import ErrorOutline from '@material-ui/icons/ErrorOutline';
+import React from 'react';
 
 const useErrorOutlineStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
@@ -60,9 +60,10 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
 type Props = {
   message?: React.ReactNode;
   title?: string;
+  children?: React.ReactNode;
 };
 
-export const WarningPanel: FC<Props> = props => {
+export const WarningPanel = (props: Props) => {
   const classes = useStyles(props);
   const { title, message, children } = props;
   return (

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -26,9 +26,10 @@ import {
   Progress,
   SupportButton,
   useApi,
+  WarningPanel,
 } from '@backstage/core';
 import { catalogApiRef } from '@backstage/plugin-catalog';
-import { Button, Grid, Typography, Link } from '@material-ui/core';
+import { Button, Grid, Link, Typography } from '@material-ui/core';
 import React, { useEffect } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import useStaleWhileRevalidate from 'swr';
@@ -46,7 +47,8 @@ const getTemplateCardProps = (
     tags: (template.metadata?.tags as string[]) ?? [],
   };
 };
-export const ScaffolderPage: React.FC<{}> = () => {
+
+export const ScaffolderPage = () => {
   const catalogApi = useApi(catalogApiRef);
   const errorApi = useApi(errorApiRef);
 
@@ -66,23 +68,23 @@ export const ScaffolderPage: React.FC<{}> = () => {
   return (
     <Page theme={pageTheme.home}>
       <Header
-        pageTitleOverride="Create a new component"
+        pageTitleOverride="Create a New Component"
         title={
           <>
-            Create a new component <Lifecycle alpha shorthand />
+            Create a New Component <Lifecycle alpha shorthand />
           </>
         }
         subtitle="Create new software components using standard templates"
       />
       <Content>
-        <ContentHeader title="Available templates">
+        <ContentHeader title="Available Templates">
           <Button
             variant="contained"
             color="primary"
             component={RouterLink}
             to="/register-component"
           >
-            Register existing component
+            Register Existing Component
           </Button>
           <SupportButton>
             Create new software components using standard templates. Different
@@ -101,16 +103,16 @@ export const ScaffolderPage: React.FC<{}> = () => {
           </Typography>
         )}
         {error && (
-          <Typography variant="body2">
+          <WarningPanel>
             Oops! Something went wrong loading the templates: {error.message}
-          </Typography>
+          </WarningPanel>
         )}
         <Grid container>
           {templates &&
             templates?.length > 0 &&
             templates.map(template => {
               return (
-                <Grid item xs={12} sm={6} md={3}>
+                <Grid key={template.metadata.uid} item xs={12} sm={6} md={3}>
                   <TemplateCard {...getTemplateCardProps(template)} />
                 </Grid>
               );