Merge branch '33663-resolve-duplication-project-feature-toggle-buttons' into 'master'

Resolve duplication `project-feature-toggle` buttons

Closes #33663

See merge request gitlab-org/gitlab!20278

app/views/ci/variables/_variable_row.html.haml

@@ -44,31 +44,21 @@
       .ci-variable-body-item.ci-variable-protected-item.table-section.section-20.mr-0.border-top-0
         .append-right-default
           = s_("CiVariable|Protected")
-        %button{ type: 'button',
-          class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if is_protected}",
-          "aria-label": s_("CiVariable|Toggle protected") }
+        = render "shared/buttons/project_feature_toggle", is_checked: is_protected, label: s_("CiVariable|Toggle protected") do
           %input{ type: "hidden",
             class: 'js-ci-variable-input-protected js-project-feature-toggle-input',
             name: protected_input_name,
             value: is_protected,
             data: { default: is_protected_default.to_s } }
-          %span.toggle-icon
-            = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-            = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
       .ci-variable-body-item.ci-variable-masked-item.table-section.section-20.mr-0.border-top-0
         .append-right-default
           = s_("CiVariable|Masked")
-        %button{ type: 'button',
-          class: "js-project-feature-toggle project-feature-toggle qa-variable-masked #{'is-checked' if is_masked}",
-          "aria-label": s_("CiVariable|Toggle masked") }
+        = render "shared/buttons/project_feature_toggle", is_checked: is_masked, label: s_("CiVariable|Toggle masked"), class_list: "js-project-feature-toggle project-feature-toggle qa-variable-masked" do
           %input{ type: "hidden",
             class: 'js-ci-variable-input-masked js-project-feature-toggle-input',
             name: masked_input_name,
             value: is_masked,
             data: { default: is_masked_default.to_s } }
-          %span.toggle-icon
-            = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-            = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
       = render_if_exists 'ci/variables/environment_scope', form_field: form_field, variable: variable
     %button.js-row-remove-button.ci-variable-row-remove-button.table-section.section-5.border-top-0{ type: 'button', 'aria-label': s_('CiVariables|Remove variable row') }
       = icon('minus-circle')

app/views/clusters/clusters/_form.html.haml

@@ -3,14 +3,8 @@
   .form-group
     %h5= s_('ClusterIntegration|Integration status')
     %label.append-bottom-0.js-cluster-enable-toggle-area
-      %button{ type: 'button',
-        class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if @cluster.enabled?} #{'is-disabled' unless can?(current_user, :update_cluster, @cluster)}",
-        "aria-label": s_("ClusterIntegration|Toggle Kubernetes cluster"),
-        disabled: !can?(current_user, :update_cluster, @cluster) }
+      = render "shared/buttons/project_feature_toggle", is_checked: @cluster.enabled?, label: s_("ClusterIntegration|Toggle Kubernetes cluster"), disabled: !can?(current_user, :update_cluster, @cluster) do
         = field.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
-        %span.toggle-icon
-          = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-          = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
       .form-text.text-muted= s_('ClusterIntegration|Enable or disable GitLab\'s connection to your Kubernetes cluster.')
 
   .form-group

app/views/shared/buttons/_project_feature_toggle.html.haml

+- class_list ||= "js-project-feature-toggle project-feature-toggle"
+- data ||= nil
+- disabled ||= false
+- is_checked ||= false
+- label ||= nil
+
+%button{ type: 'button',
+         class: "#{class_list} #{'is-disabled' if disabled} #{'is-checked' if is_checked}",
+         "aria-label": label,
+         disabled: disabled,
+         data: data }
+  - if yield.present?
+    = yield
+  %span.toggle-icon
+    = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
+    = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')

ee/app/views/groups/dependency_proxies/show.html.haml

@@ -13,13 +13,8 @@
       .form-group
         %h5.prepend-top-20= _('Enable proxy')
         .js-dependency-proxy-toggle-area
-          %button{ type: 'button',
-            class: "js-project-feature-toggle project-feature-toggle #{'is-checked' if @dependency_proxy.enabled?}",
-            "aria-label": s_("DependencyProxy|Toggle Dependency Proxy") }
+          = render "shared/buttons/project_feature_toggle", is_checked: @dependency_proxy.enabled?, label: s_("DependencyProxy|Toggle Dependency Proxy") do
             = f.hidden_field :enabled, { class: 'js-project-feature-toggle-input'}
-            %span.toggle-icon
-              = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-              = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
 
       - if @dependency_proxy.enabled
         = render 'groups/dependency_proxies/url'

ee/app/views/groups/saml_providers/_form.html.haml

@@ -3,41 +3,23 @@
     .form-group
       = form_errors(saml_provider)
       %label.toggle-wrapper.mb-0.js-group-saml-enabled-toggle-area
-        %button{ type: 'button',
-          class: "js-project-feature-toggle project-feature-toggle d-inline #{'is-checked' if saml_provider.enabled?}",
-          "aria-label": s_("GroupSAML|Toggle SAML authentication") }
+        = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enabled?, label: s_("GroupSAML|Toggle SAML authentication"), class_list: "js-project-feature-toggle project-feature-toggle d-inline" do
           = f.hidden_field :enabled, { class: 'js-group-saml-enabled-input js-project-feature-toggle-input'}
