Fix application sync status displaying

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { dummyApplicationSyncState } from "../__fixtures__/dummy-application";
+
+import { AppSyncStatus } from "./app-sync-status";
+
+export default {
+  title: "application/AppSyncStatus",
+  component: AppSyncStatus,
+};
+
+export const overview: React.FC = () => (
+  <AppSyncStatus deploying={false} syncState={dummyApplicationSyncState} />
+);
+
+export const large: React.FC = () => (
+  <AppSyncStatus
+    deploying={false}
+    size="large"
+    syncState={dummyApplicationSyncState}
+  />
+);
+
+export const deploying: React.FC = () => (
+  <AppSyncStatus deploying={true} syncState={dummyApplicationSyncState} />
+);

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

@@ -0,0 +1,62 @@
+import React, { FC } from "react";
+import { Box, makeStyles, Typography } from "@material-ui/core";
+import { SyncStatusIcon } from "./sync-status-icon";
+import { APPLICATION_SYNC_STATUS_TEXT } from "../constants/application-sync-status-text";
+import {
+  ApplicationSyncState,
+  ApplicationSyncStatus,
+} from "../modules/applications";
+import { UI_TEXT_NOT_AVAILABLE_TEXT } from "../constants/ui-text";
+
+const useStyles = makeStyles((theme) => ({
+  statusText: {
+    marginLeft: theme.spacing(0.5),
+  },
+}));
+
+interface Props {
+  syncState?: ApplicationSyncState;
+  deploying: boolean;
+  className?: string;
+  size?: "medium" | "large";
+}
+
+export const AppSyncStatus: FC<Props> = ({
+  syncState,
+  deploying,
+  className,
+  size = "medium",
+}) => {
+  const classes = useStyles();
+  const fontVariant = size === "medium" ? "body1" : "h6";
+
+  if (deploying) {
+    return (
+      <Box display="flex" alignItems="center" className={className}>
+        <SyncStatusIcon status={ApplicationSyncStatus.DEPLOYING} />
+        <Typography
+          className={classes.statusText}
+          variant={fontVariant}
+          component="span"
+        >
+          {APPLICATION_SYNC_STATUS_TEXT[ApplicationSyncStatus.DEPLOYING]}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box display="flex" alignItems="center" className={className}>
+      {syncState ? <SyncStatusIcon status={syncState.status} /> : null}
+      <Typography
+        className={classes.statusText}
+        variant={fontVariant}
+        component="span"
+      >
+        {syncState
+          ? APPLICATION_SYNC_STATUS_TEXT[syncState.status]
+          : UI_TEXT_NOT_AVAILABLE_TEXT}
+      </Typography>
+    </Box>
+  );
+};

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

@@ -16,15 +16,13 @@ import React, { FC, memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Link as RouterLink } from "react-router-dom";
 import { APPLICATION_KIND_TEXT } from "../constants/application-kind";
-import { APPLICATION_SYNC_STATUS_TEXT } from "../constants/application-sync-status-text";
 import { APPLICATION_HEALTH_STATUS_TEXT } from "../constants/health-status-text";
 import { PAGE_PATH_DEPLOYMENTS } from "../constants/path";
 import { UI_TEXT_REFRESH } from "../constants/ui-text";
 import { AppState } from "../modules";
 import {
   Application,
   ApplicationDeploymentReference,
-  ApplicationSyncStatus,
   fetchApplication,
   selectById as selectApplicationById,
   syncApplication,
@@ -39,11 +37,11 @@ import {
   selectById as selectEnvById,
 } from "../modules/environments";
 import { Piped, selectById as selectPipeById } from "../modules/pipeds";
+import { AppSyncStatus } from "./app-sync-status";
 import { DetailTableRow } from "./detail-table-row";
 import { ApplicationHealthStatusIcon } from "./health-status-icon";
 import { SplitButton } from "./split-button";
 import { SyncStateReason } from "./sync-state-reason";
-import { SyncStatusIcon } from "./sync-status-icon";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -63,10 +61,12 @@ const useStyles = makeStyles((theme) => ({
     color: theme.palette.text.secondary,
     marginLeft: theme.spacing(1),
   },
-  syncStatusText: {
-    marginLeft: theme.spacing(0.5),
+  appSyncState: {
     marginRight: theme.spacing(1),
   },
+  liveStateText: {
+    marginLeft: theme.spacing(0.5),
+  },
   buttonProgress: {
     color: theme.palette.primary.main,
     position: "absolute",
@@ -233,29 +233,22 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
           </Typography>
         </Box>
 
-        {app?.syncState ? (
+        {app ? (
           <>
             <Box display="flex" alignItems="center">
-              <SyncStatusIcon
-                status={app.syncState.status}
+              <AppSyncStatus
+                syncState={app.syncState}
                 deploying={app.deploying}
+                size="large"
+                className={classes.appSyncState}
               />
-              <Box display="flex" alignItems="baseline">
-                <Typography variant="h6" className={classes.syncStatusText}>
-                  {app.deploying
-                    ? APPLICATION_SYNC_STATUS_TEXT[
-                        ApplicationSyncStatus.DEPLOYING
-                      ]
-                    : APPLICATION_SYNC_STATUS_TEXT[app.syncState.status]}
-                </Typography>
-              </Box>
 
               {liveState ? (
                 <>
                   <ApplicationHealthStatusIcon
                     health={liveState.healthStatus}
                   />
-                  <Typography variant="h6" className={classes.syncStatusText}>
+                  <Typography variant="h6" className={classes.liveStateText}>
                     {APPLICATION_HEALTH_STATUS_TEXT[liveState.healthStatus]}
                   </Typography>
                 </>
@@ -264,10 +257,12 @@ export const ApplicationDetail: FC<Props> = memo(function ApplicationDetail({
               )}
             </Box>
 
-            <SyncStateReason
-              summary={app.syncState.shortReason}
-              detail={app.syncState.reason}
-            />
+            {app.syncState && (
+              <SyncStateReason
+                summary={app.syncState.shortReason}
+                detail={app.syncState.reason}
+              />
+            )}
           </>
         ) : (
           <Skeleton height={32} width={200} />

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

@@ -7,50 +7,44 @@ import {
   MenuItem,
   TableCell,
   TableRow,
-  Typography,
 } from "@material-ui/core";
 import MenuIcon from "@material-ui/icons/MoreVert";
 import dayjs from "dayjs";
 import React, { FC, memo, useState } from "react";
 import { useSelector } from "react-redux";
 import { Link as RouterLink } from "react-router-dom";
 import { APPLICATION_KIND_TEXT } from "../constants/application-kind";
-import { APPLICATION_SYNC_STATUS_TEXT } from "../constants/application-sync-status-text";
 import { PAGE_PATH_APPLICATIONS } from "../constants/path";
 import { AppState } from "../modules";
 import { Application, selectById } from "../modules/applications";
 import {
   Environment,
   selectById as selectEnvById,
 } from "../modules/environments";
-import { SyncStatusIcon } from "./sync-status-icon";
 import clsx from "clsx";
+import { AppSyncStatus } from "./app-sync-status";
+import { UI_TEXT_NOT_AVAILABLE_TEXT } from "../constants/ui-text";
 
 const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(2),
     flex: 1,
     overflow: "auto",
   },
-  statusText: {
-    marginLeft: theme.spacing(1),
-  },
   disabled: {
     background: theme.palette.grey[200],
   },
 }));
 
 const EmptyDeploymentData: FC = () => (
   <>
-    <TableCell>{NOT_AVAILABLE_TEXT}</TableCell>
-    <TableCell>{NOT_AVAILABLE_TEXT}</TableCell>
-    <TableCell>{NOT_AVAILABLE_TEXT}</TableCell>
-    <TableCell>{NOT_AVAILABLE_TEXT}</TableCell>
+    <TableCell>{UI_TEXT_NOT_AVAILABLE_TEXT}</TableCell>
+    <TableCell>{UI_TEXT_NOT_AVAILABLE_TEXT}</TableCell>
+    <TableCell>{UI_TEXT_NOT_AVAILABLE_TEXT}</TableCell>
+    <TableCell>{UI_TEXT_NOT_AVAILABLE_TEXT}</TableCell>
   </>
 );
 
-const NOT_AVAILABLE_TEXT = "N/A";
-
 interface Props {
   applicationId: string;
   onEdit: (id: string) => void;
@@ -114,19 +108,10 @@ export const ApplicationListItem: FC<Props> = memo(
         <TableRow className={clsx({ [classes.disabled]: app.disabled })}>
           <TableCell>
             <Box display="flex" alignItems="center">
-              {app.syncState ? (
-                <>
-                  <SyncStatusIcon
-                    status={app.syncState.status}
-                    deploying={app.deploying}
-                  />
-                  <Typography className={classes.statusText}>
-                    {APPLICATION_SYNC_STATUS_TEXT[app.syncState.status]}
-                  </Typography>
-                </>
-              ) : (
-                NOT_AVAILABLE_TEXT
-              )}
+              <AppSyncStatus
+                syncState={app.syncState}
+                deploying={app.deploying}
+              />
             </Box>
           </TableCell>
           <TableCell>
@@ -144,12 +129,12 @@ export const ApplicationListItem: FC<Props> = memo(
               <TableCell>{recentlyDeployment.version}</TableCell>
               <TableCell>
                 {recentlyDeployment.trigger?.commit?.hash.slice(0, 8) ??
-                  NOT_AVAILABLE_TEXT}
+                  UI_TEXT_NOT_AVAILABLE_TEXT}
               </TableCell>
               <TableCell>
                 {recentlyDeployment.trigger?.commander ||
                   recentlyDeployment.trigger?.commit?.author ||
-                  NOT_AVAILABLE_TEXT}
+                  UI_TEXT_NOT_AVAILABLE_TEXT}
               </TableCell>
               <TableCell>
                 {dayjs(recentlyDeployment.startedAt * 1000).fromNow()}

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

@@ -9,12 +9,9 @@ export default {
 
 export const overview: React.FC = () => (
   <>
-    <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}
-    />
+    <SyncStatusIcon status={ApplicationSyncStatus.UNKNOWN} />
+    <SyncStatusIcon status={ApplicationSyncStatus.SYNCED} />
+    <SyncStatusIcon status={ApplicationSyncStatus.DEPLOYING} />
+    <SyncStatusIcon status={ApplicationSyncStatus.OUT_OF_SYNC} />
   </>
 );

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

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

pkg/app/web/src/constants/ui-text.ts

@@ -8,3 +8,4 @@ export const UI_TEXT_DELETE = "Delete";
 export const UI_TEXT_FILTER = "FILTER";
 export const UI_TEXT_FILTERED = "FILTERED";
 export const UI_TEXT_HIDE_FILTER = "HIDE FILTER";
+export const UI_TEXT_NOT_AVAILABLE_TEXT = "N/A";