refactor(web): prevent credential autofill in usage log filters (#6966)

web/src/features/usage-logs/components/common-logs-filter-bar.tsx

@@ -251,7 +251,9 @@ export function CommonLogsFilterBar<TData>(
     filters.requestId,
     filters.requestId,
     filters.upstreamRequestId,
     filters.upstreamRequestId,
   ].filter(Boolean).length
   ].filter(Boolean).length
-  const sensitiveType = sensitiveVisible ? 'text' : 'password'
+  const sensitiveInputClass = sensitiveVisible
+    ? undefined
+    : '[-webkit-text-security:disc]'
   const logTypeItems = useMemo(
   const logTypeItems = useMemo(
     () =>
     () =>
       LOG_TYPE_FILTERS.map((type) => ({
       LOG_TYPE_FILTERS.map((type) => ({
@@ -315,7 +317,7 @@ export function CommonLogsFilterBar<TData>(
     <LogsFilterField>
     <LogsFilterField>
       <LogsFilterInput
       <LogsFilterInput
         placeholder={t('Group')}
         placeholder={t('Group')}
-        type={sensitiveType}
+        className={sensitiveInputClass}
         value={filters.group || ''}
         value={filters.group || ''}
         onChange={(e) => handleChange('group', e.target.value)}
         onChange={(e) => handleChange('group', e.target.value)}
         onKeyDown={handleKeyDown}
         onKeyDown={handleKeyDown}
@@ -363,7 +365,7 @@ export function CommonLogsFilterBar<TData>(
       <LogsFilterField>
       <LogsFilterField>
         <LogsFilterInput
         <LogsFilterInput
           placeholder={t('Token Name')}
           placeholder={t('Token Name')}
-          type={sensitiveType}
+          className={sensitiveInputClass}
           value={filters.token || ''}
           value={filters.token || ''}
           onChange={(e) => handleChange('token', e.target.value)}
           onChange={(e) => handleChange('token', e.target.value)}
           onKeyDown={handleKeyDown}
           onKeyDown={handleKeyDown}
@@ -373,7 +375,7 @@ export function CommonLogsFilterBar<TData>(
         <LogsFilterField>
         <LogsFilterField>
           <LogsFilterInput
           <LogsFilterInput
             placeholder={t('Username')}
             placeholder={t('Username')}
-            type={sensitiveType}
+            className={sensitiveInputClass}
             value={filters.username || ''}
             value={filters.username || ''}
             onChange={(e) => handleChange('username', e.target.value)}
             onChange={(e) => handleChange('username', e.target.value)}
             onKeyDown={handleKeyDown}
             onKeyDown={handleKeyDown}

web/src/features/usage-logs/components/logs-filter-toolbar.tsx

@@ -79,6 +79,7 @@ export function LogsFilterInput(props: ComponentProps<typeof Input>) {
   return (
   return (
     <Input
     <Input
       {...props}
       {...props}
+      autoComplete='off'
       className={cn('h-8 min-w-0 text-sm leading-5', props.className)}
       className={cn('h-8 min-w-0 text-sm leading-5', props.className)}
     />
     />
   )
   )