Fix issues on dref import and imminent risk map

- Update labels for severity control
    - Green -> 60 km/h
    - Orange -> 90 km/h
    - Red -> 120 km/h
- Update how event details is shown
    - Previously, we had a navigation system
    - Now, we have exandable container
- Fix issue related to richtext and excel
    - Filtered out empty text items
- Fix issue with injecting client id
    - We were injecting clientId instead of client_id
    - We were not injecting clientId if keyFieldName was defined

Author: tnagorra

app/scripts/translatte/main.ts

@@ -112,7 +112,6 @@ yargs(hideBin(process.argv))
             });
         },
         async (argv) => {
-            console.warn(argv);
             await applyMigrations(
                 currentDir,
                 argv.SOURCE_FILE as string,

app/src/components/domain/RiskImminentEventMap/LayerOptions/index.tsx

@@ -57,20 +57,22 @@ function LayerOptions(props: Props) {
     const setFieldValue = useSetFieldValue(onChange);
 
     // FIXME: use strings
+    // FIXME: These are hard-coded for Gdacs source.
+    // Currently we are only showing severity control for Gdacs
     const severityLegendItems = useMemo<SeverityLegendItem[]>(() => ([
         {
             severity: 'green',
-            label: 'Green',
+            label: '60 km/h',
             color: COLOR_GREEN,
         },
         {
             severity: 'orange',
-            label: 'Orange',
+            label: '90 km/h',
             color: COLOR_ORANGE,
         },
         {
             severity: 'red',
-            label: 'Red',
+            label: '120 km/h',
             color: COLOR_RED,
         },
         {

app/src/components/domain/RiskImminentEventMap/i18n.json

@@ -2,7 +2,6 @@
     "namespace": "common",
     "strings": {
         "riskImminentEventsMap": "Risk Imminent Events Map",
-        "backToEventsLabel": "Back to events",
         "emptyImminentEventMessage": "No imminent event forecasted"
     }
 }

app/src/components/domain/RiskImminentEventMap/index.tsx

@@ -3,9 +3,7 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { ChevronLeftLineIcon } from '@ifrc-go/icons';
 import {
-    Button,
     Container,
     List,
 } from '@ifrc-go/ui';
@@ -86,8 +84,10 @@ export type EventPointFeature = GeoJSON.Feature<GeoJSON.Point, EventPointPropert
 
 export interface RiskEventListItemProps<EVENT> {
     data: EVENT;
+    expanded: boolean;
     onExpandClick: (eventId: number | string) => void;
     className?: string;
+    children?: React.ReactNode;
 }
 
 export interface RiskEventDetailProps<EVENT, EXPOSURE> {
@@ -243,10 +243,15 @@ function RiskImminentEventMap<
         (eventId: string | number | undefined) => {
             const eventIdSafe = eventId as KEY | undefined;
 
-            setActiveEventId(eventIdSafe);
-            onActiveEventChange(eventIdSafe);
+            if (activeEventId === eventIdSafe) {
+                setActiveEventId(undefined);
+                onActiveEventChange(undefined);
+            } else {
+                setActiveEventId(eventIdSafe);
+                onActiveEventChange(eventIdSafe);
+            }
         },
-        [onActiveEventChange],
+        [onActiveEventChange, activeEventId],
     );
 
     const handlePointClick = useCallback(
@@ -258,17 +263,44 @@ function RiskImminentEventMap<
         [setActiveEventIdSafe],
     );
 
+    const DetailComponent = detailRenderer;
+
     const eventListRendererParams = useCallback(
         (_: string | number, event: EVENT): RiskEventListItemProps<EVENT> => ({
             data: event,
             onExpandClick: setActiveEventIdSafe,
+            expanded: activeEventId === keySelector(event),
             className: styles.riskEventListItem,
+            children: activeEventId === keySelector(event) && (
+                <DetailComponent
+                    data={event}
+                    exposure={activeEventExposure}
+                    pending={activeEventExposurePending}
+                >
+                    {hazardTypeSelector(event) === 'TC' && (
+                        <LayerOptions
+                            value={layerOptions}
+                            // NOTE: Currently the information is only visible in gdacas
+                            exposureAreaControlHidden={source !== 'gdacs'}
+                            onChange={setLayerOptions}
+                        />
+                    )}
+                </DetailComponent>
+            ),
         }),
-        [setActiveEventIdSafe],
+        [
+            setActiveEventIdSafe,
+            activeEventExposure,
+            activeEventExposurePending,
+            layerOptions,
+            hazardTypeSelector,
+            DetailComponent,
+            activeEventId,
+            keySelector,
+            source,
+        ],
     );
 
-    const DetailComponent = detailRenderer;
-
     const [loadedIcons, setLoadedIcons] = useState<Record<string, boolean>>({});
 
     const handleIconLoad = useCallback(
@@ -443,48 +475,18 @@ function RiskImminentEventMap<
                 withInternalPadding
                 childrenContainerClassName={styles.content}
                 spacing="cozy"
-                actions={isDefined(activeEventId) && (
-                    <Button
-                        name={undefined}
-                        onClick={setActiveEventIdSafe}
-                        variant="tertiary"
-                        icons={(
-                            <ChevronLeftLineIcon className={styles.icon} />
-                        )}
-                    >
-                        {strings.backToEventsLabel}
-                    </Button>
-                )}
             >
-                {isNotDefined(activeEventId) && (
-                    <List
-                        className={styles.eventList}
-                        filtered={false}
-                        pending={pending}
-                        errored={false}
-                        data={events}
-                        keySelector={keySelector}
-                        renderer={listItemRenderer}
-                        rendererParams={eventListRendererParams}
-                        emptyMessage={strings.emptyImminentEventMessage}
-                    />
-                )}
-                {isDefined(activeEvent) && (
-                    <DetailComponent
-                        data={activeEvent}
-                        exposure={activeEventExposure}
-                        pending={activeEventExposurePending}
-                    >
-                        {hazardTypeSelector(activeEvent) === 'TC' && (
-                            <LayerOptions
-                                value={layerOptions}
-                                // NOTE: Currently the information is only visible in gdacas
-                                exposureAreaControlHidden={source !== 'gdacs'}
-                                onChange={setLayerOptions}
-                            />
-                        )}
-                    </DetailComponent>
-                )}
+                <List
+                    className={styles.eventList}
+                    filtered={false}
+                    pending={pending}
+                    errored={false}
+                    data={events}
+                    keySelector={keySelector}
+                    renderer={listItemRenderer}
+                    rendererParams={eventListRendererParams}
+                    emptyMessage={strings.emptyImminentEventMessage}
+                />
             </Container>
         </div>
     );

app/src/components/domain/RiskImminentEvents/Gdacs/EventDetails/i18n.json

@@ -1,7 +1,6 @@
 {
     "namespace": "common",
     "strings": {
-        "eventStartOnLabel": "Started on",
         "eventMoreDetailsLink": "More Details",
         "eventSourceLabel": "Forecast provider",
         "eventDeathLabel": "Estimated deaths",

app/src/components/domain/RiskImminentEvents/Gdacs/EventDetails/index.tsx

@@ -70,8 +70,6 @@ type Props = RiskEventDetailProps<GdacsItem, GdacsExposure | undefined>;
 function EventDetails(props: Props) {
     const {
         data: {
-            hazard_name,
-            start_date,
             event_details,
         },
         exposure,
@@ -87,16 +85,7 @@ function EventDetails(props: Props) {
     return (
         <Container
             contentViewType="vertical"
-            heading={hazard_name}
-            headingLevel={5}
             spacing="cozy"
-            headerDescription={(
-                <TextOutput
-                    label={strings.eventStartOnLabel}
-                    value={start_date}
-                    valueType="date"
-                />
-            )}
             withBorderAndHeaderBackground
             pending={pending}
         >

app/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/i18n.json

@@ -1,7 +1,7 @@
 {
     "namespace": "common",
     "strings": {
-        "gdacsEventViewDetails": "View Details",
+        "gdacsEventViewDetails": "View / Hide Details",
         "gdacsEventStartedOn": "Started On"
     }
 }

app/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx

@@ -1,4 +1,11 @@
-import { ChevronRightLineIcon } from '@ifrc-go/icons';
+import {
+    useEffect,
+    useRef,
+} from 'react';
+import {
+    ChevronDownLineIcon,
+    ChevronUpLineIcon,
+} from '@ifrc-go/icons';
 import {
     Button,
     Header,
@@ -25,35 +32,62 @@ function EventListItem(props: Props) {
             hazard_name,
             start_date,
         },
+        expanded,
         onExpandClick,
         className,
+        children,
     } = props;
 
     const strings = useTranslation(i18n);
 
+    const elementRef = useRef<HTMLDivElement>(null);
+
+    useEffect(
+        () => {
+            if (expanded && elementRef.current) {
+                const y = window.scrollY;
+                const x = window.scrollX;
+                elementRef.current.scrollIntoView({
+                    behavior: 'instant',
+                    block: 'start',
+                });
+                // NOTE: We need to scroll back because scrollIntoView also
+                // scrolls the parent container
+                window.scroll(x, y);
+            }
+        },
+        [expanded],
+    );
+
     return (
-        <Header
-            className={_cs(styles.eventListItem, className)}
-            heading={hazard_name ?? '--'}
-            headingLevel={5}
-            actions={(
-                <Button
-                    name={id}
-                    onClick={onExpandClick}
-                    variant="tertiary"
-                    title={strings.gdacsEventViewDetails}
-                >
-                    <ChevronRightLineIcon className={styles.icon} />
-                </Button>
-            )}
-            spacing="cozy"
-        >
-            <TextOutput
-                label={strings.gdacsEventStartedOn}
-                value={start_date}
-                valueType="date"
-            />
-        </Header>
+        <>
+            <Header
+                elementRef={elementRef}
+                className={_cs(styles.eventListItem, className)}
+                heading={hazard_name ?? '--'}
+                headingLevel={5}
+                actions={(
+                    <Button
+                        name={id}
+                        onClick={onExpandClick}
+                        variant="tertiary"
+                        title={strings.gdacsEventViewDetails}
+                    >
+                        {expanded
+                            ? <ChevronUpLineIcon className={styles.icon} />
+                            : <ChevronDownLineIcon className={styles.icon} />}
+                    </Button>
+                )}
+                spacing="cozy"
+            >
+                <TextOutput
+                    label={strings.gdacsEventStartedOn}
+                    value={start_date}
+                    valueType="date"
+                />
+            </Header>
+            {children}
+        </>
     );
 }
 

app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventDetails/i18n.json

@@ -9,8 +9,6 @@
         "meteoSwissAuthoritativeMessage": "Please also consider {link} and classification of {classificationLink}.",
         "meteoSwissAuthoritativeLinkLabel": "authoritative information about the hazard",
         "meteoSwissTropicalStorm": "tropical storm",
-        "meteoSwissEventDetailsStartedOnLabel": "Started on",
-        "meteoSwissEventDetailsUpdatedAtLabel": "Updated at",
         "meteoSwissHazardName": "{hazardType} - {hazardName}",
         "meteoSwissImpactValue": "{value} ({fivePercent} - {ninetyFivePercent}) {unit}",
         "beta": "beta",

app/src/components/domain/RiskImminentEvents/MeteoSwiss/EventDetails/index.tsx

@@ -41,8 +41,6 @@ interface Props {
 function EventDetails(props: Props) {
     const {
         data: {
-            // id,
-            hazard_type_display,
             country_details,
             start_date,
             updated_at,
@@ -55,14 +53,6 @@ function EventDetails(props: Props) {
 
     const strings = useTranslation(i18n);
 
-    const hazardName = resolveToString(
-        strings.meteoSwissHazardName,
-        {
-            hazardType: hazard_type_display,
-            hazardName: country_details?.name ?? hazard_name,
-        },
-    );
-
     const getSaffirSimpsonScaleDescription = useCallback((windspeed: number) => {
         if (windspeed < 33) {
             return strings.tropicalStormDescription;
@@ -179,25 +169,6 @@ function EventDetails(props: Props) {
         <Container
             className={styles.eventDetails}
             childrenContainerClassName={styles.content}
-            heading={hazardName}
-            headingLevel={4}
-            headerDescription={(
-                <>
-                    <TextOutput
-                        label={strings.meteoSwissEventDetailsStartedOnLabel}
-                        value={start_date}
-                        valueType="date"
-                        strongValue
-                    />
-                    <TextOutput
-                        label={strings.meteoSwissEventDetailsUpdatedAtLabel}
-                        value={updated_at}
-                        valueType="date"
-                        format={UPDATED_AT_FORMAT}
-                        strongValue
-                    />
-                </>
-            )}
             contentViewType="vertical"
         >
             {pending && <BlockLoading />}