Use deploying field for application sync status displaying

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

@@ -5,7 +5,11 @@ import { MemoryRouter } from "react-router-dom";
 import { createStore, render, screen, waitFor } from "../../test-utils";
 import { server } from "../mocks/server";
 import { AppState } from "../modules";
-import { syncApplication } from "../modules/applications";
+import {
+  Application,
+  syncApplication,
+  ApplicationSyncStatus,
+} from "../modules/applications";
 import { SyncStrategy } from "../modules/deployments";
 import { dummyApplication } from "../__fixtures__/dummy-application";
 import { dummyApplicationLiveState } from "../__fixtures__/dummy-application-live-state";
@@ -25,11 +29,25 @@ afterAll(() => {
   server.close();
 });
 
+const deployingApp: Application = {
+  ...dummyApplication,
+  deploying: true,
+  id: "deploying-app",
+  syncState: {
+    status: ApplicationSyncStatus.DEPLOYING,
+    headDeploymentId: "",
+    reason: "",
+    shortReason: "",
+    timestamp: 0,
+  },
+};
+
 const baseState: DeepPartial<AppState> = {
   applications: {
-    ids: [dummyApplication.id],
+    ids: [dummyApplication.id, deployingApp.id],
     entities: {
       [dummyApplication.id]: dummyApplication,
+      [deployingApp.id]: deployingApp,
     },
     adding: false,
     disabling: {},
@@ -75,6 +93,20 @@ describe("ApplicationDetail", () => {
     expect(screen.getByRole("button", { name: /sync$/i })).toBeInTheDocument();
   });
 
+  it("shows application sync state as deploying if application is deploying", () => {
+    const store = createStore(baseState);
+    render(
+      <MemoryRouter>
+        <ApplicationDetail applicationId={deployingApp.id} />
+      </MemoryRouter>,
+      {
+        store,
+      }
+    );
+
+    expect(screen.getByText("Deploying")).toBeInTheDocument();
+  });
+
   describe("sync", () => {
     it("dispatch sync action if click sync button", async () => {
       const store = createStore(baseState);

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

@@ -24,6 +24,7 @@ import { AppState } from "../modules";
 import {
   Application,
   ApplicationDeploymentReference,
+  ApplicationSyncStatus,
   fetchApplication,
   selectById as selectApplicationById,
   syncApplication,
@@ -235,10 +236,17 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
         {app?.syncState ? (
           <>
             <Box display="flex" alignItems="center">
-              <SyncStatusIcon status={app.syncState.status} />
+              <SyncStatusIcon
+                status={app.syncState.status}
+                deploying={app.deploying}
+              />
               <Box display="flex" alignItems="baseline">
                 <Typography variant="h6" className={classes.syncStatusText}>
-                  {APPLICATION_SYNC_STATUS_TEXT[app.syncState.status]}
+                  {app.deploying
+                    ? APPLICATION_SYNC_STATUS_TEXT[
+                        ApplicationSyncStatus.DEPLOYING
+                      ]
+                    : APPLICATION_SYNC_STATUS_TEXT[app.syncState.status]}
                 </Typography>
               </Box>
 

pkg/app/web/src/components/application-list-item.tsx

@@ -116,7 +116,10 @@ export const ApplicationListItem: FC<Props> = memo(
             <Box display="flex" alignItems="center">
               {app.syncState ? (
                 <>
-                  <SyncStatusIcon status={app.syncState.status} />
+                  <SyncStatusIcon
+                    status={app.syncState.status}
+                    deploying={app.deploying}
+                  />
                   <Typography className={classes.statusText}>
                     {APPLICATION_SYNC_STATUS_TEXT[app.syncState.status]}
                   </Typography>

pkg/app/web/src/components/sync-status-icon.stories.tsx

@@ -9,9 +9,12 @@ export default {
 
 export const overview: React.FC = () => (
   <>
-    <SyncStatusIcon status={ApplicationSyncStatus.UNKNOWN} />
-    <SyncStatusIcon status={ApplicationSyncStatus.SYNCED} />
-    <SyncStatusIcon status={ApplicationSyncStatus.DEPLOYING} />
-    <SyncStatusIcon status={ApplicationSyncStatus.OUT_OF_SYNC} />
+    <SyncStatusIcon status={ApplicationSyncStatus.UNKNOWN} deploying={false} />
+    <SyncStatusIcon status={ApplicationSyncStatus.SYNCED} deploying={false} />
+    <SyncStatusIcon status={ApplicationSyncStatus.DEPLOYING} deploying={true} />
+    <SyncStatusIcon
+      status={ApplicationSyncStatus.OUT_OF_SYNC}
+      deploying={false}
+    />
   </>
 );

pkg/app/web/src/components/sync-status-icon.tsx

@@ -29,11 +29,16 @@ const useStyles = makeStyles((theme) => ({
 
 interface Props {
   status: ApplicationSyncStatus;
+  deploying: boolean;
 }
 
-export const SyncStatusIcon: FC<Props> = ({ status }) => {
+export const SyncStatusIcon: FC<Props> = ({ status, deploying }) => {
   const classes = useStyles();
 
+  if (deploying) {
+    return <Cached className={classes[ApplicationSyncStatus.DEPLOYING]} />;
+  }
+
   switch (status) {
     case ApplicationSyncStatus.UNKNOWN:
       return <Info className={classes[status]} />;