Bug 1801419: Show an error dialog when creation of a connection fails

openshift · Feb 10, 2020 · 84c8894 · 84c8894
1 parent 2f0c575
commit 84c8894
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/frontend/packages/dev-console/src/components/topology/componentUtils.ts b/frontend/packages/dev-console/src/components/topology/componentUtils.ts
@@ -21,6 +21,7 @@ import { moveNodeToGroup } from './components/moveNodeToGroup';
 import { TYPE_CONNECTS_TO, TYPE_WORKLOAD, TYPE_KNATIVE_SERVICE, TYPE_EVENT_SOURCE } from './const';
 import './components/GraphComponent.scss';
 import { graphContextMenu, groupContextMenu } from './nodeContextMenu';
+import { errorModal } from '@console/internal/components/modals';
 
 type GraphProps = {
   element: Graph;
@@ -224,6 +225,7 @@ const edgeDragSourceSpec = (
     replaceTargetNode?: Node,
     serviceBindingFlag?: boolean,
   ) => Promise<K8sResourceKind[] | K8sResourceKind>,
+  failureTitle: string = 'Error moving connection',
 ): DragSourceSpec<DragObjectWithType, Node, { dragging: boolean }, EdgeProps> => ({
   item: { type },
   operation: MOVE_CONNECTOR_OPERATION,
@@ -237,7 +239,14 @@ const edgeDragSourceSpec = (
   end: (dropResult, monitor, props) => {
     props.element.setEndPoint();
     if (monitor.didDrop() && dropResult) {
-      callback(props.element.getSource(), dropResult, props.element.getTarget(), serviceBinding);
+      callback(
+        props.element.getSource(),
+        dropResult,
+        props.element.getTarget(),
+        serviceBinding,
+      ).catch((error) => {
+        errorModal({ title: failureTitle, error: error.message, showIcon: true });
+      });
     }
   },
   collect: (monitor) => ({
@@ -249,18 +258,26 @@ const createConnectorCallback = (serviceBinding: boolean) => (
   source: Node,
   target: Node | Graph,
 ): React.ReactElement[] | null => {
+  if (source === target) {
+    return null;
+  }
+
   if (isGraph(target)) {
     return graphContextMenu(target, source);
   }
   if (target.isGroup()) {
     return groupContextMenu(target, source);
   }
-  createConnection(source, target, null, serviceBinding);
+  createConnection(source, target, null, serviceBinding).catch((error) => {
+    errorModal({ title: 'Error creating connection', error: error.message, showIcon: true });
+  });
   return null;
 };
 
 const removeConnectorCallback = (edge: Edge): void => {
-  removeConnection(edge);
+  removeConnection(edge).catch((error) => {
+    errorModal({ title: 'Error removing connection', error: error.message });
+  });
   return null;
 };
 

diff --git a/frontend/packages/dev-console/src/components/topology/topology-utils.ts b/frontend/packages/dev-console/src/components/topology/topology-utils.ts
@@ -792,7 +792,7 @@ export const createTopologyResourceConnection = (
   serviceBindingFlag: boolean,
 ): Promise<K8sResourceKind[] | K8sResourceKind> => {
   if (!source || !target || source === target) {
-    return Promise.reject();
+    return Promise.reject(new Error('Can not create a connection from a node to itself.'));
   }
 
   const sourceObj = getTopologyResourceObject(source);
@@ -809,7 +809,7 @@ export const createTopologyResourceConnection = (
               .then(resolve)
               .catch(reject);
           })
-          .catch(resolve);
+          .catch(reject);
       });
     }
 

diff --git a/frontend/public/components/modals/_modals.scss b/frontend/public/components/modals/_modals.scss
@@ -2,7 +2,12 @@
   display: flex;
 }
 
-.co-delete-modal__icon {
+.co-error-modal__icon-header > h1 {
+  display: flex;
+  align-items: center;
+}
+
+.co-delete-modal__icon, .co-error-modal__icon {
   flex: 0 0 auto;
   font-size: 30px;
   margin-right: 15px;

diff --git a/frontend/public/components/modals/error-modal.jsx b/frontend/public/components/modals/error-modal.jsx
@@ -1,11 +1,21 @@
 import * as React from 'react';
+import * as classNames from 'classnames';
 import { ActionGroup, Button } from '@patternfly/react-core';
+import { RedExclamationCircleIcon } from '@console/shared';
 
 import { createModalLauncher, ModalTitle, ModalBody, ModalFooter } from '../factory/modal';
 
-export const ModalErrorContent = ({ error, title = 'Error', cancel = undefined }) => (
+export const ModalErrorContent = ({
+  error,
+  title = 'Error',
+  cancel = undefined,
+  showIcon = false,
+}) => (
   <div className="modal-content">
-    <ModalTitle>{title}</ModalTitle>
+    <ModalTitle className={classNames('modal-header', { 'co-error-modal__icon-header': showIcon })}>
+      {showIcon && <RedExclamationCircleIcon className="co-error-modal__icon" />}
+      {title}
+    </ModalTitle>
     <ModalBody>{error}</ModalBody>
     <ModalFooter inProgress={false} errorMessage="">
       <ActionGroup className="pf-c-form pf-c-form__actions--right pf-c-form__group--no-top-margin">