Admin webhooks UI guidelines (#30764)

This change converts the admin webhooks UI to the new UI guidelines and modernizes the JS.

spec/system/admin_webhooks_spec.rb

@@ -0,0 +1,48 @@
+#frozen_string_literal: true
+
+describe "Admin Webhooks Page", type: :system do
+  fab!(:admin)
+
+  let(:webhooks_page) { PageObjects::Pages::AdminWebhooks.new }
+  let(:dialog) { PageObjects::Components::Dialog.new }
+
+  before do
+    Fabricate(:web_hook, payload_url: "https://www.example.com/1")
+
+    sign_in(admin)
+  end
+
+  it "shows a list of webhooks" do
+    webhooks_page.visit_page
+
+    expect(webhooks_page).to have_webhook_listed("https://www.example.com/1")
+  end
+
+  it "can add a new webhook" do
+    webhooks_page.visit_page
+    webhooks_page.add_webhook(payload_url: "https://www.example.com/2")
+
+    expect(webhooks_page).to have_webhook_details("https://www.example.com/2")
+
+    webhooks_page.click_back
+
+    expect(webhooks_page).to have_webhook_listed("https://www.example.com/2")
+  end
+
+  it "can edit existing webhooks" do
+    webhooks_page.visit_page
+    webhooks_page.click_edit("https://www.example.com/1")
+    webhooks_page.edit_payload_url("https://www.example.com/3")
+
+    expect(webhooks_page).to have_webhook_listed("https://www.example.com/3")
+  end
+
+  it "can delete webhooks" do
+    webhooks_page.visit_page
+    webhooks_page.click_delete("https://www.example.com/1")
+
+    dialog.click_danger
+
+    expect(webhooks_page).to have_no_webhook_listed("https://www.example.com/1")
+  end
+end

spec/system/page_objects/pages/admin_webhooks.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class AdminWebhooks < PageObjects::Pages::Base
+      def visit_page
+        page.visit("/admin/api/web_hooks")
+        self
+      end
+
+      def has_webhook_listed?(url)
+        page.has_css?(table_selector, text: url)
+      end
+
+      def has_no_webhook_listed?(url)
+        page.has_no_css?(table_selector, text: url)
+      end
+
+      def has_webhook_details?(url)
+        page.has_css?(summary_selector, text: url)
+      end
+
+      def add_webhook(payload_url:)
+        page.find(header_actions_selector, text: I18n.t("admin_js.admin.web_hooks.add")).click
+
+        form = page.find(form_selector)
+        form.find(payload_url_field_selector).fill_in(with: payload_url)
+
+        click_save
+      end
+
+      def edit_payload_url(payload_url)
+        form = page.find(form_selector)
+        form.find(payload_url_field_selector).fill_in(with: payload_url)
+
+        click_save
+      end
+
+      def click_back
+        page.find(back_button_selector).click
+      end
+
+      def click_save
+        page.find(save_button_selector).click
+      end
+
+      def click_edit(payload_url)
+        row = page.find(row_selector, text: payload_url)
+        row.find("button", text: I18n.t("admin_js.admin.web_hooks.edit")).click
+      end
+
+      def click_delete(payload_url)
+        row = page.find(row_selector, text: payload_url)
+        row.find(".webhook-menu-trigger").click
+        page.find(".admin-web-hook__delete").click
+      end
+
+      private
+
+      def table_selector
+        ".admin-web_hooks__items"
+      end
+
+      def row_selector
+        ".d-admin-row__content"
+      end
+
+      def form_selector
+        ".form-kit"
+      end
+
+      def summary_selector
+        ".admin-webhooks__summary"
+      end
+
+      def header_actions_selector
+        ".d-page-header__actions"
+      end
+
+      def payload_url_field_selector
+        "input[name='payload_url']"
+      end
+
+      def save_button_selector
+        ".save"
+      end
+
+      def back_button_selector
+        ".go-back"
+      end
+    end
+  end
+end