Merge pull request #6227 from betagouv/main

2021-05-25-01

app/assets/stylesheets/carte.scss

@@ -1,3 +1,5 @@
+@import "colors";
+
 .areas-title {
   font-weight: bold;
   margin-top: 5px;
@@ -15,3 +17,38 @@
 .form [data-react-class='MapEditor'] [data-reach-combobox-input] {
   margin-bottom: 0;
 }
+
+.map-style-control {
+  position: absolute;
+  bottom: 4px;
+  left: 10px;
+
+  img {
+    width: 100%;
+  }
+
+  button {
+    padding: 0;
+    border: none;
+    cursor: pointer;
+
+    > div {
+      position: absolute;
+      bottom: 5px;
+      left: 5px;
+    }
+  }
+}
+
+.cadastres-selection-control {
+  position: absolute;
+  top: 135px;
+  left: 10px;
+
+  button {
+    &.on,
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+}

app/assets/stylesheets/forms.scss

@@ -163,7 +163,7 @@
     }
   }
 
-  input[type=text]:not([data-address='true']),
+  input[type=text],
   input[type=email],
   input[type=password],
   input[type=date],
@@ -178,6 +178,10 @@
     &.small-margin {
       margin-bottom: $default-spacer;
     }
+
+    &.no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .add-row {
@@ -475,7 +479,7 @@
 }
 
 [data-react-class]:not([data-react-class="ComboMultipleDropdownList"]) {
-  [data-reach-combobox-input] {
+  [data-reach-combobox-input]:not(.no-margin) {
     margin-bottom: $default-fields-spacer;
   }
 }

app/controllers/champs/carte_controller.rb

@@ -4,29 +4,26 @@ class Champs::CarteController < ApplicationController
   def index
     @selector = ".carte-#{params[:champ_id]}"
     @champ = policy_scope(Champ).find(params[:champ_id])
-    @update_cadastres = params[:cadastres]
+    @focus = params[:focus].present?
-
-    if @champ.cadastres? && @update_cadastres
-      @champ.geo_areas.cadastres.destroy_all
-      @champ.geo_areas += GeoArea.from_feature_collection(cadastres_features_collection(@champ.to_feature_collection))
-      @champ.save!
-    end
-  rescue APICarto::API::ResourceNotFound
-    flash.alert = 'Les données cartographiques sont temporairement indisponibles. Réessayez dans un instant.'
-    response.status = 503
   end
 
   def create
     champ = policy_scope(Champ).find(params[:champ_id])
-    geo_area = champ.geo_areas.selections_utilisateur.new
+    geo_area = if params_source == GeoArea.sources.fetch(:cadastre)
-    save_feature!(geo_area, params_feature)
+      champ.geo_areas.find_by("properties->>'id' = :id", id: params_feature[:properties][:id])
+    end
+
+    if geo_area.nil?
+      geo_area = champ.geo_areas.build(source: params_source, properties: {})
+      save_feature!(geo_area, params_feature)
+    end
 
     render json: { feature: geo_area.to_feature }, status: :created
   end
 
   def update
     champ = policy_scope(Champ).find(params[:champ_id])
-    geo_area = champ.geo_areas.selections_utilisateur.find(params[:id])
+    geo_area = champ.geo_areas.find(params[:id])
     save_feature!(geo_area, params_feature)
 
     head :no_content
@@ -34,66 +31,42 @@ class Champs::CarteController < ApplicationController
 
   def destroy
     champ = policy_scope(Champ).find(params[:champ_id])
-    champ.geo_areas.selections_utilisateur.find(params[:id]).destroy!
+    champ.geo_areas.find(params[:id]).destroy!
 
     head :no_content
   end
 
-  def import
-    champ = policy_scope(Champ).find(params[:champ_id])
-    params_features.each do |feature|
-      geo_area = champ.geo_areas.selections_utilisateur.new
-      save_feature!(geo_area, feature)
-    end
-
-    render json: champ.to_feature_collection, status: :created
-  end
-
   private
 
-  def params_feature
+  def params_source
-    params[:feature]
+    params[:source]
   end
 
-  def params_features
+  def params_feature
-    params[:features]
+    params.require(:feature).permit(properties: [
+      :filename,
+      :description,
+      :arpente,
+      :commune,
+      :contenance,
+      :created,
+      :id,
+      :numero,
+      :prefixe,
+      :section,
+      :updated
+    ]).tap do |feature|
+      feature[:geometry] = params[:feature][:geometry]
+    end
   end
 
   def save_feature!(geo_area, feature)
     if feature[:geometry]
       geo_area.geometry = feature[:geometry]
     end
-    if feature[:properties] && feature[:properties][:description]
+    if feature[:properties]
-      geo_area.description = feature[:properties][:description]
+      geo_area.properties.merge!(feature[:properties])
     end
     geo_area.save!
   end
-
-  def cadastres_features_collection(feature_collection)
-    coordinates = feature_collection[:features].filter do |feature|
-      feature[:properties][:source] == GeoArea.sources.fetch(:selection_utilisateur) && feature[:geometry] && feature[:geometry]['type'] == 'Polygon'
-    end.map do |feature|
-      feature[:geometry]['coordinates'][0].map { |(lng, lat)| { 'lng' => lng, 'lat' => lat } }
-    end
-
-    if coordinates.present?
-      cadastres = APICartoService.generate_cadastre(coordinates)
-
-      {
-        type: 'FeatureCollection',
-        features: cadastres.map do |cadastre|
-          {
-            type: 'Feature',
-            geometry: cadastre.delete(:geometry),
-            properties: cadastre.merge(source: GeoArea.sources.fetch(:cadastre))
-          }
-        end
-      }
-    else
-      {
-        type: 'FeatureCollection',
-        features: []
-      }
-    end
-  end
 end

app/graphql/schema.graphql

@@ -1467,18 +1467,21 @@ type PageInfo {
 }
 
 type ParcelleCadastrale implements GeoArea {
-  codeArr: String!
+  codeArr: String! @deprecated(reason: "Utilisez le champ `prefixe` à la place.")
-  codeCom: String!
+  codeCom: String! @deprecated(reason: "Utilisez le champ `commune` à la place.")
-  codeDep: String!
+  codeDep: String! @deprecated(reason: "Utilisez le champ `commune` à la place.")
-  feuille: Int!
+  commune: String!
+  feuille: Int! @deprecated(reason: "L‘information n‘est plus disponible.")
   geometry: GeoJSON!
   id: ID!
-  nomCom: String!
+  nomCom: String! @deprecated(reason: "Utilisez le champ `commune` à la place.")
   numero: String!
+  prefixe: String!
   section: String!
   source: GeoAreaSource!
-  surfaceIntersection: Float!
+  surface: String!
-  surfaceParcelle: Float!
+  surfaceIntersection: Float! @deprecated(reason: "L‘information n‘est plus disponible.")
+  surfaceParcelle: Float! @deprecated(reason: "Utilisez le champ `surface` à la place.")
 }
 
 type PersonneMorale implements Demandeur {
@@ -1587,6 +1590,7 @@ type Revision {
 }
 
 type SelectionUtilisateur implements GeoArea {
+  description: String!
   geometry: GeoJSON!
   id: ID!
   source: GeoAreaSource!

app/graphql/types/geo_areas/parcelle_cadastrale_type.rb

@@ -2,14 +2,18 @@ module Types::GeoAreas
   class ParcelleCadastraleType < Types::BaseObject
     implements Types::GeoAreaType
 
-    field :surface_intersection, Float, null: false
-    field :surface_parcelle, Float, null: false
     field :numero, String, null: false
-    field :feuille, Int, null: false
     field :section, String, null: false
-    field :code_dep, String, null: false
+    field :surface, String, null: false
-    field :nom_com, String, null: false
+    field :prefixe, String, null: false
-    field :code_com, String, null: false
+    field :commune, String, null: false
-    field :code_arr, String, null: false
+
+    field :code_dep, String, null: false, deprecation_reason: 'Utilisez le champ `commune` à la place.'
+    field :nom_com, String, null: false, deprecation_reason: 'Utilisez le champ `commune` à la place.'
+    field :code_com, String, null: false, deprecation_reason: 'Utilisez le champ `commune` à la place.'
+    field :code_arr, String, null: false, deprecation_reason: 'Utilisez le champ `prefixe` à la place.'
+    field :feuille, Int, null: false, deprecation_reason: 'L‘information n‘est plus disponible.'
+    field :surface_intersection, Float, null: false, deprecation_reason: 'L‘information n‘est plus disponible.'
+    field :surface_parcelle, Float, null: false, deprecation_reason: 'Utilisez le champ `surface` à la place.'
   end
 end

app/graphql/types/geo_areas/selection_utilisateur_type.rb

@@ -1,5 +1,7 @@
 module Types::GeoAreas
   class SelectionUtilisateurType < Types::BaseObject
     implements Types::GeoAreaType
+
+    field :description, String, null: false
   end
 end

app/helpers/champ_helper.rb

@@ -36,7 +36,7 @@ module ChampHelper
     case geo_area.source
     when GeoArea.sources.fetch(:cadastre)
       capture do
-        concat "Parcelle n° #{geo_area.numero} - Feuille #{geo_area.code_arr} #{geo_area.section} #{geo_area.feuille} - #{geo_area.surface_parcelle.round} m"
+        concat "Parcelle n° #{geo_area.numero} - Feuille #{geo_area.prefixe} #{geo_area.section} - #{geo_area.surface.round} m"
         concat tag.sup("2")
       end
     when GeoArea.sources.fetch(:selection_utilisateur)

app/javascript/components/ComboAdresseSearch.jsx

@@ -11,13 +11,15 @@ function ComboAdresseSearch({
   hiddenFieldId,
   onChange,
   transformResult = ({ properties: { label } }) => [label, label],
-  allowInputValues = true
+  allowInputValues = true,
+  className
 }) {
   const transformResults = useCallback((_, { features }) => features);
 
   return (
     <QueryClientProvider client={queryClient}>
       <ComboSearch
+        className={className}
         placeholder={placeholder}
         required={mandatory}
         hiddenFieldId={hiddenFieldId}
@@ -33,6 +35,7 @@ function ComboAdresseSearch({
 }
 
 ComboAdresseSearch.propTypes = {
+  className: PropTypes.string,
   placeholder: PropTypes.string,
   mandatory: PropTypes.bool,
   hiddenFieldId: PropTypes.string,

app/javascript/components/ComboSearch.jsx

@@ -25,7 +25,8 @@ function ComboSearch({
   minimumInputLength,
   transformResult,
   allowInputValues = false,
-  transformResults = defaultTransformResults
+  transformResults = defaultTransformResults,
+  className
 }) {
   const label = scope;
   const hiddenValueField = useMemo(
@@ -93,6 +94,7 @@ function ComboSearch({
   return (
     <Combobox aria-label={label} onSelect={handleOnSelect}>
       <ComboboxInput
+        className={className}
         placeholder={placeholder}
         onChange={handleOnChange}
         value={value}
@@ -134,7 +136,8 @@ ComboSearch.propTypes = {
   transformResult: PropTypes.func,
   transformResults: PropTypes.func,
   allowInputValues: PropTypes.bool,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  className: PropTypes.string
 };
 
 export default ComboSearch;

app/javascript/components/MapEditor/index.jsx

@@ -1,257 +1,47 @@
-import React, {
+import React, { useState } from 'react';
-  useState,
-  useCallback,
-  useRef,
-  useMemo,
-  useEffect
-} from 'react';
 import PropTypes from 'prop-types';
-import mapboxgl from 'mapbox-gl';
+import ReactMapboxGl, { ZoomControl } from 'react-mapbox-gl';
-import { GeoJSONLayer, ZoomControl } from 'react-mapbox-gl';
 import DrawControl from 'react-mapbox-gl-draw';
+import { MapIcon } from '@heroicons/react/outline';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 
-import { getJSON, ajax, fire } from '@utils';
+import MapStyleControl, { useMapStyle } from '../shared/mapbox/MapStyleControl';
-
-import Mapbox from '../shared/mapbox/Mapbox';
-import { getMapStyle } from '../shared/mapbox/styles';
-import SwitchMapStyle from '../shared/mapbox/SwitchMapStyle';
 import { FlashMessage } from '../shared/FlashMessage';
 
 import ComboAdresseSearch from '../ComboAdresseSearch';
-import {
+import { useMapboxEditor } from './useMapboxEditor';
-  polygonCadastresFill,
-  polygonCadastresLine,
-  readGeoFile
-} from './utils';
-import {
-  noop,
-  filterFeatureCollection,
-  fitBounds,
-  generateId,
-  useEvent,
-  findFeature
-} from '../shared/mapbox/utils';
 
-function MapEditor({ featureCollection, url, preview, options }) {
+const Mapbox = ReactMapboxGl({});
-  const drawControl = useRef(null);
-  const [currentMap, setCurrentMap] = useState(null);
 
-  const [errorMessage, setErrorMessage] = useState();
+function MapEditor({ featureCollection, url, options, preview }) {
-  const [style, setStyle] = useState('ortho');
+  const [cadastreEnabled, setCadastreEnabled] = useState(false);
   const [coords, setCoords] = useState([1.7, 46.9]);
   const [zoom, setZoom] = useState([5]);
-  const [bbox, setBbox] = useState(featureCollection.bbox);
+  const {
-  const [importInputs, setImportInputs] = useState([]);
+    isSupported,
-  const [cadastresFeatureCollection, setCadastresFeatureCollection] = useState(
+    error,
-    filterFeatureCollection(featureCollection, 'cadastre')
+    inputs,
-  );
+    onLoad,
-  const mapStyle = useMemo(() => getMapStyle(style, options.layers), [
+    onStyleChange,
-    style,
+    onFileChange,
-    options
+    drawRef,
-  ]);
+    createFeatures,
-  const hasCadastres = useMemo(() => options.layers.includes('cadastres'));
+    updateFeatures,
+    deleteFeatures,
+    addInputFile,
+    removeInputFile
+  } = useMapboxEditor(featureCollection, {
+    url,
+    enabled: !preview,
+    cadastreEnabled
+  });
+  const [style, setStyle] = useMapStyle(options.layers, {
+    onStyleChange,
+    cadastreEnabled
+  });
 
-  useEffect(() => {
+  if (!isSupported) {
-    const timer = setTimeout(() => setErrorMessage(null), 5000);
-    return () => clearTimeout(timer);
-  }, [errorMessage]);
-
-  const translations = [
-    ['.mapbox-gl-draw_line', 'Tracer une ligne'],
-    ['.mapbox-gl-draw_polygon', 'Dessiner un polygone'],
-    ['.mapbox-gl-draw_point', 'Ajouter un point'],
-    ['.mapbox-gl-draw_trash', 'Supprimer']
-  ];
-  for (const [selector, translation] of translations) {
-    const element = document.querySelector(selector);
-    if (element) {
-      element.setAttribute('title', translation);
-    }
-  }
-
-  const onFeatureFocus = useCallback(
-    ({ detail }) => {
-      const { id } = detail;
-      const featureCollection = drawControl.current.draw.getAll();
-      const feature = findFeature(featureCollection, id);
-      if (feature) {
-        fitBounds(currentMap, feature);
-      }
-    },
-    [currentMap, drawControl.current]
-  );
-
-  const onFeatureUpdate = useCallback(
-    async ({ detail }) => {
-      const { id, properties } = detail;
-      const featureCollection = drawControl.current.draw.getAll();
-      const feature = findFeature(featureCollection, id);
-
-      if (feature) {
-        getJSON(`${url}/${id}`, { feature: { properties } }, 'patch');
-      }
-    },
-    [url, drawControl.current]
-  );
-
-  const updateFeaturesList = useCallback(
-    async (features) => {
-      const cadastres = features.find(
-        ({ geometry }) => geometry.type === 'Polygon'
-      );
-      await ajax({
-        url,
-        type: 'get',
-        data: cadastres ? 'cadastres=update' : ''
-      });
-      fire(document, 'ds:page:update');
-    },
-    [url]
-  );
-
-  const onCadastresUpdate = useCallback(({ detail }) => {
-    setCadastresFeatureCollection(
-      filterFeatureCollection(detail.featureCollection, 'cadastre')
-    );
-  }, []);
-
-  useEvent('map:feature:focus', onFeatureFocus);
-  useEvent('map:feature:update', onFeatureUpdate);
-  useEvent('cadastres:update', onCadastresUpdate);
-
-  function setFeatureId(lid, feature) {
-    const draw = drawControl.current.draw;
-    draw.setFeatureProperty(lid, 'id', feature.properties.id);
-  }
-
-  function updateImportInputs(inputs, inputId) {
-    const updatedInputs = inputs.filter((input) => input.id !== inputId);
-    setImportInputs(updatedInputs);
-  }
-
-  async function onDrawCreate({ features }) {
-    try {
-      for (const feature of features) {
-        const data = await getJSON(url, { feature }, 'post');
-        setFeatureId(feature.id, data.feature);
-      }
-
-      updateFeaturesList(features);
-    } catch {
-      setErrorMessage('Le polygone dessiné n’est pas valide.');
-    }
-  }
-
-  async function onDrawUpdate({ features }) {
-    try {
-      for (const feature of features) {
-        const { id } = feature.properties;
-        if (id) {
-          await getJSON(`${url}/${id}`, { feature }, 'patch');
-        } else {
-          const data = await getJSON(url, { feature }, 'post');
-          setFeatureId(feature.id, data.feature);
-        }
-      }
-
-      updateFeaturesList(features);
-    } catch {
-      setErrorMessage('Le polygone dessiné n’est pas valide.');
-    }
-  }
-
-  async function onDrawDelete({ features }) {
-    for (const feature of features) {
-      const { id } = feature.properties;
-      await getJSON(`${url}/${id}`, null, 'delete');
-    }
-
-    updateFeaturesList(features);
-  }
-
-  function onMapLoad(map) {
-    setCurrentMap(map);
-
-    drawControl.current.draw.set(
-      filterFeatureCollection(featureCollection, 'selection_utilisateur')
-    );
-  }
-
-  const onFileImport = async (e, inputId) => {
-    try {
-      const featureCollection = await readGeoFile(e.target.files[0]);
-      const resultFeatureCollection = await getJSON(
-        `${url}/import`,
-        featureCollection,
-        'post'
-      );
-      let inputs = [...importInputs];
-      const setInputs = inputs.map((input) => {
-        if (input.id === inputId) {
-          input.disabled = true;
-          input.hasValue = true;
-          resultFeatureCollection.features.forEach((resultFeature) => {
-            featureCollection.features.forEach((feature) => {
-              if (
-                JSON.stringify(resultFeature.geometry) ===
-                JSON.stringify(feature.geometry)
-              ) {
-                input.featureIds.push(resultFeature.properties.id);
-              }
-            });
-          });
-        }
-        return input;
-      });
-
-      drawControl.current.draw.set(
-        filterFeatureCollection(
-          resultFeatureCollection,
-          'selection_utilisateur'
-        )
-      );
-
-      updateFeaturesList(resultFeatureCollection.features);
-      setImportInputs(setInputs);
-      setBbox(resultFeatureCollection.bbox);
-    } catch {
-      setErrorMessage('Le fichier importé contient des polygones invalides.');
-    }
-  };
-
-  const addInputFile = (e) => {
-    e.preventDefault();
-    let inputs = [...importInputs];
-    inputs.push({
-      id: generateId(),
-      disabled: false,
-      featureIds: [],
-      hasValue: false
-    });
-    setImportInputs(inputs);
-  };
-
-  const removeInputFile = async (e, inputId) => {
-    e.preventDefault();
-    const draw = drawControl.current.draw;
-    const featureCollection = draw.getAll();
-    let inputs = [...importInputs];
-    const inputToRemove = inputs.find((input) => input.id === inputId);
-
-    for (const feature of featureCollection.features) {
-      if (inputToRemove.featureIds.includes(feature.properties.id)) {
-        const featureToRemove = draw.get(feature.id);
-        await getJSON(`${url}/${feature.properties.id}`, null, 'delete');
-        draw.delete(feature.id).getAll();
-        updateFeaturesList([featureToRemove]);
-      }
-    }
-    updateImportInputs(inputs, inputId);
-  };
-
-  if (!mapboxgl.supported()) {
     return (
       <p>
         Nous ne pouvons pas afficher notre éditeur de carte car il est
@@ -263,9 +53,7 @@ function MapEditor({ featureCollection, url, preview, options }) {
 
   return (
     <>
-      {errorMessage && (
+      {error && <FlashMessage message={error} level="alert" fixed={true} />}
-        <FlashMessage message={errorMessage} level="alert" fixed={true} />
-      )}
       <div>
         <p style={{ marginBottom: '20px' }}>
           Besoin d&apos;aide ?&nbsp;
@@ -278,12 +66,12 @@ function MapEditor({ featureCollection, url, preview, options }) {
           </a>
         </p>
       </div>
-      <div className="file-import" style={{ marginBottom: '20px' }}>
+      <div className="file-import" style={{ marginBottom: '10px' }}>
         <button className="button send primary" onClick={addInputFile}>
           Ajouter un fichier GPX ou KML
         </button>
         <div>
-          {importInputs.map((input) => (
+          {inputs.map((input) => (
             <div key={input.id}>
               <input
                 title="Choisir un fichier gpx ou kml"
@@ -292,7 +80,7 @@ function MapEditor({ featureCollection, url, preview, options }) {
                 type="file"
                 accept=".gpx, .kml"
                 disabled={input.disabled}
-                onChange={(e) => onFileImport(e, input.id)}
+                onChange={(e) => onFileChange(e, input.id)}
               />
               {input.hasValue && (
                 <span
@@ -310,10 +98,11 @@ function MapEditor({ featureCollection, url, preview, options }) {
       </div>
       <div
         style={{
-          marginBottom: '50px'
+          marginBottom: '10px'
         }}
       >
         <ComboAdresseSearch
+          className="no-margin"
           placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
           allowInputValues={false}
           onChange={(_, { geometry: { coordinates } }) => {
@@ -323,38 +112,43 @@ function MapEditor({ featureCollection, url, preview, options }) {
         />
       </div>
       <Mapbox
-        onStyleLoad={(map) => onMapLoad(map)}
+        onStyleLoad={(map) => onLoad(map)}
-        fitBounds={bbox}
-        fitBoundsOptions={{ padding: 100 }}
         center={coords}
         zoom={zoom}
-        style={mapStyle}
+        style={style}
-        containerStyle={{
+        containerStyle={{ height: '500px' }}
-          height: '500px'
-        }}
       >
-        {hasCadastres ? (
+        {!cadastreEnabled && (
-          <GeoJSONLayer
+          <DrawControl
-            data={cadastresFeatureCollection}
+            ref={drawRef}
-            fillPaint={polygonCadastresFill}
+            onDrawCreate={createFeatures}
-            linePaint={polygonCadastresLine}
+            onDrawUpdate={updateFeatures}
+            onDrawDelete={deleteFeatures}
+            displayControlsDefault={false}
+            controls={{
+              point: true,
+              line_string: true,
+              polygon: true,
+              trash: true
+            }}
           />
-        ) : null}
+        )}
-        <DrawControl
+        <MapStyleControl style={style.id} setStyle={setStyle} />
-          ref={drawControl}
-          onDrawCreate={preview ? noop : onDrawCreate}
-          onDrawUpdate={preview ? noop : onDrawUpdate}
-          onDrawDelete={preview ? noop : onDrawDelete}
-          displayControlsDefault={false}
-          controls={{
-            point: true,
-            line_string: true,
-            polygon: true,
-            trash: true
-          }}
-        />
-        <SwitchMapStyle style={style} setStyle={setStyle} ign={options.ign} />
         <ZoomControl />
+        {options.layers.includes('cadastres') && (
+          <div className="cadastres-selection-control mapboxgl-ctrl-group">
+            <button
+              type="button"
+              onClick={() =>
+                setCadastreEnabled((cadastreEnabled) => !cadastreEnabled)
+              }
+              title="Sélectionner les parcelles cadastrales"
+              className={cadastreEnabled ? 'on' : ''}
+            >
+              <MapIcon className="icon-size" />
+            </button>
+          </div>
+        )}
       </Mapbox>
     </>
   );
@@ -363,15 +157,11 @@ function MapEditor({ featureCollection, url, preview, options }) {
 MapEditor.propTypes = {
   featureCollection: PropTypes.shape({
     bbox: PropTypes.array,
-    features: PropTypes.array,
+    features: PropTypes.array
-    id: PropTypes.number
   }),
   url: PropTypes.string,
   preview: PropTypes.bool,
-  options: PropTypes.shape({
+  options: PropTypes.shape({ layers: PropTypes.array })
-    layers: PropTypes.array,
-    ign: PropTypes.bool
-  })
 };
 
 export default MapEditor;

app/javascript/components/MapEditor/readGeoFile.js

@@ -1,17 +1,28 @@
 import { gpx, kml } from '@tmcw/togeojson/dist/togeojson.es.js';
+import { generateId } from '../shared/mapbox/utils';
 
-export const polygonCadastresFill = {
+export function readGeoFile(file) {
-  'fill-color': '#EC3323',
+  const isGpxFile = file.name.includes('.gpx');
-  'fill-opacity': 0.3
+  const reader = new FileReader();
-};
 
-export const polygonCadastresLine = {
+  return new Promise((resolve) => {
-  'line-color': 'rgba(255, 0, 0, 1)',
+    reader.onload = (event) => {
-  'line-width': 4,
+      const xml = new DOMParser().parseFromString(
-  'line-dasharray': [1, 1]
+        event.target.result,
-};
+        'text/xml'
+      );
+      const featureCollection = normalizeFeatureCollection(
+        isGpxFile ? gpx(xml) : kml(xml),
+        file.name
+      );
 
-export function normalizeFeatureCollection(featureCollection) {
+      resolve(featureCollection);
+    };
+    reader.readAsText(file, 'UTF-8');
+  });
+}
+
+function normalizeFeatureCollection(featureCollection, filename) {
   const features = [];
   for (const feature of featureCollection.features) {
     switch (feature.geometry.type) {
@@ -65,26 +76,13 @@ export function normalizeFeatureCollection(featureCollection) {
     }
   }
 
-  featureCollection.features = features;
+  featureCollection.filename = `${generateId()}-${filename}`;
+  featureCollection.features = features.map((feature) => ({
+    ...feature,
+    properties: {
+      ...feature.properties,
+      filename: featureCollection.filename
+    }
+  }));
   return featureCollection;
 }
-
-export function readGeoFile(file) {
-  const isGpxFile = file.name.includes('.gpx');
-  const reader = new FileReader();
-
-  return new Promise((resolve) => {
-    reader.onload = (event) => {
-      const xml = new DOMParser().parseFromString(
-        event.target.result,
-        'text/xml'
-      );
-      const featureCollection = normalizeFeatureCollection(
-        isGpxFile ? gpx(xml) : kml(xml)
-      );
-
-      resolve(featureCollection);
-    };
-    reader.readAsText(file, 'UTF-8');
-  });
-}

app/javascript/components/MapEditor/useMapboxEditor.js

@@ -0,0 +1,553 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import mapboxgl from 'mapbox-gl';
+import { getJSON, ajax, fire } from '@utils';
+
+import { readGeoFile } from './readGeoFile';
+import {
+  filterFeatureCollection,
+  generateId,
+  findFeature,
+  getBounds,
+  defer
+} from '../shared/mapbox/utils';
+
+const SOURCE_SELECTION_UTILISATEUR = 'selection_utilisateur';
+const SOURCE_CADASTRE = 'cadastre';
+
+export function useMapboxEditor(
+  featureCollection,
+  { url, enabled = true, cadastreEnabled = true }
+) {
+  const [isLoaded, setLoaded] = useState(false);
+  const mapRef = useRef();
+  const drawRef = useRef();
+  const loadedRef = useRef(defer());
+  const selectedCadastresRef = useRef(() => new Set());
+  const isSupported = useMemo(() => mapboxgl.supported());
+
+  useEffect(() => {
+    const translations = [
+      ['.mapbox-gl-draw_line', 'Tracer une ligne'],
+      ['.mapbox-gl-draw_polygon', 'Dessiner un polygone'],
+      ['.mapbox-gl-draw_point', 'Ajouter un point'],
+      ['.mapbox-gl-draw_trash', 'Supprimer']
+    ];
+    for (const [selector, translation] of translations) {
+      const element = document.querySelector(selector);
+      if (element) {
+        element.setAttribute('title', translation);
+      }
+    }
+  }, [isLoaded]);
+
+  const addEventListener = useCallback((eventName, target, callback) => {
+    loadedRef.current.promise.then(() => {
+      mapRef.current.on(eventName, target, callback);
+    });
+    return () => {
+      if (mapRef.current) {
+        mapRef.current.off(eventName, target, callback);
+      }
+    };
+  }, []);
+
+  const highlightFeature = useCallback((cid, highlight) => {
+    if (highlight) {
+      selectedCadastresRef.current.add(cid);
+    } else {
+      selectedCadastresRef.current.delete(cid);
+    }
+    if (selectedCadastresRef.current.size == 0) {
+      mapRef.current.setFilter('parcelle-highlighted', ['in', 'id', '']);
+    } else {
+      mapRef.current.setFilter('parcelle-highlighted', [
+        'in',
+        'id',
+        ...selectedCadastresRef.current
+      ]);
+    }
+  }, []);
+
+  const fitBounds = useCallback((bbox) => {
+    mapRef.current.fitBounds(bbox, { padding: 100 });
+  }, []);
+
+  const hoverFeature = useCallback((feature, hover) => {
+    if (!selectedCadastresRef.current.has(feature.properties.id)) {
+      mapRef.current.setFeatureState(
+        {
+          source: 'cadastre',
+          sourceLayer: 'parcelles',
+          id: feature.id
+        },
+        { hover }
+      );
+    }
+  }, []);
+
+  const addFeatures = useCallback((features, external) => {
+    for (const feature of features) {
+      if (feature.lid) {
+        drawRef.current?.draw.setFeatureProperty(
+          feature.lid,
+          'id',
+          feature.properties.id
+        );
+        delete feature.lid;
+      }
+      if (external) {
+        if (feature.properties.source == SOURCE_SELECTION_UTILISATEUR) {
+          drawRef.current?.draw.add({ id: feature.properties.id, ...feature });
+        } else {
+          highlightFeature(feature.properties.cid, true);
+        }
+      }
+    }
+  }, []);
+
+  const removeFeatures = useCallback((features, external) => {
+    if (external) {
+      for (const feature of features) {
+        if (feature.properties.source == SOURCE_SELECTION_UTILISATEUR) {
+          drawRef.current?.draw.delete(feature.id);
+        } else {
+          highlightFeature(feature.properties.cid, false);
+        }
+      }
+    }
+  }, []);
+
+  const onLoad = useCallback(
+    (map) => {
+      if (!mapRef.current) {
+        mapRef.current = map;
+        mapRef.current.fitBounds(props.featureCollection.bbox, {
+          padding: 100
+        });
+        onStyleChange();
+        setLoaded(true);
+        loadedRef.current.resolve();
+      }
+    },
+    [featureCollection]
+  );
+
+  const addEventListeners = useCallback((events) => {
+    const unsubscribe = Object.entries(
+      events
+    ).map(([eventName, [target, callback]]) =>
+      addEventListener(eventName, target, callback)
+    );
+    return () => unsubscribe.map((unsubscribe) => unsubscribe());
+  }, []);
+
+  const {
+    createFeatures,
+    updateFeatures,
+    deleteFeatures,
+    ...props
+  } = useFeatureCollection(featureCollection, {
+    url,
+    enabled: isSupported && enabled,
+    addFeatures,
+    removeFeatures
+  });
+
+  const onStyleChange = useCallback(() => {
+    if (mapRef.current) {
+      const featureCollection = props.featureCollection;
+      if (!cadastreEnabled) {
+        drawRef.current?.draw.set(
+          filterFeatureCollection(
+            featureCollection,
+            SOURCE_SELECTION_UTILISATEUR
+          )
+        );
+      }
+      selectedCadastresRef.current = new Set(
+        filterFeatureCollection(
+          featureCollection,
+          SOURCE_CADASTRE
+        ).features.map(({ properties }) => properties.cid)
+      );
+      if (selectedCadastresRef.current.size > 0) {
+        mapRef.current.setFilter('parcelle-highlighted', [
+          'in',
+          'id',
+          ...selectedCadastresRef.current
+        ]);
+      }
+    }
+  }, [props.featureCollection, cadastreEnabled]);
+
+  useExternalEvents(props.featureCollection, {
+    fitBounds,
+    createFeatures,
+    updateFeatures,
+    deleteFeatures
+  });
+  useCadastres(props.featureCollection, {
+    addEventListeners,
+    hoverFeature,
+    createFeatures,
+    deleteFeatures,
+    enabled: cadastreEnabled
+  });
+
+  return {
+    isSupported,
+    onLoad,
+    onStyleChange,
+    drawRef,
+    createFeatures,
+    updateFeatures,
+    deleteFeatures,
+    ...props,
+    ...useImportFiles(props.featureCollection, {
+      createFeatures,
+      deleteFeatures
+    })
+  };
+}
+
+function useFeatureCollection(
+  initialFeatureCollection,
+  { url, addFeatures, removeFeatures, enabled = true }
+) {
+  const [error, onError] = useError();
+  const [featureCollection, setFeatureCollection] = useState(
+    initialFeatureCollection
+  );
+  const updateFeatureCollection = useCallback(
+    (callback) => {
+      setFeatureCollection(({ features }) => ({
+        type: 'FeatureCollection',
+        features: callback(features)
+      }));
+      ajax({ url, type: 'GET' })
+        .then(() => fire(document, 'ds:page:update'))
+        .catch(() => {});
+    },
+    [setFeatureCollection]
+  );
+
+  const createFeatures = useCallback(
+    async ({ features, source = SOURCE_SELECTION_UTILISATEUR, external }) => {
+      if (!enabled) {
+        return;
+      }
+      try {
+        const newFeatures = [];
+        for (const feature of features) {
+          const data = await getJSON(url, { feature, source }, 'post');
+          if (data) {
+            if (source == SOURCE_SELECTION_UTILISATEUR) {
+              data.feature.lid = feature.id;
+            }
+            newFeatures.push(data.feature);
+          }
+        }
+        addFeatures(newFeatures, external);
+        updateFeatureCollection(
+          (features) => [...features, ...newFeatures],
+          external
+        );
+      } catch (error) {
+        console.error(error);
+        onError('Le polygone dessiné n’est pas valide.');
+      }
+    },
+    [enabled, url, updateFeatureCollection, addFeatures]
+  );
+
+  const updateFeatures = useCallback(
+    async ({ features, source = SOURCE_SELECTION_UTILISATEUR, external }) => {
+      if (!enabled) {
+        return;
+      }
+      try {
+        const newFeatures = [];
+        for (const feature of features) {
+          const { id } = feature.properties;
+          if (id) {
+            await getJSON(`${url}/${id}`, { feature }, 'patch');
+          } else {
+            const data = await getJSON(url, { feature, source }, 'post');
+            if (data) {
+              if (source == SOURCE_SELECTION_UTILISATEUR) {
+                data.feature.lid = feature.id;
+              }
+              newFeatures.push(data.feature);
+            }
+          }
+        }
+        if (newFeatures.length > 0) {
+          addFeatures(newFeatures, external);
+          updateFeatureCollection((features) => [...features, ...newFeatures]);
+        }
+      } catch (error) {
+        console.error(error);
+        onError('Le polygone dessiné n’est pas valide.');
+      }
+    },
+    [enabled, url, updateFeatureCollection, addFeatures]
+  );
+
+  const deleteFeatures = useCallback(
+    async ({ features, external }) => {
+      if (!enabled) {
+        return;
+      }
+      try {
+        const deletedFeatures = [];
+        for (const feature of features) {
+          const { id } = feature.properties;
+          await getJSON(`${url}/${id}`, null, 'delete');
+          deletedFeatures.push(feature);
+        }
+        removeFeatures(deletedFeatures, external);
+        const deletedFeatureIds = deletedFeatures.map(
+          ({ properties }) => properties.id
+        );
+        updateFeatureCollection(
+          (features) =>
+            features.filter(
+              ({ properties }) => !deletedFeatureIds.includes(properties.id)
+            ),
+          external
+        );
+      } catch (error) {
+        console.error(error);
+        onError('Le polygone n’a pas pu être supprimé.');
+      }
+    },
+    [enabled, url, updateFeatureCollection, removeFeatures]
+  );
+
+  return {
+    featureCollection,
+    createFeatures,
+    updateFeatures,
+    deleteFeatures,
+    error
+  };
+}
+
+function useImportFiles(featureCollection, { createFeatures, deleteFeatures }) {
+  const [inputs, setInputs] = useState([]);
+  const addInput = useCallback(
+    (input) => {
+      setInputs((inputs) => [...inputs, input]);
+    },
+    [setInputs]
+  );
+  const removeInput = useCallback(
+    (inputId) => {
+      setInputs((inputs) => inputs.filter((input) => input.id !== inputId));
+    },
+    [setInputs]
+  );
+
+  const onFileChange = useCallback(
+    async (event, inputId) => {
+      const { features, filename } = await readGeoFile(event.target.files[0]);
+      createFeatures({ features, external: true });
+      setInputs((inputs) => {
+        return inputs.map((input) => {
+          if (input.id === inputId) {
+            return { ...input, disabled: true, hasValue: true, filename };
+          }
+          return input;
+        });
+      });
+    },
+    [setInputs, createFeatures, featureCollection]
+  );
+
+  const addInputFile = useCallback(
+    (event) => {
+      event.preventDefault();
+      addInput({
+        id: generateId(),
+        disabled: false,
+        hasValue: false,
+        filename: ''
+      });
+    },
+    [addInput]
+  );
+
+  const removeInputFile = useCallback(
+    (event, inputId) => {
+      event.preventDefault();
+      const { filename } = inputs.find((input) => input.id === inputId);
+      const features = featureCollection.features.filter(
+        (feature) => feature.properties.filename == filename
+      );
+      deleteFeatures({ features, external: true });
+      removeInput(inputId);
+    },
+    [removeInput, deleteFeatures, featureCollection]
+  );
+
+  return {
+    inputs,
+    onFileChange,
+    addInputFile,
+    removeInputFile
+  };
+}
+
+function useExternalEvents(
+  featureCollection,
+  { fitBounds, createFeatures, updateFeatures, deleteFeatures }
+) {
+  const onFeatureFocus = useCallback(
+    ({ detail }) => {
+      const { id, bbox } = detail;
+      if (id) {
+        const feature = findFeature(featureCollection, id);
+        if (feature) {
+          fitBounds(getBounds(feature.geometry));
+        }
+      } else if (bbox) {
+        fitBounds(bbox);
+      }
+    },
+    [featureCollection, fitBounds]
+  );
+
+  const onFeatureCreate = useCallback(
+    ({ detail }) => {
+      const { geometry, properties } = detail;
+
+      if (geometry) {
+        createFeatures({
+          features: [{ geometry, properties }],
+          external: true
+        });
+      }
+    },
+    [createFeatures]
+  );
+
+  const onFeatureUpdate = useCallback(
+    ({ detail }) => {
+      const { id, properties } = detail;
+      const feature = findFeature(featureCollection, id);
+
+      if (feature) {
+        feature.properties = { ...feature.properties, ...properties };
+        updateFeatures({ features: [feature], external: true });
+      }
+    },
+    [featureCollection, updateFeatures]
+  );
+
+  const onFeatureDelete = useCallback(
+    ({ detail }) => {
+      const { id } = detail;
+      const feature = findFeature(featureCollection, id);
+
+      if (feature) {
+        deleteFeatures({ features: [feature], external: true });
+      }
+    },
+    [featureCollection, deleteFeatures]
+  );
+
+  useEvent('map:feature:focus', onFeatureFocus);
+  useEvent('map:feature:create', onFeatureCreate);
+  useEvent('map:feature:update', onFeatureUpdate);
+  useEvent('map:feature:delete', onFeatureDelete);
+}
+
+function useCadastres(
+  featureCollection,
+  {
+    addEventListeners,
+    hoverFeature,
+    createFeatures,
+    deleteFeatures,
+    enabled = true
+  }
+) {
+  const hoveredFeature = useRef();
+
+  const onMouseMove = useCallback(
+    (event) => {
+      if (event.features.length > 0) {
+        const feature = event.features[0];
+        if (hoveredFeature.current?.id != feature.id) {
+          if (hoveredFeature.current) {
+            hoverFeature(hoveredFeature.current, false);
+          }
+          hoveredFeature.current = feature;
+          hoverFeature(feature, true);
+        }
+      }
+    },
+    [hoverFeature]
+  );
+
+  const onMouseLeave = useCallback(() => {
+    if (hoveredFeature.current) {
+      hoverFeature(hoveredFeature.current, false);
+    }
+    hoveredFeature.current = null;
+  }, [hoverFeature]);
+
+  const onClick = useCallback(
+    async (event) => {
+      if (event.features.length > 0) {
+        const currentId = event.features[0].properties.id;
+        const feature = findFeature(
+          filterFeatureCollection(featureCollection, SOURCE_CADASTRE),
+          currentId,
+          'cid'
+        );
+        if (feature) {
+          deleteFeatures({
+            features: [feature],
+            source: SOURCE_CADASTRE,
+            external: true
+          });
+        } else {
+          createFeatures({
+            features: event.features,
+            source: SOURCE_CADASTRE,
+            external: true
+          });
+        }
+      }
+    },
+    [featureCollection, createFeatures, deleteFeatures]
+  );
+
+  useEffect(() => {
+    if (enabled) {
+      return addEventListeners({
+        click: ['parcelles-fill', onClick],
+        mousemove: ['parcelles-fill', onMouseMove],
+        mouseleave: ['parcelles-fill', onMouseLeave]
+      });
+    }
+  }, [onClick, onMouseMove, onMouseLeave, enabled]);
+}
+
+function useError() {
+  const [error, onError] = useState();
+  useEffect(() => {
+    const timer = setTimeout(() => onError(null), 5000);
+    return () => clearTimeout(timer);
+  }, [error]);
+
+  return [error, onError];
+}
+
+export function useEvent(eventName, callback) {
+  return useEffect(() => {
+    addEventListener(eventName, callback);
+    return () => removeEventListener(eventName, callback);
+  }, [eventName, callback]);
+}

app/javascript/components/MapReader/index.jsx

@@ -1,141 +1,28 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
-import { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
+import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
-import mapboxgl, { Popup } from 'mapbox-gl';
 import PropTypes from 'prop-types';
+import 'mapbox-gl/dist/mapbox-gl.css';
 
-import Mapbox from '../shared/mapbox/Mapbox';
+import MapStyleControl, { useMapStyle } from '../shared/mapbox/MapStyleControl';
-import { getMapStyle } from '../shared/mapbox/styles';
-import SwitchMapStyle from '../shared/mapbox/SwitchMapStyle';
 import {
   filterFeatureCollection,
-  filterFeatureCollectionByGeometryType,
+  filterFeatureCollectionByGeometryType
-  useEvent,
-  findFeature,
-  fitBounds,
-  getCenter
 } from '../shared/mapbox/utils';
+import { useMapbox } from './useMapbox';
+
+const Mapbox = ReactMapboxGl({});
 
 const MapReader = ({ featureCollection, options }) => {
-  const [currentMap, setCurrentMap] = useState(null);
+  const {
-  const [style, setStyle] = useState('ortho');
+    isSupported,
-  const cadastresFeatureCollection = useMemo(
+    onLoad,
-    () => filterFeatureCollection(featureCollection, 'cadastre'),
+    onStyleChange,
-    [featureCollection]
+    onMouseEnter,
-  );
+    onMouseLeave
-  const selectionsUtilisateurFeatureCollection = useMemo(
+  } = useMapbox(featureCollection);
-    () => filterFeatureCollection(featureCollection, 'selection_utilisateur'),
+  const [style, setStyle] = useMapStyle(options.layers, { onStyleChange });
-    [featureCollection]
-  );
-  const selectionsLineFeatureCollection = useMemo(
-    () =>
-      filterFeatureCollectionByGeometryType(
-        selectionsUtilisateurFeatureCollection,
-        'LineString'
-      ),
-    [selectionsUtilisateurFeatureCollection]
-  );
-  const selectionsPolygonFeatureCollection = useMemo(
-    () =>
-      filterFeatureCollectionByGeometryType(
-        selectionsUtilisateurFeatureCollection,
-        'Polygon'
-      ),
-    [selectionsUtilisateurFeatureCollection]
-  );
-  const selectionsPointFeatureCollection = useMemo(
-    () =>
-      filterFeatureCollectionByGeometryType(
-        selectionsUtilisateurFeatureCollection,
-        'Point'
-      ),
-    [selectionsUtilisateurFeatureCollection]
-  );
-  const hasCadastres = useMemo(() => options.layers.includes('cadastres'));
-  const mapStyle = useMemo(() => getMapStyle(style, options.layers), [
-    style,
-    options
-  ]);
-  const popup = useMemo(
-    () =>
-      new Popup({
-        closeButton: false,
-        closeOnClick: false
-      })
-  );
 
-  const onMouseEnter = useCallback(
+  if (!isSupported) {
-    (event) => {
-      const feature = event.features[0];
-      if (feature.properties && feature.properties.description) {
-        const coordinates = getCenter(feature.geometry, event.lngLat);
-        const description = feature.properties.description;
-        currentMap.getCanvas().style.cursor = 'pointer';
-        popup.setLngLat(coordinates).setHTML(description).addTo(currentMap);
-      } else {
-        popup.remove();
-      }
-    },
-    [currentMap, popup]
-  );
-
-  const onMouseLeave = useCallback(() => {
-    currentMap.getCanvas().style.cursor = '';
-    popup.remove();
-  }, [currentMap, popup]);
-
-  const onFeatureFocus = useCallback(
-    ({ detail }) => {
-      const feature = findFeature(featureCollection, detail.id);
-      if (feature) {
-        fitBounds(currentMap, feature);
-      }
-    },
-    [currentMap, featureCollection]
-  );
-
-  useEvent('map:feature:focus', onFeatureFocus);
-
-  const [a1, a2, b1, b2] = featureCollection.bbox;
-  const boundData = [
-    [a1, a2],
-    [b1, b2]
-  ];
-
-  const polygonSelectionFill = {
-    'fill-color': '#EC3323',
-    'fill-opacity': 0.5
-  };
-
-  const polygonSelectionLine = {
-    'line-color': 'rgba(255, 0, 0, 1)',
-    'line-width': 4
-  };
-
-  const lineStringSelectionLine = {
-    'line-color': 'rgba(55, 42, 127, 1.00)',
-    'line-width': 3
-  };
-
-  const pointSelectionFill = {
-    'circle-color': '#EC3323'
-  };
-
-  const polygonCadastresFill = {
-    'fill-color': '#FAD859',
-    'fill-opacity': 0.5
-  };
-
-  const polygonCadastresLine = {
-    'line-color': 'rgba(156, 160, 144, 255)',
-    'line-width': 2,
-    'line-dasharray': [1, 1]
-  };
-
-  function onMapLoad(map) {
-    setCurrentMap(map);
-  }
-
-  if (!mapboxgl.supported()) {
     return (
       <p>
         Nous ne pouvons pas afficher la carte car elle est imcompatible avec
@@ -147,58 +34,155 @@ const MapReader = ({ featureCollection, options }) => {
 
   return (
     <Mapbox
-      onStyleLoad={(map) => onMapLoad(map)}
+      onStyleLoad={(map) => onLoad(map)}
-      fitBounds={boundData}
+      style={style}
-      fitBoundsOptions={{ padding: 100 }}
+      containerStyle={{ height: '400px' }}
-      style={mapStyle}
-      containerStyle={{
-        height: '400px',
-        width: '100%'
-      }}
     >
-      <GeoJSONLayer
+      <SelectionUtilisateurPolygonLayer
-        data={selectionsPolygonFeatureCollection}
+        featureCollection={featureCollection}
-        fillPaint={polygonSelectionFill}
+        onMouseEnter={onMouseEnter}
-        linePaint={polygonSelectionLine}
+        onMouseLeave={onMouseLeave}
-        fillOnMouseEnter={onMouseEnter}
-        fillOnMouseLeave={onMouseLeave}
       />
-      <GeoJSONLayer
+      <SelectionUtilisateurLineLayer
-        data={selectionsLineFeatureCollection}
+        featureCollection={featureCollection}
-        linePaint={lineStringSelectionLine}
+        onMouseEnter={onMouseEnter}
-        lineOnMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
-        lineOnMouseLeave={onMouseLeave}
       />
-      <GeoJSONLayer
+      <SelectionUtilisateurPointLayer
-        data={selectionsPointFeatureCollection}
+        featureCollection={featureCollection}
-        circlePaint={pointSelectionFill}
+        onMouseEnter={onMouseEnter}
-        circleOnMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
-        circleOnMouseLeave={onMouseLeave}
       />
-      {hasCadastres ? (
-        <GeoJSONLayer
-          data={cadastresFeatureCollection}
-          fillPaint={polygonCadastresFill}
-          linePaint={polygonCadastresLine}
-        />
-      ) : null}
 
-      <SwitchMapStyle style={style} setStyle={setStyle} ign={options.ign} />
+      <MapStyleControl style={style.id} setStyle={setStyle} />
       <ZoomControl />
     </Mapbox>
   );
 };
 
-MapReader.propTypes = {
+const polygonSelectionFill = {
+  'fill-color': '#EC3323',
+  'fill-opacity': 0.5
+};
+const polygonSelectionLine = {
+  'line-color': 'rgba(255, 0, 0, 1)',
+  'line-width': 4
+};
+const lineStringSelectionLine = {
+  'line-color': 'rgba(55, 42, 127, 1.00)',
+  'line-width': 3
+};
+const pointSelectionFill = {
+  'circle-color': '#EC3323'
+};
+
+function SelectionUtilisateurPolygonLayer({
+  featureCollection,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const data = useMemo(
+    () =>
+      filterFeatureCollectionByGeometryType(
+        filterFeatureCollection(featureCollection, 'selection_utilisateur'),
+        'Polygon'
+      ),
+    [featureCollection]
+  );
+
+  return (
+    <GeoJSONLayer
+      data={data}
+      fillPaint={polygonSelectionFill}
+      linePaint={polygonSelectionLine}
+      fillOnMouseEnter={onMouseEnter}
+      fillOnMouseLeave={onMouseLeave}
+    />
+  );
+}
+
+function SelectionUtilisateurLineLayer({
+  featureCollection,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const data = useMemo(
+    () =>
+      filterFeatureCollectionByGeometryType(
+        filterFeatureCollection(featureCollection, 'selection_utilisateur'),
+        'LineString'
+      ),
+    [featureCollection]
+  );
+  return (
+    <GeoJSONLayer
+      data={data}
+      linePaint={lineStringSelectionLine}
+      lineOnMouseEnter={onMouseEnter}
+      lineOnMouseLeave={onMouseLeave}
+    />
+  );
+}
+
+function SelectionUtilisateurPointLayer({
+  featureCollection,
+  onMouseEnter,
+  onMouseLeave
+}) {
+  const data = useMemo(
+    () =>
+      filterFeatureCollectionByGeometryType(
+        filterFeatureCollection(featureCollection, 'selection_utilisateur'),
+        'Point'
+      ),
+    [featureCollection]
+  );
+  return (
+    <GeoJSONLayer
+      data={data}
+      circlePaint={pointSelectionFill}
+      circleOnMouseEnter={onMouseEnter}
+      circleOnMouseLeave={onMouseLeave}
+    />
+  );
+}
+
+SelectionUtilisateurPolygonLayer.propTypes = {
   featureCollection: PropTypes.shape({
     type: PropTypes.string,
     bbox: PropTypes.array,
     features: PropTypes.array
   }),
-  options: PropTypes.shape({
+  onMouseEnter: PropTypes.func,
-    layers: PropTypes.array,
+  onMouseLeave: PropTypes.func
-    ign: PropTypes.bool
+};
-  })
+
+SelectionUtilisateurLineLayer.propTypes = {
+  featureCollection: PropTypes.shape({
+    type: PropTypes.string,
+    bbox: PropTypes.array,
+    features: PropTypes.array
+  }),
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func
+};
+
+SelectionUtilisateurPointLayer.propTypes = {
+  featureCollection: PropTypes.shape({
+    type: PropTypes.string,
+    bbox: PropTypes.array,
+    features: PropTypes.array
+  }),
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func
+};
+
+MapReader.propTypes = {
+  featureCollection: PropTypes.shape({
+    bbox: PropTypes.array,
+    features: PropTypes.array
+  }),
+  options: PropTypes.shape({ layers: PropTypes.array })
 };
 
 export default MapReader;

app/javascript/components/MapReader/useMapbox.js

@@ -0,0 +1,104 @@
+import { useCallback, useRef, useEffect, useMemo } from 'react';
+import mapboxgl, { Popup } from 'mapbox-gl';
+
+import {
+  filterFeatureCollection,
+  findFeature,
+  getBounds,
+  getCenter
+} from '../shared/mapbox/utils';
+
+const SOURCE_CADASTRE = 'cadastre';
+
+export function useMapbox(featureCollection) {
+  const mapRef = useRef();
+  const selectedCadastresRef = useRef(() => new Set());
+  const isSupported = useMemo(() => mapboxgl.supported());
+
+  const fitBounds = useCallback((bbox) => {
+    mapRef.current.fitBounds(bbox, { padding: 100 });
+  }, []);
+
+  const onLoad = useCallback(
+    (map) => {
+      if (!mapRef.current) {
+        mapRef.current = map;
+        mapRef.current.fitBounds(featureCollection.bbox, { padding: 100 });
+        onStyleChange();
+      }
+    },
+    [featureCollection]
+  );
+
+  const onStyleChange = useCallback(() => {
+    if (mapRef.current) {
+      selectedCadastresRef.current = new Set(
+        filterFeatureCollection(
+          featureCollection,
+          SOURCE_CADASTRE
+        ).features.map(({ properties }) => properties.cid)
+      );
+      if (selectedCadastresRef.current.size > 0) {
+        mapRef.current.setFilter('parcelle-highlighted', [
+          'in',
+          'id',
+          ...selectedCadastresRef.current
+        ]);
+      }
+    }
+  }, [featureCollection]);
+
+  const popup = useMemo(
+    () =>
+      new Popup({
+        closeButton: false,
+        closeOnClick: false
+      })
+  );
+
+  const onMouseEnter = useCallback(
+    (event) => {
+      const feature = event.features[0];
+      if (feature.properties && feature.properties.description) {
+        const coordinates = getCenter(feature.geometry, event.lngLat);
+        const description = feature.properties.description;
+        mapRef.current.getCanvas().style.cursor = 'pointer';
+        popup.setLngLat(coordinates).setHTML(description).addTo(mapRef.current);
+      } else {
+        popup.remove();
+      }
+    },
+    [popup]
+  );
+
+  const onMouseLeave = useCallback(() => {
+    mapRef.current.getCanvas().style.cursor = '';
+    popup.remove();
+  }, [popup]);
+
+  useExternalEvents(featureCollection, { fitBounds });
+
+  return { isSupported, onLoad, onStyleChange, onMouseEnter, onMouseLeave };
+}
+
+function useExternalEvents(featureCollection, { fitBounds }) {
+  const onFeatureFocus = useCallback(
+    ({ detail }) => {
+      const { id } = detail;
+      const feature = findFeature(featureCollection, id);
+      if (feature) {
+        fitBounds(getBounds(feature.geometry));
+      }
+    },
+    [featureCollection, fitBounds]
+  );
+
+  useEvent('map:feature:focus', onFeatureFocus);
+}
+
+export function useEvent(eventName, callback) {
+  return useEffect(() => {
+    addEventListener(eventName, callback);
+    return () => removeEventListener(eventName, callback);
+  }, [eventName, callback]);
+}

app/javascript/components/shared/mapbox/MapStyleControl.jsx

@@ -0,0 +1,69 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { getMapStyle } from './styles';
+import ortho from './styles/images/preview-ortho.png';
+import vector from './styles/images/preview-vector.png';
+
+const STYLES = {
+  ortho: {
+    title: 'Satellite',
+    preview: ortho,
+    color: '#fff'
+  },
+  vector: {
+    title: 'Vectoriel',
+    preview: vector,
+    color: '#000'
+  },
+  ign: {
+    title: 'Carte IGN',
+    preview: vector,
+    color: '#000'
+  }
+};
+
+function getNextStyle(style) {
+  const styleNames = Object.keys(STYLES);
+  const index = styleNames.indexOf(style) + 1;
+  if (index === styleNames.length) {
+    return styleNames[0];
+  }
+  return styleNames[index];
+}
+
+export function useMapStyle(
+  optionalLayers,
+  { onStyleChange, cadastreEnabled }
+) {
+  const [styleId, setStyle] = useState('ortho');
+  const style = useMemo(() => getMapStyle(styleId, optionalLayers), [
+    styleId,
+    optionalLayers
+  ]);
+
+  useEffect(() => onStyleChange(), [styleId, cadastreEnabled]);
+
+  return [style, setStyle];
+}
+
+function MapStyleControl({ style, setStyle }) {
+  const nextStyle = getNextStyle(style);
+  const { title, preview, color } = STYLES[nextStyle];
+
+  return (
+    <div className="map-style-control">
+      <button type="button" onClick={() => setStyle(nextStyle)}>
+        <img alt={title} src={preview} />
+        <div style={{ color }}>{title}</div>
+      </button>
+    </div>
+  );
+}
+
+MapStyleControl.propTypes = {
+  style: PropTypes.string,
+  setStyle: PropTypes.func
+};
+
+export default MapStyleControl;

app/javascript/components/shared/mapbox/Mapbox.js

@@ -1,3 +0,0 @@
-import ReactMapboxGl from 'react-mapbox-gl';
-
-export default ReactMapboxGl({});

app/javascript/components/shared/mapbox/SwitchMapStyle.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ortho from './styles/images/preview-ortho.png';
-import vector from './styles/images/preview-vector.png';
-
-const STYLES = {
-  ortho: {
-    title: 'Satellite',
-    preview: ortho,
-    color: '#fff'
-  },
-  vector: {
-    title: 'Vectoriel',
-    preview: vector,
-    color: '#000'
-  }
-};
-
-const IGN_STYLES = {
-  ...STYLES,
-  ign: {
-    title: 'Carte IGN',
-    preview: vector,
-    color: '#000'
-  }
-};
-
-function getNextStyle(style, ign) {
-  const styles = Object.keys(ign ? IGN_STYLES : STYLES);
-  let index = styles.indexOf(style) + 1;
-  if (index === styles.length) {
-    return styles[0];
-  }
-  return styles[index];
-}
-
-function SwitchMapStyle({ style, setStyle, ign }) {
-  const nextStyle = getNextStyle(style, ign);
-  const { title, preview, color } = (ign ? IGN_STYLES : STYLES)[nextStyle];
-
-  const imgStyle = {
-    width: '100%',
-    height: '100%',
-    cursor: 'pointer'
-  };
-
-  const textStyle = {
-    position: 'relative',
-    bottom: '26px',
-    left: '4px',
-    color
-  };
-
-  return (
-    <div
-      className="style-switch"
-      style={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0
-      }}
-      onClick={() => setStyle(nextStyle)}
-    >
-      <div className="switch-style mapboxgl-ctrl-swith-map-style">
-        <img alt={title} style={imgStyle} src={preview} />
-        <div className="text" style={textStyle}>
-          {title}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-SwitchMapStyle.propTypes = {
-  style: PropTypes.string,
-  setStyle: PropTypes.func,
-  ign: PropTypes.bool
-};
-
-export default SwitchMapStyle;

app/javascript/components/shared/mapbox/styles/base.js

@@ -1,4 +1,4 @@
-import cadastreLayers from './cadastre-layers';
+import cadastreLayers from './layers/cadastre';
 
 const IGN_TOKEN = 'rc1egnbeoss72hxvd143tbyk';
 
@@ -138,7 +138,16 @@ function rasterSource(tiles, attribution) {
   };
 }
 
-export function buildLayers(ids) {
+function rasterLayer(source) {
+  return {
+    id: source,
+    source,
+    type: 'raster',
+    paint: { 'raster-resampling': 'linear' }
+  };
+}
+
+export function buildOptionalLayers(ids) {
   return OPTIONAL_LAYERS.filter(({ id }) => ids.includes(id))
     .flatMap(({ layers }) => layers)
     .flatMap(([, code]) =>
@@ -148,15 +157,6 @@ export function buildLayers(ids) {
     );
 }
 
-export function rasterLayer(source) {
-  return {
-    id: source,
-    source,
-    type: 'raster',
-    paint: { 'raster-resampling': 'linear' }
-  };
-}
-
 export default {
   version: 8,
   metadat: {

app/javascript/components/shared/mapbox/styles/index.js

@@ -1,29 +1,27 @@
-import baseStyle, { rasterLayer, buildLayers } from './base';
+import baseStyle, { buildOptionalLayers } from './base';
-import orthoStyle from './ortho-style';
+import orthoStyle from './layers/ortho';
-import vectorStyle from './vector-style';
+import vectorStyle from './layers/vector';
+import ignLayers from './layers/ign';
 
-export function getMapStyle(style, optionalLayers) {
+export function getMapStyle(id, optionalLayers) {
-  const mapStyle = { ...baseStyle };
+  const style = { ...baseStyle, id };
 
-  switch (style) {
+  switch (id) {
     case 'ortho':
-      mapStyle.layers = orthoStyle;
+      style.layers = orthoStyle;
-      mapStyle.id = 'ortho';
+      style.name = 'Photographies aériennes';
-      mapStyle.name = 'Photographies aériennes';
       break;
     case 'vector':
-      mapStyle.layers = vectorStyle;
+      style.layers = vectorStyle;
-      mapStyle.id = 'vector';
+      style.name = 'Carte OSM';
-      mapStyle.name = 'Carte OSM';
       break;
     case 'ign':
-      mapStyle.layers = [rasterLayer('plan-ign')];
+      style.layers = ignLayers;
-      mapStyle.id = 'ign';
+      style.name = 'Carte IGN';
-      mapStyle.name = 'Carte IGN';
       break;
   }
 
-  mapStyle.layers = mapStyle.layers.concat(buildLayers(optionalLayers));
+  style.layers = style.layers.concat(buildOptionalLayers(optionalLayers));
 
-  return mapStyle;
+  return style;
 }

app/javascript/components/shared/mapbox/styles/layers/cadastre.js

@@ -82,7 +82,7 @@ export default [
     type: 'fill',
     source: 'cadastre',
     'source-layer': 'parcelles',
-    filter: ['==', 'id', ''],
+    filter: ['in', 'id', ''],
     paint: {
       'fill-color': 'rgba(1, 129, 0, 1)',
       'fill-opacity': 0.7

app/javascript/components/shared/mapbox/styles/layers/ign.js

@@ -0,0 +1,8 @@
+export default [
+  {
+    id: 'ign',
+    source: 'plan-ign',
+    type: 'raster',
+    paint: { 'raster-resampling': 'linear' }
+  }
+];

app/javascript/components/shared/mapbox/utils.js

@@ -1,5 +1,4 @@
 import { LngLatBounds } from 'mapbox-gl';
-import { useEffect } from 'react';
 
 export function getBounds(geometry) {
   const bbox = new LngLatBounds();
@@ -18,15 +17,9 @@ export function getBounds(geometry) {
   return bbox;
 }
 
-export function fitBounds(map, feature) {
+export function findFeature(featureCollection, value, property = 'id') {
-  if (map) {
-    map.fitBounds(getBounds(feature.geometry), { padding: 100 });
-  }
-}
-
-export function findFeature(featureCollection, id) {
   return featureCollection.features.find(
-    (feature) => feature.properties.id === id
+    (feature) => feature.properties[property] === value
   );
 }
 
@@ -48,19 +41,10 @@ export function filterFeatureCollectionByGeometryType(featureCollection, type) {
   };
 }
 
-export function noop() {}
-
 export function generateId() {
   return Math.random().toString(20).substr(2, 6);
 }
 
-export function useEvent(eventName, callback) {
-  return useEffect(() => {
-    addEventListener(eventName, callback);
-    return () => removeEventListener(eventName, callback);
-  }, [eventName, callback]);
-}
-
 export function getCenter(geometry, lngLat) {
   const bbox = new LngLatBounds();
 
@@ -76,3 +60,13 @@ export function getCenter(geometry, lngLat) {
       return bbox.getCenter();
   }
 }
+
+export function defer() {
+  const deferred = {};
+  const promise = new Promise(function (resolve, reject) {
+    deferred.resolve = resolve;
+    deferred.reject = reject;
+  });
+  deferred.promise = promise;
+  return deferred;
+}

app/lib/api_carto/api.rb

@@ -1,23 +0,0 @@
-class APICarto::API
-  class ResourceNotFound < StandardError
-  end
-
-  def self.search_cadastre(geojson)
-    url = [API_CARTO_URL, "cadastre", "geometrie"].join("/")
-    call(url, geojson)
-  end
-
-  private
-
-  def self.call(url, geojson)
-    response = Typhoeus.post(url, body: geojson.to_s, headers: { 'content-type' => 'application/json' })
-
-    if response.success?
-      response.body
-    else
-      message = response.code == 0 ? response.return_message : response.code.to_s
-      Rails.logger.error "[APICarto] Error on #{url}: #{message}"
-      raise ResourceNotFound
-    end
-  end
-end

app/lib/api_carto/cadastre_adapter.rb

@@ -1,29 +0,0 @@
-class APICarto::CadastreAdapter
-  def initialize(coordinates)
-    @coordinates = GeojsonService.to_json_polygon_for_cadastre(coordinates)
-  end
-
-  def data_source
-    @data_source ||= JSON.parse(APICarto::API.search_cadastre(@coordinates), symbolize_names: true)
-  end
-
-  def results
-    data_source[:features].map do |feature|
-      filter_properties(feature[:properties]).merge({ geometry: feature[:geometry] })
-    end
-  end
-
-  def filter_properties(properties)
-    properties.slice(
-      :surface_intersection,
-      :surface_parcelle,
-      :numero,
-      :feuille,
-      :section,
-      :code_dep,
-      :nom_com,
-      :code_com,
-      :code_arr
-    )
-  end
-end

app/models/champs/carte_champ.rb

@@ -62,10 +62,7 @@ class Champs::CarteChamp < Champ
   end
 
   def render_options
-    {
+    { layers: optional_layers }
-      ign: Flipper.enabled?(:carte_ign, procedure),
-      layers: optional_layers
-    }
   end
 
   def position

app/models/geo_area.rb

@@ -14,25 +14,33 @@
 class GeoArea < ApplicationRecord
   belongs_to :champ, optional: false
 
-  store :properties, accessors: [
+  # FIXME: once geo_areas are migrated to not use YAML serialization we can enable store_accessor
-    :description,
+  # store_accessor :properties, :description, :numero, :section
-    :surface_intersection,
+
-    :surface_parcelle,
+  def properties
-    :numero,
+    value = read_attribute(:properties)
-    :feuille,
+    if value.is_a? String
-    :section,
+      ActiveRecord::Coders::YAMLColumn.new(:properties).load(value)
-    :code_dep,
+    else
-    :nom_com,
+      value
-    :code_com,
+    end
-    :code_arr,
+  end
-    :code,
+
-    :nom,
+  def description
-    :commune,
+    properties['description']
-    :culture,
+  end
-    :code_culture,
+
-    :surface,
+  def numero
-    :bio
+    properties['numero']
-  ]
+  end
+
+  def section
+    properties['section']
+  end
+
+  def filename
+    properties['filename']
+  end
 
   enum source: {
     cadastre: 'cadastre',
@@ -48,10 +56,12 @@ class GeoArea < ApplicationRecord
     {
       type: 'Feature',
       geometry: safe_geometry,
-      properties: properties.symbolize_keys.merge(
+      properties: cadastre_properties.merge(
         source: source,
         area: area,
         length: length,
+        description: description,
+        filename: filename,
         id: id,
         champ_id: champ.stable_id,
         dossier_id: champ.dossier_id
@@ -69,16 +79,6 @@ class GeoArea < ApplicationRecord
     nil
   end
 
-  def self.from_feature_collection(feature_collection)
-    feature_collection[:features].map do |feature|
-      GeoArea.new(
-        source: feature[:properties].delete(:source),
-        properties: feature[:properties],
-        geometry: feature[:geometry]
-      )
-    end
-  end
-
   def area
     if polygon?
       GeojsonService.area(geometry.deep_symbolize_keys).round(1)
@@ -108,4 +108,107 @@ class GeoArea < ApplicationRecord
   def point?
     geometry['type'] == 'Point'
   end
+
+  def legacy_cadastre?
+    cadastre? && properties['surface_intersection'].present?
+  end
+
+  def cadastre?
+    source == GeoArea.sources.fetch(:cadastre)
+  end
+
+  def cadastre_properties
+    if cadastre?
+      {
+        cid: cid,
+        numero: numero,
+        section: section,
+        prefixe: prefixe,
+        commune: commune,
+        surface: surface
+      }
+    else
+      {}
+    end
+  end
+
+  def code_dep
+    if legacy_cadastre?
+      properties['code_dep']
+    else
+      properties['commune'][0..1]
+    end
+  end
+
+  def code_com
+    if legacy_cadastre?
+      properties['code_com']
+    else
+      properties['commune'][2...commune.size]
+    end
+  end
+
+  def nom_com
+    if legacy_cadastre?
+      properties['nom_com']
+    else
+      ''
+    end
+  end
+
+  def surface_intersection
+    if legacy_cadastre?
+      properties['surface_intersection']
+    else
+      ''
+    end
+  end
+
+  def feuille
+    if legacy_cadastre?
+      properties['feuille']
+    else
+      1
+    end
+  end
+
+  def code_arr
+    prefixe
+  end
+
+  def surface_parcelle
+    surface
+  end
+
+  def surface
+    if legacy_cadastre?
+      properties['surface_parcelle']
+    else
+      properties['contenance']
+    end
+  end
+
+  def prefixe
+    if legacy_cadastre?
+      properties['code_arr']
+    else
+      properties['prefixe']
+    end
+  end
+
+  def commune
+    if legacy_cadastre?
+      "#{properties['code_dep']}#{properties['code_com']}"
+    else
+      properties['commune']
+    end
+  end
+
+  def cid
+    if legacy_cadastre?
+      "#{code_dep}#{code_com}#{code_arr}#{section}#{numero}"
+    else
+      properties['id']
+    end
+  end
 end

app/services/api_carto_service.rb

@@ -1,25 +0,0 @@
-class APICartoService
-  def self.generate_qp(coordinates)
-    coordinates.flat_map do |coordinate|
-      APICarto::QuartiersPrioritairesAdapter.new(
-        coordinate.map { |element| [element['lng'], element['lat']] }
-      ).results
-    end
-  end
-
-  def self.generate_cadastre(coordinates)
-    coordinates.flat_map do |coordinate|
-      APICarto::CadastreAdapter.new(
-        coordinate.map { |element| [element['lng'], element['lat']] }
-      ).results
-    end
-  end
-
-  def self.generate_rpg(coordinates)
-    coordinates.flat_map do |coordinate|
-      ApiGeo::RPGAdapter.new(
-        coordinate.map { |element| [element['lng'], element['lat']] }
-      ).results
-    end
-  end
-end

app/views/champs/carte/index.js.erb

@@ -4,6 +4,6 @@
   partial: 'shared/champs/carte/geo_areas',
   locals: { champ: @champ, editing: true }) %>
 
-<% if @update_cadastres %>
+<% if @focus %>
-  <%= fire_event('cadastres:update', { featureCollection: @champ.to_feature_collection }.to_json) %>
+  <%= fire_event('map:feature:focus', { bbox: @champ.bounding_box }.to_json) %>
 <% end %>

app/views/shared/champs/carte/_geo_areas.html.haml

@@ -7,7 +7,7 @@
           - if editing
             = link_to '#', data: { geo_area: geo_area.id } do
               = geo_area_label(geo_area)
-            = text_field_tag :description, geo_area.description, data: { geo_area: geo_area.id }, placeholder: 'Description de la sélection'
+            = text_field_tag :description, geo_area.description, data: { geo_area: geo_area.id }, placeholder: 'Description de la sélection', class: 'no-margin'
           - else
             = link_to '#', data: { geo_area: geo_area.id } do
               = geo_area_label(geo_area)

config/application.rb

@@ -38,12 +38,7 @@ module TPS
     config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
     config.assets.precompile += ['.woff']
 
-    # The default list used to be accessible through `ActionView::Base.sanitized_allowed_tags`,
+    default_allowed_tags = ActionView::Base.sanitized_allowed_tags
-    # but a regression in Rails 6.0 makes it unavailable.
-    # It should be fixed in Rails 6.1.
-    # See https://github.com/rails/rails/issues/39586
-    # default_allowed_tags = ActionView::Base.sanitized_allowed_tags
-    default_allowed_tags = ['strong', 'em', 'b', 'i', 'p', 'code', 'pre', 'tt', 'samp', 'kbd', 'var', 'sub', 'sup', 'dfn', 'cite', 'big', 'small', 'address', 'hr', 'br', 'div', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'dl', 'dt', 'dd', 'abbr', 'acronym', 'a', 'img', 'blockquote', 'del', 'ins']
     config.action_view.sanitized_allowed_tags = default_allowed_tags + ['u']
 
     # Some mobile browsers have a behaviour where, although they will delete the session

config/initializers/flipper.rb

@@ -27,7 +27,6 @@ end
 features = [
   :administrateur_routage,
   :administrateur_web_hook,
-  :carte_ign,
   :dossier_pdf_vide,
   :expert_not_allowed_to_invite,
   :hide_instructeur_email,

config/initializers/urls.rb

@@ -1,6 +1,5 @@
 # rubocop:disable DS/ApplicationName
 # API URLs
-API_CARTO_URL = ENV.fetch("API_CARTO_URL", "https://sandbox.geo.api.gouv.fr/apicarto")
 API_ENTREPRISE_URL = ENV.fetch("API_ENTREPRISE_URL", "https://entreprise.api.gouv.fr/v2")
 API_EDUCATION_URL = ENV.fetch("API_EDUCATION_URL", "https://data.education.gouv.fr/api/records/1.0")
 HELPSCOUT_API_URL = ENV.fetch("HELPSCOUT_API_URL", "https://api.helpscout.net/v2")

lib/tasks/deployment/20210513093316_use_jsonb_in_geo_areas_properties.rake

@@ -0,0 +1,22 @@
+namespace :after_party do
+  desc 'Deployment task: use_jsonb_in_geo_areas_properties'
+  task use_jsonb_in_geo_areas_properties: :environment do
+    puts "Running deploy task 'use_jsonb_in_geo_areas_properties'"
+
+    geo_areas = GeoArea.where("properties::text LIKE ?", "%--- !ruby%")
+    progress = ProgressReport.new(geo_areas.count)
+    geo_areas.find_each do |geo_area|
+      geo_area.properties = geo_area.properties
+      if !geo_area.save
+        geo_area.destroy
+      end
+      progress.inc
+    end
+    progress.finish
+
+    # Update task as completed.  If you remove the line below, the task will
+    # run with every deploy (or every time you call after_party:run).
+    AfterParty::TaskRecord
+      .create version: AfterParty::TaskRecorder.new(__FILE__).timestamp
+  end
+end

spec/controllers/champs/carte_controller_spec.rb

@@ -25,7 +25,8 @@ describe Champs::CarteController, type: :controller do
     let(:params) do
       {
         champ_id: champ.id,
-        feature: feature
+        feature: feature,
+        source: GeoArea.sources.fetch(:selection_utilisateur)
       }
     end
 
@@ -98,67 +99,37 @@ describe Champs::CarteController, type: :controller do
       it { expect(response.status).to eq 204 }
     end
 
-    describe 'POST #import' do
+    describe 'GET #index' do
       render_views
 
       let(:params) do
-        {
+        { champ_id: champ.id }
-          champ_id: champ.id,
-          features: [feature]
-
-        }
       end
 
-      before do
-        post :import, params: params
-      end
-
-      it {
-        expect(response.status).to eq 201
-        expect(response.body).to include("bbox")
-      }
-    end
-
-    describe 'GET #index' do
-      render_views
-
       before do
         request.accept = "application/javascript"
         request.content_type = "application/javascript"
+        get :index, params: params
       end
 
-      context 'with cadastres update' do
+      context "update list" do
-        let(:params) do
-          {
-            champ_id: champ.id,
-            cadastres: 'update'
-          }
-        end
-
-        before do
-          get :index, params: params
-        end
-
         it {
+          expect(response.body).not_to include("DS.fire('map:feature:focus'")
           expect(response.status).to eq 200
-          expect(response.body).to include("DS.fire('cadastres:update'")
         }
       end
 
-      context 'without cadastres update' do
+      context "update list and focus" do
         let(:params) do
           {
-            champ_id: champ.id
+            champ_id: champ.id,
+            focus: true
           }
         end
 
-        before do
-          get :index, params: params
-        end
-
         it {
+          expect(response.body).to include("DS.fire('map:feature:focus'")
           expect(response.status).to eq 200
-          expect(response.body).not_to include("DS.fire('cadastres:update'")
         }
       end
     end

spec/factories/geo_area.rb

@@ -1,17 +1,16 @@
 FactoryBot.define do
   factory :geo_area do
     association :champ
+    properties { {} }
 
     trait :cadastre do
       source { GeoArea.sources.fetch(:cadastre) }
-      numero { '42' }
+      properties { { numero: '42', section: 'A11', prefixe: '000', commune: '75127', contenance: '1234', id: '75127000A1142' } }
-      feuille { 'A11' }
     end
 
-    trait :quartier_prioritaire do
+    trait :legacy_cadastre do
-      source { GeoArea.sources.fetch(:quartier_prioritaire) }
+      source { GeoArea.sources.fetch(:cadastre) }
-      nom { 'XYZ' }
+      properties { { numero: '42', section: 'A11', code_com: '127', code_dep: '75', code_arr: '000', surface_parcelle: '1234', surface_intersection: 1234 } }
-      commune { 'Paris' }
     end
 
     trait :selection_utilisateur do

spec/features/experts/expert_spec.rb

@@ -67,11 +67,49 @@ feature 'Inviting an expert:' do
       expect(page).to have_text('1 avis donné')
     end
 
-    # TODO
-    # scenario 'I can read other experts advices' do
-    # end
-
     # scenario 'I can invite other experts' do
     # end
   end
+
+  context 'when there are two experts' do
+    let(:expert_1) { create(:expert) }
+    let(:expert_2) { create(:expert) }
+    let(:instructeur) { create(:instructeur) }
+    let(:procedure) { create(:procedure, :published, instructeurs: [instructeur]) }
+    let(:experts_procedure_1) { create(:experts_procedure, expert: expert_1, procedure: procedure) }
+    let(:experts_procedure_2) { create(:experts_procedure, expert: expert_2, procedure: procedure) }
+    let(:dossier) { create(:dossier, :en_construction, :with_dossier_link, procedure: procedure) }
+    let!(:avis_1) { create(:avis, dossier: dossier, claimant: instructeur, experts_procedure: experts_procedure_1, confidentiel: true) }
+    let!(:avis_2) { create(:avis, dossier: dossier, claimant: instructeur, experts_procedure: experts_procedure_2, confidentiel: false) }
+
+    scenario 'As a expert_1, I can read expert_2 advice because it is not confidential' do
+      login_as expert_1.user, scope: :user
+
+      visit expert_all_avis_path
+      expect(page).to have_text('1 avis à donner')
+      expect(page).to have_text('0 avis donnés')
+
+      click_on '1 avis à donner'
+      click_on avis_1.dossier.user.email
+      within('.tabs') { click_on 'Avis' }
+      expect(page).to have_text("Demandeur : #{avis_1.claimant.email}")
+      expect(page).to have_text("Vous")
+      expect(page).to have_text(avis_2.expert.email.to_s)
+    end
+
+    scenario 'As a expert_2, I cannot read expert_1 advice because it is confidential' do
+      login_as expert_2.user, scope: :user
+
+      visit expert_all_avis_path
+      expect(page).to have_text('1 avis à donner')
+      expect(page).to have_text('0 avis donnés')
+
+      click_on '1 avis à donner'
+      click_on avis_2.dossier.user.email
+      within('.tabs') { click_on 'Avis' }
+      expect(page).to have_text("Demandeur : #{avis_2.claimant.email}")
+      expect(page).to have_text("Vous")
+      expect(page).not_to have_text(avis_1.expert.email.to_s)
+    end
+  end
 end

spec/lib/api_carto/api_spec.rb

@@ -1,39 +0,0 @@
-describe APICarto::API do
-  describe '.search_cadastre' do
-    subject { described_class.search_cadastre(geojson) }
-
-    before do
-      stub_request(:post, "https://sandbox.geo.api.gouv.fr/apicarto/cadastre/geometrie")
-        .with(:body => /.*/,
-          :headers => { 'Content-Type' => 'application/json' })
-        .to_return(status: status, body: body)
-    end
-    context 'when geojson is empty' do
-      let(:geojson) { '' }
-      let(:status) { 404 }
-      let(:body) { '' }
-
-      it 'raises APICarto::API::ResourceNotFound' do
-        expect { subject }.to raise_error(APICarto::API::ResourceNotFound)
-      end
-    end
-
-    context 'when geojson exist' do
-      let(:geojson) { File.read('spec/fixtures/files/api_carto/request_cadastre.json') }
-      let(:status) { 200 }
-      let(:body) { 'toto' }
-
-      it 'returns response body' do
-        expect(subject).to eq(body)
-      end
-
-      context 'when geojson is at format JSON' do
-        let(:geojson) { JSON.parse(File.read('spec/fixtures/files/api_carto/request_cadastre.json')) }
-
-        it 'returns response body' do
-          expect(subject).to eq(body)
-        end
-      end
-    end
-  end
-end

spec/lib/api_carto/cadastre_adapter_spec.rb

@@ -1,63 +0,0 @@
-describe APICarto::CadastreAdapter do
-  subject { described_class.new(coordinates).results }
-
-  before do
-    stub_request(:post, "https://sandbox.geo.api.gouv.fr/apicarto/cadastre/geometrie")
-      .with(:body => /.*/,
-        :headers => { 'Content-Type' => 'application/json' })
-      .to_return(status: status, body: body)
-  end
-
-  context 'coordinates are filled' do
-    let(:coordinates) { '[[2.252728, 43.27151][2.323223, 32.835332]]' }
-    let(:status) { 200 }
-    let(:body) { File.read('spec/fixtures/files/api_carto/response_cadastre.json') }
-
-    it { expect(subject).to be_a_instance_of(Array) }
-    it { expect(subject.size).to eq(16) }
-
-    describe 'Attribut filter' do
-      let(:adapter) { described_class.new(coordinates) }
-      subject { adapter.filter_properties(adapter.data_source[:features].first[:properties]) }
-
-      it { expect(subject.size).to eq(9) }
-      it do
-        expect(subject.keys).to eq([
-          :surface_intersection,
-          :surface_parcelle,
-          :numero,
-          :feuille,
-          :section,
-          :code_dep,
-          :nom_com,
-          :code_com,
-          :code_arr
-        ])
-      end
-    end
-
-    describe 'Attributes' do
-      subject { super().first }
-
-      it { expect(subject[:surface_intersection]).to eq('0.0202') }
-      it { expect(subject[:surface_parcelle]).to eq(220.0664659755941) }
-      it { expect(subject[:numero]).to eq('0082') }
-      it { expect(subject[:feuille]).to eq(1) }
-      it { expect(subject[:section]).to eq('0J') }
-      it { expect(subject[:code_dep]).to eq('94') }
-      it { expect(subject[:nom_com]).to eq('Maisons-Alfort') }
-      it { expect(subject[:code_com]).to eq('046') }
-      it { expect(subject[:code_arr]).to eq('000') }
-
-      it { expect(subject[:geometry]).to eq({ type: "MultiPolygon", coordinates: [[[[2.4362443, 48.8092078], [2.436384, 48.8092043], [2.4363802, 48.8091414]]]] }) }
-    end
-  end
-
-  context 'coordinates are empty' do
-    let(:coordinates) { '' }
-    let(:status) { 404 }
-    let(:body) { '' }
-
-    it { expect { subject }.to raise_error(APICarto::API::ResourceNotFound) }
-  end
-end

spec/models/geo_area_spec.rb

@@ -80,4 +80,24 @@ RSpec.describe GeoArea, type: :model do
       it { expect(geo_area.valid?).to be_falsey }
     end
   end
+
+  describe "cadastre properties" do
+    let(:geo_area) { build(:geo_area, :cadastre) }
+    let(:legacy_geo_area) { build(:geo_area, :legacy_cadastre) }
+
+    it "should be backward compatible" do
+      expect("#{geo_area.code_dep}#{geo_area.code_com}").to eq(geo_area.commune)
+      expect(geo_area.code_arr).to eq(geo_area.prefixe)
+      expect(geo_area.surface_parcelle).to eq(geo_area.surface)
+    end
+
+    context "(legacy)" do
+      it "should be forward compatible" do
+        expect("#{legacy_geo_area.code_dep}#{legacy_geo_area.code_com}").to eq(legacy_geo_area.commune)
+        expect(legacy_geo_area.code_arr).to eq(legacy_geo_area.prefixe)
+        expect(legacy_geo_area.surface_parcelle).to eq(legacy_geo_area.surface)
+        expect(legacy_geo_area.cid).to eq(geo_area.cid)
+      end
+    end
+  end
 end

spec/serializers/champ_serializer_spec.rb

@@ -85,7 +85,7 @@ describe ChampSerializer do
               source: GeoArea.sources.fetch(:cadastre),
               geometry: geo_json,
               numero: '42',
-              feuille: 'A11'
+              section: 'A11'
             )
             expect(subject[:geo_areas].first.key?(:nom)).to be_falsey
           }

yarn.lock

@@ -2925,14 +2925,15 @@ browserify-zlib@^0.2.0:
     pako "~1.0.5"
 
 browserslist@^4.0.0, browserslist@^4.11.1, browserslist@^4.6.4, browserslist@^4.8.5:
-  version "4.12.0"
+  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
-  integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-lite "^1.0.30001043"
+    caniuse-lite "^1.0.30001219"
-    electron-to-chromium "^1.3.413"
+    colorette "^1.2.2"
-    node-releases "^1.1.53"
+    electron-to-chromium "^1.3.723"
-    pkg-up "^2.0.0"
+    escalade "^3.1.1"
+    node-releases "^1.1.71"
 
 btoa-lite@^1.0.0:
   version "1.0.0"
@@ -3175,10 +3176,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001043:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001039, caniuse-lite@^1.0.30001219:
-  version "1.0.30001055"
+  version "1.0.30001228"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001055.tgz#7b52c3537f7a8c0408aca867e83d2b04268b54cd"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
-  integrity sha512-MbwsBmKrBSKIWldfdIagO5OJWZclpJtS4h0Jrk/4HFrXJxTdVdH23Fd+xCiHriVGvYcWyW8mR/CPsYajlH8Iuw==
+  integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
 
 cardinal@^2.1.1:
   version "2.1.1"
@@ -3582,6 +3583,11 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
 colors@^1.1.2, colors@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
@@ -4720,10 +4726,10 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.413:
+electron-to-chromium@^1.3.723:
-  version "1.3.435"
+  version "1.3.737"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.435.tgz#22a7008e8f5a317a6d2d80802bddacebb19ae025"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.737.tgz#196f2e9656f4f3c31930750e1899c091b72d36b5"
-  integrity sha512-BVXnq+NCefidU7GOFPx4CPBfPcccLCRBKZYSbvBJMSn2kwGD7ML+eUA9tqfHAumRqy3oX5zaeTI1Bpt7qVat0Q==
+  integrity sha512-P/B84AgUSQXaum7a8m11HUsYL8tj9h/Pt5f7Hg7Ty6bm5DxlFq+e5+ouHUoNQMsKDJ7u4yGfI8mOErCmSH9wyg==
 
 elf-tools@^1.1.1:
   version "1.1.2"
@@ -4915,6 +4921,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
 escape-goat@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
@@ -5547,13 +5558,6 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
-  dependencies:
-    locate-path "^2.0.0"
-
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -7593,14 +7597,6 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
-locate-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
-  dependencies:
-    p-locate "^2.0.0"
-    path-exists "^3.0.0"
-
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -8577,10 +8573,10 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-releases@^1.1.53:
+node-releases@^1.1.71:
-  version "1.1.55"
+  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.55.tgz#8af23b7c561d8e2e6e36a46637bab84633b07cee"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==
+  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
 node-sass@^4.13.1:
   version "4.14.1"
@@ -9093,13 +9089,6 @@ p-is-promise@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
   integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
 
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
-  dependencies:
-    p-try "^1.0.0"
-
 p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -9107,13 +9096,6 @@ p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.3.0:
   dependencies:
     p-try "^2.0.0"
 
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
-  dependencies:
-    p-limit "^1.1.0"
-
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -9166,11 +9148,6 @@ p-timeout@^3.0.0, p-timeout@^3.1.0:
   dependencies:
     p-finally "^1.0.0"
 
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -9447,13 +9424,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
-  dependencies:
-    find-up "^2.1.0"
-
 pnp-webpack-plugin@^1.6.4:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"