Implement list refresh buttons

pkg/app/web/src/modules/applications.test.ts

@@ -12,6 +12,7 @@ describe("applicationsSlice reducer", () => {
         "disabling": Object {},
         "entities": Object {},
         "ids": Array [],
+        "loading": false,
         "syncing": Object {},
       }
     `);

pkg/app/web/src/modules/applications.ts

@@ -103,19 +103,28 @@ export const applicationsSlice = createSlice({
   name: "applications",
   initialState: applicationsAdapter.getInitialState<{
     adding: boolean;
+    loading: boolean;
     syncing: Record<string, boolean>;
     disabling: Record<string, boolean>;
   }>({
     adding: false,
+    loading: false,
     syncing: {},
     disabling: {},
   }),
   reducers: {},
   extraReducers: (builder) => {
     builder
+      .addCase(fetchApplications.pending, (state) => {
+        state.loading = true;
+      })
       .addCase(fetchApplications.fulfilled, (state, action) => {
         applicationsAdapter.removeAll(state);
         applicationsAdapter.upsertMany(state, action.payload);
+        state.loading = false;
+      })
+      .addCase(fetchApplications.rejected, (state) => {
+        state.loading = false;
       })
       .addCase(fetchApplication.fulfilled, (state, action) => {
         if (action.payload) {

pkg/app/web/src/pages/applications/index.tsx

@@ -4,10 +4,12 @@ import {
   Drawer,
   makeStyles,
   Toolbar,
+  CircularProgress,
 } from "@material-ui/core";
 import { Add } from "@material-ui/icons";
 import CloseIcon from "@material-ui/icons/Close";
 import FilterIcon from "@material-ui/icons/FilterList";
+import RefreshIcon from "@material-ui/icons/Refresh";
 import React, { FC, memo, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { AddApplicationForm } from "../../components/add-application-form";
@@ -18,7 +20,7 @@ import { addApplication, fetchApplications } from "../../modules/applications";
 import { AppDispatch } from "../../store";
 import { selectProjectName } from "../../modules/me";
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   main: {
     display: "flex",
     overflow: "hidden",
@@ -27,15 +29,23 @@ const useStyles = makeStyles(() => ({
   toolbarSpacer: {
     flexGrow: 1,
   },
+  buttonProgress: {
+    color: theme.palette.primary.main,
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    marginTop: -12,
+    marginLeft: -12,
+  },
 }));
 
 export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
   const classes = useStyles();
   const dispatch = useDispatch<AppDispatch>();
   const [isOpenForm, setIsOpenForm] = useState(false);
   const [isOpenFilter, setIsOpenFilter] = useState(false);
-  const isAdding = useSelector<AppState, boolean>(
-    (state) => state.applications.adding
+  const [isLoading, isAdding] = useSelector<AppState, [boolean, boolean]>(
+    (state) => [state.applications.loading, state.applications.adding]
   );
   const projectName = useSelector<AppState, string>((state) =>
     selectProjectName(state.me)
@@ -49,6 +59,10 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
     dispatch(fetchApplications());
   };
 
+  const handleRefresh = (): void => {
+    dispatch(fetchApplications());
+  };
+
   useEffect(() => {
     dispatch(fetchApplications());
   }, [dispatch]);
@@ -64,6 +78,17 @@ export const ApplicationIndexPage: FC = memo(function ApplicationIndexPage() {
           ADD
         </Button>
         <div className={classes.toolbarSpacer} />
+        <Button
+          color="primary"
+          startIcon={<RefreshIcon />}
+          onClick={handleRefresh}
+          disabled={isLoading}
+        >
+          {"REFRESH"}
+          {isLoading && (
+            <CircularProgress size={24} className={classes.buttonProgress} />
+          )}
+        </Button>
         <Button
           color="primary"
           startIcon={isOpenFilter ? <CloseIcon /> : <FilterIcon />}

pkg/app/web/src/pages/deployments/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "@material-ui/core";
 import CloseIcon from "@material-ui/icons/Close";
 import FilterIcon from "@material-ui/icons/FilterList";
+import RefreshIcon from "@material-ui/icons/Refresh";
 import dayjs from "dayjs";
 import React, {
   FC,
@@ -153,12 +154,23 @@ export const DeploymentIndexPage: FC = memo(function DeploymentIndexPage() {
     dispatch(fetchDeployments());
   }, [dispatch]);
 
+  const handleRefresh = (): void => {
+    dispatch(fetchDeployments());
+  };
+
   const dates = Object.keys(groupedDeployments).sort(sortComp);
 
   return (
     <div className={classes.root}>
       <Toolbar variant="dense">
         <div className={classes.toolbarSpacer} />
+        <Button
+          color="primary"
+          startIcon={<RefreshIcon />}
+          onClick={handleRefresh}
+        >
+          {"REFRESH"}
+        </Button>
         <Button
           color="primary"
           startIcon={isOpenFilter ? <CloseIcon /> : <FilterIcon />}