Merge pull request #1569 from IFRCGo/feat/cherry-pick-hotfixes-v7.6.4-v7.6.6

Cherry pick  changes from hotfixes v7.6.4 - v7.6.6

Author: frozenhelium

.changeset/real-pears-turn.md

@@ -1,5 +1,38 @@
 # go-web-app
 
+## 7.6.6
+
+### Patch Changes
+
+- 8cdc946: Hide Local unit contact details on the list view for logged in users in [#1485](https://github.com/ifRCGo/go-web-app/issues/1485)
+  Update `tinymce-react` plugin to the latest version and enabled additional plugins, including support for lists in [#1481](https://github.com/ifRCGo/go-web-app/issues/1481)
+- ecca810: Replace the from-communication-copied text of CoS Health header
+- 7cf2514: Prioritize GDACS as the Primary Source for Imminent Risk Watch in [#1547](https://github.com/IFRCGo/go-web-app/issues/1547)
+- 8485076: Add Organization type and Learning type filter in Operational learning in [#1469](https://github.com/IFRCGo/go-web-app/issues/1469)
+- 766d98d: Auto append https:// for incomplete URLs in [#1505](https://github.com/IFRCGo/go-web-app/issues/1505)
+
+## 7.6.5
+
+### Patch Changes
+
+- 478e73b: Update labels for severity control in Imminent Risk Map
+  Update navigation for the events in Imminent Risk Map
+  Fix issue displayed when opening a DREF import template
+  Fix submission issue when importing a DREF import file
+- f82f846: Update Health Section in Catalogue of Surge Services
+- ade84aa: Display ICRC Presence
+  - Display ICRC presence across partner countries
+  - Highlight key operational countries
+
+## 7.6.4
+
+### Patch Changes
+
+- d85f64d: Update Imminent Events
+
+  - Hide WFP ADAM temporarily from list sources
+  - Show exposure control for cyclones from GDACS only
+
 ## 7.6.3
 
 ### Patch Changes

app/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
     "name": "go-web-app",
-    "version": "7.6.3",
+    "version": "7.6.6",
     "type": "module",
     "private": true,
     "license": "MIT",
@@ -40,7 +40,7 @@
         "@ifrc-go/icons": "^2.0.1",
         "@ifrc-go/ui": "^1.2.1",
         "@sentry/react": "^7.81.1",
-        "@tinymce/tinymce-react": "^4.3.0",
+        "@tinymce/tinymce-react": "^5.1.1",
         "@togglecorp/fujs": "^2.1.1",
         "@togglecorp/re-map": "^0.3.0",
         "@togglecorp/toggle-form": "^2.0.4",

app/package.json

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

app/scripts/translatte/main.ts

@@ -19,11 +19,11 @@ const editorOptions: Omit<RawEditorOptions, 'selector' | 'target'> = {
     menubar: false, // https://www.tiny.cloud/docs/advanced/available-toolbar-buttons
     statusbar: false,
     paste_data_images: false,
-    plugins: ['advlist autolink code help link lists preview'],
-    toolbar: 'formatselect | bold italic superscript link | '
+    plugins: 'advlist autolink code help link lists preview',
+    toolbar: 'bold italic subscript superscript link | '
     + 'alignleft aligncenter alignright alignjustify | '
-    + 'bullist numlist outdent indent | code removeformat preview | help',
-    contextmenu: 'formats link',
+    + 'bullist numlist outdent indent | code removeformat preview fullscreen | help',
+    contextmenu: 'link',
     // https://www.tiny.cloud/docs/configure/content-filtering/#invalid_styles
     invalid_styles: { '*': 'opacity' },
 };

app/src/components/RichTextArea/index.tsx

@@ -1,8 +1,8 @@
 {
     "namespace": "exportButton",
     "strings": {
-        "exportTableButtonLabel": "Export",
-        "exportTableDownloadingButtonLabel": "Downloading... ({progress}%)",
+        "exportButtonLabel": "Export",
+        "exportDownloadingButtonLabel": "Downloading... ({progress}%)",
         "pendingExportLabel": "Downloading..."
     }
 }

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

@@ -29,11 +29,11 @@ function ExportButton(props: Props) {
 
     const exportButtonLabel = useMemo(() => {
         if (!pendingExport) {
-            return strings.exportTableButtonLabel;
+            return strings.exportButtonLabel;
         }
         if (progress) {
             return resolveToComponent(
-                strings.exportTableDownloadingButtonLabel,
+                strings.exportDownloadingButtonLabel,
                 {
                     progress: (
                         <NumberOutput
@@ -46,8 +46,8 @@ function ExportButton(props: Props) {
         }
         return strings.pendingExportLabel;
     }, [
-        strings.exportTableButtonLabel,
-        strings.exportTableDownloadingButtonLabel,
+        strings.exportButtonLabel,
+        strings.exportDownloadingButtonLabel,
         strings.pendingExportLabel,
         progress,
         pendingExport,

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

@@ -43,31 +43,36 @@ function colorSelector(item: SeverityLegendItem) {
 interface Props {
     value: LayerOptionsValue;
     onChange: React.Dispatch<React.SetStateAction<LayerOptionsValue>>;
+
+    exposureAreaControlHidden?: boolean;
 }
 
 function LayerOptions(props: Props) {
     const {
+        exposureAreaControlHidden,
         value,
         onChange,
     } = 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,
         },
         {
@@ -92,28 +97,30 @@ function LayerOptions(props: Props) {
                 withBackground
                 withInvertedView
             />
-            <div className={styles.exposedAreaInputWrapper}>
-                <Switch
-                    // FIXME: use strings
-                    label="Exposed area to tropical storm or cyclone strength wind"
-                    name="showExposedArea"
-                    value={value.showExposedArea}
-                    onChange={setFieldValue}
-                    withInvertedView
-                />
-                {value.showExposedArea && (
-                    <Legend
-                        className={styles.exposedAreaLegend}
+            {!exposureAreaControlHidden && (
+                <div className={styles.exposedAreaInputWrapper}>
+                    <Switch
                         // FIXME: use strings
-                        label="Severity:"
-                        items={severityLegendItems}
-                        keySelector={severitySelector}
-                        labelSelector={labelSelector}
-                        colorSelector={colorSelector}
-                        labelClassName={styles.legendLabel}
+                        label="Exposed area to tropical storm or cyclone strength wind"
+                        name="showExposedArea"
+                        value={value.showExposedArea}
+                        onChange={setFieldValue}
+                        withInvertedView
                     />
-                )}
-            </div>
+                    {value.showExposedArea && (
+                        <Legend
+                            className={styles.exposedAreaLegend}
+                            // FIXME: use strings
+                            label="Severity:"
+                            items={severityLegendItems}
+                            keySelector={severitySelector}
+                            labelSelector={labelSelector}
+                            colorSelector={colorSelector}
+                            labelClassName={styles.legendLabel}
+                        />
+                    )}
+                </div>
+            )}
             <Switch
                 // FIXME: use strings
                 label="Storm track"

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

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

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

@@ -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> {
@@ -99,7 +99,13 @@ export interface RiskEventDetailProps<EVENT, EXPOSURE> {
 
 type Footprint = GeoJSON.FeatureCollection<GeoJSON.Geometry, RiskLayerProperties> | undefined;
 
+// FIXME: read this from common type
+type ImminentEventSource = 'pdc' | 'wfpAdam' | 'gdacs' | 'meteoSwiss';
+
 interface Props<EVENT, EXPOSURE, KEY extends string | number> {
+    // FIXME: use props for configuration rather than
+    // passing source here
+    source: ImminentEventSource;
     events: EVENT[] | undefined;
     keySelector: (event: EVENT) => KEY;
     hazardTypeSelector: (event: EVENT) => HazardType | '' | undefined;
@@ -134,6 +140,7 @@ function RiskImminentEventMap<
         bbox,
         onActiveEventChange,
         activeEventExposurePending,
+        source,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -238,10 +245,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(
@@ -253,17 +265,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(
@@ -438,46 +477,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}
-                                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>
     );