Set plugin titles from locale (#3023)

* What is happening "*"

* Instead of re-creating i18nInit, we could just make it part of the BasePlugin

* set plugin title and allow changing it from locale

* remove i18nInit method, since we now include it in BasePlugin

* All provider titles should come from locale

* Update en_US.js

* make translator private

//cc @aduh95

* init locale after calling setOptions

* Update en_US.js

* Update packages/@uppy/core/src/BasePlugin.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Update packages/@uppy/core/src/index.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

* Bind `i18n` functions

* Remove duplicate i18nInit — it’s in BasePlugin already

* fix formatting

* fix name

* Update en_US.js

Co-authored-by: Antoine du Hamel <duhamelantoine1995@gmail.com>

examples/custom-provider/client/MyCustomProvider.js

@@ -10,7 +10,6 @@ module.exports = class MyCustomProvider extends UIPlugin {
     this.id = this.opts.id || 'MyCustomProvider'
     Provider.initPlugin(this, opts)
 
-    this.title = 'MyUnsplash'
     this.icon = () => (
       <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
         <path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z" fill="#000000" fillRule="nonzero" />
@@ -24,6 +23,14 @@ module.exports = class MyCustomProvider extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameMyUnsplash: 'MyUnsplash',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('MyUnsplash')
+
     this.files = []
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)

package-lock.json

@@ -89718,7 +89718,7 @@
         "@uppy/google-drive": "*",
         "@uppy/informer": "file:../informer",
         "@uppy/provider-views": "file:../provider-views",
-        "@uppy/status-bar": "*",
+        "@uppy/status-bar": "file:../status-bar",
         "@uppy/thumbnail-generator": "file:../thumbnail-generator",
         "@uppy/utils": "file:../utils",
         "classnames": "^2.2.6",

packages/@uppy/aws-s3/src/index.js

@@ -90,24 +90,11 @@ module.exports = class AwsS3 extends BasePlugin {
 
     this.opts = { ...defaultOptions, ...opts }
 
-    this.i18nInit()
-
     this.client = new RequestClient(uppy, opts)
     this.handleUpload = this.handleUpload.bind(this)
     this.requests = new RateLimitedQueue(this.opts.limit)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   getUploadParameters (file) {
     if (!this.opts.companionUrl) {
       throw new Error('Expected a `companionUrl` option containing a Companion address.')

packages/@uppy/box/src/index.js

@@ -32,6 +32,14 @@ module.exports = class Box extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameBox: 'Box',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameBox')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

packages/@uppy/core/src/BasePlugin.js

@@ -6,6 +6,9 @@
  *
  * See `Plugin` for the extended version with Preact rendering for interfaces.
  */
+
+const Translator = require('@uppy/utils/lib/Translator')
+
 module.exports = class BasePlugin {
   constructor (uppy, opts = {}) {
     this.uppy = uppy
@@ -34,6 +37,14 @@ module.exports = class BasePlugin {
   setOptions (newOpts) {
     this.opts = { ...this.opts, ...newOpts }
     this.setPluginState() // so that UI re-renders with new options
+    this.i18nInit()
+  }
+
+  i18nInit () {
+    const translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
+    this.i18n = translator.translate.bind(translator)
+    this.i18nArray = translator.translateArray.bind(translator)
+    this.setPluginState() // so that UI re-renders and we see the updated locale
   }
 
   /**

packages/@uppy/core/src/index.js

@@ -39,6 +39,8 @@ class Uppy {
 
   #emitter = ee()
 
+  #translator
+
   /**
    * Instantiate Uppy
    *
@@ -258,10 +260,16 @@ class Uppy {
   }
 
   i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.opts.locale])
-    this.locale = this.translator.locale
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
+    this.#translator = new Translator([this.defaultLocale, this.opts.locale])
+    this.locale = this.#translator.locale
+  }
+
+  i18n (...args) {
+    return this.#translator.translate(...args)
+  }
+
+  i18nArray (...args) {
+    return this.#translator.translateArray(...args)
   }
 
   setOptions (newOpts) {

packages/@uppy/dashboard/src/index.js

@@ -165,18 +165,6 @@ module.exports = class Dashboard extends UIPlugin {
     this.removeDragOverClassTimeout = null
   }
 
-  setOptions = (newOpts) => {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit = () => {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   removeTarget = (plugin) => {
     const pluginState = this.getPluginState()
     // filter out the one we want to remove

packages/@uppy/drag-drop/src/index.js

@@ -38,12 +38,12 @@ module.exports = class DragDrop extends UIPlugin {
     // Merge default options with the ones set by user
     this.opts = { ...defaultOpts, ...opts }
 
+    this.i18nInit()
+
     // Check for browser dragDrop support
     this.isDragDropSupported = isDragDropSupported()
     this.removeDragOverClassTimeout = null
 
-    this.i18nInit()
-
     // Bind `this` to class methods
     this.onInputChange = this.onInputChange.bind(this)
     this.handleDragOver = this.handleDragOver.bind(this)
@@ -53,18 +53,6 @@ module.exports = class DragDrop extends UIPlugin {
     this.render = this.render.bind(this)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   addFiles (files) {
     const descriptors = files.map((file) => ({
       source: this.id,

packages/@uppy/dropbox/src/index.js

@@ -29,6 +29,14 @@ module.exports = class Dropbox extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameDropbox: 'Dropbox',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameDropbox')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

packages/@uppy/facebook/src/index.js

@@ -29,6 +29,14 @@ module.exports = class Facebook extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameFacebook: 'Facebook',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameFacebook')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

packages/@uppy/file-input/src/index.js

@@ -38,18 +38,6 @@ module.exports = class FileInput extends UIPlugin {
     this.handleClick = this.handleClick.bind(this)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   addFiles (files) {
     const descriptors = files.map((file) => ({
       source: this.id,

packages/@uppy/google-drive/src/index.js

@@ -30,6 +30,14 @@ module.exports = class GoogleDrive extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameGoogleDrive: 'Google Drive',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameGoogleDrive')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

packages/@uppy/image-editor/src/index.js

@@ -65,18 +65,6 @@ module.exports = class ImageEditor extends UIPlugin {
     this.i18nInit()
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    // this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   canEditFile (file) {
     if (!file.type || file.isRemote) {
       return false

packages/@uppy/instagram/src/index.js

@@ -10,7 +10,6 @@ module.exports = class Instagram extends UIPlugin {
     super(uppy, opts)
     this.id = this.opts.id || 'Instagram'
     Provider.initPlugin(this, opts)
-    this.title = this.opts.title || 'Instagram'
     this.icon = () => (
       <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
         <g fill="none" fillRule="evenodd">
@@ -20,6 +19,14 @@ module.exports = class Instagram extends UIPlugin {
       </svg>
     )
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameInstagram: 'Instagram',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameInstagram')
+
     this.provider = new Provider(uppy, {
       companionUrl: this.opts.companionUrl,
       companionHeaders: this.opts.companionHeaders,

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

@@ -89,6 +89,14 @@ en_US.strings = {
   pause: 'Pause',
   paused: 'Paused',
   pauseUpload: 'Pause upload',
+  pluginNameBox: 'Box',
+  pluginNameCamera: 'Camera',
+  pluginNameDropbox: 'Dropbox',
+  pluginNameFacebook: 'Facebook',
+  pluginNameGoogleDrive: 'Google Drive',
+  pluginNameInstagram: 'Instagram',
+  pluginNameOneDrive: 'OneDrive',
+  pluginNameZoom: 'Zoom',
   poweredBy: 'Powered by %{uppy}',
   processingXFiles: {
     '0': 'Processing %{smart_count} file',

packages/@uppy/onedrive/src/index.js

@@ -31,6 +31,14 @@ module.exports = class OneDrive extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameOneDrive: 'OneDrive',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameOneDrive')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }

packages/@uppy/screen-capture/src/index.js

@@ -65,9 +65,7 @@ module.exports = class ScreenCapture extends UIPlugin {
     this.opts = { ...defaultOptions, ...opts }
 
     // i18n
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
+    this.i18nInit()
 
     // uppy plugin class related
     this.install = this.install.bind(this)

packages/@uppy/status-bar/src/index.js

@@ -73,17 +73,6 @@ module.exports = class StatusBar extends UIPlugin {
     this.install = this.install.bind(this)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   getTotalSpeed (files) {
     let totalSpeed = 0
     files.forEach((file) => {

packages/@uppy/thumbnail-generator/src/index.js

@@ -40,19 +40,6 @@ module.exports = class ThumbnailGenerator extends UIPlugin {
     if (this.opts.lazy && this.opts.waitForThumbnailsBeforeUpload) {
       throw new Error('ThumbnailGenerator: The `lazy` and `waitForThumbnailsBeforeUpload` options are mutually exclusive. Please ensure at most one of them is set to `true`.')
     }
-
-    this.i18nInit()
-  }
-
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
   }
 
   /**

packages/@uppy/transloadit/src/index.js

@@ -82,18 +82,6 @@ module.exports = class Transloadit extends BasePlugin {
     this.completedFiles = Object.create(null)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   #getClientVersion () {
     const list = [
       `uppy-core:${this.uppy.constructor.VERSION}`,

packages/@uppy/url/src/index.js

@@ -65,18 +65,6 @@ module.exports = class Url extends UIPlugin {
     })
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   getFileNameFromUrl (url) {
     return url.substring(url.lastIndexOf('/') + 1)
   }

packages/@uppy/webcam/src/index.js

@@ -61,7 +61,6 @@ module.exports = class Webcam extends UIPlugin {
     // eslint-disable-next-line no-restricted-globals
     this.protocol = location.protocol.match(/https/i) ? 'https' : 'http'
     this.id = this.opts.id || 'Webcam'
-    this.title = this.opts.title || 'Camera'
     this.type = 'acquirer'
     this.capturedMediaFile = null
     this.icon = () => (
@@ -75,6 +74,7 @@ module.exports = class Webcam extends UIPlugin {
 
     this.defaultLocale = {
       strings: {
+        pluginNameCamera: 'Camera',
         smile: 'Smile!',
         takePicture: 'Take a picture',
         startRecording: 'Begin video recording',
@@ -109,12 +109,11 @@ module.exports = class Webcam extends UIPlugin {
     }
 
     this.opts = { ...defaultOptions, ...opts }
-
     this.i18nInit()
+    this.title = this.i18n('pluginNameCamera')
 
     this.install = this.install.bind(this)
     this.setPluginState = this.setPluginState.bind(this)
-
     this.render = this.render.bind(this)
 
     // Camera controls
@@ -154,15 +153,6 @@ module.exports = class Webcam extends UIPlugin {
         ...newOpts?.videoConstraints,
       },
     })
-
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.i18nArray = this.translator.translateArray.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
   }
 
   hasCameraCheck () {

packages/@uppy/xhr-upload/src/index.js

@@ -119,8 +119,6 @@ module.exports = class XHRUpload extends BasePlugin {
 
     this.opts = { ...defaultOptions, ...opts }
 
-    this.i18nInit()
-
     this.handleUpload = this.handleUpload.bind(this)
 
     // Simultaneous upload limiting is shared across all uploads with this plugin.
@@ -137,17 +135,6 @@ module.exports = class XHRUpload extends BasePlugin {
     this.uploaderEvents = Object.create(null)
   }
 
-  setOptions (newOpts) {
-    super.setOptions(newOpts)
-    this.i18nInit()
-  }
-
-  i18nInit () {
-    this.translator = new Translator([this.defaultLocale, this.uppy.locale, this.opts.locale])
-    this.i18n = this.translator.translate.bind(this.translator)
-    this.setPluginState() // so that UI re-renders and we see the updated locale
-  }
-
   getOptions (file) {
     const overrides = this.uppy.getState().xhrUpload
     const { headers } = this.opts

packages/@uppy/zoom/src/index.js

@@ -30,6 +30,14 @@ module.exports = class Zoom extends UIPlugin {
       pluginId: this.id,
     })
 
+    this.defaultLocale = {
+      strings: {
+        pluginNameZoom: 'Zoom',
+      },
+    }
+    this.i18nInit()
+    this.title = this.i18n('pluginNameZoom')
+
     this.onFirstRender = this.onFirstRender.bind(this)
     this.render = this.render.bind(this)
   }