Skip to content

Commit

Permalink
GDB-11717: UI not responsive when trying to delete a lot of uploaded …
Browse files Browse the repository at this point in the history
…files from the imports screen

## What
The dialog content overflow is broken.
 Steps to reproduce:
  - Add many files for import (20–30);
  - Select all of them;
  - Click on the "Remove" button.

## Why
The confirmation dialog in the import view uses the "modal-warning.html" template for confirmation. It is passed to the $uibModal service to open the dialog.
This creates a <div> container with the class "modal-content", which has a display: flex declaration. Its children include three elements with the classes "modal-header", "modal-body", and "modal-footer". The dialog has a max-height of 90vh, and the "modal-body" has CSS rules that make it fit all available height within the dialog. If the content exceeds this height, a scrollbar should appear. Event handling is properly set up and should not cause this issue. However, [in this merge request (MR)](#1632), we added an additional container around these children, which broke the flex functionality.

## How
- The changes made aimed to prevent the right sidebar from closing when clicking on a dialog opened from it (for example, in the cluster view). The additional container had an onClick handler that prevented event propagation, ensuring that clicks on the dialog did not close the sidebar. However, this fix only worked when clicking inside the dialog—clicking outside still closed the sidebar. As a result, I removed this fix;
- Disabled automatic closing of the sidebar when the user clicks outside the panel;
- Added the ability to close the sidebar by pressing "Esc".
  • Loading branch information
boyan-tonchev committed Feb 14, 2025
1 parent 64b76d7 commit d635403
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 20 deletions.
5 changes: 0 additions & 5 deletions src/js/angular/core/controllers.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,6 @@ function SimpleModalCtrl($scope, $uibModalInstance, $sce, config) {
$scope.confirmButtonKey = config.confirmButtonKey;
$scope.title = config.title;
$scope.message = $sce.trustAsHtml(config.message);
$scope.onClick = ($event) => {
if (config.stopPropagation) {
$event.stopPropagation();
}
};

$scope.ok = function () {
$uibModalInstance.close();
Expand Down
25 changes: 10 additions & 15 deletions src/js/angular/core/templates/modal/modal-warning.html
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
<div ng-click="onClick($event)">
<div class="modal-header">
<button ng-click="cancel();" class="close" aria-hidden="true"></button>
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<div class="lead" ng-bind-html="message">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel-btn" ng-click="cancel()">{{'common.cancel.btn' |
translate}}
</button>
<button class="btn btn-primary confirm-btn" ng-click="ok()">{{ (confirmButtonKey || 'common.yes.btn') | translate}}
</button>
<div class="modal-header">
<button ng-click="cancel();" class="close" aria-hidden="true"></button>
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<div class="lead" ng-bind-html="message">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel-btn" ng-click="cancel()">{{'common.cancel.btn' | translate}}</button>
<button class="btn btn-primary confirm-btn" ng-click="ok()">{{ (confirmButtonKey || 'common.yes.btn') | translate}}</button>
</div>
2 changes: 2 additions & 0 deletions src/pages/cluster-management/clusterInfo.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,8 @@ <h1>
onopen="onopen"
onclose="onclose"
ps-side="right"
ps-click-outside="false"
ps-key-listener="true"
ps-custom-height="calc(100vh - 55px)"
ps-size="{{ clusterConfigurationPanelSize }}">
<cluster-configuration current-node="currentNode"
Expand Down

0 comments on commit d635403

Please sign in to comment.