From b104368e23c31696d643b4053192527818bdba52 Mon Sep 17 00:00:00 2001
From: Alien21 <github@alien21.com>
Date: Sun, 3 Jul 2022 01:32:55 +0200
Subject: [PATCH] New: adding a link to tmdb in the import combobox movie
 search results (#7352)

Co-authored-by: Alien21 <alien21@alien21.com>
---
 .../SelectMovie/ImportMovieSearchResult.css   | 19 +++++++++-
 .../SelectMovie/ImportMovieSearchResult.js    | 38 +++++++++++++------
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css
index 2e556c5217..2afbfe2e11 100644
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.css
@@ -1,4 +1,5 @@
-.movie {
+.container {
+  display: flex;
   padding: 10px 20px;
   width: 100%;
 
@@ -6,3 +7,19 @@
     background-color: $menuItemHoverBackgroundColor;
   }
 }
+
+.movie {
+  flex: 1 0 0;
+  overflow: hidden;
+}
+
+.tmdbLink {
+  composes: link from '~Components/Link/Link.css';
+
+  margin-left: auto;
+  color: $textColor;
+}
+
+.tmdbLinkIcon {
+  margin-left: 10px;
+}
diff --git a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.js b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.js
index 82b5ac36a8..d38eb78f19 100644
--- a/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.js
+++ b/frontend/src/AddMovie/ImportMovie/Import/SelectMovie/ImportMovieSearchResult.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
+import { icons } from 'Helpers/Props';
 import ImportMovieTitle from './ImportMovieTitle';
 import styles from './ImportMovieSearchResult.css';
 
@@ -18,6 +20,7 @@ class ImportMovieSearchResult extends Component {
 
   render() {
     const {
+      tmdbId,
       title,
       year,
       studio,
@@ -25,17 +28,30 @@ class ImportMovieSearchResult extends Component {
     } = this.props;
 
     return (
-      <Link
-        className={styles.movie}
-        onPress={this.onPress}
-      >
-        <ImportMovieTitle
-          title={title}
-          year={year}
-          network={studio}
-          isExistingMovie={isExistingMovie}
-        />
-      </Link>
+      <div className={styles.container}>
+        <Link
+          className={styles.movie}
+          onPress={this.onPress}
+        >
+          <ImportMovieTitle
+            title={title}
+            year={year}
+            network={studio}
+            isExistingMovie={isExistingMovie}
+          />
+        </Link>
+
+        <Link
+          className={styles.tmdbLink}
+          to={`https://www.themoviedb.org/movie/${tmdbId}`}
+        >
+          <Icon
+            className={styles.tmdbLinkIcon}
+            name={icons.EXTERNAL_LINK}
+            size={16}
+          />
+        </Link>
+      </div>
     );
   }
 }