[#59997] add javascript to show/hide pattern input

app/components/work_packages/types/subject_configuration_component.rb

@@ -38,7 +38,12 @@ def form_options
         {
           url: "https://example.com",
           method: :put,
-          model:
+          model:,
+          data: {
+            application_target: "dynamic",
+            controller: "admin--subject-configuration",
+            admin__subject_configuration_hide_pattern_input_value: true
+          }
         }
       end
     end

app/forms/work_packages/types/subject_configuration_form.rb

@@ -37,23 +37,27 @@ class SubjectConfigurationForm < ApplicationForm
             value: "manual",
             checked: !has_pattern?,
             label: I18n.t("types.edit.subject_configuration.manually_editable_subjects.label"),
-            caption: I18n.t("types.edit.subject_configuration.manually_editable_subjects.caption")
+            caption: I18n.t("types.edit.subject_configuration.manually_editable_subjects.caption"),
+            data: { action: "admin--subject-configuration#hidePatternInput" }
           )
           group.radio_button(
             value: "auto",
             checked: has_pattern?,
             label: I18n.t("types.edit.subject_configuration.automatically_generated_subjects.label"),
-            caption: I18n.t("types.edit.subject_configuration.automatically_generated_subjects.caption")
+            caption: I18n.t("types.edit.subject_configuration.automatically_generated_subjects.caption"),
+            data: { action: "admin--subject-configuration#showPatternInput" }
           )
         end
 
-        subject_form.text_field(
-          name: :pattern,
-          label: I18n.t("types.edit.subject_configuration.pattern.label"),
-          caption: I18n.t("types.edit.subject_configuration.pattern.caption"),
-          required: true,
-          input_width: :large
-        )
+        subject_form.group(data: { "admin--subject-configuration-target": "patternInput" }) do |toggleable_group|
+          toggleable_group.text_field(
+            name: :pattern,
+            label: I18n.t("types.edit.subject_configuration.pattern.label"),
+            caption: I18n.t("types.edit.subject_configuration.pattern.caption"),
+            required: true,
+            input_width: :large
+          )
+        end
 
         subject_form.submit(name: :submit, label: I18n.t(:button_save), scheme: :primary)
       end

frontend/src/stimulus/controllers/dynamic/admin/subject-configuration.controller.ts

@@ -0,0 +1,67 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) the OpenProject GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See COPYRIGHT and LICENSE files for more details.
+ * ++
+ */
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class SubjectConfigurationController extends Controller {
+  static targets = [
+    'patternInput',
+  ];
+
+  static values = {
+    hidePatternInput: Boolean,
+  };
+
+  declare readonly hidePatternInputValue:boolean;
+
+  declare readonly patternInputTarget:HTMLDivElement;
+
+  connect() {
+    if (this.hidePatternInputValue) {
+      this.hidePatternInput();
+    }
+  }
+
+  showPatternInput() {
+    this.togglePatternInput('show');
+  }
+
+  hidePatternInput() {
+    this.togglePatternInput('hide');
+  }
+
+  private togglePatternInput(toggle:'show'|'hide') {
+    if (toggle === 'show') {
+      this.patternInputTarget.classList.remove('d-none');
+    } else {
+      this.patternInputTarget.classList.add('d-none');
+    }
+  }
+}