@uppy/dashboard: refactor to TypeScript

[aduh95]

Requires @uppy/url and @uppy/webcam to be typed, those PRs have not landed at the time of writing.

Still a lot of TS errors to take care of (506).

[github-actions]

Diff output files

diff --git a/packages/@uppy/dashboard/lib/Dashboard.js b/packages/@uppy/dashboard/lib/Dashboard.js
index 706584f..d32a8cf 100644
--- a/packages/@uppy/dashboard/lib/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/Dashboard.js
@@ -36,6 +36,46 @@ function createPromise() {
   });
   return o;
 }
+const defaultOptions = {
+  target: "body",
+  metaFields: [],
+  inline: false,
+  width: 750,
+  height: 550,
+  thumbnailWidth: 280,
+  thumbnailType: "image/jpeg",
+  waitForThumbnailsBeforeUpload: false,
+  defaultPickerIcon,
+  showLinkToFileUploadResult: false,
+  showProgressDetails: false,
+  hideUploadButton: false,
+  hideCancelButton: false,
+  hideRetryButton: false,
+  hidePauseResumeButton: false,
+  hideProgressAfterFinish: false,
+  note: null,
+  closeModalOnClickOutside: false,
+  closeAfterFinish: false,
+  singleFileFullScreen: true,
+  disableStatusBar: false,
+  disableInformer: false,
+  disableThumbnailGenerator: false,
+  disablePageScrollWhenModalOpen: true,
+  animateOpenClose: true,
+  fileManagerSelectionType: "files",
+  proudlyDisplayPoweredByUppy: true,
+  showSelectedFiles: true,
+  showRemoveButtonAfterComplete: false,
+  browserBackButtonClose: false,
+  showNativePhotoCameraButton: false,
+  showNativeVideoCameraButton: false,
+  theme: "light",
+  autoOpenFileEditor: false,
+  disabled: false,
+  disableLocalFiles: false,
+  doneButtonHandler: null,
+  onRequestCloseModal: null,
+};
 var _disabledNodes = _classPrivateFieldLooseKey("disabledNodes");
 var _generateLargeThumbnailIfSingleFile = _classPrivateFieldLooseKey("generateLargeThumbnailIfSingleFile");
 var _openFileEditorWhenFilesAdded = _classPrivateFieldLooseKey("openFileEditorWhenFilesAdded");
