Editing a web app's UI ‐ Fixing hours list bug on front page

Goal:

Fix this empty space issue in the hours list card on the front page of lib.ua.edu

Where is the code that controls this view?

The hours_ui repo, more specifically this file: https://github.com/ualibweb/hours_ui/blob/master/src/app/list/list.tpl.html

Fixing the bug:

• Git pull the repo to your local machine
• Run “npm install” to set up dependencies
• Now run “grunt demo-live” in the terminal to build and run the hours app locally
• I had to modify the hoursFactory’s resource url a bit to get the hours list to show up. Here’s the before and after of the hoursFactory (file: https://github.com/ualibweb/hours_ui/blob/master/src/app/common/hours.js)
• Before:

• After:

• Now if you run “grunt” you should see the hours-list app running locally. The contents of the local app should change accordingly as you modify the code:

(The “Williams Collection” still shows locally because it was only removed in the production version of hours list)

• Now, we make the change we want to make (In this case, removing “Williams Collection” hours without leaving an empty space)
• To fix this specific bug, we just needed to remove/comment out the conditional tr element for the Williams collection. However since this block carries a ng-repeat-end attribute, we need to make sure to move this attribute somewhere else (In this case, the preceding tr element is a perfect candidate):

• Now, we run “grunt demo-live” and check that everything works fine. Here’s the result:

• “grunt demo-live” creates a build that’s ready to be used in the live server. Now we will update the dev server (as per best practices) and live server
  • Before updating the servers, we need to make a new release of hours_ui and push the code to github. Since the change here is part of a minor change (but not a bug fix, in which case, it would be a patch), we will run grunt bump:minor to update the version number appropriately. Remember, we follow the semver guidelines for versioning. Then we git push
• All web apps get minified and compiled to roots-ualib/assets/js/scripts_bower.min.js on both servers. As at the time this guide was written (May 8th, 2024). The CI/CD tools are offline and some minified files are ahead of their original files in terms of updates so the process of updating the servers is unusually delicate
• The correct process would be to push the code change here to hours_ui and run grunt on roots-ualib (the grunt task here reads from the dependent repositories and updates script_bower.js and script_bower.min.js). However, this would overwrite the changes already made to script_bower.min.js directly. This issue will be fixed soon and in order to aid the process, make sure to follow the steps in this guide (Update the individual app repo, build the app, and then update the server as you need to)
  • With these issues in mind, how I update the minified code on the server is as follows:
  • Open up the minified version of the modified app code. In our case, this is hours.min.js (https://github.com/ualibweb/hours_ui/blob/master/dist/hours.min.js)
  • Find the code block I modified
  • Copy it
  • Paste it in the appropriate location in scripts_bower.min.js on the server
• Now, we can see that the bug has been fixed on the live site: