scottyaslan commented on code in PR #11193:
URL: https://github.com/apache/nifi/pull/11193#discussion_r3191484174
##########
nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss:
##########
@@ -533,6 +533,32 @@
background-color: var(--nf-caution-default);
}
+ /* progress-bar status overrides */
Review Comment:
Yes, but could you please move these down? There are some other component
overrides towards the bottom for mat-select and mat-option. This belongs there.
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/connector-property-input/connector-property-input.component.html:
##########
@@ -26,7 +26,44 @@
</mat-checkbox>
}
@default {
- @if (shouldUseSelect()) {
+ @if (shouldUseAssetUpload()) {
+ <div class="w-full flex flex-col gap-1"
data-qa="property-input-asset-upload-block">
+ <div class="text-xs tertiary-color">
+ {{ prop.name }}
+ @if (prop.required) {
+ <span aria-hidden="true"> *</span>
+ }
+ </div>
+ <asset-upload
+ [formControl]="formControl"
+ [assets]="currentAssets()"
+ [uploadProgress]="assetUploadProgress()"
+ [multiple]="isMultipleAssets()"
+ (filesSelected)="onAssetFilesSelected($event)"
+ (deleteAsset)="onAssetDeleteRequested($event)"
+ (dismissFailedUpload)="onDismissFailedUpload($event)"
+ data-qa="property-input-asset-upload">
+ </asset-upload>
+ @if (prop.description && (!parentControl?.invalid ||
!parentControl?.touched)) {
+ <mat-hint class="text-xs">{{ prop.description
}}</mat-hint>
+ }
+ @if (parentControl?.hasError('required') &&
parentControl?.touched) {
+ <mat-error class="error-color text-xs"
data-qa="property-input-asset-required-error">
Review Comment:
Aren't mat-error already colored correctly?
```suggestion
<mat-error
data-qa="property-input-asset-required-error">
```
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/connector-property-input/connector-property-input.component.html:
##########
@@ -26,7 +26,44 @@
</mat-checkbox>
}
@default {
- @if (shouldUseSelect()) {
+ @if (shouldUseAssetUpload()) {
+ <div class="w-full flex flex-col gap-1"
data-qa="property-input-asset-upload-block">
+ <div class="text-xs tertiary-color">
+ {{ prop.name }}
+ @if (prop.required) {
+ <span aria-hidden="true"> *</span>
+ }
+ </div>
+ <asset-upload
+ [formControl]="formControl"
+ [assets]="currentAssets()"
+ [uploadProgress]="assetUploadProgress()"
+ [multiple]="isMultipleAssets()"
+ (filesSelected)="onAssetFilesSelected($event)"
+ (deleteAsset)="onAssetDeleteRequested($event)"
+ (dismissFailedUpload)="onDismissFailedUpload($event)"
+ data-qa="property-input-asset-upload">
+ </asset-upload>
+ @if (prop.description && (!parentControl?.invalid ||
!parentControl?.touched)) {
+ <mat-hint class="text-xs">{{ prop.description
}}</mat-hint>
+ }
+ @if (parentControl?.hasError('required') &&
parentControl?.touched) {
+ <mat-error class="error-color text-xs"
data-qa="property-input-asset-required-error">
+ This field is required
+ </mat-error>
+ }
+ @if (parentControl?.hasError('assetContentMissing') &&
parentControl?.touched) {
+ <mat-error class="error-color text-xs"
data-qa="property-input-asset-missing-error">
+ Asset content is missing
+ </mat-error>
+ }
+ @if (parentControl?.hasError('verificationError')) {
+ <mat-error class="error-color text-xs"
data-qa="property-input-asset-verification-error">
Review Comment:
```suggestion
<mat-error
data-qa="property-input-asset-verification-error">
```
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/connector-property-input/connector-property-input.component.html:
##########
@@ -26,7 +26,44 @@
</mat-checkbox>
}
@default {
- @if (shouldUseSelect()) {
+ @if (shouldUseAssetUpload()) {
+ <div class="w-full flex flex-col gap-1"
data-qa="property-input-asset-upload-block">
+ <div class="text-xs tertiary-color">
+ {{ prop.name }}
+ @if (prop.required) {
+ <span aria-hidden="true"> *</span>
+ }
+ </div>
+ <asset-upload
+ [formControl]="formControl"
+ [assets]="currentAssets()"
+ [uploadProgress]="assetUploadProgress()"
+ [multiple]="isMultipleAssets()"
+ (filesSelected)="onAssetFilesSelected($event)"
+ (deleteAsset)="onAssetDeleteRequested($event)"
+ (dismissFailedUpload)="onDismissFailedUpload($event)"
+ data-qa="property-input-asset-upload">
+ </asset-upload>
+ @if (prop.description && (!parentControl?.invalid ||
!parentControl?.touched)) {
+ <mat-hint class="text-xs">{{ prop.description
}}</mat-hint>
Review Comment:
mat-hint should already adhere to the design system
```suggestion
<mat-hint>{{ prop.description }}</mat-hint>
```
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/connector-property-input/connector-property-input.component.html:
##########
@@ -26,7 +26,44 @@
</mat-checkbox>
}
@default {
- @if (shouldUseSelect()) {
+ @if (shouldUseAssetUpload()) {
+ <div class="w-full flex flex-col gap-1"
data-qa="property-input-asset-upload-block">
+ <div class="text-xs tertiary-color">
+ {{ prop.name }}
+ @if (prop.required) {
+ <span aria-hidden="true"> *</span>
+ }
+ </div>
+ <asset-upload
+ [formControl]="formControl"
+ [assets]="currentAssets()"
+ [uploadProgress]="assetUploadProgress()"
+ [multiple]="isMultipleAssets()"
+ (filesSelected)="onAssetFilesSelected($event)"
+ (deleteAsset)="onAssetDeleteRequested($event)"
+ (dismissFailedUpload)="onDismissFailedUpload($event)"
+ data-qa="property-input-asset-upload">
+ </asset-upload>
+ @if (prop.description && (!parentControl?.invalid ||
!parentControl?.touched)) {
+ <mat-hint class="text-xs">{{ prop.description
}}</mat-hint>
+ }
+ @if (parentControl?.hasError('required') &&
parentControl?.touched) {
+ <mat-error class="error-color text-xs"
data-qa="property-input-asset-required-error">
+ This field is required
+ </mat-error>
+ }
+ @if (parentControl?.hasError('assetContentMissing') &&
parentControl?.touched) {
+ <mat-error class="error-color text-xs"
data-qa="property-input-asset-missing-error">
Review Comment:
mat-error should already adhere to the design system
```suggestion
<mat-error
data-qa="property-input-asset-missing-error">
```
--
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]
