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

.editorconfig

@@ -258,7 +258,7 @@ dotnet_diagnostic.CA5401.severity = suggestion
 
 dotnet_diagnostic.SYSLIB0014.severity = none
 
-[*.{js,html,js,hbs,less,css}]
+[*.{js,jsx,ts,tsx,html,hbs,less,css}]
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true

frontend/.eslintrc.js

@@ -1,16 +1,16 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable @typescript-eslint/no-var-requires
 const fs = require('fs');
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
 const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin').configs.recommended;
 
+const frontendFolder = __dirname;
+
 const dirs = fs
-  .readdirSync('frontend/src', { withFileTypes: true })
+  .readdirSync(path.join(frontendFolder, 'src'), { withFileTypes: true })
   .filter((dirent) => dirent.isDirectory())
   .map((dirent) => dirent.name)
   .join('|');
 
-const frontendFolder = __dirname;
-
 module.exports = {
   parser: '@babel/eslint-parser',
 

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) => {
+        sortedTags.map((tag) => {
-          const tag = _.find(tagList, { id: t });
-
-          if (!tag) {
-            return null;
-          }
-
           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>