Devices Table

[dawnho]

Designs

We will not be implementing the modal, as Jurny wants to use their own modal. We'll just be focusing on the innards. I want to get y'all's inputs on how we might tie one view to another

Link to figma

Note, we're going to implement infinite scroll, as opposed to pagination.

Properties

Publicly available props for the component:

interface DevicesTableProps {
    deviceIds?: Array<string>
    onDeviceRowClick?: (deviceId: string) => void
    sortBy: "name" | "createdAt"
}

We'll list out all the devices listed in deviceIds. If deviceIds is undefined, show all devices.

onDeviceRowClick will allow a user to customize what they do when a user clicks on a device row.

Search

Search should look over the devices' name and location data.

Default Sort

We'll sort the devices by name.

[seveibar]

just a note: don't use the prefix handle*, use onDeviceRowClick

Also, everything should be camelCase, deviceIds

[seveibar]

deviceIds and onDeviceRowClick should be an optional. If device ids is not provided, show all devices. If onDeviceRowClick is not provided, show a device view modal on click.

[azat-co]

The cases shouldn't mix. I suggest deviceIds not device_ids, because camelCase is a common standard for ext. developer and the industry and they don't need to be expose to the internals.

[azat-co]

Let's make the search and sort by props too.

RE: Search

search: Array<string>

defaults:

search={['name', 'location']}

RE: sort

sortBy: keyof Device

default:

sortBy='name'

[azat-co]

I can take this one.

[dawnho]

deviceIds and onDeviceRowClick should be an optional. If device ids is not provided, show all devices. If onDeviceRowClick is not provided, show a device view modal on click.

Most of our customers will only want to show a subset of devices, no? I'm worried about them accidentally showing all the devices in their portfolio, and causing a security issue.

We're also not implementing modals, just the content of the modals. Jurny said they wanted to handle the modals themselves

[dawnho]

@azat-co feel free to add on the sorting and searching params that you suggested!

I do have a comment about sortBy: keyOf Device. Some of the device attributes, such as properties, are deep json objects. it might be hard to search over that. Curious about what your thoughts are there.

[razor-x]

@azat-co @mikewuu Might be helpful for the case conversion when using types from seamapi: https://javascript.plainenglish.io/transform-mapped-types-from-snake-to-camelcase-in-typescript-472a2a4843b9