Fix: Show actual gql errors for Tasks (#237)

* show gql error messages

* show error notification instead

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';
 

src/components/AddTask/components/Error.tsx

@@ -1,4 +1,27 @@
-import React from 'react';
+import React, { FC, useEffect } from 'react';
 
-const Error = () => <div>Error.</div>;
+import { notification } from 'antd';
+
+interface Props {
+  errMessage: string;
+}
+const Error: FC<Props> = ({ errMessage }) => {
+  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;

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>

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);

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);
           }),