-          %span.toggle-icon
-            = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-            = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
         %span.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enable SAML authentication for this group.')
     - if Feature.enabled?(:enforced_sso, group)
       .form-group
         %label.toggle-wrapper.mb-0.js-group-saml-enforced-sso-toggle-area
-          %button{ type: 'button',
-            class: "js-project-feature-toggle js-group-saml-enforced-sso-toggle project-feature-toggle d-inline #{'is-checked' if saml_provider.enforced_sso?}",
-            data: { qa_selector: 'enforced_sso_toggle_button' },
-            "aria-label": s_("GroupSAML|Enforced SSO") }
+          = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enabled?, label: s_("GroupSAML|Enforced SSO"), class_list: "js-project-feature-toggle js-group-saml-enforced-sso-toggle project-feature-toggle d-inline", data: { qa_selector: 'enforced_sso_toggle_button' } do
             = f.hidden_field :enforced_sso, { class: 'js-group-saml-enforced-sso-input js-project-feature-toggle-input'}
-            %span.toggle-icon
-              = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-              = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
-            - sso_enforcement_text = Feature.enabled?(:enforced_sso_requires_session, group) ? s_('GroupSAML|Enforce SSO-only authentication for this group.') : s_('GroupSAML|Enforce SSO-only membership for this group.')
-          %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= sso_enforcement_text
+          %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= Feature.enabled?(:enforced_sso_requires_session, group) ? s_('GroupSAML|Enforce SSO-only authentication for this group.') : s_('GroupSAML|Enforce SSO-only membership for this group.')
         .form-text.text-muted.js-group-saml-enforced-sso-helper-text{ style: "display: #{'none' if saml_provider.enabled?} #{'block' unless saml_provider.enabled?}" }
           %span
             = s_('GroupSAML|To be able to enable enforced SSO, you first need to enable SAML authentication.')
     - if Feature.enabled?(:group_managed_accounts, group)
       .form-group
         %label.toggle-wrapper.mb-0.js-group-saml-enforced-group-managed-accounts-toggle-area
-          %button{ type: 'button',
-            class: "js-project-feature-toggle js-group-saml-enforced-group-managed-accounts-toggle project-feature-toggle d-inline #{'is-checked' if saml_provider.enforced_group_managed_accounts?}",
-            data: { qa_selector: 'group_managed_accounts_toggle_button' },
-            "aria-label": s_("GroupSAML|Enforced SSO") }
+          = render "shared/buttons/project_feature_toggle", is_checked: saml_provider.enabled?, label: s_("GroupSAML|Enforced SSO"), class_list: "js-project-feature-toggle js-group-saml-enforced-group-managed-accounts-toggle project-feature-toggle d-inline", data: { qa_selector: 'group_managed_accounts_toggle_button' } do
             = f.hidden_field :enforced_group_managed_accounts, { class: 'js-group-saml-enforced-group-managed-accounts-input js-project-feature-toggle-input'}
-            %span.toggle-icon
-              = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-              = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
           %span.form-text.d-inline.font-weight-normal.align-text-bottom.ml-3= s_('GroupSAML|Enforce users to have dedicated group managed accounts for this group.')
         .form-text.text-muted.js-group-saml-enforced-group-managed-accounts-helper-text{ style: "display: #{'none' if saml_provider.enforced_sso?} #{'block' unless saml_provider.enforced_sso?}" }
           %span

ee/app/views/projects/protected_branches/ee/_code_owner_approval_form.html.haml

@@ -3,11 +3,6 @@
     %label.col-md-2.text-right{ for: 'code_owner_approval_required' }
       = s_("ProtectedBranch|Require approval from code owners:")
     .col-md-10
-      %button{ type: 'button',
-        class: "js-code-owner-toggle project-feature-toggle is-checked",
-        "aria-label": s_("ProtectedBranch|Toggle code owner approval") }
-        %span.toggle-icon
-          = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-          = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
+      = render "shared/buttons/project_feature_toggle", label: s_("ProtectedBranch|Toggle code owner approval"), class_list: "js-code-owner-toggle project-feature-toggle is-checked"
       .form-text.text-muted
         = s_("ProtectedBranch|Pushes that change filenames matched by the CODEOWNERS file will be rejected")

ee/app/views/projects/protected_branches/ee/_code_owner_approval_table.html.haml

 - if @project.feature_available?(:code_owner_approval_required)
   %td
-    %button{ type: 'button',
-      class: "js-code-owner-toggle project-feature-toggle mr-5 #{'is-checked' if protected_branch.code_owner_approval_required}",
-      "aria-label": s_("ProtectedBranch|Toggle code owner approval") }
-      %span.toggle-icon
-        = sprite_icon('status_success_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-checked')
-        = sprite_icon('status_failed_borderless', size: 16, css_class: 'toggle-icon-svg toggle-status-unchecked')
+    = render "shared/buttons/project_feature_toggle", is_checked: protected_branch.code_owner_approval_required, label: s_("ProtectedBranch|Toggle code owner approval"), class_list: "js-code-owner-toggle project-feature-toggle mr-5"