feat(console): support searching for organization roles (#5646)

packages/console/src/pages/OrganizationTemplate/OrganizationRoles/index.module.scss

@@ -8,6 +8,6 @@
 
 .filter {
   display: flex;
-  flex-direction: row-reverse;
   align-items: center;
+  justify-content: space-between;
 }

packages/console/src/pages/OrganizationTemplate/OrganizationRoles/index.tsx

@@ -1,5 +1,7 @@
 import { type OrganizationRoleWithScopes } from '@logto/schemas';
+import { cond } from '@silverhand/essentials';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import Plus from '@/assets/icons/plus.svg';
@@ -7,11 +9,13 @@ import OrgRoleIcon from '@/assets/icons/role-feature.svg';
 import RolesEmptyDark from '@/assets/images/roles-empty-dark.svg';
 import RolesEmpty from '@/assets/images/roles-empty.svg';
 import Breakable from '@/components/Breakable';
+import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
 import ItemPreview from '@/components/ItemPreview';
 import ThemedIcon from '@/components/ThemedIcon';
 import { defaultPageSize, organizationRoleLink } from '@/consts';
 import Button from '@/ds-components/Button';
 import DynamicT from '@/ds-components/DynamicT';
+import Search from '@/ds-components/Search';
 import Table from '@/ds-components/Table';
 import TablePlaceholder from '@/ds-components/Table/TablePlaceholder';
 import Tag from '@/ds-components/Tag';
@@ -19,16 +23,18 @@ import { type RequestError } from '@/hooks/use-api';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
-import { buildUrl } from '@/utils/url';
+import { buildUrl, formatSearchKeyword } from '@/utils/url';
 
 import CreateOrganizationRoleModal from './CreateOrganizationRoleModal';
 import * as styles from './index.module.scss';
 
 function OrganizationRoles() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { getDocumentationUrl } = useDocumentationUrl();
   const { navigate } = useTenantPathname();
-  const [{ page }, updateSearchParameters] = useSearchParametersWatcher({
+  const [{ page, keyword }, updateSearchParameters] = useSearchParametersWatcher({
     page: 1,
+    keyword: '',
   });
 
   const { data, error, mutate, isLoading } = useSWR<
@@ -38,6 +44,7 @@ function OrganizationRoles() {
     buildUrl('api/organization-roles', {
       page: String(page),
       page_size: String(defaultPageSize),
+      ...cond(keyword && { q: formatSearchKeyword(keyword) }),
     })
   );
 
@@ -83,6 +90,17 @@ function OrganizationRoles() {
         }}
         filter={
           <div className={styles.filter}>
+            <Search
+              placeholder={t('organization_template.roles.search_placeholder')}
+              defaultValue={keyword}
+              isClearable={Boolean(keyword)}
+              onSearch={(keyword) => {
+                updateSearchParameters({ keyword });
+              }}
+              onClearSearch={() => {
+                updateSearchParameters({ keyword: '' });
+              }}
+            />
             <Button
               title="organization_template.roles.create_title"
               type="primary"
@@ -94,27 +112,31 @@ function OrganizationRoles() {
           </div>
         }
         placeholder={
-          <TablePlaceholder
-            image={<RolesEmpty />}
-            imageDark={<RolesEmptyDark />}
-            title="organization_template.roles.placeholder_title"
-            description="organization_template.roles.placeholder_description"
-            learnMoreLink={{
-              href: getDocumentationUrl(organizationRoleLink),
-              targetBlank: 'noopener',
-            }}
-            action={
-              <Button
-                title="organization_template.roles.create_title"
-                type="primary"
-                size="large"
-                icon={<Plus />}
-                onClick={() => {
-                  setIsCreateModalOpen(true);
-                }}
-              />
-            }
-          />
+          keyword ? (
+            <EmptyDataPlaceholder />
+          ) : (
+            <TablePlaceholder
+              image={<RolesEmpty />}
+              imageDark={<RolesEmptyDark />}
+              title="organization_template.roles.placeholder_title"
+              description="organization_template.roles.placeholder_description"
+              learnMoreLink={{
+                href: getDocumentationUrl(organizationRoleLink),
+                targetBlank: 'noopener',
+              }}
+              action={
+                <Button
+                  title="organization_template.roles.create_title"
+                  type="primary"
+                  size="large"
+                  icon={<Plus />}
+                  onClick={() => {
+                    setIsCreateModalOpen(true);
+                  }}
+                />
+              }
+            />
+          )
         }
         pagination={{
           page,