fix[Op#55967]: correct JS style override anti-pattern

#16181 (comment)
opf · Aug 7, 2024 · 2cff9fb · 2cff9fb
1 parent 710e285
commit 2cff9fb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 19 deletions.
diff --git a/frontend/src/stimulus/controllers/dynamic/project-storage-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/project-storage-form.controller.ts
@@ -195,14 +195,14 @@ export default class ProjectStorageFormController extends Controller {
 
   protected displayFolderSelectionOrLoginButton(isConnected:boolean, projectFolder:IStorageFile|null):void {
     if (isConnected) {
-      this.selectProjectFolderButtonTarget.style.display = 'inline-block';
-      this.loginButtonTarget.style.display = 'none';
+      this.selectProjectFolderButtonTarget.classList.remove('d-none');
+      this.loginButtonTarget.classList.add('d-none');
       this.selectedFolderTextTarget.innerText = projectFolder === null
         ? this.placeholderFolderNameValue
         : projectFolder.name;
     } else {
-      this.selectProjectFolderButtonTarget.style.display = 'none';
-      this.loginButtonTarget.style.display = 'inline-block';
+      this.selectProjectFolderButtonTarget.classList.add('d-none');
+      this.loginButtonTarget.classList.remove('d-none');
       this.selectedFolderTextTarget.innerText = this.notLoggedInValidationValue;
     }
   }
@@ -213,12 +213,12 @@ export default class ProjectStorageFormController extends Controller {
     window.history.replaceState(window.history.state, '', url);
   }
 
-  protected toggleFolderDisplay(value:string):void {
+  private toggleFolderDisplay(value:string):void {
     // If the manual radio button is selected, show the manual folder selection section
     if (this.hasProjectFolderSectionTarget && value === 'manual') {
-      this.projectFolderSectionTarget.style.display = 'flex';
+      this.projectFolderSectionTarget.classList.remove('d-none');
     } else {
-      this.projectFolderSectionTarget.style.display = 'none';
+      this.projectFolderSectionTarget.classList.add('d-none');
     }
   }
 }
diff --git a/frontend/src/stimulus/controllers/dynamic/storages/project-folder-mode-form.controller.ts b/frontend/src/stimulus/controllers/dynamic/storages/project-folder-mode-form.controller.ts
@@ -46,13 +46,4 @@ export default class ProjectFolderModeFormController extends ProjectStorageFormC
       this.selectedFolderTextTarget.innerText = this.notLoggedInValidationValue;
     }
   }
-
-  protected toggleFolderDisplay(value:string):void {
-    // If the manual radio button is selected, show the manual folder selection section
-    if (this.hasProjectFolderSectionTarget && value === 'manual') {
-      this.projectFolderSectionTarget.classList.remove('d-none');
-    } else {
-      this.projectFolderSectionTarget.classList.add('d-none');
-    }
-  }
 }
diff --git a/modules/storages/app/views/storages/project_settings/_project_folder_form.html.erb b/modules/storages/app/views/storages/project_settings/_project_folder_form.html.erb
@@ -121,8 +121,7 @@ See COPYRIGHT and LICENSE files for more details.
   <% end %>
 
   <div
-    style="display: none;"
-    class="form--field-container -with-children-spacing"
+    class="form--field-container -with-children-spacing d-none"
     data-project-storage-form-target="projectFolderSection"
   >
     <%= styled_button_tag class: 'button_no-margin',
@@ -138,7 +137,6 @@ See COPYRIGHT and LICENSE files for more details.
                               inputs: {
                                 input: storage_login_input(@project_storage.storage)
                               },
-                              style: 'display: inline-block',
                               data: {
                                 'project-storage-form-target': "loginButton"
                               }