Updated frontend plugin template to use some more recent features

Signed-off-by: Fredrik Adelöw <freben@gmail.com>

.changeset/perfect-mayflies-greet.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Updated frontend plugin template to use some more recent features

packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -1,7 +1,7 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Table, TableColumn, Progress } from '@backstage/core-components';
-import Alert from '@material-ui/lab/Alert';
+import { Table, TableColumn, Progress, ResponseErrorPanel } from '@backstage/core-components';
+import { fetchApiRef, useApi } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 
 const useStyles = makeStyles({
@@ -74,6 +74,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
 };
 
 export const ExampleFetchComponent = () => {
+  const { fetch } = useApi(fetchApiRef);
   const { value, loading, error } = useAsync(async (): Promise<User[]> => {
     const response = await fetch('https://randomuser.me/api/?results=20');
     const data = await response.json();
@@ -83,7 +84,7 @@ export const ExampleFetchComponent = () => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return <DenseTable users={value || []} />;