Feature: grid view for token options

[yongkanm]

Description

Feature

Grid view is implemented in this pull request. A user could use grid view to visualize information about all token options as a table. Here are some details about the grid view:

1. A user could switch to a grid view (and then switch back) from the "Token Options" page in the dashboard. Also, a user could choose to open the gird view in a new window (a new tab is opened if browser is used). Buttons for the gird view feature are located at the top-left corner of the "Token Options" page.

2. The columns shown in the grid view could be configured by the user using the gear button. In the modal opened by clicking the gear button, there are two Drag & Drop list, "Shown Columns" and "Available Columns." All columns that are available will be shown in the "Available Columns" list. What being dragged to "Shown Columns" list will be displayed (in the specified order).

3. The grid view configuration, which includes the content of "Shown Columns" list and "Available Columns" list, will be preserved until the user navigates away from the "Token Options" page. Upon that, if the user has saved their credentials before (i.e., have a password configured), the configuration will be preserved among different sessions of Token ATM.

4. The grid view is rendered as a table using AG Grid with following features enabled:

   a. Each column supports resizing by dragging the horizontal border.
   b. The header row supports using Drag & Drop to reorder columns.
   c. If a column is dragged away from the header row and dropped, it will be removed from the table.
   d. For columns that contain a numeric value, a string, or a date, various filtering options are supported.
   e. For columns that contain a numeric value, a string, or a date, clicking on the column name could sort the table with this column as key. Clicking a column name multiple times could switch between ascending order, descending order, and supplied order.

Testing Note

1. Please test if the grid view feature works as described above. The filtering options for columns do not need to be tested exhaustively since it is provided by AG Grid.
2. There should not be any changes to the existing behaviors of Token ATM. There is no need to test it, but it would be awesome if performing a static analysis on code change to ensure that.

[epsilonError]

Testing Note 2 Passes

Static analysis doesn't reveal any unexpected/undesired behaviors.
Though typos using "Perferences" instead of "Preferences" and "Gird" instead of "Grid" were noticed. Typos fixed

[epsilonError]

Testing Note 1

• Feature 1: Works as described
• Feature 2: Works as described
• Feature 3: Works as described (but see error note below) handled
• Feature 4: Works as described
  • a: Passes
  • b: Passes
  • c: Passes (as long as the drop is outside the grid frame)
  • d: Passes
  • e: Passes

---

After the error for Feature 3 is handled, Testing Note 1 is passed.

[epsilonError]

Note: On first opening the grid view, nothing is shown. And the functionality seems broken.

Having a default selection of Columns to show. Or a notice to manually choose columns would be a good future improvement.

[epsilonError]

Note: Configure Grid View seems uncomplete-able.

Buttons to Apply and/or Save the configuration may be helpful. Currently clicking outside the modal, or clicking the close button applies the current config (Since the number of choices may require scrolling, any buttons should be placed at the top of the modal.)

But what if an instructor wants to play around for a quick view, but has a previous preference they generally prefer?

Allowing separate application and saving actions would allow greater options and flexibility.

[epsilonError]

Note: For Configure Grid View, it can be hard to move a choice from the bottom of the Available Columns to the Shown Columns if there are no currently selected columns (or vice versa).

The drag from zones expand to fit the choices dropped in them, but the drop into zones shrink to only have the spacing of the choices in it.

Expanding both zones to match each other vertically would improve the ease of dragging and dropping since then users only need to worry about moving left and right at first. And can order choices more precisely with vertical movements later.

[epsilonError]

Note: In Configure Grid View, it can be tiresome to have to move each choice individually. Having a way to quickly empty every choice from one Selection column to the other could be helpful.

[epsilonError]

Testing Feature 3 Error:

When a password isn't provided by the user and the Configure Grid View is closed, Token ATM reports Error: Secure storage is not initialized! to the global error handler.

This is an expected error, in this case, and should be caught and not reported to the user.

If a Save button functionality is added to the UI this would be a proper error to report. But in this specific case, it would be best to just hide/disable the Save button if the Secure storage isn't initialized.

[epsilonError]

Testing Feature 3 (Under-defined behavior)

If a user misplaces their password, refills all their credentials, and overwrites the saved credentials all of their personal storage data is lost.

