Add placeholder to price cells in product list

.changeset/selfish-walls-sit.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Product list no longer show a dash instead of product's price when channel is not selected. Instead 'Select channel' shortcut was added meaning that you can now use it to open filters window with 'channel' already selected.

locale/defaultMessages.json

@@ -7173,6 +7173,10 @@
   "jd/LWa": {
     "string": "Voucher applies to all countries"
   },
+  "jgURyO": {
+    "context": "product price",
+    "string": "Select channel"
+  },
   "jhh/D6": {
     "string": "Menu Title"
   },

src/components/AppLayout/ListFilters/components/ExpressionFilters.tsx

@@ -4,19 +4,18 @@ import {
   useConditionalFilterContext,
 } from "@dashboard/components/ConditionalFilter";
 import { Box, Button, CloseIcon, DropdownButton, Popover, Text } from "@saleor/macaw-ui-next";
-import React, { useState } from "react";
+import React from "react";
 import { useIntl } from "react-intl";
 
 export const ExpressionFilters = () => {
-  const [open, setOpen] = useState(false);
   const { formatMessage } = useIntl();
-  const { valueProvider, containerState } = useConditionalFilterContext();
+  const { valueProvider, containerState, filterWindow } = useConditionalFilterContext();
   const clickOutside = () => {
     containerState.clearEmpty();
   };
 
   return (
-    <Popover open={open} onOpenChange={open => setOpen(open)}>
+    <Popover open={filterWindow.isOpen} onOpenChange={open => filterWindow.setOpen(open)}>
       <Popover.Trigger>
         <DropdownButton data-test-id="filters-button">
           {formatMessage(conditionalFilterMessages.popoverTrigger, {
@@ -46,7 +45,7 @@ export const ExpressionFilters = () => {
               </Popover.Close>
             </Box>
           </Box>
-          <ConditionalFilters onClose={() => setOpen(false)} />
+          <ConditionalFilters onClose={() => filterWindow.setOpen(false)} />
         </Box>
       </Popover.Content>
     </Popover>

src/components/ConditionalFilter/context/context.ts

@@ -4,10 +4,12 @@ import { FilterAPIProvider } from "../API/FilterAPIProvider";
 import { FilterValueProvider } from "../FilterValueProvider";
 import { LeftOperandsProvider } from "../LeftOperandsProvider";
 import { useContainerState } from "../useContainerState";
+import { FilterWindow } from "../useFilterWindow";
 
 export const ConditionalFilterContext = createContext<{
   apiProvider: FilterAPIProvider;
   valueProvider: FilterValueProvider;
   leftOperandsProvider: LeftOperandsProvider;
   containerState: ReturnType<typeof useContainerState>;
+  filterWindow: FilterWindow;
 } | null>(null);

src/components/ConditionalFilter/context/provider.tsx

@@ -12,6 +12,7 @@ import {
 } from "../constants";
 import { useContainerState } from "../useContainerState";
 import { useFilterLeftOperandsProvider } from "../useFilterLeftOperands";
+import { useFilterWindow } from "../useFilterWindow";
 import { useUrlValueProvider } from "../ValueProvider/useUrlValueProvider";
 import { ConditionalFilterContext } from "./context";
 
@@ -23,6 +24,7 @@ export const ConditionalProductFilterProvider: FC<{
   const valueProvider = useUrlValueProvider(locationSearch, "product", initialState);
   const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_PRODUCT_OPTIONS);
   const containerState = useContainerState(valueProvider);
+  const filterWindow = useFilterWindow();
 
   return (
     <ConditionalFilterContext.Provider
@@ -31,6 +33,7 @@ export const ConditionalProductFilterProvider: FC<{
         valueProvider,
         leftOperandsProvider,
         containerState,
+        filterWindow,
       }}
     >
       {children}
@@ -45,6 +48,7 @@ export const ConditionalDiscountFilterProvider: FC<{
   const valueProvider = useUrlValueProvider(locationSearch, "discount");
   const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_DISCOUNT_OPTIONS);
   const containerState = useContainerState(valueProvider);
+  const filterWindow = useFilterWindow();
 
   return (
     <ConditionalFilterContext.Provider
@@ -53,6 +57,7 @@ export const ConditionalDiscountFilterProvider: FC<{
         valueProvider,
         leftOperandsProvider,
         containerState,
+        filterWindow,
       }}
     >
       {children}
@@ -69,6 +74,7 @@ export const ConditionalOrderFilterProvider: FC<{
   const valueProvider = useUrlValueProvider(locationSearch, "order", initialState);
   const leftOperandsProvider = useFilterLeftOperandsProvider(STATIC_ORDER_OPTIONS);
   const containerState = useContainerState(valueProvider);
+  const filterWindow = useFilterWindow();
 
   return (
     <ConditionalFilterContext.Provider
@@ -77,6 +83,7 @@ export const ConditionalOrderFilterProvider: FC<{
         valueProvider,
         leftOperandsProvider,
         containerState,
+        filterWindow,
       }}
     >
       {children}

src/components/ConditionalFilter/useFilterWindow.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+
+export interface FilterWindow {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const useFilterWindow = () => {
+  const [open, setOpen] = useState(false);
+
+  return {
+    isOpen: open,
+    setOpen,
+  };
+};

src/components/Datagrid/Datagrid.tsx

@@ -2,6 +2,7 @@ import "@glideapps/glide-data-grid/dist/index.css";
 
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { usePreventHistoryBack } from "@dashboard/hooks/usePreventHistoryBack";
+import { getCellAction } from "@dashboard/products/components/ProductListDatagrid/datagrid";
 import DataEditor, {
   CellClickedEventArgs,
   DataEditorProps,
@@ -146,6 +147,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
   const { rowAnchorRef, setRowAnchorRef, setAnchorPosition } = useRowAnchor({
     getRowAnchorUrl: rowAnchor,
     rowMarkers,
+    availableColumns,
   });
 
   const { handleRowHover, hoverRow } = useRowHover({
@@ -258,6 +260,10 @@ export const Datagrid: React.FC<DatagridProps> = ({
         onRowClick(item);
       }
 
+      if (getCellAction(availableColumns, item[0])) {
+        return;
+      }
+
       handleRowHover(args);
 
       if (rowAnchorRef.current) {

src/components/Datagrid/customCells/cells.ts

@@ -28,14 +28,19 @@ export function textCell(value: string, opts?: Partial<TextCell>): GridCell {
   };
 }
 
-export function readonlyTextCell(value: string, hasCursorPointer = true): TextCell {
+export function readonlyTextCell(
+  value: string,
+  hasCursorPointer = true,
+  style: TextCell["style"] = "normal",
+): TextCell {
   return {
     cursor: hasCursorPointer ? "pointer" : "default",
     allowOverlay: false,
     readonly: true,
     data: value,
     displayData: value,
     kind: GridCellKind.Text,
+    style,
   };
 }
 

src/components/Datagrid/hooks/useRowAnchor.test.tsx

@@ -0,0 +1,107 @@
+import { GridMouseEventArgs } from "@glideapps/glide-data-grid";
+import { render } from "@testing-library/react";
+import { renderHook } from "@testing-library/react-hooks";
+import React from "react";
+
+import { useRowAnchor } from "./useRowAnchor";
+
+jest.mock("@dashboard/hooks/useDebounce", () => jest.fn(fn => fn));
+
+describe("useRowAnchor", () => {
+  const props = {
+    availableColumns: [
+      {
+        id: "name",
+        title: "Name",
+        width: 200,
+        icon: "arrowUp",
+      },
+      {
+        id: "description",
+        title: "Description",
+        width: 100,
+        icon: "arrowUp",
+      },
+    ],
+    getRowAnchorUrl: () => "test",
+    rowMarkers: "checkbox-visible" as const,
+  };
+
+  it("should return row anchor ref", () => {
+    // Arrange & Act
+    const { result } = renderHook(() => useRowAnchor(props));
+
+    render(<a ref={result.current.setRowAnchorRef} />);
+
+    // Assert
+    expect(result.current.rowAnchorRef).toBeDefined();
+  });
+  it("should have anchor set", () => {
+    // Arrange
+    const { result } = renderHook(() => useRowAnchor(props));
+
+    render(<a ref={result.current.setRowAnchorRef} />);
+
+    // Act
+    result.current.setAnchorPosition({
+      kind: "cell",
+      location: [1, 0],
+      bounds: { x: 0, y: 0, width: 0, height: 0 },
+      isEdge: false,
+      shiftKey: false,
+      ctrlKey: false,
+      isFillHandle: false,
+      metaKey: false,
+      isTouch: false,
+      localEventX: 81,
+      localEventY: 39,
+      button: 0,
+      scrollEdge: [0, 0],
+    });
+
+    // Assert
+    expect(result.current.rowAnchorRef.current!).not.toBeNull();
+    expect(result.current.rowAnchorRef.current!.style.left).toBe("0px");
+    expect(result.current.rowAnchorRef.current!.href).toBe("http://localhost/test");
+  });
+  it("should not set anchor position when cell has action", () => {
+    // Arrange
+    const { result } = renderHook(() =>
+      useRowAnchor({
+        ...props,
+        availableColumns: [
+          ...props.availableColumns,
+          {
+            id: "price",
+            title: "Price",
+            width: 100,
+            icon: "arrowUp",
+            action: jest.fn(),
+          },
+        ],
+      }),
+    );
+
+    render(<a ref={result.current.setRowAnchorRef} />);
+
+    // Act
+    result.current.setAnchorPosition({
+      kind: "cell",
+      location: [2, 0], // note: 2 is the index of the "price" column (with 'action')
+      bounds: { x: 0, y: 0, width: 0, height: 0 },
+      isEdge: false,
+      shiftKey: false,
+      ctrlKey: false,
+      isFillHandle: false,
+      metaKey: false,
+      isTouch: false,
+      localEventX: 81,
+      localEventY: 39,
+      button: 0,
+      scrollEdge: [0, 0],
+    } as GridMouseEventArgs);
+
+    // Assert
+    expect(result.current.rowAnchorRef.current!.href).toBe("");
+  });
+});

src/components/Datagrid/hooks/useRowAnchor.ts

@@ -1,18 +1,22 @@
 import { getAppMountUri } from "@dashboard/config";
 import useDebounce from "@dashboard/hooks/useDebounce";
+import { getCellAction } from "@dashboard/products/components/ProductListDatagrid/datagrid";
 import { DataEditorProps, GridMouseEventArgs, Item } from "@glideapps/glide-data-grid";
 import { useCallback, useRef } from "react";
 
+import { AvailableColumn } from "../types";
 import { preventRowClickOnSelectionCheckbox } from "../utils";
 
 const DEBOUNCE_TIME = 100;
 
 export const useRowAnchor = ({
   getRowAnchorUrl,
   rowMarkers,
+  availableColumns,
 }: {
   getRowAnchorUrl?: (item: Item) => string;
   rowMarkers?: DataEditorProps["rowMarkers"];
+  availableColumns?: readonly AvailableColumn[];
 }) => {
   const rowAnchorRef = useRef<HTMLAnchorElement | null>(null);
 
@@ -26,9 +30,10 @@ export const useRowAnchor = ({
         return;
       }
 
+      const action = getCellAction(availableColumns, args.location[0]);
       const href = getRowAnchorUrl(args.location);
 
-      if (!href) {
+      if (!href || action) {
         return;
       }
 

src/components/Datagrid/types.ts

@@ -10,4 +10,5 @@ export interface AvailableColumn {
   hasMenu?: boolean;
   icon?: string;
   themeOverride?: Partial<Theme>;
+  action?: (id: string) => void;
 }