Fixed: (UI) Add tags to modal info and sort by label

frontend/src/Components/TagList.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { kinds } from 'Helpers/Props';
@@ -6,16 +5,15 @@ import Label from './Label';
 import styles from './TagList.css';
 
 function TagList({ tags, tagList }) {
+  const sortedTags = tags
+    .map((tagId) => tagList.find((tag) => tag.id === tagId))
+    .filter((t) => t !== undefined)
+    .sort((a, b) => a.label.localeCompare(b.label));
+
   return (
     <div className={styles.tags}>
       {
-        tags.map((t) => {
-          const tag = _.find(tagList, { id: t });
-
-          if (!tag) {
-            return null;
-          }
-
+        sortedTags.map((tag) => {
           return (
             <Label
               key={tag.id}

frontend/src/Indexer/Info/IndexerInfoModalContent.tsx

@@ -13,6 +13,7 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
+import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
@@ -50,6 +51,7 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
     language,
     indexerUrls,
     fields,
+    tags,
     protocol,
     capabilities,
   } = indexer;
@@ -134,6 +136,16 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
               <DescriptionListItemDescription>
                 {`${window.location.origin}${window.Prowlarr.urlBase}/${id}/api`}
               </DescriptionListItemDescription>
+              {tags.length > 0 ? (
+                <>
+                  <DescriptionListItemTitle>
+                    {translate('Tags')}
+                  </DescriptionListItemTitle>
+                  <DescriptionListItemDescription>
+                    <TagListConnector tags={tags} />
+                  </DescriptionListItemDescription>
+                </>
+              ) : null}
             </DescriptionList>
           </div>
         </FieldSet>