New: Improved Indexer disabled popover

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

@@ -0,0 +1,11 @@
+.title {
+  composes: title from '~Components/DescriptionList/DescriptionListItemTitle.css';
+
+  width: 90px;
+}
+
+.description {
+  composes: title from '~Components/DescriptionList/DescriptionListItemDescription.css';
+
+  margin-left: 110px;
+}

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

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

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import translate from 'Utilities/String/translate';
+import styles from './DisabledIndexerInfo.css';
+
+interface DisabledIndexerInfoProps {
+  mostRecentFailure: Date;
+  disabledTill: Date;
+  initialFailure: Date;
+  longDateFormat: string;
+  timeFormat: string;
+}
+
+function DisabledIndexerInfo(props: DisabledIndexerInfoProps) {
+  const {
+    mostRecentFailure,
+    disabledTill,
+    initialFailure,
+    longDateFormat,
+    timeFormat,
+  } = props;
+
+  return (
+    <DescriptionList>
+      <DescriptionListItem
+        titleClassName={styles.title}
+        descriptionClassName={styles.description}
+        title={translate('InitialFailure')}
+        data={formatDateTime(initialFailure, longDateFormat, timeFormat)}
+      />
+
+      <DescriptionListItem
+        titleClassName={styles.title}
+        descriptionClassName={styles.description}
+        title={translate('LastFailure')}
+        data={formatDateTime(mostRecentFailure, longDateFormat, timeFormat)}
+      />
+
+      <DescriptionListItem
+        titleClassName={styles.title}
+        descriptionClassName={styles.description}
+        title={translate('DisabledUntil')}
+        data={formatDateTime(disabledTill, longDateFormat, timeFormat)}
+      />
+    </DescriptionList>
+  );
+}
+
+export default DisabledIndexerInfo;

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

@@ -30,9 +30,8 @@ interface IndexerIndexRowProps {
 function IndexerIndexRow(props: IndexerIndexRowProps) {
   const { indexerId, columns, isSelectMode } = props;
 
-  const { indexer, appProfile } = useSelector(
-    createIndexerIndexItemSelector(props.indexerId)
-  );
+  const { indexer, appProfile, status, longDateFormat, timeFormat } =
+    useSelector(createIndexerIndexItemSelector(props.indexerId));
 
   const {
     id,
@@ -44,7 +43,6 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
     protocol,
     privacy,
     priority,
-    status,
     fields,
     added,
     capabilities,
@@ -123,6 +121,8 @@ function IndexerIndexRow(props: IndexerIndexRowProps) {
               enabled={enable}
               redirect={redirect}
               status={status}
+              longDateFormat={longDateFormat}
+              timeFormat={timeFormat}
               component={VirtualTableRowCell}
             />
           );

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

@@ -7,3 +7,7 @@
 .statusIcon {
   width: 20px !important;
 }
+
+.indexerStatusTooltip {
+  display: flex;
+}

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

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'indexerStatusTooltip': string;
   'status': string;
   'statusIcon': string;
 }

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import Icon from 'Components/Icon';
 import VirtualTableRowCell from 'Components/Table/Cells/TableRowCell';
-import { icons, kinds } from 'Helpers/Props';
+import Popover from 'Components/Tooltip/Popover';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
 import { IndexerStatus } from 'Indexer/Indexer';
-import formatDateTime from 'Utilities/Date/formatDateTime';
+import translate from 'Utilities/String/translate';
+import DisabledIndexerInfo from './DisabledIndexerInfo';
 import styles from './IndexerStatusCell.css';
 
 interface IndexerStatusCellProps {
@@ -11,6 +13,8 @@ interface IndexerStatusCellProps {
   enabled: boolean;
   redirect: boolean;
   status: IndexerStatus;
+  longDateFormat: string;
+  timeFormat: string;
   component?: React.ElementType;
 }
 
@@ -20,6 +24,8 @@ function IndexerStatusCell(props: IndexerStatusCellProps) {
     enabled,
     redirect,
     status,
+    longDateFormat,
+    timeFormat,
     component: Component = VirtualTableRowCell,
     ...otherProps
   } = props;
@@ -41,13 +47,29 @@ function IndexerStatusCell(props: IndexerStatusCellProps) {
         />
       }
       {status ? (
-        <Icon
-          className={styles.statusIcon}
-          kind={kinds.DANGER}
-          name={icons.WARNING}
-          title={`Indexer is Disabled due to failures until ${formatDateTime(
-            status.disabledTill
-          )}`}
+        <Popover
+          className={styles.indexerStatusTooltip}
+          canFlip={true}
+          anchor={
+            <Icon
+              className={styles.statusIcon}
+              kind={kinds.DANGER}
+              name={icons.WARNING}
+            />
+          }
+          title={translate('IndexerDisabled')}
+          body={
+            <div>
+              <DisabledIndexerInfo
+                mostRecentFailure={status.mostRecentFailure}
+                initialFailure={status.initialFailure}
+                disabledTill={status.disabledTill}
+                longDateFormat={longDateFormat}
+                timeFormat={timeFormat}
+              />
+            </div>
+          }
+          position={tooltipPositions.BOTTOM}
         />
       ) : null}
     </Component>