CUSTESC-36595: Try to prioritize active zone over non-active ones

[aseure]

Problem

As part of an internal issue named CUSTESC-36595, one customer reported
us that his Cloudflare Wordpress plugin was reporting that his dashboard
was failing with the following error:

"errors.noActiveZoneSelected": "It looks like your domain {domain} is not provisioned with Cloudflare. Please continue to {link} to secure and speed up your website.",

The problem was that the customer does have two Cloudflare zones with
the same name: one being active and the other got purged.

Previous investigations

We initially tried to fix this in the Cloudflare-Wordpress plugin
itself, via cloudflare/Cloudflare-WordPress#532,
by ensuring that the zone listing endpoint /zones was requested with
proper status=active query parameter to only retrieve active zone, if
any. However, the problem is not fixed on customers' side.

Current investigation

After looking once again at their HAR files, besides the endpoint
itself, we noticed that the initiator of the call was actually coming
from the compiled and minifed JavaScript file from this
cloudflare-plugin-frontend project.

This plugin also requests this zone listing endpoint /zones but it
also seems to use the zone list, so I did not want to change the logic
too much and retrieve only the active zones. Instead, I found out the
two places where that list of zones was used and from which a single
zone was being extracted.

Fixing src/actions/zoneProvision.js

For src/actions/zoneProvision.js, it seems we pass the list of zones
from the Cloudflare API to a dependency called normalizr which
normalize based on the name field here
https://github.com/cloudflare/cloudflare-plugin-frontend/blob/master/src/constants/Schemas.js#L13-L15,
which effectively removes duplicates, which was tested locally with:

import { normalize, Schema, arrayOf } from 'normalizr';

const zones = [
 {'id': 1, 'name': 'cloudflare.com', 'status': 'purged'},
 {'id': 2, 'name': 'cloudflare.com', 'status': 'active'},
];

const zoneSchema = new Schema('zones', { idAttribute: 'name' });
const normalizedZones = normalize(zones, arrayOf(zoneSchema));

console.log(JSON.stringify(normalizedZones, '', null));

which outputs the following:

When merging two zones, found unequal data in their "id" values. Using the earlier value. 1 2
When merging two zones, found unequal data in their "status" values. Using the earlier value. purged active
{"entities":{"zones":{"cloudflare.com":{"id":1,"name":"cloudflare.com","status":"purged"}}},"result":["cloudflare.com","cloudflare.com"]}

This could indeed correlates with our problem considered that the purged
zone of the customer was indeed created before the active zone. Should
they discriminate based on their id field, the active zone would
indeed be discarded.

To prevent that issue, we are introducing a deduplicateOnActiveZones()
helper which deduplicates the list of zones whenever at least one active
zone is present. By doing so, the invocation to normalizr should now
only retain the active zone, and the following asyncZoneSetActiveZone
Redux dispatch receive that zone.

Fixing src/actions/zones.js

For src/actions/zones.js, it seems that only the first zone from the
zone list is being used, if defined. For that one, we simply added an
extra logic to attempt at extracting the first active zone first, if
any, and fallback to the original logic if no active zone is found.

[aseure]

cc @jacobbednarz if you could please review!

[william-woodhead]

should we do a falsy check here too? z1.name && z1.name === z2.name ?

[aseure]

The name field is the raw result coming from the Cloudflare API, so I assume it's properly populated to be honest. And nonetheless undefined === 'something' is falsy.

[aseure]

@jacobbednarz I don't have the rights to merge that PR.

Could you merge and release it please, so that I can give it a try in the Wordpress plugin.