From fdd7bc1ea3309a649586a04b3a10eeef5e1d0650 Mon Sep 17 00:00:00 2001
From: Cameron Dutro <camertron@gmail.com>
Date: Tue, 17 Jan 2023 22:31:14 -0800
Subject: [PATCH] Toggle switch error messages (#1760)

Co-authored-by: Neal Lindsay <neal.lindsay@gmail.com>
Co-authored-by: camertron <camertron@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
---
 .changeset/swift-jokes-sparkle.md             |   5 +++
 .eslintrc.json                                |   3 +-
 .../primer/alpha/toggle_switch/default.png    | Bin 2255 -> 2252 bytes
 .../primer/alpha/toggle_switch/focused.png    | Bin 2583 -> 2566 bytes
 app/components/primer/alpha/text_field.pcss   |   6 +++
 .../primer/alpha/toggle_switch.html.erb       |   6 ++-
 .../primer/alpha/toggle_switch.pcss           |   6 +++
 app/components/primer/alpha/toggle_switch.ts  |  38 +++++++++++++-----
 app/components/primer/primer.ts               |   1 +
 app/forms/example_toggle_switch_form.rb       |   2 +-
 .../controllers/toggle_switch_controller.rb   |   2 +-
 lib/primer/forms/toggle_switch.html.erb       |   9 ++++-
 lib/primer/forms/toggle_switch.rb             |   6 +--
 lib/primer/forms/toggle_switch_input.ts       |  19 +++++++++
 .../example_toggle_switch_form.html.erb       |   4 +-
 test/css/component_specific_selectors_test.rb |   3 +-
 .../primer/forms/integration_forms_test.rb    |  28 +++++++++++++
 17 files changed, 114 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/swift-jokes-sparkle.md
 create mode 100644 lib/primer/forms/toggle_switch_input.ts

diff --git a/.changeset/swift-jokes-sparkle.md b/.changeset/swift-jokes-sparkle.md
new file mode 100644
index 0000000000..c445115eeb
--- /dev/null
+++ b/.changeset/swift-jokes-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Show error messages when toggle switches fail
diff --git a/.eslintrc.json b/.eslintrc.json
index ce61d6a752..7957655d7a 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -62,7 +62,8 @@
         ],
         "custom-elements/tag-name-matches-class": [
           "error", {"suffix": "Element"}
-        ]
+        ],
+        "i18n-text/no-en": "off"
       }
     }
   ]
diff --git a/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/toggle_switch/default.png b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/toggle_switch/default.png
index 58103884146df6106dd9de3740189a1fa8d85958..b177d9159bc6c10f700b2f74d2a761dd845ab387 100644
GIT binary patch
literal 2252
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
Lf1lbTF~9r;x%Vfd

literal 2255
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

diff --git a/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/toggle_switch/focused.png b/.playwright/screenshots/previews.test.ts-snapshots/primer/alpha/toggle_switch/focused.png
index 363520b08bf9d91db0d6ea304fb3f958137c93b6..91896c566abd674e16c246151a4f2f0112d77c44 100644
GIT binary patch
literal 2566
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

literal 2583
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

diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index 4e807c4e67..544aa0f312 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -196,6 +196,12 @@
   }
 }
 
