New: (UI) Indexer privacy label

Fixes #2132

frontend/src/Indexer/Add/SelectIndexerRow.tsx

@@ -4,16 +4,16 @@ import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableRowButton from 'Components/Table/TableRowButton';
 import { icons } from 'Helpers/Props';
 import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
+import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel';
 import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import { IndexerCapabilities } from 'Indexer/Indexer';
+import { IndexerCapabilities, IndexerPrivacy } from 'Indexer/Indexer';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
 import translate from 'Utilities/String/translate';
 import styles from './SelectIndexerRow.css';
 
 interface SelectIndexerRowProps {
   name: string;
   protocol: string;
-  privacy: string;
+  privacy: IndexerPrivacy;
   language: string;
   description: string;
   capabilities: IndexerCapabilities;
@@ -63,7 +63,9 @@ function SelectIndexerRow(props: SelectIndexerRowProps) {
 
       <TableRowCell>{description}</TableRowCell>
 
-      <TableRowCell>{translate(firstCharToUpper(privacy))}</TableRowCell>
+      <TableRowCell>
+        <PrivacyLabel privacy={privacy} />
+      </TableRowCell>
 
       <TableRowCell>
         <CapabilitiesLabel capabilities={capabilities} />

frontend/src/Indexer/Index/Table/IndexerIndexRow.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSelect } from 'App/SelectContext';
-import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
@@ -15,10 +14,10 @@ import createIndexerIndexItemSelector from 'Indexer/Index/createIndexerIndexItem
 import Indexer from 'Indexer/Indexer';
 import IndexerTitleLink from 'Indexer/IndexerTitleLink';
 import { SelectStateInputProps } from 'typings/props';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
 import translate from 'Utilities/String/translate';
 import CapabilitiesLabel from './CapabilitiesLabel';
 import IndexerStatusCell from './IndexerStatusCell';
+import PrivacyLabel from './PrivacyLabel';
 import ProtocolLabel from './ProtocolLabel';
 import styles from './IndexerIndexRow.css';
 
@@ -175,7 +174,7 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
         if (name === 'privacy') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <Label>{translate(firstCharToUpper(privacy))}</Label>
+              <PrivacyLabel privacy={privacy} />
             </VirtualTableRowCell>
           );
         }

frontend/src/Indexer/Index/Table/PrivacyLabel.css

@@ -0,0 +1,20 @@
+.publicLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--dangerColor);
+  background-color: var(--dangerColor);
+}
+
+.semiPrivateLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--warningColor);
+  background-color: var(--warningColor);
+}
+
+.privateLabel {
+  composes: label from '~Components/Label.css';
+
+  border-color: var(--infoColor);
+  background-color: var(--infoColor);
+}

frontend/src/Indexer/Index/Table/PrivacyLabel.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'privateLabel': string;
+  'publicLabel': string;
+  'semiPrivateLabel': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Indexer/Index/Table/PrivacyLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Label from 'Components/Label';
+import { IndexerPrivacy } from 'Indexer/Indexer';
+import firstCharToUpper from 'Utilities/String/firstCharToUpper';
+import translate from 'Utilities/String/translate';
+import styles from './PrivacyLabel.css';
+
+interface PrivacyLabelProps {
+  privacy: IndexerPrivacy;
+}
+
+function PrivacyLabel({ privacy }: PrivacyLabelProps) {
+  return (
+    <Label className={styles[`${privacy}Label`]}>
+      {translate(firstCharToUpper(privacy))}
+    </Label>
+  );
+}
+
+export default PrivacyLabel;

frontend/src/Indexer/Indexer.ts

@@ -24,6 +24,8 @@ export interface IndexerCapabilities extends ModelBase {
   categories: IndexerCategory[];
 }
 
+export type IndexerPrivacy = 'public' | 'semiPrivate' | 'private';
+
 export interface IndexerField extends ModelBase {
   order: number;
   name: string;
@@ -47,7 +49,7 @@ interface Indexer extends ModelBase {
   supportsRedirect: boolean;
   supportsPagination: boolean;
   protocol: string;
-  privacy: string;
+  privacy: IndexerPrivacy;
   priority: number;
   fields: IndexerField[];
   tags: number[];

frontend/src/Indexer/Info/IndexerInfoModalContent.tsx

@@ -24,6 +24,7 @@ import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
+import PrivacyLabel from 'Indexer/Index/Table/PrivacyLabel';
 import Indexer, { IndexerCapabilities } from 'Indexer/Indexer';
 import { createIndexerSelectorForHook } from 'Store/Selectors/createIndexerSelector';
 import translate from 'Utilities/String/translate';
@@ -64,6 +65,7 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
     fields,
     tags,
     protocol,
+    privacy,
     capabilities = {} as IndexerCapabilities,
   } = indexer as Indexer;
 
@@ -160,6 +162,11 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
                       title={translate('Language')}
                       data={language ?? '-'}
                     />
+                    <DescriptionListItem
+                      descriptionClassName={styles.description}
+                      title={translate('Privacy')}
+                      data={privacy ? <PrivacyLabel privacy={privacy} /> : '-'}
+                    />
                     {vipExpiration ? (
                       <DescriptionListItem
                         descriptionClassName={styles.description}