show warning icon for invalid relationships

Author: mabaasit

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -58,6 +58,7 @@ import {
   relationshipToDiagramEdge,
 } from '../utils/nodes-and-edges';
 import toNS from 'mongodb-ns';
+import { getNamespaceRelationships } from '../utils/utils';
 
 const loadingContainerStyles = css({
   width: '100%',
@@ -230,6 +231,10 @@ const DiagramContent: React.FunctionComponent<{
         !!selectedItems &&
         selectedItems.type === 'collection' &&
         selectedItems.id === coll.ns;
+      const relationships = getNamespaceRelationships(
+        coll.ns,
+        model?.relationships
+      );
       return collectionToDiagramNode({
         ...coll,
         highlightedFields,
@@ -239,6 +244,7 @@ const DiagramContent: React.FunctionComponent<{
             : undefined,
         selected,
         isInRelationshipDrawingMode,
+        relationships,
       });
     });
   }, [

packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx

@@ -21,6 +21,7 @@ import {
 } from './drawer-section-components';
 import { useChangeOnBlur } from './use-change-on-blur';
 import { RelationshipsSection } from './relationships-section';
+import { getNamespaceRelationships } from '../../utils/utils';
 
 type CollectionDrawerContentProps = {
   namespace: string;
@@ -170,12 +171,10 @@ export default connect(
       namespace: collection.ns,
       isDraftCollection: state.diagram?.draftCollection === ownProps.namespace,
       collections: model.collections,
-      relationships: model.relationships.filter((r) => {
-        const [local, foreign] = r.relationship;
-        return (
-          local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
-        );
-      }),
+      relationships: getNamespaceRelationships(
+        ownProps.namespace,
+        model.relationships
+      ),
     };
   },
   {

packages/compass-data-modeling/src/components/drawer/relationships-section.tsx

@@ -8,9 +8,11 @@ import {
   IconButton,
   palette,
   spacing,
+  Tooltip,
 } from '@mongodb-js/compass-components';
 import type { Relationship } from '../../services/data-model-storage';
 import { getDefaultRelationshipName } from '../../utils';
+import { isRelationshipInvalid } from '../../utils/utils';
 
 const titleBtnStyles = css({
   marginLeft: 'auto',
@@ -35,13 +37,23 @@ const relationshipItemStyles = css({
   alignItems: 'center',
 });
 
-const relationshipNameStyles = css({
+const relationshipNameWrapperStyles = css({
   flexGrow: 1,
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing[100],
+  paddingRight: spacing[200],
+});
+
+const relationshipNameStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  minWidth: 0,
-  paddingRight: spacing[200],
+});
+
+const warnIconWrapperStyles = css({
+  display: 'flex',
 });
 
 const relationshipContentStyles = css({
@@ -97,12 +109,29 @@ export const RelationshipsSection: React.FunctionComponent<
                   data-relationship-id={r.id}
                   className={relationshipItemStyles}
                 >
-                  <span
-                    className={relationshipNameStyles}
-                    title={relationshipLabel}
-                  >
-                    {relationshipLabel}
-                  </span>
+                  <div className={relationshipNameWrapperStyles}>
+                    <span
+                      className={relationshipNameStyles}
+                      title={relationshipLabel}
+                    >
+                      {relationshipLabel}
+                    </span>
+                    {isRelationshipInvalid(r) && (
+                      <Tooltip
+                        trigger={
+                          <div className={warnIconWrapperStyles}>
+                            <Icon
+                              glyph="Warning"
+                              color={palette.yellow.light2}
+                            />
+                          </div>
+                        }
+                      >
+                        Can not resolve the relationship - please verify the
+                        linked fields and namespace.
+                      </Tooltip>
+                    )}
+                  </div>
                   <IconButton
                     aria-label="Edit relationship"
                     title="Edit relationship"

packages/compass-data-modeling/src/utils/nodes-and-edges.ts

@@ -13,7 +13,7 @@ import type {
   Relationship,
 } from '../services/data-model-storage';
 import { traverseSchema } from './schema-traversal';
-import { areFieldPathsEqual, isIdField } from './utils';
+import { areFieldPathsEqual, isIdField, isRelationshipInvalid } from './utils';
 
 const NO_HIGHLIGHTED_FIELDS = {};
 
@@ -144,6 +144,7 @@ type CollectionWithRenderOptions = Pick<
   selectedField?: FieldPath;
   selected: boolean;
   isInRelationshipDrawingMode: boolean;
+  relationships: Relationship[];
 };
 
 export function collectionToDiagramNode({
@@ -154,7 +155,15 @@ export function collectionToDiagramNode({
   highlightedFields,
   selected,
   isInRelationshipDrawingMode,
+  relationships,
 }: CollectionWithRenderOptions): NodeProps {
+  let variant: NodeProps['variant'] = undefined;
+  if (relationships.some(isRelationshipInvalid)) {
+    variant = {
+      type: 'warn' as const,
+      warnMessage: 'One or more relationships can not be resolved.',
+    };
+  }
   return {
     id: ns,
     type: 'collection',
@@ -171,6 +180,7 @@ export function collectionToDiagramNode({
     selected,
     connectable: isInRelationshipDrawingMode,
     draggable: !isInRelationshipDrawingMode,
+    variant,
   };
 }
 

packages/compass-data-modeling/src/utils/utils.ts

@@ -84,3 +84,28 @@ export function dualSourceHandlerDebounce(
   };
   return Array.from({ length: count }, (_, i) => makeHandler(i));
 }
+
+export function getNamespaceRelationships(
+  namespace: string,
+  relationships: Relationship[] = []
+): Relationship[] {
+  return (
+    relationships.filter((r) => {
+      const [local, foreign] = r.relationship;
+      return local.ns === namespace || foreign.ns === namespace;
+    }) || []
+  );
+}
+
+export function isRelationshipInvalid(relationship: Relationship): boolean {
+  const [source, target] = relationship.relationship;
+  if (!source.ns || !target.ns || !source.fields || !target.fields) {
+    return true;
+  }
+
+  if (source.fields.length === 0 || target.fields.length === 0) {
+    return true;
+  }
+
+  return false;
+}