fix: stop voucher pages requiring MANAGE_PRODUCTS

Staff who could only manage discounts hit a stack of "you need one of the
following permissions: MANAGE_PRODUCTS" errors as soon as a voucher opened.
Nothing changed on the API side; the dashboard was asking for a product-gated
field on a discounts page.

Two causes:

- The voucher detail and create views mounted the assign-product and
  assign-variant searches on page load, every picker closed. SearchProduct
  selects Product.channelListings, which Core gates behind MANAGE_PRODUCTS.
  Long-standing, but error toasts became sticky in #6812 so it turned loud.
- The Eligible products accordion requested the same field, and #6812 made the
  catalogue auto-open the first non-empty group instead of always defaulting to
  Categories, so vouchers with assigned products hit it on load.

Gate the field with @include(if: $PERMISSION_MANAGE_PRODUCTS) — makeQuery
already injects a PERMISSION_<CODE> variable per query from the signed-in
user's permissions, as CustomerDetails does for MANAGE_ORDERS. The catalogue
mutations get it passed explicitly since makeMutation does not inject.
SearchProducts declares it with a default so makeSearch callers, which do not
strip PERMISSION_* from their variable types, need no changes.

Where availability is unknowable, drop the feature rather than fake a value:
the assign picker stops filtering by voucher channels, disabling rows and
showing the unavailable hint, and the Eligible products table drops its
Availability column. Also fixes the same latent bug on shipping rates and
collections, where a user without MANAGE_PRODUCTS saw an empty picker because
every product looked channel-mismatched.

Also skip the four picker searches until their dialog opens, so opening a
voucher no longer fires four catalog queries, one asking for 100 products.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: lkostrowski

.changeset/voucher-manage-products-permission.md

@@ -0,0 +1,11 @@
+---
+"saleor-dashboard": patch
+---
+
+Vouchers no longer demand the MANAGE_PRODUCTS permission. Staff who could only manage discounts were met with a stack of "you need one of the following permissions: MANAGE_PRODUCTS" errors as soon as a voucher opened.
+
+Two things caused it. The voucher page ran the assign-product and assign-variant picker searches on page load, with every picker closed — those searches now wait until their dialog is opened. And product channel availability, which does require MANAGE_PRODUCTS, was requested unconditionally — it is now requested only when the signed-in user can actually read it.
+
+Staff without MANAGE_PRODUCTS see the Eligible products list without its Availability column, and the assign-product picker no longer filters by voucher channels, since it cannot know which channels a product is in. Nothing changes for staff who do have the permission.
+
+Opening a voucher is also lighter: four catalog searches no longer fire on every page load.

src/components/AssignProductDialog/AssignProductDialogSingle.tsx

@@ -8,12 +8,13 @@ import { ResponsiveTable } from "@dashboard/components/ResponsiveTable";
 import TableCellAvatar from "@dashboard/components/TableCellAvatar";
 import TableRowLink from "@dashboard/components/TableRowLink";
 import { SaleorThrobber } from "@dashboard/components/Throbber";
-import { type ProductWhereInput } from "@dashboard/graphql";
+import { PermissionEnum, type ProductWhereInput } from "@dashboard/graphql";
 import { useAssignPickerListDisplayState } from "@dashboard/hooks/useAssignPickerListDisplayState";
 import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
 import { useModalSearchWithFilters } from "@dashboard/hooks/useModalSearchWithFilters";
 import { useStalePickerList } from "@dashboard/hooks/useStalePickerList";
 import { maybe, renderCollection } from "@dashboard/misc";
+import { useHasPermission } from "@dashboard/search/useHasPermission";
 import { type Container, type FetchMoreProps } from "@dashboard/types";
 import { Radio, TableBody, TableCell, TextField } from "@material-ui/core";
 import { Text } from "@saleor/macaw-ui-next";
@@ -75,6 +76,7 @@ export const AssignProductDialogSingle = (props: AssignProductDialogSingleProps)
   const [selectedProductId, setSelectedProductId] = useState("");
   const [initialSelection, setInitialSelection] = useState("");
   const { combinedFilters, clearFilters } = useModalProductFilterContext();
+  const canManageProducts = useHasPermission()(PermissionEnum.MANAGE_PRODUCTS);
   const selectedIdRef = useRef(selectedId);
 
   selectedIdRef.current = selectedId;
@@ -199,10 +201,14 @@ export const AssignProductDialogSingle = (props: AssignProductDialogSingleProps)
                       }
 
                       const isSelected = selectedProductId === product.id;
