mockup: sources catalogue [DHIS2-21453]

[BRaimbault]

Mockup for DHIS2-21453

DO NOT MERGE

Description

This mockup addresses the need to manage a growing catalogue of external data sources and configure them directly from within the app.

---

Entry point — Add Layer popover

The existing flat list is replaced by a two-section popover:

• Built-in layer types (thematic, events, facilities, boundaries, org units) appear as icon tiles at the top. These are always available and launch their own configuration dialogs as before.
• Favourites appear as a compact list below, with a thumbnail, name, and origin. A search field appears inline when the list grows long. An [+] button adds any favourite directly to the map.
• A "Browse all layer sources" link at the bottom opens the catalogue modal.

---

Layer Sources catalogue modal

A large modal that acts as a library of all available external data sources (Earth Engine, STAC, ArcGIS, WMS/TMS/XYZ, GeoJSON, org/user data, shared sources). It has three zones:

• Search bar filters cards in real time by name, description, or tag.
• Filter chips (All / ★ Favourites / Earth Engine / STAC / …) sit in a single horizontally-scrollable row with ‹ / › arrow buttons at the edges when more chips are off-screen.
• Left sidebar offers secondary filters: map type (layer/basemap), period type, date range slider, resolution, and tags — each with "Show more/less" for long lists. The sidebar hides on narrow viewports.
• Card list shows each source with a thumbnail, name, origin, description, tags, a star toggle (shared with the popover and basemap panel), and an [+ Map] button. Admins also see edit and delete icons; delete triggers a confirmation dialog before acting.

---

Add Source wizard

Triggered by [+ Add source] in the modal header. The catalogue is replaced in-place by a three-step wizard; Cancel returns to the catalogue without closing the modal.

• Step 1 — Choose type: a grouped tile grid (5 per row) covering OGC standards (WMS, WMTS, WFS, MVT, XYZ/TMS, COG), remote catalogues (STAC, Copernicus CDS), proprietary APIs (Earth Engine preset/custom, ArcGIS), file/URL (GeoJSON, COG URL), and personal/org data (upload, draw, shared-with-me). Admin-only types are labelled; non-admins see them greyed out. A "Use as: Layer / Basemap" toggle sits frozen above the scrollable grid and disables source types incompatible with the chosen mode.
• Step 2 — Configure: form fields appropriate to the chosen type (URL inputs, dataset pickers, STAC tree browser, EE asset ID, file upload, etc.).
• Step 3 — Name & style: display name, thumbnail (upload or URL), tags, and visibility scope (all users vs. only me, admin only). For personal and org data sources, a quota bar shows current usage split between existing data and the new layer, with colour-coded warning states.

[sonarqubecloud]

Quality Gate failed

Failed conditions
88 New issues
75 New Code Smells (required ≤ 0)
3 New Critical Issues (required ≤ 0)
D Reliability Rating on New Code (required ≥ A)
13 New Bugs (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

[dhis2-bot]

🚀 Deployed on https://pr-3655.maps.netlify.dhis2.org