fix(ui): add user profile links to RequestBlock and change 'ETA' string in DownloadBlock (#1551)

src/components/DownloadBlock/index.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { FormattedRelativeTime } from 'react-intl';
+import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { DownloadingItem } from '../../../server/lib/downloadtracker';
 import Badge from '../Common/Badge';
 
+const messages = defineMessages({
+  estimatedtime: 'Estimated {time}',
+});
+
 interface DownloadBlockProps {
   downloadItem: DownloadingItem;
   is4k?: boolean;
@@ -12,6 +16,8 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({
   downloadItem,
   is4k = false,
 }) => {
+  const intl = useIntl();
+
   return (
     <div className="p-4">
       <div className="w-56 mb-2 text-sm truncate sm:w-80 md:w-full">
@@ -48,27 +54,30 @@ const DownloadBlock: React.FC<DownloadBlockProps> = ({
       <div className="flex items-center justify-between text-xs">
         <span>
           {is4k && (
-            <Badge badgeType="warning" className="mr-1">
+            <Badge badgeType="warning" className="mr-2">
               4K
             </Badge>
           )}
           <Badge className="capitalize">{downloadItem.status}</Badge>
         </span>
         <span>
-          ETA{' '}
-          {downloadItem.estimatedCompletionTime ? (
-            <FormattedRelativeTime
-              value={Math.floor(
-                (new Date(downloadItem.estimatedCompletionTime).getTime() -
-                  Date.now()) /
-                  1000
-              )}
-              updateIntervalInSeconds={1}
-              numeric="auto"
-            />
-          ) : (
-            'N/A'
-          )}
+          {downloadItem.estimatedCompletionTime
+            ? intl.formatMessage(messages.estimatedtime, {
+                time: (
+                  <FormattedRelativeTime
+                    value={Math.floor(
+                      (new Date(
+                        downloadItem.estimatedCompletionTime
+                      ).getTime() -
+                        Date.now()) /
+                        1000
+                    )}
+                    updateIntervalInSeconds={1}
+                    numeric="auto"
+                  />
+                ),
+              })
+            : ''}
         </span>
       </div>
     </div>

src/components/RequestBlock/index.tsx

@@ -8,6 +8,7 @@ import {
   XIcon,
 } from '@heroicons/react/solid';
 import axios from 'axios';
+import Link from 'next/link';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { MediaRequestStatus } from '../../../server/constants/media';
@@ -80,14 +81,22 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             <div className="flex mb-1 flex-nowrap white">
               <UserIcon className="min-w-0 flex-shrink-0 mr-1.5 h-5 w-5" />
               <span className="w-40 truncate md:w-auto">
-                {request.requestedBy.displayName}
+                <Link href={`/users/${request.requestedBy.id}`}>
+                  <a className="text-gray-100 transition duration-300 hover:text-white hover:underline">
+                    {request.requestedBy.displayName}
+                  </a>
+                </Link>
               </span>
             </div>
             {request.modifiedBy && (
               <div className="flex flex-nowrap">
                 <EyeIcon className="flex-shrink-0 mr-1.5 h-5 w-5" />
                 <span className="w-40 truncate md:w-auto">
-                  {request.modifiedBy?.displayName}
+                  <Link href={`/users/${request.modifiedBy.id}`}>
+                    <a className="text-gray-100 transition duration-300 hover:text-white hover:underline">
+                      {request.modifiedBy.displayName}
+                    </a>
+                  </Link>
                 </span>
               </div>
             )}
@@ -186,7 +195,7 @@ const RequestBlock: React.FC<RequestBlockProps> = ({ request, onUpdate }) => {
             </div>
           </div>
         )}
-        {(server || profile || rootFolder) && (
+        {(server || profile !== null || rootFolder) && (
           <>
             <div className="mt-4 mb-1 text-sm">
               {intl.formatMessage(messages.requestoverrides)}

src/i18n/locale/en.json

@@ -31,6 +31,7 @@
   "components.Discover.upcoming": "Upcoming Movies",
   "components.Discover.upcomingmovies": "Upcoming Movies",
   "components.Discover.upcomingtv": "Upcoming Series",
+  "components.DownloadBlock.estimatedtime": "Estimated {time}",
   "components.LanguageSelector.languageServerDefault": "Default ({language})",
   "components.LanguageSelector.originalLanguageDefault": "All Languages",
   "components.Layout.LanguagePicker.changelanguage": "Change Language",