Improve UI

packages/@uppy/locales/src/en_US.ts

@@ -35,6 +35,7 @@ en_US.strings = {
   aspectRatioPortrait: 'Crop portrait (9:16)',
   aspectRatioSquare: 'Crop square',
   authAborted: 'Authentication aborted',
+  authenticate: 'Connect',
   authenticateWith: 'Connect to %{pluginName}',
   authenticateWithTitle:
     'Please authenticate with %{pluginName} to select files',
@@ -149,14 +150,12 @@ en_US.strings = {
   pluginNameUrl: 'Link',
   pluginNameWebdav: 'WebDAV',
   pluginNameZoom: 'Zoom',
+  pluginWebdavInputLabel: 'WebDAV, ownCloud, or Nextcloud URL',
   poweredBy: 'Powered by %{uppy}',
   processingXFiles: {
     '0': 'Processing %{smart_count} file',
     '1': 'Processing %{smart_count} files',
   },
-  publicLinkURLDescription:
-    'WebDAV url or an ownCloud or Nextcloud public link',
-  publicLinkURLLabel: 'URL',
   recording: 'Recording',
   recordingLength: 'Recording length %{recording_length}',
   recordingStoppedMaxSize:

packages/@uppy/provider-views/src/GooglePicker/GooglePickerView.tsx

@@ -202,7 +202,7 @@ export default function GooglePickerView({
         }
         pluginIcon={pickerType === 'drive' ? GoogleDriveIcon : GooglePhotosIcon}
         handleAuth={showPicker}
-        i18n={uppy.i18nArray}
+        i18n={uppy.i18n}
         loading={loading}
       />
     )

packages/@uppy/provider-views/src/ProviderView/AuthView.tsx

@@ -1,15 +1,15 @@
 import { h } from 'preact'
 import { useCallback } from 'preact/hooks'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
-import type Translator from '@uppy/utils/lib/Translator'
+import type { I18n } from '@uppy/utils/lib/Translator'
 import type { Opts } from './ProviderView.ts'
 import type ProviderViews from './ProviderView.ts'
 
 type AuthViewProps<M extends Meta, B extends Body> = {
   loading: boolean | string
   pluginName: string
   pluginIcon: () => h.JSX.Element
-  i18n: Translator['translateArray']
+  i18n: I18n
   handleAuth: ProviderViews<M, B>['handleAuth']
   renderForm?: Opts<M, B>['renderAuthForm']
 }
@@ -56,7 +56,7 @@ function DefaultForm<M extends Meta, B extends Body>({
   onAuth,
 }: {
   pluginName: string
-  i18n: Translator['translateArray']
+  i18n: I18n
   onAuth: AuthViewProps<M, B>['handleAuth']
 }) {
   // In order to comply with Google's brand we need to create a different button
@@ -100,7 +100,7 @@ const defaultRenderForm = ({
   onAuth,
 }: {
   pluginName: string
-  i18n: Translator['translateArray']
+  i18n: I18n
   onAuth: AuthViewProps<Meta, Body>['handleAuth']
 }) => <DefaultForm pluginName={pluginName} i18n={i18n} onAuth={onAuth} />
 
@@ -121,9 +121,7 @@ export default function AuthView<M extends Meta, B extends Body>({
         })}
       </div>
 
-      <div className="uppy-Provider-authForm">
-        {renderForm({ pluginName, i18n, loading, onAuth: handleAuth })}
-      </div>
+      {renderForm({ pluginName, i18n, loading, onAuth: handleAuth })}
     </div>
   )
 }

packages/@uppy/provider-views/src/ProviderView/ProviderView.tsx

@@ -10,10 +10,10 @@ import type {
 } from '@uppy/core/lib/Uppy.js'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type { CompanionFile } from '@uppy/utils/lib/CompanionFile'
-import type Translator from '@uppy/utils/lib/Translator'
 import classNames from 'classnames'
 import type { ValidateableFile } from '@uppy/core/lib/Restricter.js'
 import remoteFileObjToLocal from '@uppy/utils/lib/remoteFileObjToLocal'
+import type { I18n } from '@uppy/utils/lib/Translator'
 import AuthView from './AuthView.tsx'
 import Header from './Header.tsx'
 import Browser from '../Browser.tsx'
