mcgilman commented on code in PR #8729:
URL: https://github.com/apache/nifi/pull/8729#discussion_r1589213102
##########
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html:
##########
@@ -16,53 +16,64 @@
-->
<div class="prioritizers flex flex-col gap-y-4" cdkDropListGroup>
- <div class="flex flex-col">
- <div>
- Available Prioritizers
- <i
- class="fa fa-info-circle"
- nifiTooltip
- [tooltipComponentType]="TextTip"
- tooltipInputData="Prioritizers that are available to
reprioritize FlowFiles in this processors work queue."></i>
- </div>
- <div
- class="prioritizers-list border"
- cdkDropList
- cdkDropListSortingDisabled
- [cdkDropListDisabled]="isDisabled"
- [cdkDropListData]="availablePrioritizers"
- (cdkDropListDropped)="dropAvailable($event)">
- @for (item of availablePrioritizers; track item; let i = $index) {
- <div
- class="prioritizer-draggable-item border-b
surface-contrast m-1"
- cdkDrag
- cdkDragPreviewContainer="parent">
- <ng-container
- *ngTemplateOutlet="
- prioritizerItem;
- context: { $implicit: item, i: i, canClose: false }
- "></ng-container>
- </div>
- }
+ @if (!isDisabled) {
+ <div class="flex flex-col">
+ <div>
+ Available Prioritizers
+ <i
+ class="fa fa-info-circle"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ tooltipInputData="Prioritizers that are available to
reprioritize FlowFiles in this processors work queue."></i>
+ </div>
+ <div
+ class="cdk-list border"
+ cdkDropList
+ cdkDropListSortingDisabled
+ [cdkDropListDisabled]="isDisabled"
Review Comment:
With this change, this `cdkDropList` is only shown when `!isDisabled` so we
do not need to set `cdkDropListDisabled`.
##########
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html:
##########
@@ -73,20 +84,34 @@
</div>
</div>
<ng-template #prioritizerItem let-item let-i="i" let-canClose="canClose">
- <div class="flex gap-x-3 items-center">
- <div>{{ getPrioritizerLabel(item) }}</div>
- @if (hasDescription(item)) {
- <i
- class="fa fa-info-circle"
- nifiTooltip
- [tooltipComponentType]="TextTip"
- [tooltipInputData]="item.description"></i>
+ @if (!isDisabled) {
+ <div class="flex items-center">
+ <span class="grip pr-5"></span>
+ <div class="prioritizer-name"
[title]="getPrioritizerLabel(item)">{{ getPrioritizerLabel(item) }}</div>
+ @if (hasDescription(item)) {
+ <i
+ class="pl-1 fa fa-info-circle surface-color"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ [tooltipInputData]="item.description"></i>
+ }
+ </div>
+ @if (canClose) {
+ <button class="pr-1" type="button"
(click)="removeSelected(item, i)" [disabled]="isDisabled">
Review Comment:
We no longer need to set `disabled` here since we only render the remove
button when `!isDisabled`.
##########
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.html:
##########
@@ -16,53 +16,64 @@
-->
<div class="prioritizers flex flex-col gap-y-4" cdkDropListGroup>
- <div class="flex flex-col">
- <div>
- Available Prioritizers
- <i
- class="fa fa-info-circle"
- nifiTooltip
- [tooltipComponentType]="TextTip"
- tooltipInputData="Prioritizers that are available to
reprioritize FlowFiles in this processors work queue."></i>
- </div>
- <div
- class="prioritizers-list border"
- cdkDropList
- cdkDropListSortingDisabled
- [cdkDropListDisabled]="isDisabled"
- [cdkDropListData]="availablePrioritizers"
- (cdkDropListDropped)="dropAvailable($event)">
- @for (item of availablePrioritizers; track item; let i = $index) {
- <div
- class="prioritizer-draggable-item border-b
surface-contrast m-1"
- cdkDrag
- cdkDragPreviewContainer="parent">
- <ng-container
- *ngTemplateOutlet="
- prioritizerItem;
- context: { $implicit: item, i: i, canClose: false }
- "></ng-container>
- </div>
- }
+ @if (!isDisabled) {
+ <div class="flex flex-col">
+ <div>
+ Available Prioritizers
+ <i
+ class="fa fa-info-circle"
+ nifiTooltip
+ [tooltipComponentType]="TextTip"
+ tooltipInputData="Prioritizers that are available to
reprioritize FlowFiles in this processors work queue."></i>
+ </div>
+ <div
+ class="cdk-list border"
+ cdkDropList
+ cdkDropListSortingDisabled
+ [cdkDropListDisabled]="isDisabled"
+ [cdkDropListData]="availablePrioritizers"
+ (cdkDropListDropped)="dropAvailable($event)">
+ @for (item of availablePrioritizers; track item; let i =
$index) {
+ <div
+ class="prioritizer-draggable-item border
mat-elevation-z2 m-1 font-bold"
+ cdkDrag
+ cdkDragPreviewContainer="parent">
+ <ng-container
+ *ngTemplateOutlet="
+ prioritizerItem;
+ context: { $implicit: item, i: i, canClose:
false }
+ "></ng-container>
+ </div>
+ }
+ </div>
</div>
- </div>
+ }
<div class="flex flex-col">
<div>
- Selected Prioritizers
+ @if (!isDisabled) {
+ Selected Prioritizers
+ } @else {
+ Prioritizers
Review Comment:
When there are no selected prioritizers this is what the user sees.
Since we are no longer rendering the source list, when there is nothing
selected this looks similar to an `input`. Thoughts on handling this corner
case explicitly so avoid this potential confusion?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