+.FormControl-toggleSwitchInput {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--base-size-16, 16px);
+}
+
 /* positioning for leading/trailing items for TextInput */
 .FormControl-input-wrap {
   position: relative;
diff --git a/app/components/primer/alpha/toggle_switch.html.erb b/app/components/primer/alpha/toggle_switch.html.erb
index 661f6d2477..a116be1401 100644
--- a/app/components/primer/alpha/toggle_switch.html.erb
+++ b/app/components/primer/alpha/toggle_switch.html.erb
@@ -1,6 +1,8 @@
 <%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
-  <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
-  <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
+  <span class="ToggleSwitch-statusIcon">
+    <%= render(Primer::Beta::Octicon.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
+    <%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
+  </span>
   <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
     <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
diff --git a/app/components/primer/alpha/toggle_switch.pcss b/app/components/primer/alpha/toggle_switch.pcss
index 7b84b93b8c..18cfa4bc12 100644
--- a/app/components/primer/alpha/toggle_switch.pcss
+++ b/app/components/primer/alpha/toggle_switch.pcss
@@ -208,6 +208,12 @@
   text-align: right;
 }
 
+.ToggleSwitch-statusIcon {
+  width: var(--base-size-16, 16px);
+  display: flex;
+  margin-top: 0.063rem;
+}
+
 .ToggleSwitch--small {
   & .ToggleSwitch-status {
     font-size: var(--primer-text-body-size-small, 12px);
diff --git a/app/components/primer/alpha/toggle_switch.ts b/app/components/primer/alpha/toggle_switch.ts
index 53e050847c..c4b1792f61 100644
--- a/app/components/primer/alpha/toggle_switch.ts
+++ b/app/components/primer/alpha/toggle_switch.ts
@@ -97,10 +97,16 @@ class ToggleSwitchElement extends HTMLElement {
   }
 
   private setSuccessState(): void {
+    const event = new CustomEvent('toggleSwitchSuccess', {bubbles: true})
+    this.dispatchEvent(event)
+
     this.setFinishedState(false)
   }
 
-  private setErrorState(): void {
+  private setErrorState(message: string): void {
+    const event = new CustomEvent('toggleSwitchError', {bubbles: true, detail: message})
+    this.dispatchEvent(event)
+
     this.setFinishedState(true)
   }
 
@@ -125,22 +131,32 @@ class ToggleSwitchElement extends HTMLElement {
 
     try {
       if (!this.src) throw new Error('invalid src')
-      const response = await fetch(this.src, {
-        credentials: 'same-origin',
-        method: 'POST',
-        headers: {
-          'Requested-With': 'XMLHttpRequest'
-        },
-        body
-      })
+
+      let response
+
+      try {
+        response = await fetch(this.src, {
+          credentials: 'same-origin',
+          method: 'POST',
+          headers: {
+            'Requested-With': 'XMLHttpRequest'
+          },
+          body
+        })
+      } catch (error) {
+        throw new Error('A network error occurred, please try again.')
+      }
+
       if (response.ok) {
         this.setSuccessState()
         this.performToggle()
       } else {
-        this.setErrorState()
+        throw new Error(await response.text())
       }
     } catch (error) {
-      this.setErrorState()
+      if (error instanceof Error) {
+        this.setErrorState(error.message || 'An error occurred, please try again.')
+      }
     }
   }
 }
diff --git a/app/components/primer/primer.ts b/app/components/primer/primer.ts
index 55fe5d633e..d3e190c4a1 100644
--- a/app/components/primer/primer.ts
+++ b/app/components/primer/primer.ts
@@ -13,3 +13,4 @@ import './alpha/tab_container'
 import './time_ago_component'
 import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
+import '../../../lib/primer/forms/toggle_switch_input'
diff --git a/app/forms/example_toggle_switch_form.rb b/app/forms/example_toggle_switch_form.rb
index 0636457d71..e92725b985 100644
--- a/app/forms/example_toggle_switch_form.rb
+++ b/app/forms/example_toggle_switch_form.rb
@@ -3,6 +3,6 @@
 # :nodoc:
 class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
   def initialize(**system_arguments)
-    super(name: :example_field, label: "Example", **system_arguments)
+    super(name: :example_field, label: "Example", caption: "This is an example toggle switch.", **system_arguments)
   end
 end
diff --git a/demo/app/controllers/toggle_switch_controller.rb b/demo/app/controllers/toggle_switch_controller.rb
index db0de26ca8..cb057a8bb7 100644
--- a/demo/app/controllers/toggle_switch_controller.rb
+++ b/demo/app/controllers/toggle_switch_controller.rb
@@ -37,7 +37,7 @@ def verify_artificial_authenticity_token
     # if provided, check token
     return if form_params[:authenticity_token] == "let_me_in"
 
-    head :unauthorized
+    render status: :unauthorized, plain: "Bad CSRF token"
   end
 
   def form_params
diff --git a/lib/primer/forms/toggle_switch.html.erb b/lib/primer/forms/toggle_switch.html.erb
index 1b49692a94..daba6bd438 100644
--- a/lib/primer/forms/toggle_switch.html.erb
+++ b/lib/primer/forms/toggle_switch.html.erb
@@ -1,9 +1,14 @@
-<%= content_tag(:div, **@form_group_arguments) do %>
+<%= content_tag("toggle-switch-input", **@input.input_arguments) do %>
   <span style="flex-grow: 1">
     <%= builder.label(@input.name, **@input.label_arguments) do %>
       <%= @input.label %>
     <% end %>
-    <%= render(Caption.new(input: @input)) %>
+
+    <%= content_tag(:div, data: { target: "toggle-switch-input.validationElement" }, **@input.validation_arguments) do %>
+      <%= content_tag(:span, @input.validation_messages.first, data: { target: "toggle-switch-input.validationMessageElement" }, **@input.validation_message_arguments) %>
+    <% end %>
+
+    <div><%= render(Caption.new(input: @input)) %></div>
   </span>
   <%
     csrf = @input.csrf || @view_context.form_authenticity_token(
diff --git a/lib/primer/forms/toggle_switch.rb b/lib/primer/forms/toggle_switch.rb
index 6ff843dba1..68969cc45c 100644
--- a/lib/primer/forms/toggle_switch.rb
+++ b/lib/primer/forms/toggle_switch.rb
@@ -9,10 +9,8 @@ class ToggleSwitch < BaseComponent
       def initialize(input:)
         @input = input
         @input.add_label_classes("FormControl-label")
-
-        @form_group_arguments = { class: "d-flex" }
-
-        @form_group_arguments[:hidden] = "hidden" if @input.hidden?
+        @input.add_input_classes("FormControl-toggleSwitchInput")
+        @input.input_arguments[:hidden] = "hidden" if @input.hidden?
       end
     end
   end
diff --git a/lib/primer/forms/toggle_switch_input.ts b/lib/primer/forms/toggle_switch_input.ts
new file mode 100644
index 0000000000..45a58911c8
--- /dev/null
+++ b/lib/primer/forms/toggle_switch_input.ts
@@ -0,0 +1,19 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+export class ToggleSwitchInputElement extends HTMLElement {
+  @target validationElement: HTMLElement
+  @target validationMessageElement: HTMLElement
+
+  connectedCallback() {
+    this.addEventListener('toggleSwitchError', (event: Event) => {
+      this.validationMessageElement.innerText = (event as CustomEvent).detail
+      this.validationElement.removeAttribute('hidden')
+    })
+
+    this.addEventListener('toggleSwitchSuccess', () => {
+      this.validationMessageElement.innerText = ''
+      this.validationElement.setAttribute('hidden', 'hidden')
+    })
+  }
+}
diff --git a/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb b/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb
index f9a1aab130..cfc7c7b4dd 100644
--- a/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb
+++ b/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb
@@ -1 +1,3 @@
-<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path)) %>
+<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", src: toggle_switch_index_path, id: "success-toggle")) %>
+<hr>
+<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", src: toggle_switch_index_path, id: "error-toggle")) %>
diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb
index e98d740496..4f9676ca8f 100644
--- a/test/css/component_specific_selectors_test.rb
+++ b/test/css/component_specific_selectors_test.rb
@@ -57,7 +57,8 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".FormControl-input-wrap",
       ".FormControl-select-wrap",
       ".FormControl-checkbox-wrap",
-      ".FormControl-radio-wrap"
+      ".FormControl-radio-wrap",
+      ".FormControl-toggleSwitchInput"
     ],
     Primer::Alpha::ButtonMarketing => [
       ".btn-mktg.disabled",
diff --git a/test/lib/primer/forms/integration_forms_test.rb b/test/lib/primer/forms/integration_forms_test.rb
index 6febb01518..d175fee046 100644
--- a/test/lib/primer/forms/integration_forms_test.rb
+++ b/test/lib/primer/forms/integration_forms_test.rb
@@ -39,5 +39,33 @@ def test_multi_submit
       assert result["country"], "CA"
       assert result["region"], "SK"
     end
+
+    def test_toggle_switch_form_errors
+      visit_preview(:example_toggle_switch_form)
+
+      find("#error-toggle toggle-switch").click
+      wait_for_toggle_switch_spinner
+
+      assert_selector("#error-toggle [data-target='toggle-switch.errorIcon']")
+      assert_selector("#error-toggle", text: "Bad CSRF token")
+
+      page.evaluate_script(<<~JAVASCRIPT)
+        document
+          .querySelector('#error-toggle toggle-switch')
+          .setAttribute('csrf', 'let_me_in');
+      JAVASCRIPT
+
+      find("#error-toggle toggle-switch").click
+      wait_for_toggle_switch_spinner
+
+      refute_selector("#error-toggle [data-target='toggle-switch.errorIcon']")
+      refute_selector("#error-toggle", text: "Bad CSRF token")
+    end
+
+    private
+
+    def wait_for_toggle_switch_spinner
+      refute_selector("[data-target='toggle-switch.loadingSpinner']")
+    end
   end
 end