feat: disable Update Pages button while a deployment is in progress

packages/visual-editor/locales/platform/en/visual-editor.json

@@ -549,6 +549,9 @@
   "product": "Product",
   "promoBanner": "Promo Banner",
   "promoMedia": "Promo Media",
+  "publishBlocked": {
+    "deploymentInProgress": "Update is disabled while deployment is in progress"
+  },
   "publishError": {
     "components": "delete or fix sections with errors",
     "metaTitle": "fill in Meta Title for all locales by navigating to the top-level Page component's settings",

packages/visual-editor/src/internal/components/InternalThemeEditor.tsx

@@ -193,6 +193,7 @@ export const InternalThemeEditor = ({
               setClearLocalChangesModalOpen={setClearLocalChangesModalOpen}
               totalEntityCount={templateMetadata.totalEntityCount}
               localDev={localDev}
+              deploymentInProgress={templateMetadata.deploymentInProgress}
             />
           ),
           actionBar: () => <></>,

packages/visual-editor/src/internal/puck/components/LayoutHeader.tsx

@@ -124,6 +124,18 @@ export const LayoutHeader = (props: LayoutHeaderProps) => {
     }
   };
 
+  const deploymentInProgress = templateMetadata.deploymentInProgress;
+  const publishDisabled =
+    histories.length === 1 || hasErrors || deploymentInProgress;
+  const publishTooltipMessage = deploymentInProgress
+    ? pt(
+        "publishBlocked.deploymentInProgress",
+        "Update is disabled while deployment is in progress"
+      )
+    : hasErrors
+      ? getPublishErrorMessage(errorSources, errorDetails)
+      : undefined;
+
   return (
     <>
       <LayoutApprovalModal
@@ -263,22 +275,26 @@ export const LayoutHeader = (props: LayoutHeaderProps) => {
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span
-                    tabIndex={hasErrors ? 0 : -1}
-                    className={hasErrors ? "ve-cursor-not-allowed" : ""}
+                    tabIndex={publishDisabled ? 0 : -1}
+                    className={publishDisabled ? "ve-cursor-not-allowed" : ""}
+                    role={publishDisabled ? "button" : undefined}
+                    aria-disabled={publishDisabled || undefined}
                   >
                     <Button
                       variant="secondary"
-                      disabled={histories.length === 1 || hasErrors}
+                      disabled={publishDisabled}
                       onClick={onButtonClick}
-                      className={hasErrors ? "ve-pointer-events-none" : ""}
+                      className={
+                        publishDisabled ? "ve-pointer-events-none" : ""
+                      }
                     >
                       {buttonText}
                     </Button>
                   </span>
                 </TooltipTrigger>
-                {hasErrors && (
+                {publishTooltipMessage && (
                   <TooltipContent className="ve-max-w-[320px] ve-whitespace-pre-line ve-text-left">
-                    <p>{getPublishErrorMessage(errorSources, errorDetails)}</p>
+                    <p>{publishTooltipMessage}</p>
                   </TooltipContent>
                 )}
               </Tooltip>