5) How to's

Use feature flags

Sometimes, we want to implement / merge a feature without having it visible on production yet. Here's how to do it

• Declare a flag in https://github.com/Qwant/erdapfel/blob/master/config/default_config.yml

flagName:
  enabled: false

• In the code source, surround the feature with flag tests:

const config = useConfig();
if (config.flagName.enabled) { ... }

• To enable the flag locally, set it to true in youe .env file:

TILEVIEW_flagName_enabled=true

• To enable the flag on dev / plive / prod environments, set the env var to true in the yml files of the Erdapfel CI project

• When the features becomes permanent, the flag can be cleaned up by removing the corresponding tests, the default config, and the env vars.

Change the Suggest behavior

The suggest's data is fetched and ordered in suggest.js and suggest_sources.js

Edit/add icons

There are 3 kinds of icons in Qwant Maps:

Icons displayed by Mapbox

To add new icons or edit the existing ones:

• Clone https://github.com/Qwant/qwant-basic-gl-style
• Do your adds/edits in the icons folder and merge on master
• Do a release (bump the version number then npm publish)
• Update the version number of @qwant/qwant-basic-gl-style in erdapfel/package.json

Icons from the design system

TODO

(See https://github.com/Qwant/erdapfel/pull/1209 & https://git.qwant.ninja/product/qwant/phoenix/-/blob/master/local_modules/qwant-ponents/src/index.js)

SVG icons displayed by the application

Add an icon not present in the design system:

• Add a svg file in /public/images/remix/ ("line" svg files from https://remixicon.com/ or provided by the design team)
• export this file as React component in src/components/ui/icons.js
• Note: these SVG must use the props "width" and "height" (instead of "size"), and have "fill='currentColor'" set explicitly to not appear black.

Routing

See router's doc here: https://github.com/Qwant/erdapfel/blob/master/docs/src/routing.md

Extra tips:

• Add a new route: see app_router.js > router.addRoute.
• Create links between different pages of the app: use in HTML or navigateTo("page_name") in JS.