[grid] Add "URI" to the list of sort-by choices on Overview UI (#16004)

Author: VietND96

javascript/grid-ui/src/screens/Overview/Overview.tsx

@@ -66,7 +66,8 @@ function Overview (): JSX.Element {
 
   const sortProperties = {
     'platformName': (a, b) => compareSlotStereotypes(a, b, 'platformName'),
-    'status': (a, b) => a.status.localeCompare(b.status),
+    'status': (a, b) => (a.status ?? '').localeCompare(b.status ?? ''),
+    'uri': (a, b) => (a.uri ?? '').localeCompare(b.uri ?? ''),
     'browserName': (a, b) => compareSlotStereotypes(a, b, 'browserName'),
     'browserVersion': (a, b) => compareSlotStereotypes(a, b, 'browserVersion'),
     'slotCount': (a, b) => {
@@ -80,6 +81,7 @@ function Overview (): JSX.Element {
   const sortPropertiesLabel = {
     'platformName': 'Platform Name',
     'status': 'Status',
+    'uri': 'URI',
     'browserName': 'Browser Name',
     'browserVersion': 'Browser Version',
     'slotCount': 'Slot Count',

javascript/grid-ui/src/tests/components/Overview.test.tsx

@@ -255,6 +255,54 @@ describe('Overview component', () => {
     }
   })
 
+  it('sorts nodes by URI when selected', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Overview />
+      </MockedProvider>
+    )
+
+    await screen.findByText('http://192.168.1.10:4444')
+
+    const user = userEvent.setup()
+    const selectElement = screen.getByRole('combobox')
+    await user.click(selectElement)
+    await user.click(screen.getByText('URI'))
+
+    // After sorting by URI, node1 should appear before node2
+    const nodeUris = screen.getAllByText(/http:\/\/192\.168\.1\.\d+:4444/)
+    expect(nodeUris[0]).toHaveTextContent('http://192.168.1.10:4444')
+    expect(nodeUris[1]).toHaveTextContent('http://192.168.1.11:4444')
+  })
+
+  it('sorts nodes by URI in descending order when selected', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Overview />
+      </MockedProvider>
+    )
+
+    await screen.findByText('http://192.168.1.10:4444')
+
+    const user = userEvent.setup()
+    const selectElement = screen.getByRole('combobox')
+    await user.click(selectElement)
+    await user.click(screen.getByText('URI'))
+
+    const descendingLabel = screen.getByText('Descending')
+    const checkbox = descendingLabel.closest('label')?.querySelector('input[type="checkbox"]')
+    expect(checkbox).not.toBeNull()
+    if (checkbox) {
+      await user.click(checkbox)
+      expect(checkbox).toBeChecked()
+    }
+
+    // After sorting by URI descending, node2 should appear before node1
+    const nodeUris = screen.getAllByText(/http:\/\/192\.168\.1\.\d+:4444/)
+    expect(nodeUris[0]).toHaveTextContent('http://192.168.1.11:4444')
+    expect(nodeUris[1]).toHaveTextContent('http://192.168.1.10:4444')
+  })
+
   it('renders live view icon for node with VNC session', async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>