Port the repository config code to Backbone.

 






 

 


  Review Request #12750
  —
  Created Dec. 6, 2022 and updated 

 




















 

  

   Information

  





 
 

  chipx86
 









 
 

  Review Board
 









 
 

  release-6.x
 









 
 

  
 









 
 

  
 









 
 

  12754
 






 




 

  

   Reviewers

  





 
 

  reviewboard
 









 
 

  
 






 








 





  


 
 

  
The JavaScript side of the repository configuration form is very old,

and has existed as a bunch of flat functions that just used jQuery event

handling and global state to do anything.


For a long time now, we've wanted to revisit repository configuration,

but both the backend and frontend implementations have made this tricky.


To begin that process, this change ports the old JavaScript to a new

RB.RepositoryFormView class. This is a pure port of the old code,

quirks and all, with the idea being that we can then begin to more

easily clean it up piece-by-piece.


This does add some asserts to make sure we've correctly loaded all parts

of the DOM, converts gettext code to use our localization template

literals, and properly uses .prop() on checkboxes instead of .val().

Otherwise, nothing's really changed.


Future changes will start to move state into a model, and then begin

cleaning up this form to work like the rest of our codebase.


For now, there are no unit tests. This code isn't intended to work this

way long enough to be worth having tests. Those will come as part of

the modernization work.

 








  


 
 

  
Tested all aspects of the repository configuration form:


    

  • Configuring various tools for custom repositories
    • 

  • Configuring various hosting service repositories, with different tools
    
  and plans
    • 

  • Configuring bug trackers, with and without hosting services (and the
    
  "Use hosting service's bug tracker" checkbox)
    • 

  • Configuring ACLs
    • 

  • Re-editing hosting service credentials
    • 

  • Toggling SSH key display
    • 


 







 









 





  

 


 
 

  



 

  
   


    Summary
    ID

   

  
  

   


    

     

      Port the repository config code to Backbone.
      
The JavaScript side of the repository configuration form is very old,
and has existed as a bunch of flat functions that just used jQuery event
handling and global state to do anything.

For a long time now, we've wanted to revisit repository configuration,
but both the backend and frontend implementations have made this tricky.

To begin that process, this change ports the old JavaScript to a new
`RB.RepositoryFormView` class. This is a pure port of the old code,
quirks and all, with the idea being that we can then begin to more
easily clean it up piece-by-piece.

This does add some asserts to make sure we've correctly loaded all parts
of the DOM, converts gettext code to use our localization template
literals, and properly uses `.prop()` on checkboxes instead of `.val()`.
Otherwise, nothing's really changed.

Future changes will start to move state into a model, and then begin
cleaning up this form to work like the rest of our codebase.

     


    		
    edcf1aaa07cb854231510d9010c005594da3fc53

   



  
 




 













 






 
 
 

  

   

    

     
    

    
    
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
     
  • 
      
     
    • 
    

   

   

    
     

      Description
      From
      Last Updated
     

    
    



     

      
       
       
Outer parens shouldn't be necessary here.

      		
      
       daviddavid
      
      
       
      
     




     

      
       
       
Or here.

      		
      
       daviddavid
      
      
       
      
     




     

      
       
       
Elsewhere we indent these as: let text = (account.hosting_url ? `${account.username} (${account.hosting_url})` : account.username)

      		
      
       daviddavid
      
      
       
      
     




     

      
       
       
These days we should be good to use for (let planType of planTypes)

      		
      
       daviddavid
      
      
       
      
     




     

      
       
       
At this point, I think we should be using const and trailing commas in our templates as well.

      		
      
       daviddavid
      
      
       
      
     


    
   

  

 







 






  

 



















 




 




 














 





 

  

   




david




   

   







  

 



 

  


   

   

    
 
