[midPoint-git] [Evolveum/midpoint] 4c7a04: Fix non clickable part of button

[Andrej]

  Branch: refs/heads/bugfix/10278
  Home:   https://github.com/Evolveum/midpoint
  Commit: 4c7a04d59e0e9db5de1520c3cea26b2516b2574f
      https://github.com/Evolveum/midpoint/commit/4c7a04d59e0e9db5de1520c3cea26b2516b2574f
  Author: Andrej Zan <andrej.zan at evolveum.com>
  Date:   2025-01-28 (Tue, 28 Jan 2025)

  Changed paths:
    M gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/component/wizard/BasicWizardStepPanel.html
    M gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/api/component/wizard/BasicWizardStepPanel.java
    M gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/component/wizard/AbstractWizardStepPanel.java
    M gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/admin/schema/component/BasicDefinitionPanel.java
    M gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/util/VisibleEnableBehaviour.java
    M release-notes.adoc

  Log Message:
  -----------
  Fix non clickable part of button

**What**

Fix the issue where the top part of the button on schema edit wizard
popup was not clickable.

**Notes**

The problem was caused by the `mb-n5` css class set on the top `div` in
modal body:

```html
<div class="modal-body" id="id16c">
    <div class="mt-n4 mb-n5"> <!-- HERE -->
```

It was set in the `BasicDefinitionPanel` and it looks like that class
was added to the `div` to compensate the `mt-5` class in an underlying
`div` with usual (in this case hidden) wizard buttons (next, back, exit,
submit) which is defined in `BasicWizardStepPanel` and its
`BasicWizardStepPanel.html` HTML file.

```html
<div class="d-flex gap-3 justify-content-center mt-5"> <!-- HERE -->
    <!-- Bellow links are basically hidden back/next/submit/exit buttons
    -->
    <a id="id1dd" hidden="" data-wicket-placeholder=""></a>
    <a id="id1de" hidden="" data-wicket-placeholder=""></a>
    <a id="id1df" hidden="" data-wicket-placeholder=""></a>
    <a id="id1e0" hidden="" data-wicket-placeholder=""></a>
</div>
```

However the negative `mb-n5` margin caused that the `div` "overflowed"
through the wizard body to the wizard footer where the buttons of schema
edit wizard popup are placed, and it covered top part of the button,
making it un-clickable.

I decided to fix this problem by hiding whole `div` with original
wizard buttons (next, back, ...) if none of those buttons is visible.
Then I could remove the `mb-n5`.

Note that there is yet another css class `mt-n4` in the same `div`. This
as well looks to me as kind of compensation of a big `mt-5` margin in
the underlying `div`.

```html
<div class="d-flex flex-column align-items-center mt-5">
```

That `div` is as well defined in the `BasicWizardStepPanel` and its
`BasicWizardStepPanel.html` HTML file.

I tried to make that `mt-5` margin customizable, by adding a `wicket:id`
to the corresponding `div` and creating new `WebMarkupContainer` for it
(similarly as I did with the "buttons strip"), with the attribute
appender which would modify (add) correct margin based on the new
`protected` method which could be overridden by subclasses. However, I
realized that adding `wicket:id` to that `div` would mean a lot of
changes in a lot of subclasses, because it changes the "path" on which
the "children" (`wicket:children`) of the subclasses are placed.

Because I wasn't able to find any solution, which would not require
changes in subclasses, I decided to leave this part as it is.

**Fixes:** MID-10278



To unsubscribe from these emails, change your notification settings at https://github.com/Evolveum/midpoint/settings/notifications