Kern dropdown improvements for disabled buttons

Author: lumburovskalina

src/app/base/components/dropdown-iterative/dropdown-iterative.component.html

@@ -35,7 +35,7 @@
             <div *ngFor="let task of arrayOptions">
                 <div class="form-control pl-2">
                     <label
-                        formArrayName="manualLabels"
+                        [formArrayName]="formArrayName"
                         class="label cursor-pointer"
                         (click)="performActionOnOption(task,$event)">
                         <div class="h-4 w-4 border-gray-300 border rounded hover:bg-gray-200"

src/app/base/components/dropdown-iterative/dropdown-iterative.component.ts

@@ -18,6 +18,7 @@ export class DropdownIterativeComponent implements OnInit {
   @Input() optionProperty: string;
   @Input() disabledCondition: boolean;
   @Input() hasCheckboxes: boolean;
+  @Input() formArrayName: string;
 
   @Output() optionClicked = new EventEmitter<string>();
 

src/app/data/components/data-browser/data-browser.component.html

@@ -332,15 +332,7 @@
                                                                         <ng-template
                                                                             [ngIf]="groupItem.get('manualLabels').controls.length == 0"
                                                                             [ngIfElse]="dropDownML">
-                                                                            <button disabled
-                                                                                class="flex flex-row flex-nowrap select select-sm select-bordered search_reduced_item_width search_custom_drowdown_disabled ">
-                                                                                <div class="truncate min-w-0 mr-4">
-                                                                                    <label class="font-normal">No
-                                                                                        Labels
-                                                                                        associated with this
-                                                                                        task</label>
-                                                                                </div>
-                                                                            </button>
+                                                                            <ng-container [ngTemplateOutlet]="buttonLabelsDisabled"></ng-container>
                                                                         </ng-template>
                                                                         <ng-template #dropDownML>
                                                                             <kern-dropdown-iterative
@@ -357,19 +349,14 @@
                                                                     <div class="dropdown">
                                                                         <ng-template
                                                                             [ngIf]="groupItem.get('weakSupervisionLabels').controls.length == 0"
+                                                                            formArrayName="manualLabels"
                                                                             [ngIfElse]="dropDownWS">
-                                                                            <button disabled
-                                                                                class="flex flex-row flex-nowrap select select-sm select-bordered search_reduced_item_width search_custom_drowdown_disabled">
-                                                                                <div class="truncate min-w-0 mr-4">
-                                                                                    <label class="font-normal">No
-                                                                                        Labels associated with this
-                                                                                        task</label>
-                                                                                </div>
-                                                                            </button>
+                                                                            <ng-container [ngTemplateOutlet]="buttonLabelsDisabled"></ng-container>
                                                                         </ng-template>
                                                                         <ng-template #dropDownWS>
                                                                             <kern-dropdown-iterative
                                                                                 [arrayOptions]="groupItem.get('weakSupervisionLabels').controls"
+                                                                                formArrayName="manualLabels"
                                                                                 [hasCheckboxes]="true"
                                                                                 (optionClicked)="setActiveNegateGroup($event)"
                                                                             ></kern-dropdown-iterative>
@@ -1150,4 +1137,19 @@ <h1 class="text-lg text-gray-900 mb-2">Info</h1>
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<ng-template #buttonLabelsDisabled>
+    <button disabled
+        class="cursor-not-allowed inline-flex rounded-md border border-gray-300 w-80 shadow-sm px-4 py-1.5 items-center bg-white text-xs font-semibold text-gray-700 cursor-pointer focus:ring-offset-2 focus:ring-offset-gray-400">
+        <div class="truncate min-w-0 mr-4">
+            No labels associated with this task
+        </div>
+        <svg class="-mr-1 ml-auto h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+            fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clip-rule="evenodd" />
+        </svg>
+    </button>
+</ng-template>