@@ -49,13 +89,18 @@ var _autoDiscoverPlugins = _classPrivateFieldLooseKey("autoDiscoverPlugins");
 var _addSupportedPluginIfNoTarget = _classPrivateFieldLooseKey("addSupportedPluginIfNoTarget");
 export default class Dashboard extends UIPlugin {
   constructor(uppy, _opts) {
-    var _this;
-    super(uppy, _opts);
-    _this = this;
+    var _this$opts4, _this$opts4$doneButto, _this$opts5, _this$opts5$onRequest;
+    super(uppy, {
+      ...defaultOptions,
+      ..._opts,
+    });
     Object.defineProperty(this, _disabledNodes, {
       writable: true,
-      value: null,
+      value: void 0,
     });
+    this.modalName = `uppy-Dashboard-${nanoid()}`;
+    this.superFocus = createSuperFocus();
+    this.ifFocusedOnUppyRecently = false;
     this.removeTarget = plugin => {
       const pluginState = this.getPluginState();
       const newTargets = pluginState.targets.filter(target => target.id !== plugin.id);
@@ -72,7 +117,7 @@ export default class Dashboard extends UIPlugin {
       ) {
         const msg = "Dashboard: can only be targeted by plugins of types: acquirer, progressindicator, editor";
         this.uppy.log(msg, "error");
-        return undefined;
+        return null;
       }
       const target = {
         id: callerPluginId,
@@ -88,9 +133,10 @@ export default class Dashboard extends UIPlugin {
       return this.el;
     };
     this.hideAllPanels = () => {
+      var _state$activePickerPa;
       const state = this.getPluginState();
       const update = {
-        activePickerPanel: false,
+        activePickerPanel: undefined,
         showAddFilesPanel: false,
         activeOverlayType: null,
         fileCardFor: null,
@@ -103,15 +149,18 @@ export default class Dashboard extends UIPlugin {
         return;
       }
       this.setPluginState(update);
-      this.uppy.emit("dashboard:close-panel", state.activePickerPanel.id);
+      this.uppy.emit(
+        "dashboard:close-panel",
+        (_state$activePickerPa = state.activePickerPanel) == null ? void 0 : _state$activePickerPa.id,
+      );
     };
     this.showPanel = id => {
       const {
         targets,
       } = this.getPluginState();
-      const activePickerPanel = targets.filter(target => {
+      const activePickerPanel = targets.find(target => {
         return target.type === "acquirer" && target.id === id;
-      })[0];
+      });
       this.setPluginState({
         activePickerPanel,
         activeOverlayType: "PickerPanel",
@@ -199,17 +248,15 @@ export default class Dashboard extends UIPlugin {
       this.uppy.emit("dashboard:modal-open");
       return promise;
     };
-    this.closeModal = function(opts) {
-      if (opts === void 0) {
-        opts = {};
-      }
-      const {
-        manualClose = true,
-      } = opts;
+    this.closeModal = opts => {
+      var _opts$manualClose;
+      const manualClose = (_opts$manualClose = opts == null ? void 0 : opts.manualClose) != null
+        ? _opts$manualClose
+        : true;
       const {
         isHidden,
         isClosing,
-      } = _this.getPluginState();
+      } = this.getPluginState();
       if (isHidden || isClosing) {
         return undefined;
       }
@@ -217,42 +264,42 @@ export default class Dashboard extends UIPlugin {
         promise,
         resolve,
       } = createPromise();
-      if (_this.opts.disablePageScrollWhenModalOpen) {
+      if (this.opts.disablePageScrollWhenModalOpen) {
         document.body.classList.remove("uppy-Dashboard-isFixed");
       }
-      if (_this.opts.animateOpenClose) {
-        _this.setPluginState({
+      if (this.opts.animateOpenClose) {
+        this.setPluginState({
           isClosing: true,
         });
         const handler = () => {
-          _this.setPluginState({
+          this.setPluginState({
             isHidden: true,
             isClosing: false,
           });
-          _this.superFocus.cancel();
-          _this.savedActiveElement.focus();
-          _this.el.removeEventListener("animationend", handler, false);
+          this.superFocus.cancel();
+          this.savedActiveElement.focus();
+          this.el.removeEventListener("animationend", handler, false);
           resolve();
         };
-        _this.el.addEventListener("animationend", handler, false);
+        this.el.addEventListener("animationend", handler, false);
       } else {
-        _this.setPluginState({
+        this.setPluginState({
           isHidden: true,
         });
-        _this.superFocus.cancel();
-        _this.savedActiveElement.focus();
+        this.superFocus.cancel();
+        this.savedActiveElement.focus();
         resolve();
       }
-      document.removeEventListener("keydown", _this.handleKeyDownInModal);
+      document.removeEventListener("keydown", this.handleKeyDownInModal);
       if (manualClose) {
-        if (_this.opts.browserBackButtonClose) {
+        if (this.opts.browserBackButtonClose) {
           var _history$state;
-          if ((_history$state = history.state) != null && _history$state[_this.modalName]) {
+          if ((_history$state = history.state) != null && _history$state[this.modalName]) {
             history.back();
           }
         }
       }
-      _this.uppy.emit("dashboard:modal-closed");
+      this.uppy.emit("dashboard:modal-closed");
       return promise;
     };
     this.isModalOpen = () => {
@@ -403,7 +450,7 @@ export default class Dashboard extends UIPlugin {
       }
     };
     this.handleKeyDownInModal = event => {
-      if (event.keyCode === ESC_KEY) this.requestCloseModal(event);
+      if (event.keyCode === ESC_KEY) this.requestCloseModal();
       if (event.keyCode === TAB_KEY) trapFocus.forModal(event, this.getPluginState().activeOverlayType, this.el);
     };
     this.handleClickOutside = () => {
@@ -448,8 +495,8 @@ export default class Dashboard extends UIPlugin {
         } = event.dataTransfer;
         return types.some(type => type === "Files");
       };
-      const somePluginCanHandleRootDrop = canSomePluginHandleRootDrop(event);
-      const hasFiles = doesEventHaveFiles(event);
+      const somePluginCanHandleRootDrop = canSomePluginHandleRootDrop();
+      const hasFiles = doesEventHaveFiles();
       if (
         !somePluginCanHandleRootDrop && !hasFiles || this.opts.disabled
         || this.opts.disableLocalFiles && (hasFiles || !somePluginCanHandleRootDrop)
@@ -534,7 +581,7 @@ export default class Dashboard extends UIPlugin {
       let {
         failed,
       } = _ref;
-      if (this.opts.closeAfterFinish && failed.length === 0) {
+      if (this.opts.closeAfterFinish && !(failed != null && failed.length)) {
         this.requestCloseModal();
       }
     };
@@ -558,7 +605,7 @@ export default class Dashboard extends UIPlugin {
             ...files[0],
             preview: undefined,
           };
-          thumbnailGenerator.requestThumbnail(fileForThumbnail).then(() => {
+          thumbnailGenerator == null || thumbnailGenerator.requestThumbnail(fileForThumbnail).then(() => {
             thumbnailGenerator == null || thumbnailGenerator.setOptions({
               thumbnailWidth: this.opts.thumbnailWidth,
             });
@@ -904,7 +951,7 @@ export default class Dashboard extends UIPlugin {
         fileCardFor: null,
         activeOverlayType: null,
         showAddFilesPanel: false,
-        activePickerPanel: false,
+        activePickerPanel: undefined,
         showFileEditor: false,
         metaFields: this.opts.metaFields,
         targets: [],
@@ -973,7 +1020,9 @@ export default class Dashboard extends UIPlugin {
       this.uppy.log(`[Dashboard] Dark mode is ${isDarkModeOnFromTheStart ? "on" : "off"}`);
       this.setDarkModeCapability(isDarkModeOnFromTheStart);
       if (this.opts.theme === "auto") {
-        this.darkModeMediaQuery.addListener(this.handleSystemDarkModeChange);
+        var _this$darkModeMediaQu;
+        (_this$darkModeMediaQu = this.darkModeMediaQuery) == null
+          || _this$darkModeMediaQu.addListener(this.handleSystemDarkModeChange);
       }
       _classPrivateFieldLooseBase(this, _addSpecifiedPluginsFromOptions)[_addSpecifiedPluginsFromOptions]();
       _classPrivateFieldLooseBase(this, _autoDiscoverPlugins)[_autoDiscoverPlugins]();
@@ -998,7 +1047,9 @@ export default class Dashboard extends UIPlugin {
         if (plugin) plugin.unmount();
       });
       if (this.opts.theme === "auto") {
-        this.darkModeMediaQuery.removeListener(this.handleSystemDarkModeChange);
+        var _this$darkModeMediaQu2;
+        (_this$darkModeMediaQu2 = this.darkModeMediaQuery) == null
+          || _this$darkModeMediaQu2.removeListener(this.handleSystemDarkModeChange);
       }
       if (this.opts.disablePageScrollWhenModalOpen) {
         document.body.classList.remove("uppy-Dashboard-isFixed");
@@ -1009,61 +1060,17 @@ export default class Dashboard extends UIPlugin {
     this.id = this.opts.id || "Dashboard";
     this.title = "Dashboard";
     this.type = "orchestrator";
-    this.modalName = `uppy-Dashboard-${nanoid()}`;
     this.defaultLocale = locale;
-    const defaultOptions = {
-      target: "body",
-      metaFields: [],
-      trigger: null,
-      inline: false,
-      width: 750,
-      height: 550,
-      thumbnailWidth: 280,
-      thumbnailType: "image/jpeg",
-      waitForThumbnailsBeforeUpload: false,
-      defaultPickerIcon,
-      showLinkToFileUploadResult: false,
-      showProgressDetails: false,
-      hideUploadButton: false,
-      hideCancelButton: false,
-      hideRetryButton: false,
-      hidePauseResumeButton: false,
-      hideProgressAfterFinish: false,
-      doneButtonHandler: () => {
+    (_this$opts4$doneButto = (_this$opts4 = this.opts).doneButtonHandler) != null
+      ? _this$opts4$doneButto
+      : _this$opts4.doneButtonHandler = () => {
         this.uppy.clearUploadedFiles();
         this.requestCloseModal();
-      },
-      note: null,
-      closeModalOnClickOutside: false,
-      closeAfterFinish: false,
-      singleFileFullScreen: true,
-      disableStatusBar: false,
-      disableInformer: false,
-      disableThumbnailGenerator: false,
-      disablePageScrollWhenModalOpen: true,
-      animateOpenClose: true,
-      fileManagerSelectionType: "files",
-      proudlyDisplayPoweredByUppy: true,
-      onRequestCloseModal: () => this.closeModal(),
-      showSelectedFiles: true,
-      showRemoveButtonAfterComplete: false,
-      browserBackButtonClose: false,
-      showNativePhotoCameraButton: false,
-      showNativeVideoCameraButton: false,
-      theme: "light",
-      autoOpenFileEditor: false,
-      disabled: false,
-      disableLocalFiles: false,
-    };
-    this.opts = {
-      ...defaultOptions,
-      ..._opts,
-    };
+      };
+    (_this$opts5$onRequest = (_this$opts5 = this.opts).onRequestCloseModal) != null
+      ? _this$opts5$onRequest
+      : _this$opts5.onRequestCloseModal = () => this.closeModal();
     this.i18nInit();
-    this.superFocus = createSuperFocus();
-    this.ifFocusedOnUppyRecently = false;
-    this.makeDashboardInsidesVisibleAnywayTimeout = null;
-    this.removeDragOverClassTimeout = null;
   }
 }
 Dashboard.VERSION = packageJson.version;
diff --git a/packages/@uppy/dashboard/lib/components/AddFiles.js b/packages/@uppy/dashboard/lib/components/AddFiles.js
index 51ad6b0..48fbe1b 100644
--- a/packages/@uppy/dashboard/lib/components/AddFiles.js
+++ b/packages/@uppy/dashboard/lib/components/AddFiles.js
@@ -224,6 +224,7 @@ class AddFiles extends Component {
       );
     };
     this.renderAcquirer = acquirer => {
+      var _this$props$activePic;
       return h(
         "div",
         {
@@ -240,7 +241,9 @@ class AddFiles extends Component {
             tabIndex: 0,
             "data-cy": acquirer.id,
             "aria-controls": `uppy-DashboardContent-panel--${acquirer.id}`,
-            "aria-selected": this.props.activePickerPanel.id === acquirer.id,
+            "aria-selected":
+              ((_this$props$activePic = this.props.activePickerPanel) == null ? void 0 : _this$props$activePic.id)
+                === acquirer.id,
             "data-uppy-super-focusable": true,
             onClick: () => this.props.showPanel(acquirer.id),
           },
@@ -370,7 +373,7 @@ class AddFiles extends Component {
       uppy: uppyBranding,
     });
     return h("a", {
-      tabIndex: "-1",
+      tabIndex: -1,
       href: "https://uppy.io",
       rel: "noreferrer noopener",
       target: "_blank",
diff --git a/packages/@uppy/dashboard/lib/components/Dashboard.js b/packages/@uppy/dashboard/lib/components/Dashboard.js
index 8132c43..b1edc75 100644
--- a/packages/@uppy/dashboard/lib/components/Dashboard.js
+++ b/packages/@uppy/dashboard/lib/components/Dashboard.js
@@ -90,7 +90,7 @@ export default function Dashboard(props) {
       {
         className: "uppy-Dashboard-inner",
         "aria-modal": !props.inline && "true",
-        role: !props.inline && "dialog",
+        role: props.inline ? undefined : "dialog",
         style: {
           width: props.inline && props.width ? props.width : "",
           height: props.inline && props.height ? props.height : "",
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js b/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js
index 66d9e0c..bd1d585 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/Buttons/index.js
@@ -185,7 +185,7 @@ export default function Buttons(props) {
         i18n: i18n,
         file: file,
         uppy: uppy,
-        onClick: () => props.uppy.removeFile(file.id, "removed-by-user"),
+        onClick: () => uppy.removeFile(file.id, "removed-by-user"),
       })
       : null,
   );
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/FilePreviewAndLink/index.js b/packages/@uppy/dashboard/lib/components/FileItem/FilePreviewAndLink/index.js
index ee882f7..0924085 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/FilePreviewAndLink/index.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/FilePreviewAndLink/index.js
@@ -11,7 +11,7 @@ export default function FilePreviewAndLink(props) {
     showLinkToFileUploadResult,
   } = props;
   const white = "rgba(255, 255, 255, 0.5)";
-  const previewBackgroundColor = file.preview ? white : getFileTypeIcon(props.file.type).color;
+  const previewBackgroundColor = file.preview ? white : getFileTypeIcon(file.type).color;
   return h(
     "div",
     {
diff --git a/packages/@uppy/dashboard/lib/components/FileItem/MetaErrorMessage.js b/packages/@uppy/dashboard/lib/components/FileItem/MetaErrorMessage.js
index d33d57b..a6588d5 100644
--- a/packages/@uppy/dashboard/lib/components/FileItem/MetaErrorMessage.js
+++ b/packages/@uppy/dashboard/lib/components/FileItem/MetaErrorMessage.js
@@ -4,7 +4,7 @@ const metaFieldIdToName = (metaFieldId, metaFields) => {
   const field = fields.filter(f => f.id === metaFieldId);
   return field[0].name;
 };
-export default function renderMissingMetaFieldsError(props) {
+export default function MetaErrorMessage(props) {
   const {
     file,
     toggleFileCard,
diff --git a/packages/@uppy/dashboard/lib/components/FileList.js b/packages/@uppy/dashboard/lib/components/FileList.js
index c445e4c..a407d68 100644
--- a/packages/@uppy/dashboard/lib/components/FileList.js
+++ b/packages/@uppy/dashboard/lib/components/FileList.js
@@ -16,7 +16,7 @@ function chunks(list, size) {
   if (currentChunk.length) chunked.push(currentChunk);
   return chunked;
 }
-export default (_ref => {
+export default function FileList(_ref) {
   let {
     id,
     error,
@@ -52,7 +52,7 @@ export default (_ref => {
     if (recoveredState) fileIds.sort(sortByGhostComesFirst);
     return chunks(fileIds, itemsPerRow);
   }, [files, itemsPerRow, recoveredState]);
-  const renderRow = row =>
+  const renderRow = (row) =>
     h(
       "div",
       {
@@ -104,4 +104,4 @@ export default (_ref => {
     renderRow: renderRow,
     rowHeight: rowHeight,
   });
-});
+}
diff --git a/packages/@uppy/dashboard/lib/components/Slide.js b/packages/@uppy/dashboard/lib/components/Slide.js
index 0f24d3f..459cdba 100644
--- a/packages/@uppy/dashboard/lib/components/Slide.js
+++ b/packages/@uppy/dashboard/lib/components/Slide.js
@@ -59,5 +59,4 @@ function Slide(_ref) {
     className: classNames(className, cachedChildren.props.className),
   });
 }
-
 export default Slide;
diff --git a/packages/@uppy/dashboard/lib/utils/copyToClipboard.js b/packages/@uppy/dashboard/lib/utils/copyToClipboard.js
index 5060b7c..ed94e73 100644
--- a/packages/@uppy/dashboard/lib/utils/copyToClipboard.js
+++ b/packages/@uppy/dashboard/lib/utils/copyToClipboard.js
@@ -19,7 +19,7 @@ export default function copyToClipboard(textToCopy, fallbackString) {
     textArea.value = textToCopy;
     document.body.appendChild(textArea);
     textArea.select();
-    const magicCopyFailed = () => {
+    const magicCopyFailed = cause => {
       document.body.removeChild(textArea);
       window.prompt(fallbackString, textToCopy);
       resolve();

[Murderlon]

Since this is user facing, can we be more specific than any for the return value?

[aduh95]

I simply copy/pasted the existing type:

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

Lines 26 to 31 in 83e2527

	interface MetaField {
	id: string
	name: string
	placeholder?: string
	render?: (field: FieldRenderOptions, h: PreactRender) => any
	}

[Murderlon]

I don't mind some any's for when we can't work out internals, but user facing types should be sound. Can we improve this?

[aduh95]

We certainly can, I'd rather not be the one doing it though. I think the improvement can (and should) happen independently from this PR.

[Murderlon]

It's just changing one return type? Am I misunderstanding something or why so reluctant?

Note that I'm asking you to change it in the source, not the types folder which we currently ship.

[aduh95]

Someone needs to do the work of figuring out what this used for, and what type we should put instead of any; as I said, I'd rather not be the one doing that work.

[Murderlon]

You submit a PR with +1,992 −1,142 changes, I'm asking you for one change in an important user facing type, while normally a PR this size has dozens of comments. You are the expert on this types because you wrote them, forcing someone else to contextualize what you already did sounds more unfair to me than letting the author of the PR resolve a single request.

[aduh95]

You are the expert on this types because you wrote them

I did not write this type, according to git blame, Renée did.

forcing someone else to contextualize what you already did sounds more unfair to me than letting the author of the PR resolve a single request

Sorry if that's how I came across, but AFAICT I'm in no way in a better position than someone else to figure this out.

You submit a PR with +1,992 −1,142 changes

That's precisely why I'd rather not be the one doing that work.

[Murderlon]

1e733c1 took two minutes. I hope this serves as an inspiration that it's sometimes better to just take a look than argue.