This is the expected result under the implementation due to the secure cryptography used. But the defined behavior for testing: "if the user has saved their credentials before (i.e., have a password configured)" isn't satisfied.

In this example, the user had saved their credentials before but now they can't get to the old Grid View configuration, because they made a new encrypted blob and no longer have access to the old one (even if they are using exactly the same password).

This isn't a test failure, but the relevant wording when presented to end-users will need to be more precise.

[epsilonError]

Note: The AG Grid interface is a much better way to work through and pick what views are interesting/preferable.

If the Apply & Save button functionality is added to the UI, having them also function in the Grid Interface based on what is currently shown in the AG Grid interface would be an improvement.

Such functionality would only be applicable when not in a new window. And it would greatly reduce the cognitive load of remembering what columns and ordering the instructor wanted to keep, while bouncing back to the Configure Grid View (which also means that what ever changes were made in the AG Grid would be reset.)

This change would allow the removal and reordering of choices from within the Grid View.
While the Config View would do both of the those and allow the addition of entirely different choices to the Grid View.

[epsilonError]

Note: I don't believe it's possible, but automatically updating the new window view of the grid based on changes made in the config would be an extra nice touch.

But I'd say this would be a very long term goal.

[yongkanm]

Testing Note 2 Passes

Static analysis doesn't reveal any unexpected/undesired behaviors. Though typos using "Perferences" instead of "Preferences" and "Gird" instead of "Grid" were noticed.

Thanks for catching that! Typos are fixed now.

[yongkanm]

Note: On first opening the grid view, nothing is shown. And the functionality seems broken.

Having a default selection of Columns to show. Or a notice to manually choose columns would be a good future improvement.

Agreed. This behavior is implemented in the new commit. If the user does not configure any columns for the grid view, when the user attempt to access grid view, a modal will be shown instead to notify the user about this.

[yongkanm]

Note: Configure Grid View seems uncomplete-able.

Buttons to Apply and/or Save the configuration may be helpful. Currently clicking outside the modal, or clicking the close button applies the current config (Since the number of choices may require scrolling, any buttons should be placed at the top of the modal.)

But what if an instructor wants to play around for a quick view, but has a previous preference they generally prefer?

Allowing separate application and saving actions would allow greater options and flexibility.

Thanks for pointing this out! A "Save" button is added to the header of the grid view configuration modal. If the modal is closed via the "X" button, modifications won't be saved. Closing the modal by clicking area outside of it is disabled since the user might accidentally lose their progress.

[yongkanm]

Note: For Configure Grid View, it can be hard to move a choice from the bottom of the Available Columns to the Shown Columns if there are no currently selected columns (or vice versa).

The drag from zones expand to fit the choices dropped in them, but the drop into zones shrink to only have the spacing of the choices in it.

Expanding both zones to match each other vertically would improve the ease of dragging and dropping since then users only need to worry about moving left and right at first. And can order choices more precisely with vertical movements later.

Agreed! I've added a placeholder node to the bottom of both drag & drop list to ease adding elements to the bottom.

[yongkanm]

Note: In Configure Grid View, it can be tiresome to have to move each choice individually. Having a way to quickly empty every choice from one Selection column to the other could be helpful.

I've added a button to remove all elements in the "Shown Columns" list (by moving these elements to the "Available Columns" list). I don't think it's needed for the "Available Columns" list.

[yongkanm]

Testing Feature 3 Error:

When a password isn't provided by the user and the Configure Grid View is closed, Token ATM reports Error: Secure storage is not initialized! to the global error handler.

This is an expected error, in this case, and should be caught and not reported to the user.

If a Save button functionality is added to the UI this would be a proper error to report. But in this specific case, it would be best to just hide/disable the Save button if the Secure storage isn't initialized.

That's an unexpected behavior and is fixed right now. The expected behavior would be the configuration being saved to the "Token Options" page without causing an error. Thus, even though no password is configured for Token ATM to save credentials, the grid view configuration could still be perserved within the "Token Options" page.

[yongkanm]

Testing Feature 3 (Under-defined behavior)

If a user misplaces their password, refills all their credentials, and overwrites the saved credentials all of their personal storage data is lost.

This is the expected result under the implementation due to the secure cryptography used. But the defined behavior for testing: "if the user has saved their credentials before (i.e., have a password configured)" isn't satisfied.

