@vendure/dashboard 3.3.6-master-202507090236 → 3.3.6-master-202507110238

package/src/lib/framework/document-introspection/get-document-structure.spec.ts

@@ -1,7 +1,11 @@
 import { graphql } from 'gql.tada';
 import { describe, expect, it, vi } from 'vitest';
 
-import { getListQueryFields, getOperationVariablesFields } from './get-document-structure.js';
+import {
+    getFieldsFromDocumentNode,
+    getListQueryFields,
+    getOperationVariablesFields,
+} from './get-document-structure.js';
 
 vi.mock('virtual:admin-api-schema', () => {
     return {
@@ -11,6 +15,7 @@ vi.mock('virtual:admin-api-schema', () => {
                     products: ['ProductList', false, false, true],
                     product: ['Product', false, false, false],
                     collection: ['Collection', false, false, false],
+                    order: ['Order', false, false, false],
                 },
                 Mutation: {
                     updateProduct: ['Product', false, false, false],
@@ -148,7 +153,17 @@ vi.mock('virtual:admin-api-schema', () => {
                     quantity: ['Int', false, false, false],
                 },
             },
-            scalars: ['ID', 'String', 'Int', 'Boolean', 'Float', 'JSON', 'DateTime', 'Upload', 'Money'],
+            scalars: [
+                'ID',
+                'String',
+                'Int',
+                'Boolean',
+                'Float',
+                'JSON',
+                'DateTime',
+                'Upload',
+                'CurrencyCode',
+            ],
             enums: {},
         },
     };
@@ -372,6 +387,9 @@ describe('getOperationVariablesFields', () => {
             mutation AdjustDraftOrderLine($orderId: ID!, $input: AdjustDraftOrderLineInput!) {
                 adjustDraftOrderLine(orderId: $orderId, input: $input) {
                     id
+                    lines {
+                        id
+                    }
                 }
             }
         `);
@@ -418,3 +436,304 @@ describe('getOperationVariablesFields', () => {
         ]);
     });
 });
+
+describe('getFieldsFromDocumentNode', () => {
+    it('should extract fields from a simple path', () => {
+        const doc = graphql(`
+            query {
+                order(id: "1") {
+                    id
+                    lines {
+                        id
+                        quantity
+                    }
+                }
+            }
+        `);
+
+        const fields = getFieldsFromDocumentNode(doc, ['order', 'lines']);
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'id',
+                nullable: false,
+                type: 'ID',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'quantity',
+                nullable: false,
+                type: 'Int',
+            },
+        ]);
+    });
+
+    it('should extract fields from root level', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                    name
+                    description
+                }
+            }
+        `);
+
+        const fields = getFieldsFromDocumentNode(doc, ['product']);
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'id',
+                nullable: false,
+                type: 'ID',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'name',
+                nullable: false,
+                type: 'String',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'description',
+                nullable: false,
+                type: 'String',
+            },
+        ]);
+    });
+
+    it('should handle fragments in the target selection', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                    featuredAsset {
+                        ...AssetFields
+                    }
+                }
+            }
+
+            fragment AssetFields on Asset {
+                id
+                name
+                preview
+            }
+        `);
+
+        const fields = getFieldsFromDocumentNode(doc, ['product', 'featuredAsset']);
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'id',
+                nullable: false,
+                type: 'ID',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'name',
+                nullable: false,
+                type: 'String',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'preview',
+                nullable: false,
+                type: 'String',
+            },
+        ]);
+    });
+
+    it('should handle deep nested paths', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    variants {
+                        prices {
+                            currencyCode
+                            price
+                        }
+                    }
+                }
+            }
+        `);
+
+        const fields = getFieldsFromDocumentNode(doc, ['product', 'variants', 'prices']);
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'currencyCode',
+                nullable: false,
+                type: 'CurrencyCode',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: false,
+                list: false,
+                name: 'price',
+                nullable: false,
+                type: 'Money',
+            },
+        ]);
+    });
+
+    it('should throw error for non-existent field', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                }
+            }
+        `);
+
+        expect(() => getFieldsFromDocumentNode(doc, ['product', 'nonExistentField'])).toThrow(
+            'Field "nonExistentField" not found at path product.nonExistentField',
+        );
+    });
+
+    it('should throw error for non-existent path', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                }
+            }
+        `);
+
+        expect(() => getFieldsFromDocumentNode(doc, ['nonExistentProduct'])).toThrow(
+            'Field "nonExistentProduct" not found at path nonExistentProduct',
+        );
+    });
+
+    it('should throw error when field has no selection set but path continues', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                }
+            }
+        `);
+
+        expect(() => getFieldsFromDocumentNode(doc, ['product', 'id', 'something'])).toThrow(
+            'Field "id" has no selection set but path continues',
+        );
+    });
+
+    it('should handle empty selection set', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                    name
+                }
+            }
+        `);
+
+        // Test with a path that leads to a field with no selection set
+        expect(() => getFieldsFromDocumentNode(doc, ['product', 'id', 'something'])).toThrow(
+            'Field "id" has no selection set but path continues',
+        );
+    });
+
+    it('should handle mixed field types and fragments', () => {
+        const doc = graphql(`
+            query {
+                product {
+                    id
+                    featuredAsset {
+                        ...AssetFields
+                        fileSize
+                    }
+                }
+            }
+
+            fragment AssetFields on Asset {
+                id
+                name
+            }
+        `);
+
+        const fields = getFieldsFromDocumentNode(doc, ['product', 'featuredAsset']);
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'id',
+                nullable: false,
+                type: 'ID',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'name',
+                nullable: false,
+                type: 'String',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'fileSize',
+                nullable: false,
+                type: 'Int',
+            },
+        ]);
+    });
+
+    it('should handle fields within fragment spreads', () => {
+        const doc = graphql(`
+            query {
+                order {
+                    ...OrderFields
+                }
+            }
+
+            fragment OrderFields on Order {
+                id
+                lines {
+                    id
+                    quantity
+                }
+            }
+        `);
+
+        const fields = getFieldsFromDocumentNode(doc, ['order', 'lines']);
+        expect(fields).toEqual([
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'id',
+                nullable: false,
+                type: 'ID',
+            },
+            {
+                isPaginatedList: false,
+                isScalar: true,
+                list: false,
+                name: 'quantity',
+                nullable: false,
+                type: 'Int',
+            },
+        ]);
+    });
+});

