Now the Offers list includes the information on availability issues in the cards (#3607)

Author: peterschmidt85

frontend/src/locale/en.json

@@ -529,7 +529,9 @@
         "filter_property_placeholder": "Filter by properties",
         "backend": "Backend",
         "backend_plural": "Backends",
-        "availability": "Availability",
+        "availability_not_available": "Not available",
+        "availability_no_quota": "No quota",
+        "availability_no_balance": "No balance",
         "groupBy": "Group by properties",
         "region": "Region",
         "count": "Count",

frontend/src/pages/Offers/List/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Cards, CardsProps, MultiselectCSD, PropertyFilter, StatusIndicator } from 'components';
+import { Cards, CardsProps, MultiselectCSD, Popover, PropertyFilter } from 'components';
 
 import { useCollection } from 'hooks';
 import { useGetGpusListQuery } from 'services/gpu';
@@ -198,15 +198,28 @@ export const OfferList: React.FC<OfferListProps> = ({
         {
             id: 'availability',
             content: (gpu: IGpu) => {
-                // FIXME: array to string comparison never passes.
-                // Additionally, there are more availability statuses that are worth displaying,
-                // and several of them may be present at once.
+                const availabilityIssues =
+                    gpu.availability.length > 0 &&
+                    gpu.availability.every((a) => a === 'not_available' || a === 'no_quota' || a === 'no_balance');
 
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                if (gpu.availability === 'not_available') {
-                    return <StatusIndicator type="warning">Not Available</StatusIndicator>;
+                if (!availabilityIssues) {
+                    return null;
                 }
+
+                if (gpu.availability.length === 1) {
+                    return <span className={styles.greyText}>{t(`offer.availability_${gpu.availability[0]}`)}</span>;
+                }
+
+                return (
+                    <Popover
+                        dismissButton={false}
+                        position="top"
+                        size="small"
+                        content={gpu.availability.map((a) => t(`offer.availability_${a}`)).join(', ')}
+                    >
+                        <span className={styles.greyText}>{t('offer.availability_not_available')}</span>
+                    </Popover>
+                );
             },
             width: 50,
         },