-                      const isProductAvailable = isProductAvailableInVoucherChannels(
-                        product.channelListings ?? [],
-                        selectedChannels,
-                      );
+                      // Without MANAGE_PRODUCTS the search omits channelListings, so availability
+                      // is unknowable — hide the restriction instead of disabling every row.
+                      const isProductAvailable =
+                        !canManageProducts ||
+                        isProductAvailableInVoucherChannels(
+                          product.channelListings ?? [],
+                          selectedChannels,
+                        );
 
                       return (
                         <TableRowLink

src/components/AssignProductDialog/useAssignProductPicker.ts

@@ -1,11 +1,12 @@
 // @ts-strict-ignore
 import { type ConfirmButtonTransitionState } from "@dashboard/components/ConfirmButton";
-import { type ProductWhereInput } from "@dashboard/graphql";
+import { PermissionEnum, type ProductWhereInput } from "@dashboard/graphql";
 import { useAssignPickerListDisplayState } from "@dashboard/hooks/useAssignPickerListDisplayState";
 import useModalDialogOpen from "@dashboard/hooks/useModalDialogOpen";
 import { useModalSearchWithFilters } from "@dashboard/hooks/useModalSearchWithFilters";
 import { usePickerBackfill } from "@dashboard/hooks/usePickerBackfill";
 import { useStalePickerList } from "@dashboard/hooks/useStalePickerList";
+import { useHasPermission } from "@dashboard/search/useHasPermission";
 import { type Container, type FetchMoreProps } from "@dashboard/types";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -85,7 +86,11 @@ export const useAssignProductPicker = ({
   pruneUnavailableSelection = false,
   onMaxSelectionReached,
 }: UseAssignProductPickerProps) => {
-  const hasChannelRestriction = Boolean(selectedChannels?.length);
+  // Product.channelListings is behind MANAGE_PRODUCTS, so without it we cannot tell whether a
+  // product is in the voucher's channels. Drop the availability feature rather than guess:
+  // no filtering, no disabled rows, no "unavailable" hint.
+  const canManageProducts = useHasPermission()(PermissionEnum.MANAGE_PRODUCTS);
+  const hasChannelRestriction = Boolean(selectedChannels?.length) && canManageProducts;
 
   const products = useMemo(
     () =>
@@ -272,9 +277,13 @@ export const useAssignProductPicker = ({
         return false;
       }
 
+      if (!canManageProducts) {
+        return true;
+      }
+
       return isProductAvailableInVoucherChannels(product.channelListings, selectedChannels);
     },
-    [excludeProduct, selectedChannels],
+    [canManageProducts, excludeProduct, selectedChannels],
   );
 
   useEffect(
@@ -384,7 +393,7 @@ export const useAssignProductPicker = ({
     loading,
     onFetchMore,
     onQueryChange,
-    productUnavailableText,
+    productUnavailableText: canManageProducts ? productUnavailableText : undefined,
     productsDict,
     query,
     resumeBackfill: backfill.resumeBackfill,

src/discounts/components/DiscountProducts/DiscountProducts.tsx

@@ -6,19 +6,34 @@ import {
 } from "@dashboard/components/AssignableListTable/AssignableListTable";
 import { DashboardCard } from "@dashboard/components/Card";
 import { ProductChannelsAvailability } from "@dashboard/components/ChannelsAvailabilityDropdown";
+import { type ProductChannelListing } from "@dashboard/components/ChannelsAvailabilityDropdown/productUtils";
 import { EmptyImage } from "@dashboard/components/EmptyImage";
 import { PAGINATE_BY } from "@dashboard/config";
-import { type SearchProductFragment } from "@dashboard/graphql";
+import { PermissionEnum } from "@dashboard/graphql";
 import { maybe } from "@dashboard/misc";
 import { productUrl } from "@dashboard/products/urls";
+import { useHasPermission } from "@dashboard/search/useHasPermission";
 import { type ListActions, type ListProps } from "@dashboard/types";
 import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { messages } from "./messages";
 
+/**
+ * Structural row rather than SearchProductFragment — the voucher catalogue query selects a
+ * narrower product. `channelListings` is absent (not empty) when the viewer lacks
+ * MANAGE_PRODUCTS, since it is behind `@include(if: $PERMISSION_MANAGE_PRODUCTS)`.
+ */
+export type DiscountProductRow = {
+  id: string;
+  name: string;
+  thumbnail?: { url: string } | null;
+  productType: { name: string };
+  channelListings?: ProductChannelListing[] | null;
+};
+
 interface SaleProductsProps extends Omit<ListProps, "onUpdateListSettings">, ListActions {
-  products: SearchProductFragment[];
+  products: DiscountProductRow[];
   onProductAssign: () => void;
   onProductUnassign: (id: string) => void;
   numberOfRows?: number;
@@ -42,10 +57,13 @@ export const DiscountProducts = ({
   embedded = false,
 }: SaleProductsProps): JSX.Element => {
   const intl = useIntl();
+  // Product.channelListings is behind MANAGE_PRODUCTS and simply absent otherwise, so drop the
+  // column instead of filling every row with a placeholder.
+  const canManageProducts = useHasPermission()(PermissionEnum.MANAGE_PRODUCTS);
 
   const body = (
     <>
-      <AssignableListTable<SearchProductFragment>
+      <AssignableListTable<DiscountProductRow>
         data-test-id="assigned-specific-products-table"
         rowTestId="assigned-specific-product"
         items={products}
@@ -62,21 +80,27 @@ export const DiscountProducts = ({
           {
             id: "name",
             // Slightly prefer name, but keep type/availability readable in the catalogue panel.
-            width: "42%",
+            width: canManageProducts ? "42%" : "60%",
             header: <FormattedMessage {...messages.discountProductsTableProductHeader} />,
           },
           {
             id: "type",
-            width: "24%",
+            width: canManageProducts ? "24%" : "32%",
             header: <FormattedMessage {...messages.discountProductsTableTypeHeader} />,
             hideHeaderWhenSelected: true,
           },
-          {
-            id: "availability",
-            width: "26%",
-            header: <FormattedMessage {...messages.discountProductsTableAvailabilityHeader} />,
-            hideHeaderWhenSelected: true,
-          },
+          ...(canManageProducts
+            ? [
+                {
+                  id: "availability",
+                  width: "26%",
+                  header: (
+                    <FormattedMessage {...messages.discountProductsTableAvailabilityHeader} />
+                  ),
+                  hideHeaderWhenSelected: true,
+                },
+              ]
+            : []),
         ]}
         renderCells={product => (
           <>
@@ -114,13 +138,15 @@ export const DiscountProducts = ({
                 {maybe(() => product.productType.name)}
               </Text>
             </AssignableListCell>
-            <AssignableListCell truncate>
-              {product.channelListings?.length ? (
-                <ProductChannelsAvailability channels={product.channelListings} />
-              ) : (
-                "-"
-              )}
-            </AssignableListCell>
+            {canManageProducts && (
+              <AssignableListCell truncate>
+                {product.channelListings?.length ? (
+                  <ProductChannelsAvailability channels={product.channelListings} />
+                ) : (
+                  "-"
+                )}
+              </AssignableListCell>
+            )}
           </>
         )}
       />

src/discounts/components/VoucherCatalogueSection/VoucherCatalogueSection.tsx

@@ -1,7 +1,7 @@
 import { Callout } from "@dashboard/components/Callout/Callout";
 import { DetailSettingsCard } from "@dashboard/components/DetailSettingsCard/DetailSettingsCard";
 import { iconSize, iconStrokeWidthBySize } from "@dashboard/components/icons";
-import { type DiscountErrorFragment, type SearchProductFragment } from "@dashboard/graphql";
+import { type DiscountErrorFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import { type Node } from "@dashboard/types";
 import { Box, Button, Text } from "@saleor/macaw-ui-next";
@@ -31,7 +31,7 @@ interface VoucherCatalogueSectionProps {
   tabItemsCount: VoucherTabItemsCount;
   categories: Parameters<typeof DiscountCategories>[0]["categories"];
   collections: Parameters<typeof DiscountCollections>[0]["collections"];
-  products: SearchProductFragment[];
+  products: Parameters<typeof DiscountProducts>[0]["products"];
   variants: Parameters<typeof DiscountVariants>[0]["variants"];
   numberOfRows: number;
   onUpdateListSettings: (key: "rowNumber", value: number) => void;

src/discounts/components/VoucherDetailsPage/VoucherDetailsPageFormContent.tsx

@@ -15,11 +15,7 @@ import { Savebar } from "@dashboard/components/Savebar";
 import { createChannelsChangeHandler } from "@dashboard/discounts/handlers";
 import { AppWidgets } from "@dashboard/extensions/components/AppWidgets/AppWidgets";
 import { type ExtensionWithParams } from "@dashboard/extensions/types";
-import {
-  type DiscountErrorFragment,
-  PermissionEnum,
-  type SearchProductFragment,
-} from "@dashboard/graphql";
+import { type DiscountErrorFragment, PermissionEnum } from "@dashboard/graphql";
 import { type UseFormResult } from "@dashboard/hooks/useForm";
 import { type UseListSettings } from "@dashboard/hooks/useListSettings";
 import { type LocalPagination } from "@dashboard/hooks/useLocalPaginator";
@@ -360,7 +356,7 @@ export const VoucherDetailsPageFormContent = ({
                 onTabClick={onTabClick}
                 categories={mapEdgesToItems(voucher?.categories)}
                 collections={mapEdgesToItems(voucher?.collections)}
-                products={mapEdgesToItems(voucher?.products) as unknown as SearchProductFragment[]}
+                products={mapEdgesToItems(voucher?.products) ?? []}
                 variants={voucher?.variants}
                 onCategoryAssign={onCategoryAssign}
                 onCategoryUnassign={onCategoryUnassign}

src/discounts/mutations.ts

@@ -39,6 +39,7 @@ export const voucherCataloguesAdd = gql`
     $includeCollections: Boolean!
     $includeCategories: Boolean!
     $includeVariants: Boolean!
+    $PERMISSION_MANAGE_PRODUCTS: Boolean!
   ) {
     voucherCataloguesAdd(id: $id, input: $input) {
       errors {
@@ -64,6 +65,7 @@ export const voucherCataloguesRemove = gql`
     $includeCollections: Boolean!
     $includeCategories: Boolean!
     $includeVariants: Boolean!
+    $PERMISSION_MANAGE_PRODUCTS: Boolean!
   ) {
     voucherCataloguesRemove(id: $id, input: $input) {
       errors {

src/discounts/queries.ts

@@ -128,6 +128,7 @@ export const voucherCatalogue = gql`
     $includeCollections: Boolean!
     $includeCategories: Boolean!
     $includeVariants: Boolean!
+    $PERMISSION_MANAGE_PRODUCTS: Boolean!
   ) {
     voucher(id: $id) {
       id

src/discounts/utils.ts

@@ -1,12 +1,12 @@
-import { type PromotionRuleDetailsFragment, type SaleDetailsQuery } from "@dashboard/graphql";
+import { type PromotionRuleDetailsFragment } from "@dashboard/graphql";
 import { sortAlphabetically } from "@dashboard/utils/sort";
 
 import { type Rule } from "./models";
 
 export type PromotionStatus = "scheduled" | "active" | "finished";
 
 export function getAssignedVariantIds(
-  variants: NonNullable<SaleDetailsQuery["sale"]>["variants"] | null | undefined,
+  variants: { edges: Array<{ node: { id: string } }> } | null | undefined,
 ): string[] {
   return variants?.edges.map(variant => variant.node.id) ?? [];
 }

src/discounts/views/VoucherCreate/VoucherCreate.tsx

@@ -117,19 +117,27 @@ const VoucherCreateView = ({ params }: VoucherCreateProps) => {
     useState<SearchCategoriesWithTotalProductsQueryVariables>(categorySearchInitialVariables);
   const [collectionSearchVariables, setCollectionSearchVariables] =
     useState<SearchCollectionsWithTotalProductsQueryVariables>(collectionSearchInitialVariables);
+  // Assign-picker searches only feed their dialog, so keep them off until it opens.
+  // SearchProducts pulls Product/ProductVariant.channelListings, which Core gates behind
+  // MANAGE_PRODUCTS — running it on mount buried MANAGE_DISCOUNTS-only staff in permission
+  // errors just for opening the create page.
   const categoriesSearch = useCategoryWithTotalProductsSearch({
+    skip: params.action !== "assign-category",
     variables: categorySearchVariables,
   });
   const collectionsSearch = useCollectionWithTotalProductsSearch({
+    skip: params.action !== "assign-collection",
     variables: collectionSearchVariables,
   });
   // Products already on the voucher are dropped client-side, so a page of 20 can arrive empty
   // on a large catalog. Ask for more per request so the picker stays useful without leaning on
   // backfill for every page.
   const productsSearch = useProductSearch({
+    skip: params.action !== "assign-product",
     variables: productSearchVariables,
   });
   const variantsSearch = useProductSearch({
+    skip: params.action !== "assign-variant",
     variables: variantSearchVariables,
   });