This page outlines improvements and technical debt that needs to happen to the OpenLMIS-UI. Tickets listed on this page are may not be ready for work, and can actively be picked up once placed on a backlog grooming page.

Resources

When working on OpenLMIS design or user interface issues, please consult the following resources.

UI Github Repositories

Semantically Versioned Repositories

Milestone Versioned Repositories

Backlog

Consistency

ProblemSolutionTickets
Inconsistent HTML markup makes it harder for implementers to change large style applications across the OpenLMIS-UI.

Inconsistencies need to be identified and action needs to be taken to:

  • Create and document a pattern
  • Clean up code that doesn't fit this pattern

Modals look gross, and there are variations in how and when modals are used.


Program/Facility filter/select is implemented and used different sections of the OpenLMIS-UI
Directions for searching on list pages is not always clear

It is too easy to click off the modal in the add screen of stock management and loose all the work the user has done



Unit Tests

  • Testing a directive is tricky
  • UI-Routes could use some tests


sticky-columns can't be "easily used"


CSS restyling:

  • Comments status message
  • openlmis-table borders



As the OpenLMIS-UI evolves, we need to make sure the code base is stable
  • Sonar unit test coverage
  • Sonar module dependency tracking
Date Picker implementation is screwy
Year selection component – we don't want to rewrite year formatting guidelines....
Alert warning is only used once


Performance

ProblemSolutionTickets
The OpenLMIS-UI uses a bunch of libraries and tools to function, but these libraries are large and should be made as small as possible
  • Remove any library that isn't useful.
  • Split libraries to minimum files where possible


As the application evolves, we need to make sure the OpenLMIS-UI continues to download and start quickly.
  • Establish data budget
  • Selenium to track application size - vendor libraries, html, translation strings, image sizes
  • Selenium to track download time on 3g connection

Currently the OpenLMIS-UI downloads all functionality regardless of the user who is logging in, or the pages they visit.

Ideally, the user will just download the information they need as they work with subsets of pages.

Offline Support

ProblemSolutionTickets

Firefox and other browsers need to be cleared to show the most recent OpenLMIS-UI version.

We need design around managing offline assets so new versions can be pushed

AppCache can update detect and notification


The most frequent HTTP request from the UI is to find out if the browser is offline or not. This could be done in a slower and more meaningful way.

Less frequent offline status check (reduce UI bandwidth)



Extensibility

ProblemSolutionTickets


There are no supported patterns for extending files

Extendability of directives is a problem — directive controllers

Adding of changing constants in OpenLMIS
Modals are not DRY - which will make it hard to make global changes to support accessibility and i18nuh... make them DRY


Tooling

ProblemSolutionTickets

There are large files that have too much functionality, which makes their classes difficult to extend or change.

A large part of the problem is identifying the files that need to be changes and fixing them.

Add some tooling to identify these large files, and make secondary tickets to refactor the files to be smaller

  • A known file is the RequisitionService

Jasmine 1.3 is outdated

Update to latest version of Jasmine (Overview of process here)


Scaffolding new modules or file types involves lots of boiler plate
  • Add grunt/yoman command
  • Automatically add IFFE enclosure to all javascript files
  • Automate minification strings with ngAnnotate


Set up Javascript linter



Set up Sass linter

Dgeni-example JSDoc and KSS toolset

There are requests and needs for OpenLMIS to function as a native application on mobile devices

Cordova Android application compiler


Malawi

ProblemSolutionTickets

User Input

In requisitions, losses and adjustments error messages don't clear until the page is refreshed

In requisitions, product grid cells are not shrinking to their minimal size

  • Once a login has failed, a user can't login successfully until the UI page is reloaded
  • Submit vs Sync with server doesn't seem well understuff
    • Christine said: "users don't understand when to use sync with server"
  • When filling in requisition product grid, not 100% obvious which lineitem you are working on
    • SCM manager had popover that showed label of lineitem
  • If there is an error message on page 17 of a requisition, and you are on page 1 → you can't see the error in the pagination component
  • Pagination "First" and "Last" links would be helpful

SORTING

Bug?

Notifications are wacko

Offline

Offline is described to be super sensitive. The UI will show that it's in the offline state, when it really isn't.

  • UI doesn't work on a 2g connection - either stuck offline or page doesn't load at all (in a reasonable manner) 

Memory/runtime/wtf

  • Main navigation links are not clickable *sometimes* after user login
    • The second page is non-responsive
  • Often have to "refresh" to make page work correctly
  • Loading modal spinner will sometimes stop spinning – this indicates the browser is dropping frames
  • Chrome will ask to kill a page because it is "non-responsive" 3-4 times while editing a user
  • Users and facility administration pages are horribly slow
  • Editing user information page is an act of patience (takes forever to load/start)
  • Timeliness and reporting rates reports are super slow

Caching

  • Dropdown list will say "No Options" but once refreshed will show values

WTF

  • Working on the initialize/authorize requisition periods page is rough for a user
    • Takes long time to load
    • Needs to be refreshed often
    • Periods could be paginated and sorted

Un-Forking



Unit Testing

http://docs.openlmis.org/en/latest/conventions/uiCodeConventions.html#unit-testing-guidelines



Examples
Brittle

Checks markup, not meaning
https://github.com/OpenLMIS/openlmis-cce-ui/blob/master/src/cce-edit-inventory-item/edit-inventory-item.html.spec.js#L66-L73

Set up view that is available in router?
https://github.com/OpenLMIS/openlmis-cce-ui/blob/master/src/cce-edit-inventory-item/edit-inventory-item.html.spec.js#L655-L672
Testing utils bundled into applicaiton?

https://github.com/OpenLMIS/openlmis-cce-ui/blob/master/src/openlmis-testing-utils/openlmis-testing-utils.module.js


Misc Notes

2017-09-15 Alfred/Dercio/Nick