@@ -75,7 +75,7 @@ export interface Opts<M extends Meta, B extends Body> {
   loadAllFiles: boolean
   renderAuthForm?: (args: {
     pluginName: string
-    i18n: Translator['translateArray']
+    i18n: I18n
     loading: boolean | string
     onAuth: (authFormData: unknown) => Promise<void>
   }) => h.JSX.Element
@@ -434,7 +434,7 @@ export default class ProviderView<M extends Meta, B extends Body> {
           pluginName={this.plugin.title}
           pluginIcon={pluginIcon}
           handleAuth={this.handleAuth}
-          i18n={this.plugin.uppy.i18nArray}
+          i18n={this.plugin.uppy.i18n}
           renderForm={opts.renderAuthForm}
           loading={loading}
         />

packages/@uppy/provider-views/src/index.ts

@@ -5,4 +5,6 @@ export {
 
 export { default as SearchProviderViews } from './SearchProviderView/index.ts'
 
+export { default as SearchInput } from './SearchInput.tsx'
+
 export { default as GooglePickerView } from './GooglePicker/GooglePickerView.tsx'

packages/@uppy/webdav/src/Webdav.tsx

@@ -13,14 +13,20 @@ import {
   tokenStorage,
   type CompanionPluginOptions,
 } from '@uppy/companion-client'
-import { defaultPickerIcon, ProviderViews } from '@uppy/provider-views'
+import {
+  SearchInput,
+  defaultPickerIcon,
+  ProviderViews,
+} from '@uppy/provider-views'
 
 import type {
   AsyncStore,
   UnknownProviderPluginState,
   Uppy,
 } from '@uppy/core/lib/Uppy.js'
-import type Translator from '@uppy/utils/lib/Translator'
+import type { I18n } from '@uppy/utils/lib/Translator'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 import locale from './locale.ts'
 
@@ -50,49 +56,30 @@ class WebdavSimpleAuthProvider<M extends Meta, B extends Body> extends Provider<
 }
 
 const AuthForm = ({
-  loading,
   i18n,
   onAuth,
 }: {
-  loading: boolean | string
-  i18n: Translator['translateArray']
+  i18n: I18n
   onAuth: (arg: { webdavUrl: string }) => void
 }) => {
   const [webdavUrl, setWebdavUrl] = useState('')
 
-  const onSubmit = useCallback(
-    (e: Event) => {
-      e.preventDefault()
-      onAuth({ webdavUrl: webdavUrl.trim() })
-    },
-    [onAuth, webdavUrl],
-  )
+  const onSubmit = useCallback(() => {
+    onAuth({ webdavUrl: webdavUrl.trim() })
+  }, [onAuth, webdavUrl])
 
   return (
-    <form onSubmit={onSubmit}>
-      <label htmlFor="uppy-Provider-publicLinkURL">
-        <span style={{ display: 'block' }}>{i18n('publicLinkURLLabel')}</span>
-        <input
-          id="uppy-Provider-publicLinkURL"
-          name="webdavUrl"
-          type="text"
-          value={webdavUrl}
-          onChange={(e) => setWebdavUrl((e.target as HTMLInputElement).value)}
-          disabled={Boolean(loading)}
-        />
-      </label>
-      <span style={{ display: 'block' }}>
-        {i18n('publicLinkURLDescription')}
-      </span>
-
-      <button
-        style={{ display: 'block' }}
-        disabled={Boolean(loading)}
-        type="submit"
-      >
-        Submit
-      </button>
-    </form>
+    <SearchInput
+      searchString={webdavUrl}
+      setSearchString={setWebdavUrl}
+      submitSearchString={onSubmit}
+      inputLabel={i18n('pluginWebdavInputLabel')}
+      buttonLabel={i18n('authenticate')}
+      wrapperClassName="uppy-SearchProvider"
+      inputClassName="uppy-c-textInput uppy-SearchProvider-input"
+      showButton
+      buttonCSSClassName="uppy-SearchProvider-searchButton"
+    />
   )
 }
 
@@ -150,8 +137,8 @@ export default class Webdav<M extends Meta, B extends Body>
       showTitles: true,
       showFilter: true,
       showBreadcrumbs: true,
-      renderAuthForm: ({ i18n, loading, onAuth }) => (
-        <AuthForm loading={loading} onAuth={onAuth} i18n={i18n} />
+      renderAuthForm: ({ i18n, onAuth }) => (
+        <AuthForm onAuth={onAuth} i18n={i18n} />
       ),
     })
 

packages/@uppy/webdav/src/locale.ts

@@ -1,8 +1,7 @@
 export default {
   strings: {
     pluginNameWebdav: 'WebDAV',
-    publicLinkURLLabel: 'URL',
-    publicLinkURLDescription:
-      'WebDAV url or an ownCloud or Nextcloud public link',
+    authenticate: 'Connect',
+    pluginWebdavInputLabel: 'WebDAV, ownCloud, or Nextcloud URL',
   },
 }