feat(admin-ui): Add Sales Channel filter (#3897)

* feat(admin-ui): Add Sales Channel filter

* Create silver-wombats-camp.md

* filter out null children

.changeset/silver-wombats-camp.md

@@ -0,0 +1,6 @@
+---
+"@medusajs/admin-ui": patch
+"@medusajs/admin": patch
+---
+
+feat(admin-ui): Add Sales Channel filter

packages/admin-ui/ui/src/components/molecules/filter-dropdown/container.tsx

@@ -74,7 +74,7 @@ const FilterDropdownContainer = ({
             Apply
           </Button>
         </div>
-        {React.Children.map(children, (child) => {
+        {React.Children.toArray(children).filter(Boolean).map((child) => {
           return (
             <div className="border-grey-20 border-b py-2 px-4 last:border-0 last:pb-0">
               {child}

packages/admin-ui/ui/src/components/templates/order-filter-dropdown/index.tsx

@@ -1,13 +1,16 @@
 import clsx from "clsx"
-import { useAdminRegions } from "medusa-react"
+import { useAdminRegions, useAdminSalesChannels } from "medusa-react"
 import { useEffect, useState } from "react"
 import FilterDropdownContainer from "../../../components/molecules/filter-dropdown/container"
 import FilterDropdownItem from "../../../components/molecules/filter-dropdown/item"
 import SaveFilterItem from "../../../components/molecules/filter-dropdown/save-field"
 import TabFilter from "../../../components/molecules/filter-tab"
 import PlusIcon from "../../fundamentals/icons/plus-icon"
+import FeatureToggle from "../../fundamentals/feature-toggle"
+import { useFeatureFlag } from "../../../providers/feature-flag-provider"
 
 const REGION_PAGE_SIZE = 10
+const CHANNEL_PAGE_SIZE = 10
 
 const statusFilters = [
   "completed",
@@ -58,6 +61,9 @@ const OrderFilters = ({
   const [tempState, setTempState] = useState(filters)
   const [name, setName] = useState("")
 
+  const { isFeatureEnabled } = useFeatureFlag()
+  const isSalesChannelsEnabled = isFeatureEnabled("sales_channels")
+
   const handleRemoveTab = (val) => {
     if (onRemoveTab) {
       onRemoveTab(val)
@@ -116,6 +122,12 @@ const OrderFilters = ({
     isLoading: isLoadingRegions,
   } = useAdminRegions(regionsPagination)
 
+  const { sales_channels, isLoading: isLoadingSalesChannels } =
+    useAdminSalesChannels(
+      { limit: CHANNEL_PAGE_SIZE },
+      { enabled: isSalesChannelsEnabled }
+    )
+
   const handlePaginateRegions = (direction) => {
     if (direction > 0) {
       setRegionsPagination((prev) => ({
@@ -195,6 +207,21 @@ const OrderFilters = ({
           open={tempState.region.open}
           setFilter={(v) => setSingleFilter("region", v)}
         />
+        {isSalesChannelsEnabled && (
+          <FilterDropdownItem
+            filterTitle="Sales Channel"
+            options={
+              sales_channels?.map((salesChannel) => ({
+                value: salesChannel.id,
+                label: salesChannel.name,
+              })) || []
+            }
+            isLoading={isLoadingSalesChannels}
+            filters={tempState.salesChannel.filter}
+            open={tempState.salesChannel.open}
+            setFilter={(v) => setSingleFilter("salesChannel", v)}
+          />
+        )}
         <FilterDropdownItem
           filterTitle="Date"
           options={dateFilters}

packages/admin-ui/ui/src/components/templates/order-table/index.tsx

@@ -33,7 +33,9 @@ const OrderTable = ({ setContextFilters }: OrderTableProps) => {
 
   let hiddenColumns = ["sales_channel"]
   if (isFeatureEnabled("sales_channels")) {
-    defaultQueryProps.expand = defaultQueryProps.expand + ",sales_channel"
+    if (!defaultQueryProps.expand.includes("sales_channel")) {
+      defaultQueryProps.expand = defaultQueryProps.expand + ",sales_channel"
+    }
     hiddenColumns = []
   }
 

packages/admin-ui/ui/src/components/templates/order-table/use-order-filters.ts

@@ -25,6 +25,10 @@ interface OrderFilterState {
     open: boolean
     filter: null | string[] | string
   }
+  salesChannel: {
+    open: boolean
+    filter: null | string[] | string
+  }
   status: {
     open: boolean
     filter: null | string[] | string
@@ -94,6 +98,7 @@ const reducer = (
       return {
         ...state,
         region: action.payload.region,
+        salesChannel: action.payload.salesChannel,
         fulfillment: action.payload.fulfillment,
         payment: action.payload.payment,
         status: action.payload.status,
@@ -236,6 +241,10 @@ export const useOrderFilters = (
           open: false,
           filter: null,
         },
+        salesChannel: {
+          open: false,
+          filter: null,
+        },
         date: {
           open: false,
           filter: null,
@@ -414,6 +423,7 @@ export const useOrderFilters = (
     const clean = omit(repObj, ["limit", "offset"])
     const repString = qs.stringify(clean, { skipNulls: true })
 
+
     const storedString = localStorage.getItem("orders::filters")
 
     let existing: null | object = null
@@ -499,10 +509,12 @@ const filterStateMap = {
   payment_status: "payment",
   created_at: "date",
   region_id: "region",
+  sales_channel_id: "salesChannel",
 }
 
 const stateFilterMap = {
   region: "region_id",
+  salesChannel: "sales_channel_id",
   status: "status",
   fulfillment: "fulfillment_status",
   payment: "payment_status",
@@ -526,6 +538,10 @@ const parseQueryString = (
       open: false,
       filter: null,
     },
+    salesChannel: {
+      open: false,
+      filter: null,
+    },
     payment: {
       open: false,
       filter: null,
@@ -589,6 +605,15 @@ const parseQueryString = (
             }
             break
           }
+          case "sales_channel_id": {
+            if (typeof value === "string" || Array.isArray(value)) {
+              defaultVal.salesChannel = {
+                open: true,
+                filter: value,
+              }
+            }
+            break
+          }
           case "payment_status": {
             if (typeof value === "string" || Array.isArray(value)) {
               defaultVal.payment = {