Display protocol for download clients in UI

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.tsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TagList from 'Components/TagList';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import { kinds } from 'Helpers/Props';
 import { deleteDownloadClient } from 'Store/Actions/settingsActions';
 import { useTagList } from 'Tags/useTags';
@@ -14,6 +16,7 @@ import styles from './DownloadClient.css';
 interface DownloadClientProps {
   id: number;
   name: string;
+  protocol: DownloadProtocol;
   enable: boolean;
   priority: number;
   tags: number[];
@@ -22,6 +25,7 @@ interface DownloadClientProps {
 function DownloadClient({
   id,
   name,
+  protocol,
   enable,
   priority,
   tags,
@@ -65,6 +69,8 @@ function DownloadClient({
       <div className={styles.name}>{name}</div>
 
       <div className={styles.enabled}>
+        <ProtocolLabel protocol={protocol} />
+
         {enable ? (
           <Label kind={kinds.SUCCESS}>{translate('Enabled')}</Label>
         ) : (

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -37,6 +37,12 @@ const COLUMNS: Column[] = [
     isSortable: true,
     isVisible: true,
   },
+  {
+    name: 'protocol',
+    label: () => translate('Protocol'),
+    isSortable: true,
+    isVisible: true,
+  },
   {
     name: 'implementation',
     label: () => translate('Implementation'),

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.css

@@ -1,4 +1,5 @@
 .name,
+.protocol,
 .enable,
 .tags,
 .priority,
@@ -8,4 +9,4 @@
   composes: cell from '~Components/Table/Cells/TableRowCell.css';
 
   word-break: break-all;
-}
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.css.d.ts

@@ -5,6 +5,7 @@ interface CssExports {
   'implementation': string;
   'name': string;
   'priority': string;
+  'protocol': string;
   'removeCompletedDownloads': string;
   'removeFailedDownloads': string;
   'tags': string;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import ProtocolLabel from 'Activity/Queue/ProtocolLabel';
 import { useSelect } from 'App/Select/SelectContext';
 import Label from 'Components/Label';
 import SeriesTagList from 'Components/SeriesTagList';
@@ -6,6 +7,7 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
+import DownloadProtocol from 'DownloadClient/DownloadProtocol';
 import { kinds } from 'Helpers/Props';
 import DownloadClient from 'typings/DownloadClient';
 import { SelectStateInputProps } from 'typings/props';
@@ -15,6 +17,7 @@ import styles from './ManageDownloadClientsModalRow.css';
 interface ManageDownloadClientsModalRowProps {
   id: number;
   name: string;
+  protocol: DownloadProtocol;
   enable: boolean;
   priority: number;
   removeCompletedDownloads: boolean;
@@ -30,6 +33,7 @@ function ManageDownloadClientsModalRow(
   const {
     id,
     name,
+    protocol,
     enable,
     priority,
     removeCompletedDownloads,
@@ -62,6 +66,10 @@ function ManageDownloadClientsModalRow(
 
       <TableRowCell className={styles.name}>{name}</TableRowCell>
 
+      <TableRowCell className={styles.protocol}>
+        <ProtocolLabel protocol={protocol} />
+      </TableRowCell>
+
       <TableRowCell className={styles.implementation}>
         {implementation}
       </TableRowCell>