david


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Outer parens shouldn't be necessary here.
    
  
    
 
    

 
    
  


    
 
    
 
      

  


    1. 
 
 
      
 
      
  
 
      
 
      
  
      I think I was initially hitting some ESLint complaints or something.
      
 
      

      2. 


 
    


    

 
    

    3. 






  3. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Or here.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 






  4. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    Elsewhere we indent these as:
    

    

    let text = (account.hosting_url
            ? `${account.username} (${account.hosting_url})`
            : account.username)

    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    5. 






  5. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    These days we should be good to use for (let planType of planTypes)
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    6. 




  6. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    7. 




  

 
















 



 

  

   




chipx86




   

   

  

 



 















 



 

  

   




chipx86




   

   

  

 



 

  


   

   

    
 Review request changed

    
   


  

  

  








 
Change Summary:

 
    

  • Fixed some bad variable references.
    • 

  • Fixed a bad element ID reference in events.
    • 

  • Removed an unused variable.
    • 

  • Cleaned up some bits of code and fixed some lint warnings.
    • 






 



  

   
Commits:

   
    





 

  
   


    

    Summary
    ID

   

  
  

   


    

    

     

      Port the repository config code to Backbone.
      
The JavaScript side of the repository configuration form is very old,
and has existed as a bunch of flat functions that just used jQuery event
handling and global state to do anything.

For a long time now, we've wanted to revisit repository configuration,
but both the backend and frontend implementations have made this tricky.

To begin that process, this change ports the old JavaScript to a new
`RB.RepositoryFormView` class. This is a pure port of the old code,
quirks and all, with the idea being that we can then begin to more
easily clean it up piece-by-piece.

This does add some asserts to make sure we've correctly loaded all parts
of the DOM, converts gettext code to use our localization template
literals, and properly uses `.prop()` on checkboxes instead of `.val()`.
Otherwise, nothing's really changed.

Future changes will start to move state into a model, and then begin
cleaning up this form to work like the rest of our codebase.

     


    		
    58198d801d4a1bc9eb29960e455b3e3f97e1d8eb

   




   


    

    

     

      Port the repository config code to Backbone.
      
The JavaScript side of the repository configuration form is very old,
and has existed as a bunch of flat functions that just used jQuery event
handling and global state to do anything.

For a long time now, we've wanted to revisit repository configuration,
but both the backend and frontend implementations have made this tricky.

To begin that process, this change ports the old JavaScript to a new
`RB.RepositoryFormView` class. This is a pure port of the old code,
quirks and all, with the idea being that we can then begin to more
easily clean it up piece-by-piece.

This does add some asserts to make sure we've correctly loaded all parts
of the DOM, converts gettext code to use our localization template
literals, and properly uses `.prop()` on checkboxes instead of `.val()`.
Otherwise, nothing's really changed.

Future changes will start to move state into a model, and then begin
cleaning up this form to work like the rest of our codebase.

     


    		
    edcf1aaa07cb854231510d9010c005594da3fc53

   



  
 







   		
  




  

   
Diff:

   
    
 Revision 3 (+1486 -912)
Show changes
 
    reviewboard/staticbundles.py 
    reviewboard/static/rb/js/admin/repositoryform.es6.js 
    reviewboard/static/rb/js/admin/views/repositoryFormView.es6.js 
    reviewboard/templates/admin/scmtools/repository/change_form.html 
 

   		
  



 









 

  
Checks run (2 succeeded)



  

 flake8
 passed.
 





  

 JSHint
 passed.
 





 















  

 
















 





 

  

   




david




   

   







  

 



 

  


   

   

    
 
david


    
   


  

  

  



    




  1. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    2. 

















  2. 
 
    
  
  
    
  
 

   
    
    
    



    
 
    
  
    
   
   
    
    
     
     
     
     
     
    
    Show all issues
   
  
    
 
    

    



    
    At this point, I think we should be using const and trailing commas in our templates as well.
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    3. 




  3. 
 
    
  
    
   
    
  
    
 
    

 
    
  


    
 
    
 
      

  

 
    


    

 
    

    4. 




  

 









     

    

   

  

  

   
   Loading...