editor: don't create a champ by default

Before the editor attempted to create a default champ as soon as the
list became empty.

This created many race conditions, which made the tests flaky.

Remove this behavior, and add an empty label instead.

app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js

@@ -12,13 +12,6 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
     typeDeChamps
   });
 
-  if (state.typeDeChamps.length === 0) {
-    dispatch({
-      type: 'addFirstTypeDeChamp',
-      done: () => dispatch({ type: 'refresh' })
-    });
-  }
-
   return (
     <div className="champs-editor">
       <SortableContainer
@@ -39,6 +32,13 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
           />
         ))}
       </SortableContainer>
+      {state.typeDeChamps.length === 0 && (
+        <h2>
+          <FontAwesomeIcon icon="arrow-circle-down" />
+          &nbsp;&nbsp;Cliquez sur le bouton «&nbsp;Ajouter un champ&nbsp;» pour
+          créer votre premier champ.
+        </h2>
+      )}
       <div className="footer">&nbsp;</div>
       <div className="buttons">
         <button

app/javascript/components/TypesDeChampEditor/index.js

@@ -5,6 +5,7 @@ import {
   faArrowDown,
   faArrowsAltV,
   faArrowUp,
+  faArrowCircleDown,
   faPlus,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
@@ -13,7 +14,14 @@ import Flash from './Flash';
 import OperationsQueue from './OperationsQueue';
 import TypeDeChamps from './components/TypeDeChamps';
 
-library.add(faArrowDown, faArrowsAltV, faArrowUp, faPlus, faTrash);
+library.add(
+  faArrowDown,
+  faArrowsAltV,
+  faArrowUp,
+  faArrowCircleDown,
+  faPlus,
+  faTrash
+);
 
 class TypesDeChampEditor extends Component {
   constructor(props) {

app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js

@@ -11,8 +11,6 @@ export default function typeDeChampsReducer(state, { type, params, done }) {
   switch (type) {
     case 'addNewTypeDeChamp':
       return addNewTypeDeChamp(state, state.typeDeChamps, done);
-    case 'addFirstTypeDeChamp':
-      return addFirstTypeDeChamp(state, state.typeDeChamps, done);
     case 'addNewRepetitionTypeDeChamp':
       return addNewRepetitionTypeDeChamp(
         state,
@@ -98,19 +96,6 @@ function addNewRepetitionTypeDeChamp(state, typeDeChamps, typeDeChamp, done) {
   );
 }
 
-function addFirstTypeDeChamp(state, typeDeChamps, done) {
-  const typeDeChamp = { ...state.defaultTypeDeChampAttributes, order_place: 0 };
-
-  createTypeDeChampOperation(typeDeChamp, state.queue)
-    .then(() => done())
-    .catch(message => state.flash.error(message));
-
-  return {
-    ...state,
-    typeDeChamps: [...typeDeChamps, typeDeChamp]
-  };
-}
-
 function updateTypeDeChamp(
   state,
   typeDeChamps,
@@ -223,10 +208,14 @@ function getUpdateHandler(typeDeChamp, { queue, flash }) {
 function findItemToInsertAfter() {
   const target = getLastVisibleTypeDeChamp();
 
+  if (target) {
     return {
       target,
       index: parseInt(target.dataset.index) + 1
     };
+  } else {
+    return null;
+  }
 }
 
 function getLastVisibleTypeDeChamp() {