FE - Cascading Setting for Delayed Project Deletion

Release notes

Problem to solve

In #321724 (closed), we introduced cascading settings for delayed project deletion. This issue will track frontend work for this feature.

Proposal

Parent group

Child group

Implementation plan

1. Create a new HAML partial for the "Enforce for all subgroups" checkbox. Partial will be called app/views/shared/cascading_settings/_enforcement_checkbox.html.haml and look something like this:

- attribute = local_assigns.fetch(:attribute, nil)
- group = local_assigns.fetch(:group, nil)
- form = local_assigns.fetch(:form, nil)

- return unless attribute && group && form && cascading_namespace_settings_enabled?
- return if group.namespace_settings.public_send("#{attribute}_locked?")

- lock_attribute = "lock_#{attribute}"

.gl-form-checkbox.custom-control.custom-checkbox
  = form.check_box lock_attribute, checked: group.namespace_settings.public_send(lock_attribute), class: 'custom-control-input'
  = form.label lock_attribute, class: 'custom-control-label' do
    %span= s_('NamespaceSettings|Enforce for all subgroups')
    %p.help-text= s_('NamespaceSettings|All subgroups will inherit this setting.')

1. Create a new HAML partial for the setting label and lock icon. Partial will be called app/views/shared/cascading_settings/_setting_label.html.haml and look something like this:

- attribute = local_assigns.fetch(:attribute, nil)
- group = local_assigns.fetch(:group, nil)
- form = local_assigns.fetch(:form, nil)
- help_text = local_assigns.fetch(:help_text, nil)

- return unless attribute && group && form

- locked_method = "#{attribute}_locked?"

= form.label attribute, class: 'custom-control-label', aria: { disabled: group.namespace_settings.public_send(locked_method) } do
  %span.position-relative.gl-pr-6.gl-display-inline-flex
    = yield
    - if group.namespace_settings.public_send(locked_method)
      %button.position-absolute.gl-top-3.gl-right-0.gl-translate-y-n50.gl-cursor-default.btn.btn-default.btn-sm.gl-button.btn-default-tertiary.js-cascading-setting-lock-popover-target{ class: 'gl-p-1! gl-text-gray-600! gl-bg-transparent!',
        type: 'button',
        data: { locked_by_namespace: { full_name: 'test', path: '/foo/bar' }.to_json } }
        = sprite_icon('lock', size: 16)
  - if help_text
    %p.help-text
      = help_text

1. Use those partials in ee/app/views/groups/settings/_delayed_project_removal.html.haml
2. Create app/assets/javascripts/namespaces/components/cascading_setting_lock_popover.vue that finds all of the .js-cascading-setting-lock-popover-target elements and mounts a GlPopover component for that element.
3. Create app/assets/javascripts/namespaces/cascading_setting_lock_popover.js which mounts cascading_setting_lock_popover.vue.