feat/COMPASS-9898 Add handling for multiple types with inline definition (#138)

Author: Anemy

package.json

@@ -52,6 +52,7 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@leafygreen-ui/icon": "^14.3.0",
+    "@leafygreen-ui/inline-definition": "^9.0.5",
     "@leafygreen-ui/leafygreen-provider": "^5.0.2",
     "@leafygreen-ui/palette": "^5.0.0",
     "@leafygreen-ui/tokens": "^3.2.1",

src/components/field/field-type-content.tsx

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
 import styled from '@emotion/styled';
+import LeafyGreenInlineDefinition from '@leafygreen-ui/inline-definition';
+import { Body } from '@leafygreen-ui/typography';
 
 import { useEditableDiagramInteractions } from '@/hooks/use-editable-diagram-interactions';
 import { PlusWithSquare } from '@/components/icons/plus-with-square';
@@ -12,14 +14,27 @@ const ObjectTypeContainer = styled.div`
   line-height: 20px;
 `;
 
+const MixedTypeTooltipContentStyles = styled(Body)`
+  overflow-wrap: anywhere;
+  text-wrap: wrap;
+  text-align: left;
+  font-style: normal;
+`;
+
+const InlineDefinition = styled(LeafyGreenInlineDefinition)`
+  font-style: italic;
+  text-decoration-color: inherit;
+  text-underline-offset: 0.25em;
+`;
+
 export const FieldTypeContent = ({
   type,
   nodeId,
   id,
 }: {
   id: string | string[];
   nodeId: string;
-  type: React.ReactNode;
+  type?: string | string[];
 }) => {
   const { onClickAddFieldToObjectField: _onClickAddFieldToObjectField } = useEditableDiagramInteractions();
 
@@ -57,5 +72,26 @@ export const FieldTypeContent = ({
     return '[]';
   }
 
+  if (Array.isArray(type)) {
+    if (type.length === 0) {
+      return 'unknown';
+    }
+
+    if (type.length === 1) {
+      return <>{type}</>;
+    }
+
+    const typesString = type.join(', ');
+
+    // We show `mixed` with a tooltip when multiple types exist.
+    return (
+      <InlineDefinition
+        definition={<MixedTypeTooltipContentStyles>Multiple types: {typesString}</MixedTypeTooltipContentStyles>}
+      >
+        (mixed)
+      </InlineDefinition>
+    );
+  }
+
   return <>{type}</>;
 };

src/components/field/field.test.tsx

@@ -2,7 +2,7 @@ import { palette } from '@leafygreen-ui/palette';
 import { ComponentProps } from 'react';
 import { userEvent } from '@testing-library/user-event';
 
-import { render, screen } from '@/mocks/testing-utils';
+import { render, screen, waitFor } from '@/mocks/testing-utils';
 import { Field as FieldComponent } from '@/components/field/field';
 import { DEFAULT_PREVIEW_GROUP_AREA } from '@/utilities/get-preview-group-area';
 import { EditableDiagramInteractionsProvider } from '@/hooks/use-editable-diagram-interactions';
@@ -88,6 +88,31 @@ describe('field', () => {
       expect(screen.getByText('[]')).toBeInTheDocument();
       expect(screen.queryByText('array')).not.toBeInTheDocument();
     });
+
+    it('shows (mixed) with multiple types with a tooltip with more info', async () => {
+      render(<Field {...DEFAULT_PROPS} type={['string', 'number', 'array']} />);
+      expect(screen.getByText('(mixed)')).toBeInTheDocument();
+      expect(screen.queryByText('string')).not.toBeInTheDocument();
+
+      // When hovering the (mixed) text, the tooltip content is present in the document.
+      await userEvent.hover(screen.getByText('(mixed)'));
+      const tooltipText = 'Multiple types: string, number, array';
+      await screen.findByText(tooltipText);
+      await userEvent.unhover(screen.getByText('(mixed)'));
+      await waitFor(() => expect(screen.queryByText(tooltipText)).not.toBeInTheDocument());
+    });
+
+    it('shows type when a single type in an array is provided', () => {
+      render(<Field {...DEFAULT_PROPS} type={['string']} />);
+      expect(screen.getByText('string')).toBeInTheDocument();
+      expect(screen.queryByText('(mixed)')).not.toBeInTheDocument();
+    });
+
+    it('shows unknown when an empty array type is provided', () => {
+      render(<Field {...DEFAULT_PROPS} type={[]} />);
+      expect(screen.getByText('unknown')).toBeInTheDocument();
+      expect(screen.queryByText('(mixed)')).not.toBeInTheDocument();
+    });
   });
 
   describe('With glyphs', () => {

src/components/node/node.stories.tsx

@@ -225,22 +225,22 @@ export const DisabledWithHoverVariant: Story = {
   },
 };
 
-export const NodeWithCustomTypeField: Story = {
+export const NodeWithMultipleTypesField: Story = {
   args: {
     ...INTERNAL_NODE,
     data: {
       title: 'orders',
       fields: [
         {
           name: 'customerId',
-          type: (
-            <span>
-              <strong>custom type display</strong>
-            </span>
-          ),
+          type: ['string', 'number'],
           variant: 'default',
           glyphs: ['key'],
         },
+        {
+          name: 'customerId',
+          type: ['string', 'number', 'objectId', 'array', 'date', 'boolean', 'null', 'decimal', 'object', 'regex'],
+        },
       ],
     },
   },

src/types/node.ts

@@ -152,7 +152,7 @@ export interface NodeField {
   /**
    * The type of the field, for example "objectId".
    */
-  type?: string | React.ReactNode;
+  type?: string | string[];
 
   /**
    * The depth of the field.