Refactor application detail error handling

pkg/app/web/src/components/application-detail.stories.tsx

@@ -19,6 +19,7 @@ const dummyStore: Partial<AppState> = {
     disabling: {},
     adding: false,
     loading: false,
+    fetchApplicationError: null,
   },
   environments: {
     entities: {

pkg/app/web/src/components/application-detail.tsx

@@ -22,6 +22,7 @@ import { AppState } from "../modules";
 import {
   Application,
   ApplicationDeploymentReference,
+  fetchApplication,
   selectById as selectApplicationById,
   syncApplication,
 } from "../modules/applications";
@@ -38,6 +39,8 @@ import { DetailTableRow } from "./detail-table-row";
 import { ApplicationHealthStatusIcon } from "./health-status-icon";
 import { SyncStateReason } from "./sync-state-reason";
 import { SyncStatusIcon } from "./sync-status-icon";
+import { SerializedError } from "@reduxjs/toolkit";
+import { UI_TEXT_REFRESH } from "../constants/ui-text";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -95,13 +98,15 @@ const useIsSyncingApplication = (
   });
 };
 
+const ERROR_MESSAGE = "It was unable to fetch the application.";
+
 const MostRecentlySuccessfulDeployment: FC<{
   deployment?: ApplicationDeploymentReference.AsObject;
 }> = ({ deployment }) => {
   const classes = useStyles();
 
   if (!deployment) {
-    return <Skeleton height={63} width={500} />;
+    return <Skeleton height={105} width={500} />;
   }
 
   const date = dayjs(deployment.startedAt * 1000);
@@ -139,12 +144,17 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
   const classes = useStyles();
   const dispatch = useDispatch();
 
-  const [app, liveState] = useSelector<
+  const [app, liveState, fetchApplicationError] = useSelector<
     AppState,
-    [Application | undefined, ApplicationLiveState | undefined]
+    [
+      Application | undefined,
+      ApplicationLiveState | undefined,
+      SerializedError | null
+    ]
   >((state) => [
     selectApplicationById(state.applications, applicationId),
     selectLiveStateById(state.applicationLiveState, applicationId),
+    state.applications.fetchApplicationError,
   ]);
 
   const [pipe, env] = useSelector<
@@ -163,6 +173,30 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
     }
   };
 
+  if (fetchApplicationError) {
+    return (
+      <Paper square elevation={1} className={classes.root}>
+        <Box
+          height={200}
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Typography variant="body1">{ERROR_MESSAGE}</Typography>
+          <Button
+            color="primary"
+            onClick={() => {
+              dispatch(fetchApplication(applicationId));
+            }}
+          >
+            {UI_TEXT_REFRESH}
+          </Button>
+        </Box>
+      </Paper>
+    );
+  }
+
   return (
     <Paper square elevation={1} className={classes.root}>
       <Box flex={1}>
@@ -242,7 +276,7 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
               </tbody>
             </table>
           ) : (
-            <Skeleton height={63} width={500} />
+            <Skeleton height={105} width={500} />
           )}
         </div>
 
@@ -258,7 +292,7 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
           variant="outlined"
           color="primary"
           onClick={handleSync}
-          disabled={isSyncing}
+          disabled={isSyncing || !app}
           startIcon={<SyncIcon />}
         >
           SYNC

pkg/app/web/src/components/application-state-view.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { createStore, render, screen } from "../../test-utils";
 import { ApplicationStateView } from "./application-state-view";
 import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
-import { clearError } from "../modules/applications-live-state";
+import { fetchApplicationStateById } from "../modules/applications-live-state";
 import { UI_TEXT_REFRESH } from "../constants/ui-text";
 import userEvent from "@testing-library/user-event";
 
@@ -35,5 +35,7 @@ it("shows refresh button if live state fetching has error", () => {
 
   userEvent.click(screen.getByRole("button", { name: UI_TEXT_REFRESH }));
 
-  expect(store.getActions()).toMatchObject([{ type: clearError.type }]);
+  expect(store.getActions()).toMatchObject([
+    { type: fetchApplicationStateById.pending.type },
+  ]);
 });

pkg/app/web/src/components/application-state-view.tsx

@@ -12,7 +12,7 @@ import { UI_TEXT_REFRESH } from "../constants/ui-text";
 import { AppState } from "../modules";
 import {
   ApplicationLiveState,
-  clearError,
+  fetchApplicationStateById,
   selectById as selectLiveStateById,
   selectHasError,
 } from "../modules/applications-live-state";
@@ -52,7 +52,7 @@ export const ApplicationStateView: FC<Props> = memo(
           <Button
             color="primary"
             onClick={() => {
-              dispatch(clearError(applicationId));
+              dispatch(fetchApplicationStateById(applicationId));
             }}
           >
             {UI_TEXT_REFRESH}

pkg/app/web/src/modules/applications-live-state.ts

@@ -2,7 +2,6 @@ import {
   createAsyncThunk,
   createEntityAdapter,
   createSlice,
-  PayloadAction,
 } from "@reduxjs/toolkit";
 import {
   ApplicationLiveStateSnapshot as ApplicationLiveStateSnapshotModel,
@@ -55,11 +54,7 @@ export const selectHasError = (
 export const applicationLiveStateSlice = createSlice({
   name: "applicationLiveState",
   initialState,
-  reducers: {
-    clearError(state, action: PayloadAction<string>) {
-      state.hasError[action.payload] = false;
-    },
-  },
+  reducers: {},
   extraReducers: (builder) => {
     builder
       .addCase(fetchApplicationStateById.pending, (state, action) => {
@@ -77,6 +72,4 @@ export const applicationLiveStateSlice = createSlice({
   },
 });
 
-export const { clearError } = applicationLiveStateSlice.actions;
-
 export { ApplicationLiveStateSnapshot as ApplicationLiveStateSnapshotModel } from "pipe/pkg/app/web/model/application_live_state_pb";