show antd notification on deployment errors

uselagoon · Oct 13, 2023 · 60c718b · 60c718b
1 parent 69aba9d
commit 60c718b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/src/components/CancelDeployment/index.js b/src/components/CancelDeployment/index.js
@@ -12,7 +12,7 @@ const CANCEL_DEPLOYMENT_MUTATION = gql`
 `;
 
 export const CancelDeploymentButton = ({ action, success, loading, error, beforeText, afterText }) => {
-  const [api, contextHolder] = notification.useNotification();
+  const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
 
   const openNotificationWithIcon = errorMessage => {
     api['error']({

diff --git a/src/components/DeployLatest/index.js b/src/components/DeployLatest/index.js
@@ -1,6 +1,7 @@
-import React, {useState} from 'react';
+import React from 'react';
 import { Mutation } from 'react-apollo';
 
+import { notification } from 'antd';
 import Button from 'components/Button';
 import gql from 'graphql-tag';
 
@@ -30,6 +31,18 @@ const DeployLatest = ({ pageEnvironment: environment, onDeploy, ...rest }) => {
     deploymentsEnabled = false;
   }
 
+  const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
+
+  const openNotificationWithIcon = errorMessage => {
+    api['error']({
+      message: 'There was a problem deploying.',
+      description: errorMessage,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+
   return (
     <NewDeployment>
       {!deploymentsEnabled && (
@@ -60,17 +73,12 @@ const DeployLatest = ({ pageEnvironment: environment, onDeploy, ...rest }) => {
               }
               return (
                 <React.Fragment>
-                  <Button action={deploy} disabled={loading}>
-                    {loading ? <span className="loader"></span> : "Deploy"}
+                  {contextHolder}
+                  <Button action={deploy} disabled={loading} loading={loading}>
+                    Deploy
                   </Button>
                   {success && <div className="deploy_result">Deployment queued.</div>}
-
-                  {error && (
-                    <div className="deploy_result">
-                      <p>There was a problem deploying.</p>
-                      <p>{error.message}</p>
-                    </div>
-                  )}
+                  {error && openNotificationWithIcon(error.message)}
                 </React.Fragment>
               );
             }}