Addon Manager redesign template

Hi guys, In order to add drag and drop functionality, we were thinking of modifying the Add On manager UI as illustrated in the attached template image. We’d really appreciate your thoughts and suggestions.

The previous design without drag and drop:

1 Like

This looks good, cc @dkayiwa @suthagar23 what do you think?

Can’t we reuse the area on the left of “Choose file” to also do drag and drop?

  • This design provides a clearer way of displaying the file selection options to the user
  • It also provides a larger, more visible drag and drop area
  • To enable drag and drop I have to use the dropzone component which has a hidden input field that conflicts with the existing iput field

We originally had a choose file button to browse and select a file. In your proposal, what do i use for that?

By clicking within the drop area, which would bring up a file selection dialog( like before )

Oh i see. Then it looks good. :slight_smile:

Apologies for coming to the party late, however would this be better name Open Web App Addon Manager - so that the purpose is clear.

A little OCD - Can the names of the OWAs be title case with spaces between the words not like openmrs-addOnManger which is confusing.

Also for the upload see this screenshot from GitHub … let us look around for commonly used examples and probably emulate those

This looks pretty good and I have some suggestions,

  • Shall we use a common layout in here also like sysadmin OWA. Change that border with dashed lines

  • When users drag some files, this background should be changed to green color - as In Drop indicator

  • Shall bring a hyperlink for “Click to select” text?

  • No need to show the Upload and Clear button at the begging of this page. If someone dropped or selected the file, then only show those buttons in the page. (Disable the buttons at the beginning, and enable when the user dropped or selected the file)

Hi @ssmusoke thanks for the feedback.

  • Although the Addon Manager currently only supports OWAs, I believe the intention is to allow for installation of both OWAs and modules(OMODs) via this manager. Is it so @dkayiwa?
  • The naming of the OWAs will be corrected

Thanks for pointing out the github example. I can spot the following differences from our proposal:

  • Only the selecting them link is clickable
  • Support for copy paste
  • The dropzone is incorporated into a textarea which is inapplicable in our case

I’ll seek out other examples

@ssmusoke Yah Really amazing feature,

For the Screenshots, we can use the paste options (AFAIK Only the new versions of the browsers will support this feature). Because when we press the PrtScrn button, It will automatically copy the image to the clipboard then we can paste that image to here directly.

I can’t sure about this implementation for the files. I will look into this more to get the solution :slight_smile:

Thanks @suthagar23.

  • I agree that the styling should be consistent with the sysadmin OWA. Will rectify this
  • The color change for drop in indicator is a great idea
  • Making only Click to select clickable has also been pointed out by @ssmusoke . I will change the design accordingly
  • Yeah, the buttons will only be displayed once a file has been dragged and dropped or selected

I just accessed the AddOn manager after some fixes in the Module Ref app. You guys did a great job at there and It’s totally upgraded :slight_smile:

But still, there are some issues needed to be fixed,

  1. You have assigned the hyperlink for the OWA list. Initially, it will show the installed list, So users can click it and they will be redirected to that respected OWA. But if a user searches for an OWA, and then Click that, What will be happened at that point? I am getting some undefined error page. Please check it first and do the redirection.

  2. Are you checking ZIP file naming conventions for the file upload? because I can’t upload a zip file with the only name. If you are checking file name, then please better to provide a message about that or better mention the example file name.

  3. OpenMRS header image is missing :smiley:

  4. Usually, there will be a 1px bottom line below the breadcrumbs. Have you noticed that one?

  5. Better to change “Drag file here to upload or Click to here select” as “Drag and Drop OWAs here or Click to select OWAs”.

  6. In the OWA Addon manager settings page, Align the bottom buttons to the right side. And better to remove the outer border of that page, because you haven’t used that border anymore in other pages.

  7. There is an issue in the OWA search because I searched for the keyword “System” but I didn’t get any OWA list(but still there are one OWA exists in that API response)

  8. Why we are downloading the OWA from the server using the browser. If a user searches for the OWA and Click Install, then it should download that OWA internally and install that OWA to the server. It is not a good way to download that module separately and ask the user to re-upload that one.

  9. I can upload the module at here. What is the problem? Can you check, please?

If you have time, Please take a look here :slight_smile:

CC : @dkayiwa, @jeiddiah, @mkiterian

Hi @suthagar23, thanks for trying out the Addon manager and giving the feedback.

  • (1, 7, 8) We are currently still working on the search functionality. Your pointers are of great help we’ll make sure to capture them in our implementation. I shall create tickets for the specific issues raised
  • (2, 9) No, we’re not checking the naming convention. Please send me the OWA zip you are trying to upload so that I can try to reproduce the error (2). Same as (9). Is the file added to the dropzone but fails to upload? or is it not even added to the dropzone?
  • (3, 4) :man_facepalming: Will be fixed
  • (5) The end goal is to enable the Addon manager to allow for installation of both OWAs and modules