From 59ed13b2ccf75f13bbd93fc5a677768a71358f95 Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Thu, 5 Dec 2024 18:28:15 +0100
Subject: [PATCH] NORY-15: add identity search

---
 dashboard/src/app/user/page.tsx           | 27 +++++++++++----
 dashboard/src/components/search-input.tsx | 40 +++++++++++++++++++++++
 2 files changed, 61 insertions(+), 6 deletions(-)
 create mode 100644 dashboard/src/components/search-input.tsx

diff --git a/dashboard/src/app/user/page.tsx b/dashboard/src/app/user/page.tsx
index e0cb1e5..dd7417e 100644
--- a/dashboard/src/app/user/page.tsx
+++ b/dashboard/src/app/user/page.tsx
@@ -2,12 +2,25 @@ import React, { Suspense } from 'react';
 import { DataTableFallback } from '@/components/ui/data-table-fallback';
 import { IdentityDataTable } from '@/app/user/data-table';
 import { getIdentityApi } from '@/ory/sdk/server';
+import { SearchInput } from '@/components/search-input';
 
-export default async function UserPage() {
+export default async function UserPage(
+    {
+        searchParams,
+    }: {
+        searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+    },
+) {
 
     const identityApi = await getIdentityApi();
 
-    const { data } = await identityApi.listIdentities();
+    const params = await searchParams;
+    const query = params.query ? params.query as string : '';
+
+    const data = await identityApi.listIdentities({
+        pageSize: 100,
+        previewCredentialsIdentifierSimilar: query,
+    }).then(response => response.data);
 
     return (
         <div className="flex flex-col space-y-4">
@@ -16,10 +29,12 @@ export default async function UserPage() {
                 <p className="text-lg font-light">See and manage all identities registered with your Ory Kratos
                     instance</p>
             </div>
-
-            <Suspense fallback={<DataTableFallback columnCount={5} rowCount={20}/>}>
-                <IdentityDataTable data={data}/>
-            </Suspense>
+            <div className="flex flex-col space-y-2">
+                <SearchInput queryParamKey="query" placeholder="Search"/>
+                <Suspense fallback={<DataTableFallback columnCount={5} rowCount={20}/>}>
+                    <IdentityDataTable data={data}/>
+                </Suspense>
+            </div>
         </div>
     );
 }
diff --git a/dashboard/src/components/search-input.tsx b/dashboard/src/components/search-input.tsx
new file mode 100644
index 0000000..fa6be17
--- /dev/null
+++ b/dashboard/src/components/search-input.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { ChangeEvent, HTMLInputTypeAttribute } from 'react';
+
+interface SearchInputProps {
+    placeholder: string;
+    queryParamKey: string;
+    type?: HTMLInputTypeAttribute;
+    className?: string;
+}
+
+export function SearchInput({ placeholder, queryParamKey, type, className }: SearchInputProps) {
+
+    const router = useRouter();
+    const params = useSearchParams();
+
+    const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+
+        const value = event.target.value;
+        const newParams = new URLSearchParams(params.toString());
+
+        if (value.length < 1) {
+            newParams.delete(queryParamKey);
+        } else {
+            newParams.set(queryParamKey, value);
+        }
+
+        router.replace('?' + newParams.toString());
+    };
+
+    return (
+        <Input
+            type={type ?? 'text'}
+            placeholder={placeholder}
+            className={className}
+            onChange={onSearchChange}/>
+    );
+}