NIFI-13092: Adding info icons to configuration dialogs (apache#8696)

* NIFI-13092: - Refactoring TextToolTip input to be a string. * NIFI-13092: - Migrating existing info tooltips to use the NiFi tooltip and fa-info-circle icon. * NIFI-13092: - Adding info icons to configuration dialogs where necessary. * NIFI-13092: - Aligning Run Schedule form label between Reporting Tasks and Processors. * NIFI-13092: - Removing primary color from info icons outside of those that appear in tables. * NIFI-13092: - Addressing review feedback. This closes apache#8696
shubhluck · Apr 25, 2024 · d9dc283 · d9dc283
1 parent 0e70f7a
commit d9dc283
Show file tree

Hide file tree

Showing 86 changed files with 764 additions and 473 deletions.
diff --git a/...ges/access-policies/ui/component-access-policies/component-access-policies.component.html b/...ges/access-policies/ui/component-access-policies/component-access-policies.component.html
@@ -80,7 +80,7 @@
                                                         [value]="option.value"
                                                         nifiTooltip
                                                         [tooltipComponentType]="TextTip"
-                                                        [tooltipInputData]="getSelectOptionTipData(option)"
+                                                        [tooltipInputData]="option.description"
                                                         [delayClose]="false"
                                                         >{{ option.text }}
                                                     </mat-option>

diff --git a/...pages/access-policies/ui/component-access-policies/component-access-policies.component.ts b/...pages/access-policies/ui/component-access-policies/component-access-policies.component.ts
@@ -39,7 +39,7 @@ import { distinctUntilChanged } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NiFiCommon } from '../../../../service/nifi-common.service';
-import { ComponentType, isDefinedAndNotNull, SelectOption, TextTipInput } from '../../../../state/shared';
+import { ComponentType, isDefinedAndNotNull, SelectOption } from '../../../../state/shared';
 import { TextTip } from '../../../../ui/common/tooltips/text-tip/text-tip.component';
 import { AccessPolicyEntity, Action, PolicyStatus, ResourceAction } from '../../state/shared';
 import { selectFlowConfiguration } from '../../../../state/flow-configuration/flow-configuration.selectors';
@@ -284,13 +284,6 @@ export class ComponentAccessPolicies implements OnInit, OnDestroy {
         return true;
     }
 
