feat(SupportedDeviceTable): Add excludeIf and includeIf props (#575)

* feat(SupportedDeviceTable): Add excludeIf and includeIf props

* Add UPSTREAM note

Author: razor-x

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -15,6 +15,8 @@ interface SupportedDeviceContentProps {
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }
 
 export function SupportedDeviceContent({
@@ -23,13 +25,17 @@ export function SupportedDeviceContent({
   filters,
   manufacturers,
   excludedManufacturers,
+  includeIf,
+  excludeIf,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
       filterValue,
       filters,
       manufacturers,
       excludedManufacturers,
+      includeIf,
+      excludeIf,
     }
   )
 

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts

@@ -8,6 +8,8 @@ export const props: ElementProps<SupportedDeviceTableProps> = {
   disableFilter: 'boolean',
   manufacturers: 'array',
   excludedManufacturers: 'array',
+  includeIf: 'array',
+  excludeIf: 'array',
 }
 
 export { SupportedDeviceTable as Component } from './SupportedDeviceTable.js'

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.stories.tsx

@@ -50,6 +50,27 @@ export const ExcludeManufacturers: Story = {
   ),
 }
 
+export const IncludeIf: Story = {
+  render: (props) => (
+    <SupportedDeviceTable
+      {...props}
+      includeIf={[
+        'software_features.can_remotely_unlock',
+        'physical_properties.has_physical_key',
+      ]}
+    />
+  ),
+}
+
+export const ExcludeIf: Story = {
+  render: (props) => (
+    <SupportedDeviceTable
+      {...props}
+      excludeIf={['software_features.can_remotely_unlock']}
+    />
+  ),
+}
+
 export const InsideModal: Story = {
   render: (props) => {
     const [open, toggleOpen] = useToggle()

src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx

@@ -15,6 +15,8 @@ export interface SupportedDeviceTableProps extends CommonProps {
   disableFilter?: boolean
   manufacturers?: string[] | null
   excludedManufacturers?: string[]
+  includeIf?: string[] | null
+  excludeIf?: string[]
 }
 
 export const NestedSupportedDeviceTable =
@@ -24,6 +26,8 @@ export function SupportedDeviceTable({
   disableFilter = false,
   manufacturers = null,
   excludedManufacturers = [],
+  includeIf = null,
+  excludeIf = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   useComponentTelemetry('SupportedDeviceTable')
@@ -59,6 +63,8 @@ export function SupportedDeviceTable({
         filters={filters}
         manufacturers={manufacturers}
         excludedManufacturers={excludedManufacturers}
+        includeIf={includeIf}
+        excludeIf={excludeIf}
       />
     </div>
   )

src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -13,17 +13,30 @@ export interface DeviceModelFilters {
 export const useFilteredDeviceModels = ({
   filterValue,
   filters,
+  includeIf,
+  excludeIf,
   ...manufacturersParams
 }: {
   filterValue: string
   filters: DeviceModelFilters
   manufacturers: string[] | null
   excludedManufacturers: string[]
+  includeIf: string[] | null
+  excludeIf: string[]
 }): ReturnType<typeof useDeviceModels> => {
   const { manufacturers } = useFilteredManufacturers(manufacturersParams)
 
   const params: UseDeviceModelsParams = {}
 
+  if (excludeIf.length > 0) {
+    params.exclude_if = excludeIf
+  }
+
+  // UPSTREAM: API does not parse zero-length arrays correctly.
+  if (includeIf != null && includeIf.length > 0) {
+    params.include_if = includeIf
+  }
+
   if (filterValue.trim() !== '') {
     params.text_search = filterValue.trim()
   }
@@ -50,13 +63,17 @@ export const useFilteredDeviceModels = ({
 
   return {
     ...rest,
-    deviceModels: deviceModels?.filter(
-      (deviceModel) =>
-        manufacturers?.some(
-          (manufacturer) =>
-            deviceModel.manufacturer.manufacturer_id ===
-            manufacturer.manufacturer_id
-        )
-    ),
+    deviceModels:
+      // UPSTREAM: API does not parse zero-length arrays correctly.
+      includeIf?.length === 0
+        ? []
+        : deviceModels?.filter(
+            (deviceModel) =>
+              manufacturers?.some(
+                (manufacturer) =>
+                  deviceModel.manufacturer.manufacturer_id ===
+                  manufacturer.manufacturer_id
+              )
+          ),
   }
 }