fix: refactor error handling to use ResponseErrorPanel

Signed-off-by: pamelin <pamelin@expediagroup.com>

plugins/stackstorm/package.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@backstage/core-components": "workspace:^",
     "@backstage/core-plugin-api": "workspace:^",
+    "@backstage/errors": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/stackstorm/src/api/StackStormClient.ts

@@ -15,6 +15,7 @@
  */
 import { Action, Execution, Pack, StackstormApi } from './types';
 import { ConfigApi, DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
+import { ResponseError } from '@backstage/errors';
 
 export class StackstormClient implements StackstormApi {
   private readonly discoveryApi: DiscoveryApi;
@@ -57,28 +58,13 @@ export class StackstormClient implements StackstormApi {
       },
     });
 
-    if (!response.ok) throw new Error(`Unable to get data: ${response.status}`);
+    if (!response.ok) throw await ResponseError.fromResponse(response);
     return (await response.json()) as T;
   }
 
-  async addProject(bazaarProject: any): Promise<any> {
-    const baseUrl = await this.discoveryApi.getBaseUrl('bazaar');
-
-    return await this.fetchApi
-      .fetch(`${baseUrl}/projects`, {
-        method: 'POST',
-        headers: {
-          Accept: 'application/json',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(bazaarProject),
-      })
-      .then(resp => resp.json());
-  }
-
   async getExecutions(limit?: number, offset?: number): Promise<Execution[]> {
     const params = {
-      limit: limit?.toString() || '25',
+      limit: limit?.toString() || '10',
       offset: offset?.toString() || '0',
       include_attributes:
         'id,status,start_timestamp,action.ref,action.name,rule.ref',

plugins/stackstorm/src/components/ActionsList/ActionsList.tsx

@@ -15,7 +15,7 @@
  */
 import React, { useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
-import { Progress } from '@backstage/core-components';
+import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import {
   List,
@@ -28,7 +28,6 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import ExpandLess from '@material-ui/icons/ExpandLess';
-import { Alert } from '@material-ui/lab';
 import { Action, Pack, stackstormApiRef } from '../../api';
 
 const useStyles = makeStyles(theme => ({
@@ -64,7 +63,7 @@ export const ActionItems = ({ pack }: ActionItemsProps) => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return (
@@ -133,7 +132,7 @@ export const ActionsList = () => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return (

plugins/stackstorm/src/components/ExecutionsTable/ExecutionPanel.tsx

@@ -14,11 +14,14 @@
  * limitations under the License.
  */
 import React from 'react';
-import { CodeSnippet, Progress } from '@backstage/core-components';
+import {
+  CodeSnippet,
+  Progress,
+  ResponseErrorPanel,
+} from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { Execution, stackstormApiRef } from '../../api';
 import useAsync from 'react-use/lib/useAsync';
-import { Alert } from '@material-ui/lab';
 import {
   Button,
   Card,
@@ -160,7 +163,7 @@ export const ExecutionPanel = ({ id }: { id: string }) => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return <ExecutionCard e={value!} />;

plugins/stackstorm/src/components/ExecutionsTable/ExecutionsTable.tsx

@@ -13,12 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect, useState } from 'react';
-import { Link, Table, TableColumn } from '@backstage/core-components';
-import { useApi, errorApiRef } from '@backstage/core-plugin-api';
+import React, { useState } from 'react';
+import {
+  Link,
+  ResponseErrorPanel,
+  Table,
+  TableColumn,
+} from '@backstage/core-components';
+import { useApi } from '@backstage/core-plugin-api';
 import { Execution, stackstormApiRef } from '../../api';
 import { Status } from './Status';
 import { ExecutionPanel } from './ExecutionPanel';
+import useAsync from 'react-use/lib/useAsync';
 
 type DenseTableProps = {
   executions: Execution[];
@@ -89,34 +95,24 @@ export const DenseTable = ({
 
 export const ExecutionsTable = () => {
   const st2 = useApi(stackstormApiRef);
-  const errorApi = useApi(errorApiRef);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
-  const [data, setData] = useState<Execution[]>([]);
-  const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    const getData = async () => {
-      setLoading(true);
-      await st2
-        .getExecutions(rowsPerPage, page * rowsPerPage)
-        .then(d => {
-          setData(d);
-        })
-        .catch(err => {
-          errorApi.post(err);
-        });
-      setLoading(false);
-    };
-    getData();
-  }, [errorApi, page, rowsPerPage, st2]);
+  const { value, loading, error } = useAsync(async (): Promise<Execution[]> => {
+    const data = await st2.getExecutions(rowsPerPage, page * rowsPerPage);
+    return data;
+  }, [page, rowsPerPage, st2]);
+
+  if (error) {
+    return <ResponseErrorPanel error={error} />;
+  }
 
   return (
     <DenseTable
       page={page}
       pageSize={rowsPerPage}
       loading={loading}
-      executions={data}
+      executions={value || []}
       onRowsPerPageChange={setRowsPerPage}
       onPageChange={setPage}
     />

plugins/stackstorm/src/components/PacksTable/PacksTable.tsx

@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Progress, Table, TableColumn } from '@backstage/core-components';
-import { Alert } from '@material-ui/lab';
+import {
+  Progress,
+  ResponseErrorPanel,
+  Table,
+  TableColumn,
+} from '@backstage/core-components';
 import useAsync from 'react-use/lib/useAsync';
 import { useApi } from '@backstage/core-plugin-api';
 import { Pack, stackstormApiRef } from '../../api';
@@ -52,7 +56,7 @@ export const PacksTable = () => {
   if (loading) {
     return <Progress />;
   } else if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return <DenseTable packs={value || []} />;

yarn.lock

@@ -7964,6 +7964,7 @@ __metadata:
     "@backstage/core-components": "workspace:^"
     "@backstage/core-plugin-api": "workspace:^"
     "@backstage/dev-utils": "workspace:^"
+    "@backstage/errors": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/theme": "workspace:^"
     "@material-ui/core": ^4.12.2