FEATURE: Convert chat plugin UI to new show plugin and admin UI guidelines (#28632)

This commit converts the current chat plugin UI into the
new "show plugin" UI already followed by AI and Gamification.

In the process, I also:

* Made a dedicated /new route to create new webhooks
* Converted the webhook form to FormKit
* Made some fixes and improvements to the `AdminPluginConfigPage`, `AdminPageHeader`,
   and `AdminPageSubheader` generic components, so more plugins can
   adopt the UI guidelines too. This includes adding a header outlet so plugins
   can add action buttons to the plugin show page header.
* Fixes the submit button loading state for FormKit (by Joffrey)

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

plugins/chat/spec/system/admin/incoming_webhooks_spec.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+describe "Admin Chat Incoming Webhooks", type: :system do
+  fab!(:current_user) { Fabricate(:admin) }
+  fab!(:chat_channel_1) { Fabricate(:chat_channel) }
+
+  let(:dialog) { PageObjects::Components::Dialog.new }
+  let(:admin_incoming_webhooks_page) { PageObjects::Pages::AdminIncomingWebhooks.new }
+
+  before do
+    chat_system_bootstrap(current_user)
+    sign_in(current_user)
+  end
+
+  it "can create incoming webhooks" do
+    admin_incoming_webhooks_page.visit
+    admin_incoming_webhooks_page.click_new
+    admin_incoming_webhooks_page.form.field("name").fill_in("Test webhook")
+    admin_incoming_webhooks_page.form.field("description").fill_in("Some test content")
+    admin_incoming_webhooks_page.form.field("username").fill_in("system")
+    admin_incoming_webhooks_page.channel_chooser.expand
+    admin_incoming_webhooks_page.channel_chooser.select_row_by_value(chat_channel_1.id)
+    admin_incoming_webhooks_page.channel_chooser.collapse
+    # TODO (martin) Add an emoji selection once Joffrey's emoji selector
+    # unification has landed in core.
+
+    admin_incoming_webhooks_page.form.submit
+
+    expect(page).to have_content(I18n.t("js.chat.incoming_webhooks.created"))
+    expect(page).to have_content(Chat::IncomingWebhook.find_by(name: "Test webhook").url)
+  end
+
+  describe "existing webhooks" do
+    fab!(:webhook_1) { Fabricate(:incoming_chat_webhook) }
+    fab!(:webhook_2) { Fabricate(:incoming_chat_webhook) }
+
+    it "can list existing incoming webhooks" do
+      admin_incoming_webhooks_page.visit
+      expect(page).to have_content(webhook_1.name)
+      expect(page).to have_content(webhook_1.chat_channel.title)
+      expect(page).to have_content(webhook_2.name)
+      expect(page).to have_content(webhook_2.chat_channel.title)
+    end
+
+    it "can edit an existing incoming webhook" do
+      admin_incoming_webhooks_page.visit
+      admin_incoming_webhooks_page
+        .list_row(webhook_1.id)
+        .find(".admin-chat-incoming-webhooks-edit")
+        .click
+      expect(admin_incoming_webhooks_page.form.field("name").value).to eq(webhook_1.name)
+      admin_incoming_webhooks_page.form.field("name").fill_in("Wow so cool")
+      admin_incoming_webhooks_page.form.submit
+      expect(page).to have_content(I18n.t("js.chat.incoming_webhooks.saved"))
+      admin_incoming_webhooks_page.visit
+      expect(page).to have_content("Wow so cool")
+    end
+
+    it "can delete an existing incoming webhook" do
+      admin_incoming_webhooks_page.visit
+      admin_incoming_webhooks_page
+        .list_row(webhook_1.id)
+        .find(".admin-chat-incoming-webhooks-delete")
+        .click
+      dialog.click_danger
+      expect(page).not_to have_content(webhook_1.name)
+    end
+  end
+end