feat: add a disabled/active mode to the submit button of import panel (#2341)

cf #2302

Warning: I removed the historic `width: 100%` on all buttons, who knows
where this will break? :p

Disabled:


![image](https://github.com/user-attachments/assets/000ff44b-bd6e-485b-b27f-39b0a189bf56)

Form valid:


![image](https://github.com/user-attachments/assets/afdbd4b6-7168-4dff-b314-e6556a289369)

docs-users/fr/tutorials/6-one-click-data-import.md

@@ -47,7 +47,7 @@ Voici un bref passage en revu des différents imports proposés et pour finir l
 
 ## 1. Importer le contour d’une commune
 
-Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
 
 Cliquez sur « Communes France » et sélectionnez la commune souhaitée dans une liste déroulante. Une fois la commune sélectionnée, le format est reconnu automatiquement (geojson) puis le type de calque (cliquer sur « ? » pour savoir quel choix opérer)
 
@@ -64,7 +64,7 @@ Une fois cet import réalisé, tout est réglable : couleur de contour, de fond,
 
 ## 2. Importer les contours des départements ou des régions
 
-Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
 
 Cliquez sur « Contours nationaux » puis soit départements, soit régions et enfin le type de calque (voir supra l’explication). Tous les départements sont importés :
 
@@ -72,7 +72,7 @@ Cliquez sur « Contours nationaux » puis soit départements, soit régions et
 
 ## 3. Importer un point d’intérêt issu de GeoDataMine
 
-Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
 
 Cliquez sur « GeoDataMine (thèmes OSM) » et sélectionnez les informations souhaitées, routes, bâtiments, commerces, services publics, …
 Par exemple, en sélectionnant les points d’eau potable de la CA du Grand Avignon, puis « Copier dans un calque »

umap/static/umap/css/form.css

@@ -78,8 +78,7 @@ input[type="submit"] {
     border-radius: 2px;
     font-weight: normal;
     cursor: pointer;
-    padding: 7px;
-    width: 100%;
+    padding: 7px 14px;
     min-height: 32px;
     line-height: 32px;
     border: none;
@@ -92,6 +91,12 @@ input[type="submit"] {
     color: var(--text-color);
     border: 1px solid #1b1f20;
 }
+.dark .button.primary:not([disabled]),
+.dark [type="button"].primary:not([disabled]) {
+    background-color: var(--color-brightCyan);
+    color: var(--color-dark);
+    border: 1px solid #1b1f20;
+}
 .dark .button:hover,
 .dark [type="button"]:hover,
 .dark input[type="submit"]:hover {
@@ -100,6 +105,11 @@ input[type="submit"] {
 .dark a {
     color: var(--text-color);
 }
+.dark [type="button"][disabled],
+.dark input[type="submit"][disabled] {
+    background-color: var(--color-mediumGray);
+    cursor: not-allowed;
+}
 button.flat,
 [type="button"].flat,
 .dark [type="button"].flat {

umap/static/umap/js/modules/importer.js

@@ -33,15 +33,15 @@ const TEMPLATE = `
     <fieldset id="import-mode" class="formbox">
       <legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend>
       <label>
-        <input type="radio" name="action" value="copy" />
+        <input type="radio" name="action" value="copy" checked onchange />
         ${translate('Copy into the layer')}
       </label>
       <label>
-        <input type="radio" name="action" value="link" />
+        <input type="radio" name="action" value="link" onchange />
         ${translate('Link to the layer as remote data')}
       </label>
     </fieldset>
-    <input type="button" class="button" name="submit" value="${translate('Import data')}" />
+    <input type="button" class="button primary" name="submit" value="${translate('Import data')}" disabled />
   </div>
     `
 
@@ -121,6 +121,11 @@ export default class Importer extends Utils.WithTemplate {
     return this.qs('textarea').value
   }
 
+  set raw(value) {
+    this.qs('textarea').value = value
+    this.onChange()
+  }
+
   get clear() {
     return Boolean(this.qs('[name=clear]').checked)
   }
@@ -198,6 +203,7 @@ export default class Importer extends Utils.WithTemplate {
     )
     this.qs('[name=layer-name]').toggleAttribute('hidden', Boolean(this.layerId))
     this.qs('#clear').toggleAttribute('hidden', !this.layerId)
+    this.qs('[name=submit').toggleAttribute('disabled', !this.canSubmit())
   }
 
   onFileChange(e) {
@@ -219,6 +225,7 @@ export default class Importer extends Utils.WithTemplate {
     this.url = null
     this.format = undefined
     this.layerName = null
+    this.raw = null
     const layerSelect = this.qs('[name="layer-id"]')
     layerSelect.innerHTML = ''
     this._umap.eachDataLayerReverse((datalayer) => {
@@ -251,6 +258,17 @@ export default class Importer extends Utils.WithTemplate {
     this.qs('[type=file]').showPicker()
   }
 
+  canSubmit() {
+    if (!this.format) return false
+    const hasFiles = Boolean(this.files.length)
+    const hasRaw = Boolean(this.raw)
+    const hasUrl = Boolean(this.url)
+    const hasAction = Boolean(this.action)
+    if (!hasFiles && !hasRaw && !hasUrl) return false
+    if (this.url) return hasAction
+    return true
+  }
+
   submit() {
     let hasErrors
     if (this.format === 'umap') {