Rename AutoFieldController to SubmitController

- Closes #10092

CHANGELOG.txt

@@ -31,6 +31,7 @@ Changelog
  * Maintenance: Add unit tests for `CollapseAll` component (Albina Starykova)
  * Maintenance: Code quality fixes (GLEF1X)
  * Maintenance: Refactor image / document / snippet usage views into a shared generic view (Sage Abdullah)
+ * Maintenance: Rename the Stimulus `AutoFieldController` to the less confusing `SubmitController` (Loveth Omokaro)
 
 
 4.2.1 (xx.xx.xxxx) - IN DEVELOPMENT

client/src/controllers/AutoFieldController.stories.js → client/src/controllers/SubmitController.stories.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 
 import { StimulusWrapper } from '../../storybook/StimulusWrapper';
-import { AutoFieldController } from './AutoFieldController';
+import { SubmitController } from './SubmitController';
 
 export default {
-  title: 'Shared / AutoFieldController',
+  title: 'Shared / SubmitController',
   argTypes: {
     debug: {
       control: 'boolean',
@@ -15,8 +15,8 @@ export default {
 
 const definitions = [
   {
-    identifier: 'w-auto-field',
-    controllerConstructor: AutoFieldController,
+    identifier: 'w-submit',
+    controllerConstructor: SubmitController,
   },
 ];
 
@@ -34,8 +34,8 @@ const Template = ({ debug = false }) => {
         <select
           name="order"
           defaultValue="A-Z"
-          data-action="w-auto-field#submit"
-          data-controller="w-auto-field"
+          data-action="w-submit#submit"
+          data-controller="w-submit"
         >
           <option value="num">Numerical</option>
           <option value="A-Z">A to Z</option>

client/src/controllers/AutoFieldController.test.js → client/src/controllers/SubmitController.test.js

@@ -1,19 +1,19 @@
 import { Application } from '@hotwired/stimulus';
 
-import { AutoFieldController } from './AutoFieldController';
+import { SubmitController } from './SubmitController';
 
-describe('AutoFieldController', () => {
+describe('SubmitController', () => {
   beforeEach(() => {
     document.body.innerHTML = `
   <form id="form">
-    <select name="order" data-controller="w-auto-field" data-action="change->w-auto-field#submit" value="A-Z">
+    <select name="order" data-controller="w-submit" data-action="change->w-submit#submit" value="A-Z">
       <option value="A-Z" selected>A to Z</option>
-      <option value="Z-A">Z to A</option> 
+      <option value="Z-A">Z to A</option>
     </select>
   </form>
   `;
 
-    Application.start().register('w-auto-field', AutoFieldController);
+    Application.start().register('w-submit', SubmitController);
   });
 
   afterEach(() => {

client/src/controllers/AutoFieldController.ts → client/src/controllers/SubmitController.ts

@@ -6,13 +6,13 @@ import { Controller } from '@hotwired/stimulus';
  * @example
  * // once any change is made to the below select field, the form will be auto submitted
  * <form>
- *   <select name="order" data-controller="w-auto-field" data-action="change->w-auto-field#submit">
+ *   <select name="order" data-controller="w-submit" data-action="change->w-submit#submit">
  *     <option value="A-Z">A to Z</option>
  *     <option value="Z-A">Z to A</option>
  *   </select>
  * </form>
  */
-export class AutoFieldController extends Controller<
+export class SubmitController extends Controller<
   HTMLInputElement | HTMLSelectElement
 > {
   submit() {

client/src/controllers/index.ts

@@ -2,9 +2,9 @@ import type { Definition } from '@hotwired/stimulus';
 
 // Order controller imports alphabetically.
 import { ActionController } from './ActionController';
-import { AutoFieldController } from './AutoFieldController';
 import { ProgressController } from './ProgressController';
 import { SkipLinkController } from './SkipLinkController';
+import { SubmitController } from './SubmitController';
 import { UpgradeController } from './UpgradeController';
 
 /**
@@ -13,8 +13,8 @@ import { UpgradeController } from './UpgradeController';
 export const coreControllerDefinitions: Definition[] = [
   // Keep this list in alphabetical order
   { controllerConstructor: ActionController, identifier: 'w-action' },
-  { controllerConstructor: AutoFieldController, identifier: 'w-auto-field' },
   { controllerConstructor: ProgressController, identifier: 'w-progress' },
   { controllerConstructor: SkipLinkController, identifier: 'w-skip-link' },
+  { controllerConstructor: SubmitController, identifier: 'w-submit' },
   { controllerConstructor: UpgradeController, identifier: 'w-upgrade' },
 ];

client/storybook/StimulusWrapper.tsx

@@ -12,7 +12,7 @@ import { initStimulus } from '../src/includes/initStimulus';
  * import { StimulusWrapper } from '../storybook/StimulusWrapper';
  * const Template = ({ debug }) =>
  *   <StimulusWrapper
- *     definitions={[{ controllerConstructor: AutoFieldController, identifier: 'w-something' }]}
+ *     definitions={[{ controllerConstructor: SubmitController, identifier: 'w-something' }]}
  *     debug={debug}
  *   >
  *     <form data-controller="w-something" />

docs/releases/5.0.md

@@ -50,6 +50,7 @@ depth: 1
  * Add unit tests for `CollapseAll` component (Albina Starykova)
  * Code quality fixes (GLEF1X)
  * Refactor image / document / snippet usage views into a shared generic view (Sage Abdullah)
+ * Rename the Stimulus `AutoFieldController` to the less confusing `SubmitController` (Loveth Omokaro)
 
 ## Upgrade considerations
 

wagtail/admin/templates/wagtailadmin/shared/collection_chooser.html

@@ -2,7 +2,7 @@
 
 {% trans "Collection" as label_text %}
 {% field label_text=label_text id_for_label="collection_chooser_collection_id" %}
-    <select id="collection_chooser_collection_id" name="collection_id" data-controller="w-auto-field" data-action="change->w-auto-field#submit">
+    <select id="collection_chooser_collection_id" name="collection_id" data-controller="w-submit" data-action="change->w-submit#submit">
         <option value="">{% trans "All collections" %}</option>
         {% for pk, display_name in collections.get_indented_choices %}
             <option value="{{ pk|unlocalize }}"

wagtail/images/templates/wagtailimages/images/index.html

@@ -43,7 +43,7 @@
 
                 {% trans "Sort by" as sort_by %}
                 {% field label_text=sort_by id_for_label="order_images_by" %}
-                    <select id="order_images_by" name="ordering" data-controller="w-auto-field" data-action="change->w-auto-field#submit">
+                    <select id="order_images_by" name="ordering" data-controller="w-submit" data-action="change->w-submit#submit">
                         {% for ordering, ordering_text in ORDERING_OPTIONS.items %}
                             <option value="{{ ordering }}" {% if current_ordering == ordering %}selected="selected"{% endif %}>{{ ordering_text }}</option>
                         {% endfor %}
@@ -52,7 +52,7 @@
 
                 {% trans "Entries per page" as entries_per_page_label %}
                 {% field label_text=entries_per_page_label id_for_label="entries_per_page_label" %}
-                    <select id="entries_per_page" name="entries_per_page" data-controller="w-auto-field" data-action="change->w-auto-field#submit">
+                    <select id="entries_per_page" name="entries_per_page" data-controller="w-submit" data-action="change->w-submit#submit">
                         {% for value in ENTRIES_PER_PAGE_CHOICES %}
                             <option value="{{ value }}" {% if entries_per_page == value %}selected="selected"{% endif %}>{{ value }}</option>
                         {% endfor %}