-    getSelectOptionTipData(option: SelectOption): TextTipInput {
-        return {
-            // @ts-ignore
-            text: option.description
-        };
-    }
-
     getContextIcon(): string {
         switch (this.resource) {
             case 'processors':

diff --git a/...app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html b/...app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
@@ -65,7 +65,7 @@
                                                 [value]="option.value"
                                                 nifiTooltip
                                                 [tooltipComponentType]="TextTip"
-                                                [tooltipInputData]="getSelectOptionTipData(option)"
+                                                [tooltipInputData]="option.description"
                                                 [delayClose]="false"
                                                 >{{ option.text }}
                                             </mat-option>
@@ -85,7 +85,7 @@
                                                     [value]="option.value"
                                                     nifiTooltip
                                                     [tooltipComponentType]="TextTip"
-                                                    [tooltipInputData]="getSelectOptionTipData(option)"
+                                                    [tooltipInputData]="option.description"
                                                     [delayClose]="false"
                                                     >{{ option.text }}
                                                 </mat-option>

diff --git a/...c/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.ts b/...c/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.ts
@@ -39,13 +39,7 @@ import { distinctUntilChanged } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NiFiCommon } from '../../../../service/nifi-common.service';
-import {
-    ComponentType,
-    isDefinedAndNotNull,
-    RequiredPermission,
-    SelectOption,
-    TextTipInput
-} from '../../../../state/shared';
+import { ComponentType, isDefinedAndNotNull, RequiredPermission, SelectOption } from '../../../../state/shared';
 import { TextTip } from '../../../../ui/common/tooltips/text-tip/text-tip.component';
 import { AccessPolicyEntity, Action, PolicyStatus } from '../../state/shared';
 import { loadExtensionTypesForPolicies } from '../../../../state/extension-types/extension-types.actions';
@@ -173,13 +167,6 @@ export class GlobalAccessPolicies implements OnInit, OnDestroy {
         return state.loadedTimestamp == initialState.loadedTimestamp;
     }
 
-    getSelectOptionTipData(option: SelectOption): TextTipInput {
-        return {
-            // @ts-ignore
-            text: option.description
-        };
-    }
-
     resourceChanged(value: string): void {
         if (this.globalPolicySupportsReadWrite(value)) {
             this.supportsReadWriteAction = true;

diff --git a/...ow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html b/...ow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
@@ -127,7 +127,7 @@ <h2 mat-dialog-title>Create Connection</h2>
                                                     [value]="option.value"
                                                     nifiTooltip
                                                     [tooltipComponentType]="TextTip"
-                                                    [tooltipInputData]="getSelectOptionTipData(option)"
+                                                    [tooltipInputData]="option.description"
                                                     [delayClose]="false">
                                                     {{ option.text }}
                                                 </mat-option>
@@ -154,7 +154,7 @@ <h2 mat-dialog-title>Create Connection</h2>
                                                     [value]="option.value"
                                                     nifiTooltip
                                                     [tooltipComponentType]="TextTip"
-                                                    [tooltipInputData]="getSelectOptionTipData(option)"
+                                                    [tooltipInputData]="option.description"
                                                     [delayClose]="false">
                                                     {{ option.text }}
                                                 </mat-option>

diff --git a/...flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.ts b/...flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.ts
@@ -37,7 +37,7 @@ import { NifiSpinnerDirective } from '../../../../../../../ui/common/spinner/nif
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TextTip } from '../../../../../../../ui/common/tooltips/text-tip/text-tip.component';
-import { ComponentType, SelectOption, TextTipInput } from '../../../../../../../state/shared';
+import { ComponentType } from '../../../../../../../state/shared';
 import { NiFiState } from '../../../../../../../state';
 import { selectPrioritizerTypes } from '../../../../../../../state/extension-types/extension-types.selectors';
 import { Prioritizers } from '../prioritizers/prioritizers.component';
@@ -200,13 +200,6 @@ export class CreateConnection {
         }
     }
 
-    getSelectOptionTipData(option: SelectOption): TextTipInput {
-        return {
-            // @ts-ignore
-            text: option.description
-        };
-    }
-
     loadBalanceChanged(value: string): void {
         if (value == 'PARTITION_BY_ATTRIBUTE') {
             this.createConnectionForm.addControl('partitionAttribute', new FormControl('', Validators.required));

diff --git a/...connection/destination/destination-process-group/destination-process-group.component.html b/...connection/destination/destination-process-group/destination-process-group.component.html
@@ -37,7 +37,7 @@
                             [disabled]="isDisabled"
                             nifiTooltip
                             [tooltipComponentType]="TextTip"
-                            [tooltipInputData]="getSelectOptionTipData(item)"
+                            [tooltipInputData]="item.description"
                             [delayClose]="false"
                             >{{ item.text }}</mat-option
                         >

diff --git a/...s/connection/destination/destination-process-group/destination-process-group.component.ts b/...s/connection/destination/destination-process-group/destination-process-group.component.ts
@@ -24,7 +24,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { NifiTooltipDirective } from '../../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
-import { SelectOption, TextTipInput } from '../../../../../../../../state/shared';
+import { SelectOption } from '../../../../../../../../state/shared';
 
 @Component({
     selector: 'destination-process-group',
@@ -111,13 +111,6 @@ export class DestinationProcessGroup implements ControlValueAccessor {
         this.selectedInputPort = selectedInputPort;
     }
 
-    getSelectOptionTipData(option: SelectOption): TextTipInput {
-        return {
-            // @ts-ignore
-            text: option.description
-        };
-    }
-
     handleChanged() {
         // mark the component as touched if not already
         if (!this.isTouched) {

diff --git a/...tination/destination-remote-process-group/destination-remote-process-group.component.html b/...tination/destination-remote-process-group/destination-remote-process-group.component.html
@@ -34,7 +34,7 @@
                             [disabled]="item.disabled == true || isDisabled"
                             nifiTooltip
                             [tooltipComponentType]="TextTip"
-                            [tooltipInputData]="getSelectOptionTipData(item)"
+                            [tooltipInputData]="item.description"
                             [delayClose]="false"
                             >{{ item.text }}</mat-option
                         >

diff --git a/...estination/destination-remote-process-group/destination-remote-process-group.component.ts b/...estination/destination-remote-process-group/destination-remote-process-group.component.ts
@@ -24,7 +24,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { NifiTooltipDirective } from '../../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
-import { SelectOption, TextTipInput } from '../../../../../../../../state/shared';
+import { SelectOption } from '../../../../../../../../state/shared';
 
 @Component({
     selector: 'destination-remote-process-group',
@@ -99,13 +99,6 @@ export class DestinationRemoteProcessGroup implements ControlValueAccessor {
         this.selectedInputPort = selectedInputPort;
     }
 
-    getSelectOptionTipData(option: SelectOption): TextTipInput {
-        return {
-            // @ts-ignore
-            text: option.description
-        };
-    }
-
     handleChanged() {
         // mark the component as touched if not already
         if (!this.isTouched) {

diff --git a/...s/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html b/...s/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
@@ -104,11 +104,18 @@ <h2 mat-dialog-title>
                         </div>
                         <div class="flex flex-col mb-5">
                             <div>Id</div>
-                            <div class="unset nifi-surface-default">No value set</div>
+                            <div class="accent-color font-medium">{{ dialogRequest.entity.id }}</div>
                         </div>
                         <div>
                             <mat-form-field>
-                                <mat-label>FlowFile Expiration</mat-label>
+                                <mat-label>
+                                    FlowFile Expiration
+                                    <i
+                                        class="fa fa-info-circle"
+                                        nifiTooltip
+                                        [tooltipComponentType]="TextTip"
+                                        tooltipInputData="The maximum amount of time an object may be in the flow before it will be automatically aged out of the flow."></i>
+                                </mat-label>
                                 <input
                                     matInput
                                     formControlName="flowFileExpiration"
@@ -119,7 +126,14 @@ <h2 mat-dialog-title>
                         <div class="flex gap-x-2">
                             <div class="w-full">
                                 <mat-form-field>
-                                    <mat-label>Back Pressure Object Threshold</mat-label>
+                                    <mat-label>
+                                        Back Pressure Object Threshold
+                                        <i
+                                            class="fa fa-info-circle"
+                                            nifiTooltip
+                                            [tooltipComponentType]="TextTip"
+                                            tooltipInputData="The maximum number of objects that can be queued before back pressure is applied."></i>
+                                    </mat-label>
                                     <input
                                         matInput
                                         formControlName="backPressureObjectThreshold"
@@ -129,7 +143,14 @@ <h2 mat-dialog-title>
                             </div>
                             <div class="w-full">
                                 <mat-form-field>
-                                    <mat-label>Size Threshold</mat-label>
+                                    <mat-label>
+                                        Size Threshold
+                                        <i
+                                            class="fa fa-info-circle"
+                                            nifiTooltip
+                                            [tooltipComponentType]="TextTip"
+                                            tooltipInputData="The maximum data size of objects that can be queued before back pressure is applied."></i>
+                                    </mat-label>
                                     <input
                                         matInput
                                         formControlName="backPressureDataSizeThreshold"
@@ -141,7 +162,14 @@ <h2 mat-dialog-title>
                         <div class="flex gap-x-2">
                             <div class="w-full">
                                 <mat-form-field>
-                                    <mat-label>Load Balance Strategy</mat-label>
+                                    <mat-label>
+                                        Load Balance Strategy
+                                        <i
+                                            class="fa fa-info-circle"
+                                            nifiTooltip
+                                            [tooltipComponentType]="TextTip"
+                                            tooltipInputData="How to load balance the data in this Connection across the nodes in the cluster."></i>
+                                    </mat-label>
                                     <mat-select
                                         formControlName="loadBalanceStrategy"
                                         (selectionChange)="loadBalanceChanged($event.value)">
@@ -151,7 +179,7 @@ <h2 mat-dialog-title>
                                                 [disabled]="connectionReadonly || sourceReadonly || destinationReadonly"
                                                 nifiTooltip
                                                 [tooltipComponentType]="TextTip"
-                                                [tooltipInputData]="getSelectOptionTipData(option)"
+                                                [tooltipInputData]="option.description"
                                                 [delayClose]="false">
                                                 {{ option.text }}
                                             </mat-option>
@@ -162,7 +190,14 @@ <h2 mat-dialog-title>
                             @if (loadBalancePartitionAttributeRequired) {
                                 <div class="w-full">
                                     <mat-form-field>
-                                        <mat-label>Attribute Name</mat-label>
+                                        <mat-label>
+                                            Attribute Name
+                                            <i
+                                                class="fa fa-info-circle"
+                                                nifiTooltip
+                                                [tooltipComponentType]="TextTip"
+                                                tooltipInputData="The FlowFile Attribute to use for determining which node a FlowFile will go to."></i>
+                                        </mat-label>
                                         <input
                                             matInput
                                             formControlName="partitionAttribute"
@@ -175,15 +210,22 @@ <h2 mat-dialog-title>
                         @if (loadBalanceCompressionRequired) {
                             <div>
                                 <mat-form-field>
-                                    <mat-label>Load Balance Compression</mat-label>
+                                    <mat-label>
+                                        Load Balance Compression
+                                        <i
+                                            class="fa fa-info-circle"
+                                            nifiTooltip
+                                            [tooltipComponentType]="TextTip"
+                                            tooltipInputData="Whether or not data should be compressed when being transferred between nodes in the cluster."></i>
+                                    </mat-label>
                                     <mat-select formControlName="compression">
                                         @for (option of loadBalanceCompressionStrategies; track option) {
                                             <mat-option
                                                 [value]="option.value"
                                                 [disabled]="connectionReadonly || sourceReadonly || destinationReadonly"
                                                 nifiTooltip
                                                 [tooltipComponentType]="TextTip"
-                                                [tooltipInputData]="getSelectOptionTipData(option)"
+                                                [tooltipInputData]="option.description"
                                                 [delayClose]="false">
                                                 {{ option.text }}
                                             </mat-option>

diff --git a/...ges/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.ts b/...ges/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.ts
@@ -36,7 +36,7 @@ import { NifiSpinnerDirective } from '../../../../../../../ui/common/spinner/nif
 import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TextTip } from '../../../../../../../ui/common/tooltips/text-tip/text-tip.component';
-import { ComponentType, SelectOption, TextTipInput } from '../../../../../../../state/shared';
+import { ComponentType } from '../../../../../../../state/shared';
 import { NiFiState } from '../../../../../../../state';
 import { selectPrioritizerTypes } from '../../../../../../../state/extension-types/extension-types.selectors';
 import { Prioritizers } from '../prioritizers/prioritizers.component';
@@ -224,7 +224,7 @@ export class EditConnectionComponent {
     initialCompression: string;
 
     constructor(
-        @Inject(MAT_DIALOG_DATA) private dialogRequest: EditConnectionDialogRequest,
+        @Inject(MAT_DIALOG_DATA) public dialogRequest: EditConnectionDialogRequest,
         private formBuilder: FormBuilder,
         private store: Store<NiFiState>,
         private canvasUtils: CanvasUtils,
@@ -340,13 +340,6 @@ export class EditConnectionComponent {
         }
     }
 
-    getSelectOptionTipData(option: SelectOption): TextTipInput {
-        return {
-            // @ts-ignore
-            text: option.description
-        };
-    }
-
     loadBalanceChanged(value: string): void {
         if (value == 'PARTITION_BY_ATTRIBUTE') {
             this.editConnectionForm.addControl(