@axinom/mosaic-ui 0.65.0-rc.1 → 0.65.0-rc.11

package/src/components/Utils/Postgraphile/CreateConnectionRenderer.spec.ts

@@ -0,0 +1,259 @@
+import { TagsRenderer } from '../../List';
+import { createConnectionRenderer } from './CreateConnectionRenderer';
+
+jest.mock('../../List', () => ({
+  TagsRenderer: jest.fn(),
+}));
+
+const mockTagsRenderer = TagsRenderer as jest.MockedFunction<
+  typeof TagsRenderer
+>;
+
+interface TestConnection {
+  nodes: { id: string; name: string }[];
+}
+
+interface StringConnection {
+  nodes: string[];
+}
+
+describe('createConnectionRenderer', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('with renderAsTags = true (default)', () => {
+    it('should call TagsRenderer with mapped values when renderAsTags is true', () => {
+      const mockReturnValue = 'Mocked Tags JSX Element';
+      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
+
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: 'Item 1' },
+          { id: '2', name: 'Item 2' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const result = renderer(connection);
+
+      expect(mockTagsRenderer).toHaveBeenCalledWith(['Item 1', 'Item 2']);
+      expect(result).toBe(mockReturnValue);
+    });
+
+    it('should throw error when nodes is undefined', () => {
+      const connection = { nodes: undefined } as unknown as TestConnection;
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+
+      expect(() => renderer(connection)).toThrow();
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+    });
+
+    it('should throw error when value is null', () => {
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+
+      expect(() => renderer(null)).toThrow();
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+    });
+
+    it('should throw error when value is undefined', () => {
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+
+      expect(() => renderer(undefined)).toThrow();
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+    });
+
+    it('should call TagsRenderer with empty array when nodes is empty', () => {
+      const mockReturnValue = 'Empty Tags JSX Element';
+      mockTagsRenderer.mockReturnValue(mockReturnValue as any);
+
+      const connection: TestConnection = { nodes: [] };
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(selector);
+      const result = renderer(connection);
+
+      expect(mockTagsRenderer).toHaveBeenCalledWith([]);
+      expect(result).toBe(mockReturnValue);
+    });
+  });
+
+  describe('with renderAsTags = false', () => {
+    it('should return comma-separated string using selector', () => {
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: 'Item 1' },
+          { id: '2', name: 'Item 2' },
+          { id: '3', name: 'Item 3' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(mockTagsRenderer).not.toHaveBeenCalled();
+      expect(result).toBe('Item 1, Item 2, Item 3');
+    });
+
+    it('should work with simple string arrays', () => {
+      const connection: StringConnection = {
+        nodes: ['apple', 'banana', 'cherry'],
+      };
+
+      const selector = (item: string) => item;
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('apple, banana, cherry');
+    });
+
+    it('should work with complex selector functions', () => {
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: 'Item 1' },
+          { id: '2', name: 'Item 2' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }, index: number) =>
+        `${index + 1}. ${item.name} (${item.id})`;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('1. Item 1 (1), 2. Item 2 (2)');
+    });
+
+    it('should return empty string when nodes array is empty', () => {
+      const connection: TestConnection = { nodes: [] };
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('');
+    });
+
+    it('should handle selector returning different types', () => {
+      interface NumberConnection {
+        nodes: { id: number; value: number }[];
+      }
+      const connection: NumberConnection = {
+        nodes: [
+          { id: 1, value: 100 },
+          { id: 2, value: 200 },
+        ],
+      };
+
+      const selector = (item: { id: number; value: number }) => item.value;
+      const renderer = createConnectionRenderer<NumberConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('100, 200');
+    });
+
+    it('should throw error when connection.nodes is undefined and renderAsTags is false', () => {
+      const connection = { nodes: undefined } as unknown as TestConnection;
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+
+      expect(() => renderer(connection)).toThrow();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle nodes with special characters in comma-separated output', () => {
+      const connection: StringConnection = {
+        nodes: ['item, with comma', 'item with "quotes"', 'normal item'],
+      };
+
+      const selector = (item: string) => item;
+      const renderer = createConnectionRenderer<StringConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('item, with comma, item with "quotes", normal item');
+    });
+
+    it('should handle selector returning empty strings', () => {
+      const connection: TestConnection = {
+        nodes: [
+          { id: '1', name: '' },
+          { id: '2', name: 'Item 2' },
+          { id: '3', name: '' },
+        ],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe(', Item 2, ');
+    });
+
+    it('should handle single node connection', () => {
+      const connection: TestConnection = {
+        nodes: [{ id: '1', name: 'Single Item' }],
+      };
+
+      const selector = (item: { id: string; name: string }) => item.name;
+      const renderer = createConnectionRenderer<TestConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('Single Item');
+    });
+  });
+
+  describe('type safety', () => {
+    it('should work with different connection node types', () => {
+      interface CustomConnection {
+        nodes: { customField: number; label: string }[];
+      }
+
+      const connection: CustomConnection = {
+        nodes: [
+          { customField: 42, label: 'Custom 1' },
+          { customField: 84, label: 'Custom 2' },
+        ],
+      };
+
+      const selector = (item: { customField: number; label: string }) =>
+        `${item.label}: ${item.customField}`;
+      const renderer = createConnectionRenderer<CustomConnection>(
+        selector,
+        false,
+      );
+      const result = renderer(connection);
+
+      expect(result).toBe('Custom 1: 42, Custom 2: 84');
+    });
+  });
+});

package/src/components/Utils/Postgraphile/{CreateConnectionRenderer.ts → CreateConnectionRenderer.tsx}

@@ -1,8 +1,15 @@
+import { ReactNode } from 'react';
+import { TagsRenderer } from '../../List';
+
 interface Connection {
   nodes: unknown[];
 }
 
-type SelectorFunction<T> = (value: T, index: number, array: T[]) => unknown;
+export type SelectorFunction<T> = (
+  value: T,
+  index: number,
+  array: T[],
+) => unknown;
 
 /**
  * Creates a renderer that will loop through each `node` on the value,
@@ -12,10 +19,18 @@ type SelectorFunction<T> = (value: T, index: number, array: T[]) => unknown;
  */
 export function createConnectionRenderer<T extends Connection>(
   selector: SelectorFunction<T['nodes'][number]>,
-): (val: unknown) => string {
-  return (val: unknown): string => {
+  renderAsTags = true,
+): (val: unknown) => string | ReactNode {
+  const ConnectionRenderer = (val: unknown): string | ReactNode => {
     const value = val as T;
 
+    if (renderAsTags) {
+      return TagsRenderer(value.nodes.map(selector));
+    }
+
     return value.nodes.map(selector).join(', ');
   };
+
+  ConnectionRenderer.displayName = 'ConnectionRenderer';
+  return ConnectionRenderer;
 }

package/src/styles/variables.scss

@@ -61,6 +61,8 @@ $explorer-list-row-border: 1px solid $light-gray;
 /* List vars */
 
 $list-paddings: 0px 5px 0px 5px;
+$list-tag-background-color: $light-gray-2;
+$list-tag-overflow-background-color: $dark-gray;
 
 /* Filter vars */
 $filter-background-color: white;