Use SchemaSelector in auth policies (#18611)

studio/pages/project/[ref]/auth/policies.tsx

@@ -10,6 +10,7 @@ import { AuthLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AlertError from 'components/ui/AlertError'
 import NoPermission from 'components/ui/NoPermission'
+import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { useTablesQuery } from 'data/tables/tables-query'
@@ -17,7 +18,7 @@ import { useCheckPermissions, useStore } from 'hooks'
 import { EXCLUDED_SCHEMAS } from 'lib/constants/schemas'
 import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { NextPageWithLayout } from 'types'
-import { Button, IconExternalLink, IconLock, IconSearch, Input, Listbox } from 'ui'
+import { Button, IconExternalLink, IconSearch, Input } from 'ui'
 
 /**
  * Filter tables by table name and policy name
@@ -65,17 +66,11 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
     if (search) setSearchString(search)
   }, [search])
 
-  const {
-    data: schemas,
-    isLoading: isLoadingSchemas,
-    isSuccess: isSuccessSchemas,
-    isError: isErrorSchemas,
-    error: errorSchemas,
-  } = useSchemasQuery({
+  const { data: schemas } = useSchemasQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
-  const [protectedSchemas, openSchemas] = partition(schemas, (schema) =>
+  const [protectedSchemas] = partition(schemas, (schema) =>
     EXCLUDED_SCHEMAS.includes(schema?.name ?? '')
   )
   const schema = schemas?.find((schema) => schema.name === snap.selectedSchemaName)
@@ -96,7 +91,6 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
   })
 
   const filteredTables = onFilterTables(tables ?? [], policies, searchString)
-
   const canReadPolicies = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'policies')
 
   if (!canReadPolicies) {
@@ -108,64 +102,16 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
       <div className="mb-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center space-x-4">
-            <div className="w-[230px]">
-              {isLoadingSchemas && (
-                <div className="h-[34px] w-full bg-scale-1000 rounded shimmering-loader" />
-              )}
-
-              {isErrorSchemas && (
-                <AlertError error={errorSchemas} subject="Failed to retrieve schemas" />
-              )}
-
-              {isSuccessSchemas && (
-                <Listbox
-                  size="small"
-                  value={snap.selectedSchemaName}
-                  onChange={(schema: string) => {
-                    snap.setSelectedSchemaName(schema)
-                    setSearchString('')
-                  }}
-                  icon={isLocked && <IconLock size={14} strokeWidth={2} />}
-                >
-                  <Listbox.Option
-                    disabled
-                    key="normal-schemas"
-                    value="normal-schemas"
-                    label="Schemas"
-                  >
-                    <p className="text-sm">Schemas</p>
-                  </Listbox.Option>
-                  {openSchemas.map((schema) => (
-                    <Listbox.Option
-                      key={schema.id}
-                      value={schema.name}
-                      label={schema.name}
-                      addOnBefore={() => <span className="text-foreground-lighter">schema</span>}
-                    >
-                      <span className="text-foreground text-sm">{schema.name}</span>
-                    </Listbox.Option>
-                  ))}
-                  <Listbox.Option
-                    disabled
-                    key="protected-schemas"
-                    value="protected-schemas"
-                    label="Protected schemas"
-                  >
-                    <p className="text-sm">Protected schemas</p>
-                  </Listbox.Option>
-                  {protectedSchemas.map((schema) => (
-                    <Listbox.Option
-                      key={schema.id}
-                      value={schema.name}
-                      label={schema.name}
-                      addOnBefore={() => <span className="text-foreground-lighter">schema</span>}
-                    >
-                      <span className="text-foreground text-sm">{schema.name}</span>
-                    </Listbox.Option>
-                  ))}
-                </Listbox>
-              )}
-            </div>
+            <SchemaSelector
+              className="w-[260px]"
+              size="small"
+              showError={false}
+              selectedSchemaName={snap.selectedSchemaName}
+              onSelectSchema={(schema: string) => {
+                snap.setSelectedSchemaName(schema)
+                setSearchString('')
+              }}
+            />
             <Input
               size="small"
               placeholder="Filter tables and policies"