@uppy/dashboard: add dashboard:show-panel event (#4108)

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

@@ -183,6 +183,8 @@ export default class Dashboard extends UIPlugin {
       activePickerPanel,
       activeOverlayType: 'PickerPanel',
     })
+
+    this.uppy.emit('dashboard:show-panel', id)
   }
 
   canEditFile = (file) => {

packages/@uppy/dashboard/types/index.d.ts

@@ -88,11 +88,13 @@ export default Dashboard
 
 export type DashboardFileEditStartCallback<TMeta extends IndexedObject<any>> = (file?: UppyFile<TMeta>) => void;
 export type DashboardFileEditCompleteCallback<TMeta extends IndexedObject<any>> = (file?: UppyFile<TMeta>) => void;
+export type DashboardShowPlanelCallback = (id: string) => void;
 declare module '@uppy/core' {
   export interface UppyEventMap<TMeta> {
     'dashboard:modal-open': GenericEventCallback
     'dashboard:modal-closed': GenericEventCallback
-    'dashboard:file-edit-state': DashboardFileEditStartCallback<TMeta>
+    'dashboard:show-panel': DashboardShowPlanelCallback
+    'dashboard:file-edit-start': DashboardFileEditStartCallback<TMeta>
     'dashboard:file-edit-complete': DashboardFileEditCompleteCallback<TMeta>
   }
 }

packages/@uppy/dashboard/types/index.test-d.ts

@@ -52,10 +52,14 @@ import Dashboard from '..'
     onDragLeave: (event) => event.clientX,
   })
 
-  uppy.on('dashboard:file-edit-state', (file) => {
+  uppy.on('dashboard:file-edit-start', (file) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const fileName = file?.name
   })
+  uppy.on('dashboard:show-panel', (id) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const pluginId = id
+  })
 }
 
 {

website/src/_posts/2021-08-2.0.md

@@ -212,7 +212,7 @@ Plugins that add their own events can merge with existing ones in `@uppy/core` w
 
 <!-- eslint-disable @typescript-eslint/no-unused-vars -->
 ```ts
-uppy.on('dashboard:file-edit-state', (file) => {
+uppy.on('dashboard:file-edit-start', (file) => {
   const fileName = file.name
 })
 ```

website/src/docs/dashboard.md

@@ -508,6 +508,14 @@ uppy.on('dashboard:modal-open', () => {
 
 Fired when the Dashboard modal is closed.
 
+### `dashboard:show-panel`
+
+**Parameters:**
+
+* `id` — The unique identifier of the plugin that is being shown
+
+Fired when a user clicks on a source plugin, such as Webcam or Google Drive, in the Dashboard.
+
 ### `dashboard:file-edit-start`
 
 **Parameters:**

website/src/docs/migration-guides.md

@@ -457,7 +457,7 @@ Plugins that add their own events can merge with existing ones in `@uppy/core` w
 <!-- eslint-disable @typescript-eslint/no-unused-vars -->
 
 ```ts
-uppy.on('dashboard:file-edit-state', (file) => {
+uppy.on('dashboard:file-edit-start', (file) => {
   const fileName = file.name
 })
 ```