From fe93df7d6b260882359c904daad0d08eb41868cb Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Tue, 5 May 2026 17:56:42 +0200
Subject: [PATCH] chore: migrate `Input` usages to Shadcn component in auth and
 policies screens/components (#45590)

## Screenshots

### Auth: Create or edit custom Auth provider

See the callback URL input at the bottom.

Before:
<img width="1179" height="1309" alt="image"
src="https://github.com/user-attachments/assets/b15d38fd-6e32-489e-8ef6-bff519d38123"
/>

After:
<img width="1176" height="1318" alt="image"
src="https://github.com/user-attachments/assets/dedc72cc-7756-4995-af9a-5f7a4554f76f"
/>

### Custom Auth provider list search input

Before:
<img width="1135" height="236" alt="image"
src="https://github.com/user-attachments/assets/ced8538a-91ca-428b-8d90-544962c1eb5b"
/>

After:
<img width="1147" height="227" alt="image"
src="https://github.com/user-attachments/assets/695a5c87-f371-4d90-91a8-761266526345"
/>

### Auth hooks

Before:
<img width="1150" height="301" alt="image"
src="https://github.com/user-attachments/assets/20341d7b-6a2f-491a-b23f-74d92398192f"
/>

After:
<img width="1143" height="305" alt="image"
src="https://github.com/user-attachments/assets/95d73950-eb55-459d-9cb9-3077bcd10985"
/>

### OAuth App list search input

Before:
<img width="1147" height="371" alt="image"
src="https://github.com/user-attachments/assets/be935f9d-1b32-4488-bf37-6153f7d39262"
/>

After:
<img width="1146" height="365" alt="image"
src="https://github.com/user-attachments/assets/628b77c8-074b-455a-94ea-b8e20b4da2db"
/>

### New policy sheet template search input
Before:
<img width="536" height="268" alt="image"
src="https://github.com/user-attachments/assets/d5ea6ee9-02fa-48fc-a727-cb56e5f57f8f"
/>

After:
<img width="534" height="260" alt="image"
src="https://github.com/user-attachments/assets/34ac4c40-5613-47f1-b724-0780499afa26"
/>

### Storage new policy dialog

Before:
<img width="1180" height="660" alt="image"
src="https://github.com/user-attachments/assets/afb4b1d3-f42b-4379-9197-c47a97340eaa"
/>

After:
<img width="1175" height="646" alt="image"
src="https://github.com/user-attachments/assets/427e2f0f-553b-4ea8-a8ae-f1835c1c791b"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Updated search input design across authentication interfaces for
improved consistency.
  * Standardized input control layout in auth configuration forms.

* **Bug Fixes**
  * Corrected webhook configuration field behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../CreateOrUpdateCustomProviderSheet.tsx     |  2 +-
 .../CustomAuthProvidersList.tsx               | 23 ++++++----
 .../interfaces/Auth/Hooks/HookCard.tsx        | 42 ++++++++++++-------
 .../Auth/OAuthApps/OAuthAppsList.tsx          | 23 ++++++----
 .../Auth/Policies/PolicyEditor/PolicyName.tsx | 22 +++++-----
 .../PolicyEditorPanel/PolicyTemplates.tsx     | 30 +++++++++----
 6 files changed, 88 insertions(+), 54 deletions(-)

diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
index 8916086b46..8496b652ef 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx
@@ -12,7 +12,6 @@ import {
   FormControl,
   FormField,
   FormInputGroupInput,
-  Input,
   Input_Shadcn_,
   InputGroup,
   InputGroupAddon,
@@ -30,6 +29,7 @@ import {
   Switch,
   useWatch,
 } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
index 3b23e23d14..39f86f5b35 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
@@ -15,7 +15,9 @@ import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
   Table,
   TableBody,
   TableCell,
@@ -284,14 +286,17 @@ export const CustomAuthProvidersList = () => {
       <div className="flex flex-col gap-y-4">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
           <div className="flex flex-col lg:flex-row lg:items-center gap-2">
-            <Input
-              placeholder="Search custom providers"
-              size="tiny"
-              icon={<Search />}
-              value={filterString}
-              className="w-full lg:w-52"
-              onChange={(e) => setFilterString(e.target.value)}
-            />
+            <InputGroup className="w-full lg:w-52">
+              <InputGroupInput
+                size="tiny"
+                placeholder="Search custom providers"
+                value={filterString}
+                onChange={(e) => setFilterString(e.target.value)}
+              />
+              <InputGroupAddon>
+                <Search />
+              </InputGroupAddon>
+            </InputGroup>
             <FilterPopover
               name="Provider Type"
               options={CUSTOM_PROVIDER_TYPE_OPTIONS}
diff --git a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
index 77c5d75994..bf910543a2 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
@@ -1,6 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Check, Webhook } from 'lucide-react'
-import { Badge, copyToClipboard, Input } from 'ui'
+import { Badge } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
 
 import { Hook } from './hooks.constants'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -32,31 +33,33 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
                 <span className="text-foreground">Postgres function</span>
               </div>
               <div className="flex flex-row items-center">
-                <span className="text-foreground-light w-20">schema</span>
+                <label htmlFor="schema" className="text-foreground-light w-20">
+                  schema
+                </label>
                 <Input
+                  id="schema"
                   title={hook.method.schema}
                   copy
                   readOnly
                   disabled
-                  className="input-mono [&>div>div>div>input]:text-xs [&>div>div>div>input]:opacity-100 flex-1"
+                  containerClassName="flex-1"
+                  className="font-mono text-xs md:text-xs disabled:text-foreground-light opacity-100"
                   value={hook.method.schema}
-                  onCopy={() =>
-                    hook.method.type === 'postgres' && copyToClipboard(hook.method.schema)
-                  }
                 />
               </div>
               <div className="flex flex-row items-center">
-                <span className="text-foreground-light w-20">function</span>
+                <label htmlFor="functionName" className="text-foreground-light w-20">
+                  function
+                </label>
                 <Input
+                  id="functionName"
                   title={hook.method.functionName}
                   copy
                   readOnly
                   disabled
-                  className="input-mono [&>div>div>div>input]:text-xs [&>div>div>div>input]:opacity-100 flex-1"
+                  containerClassName="flex-1"
+                  className="font-mono text-xs md:text-xs disabled:text-foreground-light opacity-100"
                   value={hook.method.functionName}
-                  onCopy={() =>
-                    hook.method.type === 'postgres' && copyToClipboard(hook.method.functionName)
-                  }
                 />
               </div>
             </div>
@@ -67,26 +70,33 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
                 <span className="text-foreground">HTTPS endpoint</span>
               </div>
               <div className="flex flex-row items-center">
-                <span className="text-foreground-light w-20">endpoint</span>
+                <label htmlFor="url" className="text-foreground-light w-20">
+                  endpoint
+                </label>
                 <Input
+                  id="url"
                   title={hook.method.url}
                   copy
                   readOnly
                   disabled
-                  className="input-mono [&>div>div>div>input]:text-xs [&>div>div>div>input]:opacity-100 flex-1"
+                  containerClassName="flex-1"
+                  className="font-mono text-xs md:text-xs disabled:text-foreground-light opacity-100"
                   value={hook.method.url}
-                  onCopy={() => hook.method.type === 'https' && copyToClipboard(hook.method.url)}
                 />
               </div>
               <div className="flex flex-row items-center">
-                <span className="text-foreground-light w-20">secret</span>
+                <label htmlFor="secret" className="text-foreground-light w-20">
+                  secret
+                </label>
                 <Input
+                  id="secret"
                   copy
                   title={hook.method.secret}
                   reveal={true}
                   readOnly
                   disabled
-                  className="input-mono [&>div>div>div>input]:text-xs [&>div>div>div>input]:opacity-100 flex-1"
+                  containerClassName="flex-1"
+                  className="font-mono text-xs md:text-xs disabled:text-foreground-light opacity-100"
                   value={hook.method.secret}
                 />
               </div>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
index d995647864..149271a6f5 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
@@ -13,7 +13,9 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Input,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
   Table,
   TableBody,
   TableCell,
@@ -231,14 +233,17 @@ export const OAuthAppsList = () => {
         )}
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
           <div className="flex flex-col lg:flex-row lg:items-center gap-2">
-            <Input
-              placeholder="Search OAuth apps"
-              size="tiny"
-              icon={<Search />}
-              value={filterString}
-              className="w-full lg:w-52"
-              onChange={(e) => setFilterString(e.target.value)}
-            />
+            <InputGroup className="w-full lg:w-52">
+              <InputGroupInput
+                size="tiny"
+                placeholder="Search OAuth apps"
+                value={filterString}
+                onChange={(e) => setFilterString(e.target.value)}
+              />
+              <InputGroupAddon>
+                <Search />
+              </InputGroupAddon>
+            </InputGroup>
             <FilterPopover
               name="Registration Type"
               options={OAUTH_APP_REGISTRATION_TYPE_OPTIONS}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
index 1bcf6025f7..d9ffc8fbde 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
@@ -1,4 +1,4 @@
-import { Input } from 'ui'
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from 'ui'
 
 interface PolicyNameProps {
   name: string
@@ -16,16 +16,18 @@ export const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: Polic
         <p className="text-sm text-foreground-lighter">A descriptive name for your policy</p>
       </div>
       <div className="relative md:w-2/3">
-        <Input
-          id="policy-name"
-          value={name}
-          onChange={(e) => onUpdatePolicyName(e.target.value)}
-          actions={
-            <span className="mr-3 text-sm text-foreground-lighter">
+        <InputGroup>
+          <InputGroupInput
+            id="policy-name"
+            value={name}
+            onChange={(e) => onUpdatePolicyName(e.target.value)}
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupText>
               {name.length}/{limit}
-            </span>
-          }
-        />
+            </InputGroupText>
+          </InputGroupAddon>
+        </InputGroup>
       </div>
     </div>
   )
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
index 2194d35771..d1377074e9 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
@@ -1,7 +1,16 @@
 import { PostgresPolicy } from '@supabase/postgres-meta'
 import { Search } from 'lucide-react'
 import { useState } from 'react'
-import { Badge, cn, HoverCard, HoverCardContent, HoverCardTrigger, Input } from 'ui'
+import {
+  Badge,
+  cn,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from 'ui'
 import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock'
 
 import {
@@ -56,14 +65,17 @@ export const PolicyTemplates = ({
       <label className="sr-only" htmlFor="template-search">
         Search templates
       </label>
-      <Input
-        size="small"
-        id="template-search"
-        icon={<Search className="text-foreground-muted" />}
-        placeholder="Search templates"
-        value={search}
-        onChange={(event) => setSearch(event.target.value)}
-      />
+      <InputGroup>
+        <InputGroupInput
+          id="template-search"
+          placeholder="Search templates"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <InputGroupAddon>
+          <Search />
+        </InputGroupAddon>
+      </InputGroup>
 
       {search.length > 0 && filteredTemplates.length === 0 && (
         <NoSearchResults searchString={search} className="min-w-full" />