Design Review: Use Alert for Deploy error messages

admin/src/components/DeployButton/ErrorUtils.js

@@ -0,0 +1,61 @@
+/**
+ * @typedef {import("./typedefs").ErrorStateType} ErrorStateType
+ * @typedef {import('../../components/Notifications/typedefs').NotificationConfig} NotificationConfig
+ */
+
+/**
+ * @param {ErrorStateType} type
+ * @returns {NotificationConfig} Error Notification
+ */
+export const getErrorNotification = (type) => {
+  /** @type {NotificationConfig} */
+  const baseConfig = {
+    id: type,
+    blockTransition: true,
+    type: "warning",
+  };
+
+  switch (type) {
+    case "MISSING_CONFIG_OBJECT":
+      return {
+        ...baseConfig,
+        message: { id: "deploy-error-message.missing-config-object" },
+      };
+
+    case "MISSING_CONFIG_VARIABLE":
+      return {
+        ...baseConfig,
+        message: { id: "deploy-error-message.missing-config-variable.intro" },
+        link: {
+          label: {
+            id: "deploy-error-message.missing-config-variable.link-text",
+          },
+          url: "/settings/vercel-deploy",
+        },
+      };
+
+    case "ERROR_AVAILABILITY":
+      return {
+        ...baseConfig,
+        message: { id: "deploy-error-message.error-availability" },
+      };
+
+    case "ERROR_FORBIDDEN":
+      return {
+        ...baseConfig,
+        message: { id: "deploy-error-message.error-forbidden" },
+      };
+
+    case "ERROR_DEPLOY":
+      return {
+        ...baseConfig,
+        message: { id: "deploy-error-message.error-deploy" },
+      };
+
+    default:
+      return {
+        ...baseConfig,
+        message: { id: "deploy-error-message.default" },
+      };
+  }
+};

admin/src/components/DeployButton/index.js

@@ -4,23 +4,25 @@
  *
  */
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
+import { useNotification } from "@strapi/helper-plugin";
 import { Button } from "@strapi/design-system/Button";
 import { Loader } from "@strapi/design-system/Loader";
 import Plus from "@strapi/icons/Plus";
 
 import SymmetricBox from "../../components/SymmetricBox";
-import DeployErrorMessage from "../../components/DeployErrorMessage";
-import { runDeploy } from "../../utils/api";
 import FormattedMessage from "../FormattedMessage";
+import { getErrorNotification } from "./ErrorUtils";
+import { runDeploy } from "../../utils/api";
 import { useFormattedMessage } from "../../hooks/useFormattedMessage";
 
 /**
  * @typedef {import('./typedefs').Props} Props
  * @typedef {import('./typedefs').FeatureAvailability} FeatureAvailability
  * @typedef {import('./typedefs').ApiErrorType} ApiErrorType
- * @typedef {import('../../components/DeployErrorMessage/typedefs').ErrorStateType} DeployErrorStateType
+ * @typedef {import('./typedefs').ErrorStateType} DeployErrorStateType
+ * @typedef {import('../../components/Notifications/typedefs').NotificationConfig} NotificationConfig
  */
 
 /**
@@ -59,6 +61,8 @@ const DeployButton = ({
   runDeployAvailability,
   onDeployed,
 }) => {
+  /** @type {(config: NotificationConfig) => void} */
+  const toggleNotification = useNotification();
   const labelLoader = useFormattedMessage("deploy-button.loader");
 
   const [isLoading, setIsLoading] = useState(false);
@@ -70,7 +74,14 @@ const DeployButton = ({
     availabilityApiError,
     runDeployAvailability
   );
-  const hasDeployedSuccessfully = deployErrorState === "AVAILABLE";
+
+  useEffect(() => {
+    const hasDeployedSuccessfully = deployErrorState === "AVAILABLE";
+    if (!hasDeployedSuccessfully) {
+      const notification = getErrorNotification(deployErrorState);
+      toggleNotification(notification);
+    }
+  }, [deployErrorState, toggleNotification, getErrorNotification]);
 
   const runDeployHandler = async () => {
     try {
@@ -94,11 +105,6 @@ const DeployButton = ({
           <Loader small>{labelLoader}</Loader>
         </SymmetricBox>
       )}
-      {!hasDeployedSuccessfully && (
-        <SymmetricBox paddingHorizontal={1}>
-          <DeployErrorMessage type={deployErrorState} />
-        </SymmetricBox>
-      )}
       <SymmetricBox paddingHorizontal={4}>
         <Button onClick={runDeployHandler} disabled={!canDeploy || isLoading}>
           <div style={{ display: "flex", alignItems: "center" }}>

admin/src/components/DeployButton/typedefs.js

@@ -3,6 +3,11 @@
  * @typedef {import('../../../../types/typedefs').ApiErrorType} ApiErrorType
  */
 
+/**
+ * Describe the type of error state to display
+ * @typedef {(FeatureAvailability|"ERROR_AVAILABILITY"|"ERROR_DEPLOY"|"ERROR_FORBIDDEN")} ErrorStateType
+ */
+
 /**
  * Callback to notify that the list of deployments has been fetched
  * @callback Deployed