@uppy/provider-views: fix ProviderView error on empty plugin.icon (#4553

)

The dashboard provides a default/fallback icon for plugins without icon. The ProviderView does not - so a plugin that can be shown just fine on the overview panel, produces an error when it's actually opened. Let's use the same fallback icon.

packages/@uppy/dashboard/src/Dashboard.jsx

@@ -1,11 +1,12 @@
-import { h } from 'preact'
 import { UIPlugin } from '@uppy/core'
 import StatusBar from '@uppy/status-bar'
 import Informer from '@uppy/informer'
 import ThumbnailGenerator from '@uppy/thumbnail-generator'
 import findAllDOMElements from '@uppy/utils/lib/findAllDOMElements'
 import toArray from '@uppy/utils/lib/toArray'
 import getDroppedFiles from '@uppy/utils/lib/getDroppedFiles'
+import { defaultPickerIcon } from '@uppy/provider-views'
+
 import { nanoid } from 'nanoid/non-secure'
 import memoizeOne from 'memoize-one'
 import * as trapFocus from './utils/trapFocus.js'
@@ -29,14 +30,6 @@ function createPromise () {
   return o
 }
 
-function defaultPickerIcon () {
-  return (
-    <svg aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 30 30">
-      <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
-    </svg>
-  )
-}
-
 /**
  * Dashboard UI with previews, metadata editing, tabs for various services and more
  */

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

@@ -41,6 +41,14 @@ function prependPath (path, component) {
   return `${path}/${component}`
 }
 
+export function defaultPickerIcon () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 30 30">
+      <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
+    </svg>
+  )
+}
+
 /**
  * Class to easily generate generic views for Provider plugins
  */
@@ -453,11 +461,13 @@ export default class ProviderView extends View {
     const { files, folders, filterInput, loading, currentSelection } = this.plugin.getPluginState()
     const { isChecked, toggleCheckbox, recordShiftKeyPress, filterItems } = this
     const hasInput = filterInput !== ''
+    const pluginIcon = this.plugin.icon || defaultPickerIcon
+
     const headerProps = {
       showBreadcrumbs: targetViewOptions.showBreadcrumbs,
       getFolder: this.getFolder,
       breadcrumbs: this.plugin.getPluginState().breadcrumbs,
-      pluginIcon: this.plugin.icon,
+      pluginIcon,
       title: this.plugin.title,
       logout: this.logout,
       username: this.username,
@@ -495,7 +505,7 @@ export default class ProviderView extends View {
       viewType: targetViewOptions.viewType,
       showTitles: targetViewOptions.showTitles,
       showBreadcrumbs: targetViewOptions.showBreadcrumbs,
-      pluginIcon: this.plugin.icon,
+      pluginIcon,
       i18n: this.plugin.uppy.i18n,
       uppyFiles: this.plugin.uppy.getFiles(),
       validateRestrictions: (...args) => this.plugin.uppy.validateRestrictions(...args),
@@ -514,7 +524,7 @@ export default class ProviderView extends View {
         <CloseWrapper onUnmount={this.clearSelection}>
           <AuthView
             pluginName={this.plugin.title}
-            pluginIcon={this.plugin.icon}
+            pluginIcon={pluginIcon}
             handleAuth={this.handleAuth}
             i18n={this.plugin.uppy.i18n}
             i18nArray={this.plugin.uppy.i18nArray}

packages/@uppy/provider-views/src/ProviderView/index.js

@@ -1 +1 @@
-export { default } from './ProviderView.jsx'
+export { default, defaultPickerIcon } from './ProviderView.jsx'

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

@@ -1,2 +1,2 @@
-export { default as ProviderViews } from './ProviderView/index.js'
+export { default as ProviderViews, defaultPickerIcon } from './ProviderView/index.js'
 export { default as SearchProviderViews } from './SearchProviderView/index.js'