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

Author: VietND96

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

@@ -67,6 +67,7 @@ function Overview (): JSX.Element {
   const sortProperties = {
     'platformName': (a, b) => compareSlotStereotypes(a, b, 'platformName'),
     '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,26 @@ 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('renders live view icon for node with VNC session', async () => {
     render(
       <MockedProvider mocks={mocks} addTypename={false}>