From f2fd330225f08e2168fff1234b228960b552e64c Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Mon, 8 Apr 2024 22:40:10 +0400
Subject: [PATCH 1/2] show gql error messages

---
 src/components/AddTask/components/DrushCron.js | 1 -
 src/components/AddTask/components/Error.tsx    | 9 +++++++--
 src/components/AddTask/index.js                | 4 +++-
 src/components/AddTask/logic.js                | 9 ++++++---
 src/lib/ApiConnection.js                       | 4 +++-
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/AddTask/components/DrushCron.js b/src/components/AddTask/components/DrushCron.js
index 205b2113..fc43b6cc 100644
--- a/src/components/AddTask/components/DrushCron.js
+++ b/src/components/AddTask/components/DrushCron.js
@@ -4,7 +4,6 @@ import ReactSelect from 'react-select';
 
 import Button from 'components/Button';
 import gql from 'graphql-tag';
-import { bp, color, fontSize } from 'lib/variables';
 
 import { SelectWrapper } from './Styles';
 
diff --git a/src/components/AddTask/components/Error.tsx b/src/components/AddTask/components/Error.tsx
index f9993b56..159be6aa 100644
--- a/src/components/AddTask/components/Error.tsx
+++ b/src/components/AddTask/components/Error.tsx
@@ -1,4 +1,9 @@
-import React from 'react';
+import React, { FC } from 'react';
 
-const Error = () => <div>Error.</div>;
+interface Props {
+  errMessage: string;
+}
+const Error: FC<Props> = ({ errMessage }) => {
+  return <div>{errMessage}</div>;
+};
 export default Error;
diff --git a/src/components/AddTask/index.js b/src/components/AddTask/index.js
index d453c513..df0abf5a 100644
--- a/src/components/AddTask/index.js
+++ b/src/components/AddTask/index.js
@@ -25,6 +25,7 @@ const AddTask = ({
   setSelectedTask,
   onCompleted,
   onError,
+  errMessage,
   options,
   onNewTask,
 }) => {
@@ -70,7 +71,8 @@ const AddTask = ({
                 projectEnvironments={projectEnvironments}
                 selectedTask={selectedTask}
                 onCompleted={onCompleted}
-                onError={onError}
+                onError={e => onError(e.message)}
+                errMessage={errMessage}
                 onNewTask={onNewTask}
               />
             </div>
diff --git a/src/components/AddTask/logic.js b/src/components/AddTask/logic.js
index b296ad4a..a6e3d702 100644
--- a/src/components/AddTask/logic.js
+++ b/src/components/AddTask/logic.js
@@ -13,6 +13,8 @@ import withState from 'recompose/withState';
 const { publicRuntimeConfig } = getConfig();
 
 const withSelectedTask = withState('selectedTask', 'setSelectedTask', null);
+const withErrMessage = withState('errMessage', 'setErrMessage', null);
+
 const withOptions = withProps(({ pageEnvironment }) => {
   let options = [
     {
@@ -78,8 +80,9 @@ const withNewTaskHanders = withHandlers({
       setSelectedTask('Completed');
     },
   onError:
-    ({ setSelectedTask }) =>
-    () => {
+    ({ setSelectedTask, setErrMessage }) =>
+    errMsg => {
+      setErrMessage(errMsg);
       setSelectedTask('Error');
     },
 });
@@ -117,4 +120,4 @@ const withProjectEnvironments = BaseComponent =>
     }
   };
 
-export default compose(withSelectedTask, withNewTaskHanders, withOptions, withProjectEnvironments);
+export default compose(withSelectedTask, withErrMessage, withNewTaskHanders, withOptions, withProjectEnvironments);
diff --git a/src/lib/ApiConnection.js b/src/lib/ApiConnection.js
index 6f68de4b..34d50b56 100644
--- a/src/lib/ApiConnection.js
+++ b/src/lib/ApiConnection.js
@@ -56,7 +56,9 @@ const ApiConnection = ({ children }) => (
           onError(({ graphQLErrors, networkError }) => {
             if (graphQLErrors)
               graphQLErrors.map(({ message, locations, path }) =>
-                console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
+                console.log(
+                  `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${path}`
+                )
               );
             if (networkError) console.log('[Network error]', networkError);
           }),

From 3eecf37a13db996c5f77a3e3434718145342659e Mon Sep 17 00:00:00 2001
From: Davit <davedabyeet@gmail.com>
Date: Thu, 11 Apr 2024 08:59:17 +0400
Subject: [PATCH 2/2] show error notification instead

---
 src/components/AddTask/components/Error.tsx | 22 +++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/AddTask/components/Error.tsx b/src/components/AddTask/components/Error.tsx
index 159be6aa..4b3a77ac 100644
--- a/src/components/AddTask/components/Error.tsx
+++ b/src/components/AddTask/components/Error.tsx
@@ -1,9 +1,27 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
+
+import { notification } from 'antd';
 
 interface Props {
   errMessage: string;
 }
 const Error: FC<Props> = ({ errMessage }) => {
-  return <div>{errMessage}</div>;
+  const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
+
+  const showError = (errorMessage: string) => {
+    api['error']({
+      message: 'There was a problem running a task.',
+      description: errorMessage,
+      placement: 'top',
+      duration: 0,
+      style: { width: '500px' },
+    });
+  };
+
+  useEffect(() => {
+    if (errMessage) showError(errMessage);
+  }, [errMessage]);
+
+  return <>{contextHolder}</>;
 };
 export default Error;