@uppy/unsplash,@uppy/provider-views: add utmSource option

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

@@ -24,6 +24,7 @@ type BrowserProps<M extends Meta, B extends Body> = {
   openFolder: ProviderView<M, B>['openFolder']
   noResultsLabel: string
   virtualList: boolean
+  utmSource: string
 }
 
 function Browser<M extends Meta, B extends Body>(props: BrowserProps<M, B>) {
@@ -38,6 +39,7 @@ function Browser<M extends Meta, B extends Body>(props: BrowserProps<M, B>) {
     openFolder,
     noResultsLabel,
     virtualList,
+    utmSource,
   } = props
 
   const [isShiftKeyPressed, setIsShiftKeyPressed] = useState(false)
@@ -88,6 +90,7 @@ function Browser<M extends Meta, B extends Body>(props: BrowserProps<M, B>) {
       i18n={i18n}
       openFolder={openFolder}
       file={item}
+      utmSource={utmSource}
     />
   )
 

packages/@uppy/provider-views/src/Item/index.tsx

@@ -18,10 +18,19 @@ type ItemProps = {
   viewType: string
   showTitles: boolean
   i18n: I18n
+  utmSource: string
 }
 
 export default function Item(props: ItemProps): h.JSX.Element {
-  const { viewType, toggleCheckbox, showTitles, i18n, openFolder, file } = props
+  const {
+    viewType,
+    toggleCheckbox,
+    showTitles,
+    i18n,
+    openFolder,
+    file,
+    utmSource,
+  } = props
 
   const restrictionError = file.type === 'folder' ? null : file.restrictionError
   const isDisabled = !!restrictionError && file.status !== 'checked'
@@ -30,6 +39,7 @@ export default function Item(props: ItemProps): h.JSX.Element {
     file,
     openFolder,
     toggleCheckbox,
+    utmSource,
 
     i18n,
     viewType,
@@ -54,7 +64,7 @@ export default function Item(props: ItemProps): h.JSX.Element {
       return (
         <GridItem {...ourProps}>
           <a
-            href={`${file.data.author!.url}?utm_source=Companion&utm_medium=referral`}
+            href={`${file.data.author!.url}?utm_source=${utmSource}&utm_medium=referral`}
             target="_blank"
             rel="noopener noreferrer"
             className="uppy-ProviderBrowserItem-author"

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

@@ -488,6 +488,7 @@ export default class ProviderView<M extends Meta, B extends Body> {
           showTitles={opts.showTitles}
           i18n={this.plugin.uppy.i18n}
           isLoading={loading}
+          utmSource="Companion"
         />
 
         <FooterActions

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

@@ -13,6 +13,7 @@ import type { CompanionFile } from '@uppy/utils/lib/CompanionFile'
 import classNames from 'classnames'
 import type { ValidateableFile } from '@uppy/core/lib/Restricter.js'
 import remoteFileObjToLocal from '@uppy/utils/lib/remoteFileObjToLocal'
+import type { DefinePluginOpts } from '@uppy/core/src/BasePlugin.js'
 import SearchInput from '../SearchInput.jsx'
 import Browser from '../Browser.jsx'
 
@@ -42,30 +43,29 @@ const defaultState: UnknownSearchProviderPluginState = {
   isInputMode: true,
 }
 
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
-
 interface Opts<M extends Meta, B extends Body> {
   provider: UnknownSearchProviderPlugin<M, B>['provider']
-  viewType: 'list' | 'grid' | 'unsplash'
-  showTitles: boolean
-  showFilter: boolean
+  viewType?: 'list' | 'grid' | 'unsplash'
+  showTitles?: boolean
+  showFilter?: boolean
+  utmSource?: string
 }
-type PassedOpts<M extends Meta, B extends Body> = Optional<
-  Opts<M, B>,
-  'viewType' | 'showTitles' | 'showFilter'
->
-type DefaultOpts<M extends Meta, B extends Body> = Omit<Opts<M, B>, 'provider'>
-type RenderOpts<M extends Meta, B extends Body> = Omit<
-  PassedOpts<M, B>,
-  'provider'
->
+
+type RenderOpts<M extends Meta, B extends Body> = Omit<Opts<M, B>, 'provider'>
 
 type Res = {
   items: CompanionFile[]
   nextPageQuery: string | null
   searchedFor: string
 }
 
+const defaultOptions = {
+  viewType: 'grid' as const,
+  showTitles: true,
+  showFilter: true,
+  utmSource: 'Companion',
+}
+
 /**
  * SearchProviderView, used for Unsplash and future image search providers.
  * Extends generic View, shared with regular providers like Google Drive and Instagram.
@@ -77,23 +77,15 @@ export default class SearchProviderView<M extends Meta, B extends Body> {
 
   provider: UnknownSearchProviderPlugin<M, B>['provider']
 
-  opts: Opts<M, B>
+  opts: DefinePluginOpts<Opts<M, B>, keyof typeof defaultOptions>
 
   isHandlingScroll: boolean = false
 
   lastCheckbox: string | null = null
 
-  constructor(
-    plugin: UnknownSearchProviderPlugin<M, B>,
-    opts: PassedOpts<M, B>,
-  ) {
+  constructor(plugin: UnknownSearchProviderPlugin<M, B>, opts: Opts<M, B>) {
     this.plugin = plugin
     this.provider = opts.provider
-    const defaultOptions: DefaultOpts<M, B> = {
-      viewType: 'grid',
-      showTitles: true,
-      showFilter: true,
-    }
     this.opts = { ...defaultOptions, ...opts }
 
     this.setSearchString = this.setSearchString.bind(this)
@@ -286,7 +278,7 @@ export default class SearchProviderView<M extends Meta, B extends Body> {
     const { isInputMode, searchString, loading, partialTree } =
       this.plugin.getPluginState()
     const { i18n } = this.plugin.uppy
-    const opts: Opts<M, B> = { ...this.opts, ...viewOptions }
+    const opts = { ...this.opts, ...viewOptions }
 
     if (isInputMode) {
       return (
@@ -334,6 +326,7 @@ export default class SearchProviderView<M extends Meta, B extends Body> {
           isLoading={loading}
           i18n={i18n}
           virtualList={false}
+          utmSource={this.opts.utmSource}
         />
 
         <FooterActions

packages/@uppy/svelte/tsconfig.json

@@ -5,6 +5,7 @@
     "checkJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "useUnknownInCatchVariables": false,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,

packages/@uppy/unsplash/src/Unsplash.tsx

@@ -19,7 +19,7 @@ import locale from './locale.js'
 // @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 
-export type UnsplashOptions = CompanionPluginOptions
+export type UnsplashOptions = { utmSource: string } & CompanionPluginOptions
 
 export default class Unsplash<M extends Meta, B extends Body>
   extends UIPlugin<UnsplashOptions, M, B, UnknownSearchProviderPluginState>
@@ -91,6 +91,7 @@ export default class Unsplash<M extends Meta, B extends Body>
       provider: this.provider,
       viewType: 'unsplash',
       showFilter: true,
+      utmSource: this.opts.utmSource,
     })
 
     const { target } = this.opts