In this example, the user had saved their credentials before but now they can't get to the old Grid View configuration, because they made a new encrypted blob and no longer have access to the old one (even if they are using exactly the same password).

This isn't a test failure, but the relevant wording when presented to end-users will need to be more precise.

Thanks for pointing this out! Clear the credentials will indeed cause saved grid view column preference being deleted.

[yongkanm]

Note: The AG Grid interface is a much better way to work through and pick what views are interesting/preferable.

If the Apply & Save button functionality is added to the UI, having them also function in the Grid Interface based on what is currently shown in the AG Grid interface would be an improvement.

Such functionality would only be applicable when not in a new window. And it would greatly reduce the cognitive load of remembering what columns and ordering the instructor wanted to keep, while bouncing back to the Configure Grid View (which also means that what ever changes were made in the AG Grid would be reset.)

This change would allow the removal and reordering of choices from within the Grid View. While the Config View would do both of the those and allow the addition of entirely different choices to the Grid View.

This is a nice idea and is implemented now. Adding such a functionality allows the user to select a wide range of columns that they might be interested in and then filter them in the grid view. As you mentioned, because of security reasons, this feature is only available from the in-page grid view.

The ideal (and original) design does put column selection and column display together. However, AG Grid does not provide any event to allow integration of drag & drop behavior in the header row, while the built-in features of adding columns via Tool Panel is only available in Enterprise version. We might need to replace AG Grid with another library to allow these two interactions being integrated together, so it's a very-long-term goal.

[yongkanm]

Note: I don't believe it's possible, but automatically updating the new window view of the grid based on changes made in the config would be an extra nice touch.

But I'd say this would be a very long term goal.

That is technically possible, but we need to be very careful since it involves communication between two Token ATM instances.

[epsilonError]

Testing

• Typos are fixed
• Unsaved user error is handled and no longer displayed
• Notification Modal for un-configured grid view appears for both grid view buttons
• Save, 'X', and clicking outside the config modal all work as described
• Placeholder for 'End of List' appears on configure modal
• Clear of Shown Columns works as expected
• Saving Current Preferences from Grid View works
• User without saved password is notified of losing config after leaving Token Option page (on config page, and in grid view)
• User with saved password doesn't get those notifications

---

Typo Fixes and Functionality Updates pass testing

[epsilonError]

Note: In Configure Grid View, it can be tiresome to have to move each choice individually. Having a way to quickly empty every choice from one Selection column to the other could be helpful.

I've added a button to remove all elements in the "Shown Columns" list (by moving these elements to the "Available Columns" list). I don't think it's needed for the "Available Columns" list.

I think a 'show all'/'choose all' button is useful, because then a user can more easily remove selection from the grid view. It's a lot to work, but I personally prefer seeing a big overview that I can trim down, rather than default to an empty view and add selections individually.

[epsilonError]

The ideal (and original) design does put column selection and column display together. However, AG Grid does not provide any event to allow integration of drag & drop behavior in the header row, while the built-in features of adding columns via Tool Panel is only available in Enterprise version. We might need to replace AG Grid with another library to allow these two interactions being integrated together, so it's a very-long-term goal.

Note: I don't believe it's possible, but automatically updating the new window view of the grid based on changes made in the config would be an extra nice touch.
But I'd say this would be a very long term goal.

That is technically possible, but we need to be very careful since it involves communication between two Token ATM instances.

Let's leave all this as a long-term goal then.

[yongkanm]

Note: In Configure Grid View, it can be tiresome to have to move each choice individually. Having a way to quickly empty every choice from one Selection column to the other could be helpful.

I've added a button to remove all elements in the "Shown Columns" list (by moving these elements to the "Available Columns" list). I don't think it's needed for the "Available Columns" list.

I think a 'show all'/'choose all' button is useful, because then a user can more easily remove selection from the grid view. It's a lot to work, but I personally prefer seeing a big overview that I can trim down, rather than default to an empty view and add selections individually.

The main issue of allowing selecting all columns at the same time is that the grid view is not a good place for reordering large number of columns due to the horizontal spacing occpuied by each column. I think we could implement this feature when we combine the column selection and column display, so the user could then use the "Available Columns" as a buffer to reorder columns in a easier way.