added hover message and new statuses for the site listing page

static/js/components/PublishStatusIndicator.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 
 import { PublishStatus } from "../constants"
 
-const publishStatusMessage = (status: PublishStatus): string => {
+export const publishStatusMessage = (status: PublishStatus | null): string => {
   switch (status) {
     case PublishStatus.NotStarted:
       return "Not started"

static/js/pages/SitesDashboard.tsx

@@ -4,6 +4,7 @@ import { useRequest } from "redux-query-react"
 import { Link } from "react-router-dom"
 
 import PaginationControls from "../components/PaginationControls"
+import { publishStatusMessage } from "../components/PublishStatusIndicator"
 
 import {
   WebsiteListingParams,
@@ -20,7 +21,7 @@ import Dropdown from "../components/Dropdown"
 import UnpublishDialog from "../components/UnpublishDialog"
 import { useURLParamFilter, usePagination } from "../hooks/search"
 import { usePermission } from "../hooks/permissions"
-import { Permission } from "../constants"
+import { Permission, PublishStatus } from "../constants"
 
 function getListingParams(search: string): WebsiteListingParams {
   const qsParams = new URLSearchParams(search)
@@ -30,6 +31,25 @@ function getListingParams(search: string): WebsiteListingParams {
   return searchString ? { offset, search: searchString } : { offset }
 }
 
+export const publishStatusIndicatorClass = (
+  status: PublishStatus | null,
+): string => {
+  switch (status) {
+    case PublishStatus.NotStarted:
+      return "text-secondary"
+    case PublishStatus.Pending:
+    case PublishStatus.Started:
+      return "text-warning"
+    case PublishStatus.Aborted:
+    case PublishStatus.Errored:
+      return "text-danger"
+    case PublishStatus.Success:
+      return "text-success"
+    default:
+      return ""
+  }
+}
+
 export default function SitesDashboard(): JSX.Element {
   const [websiteToUnpublish, setWebsiteToUnpublish] =
     useState<WebsiteInitials | null>(null)
@@ -95,10 +115,28 @@ export default function SitesDashboard(): JSX.Element {
               key={site.uuid}
             >
               <div className="d-flex flex-row">
-                {site.publish_date && !site.unpublished ? (
-                  <div className="text-success">Published</div>
+                {!site.publish_date && !site.live_publish_status ? (
+                  <div className="text-danger">Never Published</div>
+                ) : site.unpublished ? (
+                  <div className="text-dark">Unpublished from Production</div>
+                ) : site.draft_publish_date && !site.publish_date ? (
+                  <div className="text-secondary">Draft</div>
+                ) : PublishStatus.Success === site.live_publish_status ? (
+                  <div
+                    className="text-success"
+                    title={`${publishStatusMessage(site.live_publish_status?.replace("...", "") as PublishStatus)} at ${site.updated_on.slice()}`}
+                  >
+                    Published
+                  </div>
                 ) : (
-                  <div className="text-dark">Draft</div>
+                  <div
+                    className={publishStatusIndicatorClass(
+                      site.live_publish_status,
+                    )}
+                    title={`${publishStatusMessage(site.live_publish_status?.replace("...", "") as PublishStatus)} at ${site.updated_on.slice()}`}
+                  >
+                    {publishStatusMessage(site.live_publish_status)}
+                  </div>
                 )}
                 <Dropdown
                   website={{
@@ -109,7 +147,14 @@ export default function SitesDashboard(): JSX.Element {
                   dropdownBtnID={`${site.uuid}_DropdownMenuButton`}
                   materialIcon={MaterialIcons.MoreVert}
                   dropdownMenu={
-                    site.publish_date && !site.unpublished
+                    site.publish_date &&
+                    !site.unpublished &&
+                    site.live_publish_status !== null &&
+                    [
+                      PublishStatus.Errored,
+                      PublishStatus.Aborted,
+                      PublishStatus.Success,
+                    ].includes(site.live_publish_status)
                       ? websiteDropdownMenuList
                       : websiteDropdownMenuList.filter(
                           (item) => item.id !== "1",

static/js/types/websites.ts

@@ -258,6 +258,7 @@ export type Website = WebsiteStatus & {
   url_path: string | null
   url_suggestion: string
   s3_path: string | null
+  live_publish_status: PublishStatus | null
 }
 
 type WebsiteRoleEditable = typeof ROLE_ADMIN | typeof ROLE_EDITOR

websites/serializers.py

@@ -106,6 +106,7 @@ class Meta:
             "owner",
             "url_path",
             "unpublished",
+            "live_publish_status",
         ]
         extra_kwargs = {"owner": {"write_only": True}}