Merge pull request #23373 from opf/bug/64359-work-package-configuration-dialog-s-highlighting-tab-has-no-space-between-radio-buttons-and-labels

[64359] Work package configuration dialog's highlighting tab has no space between radio buttons and labels

frontend/src/app/features/boards/board/configuration-modal/board-configuration.modal.html

@@ -1,5 +1,5 @@
 <div
-  class="spot-modal loading-indicator--location"
+  class="spot-modal wp-table--configuration-modal loading-indicator--location"
   data-indicator-name="modal"
 >
   <div id="spotModalTitle" class="spot-modal--header">{{text.title}}</div>

frontend/src/app/features/boards/board/configuration-modal/tabs/highlighting-tab.component.html

@@ -2,7 +2,7 @@
   <form>
     <p [textContent]="text.highlighting_mode.description"></p>
 
-    <div class="form--field -full-width">
+    <div class="form--field">
       <div class="form--field-container">
         <label class="option-label">
           <input type="radio"
@@ -11,10 +11,17 @@
                  [value]="true"
                  name="entire_card_switch">
           <span [textContent]="text.highlighting_mode.entire_card_by"></span>
-          &ngsp;
+        </label>
+      </div>
+    </div>
+
+    <div class="form--field">
+      <div class="form--field-container">
+        <div class="form--select-container">
           <select (change)="updateMode($event.target.value)"
                   id="selected_attribute"
                   name="selected_attribute"
+                  [disabled]="highlightingMode === 'none'"
                   class="form--select form--inline-select option-label--select">
             <option [textContent]="text.highlighting_mode.type"
                     [selected]="lastEntireCardAttribute === 'type'"
@@ -23,10 +30,11 @@
                     [selected]="lastEntireCardAttribute === 'priority'"
                     value="priority"></option>
           </select>
-        </label>
+        </div>
       </div>
     </div>
-    <div class="form--field -full-width">
+
+    <div class="form--field">
       <div class="form--field-container">
         <label class="option-label">
           <input type="radio"
@@ -38,6 +46,5 @@
         </label>
       </div>
     </div>
-
   </form>
 </div>

frontend/src/app/features/work-packages/components/wp-table/configuration-modal/tabs/highlighting-tab.component.html

@@ -2,15 +2,19 @@
   <form>
     <p [textContent]="text.highlighting_mode.description"></p>
     <div class="form--field">
-      <label class="form--label">
-        <input type="radio"
-               [(ngModel)]="highlightingMode"
-               (change)="updateMode($event.target.value)"
-               value="inline"
-               name="highlighting_mode_switch">
-        <span [textContent]="text.highlighting_mode.inline"></span>&nbsp;
-      </label>
+      <div class="form--field-container">
+        <label class="option-label">
+          <input type="radio"
+                 [(ngModel)]="highlightingMode"
+                 (change)="updateMode($event.target.value)"
+                 value="inline"
+                 name="highlighting_mode_switch">
+          <span [textContent]="text.highlighting_mode.inline"></span>&nbsp;
+        </label>
+      </div>
+    </div>
 
+    <div class="form--field">
       <div class="form--field-container">
         <div class="form--select-container">
           <ng-select #highlightedAttributesNgSelect
@@ -32,21 +36,26 @@
     </div>
 
     <div class="form--field">
-      <label class="form--label">
-        <input type="radio"
-               [(ngModel)]="entireRowMode"
-               (change)="updateMode('entire-row')"
-               [value]="true"
-               name="entire_row_switch">
-        <span [textContent]="text.highlighting_mode.entire_row_by"></span>
-      </label>
+      <div class="form--field-container">
+        <label class="option-label">
+          <input type="radio"
+                 [(ngModel)]="entireRowMode"
+                 (change)="updateMode('entire-row')"
+                 [value]="true"
+                 name="entire_row_switch">
+          <span [textContent]="text.highlighting_mode.entire_row_by"></span>
+        </label>
+      </div>
+    </div>
 
+    <div class="form--field">
       <div class="form--field-container">
         <div class="form--select-container">
           <ng-select #rowHighlightNgSelect
                      [items]="availableRowHighlightedAttributes"
                      [(ngModel)]="lastEntireRowAttribute"
                      [clearable]="false"
+                     [disabled]="highlightingMode === 'inline' || highlightingMode === 'none'"
                      (open)="onOpen(rowHighlightNgSelect)"
                      (change)="updateMode($event.value)"
                      bindLabel="name"
@@ -60,14 +69,16 @@
     </div>
 
     <div class="form--field">
-      <label class="form--label">
-        <input type="radio"
-               [(ngModel)]="highlightingMode"
-               (change)="updateMode($event.target.value)"
-               value="none"
-               name="highlighting_mode_switch">
-        <span [textContent]="text.highlighting_mode.none"></span>
-      </label>
+      <div class="form--field-container">
+        <label class="option-label">
+          <input type="radio"
+                 [(ngModel)]="highlightingMode"
+                 (change)="updateMode($event.target.value)"
+                 value="none"
+                 name="highlighting_mode_switch">
+          <span [textContent]="text.highlighting_mode.none"></span>
+        </label>
+      </div>
     </div>
   </form>
 </div>

modules/boards/spec/features/board_highlighting_spec.rb

@@ -87,17 +87,17 @@ RSpec.describe "Work Package boards spec", :js, :selenium do
     expect(page).to have_css(".__hl_inline_type_#{type2.id}")
 
     # Highlight whole card by priority
-    board_page.change_board_highlighting "inline", "Priority"
+    board_page.change_board_highlighting "Entire card by", "Priority"
     expect(page).to have_css(".__hl_background_priority_#{priority.id}")
     expect(page).to have_css(".__hl_background_priority_#{priority2.id}")
 
     # Highlight whole card by type
-    board_page.change_board_highlighting "inline", "Type"
+    board_page.change_board_highlighting "Entire card by", "Type"
     expect(page).to have_css(".__hl_background_type_#{type.id}")
     expect(page).to have_css(".__hl_background_type_#{type2.id}")
 
     # Disable highlighting
-    board_page.change_board_highlighting "none"
+    board_page.change_board_highlighting "No highlighting"
     expect(page).to have_no_css(".__hl_background_type_#{type.id}")
     expect(page).to have_no_css(".__hl_background_type_#{type2.id}")
 

modules/boards/spec/features/support/board_page.rb

@@ -374,9 +374,8 @@ module Pages
     def change_board_highlighting(mode, attribute = nil)
       click_dropdown_entry "Configure view"
 
-      if attribute.nil?
-        choose(option: mode)
-      else
+      choose mode
+      unless attribute.nil?
         select attribute, from: "selected_attribute"
       end
 

spec/support/components/work_packages/table_configuration/highlighting.rb

@@ -47,7 +47,7 @@ module Components
         choose "Entire row by"
 
         # Open select field
-        within(page.all(".form--field")[1]) do
+        within(page.all(".form--field")[3]) do
           page.find(".ng-input input").click
         end
         page.find(".ng-dropdown-panel .ng-option", text: label).click
@@ -59,7 +59,7 @@ module Components
         choose "Highlighted attribute(s)"
 
         # Open select field
-        within(page.all(".form--field")[0]) do
+        within(page.all(".form--field")[1]) do
           page.find(".ng-input input").click
         end