New: (Apps) Add `Go To Application` in UI

frontend/src/Settings/Applications/Applications/Application.css

@@ -4,6 +4,11 @@
   width: 290px;
 }
 
+.nameContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
 .name {
   @add-mixin truncate;
 
@@ -12,6 +17,12 @@
   font-size: 24px;
 }
 
+.externalLink {
+  composes: button from '~Components/Link/IconButton.css';
+
+  height: 36px;
+}
+
 .enabled {
   display: flex;
   flex-wrap: wrap;

frontend/src/Settings/Applications/Applications/Application.css.d.ts

@@ -3,7 +3,9 @@
 interface CssExports {
   'application': string;
   'enabled': string;
+  'externalLink': string;
   'name': string;
+  'nameContainer': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

frontend/src/Settings/Applications/Applications/Application.js

@@ -2,9 +2,10 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import TagList from 'Components/TagList';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import EditApplicationModalConnector from './EditApplicationModalConnector';
 import styles from './Application.css';
@@ -57,18 +58,33 @@ class Application extends Component {
       id,
       name,
       syncLevel,
+      fields,
       tags,
       tagList
     } = this.props;
 
+    const applicationUrl = fields.find((field) => field.name === 'baseUrl')?.value;
+
     return (
       <Card
         className={styles.application}
         overlayContent={true}
         onPress={this.onEditApplicationPress}
       >
-        <div className={styles.name}>
-          {name}
+        <div className={styles.nameContainer}>
+          <div className={styles.name}>
+            {name}
+          </div>
+
+          {
+            applicationUrl ?
+              <IconButton
+                className={styles.externalLink}
+                name={icons.EXTERNAL_LINK}
+                title={translate('GoToApplication')}
+                to={`${applicationUrl}`}
+              /> : null
+          }
         </div>
 
         {
@@ -125,6 +141,7 @@ Application.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   syncLevel: PropTypes.string.isRequired,
+  fields: PropTypes.arrayOf(PropTypes.object).isRequired,
   tags: PropTypes.arrayOf(PropTypes.number).isRequired,
   tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
   onConfirmDeleteApplication: PropTypes.func

src/NzbDrone.Core/Localization/Core/en.json

@@ -199,6 +199,7 @@
   "GeneralSettings": "General Settings",
   "GeneralSettingsSummary": "Port, SSL, username/password, proxy, analytics, and updates",
   "Genre": "Genre",
+  "GoToApplication": "Go to application",
   "GrabReleases": "Grab Release(s)",
   "GrabTitle": "Grab Title",
   "Grabbed": "Grabbed",