From eb683e39eb877c9e7d0c425253f355497a78a57c Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Thu, 7 Sep 2023 09:13:36 -0700
Subject: [PATCH] Fix not being able to search for locks in table (#31581)

---
 .../teleport/src/LocksV2/Locks/Locks.test.tsx | 81 +++++++++++++++++++
 .../teleport/src/LocksV2/Locks/Locks.tsx      | 10 +--
 2 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 web/packages/teleport/src/LocksV2/Locks/Locks.test.tsx

diff --git a/web/packages/teleport/src/LocksV2/Locks/Locks.test.tsx b/web/packages/teleport/src/LocksV2/Locks/Locks.test.tsx
new file mode 100644
index 0000000000000..11555c0d0f312
--- /dev/null
+++ b/web/packages/teleport/src/LocksV2/Locks/Locks.test.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright 2023 Gravitational, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { setupServer } from 'msw/node';
+import { rest } from 'msw';
+import { render, fireEvent, screen } from 'design/utils/testing';
+
+import { ContextProvider } from 'teleport';
+import { createTeleportContext } from 'teleport/mocks/contexts';
+import cfg from 'teleport/config';
+
+import { Locks } from './Locks';
+
+test('lock search', async () => {
+  const server = setupServer(
+    rest.get(cfg.getLocksUrl(), (req, res, ctx) => {
+      return res(
+        ctx.json([
+          {
+            name: 'lock-name-1',
+            targets: {
+              user: 'lock-user',
+            },
+          },
+          {
+            name: 'lock-name-2',
+            targets: {
+              role: 'lock-role-1',
+            },
+          },
+          {
+            name: 'lock-name-3',
+            targets: {
+              role: 'lock-role-2',
+            },
+          },
+        ])
+      );
+    })
+  );
+
+  server.listen();
+
+  const ctx = createTeleportContext();
+
+  render(
+    <MemoryRouter>
+      <ContextProvider ctx={ctx}>
+        <Locks />
+      </ContextProvider>
+    </MemoryRouter>
+  );
+
+  const rows = await screen.findAllByText(/lock-/i);
+  expect(rows).toHaveLength(3);
+
+  // Test searching.
+  fireEvent.change(screen.getByPlaceholderText(/search/i), {
+    target: { value: 'lock-role' },
+  });
+
+  expect(screen.queryAllByText(/lock-role/i)).toHaveLength(2);
+  expect(screen.queryByText(/lock-user/i)).not.toBeInTheDocument();
+
+  server.close();
+});
diff --git a/web/packages/teleport/src/LocksV2/Locks/Locks.tsx b/web/packages/teleport/src/LocksV2/Locks/Locks.tsx
index d19f473b72249..1b6576180a42c 100644
--- a/web/packages/teleport/src/LocksV2/Locks/Locks.tsx
+++ b/web/packages/teleport/src/LocksV2/Locks/Locks.tsx
@@ -177,17 +177,17 @@ function getFormattedDate(d: string): string {
   }
 }
 
-function lockTargetsMatcher(
+export function lockTargetsMatcher(
   targetValue: any,
   searchValue: string,
   propName: keyof Lock & string
 ) {
   if (propName === 'targets') {
-    return targetValue.some(
-      ({ name, value }) =>
+    return (targetValue as LockTarget[]).some(
+      ({ name, kind }) =>
         name.toLocaleUpperCase().includes(searchValue) ||
-        value.toLocaleUpperCase().includes(searchValue) ||
-        `${name}: ${value}`.toLocaleUpperCase().includes(searchValue)
+        kind.toLocaleUpperCase().includes(searchValue) ||
+        `${kind}: ${name}`.toLocaleUpperCase().includes(searchValue)
     );
   }
 }