Add tooltip

IFRCGo · May 10, 2024 · e812c94 · e812c94
1 parent 0f3914a
commit e812c94
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 11 deletions.
diff --git a/src/views/Home/AlertsMap/Map/index.tsx b/src/views/Home/AlertsMap/Map/index.tsx
@@ -100,6 +100,7 @@ query Admin1WithAlerts(
     public {
       id
       country(pk: $country) {
+        id
         admin1s(alertFilters: $alertFilters) {
           id
           ifrcGoId

diff --git a/src/views/Home/AlertsMap/Sidebar/Admin1Alerts/index.tsx b/src/views/Home/AlertsMap/Sidebar/Admin1Alerts/index.tsx
@@ -66,6 +66,7 @@ query Admin1Alerts(
       items {
         id
         info {
+          id
           event
           categoryDisplay
         }

diff --git a/src/views/Home/AlertsMap/Sidebar/AlertDetail/index.tsx b/src/views/Home/AlertsMap/Sidebar/AlertDetail/index.tsx
@@ -48,7 +48,9 @@ query AlertInfo($alert: ID!) {
     public {
         id
       alert(pk: $alert) {
+        id
         info {
+          id
           event
           categoryDisplay
           category
@@ -58,7 +60,6 @@ query AlertInfo($alert: ID!) {
           urgencyDisplay
           severityDisplay
           certaintyDisplay
-          id
         }
         infos {
             id
@@ -86,26 +87,26 @@ query AlertInfo($alert: ID!) {
               valueName
             }
             areas {
+              id
               polygons {
-                value
                 id
+                value
                 alertInfoAreaId
               }
-              id
             }
             categoryDisplay
         }
         sender
         sent
         admin1s {
+          id
           isUnknown
         }
         url
         identifier
         scope
         restriction
         references
-        id
       }
     }
   }

diff --git a/src/views/Home/AlertsMap/Sidebar/CountryAlerts/index.tsx b/src/views/Home/AlertsMap/Sidebar/CountryAlerts/index.tsx
@@ -47,6 +47,7 @@ query CountryAlerts(
       items {
         id
         info {
+          id
           event
           categoryDisplay
         }

diff --git a/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx b/src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx
@@ -39,18 +39,18 @@ query CountryDetail($countryId: ID!) {
   public {
     id
     country(pk: $countryId) {
+      id
       bbox
       name
       iso3
       ifrcGoId
       alertCount
       admin1s {
+        id
         countryId
         filteredAlertCount
-        id
         name
       }
-      id
     }
   }
 }

diff --git a/src/views/Home/AlertsMap/i18n.json b/src/views/Home/AlertsMap/i18n.json
@@ -5,6 +5,7 @@
         "mapViewAllSources": "View All Sources",
         "ongoingAlertCountries": "Ongoing Alert Countries",
         "backToAlertsLabel": "Back to Alerts",
-        "alertViewDetails": "View Details"
+        "alertViewDetails": "View Details",
+        "alertInfo": "The IFRC AlertHub shows warnings from authoritative agencies in countries. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). You'll only see warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
     }
 }
diff --git a/src/views/Home/AlertsMap/index.tsx b/src/views/Home/AlertsMap/index.tsx
@@ -8,7 +8,10 @@ import {
     useQuery,
 } from '@apollo/client';
 import { ChevronRightLineIcon } from '@ifrc-go/icons';
-import { Container } from '@ifrc-go/ui';
+import {
+    Container,
+    InfoPopup,
+} from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
 import { resolveToString } from '@ifrc-go/ui/utils';
 import {
@@ -59,9 +62,11 @@ query CountryAlertsCount ($filters: AlertFilter){
       alerts(filters: $filters) {
         count
         items {
+            id
             country {
                 id
                 name
+                filteredAlertCount
                 alertCount
             }
         }
@@ -121,7 +126,7 @@ export function Component() {
         },
     );
 
-    const alertQueryVariables = useMemo<{ filters: AlertFilter}>(() => ({
+    const alertQueryVariables = useMemo<{ filters: AlertFilter }>(() => ({
         filters: filter,
     }), [
         filter,
@@ -167,7 +172,15 @@ export function Component() {
     return (
         <Container
             className={styles.alertsMap}
-            heading={heading}
+            heading={(
+                <>
+                    {heading}
+                    <InfoPopup
+                        className={styles.alertInfo}
+                        description={strings.alertInfo}
+                    />
+                </>
+            )}
             withHeaderBorder
             childrenContainerClassName={styles.mainContent}
             actions={(

diff --git a/src/views/Home/AlertsMap/styles.module.css b/src/views/Home/AlertsMap/styles.module.css
@@ -3,6 +3,11 @@
     position: relative;
     flex-direction: column;
 
+    .alert-info {
+        align-items: flex-end;
+        font-size: var(--go-ui-font-size-md);
+    }
+
     .main-content {
         .alerts-map {
             grid-column: span 2;
@@ -43,4 +48,4 @@
         text-decoration: underline;
         color: var(--go-ui-color-primary-red);
     }
-}
+}
diff --git a/src/views/Home/AlertsTable/index.tsx b/src/views/Home/AlertsTable/index.tsx
@@ -56,6 +56,7 @@ const ALERT_INFORMATIONS = gql`
         $filters: AlertFilter,
         ) {
         public {
+            id
             alerts(pagination: $pagination, filters: $filters, order:$order) {
                 limit
                 offset
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,6 +66,7 @@ query Admin1Alerts( @@
           items {
             id
             info {
+              id
               event
               categoryDisplay
             }
@@ Expand Down @@