Add "DownloadManagement" app feature for use in NativeShell clients (#6833)

* Add "DownloadManagement" app feature for use in NativeShell clients

* Address review feedback

* Address review feedback (round 2)

src/apps/stable/routes/user/settings/index.tsx

@@ -186,6 +186,27 @@ const UserSettingsPage: FC = () => {
                             </div>
                         </LinkButton>
 
+                        {appHost.supports(AppFeature.DownloadManagement) && (
+                            <LinkButton
+                                onClick={shell.openDownloadManager}
+                                className='downloadManager listItem-border'
+                                style={{
+                                    display: 'block',
+                                    margin: 0,
+                                    padding: 0
+                                }}
+                            >
+                                <div className='listItem'>
+                                    <span className='material-icons listItemIcon listItemIcon-transparent download' aria-hidden='true' />
+                                    <div className='listItemBody'>
+                                        <div className='listItemBodyText'>
+                                            {globalize.translate('DownloadManager')}
+                                        </div>
+                                    </div>
+                                </div>
+                            </LinkButton>
+                        )}
+
                         {appHost.supports(AppFeature.ClientSettings) && (
                             <LinkButton
                                 onClick={shell.openClientSettings}

src/components/toolbar/AppUserMenu.tsx

@@ -2,6 +2,7 @@ import AccountCircle from '@mui/icons-material/AccountCircle';
 import AppSettingsAlt from '@mui/icons-material/AppSettingsAlt';
 import Close from '@mui/icons-material/Close';
 import DashboardIcon from '@mui/icons-material/Dashboard';
+import Download from '@mui/icons-material/Download';
 import Edit from '@mui/icons-material/Edit';
 import Logout from '@mui/icons-material/Logout';
 import PhonelinkLock from '@mui/icons-material/PhonelinkLock';
@@ -37,6 +38,11 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
     const { user } = useApi();
     const { data: isQuickConnectEnabled } = useQuickConnectEnabled();
 
+    const onDownloadManagerClick = useCallback(() => {
+        shell.openDownloadManager();
+        onMenuClose();
+    }, [ onMenuClose ]);
+
     const onClientSettingsClick = useCallback(() => {
         shell.openClientSettings();
         onMenuClose();
@@ -98,10 +104,25 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
                 </ListItemText>
             </MenuItem>
 
-            {appHost.supports(AppFeature.ClientSettings) && ([
-                <Divider key='client-settings-divider' />,
+            {(appHost.supports(AppFeature.DownloadManagement) || appHost.supports(AppFeature.ClientSettings)) && (
+                <Divider />
+            )}
+
+            {appHost.supports(AppFeature.DownloadManagement) && (
+                <MenuItem
+                    onClick={onDownloadManagerClick}
+                >
+                    <ListItemIcon>
+                        <Download />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {globalize.translate('DownloadManager')}
+                    </ListItemText>
+                </MenuItem>
+            )}
+
+            {appHost.supports(AppFeature.ClientSettings) && (
                 <MenuItem
-                    key='client-settings-button'
                     onClick={onClientSettingsClick}
                 >
                     <ListItemIcon>
@@ -111,7 +132,7 @@ const AppUserMenu: FC<AppUserMenuProps> = ({
                         {globalize.translate('ClientSettings')}
                     </ListItemText>
                 </MenuItem>
-            ])}
+            )}
 
             {/* ADMIN LINKS */}
             {user?.Policy?.IsAdministrator && ([

src/constants/appFeature.ts

@@ -10,6 +10,8 @@ export enum AppFeature {
     DisplayLanguage = 'displaylanguage',
     /** The app supports configuring the display mode (TV, Desktop, etc.) */
     DisplayMode = 'displaymode',
+    /** The app supports showing a download management interface via a menu entry */
+    DownloadManagement = 'downloadmanagement',
     /** The app can exit via back navigation */
     Exit = 'exit',
     /** The app can be exited via a menu entry */

src/scripts/shell.js

@@ -15,6 +15,11 @@ export default {
             window.NativeShell.openClientSettings();
         }
     },
+    openDownloadManager: () => {
+        if (window.NativeShell?.openDownloadManager) {
+            window.NativeShell.openDownloadManager();
+        }
+    },
     openUrl: function(url, target) {
         if (window.NativeShell?.openUrl) {
             window.NativeShell.openUrl(url, target);

src/strings/en-us.json

@@ -253,6 +253,7 @@
     "Down": "Down",
     "Download": "Download",
     "DownloadAll": "Download All",
+    "DownloadManager": "Downloads",
     "DownloadsValue": "{0} downloads",
     "DrmChannelsNotImported": "Channels with DRM will not be imported.",
     "DropShadow": "Drop Shadow",