feat: Add Download Manager (pause, stop, delete) (#1339)

4 files changed, 78 insertions, 1 deletions

diff --git a/src/containers/download-manager/DownloadManagerScreen.tsx b/src/containers/download-manager/DownloadManagerScreen.tsx
new file mode 100644
index 000000000..5d395a180
--- /dev/null
+++ b/src/containers/download-manager/DownloadManagerScreen.tsx
@@ -0,0 +1,15 @@
+import { Component, ReactElement } from 'react';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+import DownloadManager from '../../components/downloadManager/DownloadManagerDashboard';
+
+class DownloadManagerScreen extends Component {
+  render(): ReactElement {
+    return (
+      <ErrorBoundary>
+        <DownloadManager {...this.props} />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default DownloadManagerScreen;
diff --git a/src/containers/download-manager/DownloadManagerWindow.tsx b/src/containers/download-manager/DownloadManagerWindow.tsx
new file mode 100644
index 000000000..e13e51774
--- /dev/null
+++ b/src/containers/download-manager/DownloadManagerWindow.tsx
@@ -0,0 +1,46 @@
+import { inject, observer } from 'mobx-react';
+import { Component, ReactPortal } from 'react';
+import ReactDOM from 'react-dom';
+import { Outlet } from 'react-router-dom';
+
+import { StoresProps } from '../../@types/ferdium-components.types';
+import Layout from '../../components/downloadManager/DownloadManagerLayout';
+import ErrorBoundary from '../../components/util/ErrorBoundary';
+
+interface IProps {}
+
+@inject('stores', 'actions')
+@observer
+class DownloadManagerContainer extends Component<IProps> {
+  portalRoot: any;
+
+  el: HTMLDivElement;
+
+  constructor(props: StoresProps) {
+    super(props);
+
+    this.portalRoot = document.querySelector('#portalContainer');
+    this.el = document.createElement('div');
+  }
+
+  componentDidMount(): void {
+    this.portalRoot.append(this.el);
+  }
+
+  componentWillUnmount(): void {
+    this.el.remove();
+  }
+
+  render(): ReactPortal {
+    return ReactDOM.createPortal(
+      <ErrorBoundary>
+        <Layout>
+          <Outlet />
+        </Layout>
+      </ErrorBoundary>,
+      this.el,
+    );
+  }
+}
+
+export default DownloadManagerContainer;
diff --git a/src/containers/layout/AppLayoutContainer.tsx b/src/containers/layout/AppLayoutContainer.tsx
index e30c0e067..8748f1032 100644
--- a/src/containers/layout/AppLayoutContainer.tsx
+++ b/src/containers/layout/AppLayoutContainer.tsx
@@ -52,7 +52,8 @@ class AppLayoutContainer extends Component<IProps> {
     const { installUpdate, toggleMuteApp, toggleCollapseMenu } =
       this.props.actions.app;
 
-    const { openSettings, closeSettings } = this.props.actions.ui;
+    const { openSettings, closeSettings, openDownloads } =
+      this.props.actions.ui;
 
     const isLoadingFeatures =
       features.featuresRequest.isExecuting &&
@@ -89,6 +90,7 @@ class AppLayoutContainer extends Component<IProps> {
         isAppMuted={settings.all.app.isAppMuted}
         isMenuCollapsed={settings.all.app.isMenuCollapsed}
         openSettings={openSettings}
+        openDownloads={openDownloads}
         closeSettings={closeSettings}
         reorder={reorder}
         reload={reload}
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index b9732ead0..8190bef3e 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -255,6 +255,10 @@ const messages = defineMessages({
     id: 'settings.app.form.hideSettingsButton',
     defaultMessage: 'Hide Settings button',
   },
+  hideDownloadButton: {
+    id: 'settings.app.form.hideDownloadButton',
+    defaultMessage: 'Hide Downloads button',
+  },
   alwaysShowWorkspaces: {
     id: 'settings.app.form.alwaysShowWorkspaces',
     defaultMessage: 'Always show workspace drawer',
@@ -425,6 +429,7 @@ class EditSettingsScreen extends Component<
         hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton),
         hideNotificationsButton: Boolean(settingsData.hideNotificationsButton),
         hideSettingsButton: Boolean(settingsData.hideSettingsButton),
+        hideDownloadButton: Boolean(settingsData.hideDownloadButton),
         alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces),
         accentColor: settingsData.accentColor,
         progressbarAccentColor: settingsData.progressbarAccentColor,
@@ -1081,6 +1086,15 @@ class EditSettingsScreen extends Component<
           default: DEFAULT_APP_SETTINGS.hideSettingsButton,
           type: 'checkbox',
         },
+        hideDownloadButton: {
+          label: intl.formatMessage(messages.hideDownloadButton),
+          value: ifUndefined<boolean>(
+            settings.all.app.hideDownloadButton,
+            DEFAULT_APP_SETTINGS.hideDownloadButton,
+          ),
+          default: DEFAULT_APP_SETTINGS.hideDownloadButton,
+          type: 'checkbox',
+        },
         alwaysShowWorkspaces: {
           label: intl.formatMessage(messages.alwaysShowWorkspaces),
           value: ifUndefined<boolean>(