@vendure/dashboard 3.2.0 → 3.2.2

package/src/app/routes/_authenticated/_roles/components/permissions-grid.tsx

@@ -1,116 +1,116 @@
-import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-} from "@/components/ui/accordion.js";
-import { Button } from '@/components/ui/button.js';
-import { Switch } from '@/components/ui/switch.js';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
-import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
-import { ServerConfig } from '@/providers/server-config.js';
-import { Trans, useLingui } from '@/lib/trans.js';
-import { useState } from 'react';
-
-interface PermissionsGridProps {
-    value: string[];
-    onChange: (permissions: string[]) => void;
-    readonly?: boolean;
-}
-
-export function PermissionsGrid({ value, onChange, readonly = false }: PermissionsGridProps) {
-    const { i18n } = useLingui();
-    const groupedPermissions = useGroupedPermissions();
-
-    const setPermission = (permission: string, checked: boolean) => {
-        if (readonly) return;
-
-        const newPermissions = checked ? [...value, permission] : value.filter(p => p !== permission);
-        onChange(newPermissions);
-    };
-
-    const toggleAll = (defs: ServerConfig['permissions']) => {
-        if (readonly) return;
-
-        const shouldEnable = defs.some(d => !value.includes(d.name));
-        const newPermissions = shouldEnable
-            ? [...new Set([...value, ...defs.map(d => d.name)])]
-            : value.filter(p => !defs.some(d => d.name === p));
-        onChange(newPermissions);
-    };
-
-    // Get default expanded sections based on which ones have active permissions
-    const defaultExpandedSections = groupedPermissions
-        .map((section) => ({
-            section,
-            hasActivePermissions: section.permissions.some(permission => value.includes(permission.name)),
-        }))
-        .filter(({ hasActivePermissions }) => hasActivePermissions)
-        .map(({ section }) => section.id);
-    
-    const [accordionValue, setAccordionValue] = useState<string[]>(defaultExpandedSections);
-
-    return (
-        <div className="w-full">
-            <Accordion type="multiple" value={accordionValue.length ? accordionValue : defaultExpandedSections} onValueChange={setAccordionValue} className="space-y-4">
-                {groupedPermissions.map((section, index) => (
-                    <AccordionItem
-                        key={index}
-                        value={section.id}
-                        className="border rounded-lg px-6"
-                    >
-                        <AccordionTrigger className="hover:no-underline">
-                            <div className="flex flex-col items-start gap-1 text-sm py-2">
-                                <div>{i18n.t(section.label)}</div>
-                                <div className="text-muted-foreground text-sm font-normal">
-                                    {i18n.t(section.description)}
-                                </div>
-                            </div>
-                        </AccordionTrigger>
-                        <AccordionContent>
-                            <div className="pb-4 space-y-4">
-                                {section.permissions.length > 1 && !readonly && (
-                                    <Button
-                                        variant="outline"
-                                        type="button"
-                                        size="sm"
-                                        onClick={() => toggleAll(section.permissions)}
-                                        className="w-fit"
-                                    >
-                                        <Trans>Toggle all</Trans>
-                                    </Button>
-                                )}
-                                <div className="md:grid md:grid-cols-4 md:gap-2 space-y-2">
-                                    {section.permissions.map(permission => (
-                                        <div key={permission.name} className="flex items-center space-x-2">
-                                            <Switch
-                                                id={permission.name}
-                                                checked={value.includes(permission.name)}
-                                                onCheckedChange={checked =>
-                                                    setPermission(permission.name, checked)
-                                                }
-                                                disabled={readonly}
-                                            />
-                                            <TooltipProvider>
-                                                <Tooltip>
-                                                    <TooltipTrigger asChild>
-                                                        <label htmlFor={permission.name} className="text-sm whitespace-nowrap">
-                                                            {i18n.t(permission.name)}
-                                                        </label>
-                                                    </TooltipTrigger>
-                                                    <TooltipContent align="end">
-                                                        <p>{i18n.t(permission.description)}</p>
-                                                    </TooltipContent>
-                                                </Tooltip>
-                                            </TooltipProvider>
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </AccordionContent>
-                    </AccordionItem>
-                ))}
-            </Accordion>
-        </div>
-    );
-}
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion.js";
+import { Button } from '@/components/ui/button.js';
+import { Switch } from '@/components/ui/switch.js';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip.js';
+import { useGroupedPermissions } from '@/hooks/use-grouped-permissions.js';
+import { ServerConfig } from '@/providers/server-config.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useState } from 'react';
+
+interface PermissionsGridProps {
+    value: string[];
+    onChange: (permissions: string[]) => void;
+    readonly?: boolean;
+}
+
+export function PermissionsGrid({ value, onChange, readonly = false }: PermissionsGridProps) {
+    const { i18n } = useLingui();
+    const groupedPermissions = useGroupedPermissions();
+
+    const setPermission = (permission: string, checked: boolean) => {
+        if (readonly) return;
+
+        const newPermissions = checked ? [...value, permission] : value.filter(p => p !== permission);
+        onChange(newPermissions);
+    };
+
+    const toggleAll = (defs: ServerConfig['permissions']) => {
+        if (readonly) return;
+
+        const shouldEnable = defs.some(d => !value.includes(d.name));
+        const newPermissions = shouldEnable
+            ? [...new Set([...value, ...defs.map(d => d.name)])]
+            : value.filter(p => !defs.some(d => d.name === p));
+        onChange(newPermissions);
+    };
+
+    // Get default expanded sections based on which ones have active permissions
+    const defaultExpandedSections = groupedPermissions
+        .map((section) => ({
+            section,
+            hasActivePermissions: section.permissions.some(permission => value.includes(permission.name)),
+        }))
+        .filter(({ hasActivePermissions }) => hasActivePermissions)
+        .map(({ section }) => section.id);
+    
+    const [accordionValue, setAccordionValue] = useState<string[]>(defaultExpandedSections);
+
+    return (
+        <div className="w-full">
+            <Accordion type="multiple" value={accordionValue.length ? accordionValue : defaultExpandedSections} onValueChange={setAccordionValue} className="space-y-4">
+                {groupedPermissions.map((section, index) => (
+                    <AccordionItem
+                        key={index}
+                        value={section.id}
+                        className="border rounded-lg px-6"
+                    >
+                        <AccordionTrigger className="hover:no-underline">
+                            <div className="flex flex-col items-start gap-1 text-sm py-2">
+                                <div>{i18n.t(section.label)}</div>
+                                <div className="text-muted-foreground text-sm font-normal">
+                                    {i18n.t(section.description)}
+                                </div>
+                            </div>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                            <div className="pb-4 space-y-4">
+                                {section.permissions.length > 1 && !readonly && (
+                                    <Button
+                                        variant="outline"
+                                        type="button"
+                                        size="sm"
+                                        onClick={() => toggleAll(section.permissions)}
+                                        className="w-fit"
+                                    >
+                                        <Trans>Toggle all</Trans>
+                                    </Button>
+                                )}
+                                <div className="md:grid md:grid-cols-4 md:gap-2 space-y-2">
+                                    {section.permissions.map(permission => (
+                                        <div key={permission.name} className="flex items-center space-x-2">
+                                            <Switch
+                                                id={permission.name}
+                                                checked={value.includes(permission.name)}
+                                                onCheckedChange={checked =>
+                                                    setPermission(permission.name, checked)
+                                                }
+                                                disabled={readonly}
+                                            />
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger asChild>
+                                                        <label htmlFor={permission.name} className="text-sm whitespace-nowrap">
+                                                            {i18n.t(permission.name)}
+                                                        </label>
+                                                    </TooltipTrigger>
+                                                    <TooltipContent align="end">
+                                                        <p>{i18n.t(permission.description)}</p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </AccordionContent>
+                    </AccordionItem>
+                ))}
+            </Accordion>
+        </div>
+    );
+}

package/src/app/routes/_authenticated/_roles/roles.graphql.ts

@@ -1,67 +1,67 @@
-import { graphql } from '@/graphql/graphql.js';
-
-export const roleItemFragment = graphql(`
-    fragment RoleItem on Role {
-        id
-        createdAt
-        updatedAt
-        code
-        description
-        permissions
-        channels {
-            id
-            code
-            token
-        }
-    }
-`);
-
-export const roleListQuery = graphql(
-    `
-        query RoleList($options: RoleListOptions) {
-            roles(options: $options) {
-                items {
-                    ...RoleItem
-                }
-                totalItems
-            }
-        }
-    `,
-    [roleItemFragment],
-);
-
-export const roleDetailDocument = graphql(
-    `
-        query RoleDetail($id: ID!) {
-            role(id: $id) {
-                ...RoleItem
-            }
-        }
-    `,
-    [roleItemFragment],
-);
-
-export const createRoleDocument = graphql(`
-    mutation RoleCreate($input: CreateRoleInput!) {
-        createRole(input: $input) {
-            id
-        }
-    }
-`);
-
-export const updateRoleDocument = graphql(`
-    mutation UpdateRole($input: UpdateRoleInput!) {
-        updateRole(input: $input) {
-            id
-        }
-    }
-`);
-
-export const deleteRoleDocument = graphql(`
-    mutation DeleteRole($id: ID!) {
-        deleteRole(id: $id) {
-            result
-            message
-        }
-    }
-`);
+import { graphql } from '@/graphql/graphql.js';
+
+export const roleItemFragment = graphql(`
+    fragment RoleItem on Role {
+        id
+        createdAt
+        updatedAt
+        code
+        description
+        permissions
+        channels {
+            id
+            code
+            token
+        }
+    }
+`);
+
+export const roleListQuery = graphql(
+    `
+        query RoleList($options: RoleListOptions) {
+            roles(options: $options) {
+                items {
+                    ...RoleItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [roleItemFragment],
+);
+
+export const roleDetailDocument = graphql(
+    `
+        query RoleDetail($id: ID!) {
+            role(id: $id) {
+                ...RoleItem
+            }
+        }
+    `,
+    [roleItemFragment],
+);
+
+export const createRoleDocument = graphql(`
+    mutation RoleCreate($input: CreateRoleInput!) {
+        createRole(input: $input) {
+            id
+        }
+    }
+`);
+
+export const updateRoleDocument = graphql(`
+    mutation UpdateRole($input: UpdateRoleInput!) {
+        updateRole(input: $input) {
+            id
+        }
+    }
+`);
+
+export const deleteRoleDocument = graphql(`
+    mutation DeleteRole($id: ID!) {
+        deleteRole(id: $id) {
+            result
+            message
+        }
+    }
+`);

package/src/app/routes/_authenticated/_roles/roles.tsx

@@ -1,96 +1,96 @@
-import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
-import { DetailPageButton } from '@/components/shared/detail-page-button.js';
-import { PermissionGuard } from '@/components/shared/permission-guard.js';
-import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
-import { Badge } from '@/components/ui/badge.js';
-import { Button } from '@/components/ui/button.js';
-import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
-import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
-import { ListPage } from '@/framework/page/list-page.js';
-import { Trans } from '@/lib/trans.js';
-import { createFileRoute, Link } from '@tanstack/react-router';
-import { LayersIcon, PlusIcon } from 'lucide-react';
-import { ExpandablePermissions } from './components/expandable-permissions.js';
-import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
-
-export const Route = createFileRoute('/_authenticated/_roles/roles')({
-    component: RoleListPage,
-    loader: () => ({ breadcrumb: () => <Trans>Roles</Trans> }),
-});
-
-const SYSTEM_ROLES = [SUPER_ADMIN_ROLE_CODE, CUSTOMER_ROLE_CODE];
-
-function RoleListPage() {
-    return (
-        <ListPage
-            pageId="role-list"
-            title="Roles"
-            listQuery={roleListQuery}
-            deleteMutation={deleteRoleDocument}
-            route={Route}
-            defaultVisibility={{
-                description: true,
-                code: true,
-                channels: true,
-                permissions: true,
-            }}
-            customizeColumns={{
-                code: {
-                    header: 'Code',
-                    cell: ({ row }) => {
-                        return (
-                            <DetailPageButton
-                                id={row.original.id}
-                                label={<RoleCodeLabel code={row.original.code} />}
-                                disabled={SYSTEM_ROLES.includes(row.original.code)}
-                            />
-                        );
-                    },
-                },
-                permissions: {
-                    header: 'Permissions',
-                    cell: ({ row }) => {
-                        if (SYSTEM_ROLES.includes(row.original.code)) {
-                            return (
-                                <span className="text-muted-foreground">
-                                    <Trans>This is a default Role and cannot be modified</Trans>
-                                </span>
-                            );
-                        }
-
-                        return <ExpandablePermissions role={row.original} />;
-                    },
-                },
-                channels: {
-                    header: 'Channels',
-                    cell: ({ row }) => {
-                        if (SYSTEM_ROLES.includes(row.original.code)) {
-                            return null;
-                        }
-
-                        return (
-                            <div className="flex flex-wrap gap-2">
-                                {row.original.channels.map(channel => (
-                                    <Badge variant="secondary" key={channel.code}>
-                                        <LayersIcon /> <ChannelCodeLabel code={channel.code} />
-                                    </Badge>
-                                ))}
-                            </div>
-                        );
-                    },
-                },
-            }}
-        >
-            <PageActionBarRight>
-                <PermissionGuard requires={['CreateAdministrator']}>
-                    <Button asChild>
-                        <Link to="./new">
-                            <PlusIcon className="mr-2 h-4 w-4" />
-                            New Role
-                        </Link>
-                    </Button>
-                </PermissionGuard>
-            </PageActionBarRight>
-        </ListPage>
-    );
-}
+import { ChannelCodeLabel } from '@/components/shared/channel-code-label.js';
+import { DetailPageButton } from '@/components/shared/detail-page-button.js';
+import { PermissionGuard } from '@/components/shared/permission-guard.js';
+import { RoleCodeLabel } from '@/components/shared/role-code-label.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@/constants.js';
+import { PageActionBarRight } from '@/framework/layout-engine/page-layout.js';
+import { ListPage } from '@/framework/page/list-page.js';
+import { Trans } from '@/lib/trans.js';
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { LayersIcon, PlusIcon } from 'lucide-react';
+import { ExpandablePermissions } from './components/expandable-permissions.js';
+import { deleteRoleDocument, roleListQuery } from './roles.graphql.js';
+
+export const Route = createFileRoute('/_authenticated/_roles/roles')({
+    component: RoleListPage,
+    loader: () => ({ breadcrumb: () => <Trans>Roles</Trans> }),
+});
+
+const SYSTEM_ROLES = [SUPER_ADMIN_ROLE_CODE, CUSTOMER_ROLE_CODE];
+
+function RoleListPage() {
+    return (
+        <ListPage
+            pageId="role-list"
+            title="Roles"
+            listQuery={roleListQuery}
+            deleteMutation={deleteRoleDocument}
+            route={Route}
+            defaultVisibility={{
+                description: true,
+                code: true,
+                channels: true,
+                permissions: true,
+            }}
+            customizeColumns={{
+                code: {
+                    header: 'Code',
+                    cell: ({ row }) => {
+                        return (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={<RoleCodeLabel code={row.original.code} />}
+                                disabled={SYSTEM_ROLES.includes(row.original.code)}
+                            />
+                        );
+                    },
+                },
+                permissions: {
+                    header: 'Permissions',
+                    cell: ({ row }) => {
+                        if (SYSTEM_ROLES.includes(row.original.code)) {
+                            return (
+                                <span className="text-muted-foreground">
+                                    <Trans>This is a default Role and cannot be modified</Trans>
+                                </span>
+                            );
+                        }
+
+                        return <ExpandablePermissions role={row.original} />;
+                    },
+                },
+                channels: {
+                    header: 'Channels',
+                    cell: ({ row }) => {
+                        if (SYSTEM_ROLES.includes(row.original.code)) {
+                            return null;
+                        }
+
+                        return (
+                            <div className="flex flex-wrap gap-2">
+                                {row.original.channels.map(channel => (
+                                    <Badge variant="secondary" key={channel.code}>
+                                        <LayersIcon /> <ChannelCodeLabel code={channel.code} />
+                                    </Badge>
+                                ))}
+                            </div>
+                        );
+                    },
+                },
+            }}
+        >
+            <PageActionBarRight>
+                <PermissionGuard requires={['CreateAdministrator']}>
+                    <Button asChild>
+                        <Link to="./new">
+                            <PlusIcon className="mr-2 h-4 w-4" />
+                            New Role
+                        </Link>
+                    </Button>
+                </PermissionGuard>
+            </PageActionBarRight>
+        </ListPage>
+    );
+}