fix(dashboard): Improve collection preview behaviour

packages/dashboard/src/app/routes/_authenticated/_collections/components/collection-contents-preview-table.tsx

@@ -3,6 +3,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/vdb/components/ui/alert.j
 import { Button } from '@/vdb/components/ui/button.js';
 import { addCustomFields } from '@/vdb/framework/document-introspection/add-custom-fields.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
@@ -52,7 +53,15 @@ export function CollectionContentsPreviewTable({
         for (const arg of filterDef.args) {
             const argPair = f.arguments.find(a => a.name === arg.name);
             const argValue = argPair?.value ?? arg.defaultValue;
-            if (arg.required && argValue == null) {
+            let isValidValue = true;
+            if (arg.list) {
+                try {
+                    JSON.parse(argValue);
+                } catch (e) {
+                    isValidValue = false;
+                }
+            }
+            if (!isValidValue || (arg.required && argValue == null)) {
                 return false;
             }
         }
@@ -61,66 +70,84 @@ export function CollectionContentsPreviewTable({
 
     return (
         <div>
-            <Alert className="mb-4">
-                <Eye className="h-4 w-4" />
-                <AlertTitle>Preview</AlertTitle>
-                <AlertDescription>
-                    This is a preview of the collection contents based on the current filter settings. Once
-                    you save the collection, the contents will be updated to reflect the new filter settings.
-                </AlertDescription>
-            </Alert>
-
-            <PaginatedListDataTable
-                listQuery={addCustomFields(previewCollectionContentsDocument)}
-                transformQueryKey={queryKey => {
-                    return [...queryKey, JSON.stringify(effectiveFilters), inheritFilters];
-                }}
-                transformVariables={variables => {
-                    return {
-                        options: variables.options,
-                        input: {
-                            parentId,
-                            filters: effectiveFilters,
-                            inheritFilters,
-                        },
-                    };
-                }}
-                customizeColumns={{
-                    name: {
-                        header: 'Variant name',
-                        cell: ({ row }) => {
-                            return (
-                                <Button asChild variant="ghost">
-                                    <Link to={`../../product-variants/${row.original.id}`}>
-                                        {row.original.name}{' '}
-                                    </Link>
-                                </Button>
-                            );
-                        },
-                    },
-                }}
-                page={page}
-                itemsPerPage={pageSize}
-                sorting={sorting}
-                columnFilters={filters}
-                onPageChange={(_, page, perPage) => {
-                    setPage(page);
-                    setPageSize(perPage);
-                }}
-                onSortChange={(_, sorting) => {
-                    setSorting(sorting);
-                }}
-                onFilterChange={(_, filters) => {
-                    setFilters(filters);
-                }}
-                onSearchTermChange={searchTerm => {
-                    return {
-                        name: {
-                            contains: searchTerm,
-                        },
-                    };
-                }}
-            />
+            {effectiveFilters.length === 0 ? (
+                <Alert className="mb-4">
+                    <Eye className="h-4 w-4" />
+                    <AlertTitle>
+                        <Trans>Preview</Trans>
+                    </AlertTitle>
+                    <AlertDescription>
+                        <Trans>Add filters to preview the collection contents.</Trans>
+                    </AlertDescription>
+                </Alert>
+            ) : (
+                <>
+                    <Alert className="mb-4">
+                        <Eye className="h-4 w-4" />
+                        <AlertTitle>
+                            <Trans>Preview</Trans>
+                        </AlertTitle>
+                        <AlertDescription>
+                            <Trans>
+                                This is a preview of the collection contents based on the current filter
+                                settings. Once you save the collection, the contents will be updated to
+                                reflect the new filter settings.
+                            </Trans>
+                        </AlertDescription>
+                    </Alert>
+                    <PaginatedListDataTable
+                        listQuery={addCustomFields(previewCollectionContentsDocument)}
+                        transformQueryKey={queryKey => {
+                            return [...queryKey, JSON.stringify(effectiveFilters), inheritFilters];
+                        }}
+                        transformVariables={variables => {
+                            return {
+                                options: variables.options,
+                                input: {
+                                    parentId,
+                                    filters: effectiveFilters,
+                                    inheritFilters,
+                                },
+                            };
+                        }}
+                        customizeColumns={{
+                            name: {
+                                header: 'Variant name',
+                                cell: ({ row }) => {
+                                    return (
+                                        <Button asChild variant="ghost">
+                                            <Link to={`../../product-variants/${row.original.id}`}>
+                                                {row.original.name}{' '}
+                                            </Link>
+                                        </Button>
+                                    );
+                                },
+                            },
+                        }}
+                        page={page}
+                        itemsPerPage={pageSize}
+                        sorting={sorting}
+                        columnFilters={filters}
+                        onPageChange={(_, page, perPage) => {
+                            setPage(page);
+                            setPageSize(perPage);
+                        }}
+                        onSortChange={(_, sorting) => {
+                            setSorting(sorting);
+                        }}
+                        onFilterChange={(_, filters) => {
+                            setFilters(filters);
+                        }}
+                        onSearchTermChange={searchTerm => {
+                            return {
+                                name: {
+                                    contains: searchTerm,
+                                },
+                            };
+                        }}
+                    />
+                </>
+            )}
         </div>
     );
 }