package/src/lib/framework/document-introspection/get-document-structure.ts

@@ -1,5 +1,5 @@
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { VariablesOf } from 'gql.tada';
+import { ResultOf, VariablesOf } from 'gql.tada';
 import {
     DocumentNode,
     FieldNode,
@@ -32,33 +32,165 @@ export interface FieldInfo {
  */
 export function getListQueryFields(documentNode: DocumentNode): FieldInfo[] {
     const fields: FieldInfo[] = [];
-    const fragments: Record<string, FragmentDefinitionNode> = {};
+    const fragments = collectFragments(documentNode);
+    const operationDefinition = findQueryOperation(documentNode);
 
-    // Collect all fragment definitions
+    for (const query of operationDefinition.selectionSet.selections) {
+        if (query.kind === 'Field') {
+            const queryField = query;
+            const fieldInfo = getQueryInfo(queryField.name.value);
+            if (fieldInfo.isPaginatedList) {
+                processPaginatedList(queryField, fieldInfo, fields, fragments);
+            } else if (queryField.selectionSet) {
+                // Check for nested paginated lists
+                findNestedPaginatedLists(queryField, fieldInfo.type, fields, fragments);
+            }
+        }
+    }
+
+    return fields;
+}
+
+// Utility type to get all valid paths into a type
+export type PathTo<T> = T extends object
+    ? {
+          [K in keyof T & (string | number)]: [K] | [K, ...PathTo<T[K]>];
+      }[keyof T & (string | number)]
+    : [];
+
+/**
+ * @description
+ * This function is used to get the FieldInfo for the fields in the path of a DocumentNode.
+ *
+ * For example, in the following query:
+ *
+ * ```graphql
+ * query {
+ *   product {
+ *     id
+ *     name
+ *     variants {
+ *       id
+ *       name
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * The path `['product', 'variants']` will return the FieldInfo for the `variants` field,
+ * namely the `id` and `name` fields.
+ */
+export function getFieldsFromDocumentNode<
+    T extends TypedDocumentNode<any, any>,
+    P extends PathTo<ResultOf<T>>,
+>(documentNode: T, path: P): FieldInfo[] {
+    const fragments = collectFragments(documentNode);
+    const operationDefinition = findQueryOperation(documentNode);
+
+    // Navigate to the target path
+    let currentSelections = operationDefinition.selectionSet.selections;
+    let currentType = 'Query';
+
+    for (let i = 0; i < path.length; i++) {
+        const pathSegment = path[i] as string;
+        const { fieldNode } = findFieldInSelections(
+            currentSelections,
+            pathSegment,
+            fragments,
+            path.slice(0, i + 1),
+        );
+
+        const fieldInfo = getObjectFieldInfo(currentType, pathSegment);
+        if (!fieldInfo) {
+            throw new Error(`Could not determine type for field "${pathSegment}"`);
+        }
+
+        // If this is the last path segment, collect the fields
+        if (i === path.length - 1) {
+            return collectFieldsFromNode(fieldNode, fieldInfo.type, fragments);
+        }
+
+        // Continue navigating deeper
+        if (!fieldNode.selectionSet) {
+            throw new Error(`Field "${pathSegment}" has no selection set but path continues`);
+        }
+        currentSelections = fieldNode.selectionSet.selections;
+        currentType = fieldInfo.type;
+    }
+
+    return [];
+}
+
+function collectFragments(documentNode: DocumentNode): Record<string, FragmentDefinitionNode> {
+    const fragments: Record<string, FragmentDefinitionNode> = {};
     documentNode.definitions.forEach(def => {
         if (def.kind === 'FragmentDefinition') {
             fragments[def.name.value] = def;
         }
     });
+    return fragments;
+}
 
+function findQueryOperation(documentNode: DocumentNode): OperationDefinitionNode {
     const operationDefinition = documentNode.definitions.find(
         (def): def is OperationDefinitionNode =>
             def.kind === 'OperationDefinition' && def.operation === 'query',
     );
+    if (!operationDefinition) {
+        throw new Error('Could not find query operation definition');
+    }
+    return operationDefinition;
+}
+
+function findMutationOperation(documentNode: DocumentNode): OperationDefinitionNode {
+    const operationDefinition = documentNode.definitions.find(
+        (def): def is OperationDefinitionNode =>
+            def.kind === 'OperationDefinition' && def.operation === 'mutation',
+    );
+    if (!operationDefinition) {
+        throw new Error('Could not find mutation operation definition');
+    }
+    return operationDefinition;
+}
 
-    for (const query of operationDefinition?.selectionSet.selections ?? []) {
-        if (query.kind === 'Field') {
-            const queryField = query;
-            const fieldInfo = getQueryInfo(queryField.name.value);
-            if (fieldInfo.isPaginatedList) {
-                processPaginatedList(queryField, fieldInfo, fields, fragments);
-            } else if (queryField.selectionSet) {
-                // Check for nested paginated lists
-                findNestedPaginatedLists(queryField, fieldInfo.type, fields, fragments);
+function findFieldInSelections(
+    selections: readonly any[],
+    pathSegment: string,
+    fragments: Record<string, FragmentDefinitionNode>,
+    currentPath: string[] = [],
+): { fieldNode: FieldNode; fragmentSelections: readonly any[] } {
+    for (const selection of selections) {
+        if (selection.kind === 'Field' && selection.name.value === pathSegment) {
+            return { fieldNode: selection, fragmentSelections: [] };
+        } else if (selection.kind === 'FragmentSpread') {
+            const fragment = fragments[selection.name.value];
+            if (fragment) {
+                const fragmentField = fragment.selectionSet.selections.find(
+                    s => s.kind === 'Field' && s.name.value === pathSegment,
+                ) as FieldNode;
+                if (fragmentField) {
+                    return { fieldNode: fragmentField, fragmentSelections: fragment.selectionSet.selections };
+                }
             }
         }
     }
+    const pathString = currentPath.join('.');
+    throw new Error(`Field "${pathSegment}" not found at path ${pathString}`);
+}
 
+function collectFieldsFromNode(
+    fieldNode: FieldNode,
+    typeName: string,
+    fragments: Record<string, FragmentDefinitionNode>,
+): FieldInfo[] {
+    const fields: FieldInfo[] = [];
+    if (fieldNode.selectionSet) {
+        for (const selection of fieldNode.selectionSet.selections) {
+            if (selection.kind === 'Field' || selection.kind === 'FragmentSpread') {
+                collectFields(typeName, selection, fields, fragments);
+            }
+        }
+    }
     return fields;
 }
 
@@ -204,11 +336,8 @@ function unwrapVariableDefinitionType(type: TypeNode): NamedTypeNode {
  * Helper function to get the first field selection from a query operation definition.
  */
 function getFirstQueryField(documentNode: DocumentNode): FieldNode {
-    const operationDefinition = documentNode.definitions.find(
-        (def): def is OperationDefinitionNode =>
-            def.kind === 'OperationDefinition' && def.operation === 'query',
-    );
-    const firstSelection = operationDefinition?.selectionSet.selections[0];
+    const operationDefinition = findQueryOperation(documentNode);
+    const firstSelection = operationDefinition.selectionSet.selections[0];
     if (firstSelection?.kind === 'Field') {
         return firstSelection;
     } else {
@@ -305,15 +434,7 @@ export function getObjectPathToPaginatedList(
     documentNode: DocumentNode,
     currentPath: string[] = [],
 ): string[] {
-    // get the query OperationDefinition
-    const operationDefinition = documentNode.definitions.find(
-        (def): def is OperationDefinitionNode =>
-            def.kind === 'OperationDefinition' && def.operation === 'query',
-    );
-    if (!operationDefinition) {
-        throw new Error('Could not find query operation definition');
-    }
-
+    const operationDefinition = findQueryOperation(documentNode);
     return findPaginatedListPath(operationDefinition.selectionSet, 'Query', currentPath);
 }
 
@@ -365,11 +486,8 @@ function findPaginatedListPath(
  * The mutation name is `createProduct`.
  */
 export function getMutationName(documentNode: DocumentNode): string {
-    const operationDefinition = documentNode.definitions.find(
-        (def): def is OperationDefinitionNode =>
-            def.kind === 'OperationDefinition' && def.operation === 'mutation',
-    );
-    const firstSelection = operationDefinition?.selectionSet.selections[0];
+    const operationDefinition = findMutationOperation(documentNode);
+    const firstSelection = operationDefinition.selectionSet.selections[0];
     if (firstSelection?.kind === 'Field') {
         return firstSelection.name.value;
     } else {

package/src/lib/framework/extension-api/types/layout.ts

@@ -27,6 +27,27 @@ export interface DashboardActionBarItem {
      * A React component that will be rendered in the action bar.
      */
     component: React.FunctionComponent<{ context: PageContextValue }>;
+    /**
+     * @description
+     * The type of action bar item to display. Defaults to `button`.
+     * The 'dropdown' type is used to display the action bar item as a dropdown menu item.
+     *
+     * When using the dropdown type, use a suitable [dropdown item](https://ui.shadcn.com/docs/components/dropdown-menu)
+     * component, such as:
+     *
+     * ```tsx
+     * import { DropdownMenuItem } from '\@vendure/dashboard';
+     *
+     * // ...
+     *
+     * {
+     *   component: () => <DropdownMenuItem>My Item</DropdownMenuItem>
+     * }
+     * ```
+     *
+     * @default 'button'
+     */
+    type?: 'button' | 'dropdown';
     /**
      * @description
      * Any permissions that are required to display this action bar item.
@@ -34,12 +55,6 @@ export interface DashboardActionBarItem {
     requiresPermission?: string | string[];
 }
 
-export interface DashboardActionBarDropdownMenuItem {
-    locationId: string;
-    component: React.FunctionComponent<{ context: PageContextValue }>;
-    requiresPermission?: string | string[];
-}
-
 export type PageBlockPosition = { blockId: string; order: 'before' | 'after' | 'replace' };
 
 /**

package/src/lib/framework/layout-engine/layout-extensions.ts

@@ -1,7 +1,4 @@
-import {
-    DashboardActionBarItem,
-    DashboardPageBlockDefinition,
-} from '../extension-api/extension-api-types.js';
+import { DashboardActionBarItem, DashboardPageBlockDefinition } from '../extension-api/types/layout.js';
 import { globalRegistry } from '../registry/global-registry.js';
 
 globalRegistry.register('dashboardActionBarItemRegistry', new Map<string, DashboardActionBarItem[]>());