Integrate with OSM Teams using a feature flag

src/components/filters/filters_list.js

@@ -16,6 +16,7 @@ import {
 import { BBoxPicker } from '../bbox_picker';
 import { loadingEnhancer } from '../loading_enhancer';
 import filters from '../../config/filters.json';
+import { isOsmTeamsEnabled } from '../../config';
 import { getDefaultFromDate } from '../../utils/filters';
 import type { filterType, filtersType } from './';
 
@@ -36,11 +37,13 @@ type propsType = {|
 |};
 class FiltersList extends React.PureComponent<void, propsType, *> {
   renderFilters = (f: Object, k: number) => {
+    const namesOverride =
+      isOsmTeamsEnabled && f.name === 'mapping_teams' ? 'uids' : f.name;
     const propsToSend = {
       name: f.name,
       type: f.type,
       display: f.display,
-      value: this.props.filters.get(f.name),
+      value: this.props.filters.get(namesOverride),
       placeholder: f.placeholder,
       options: f.options || [],
       onChange: this.props.handleChange,
@@ -186,7 +189,7 @@ class FiltersList extends React.PureComponent<void, propsType, *> {
           {name.endsWith('_teams') ? (
             <MappingTeamMultiSelect
               {...propsToSend}
-              name={name}
+              name={isOsmTeamsEnabled ? 'uids' : name}
               value={value}
               onChange={onChange}
               showAllToggle={f.all}

src/components/filters/multi_select.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { fromJS } from 'immutable';
 import { Creatable, Async } from 'react-select';
-import { API_URL } from '../../config';
+import { API_URL, OSM_TEAMS_API_URL, isOsmTeamsEnabled } from '../../config';
 import type { filterType } from './';
 
 export class MultiSelect extends React.PureComponent {
@@ -128,42 +128,83 @@ export class MultiSelect extends React.PureComponent {
 }
 
 export class MappingTeamMultiSelect extends MultiSelect {
-  getAsyncOptions = () => {
+  getAsyncOptions = async () => {
     if (!this.props.dataURL) return;
-    return fetch(`${API_URL}/${this.props.dataURL}/`, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: this.props.token ? `Token ${this.props.token}` : ''
-      }
-    })
-      .then(response => {
-        return response.json();
+    if (isOsmTeamsEnabled) {
+      const teams = await fetch(OSM_TEAMS_API_URL, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }).then(response => response.json());
+      const data = teams.map(team => {
+        return {
+          ...team,
+          label: `${team.name} (verified)`,
+          value: team.name
+        };
+      });
+      return { options: data };
+    } else {
+      return await fetch(`${API_URL}/${this.props.dataURL}/`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.props.token ? `Token ${this.props.token}` : ''
+        }
       })
-      .then(json => {
-        const data = json.map(d => {
-          if (d.trusted) {
-            return { ...d, label: `${d.name} (verified)`, value: d.name };
-          } else {
-            return {
-              ...d,
-              label: d.name.replace('(verified)', ''),
-              value: d.name
-            };
-          }
+        .then(response => {
+          return response.json();
+        })
+        .then(json => {
+          const data = json.map(d => {
+            if (d.trusted) {
+              return { ...d, label: `${d.name} (verified)`, value: d.name };
+            } else {
+              return {
+                ...d,
+                label: d.name.replace('(verified)', ''),
+                value: d.name
+              };
+            }
+          });
+          return { options: data };
         });
-        return { options: data };
-      });
+    }
   };
-  sendData = (allToggle: boolean, data: Array<Object>) => {
+  sendData = async (allToggle: boolean, data: Array<Object>) => {
     let name =
       this.props.name.slice(0, 4) === 'all_'
         ? this.props.name.slice(4)
         : this.props.name;
 
     name = `${allToggle ? 'all_' : ''}${name}`;
     if (data.length === 0) return this.props.onChange(name);
-    var processed = data.map(o => ({ label: o.label, value: o.value })); // remove any bogus keys
+    let processed;
+    if (isOsmTeamsEnabled) {
+      const teams_with_members = await Promise.all(
+        data.map(team =>
+          fetch(`${OSM_TEAMS_API_URL}/${team.id}`).then(async response => {
+            const json = await response.json();
+            return {
+              ...json,
+              label: team.label
+            };
+          })
+        )
+      );
+      // remove any bogus keys
+      processed = teams_with_members.map(team => {
+        return {
+          id: team.id, // need to persist this for team filter lookups
+          label: team.label,
+          value: team.members.map(member => parseInt(member.id, 10))
+        };
+      });
+    } else {
+      processed = data.map(o => ({ label: o.label, value: o.value })); // remove any bogus keys
+    }
+
     this.props.onChange(name, fromJS(processed));
   };
 }

src/config/index.js

@@ -4,6 +4,7 @@ export const isStaging = process.env.REACT_APP_STACK === 'STAGING';
 export const isProd = process.env.REACT_APP_STACK === 'PRODUCTION';
 export const isLocal = process.env.NODE_ENV === 'development';
 export const stack = process.env.REACT_APP_STACK;
+export const isOsmTeamsEnabled = false;
 export const appVersion = process.env.REACT_APP_VERSION;
 
 let url = 'https://osmcha-django-staging.tilestream.net/api/v1';
@@ -17,3 +18,4 @@ window.debug_info = () =>
     'null'} appVersion=${appVersion || 'null'} url=${url}`;
 
 export const API_URL = url;
+export const OSM_TEAMS_API_URL = 'https://dev.mapping.team/api/teams';