Bug 29999 - Replace the use of jQueryUI tabs on authorized values administration page
Summary: Replace the use of jQueryUI tabs on authorized values administration page
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 29277
Blocks: 29226 29998
  Show dependency treegraph
 
Reported: 2022-02-01 17:09 UTC by Owen Leonard
Modified: 2022-04-01 10:28 UTC (History)
4 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.05.00


Attachments
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page (9.09 KB, patch)
2022-02-01 19:38 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page (9.14 KB, patch)
2022-02-01 20:19 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page (13.08 KB, patch)
2022-02-24 19:29 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29999: (follow-up) Show the remote image tab if selected (2.94 KB, patch)
2022-03-17 18:31 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page (13.14 KB, patch)
2022-03-18 06:41 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 29999: (follow-up) Show the remote image tab if selected (3.00 KB, patch)
2022-03-18 06:41 UTC, Fridolin Somers
Details | Diff | Splinter Review
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page (13.21 KB, patch)
2022-03-21 15:14 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 29999: (follow-up) Show the remote image tab if selected (3.08 KB, patch)
2022-03-21 15:14 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2022-02-01 17:09:27 UTC
As part of Bug 29226, "OMNIBUS: Replace the use of jQueryUI tabs," we should replace the use of the jQueryUI tabs component on the authorized values administration page.
Comment 1 Owen Leonard 2022-02-01 19:38:16 UTC
Created attachment 130053 [details] [review]
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

This patch updates the authorized values edit interface so that it uses
Bootstrap tabs instead of jQueryUI tabs for displaying icon sets.

Normally Bootstrap tabs don't have to be initiated via JavaScript, but
this page requires some JS to select the first tab as active if no other
tabs are active. Because of the way the template works it's not simple
to do it via template logic, so in this case some JS helps.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Authorized values in the staff interface.
- Select a category and then add or edit an authorized value in that
  category.
  - On the edit page you should see tabs under "Choose an icon."
  - Confirm that the tabs look correct and work correctly.
  - If you did not previously have any icon selected, the "None" tab
    should be active.
  - If you had an icon selected, that icon set's tab should be
    active.
  - Confirm that changing icons works correctly and that the
    selected icon's tab is always active when you return to the edit
    page.
Comment 2 Lucas Gass 2022-02-01 20:19:18 UTC
Created attachment 130055 [details] [review]
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

This patch updates the authorized values edit interface so that it uses
Bootstrap tabs instead of jQueryUI tabs for displaying icon sets.

Normally Bootstrap tabs don't have to be initiated via JavaScript, but
this page requires some JS to select the first tab as active if no other
tabs are active. Because of the way the template works it's not simple
to do it via template logic, so in this case some JS helps.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Authorized values in the staff interface.
- Select a category and then add or edit an authorized value in that
  category.
  - On the edit page you should see tabs under "Choose an icon."
  - Confirm that the tabs look correct and work correctly.
  - If you did not previously have any icon selected, the "None" tab
    should be active.
  - If you had an icon selected, that icon set's tab should be
    active.
  - Confirm that changing icons works correctly and that the
    selected icon's tab is always active when you return to the edit
    page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 3 Lucas Gass 2022-02-01 20:21:09 UTC
Note: To get this to look right it was necessary for me clear my cache after running 'yarn build'. 

Once I did it looks and feels exactly the same as when using jQueryUI tabs.
Comment 4 Jonathan Druart 2022-02-18 15:02:08 UTC
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/admin/authorised_values.tt
Comment 5 Owen Leonard 2022-02-24 19:29:37 UTC
Created attachment 131068 [details] [review]
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

This patch updates the authorized values edit interface so that it uses
Bootstrap tabs instead of jQueryUI tabs for displaying icon sets.

Normally Bootstrap tabs don't have to be initiated via JavaScript, but
this page requires some JS to select the first tab as active if no other
tabs are active. Because of the way the template works it's not simple
to do it via template logic, so in this case some JS helps.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Authorized values in the staff interface.
- Select a category and then add or edit an authorized value in that
  category.
  - On the edit page you should see tabs under "Choose an icon."
  - Confirm that the tabs look correct and work correctly.
  - If you did not previously have any icon selected, the "None" tab
    should be active.
  - If you had an icon selected, that icon set's tab should be
    active.
  - Confirm that changing icons works correctly and that the
    selected icon's tab is always active when you return to the edit
    page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 6 Owen Leonard 2022-03-17 18:31:16 UTC
Created attachment 131849 [details] [review]
Bug 29999: (follow-up) Show the remote image tab if selected

This follow-up corrects the markup so that if a value is entered in the
"Remote image" field, the correct tab will be selected upon page load.

The patch also corrrects the input name on the "No image" field so that
the option works correctly.

To test, apply the patch and edit an authorized value.

- Select an icon from an icon set. Save, and then re-edit.
  - The correct icon set tab should be activated.
- Select "No image," save, and re-edit.
  - The "No image" tab should be selected.
- On the "Remote image" tab, enter a remote image url, e.g.
  https://via.placeholder.com/50/FF0000/FFFFFF.png. Save and re-edit.
- The "Remote image" should be selected.
Comment 7 Fridolin Somers 2022-03-18 06:41:13 UTC
Created attachment 131851 [details] [review]
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

This patch updates the authorized values edit interface so that it uses
Bootstrap tabs instead of jQueryUI tabs for displaying icon sets.

Normally Bootstrap tabs don't have to be initiated via JavaScript, but
this page requires some JS to select the first tab as active if no other
tabs are active. Because of the way the template works it's not simple
to do it via template logic, so in this case some JS helps.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Authorized values in the staff interface.
- Select a category and then add or edit an authorized value in that
  category.
  - On the edit page you should see tabs under "Choose an icon."
  - Confirm that the tabs look correct and work correctly.
  - If you did not previously have any icon selected, the "None" tab
    should be active.
  - If you had an icon selected, that icon set's tab should be
    active.
  - Confirm that changing icons works correctly and that the
    selected icon's tab is always active when you return to the edit
    page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
Comment 8 Fridolin Somers 2022-03-18 06:41:41 UTC
Created attachment 131852 [details] [review]
Bug 29999: (follow-up) Show the remote image tab if selected

This follow-up corrects the markup so that if a value is entered in the
"Remote image" field, the correct tab will be selected upon page load.

The patch also corrrects the input name on the "No image" field so that
the option works correctly.

To test, apply the patch and edit an authorized value.

- Select an icon from an icon set. Save, and then re-edit.
  - The correct icon set tab should be activated.
- Select "No image," save, and re-edit.
  - The "No image" tab should be selected.
- On the "Remote image" tab, enter a remote image url, e.g.
  https://via.placeholder.com/50/FF0000/FFFFFF.png. Save and re-edit.
- The "Remote image" should be selected.

Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
Comment 9 Jonathan Druart 2022-03-21 15:12:07 UTC
"No image" is not selected when imageurl is null, but it's not a regression.
Comment 10 Jonathan Druart 2022-03-21 15:14:45 UTC
Created attachment 131979 [details] [review]
Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

This patch updates the authorized values edit interface so that it uses
Bootstrap tabs instead of jQueryUI tabs for displaying icon sets.

Normally Bootstrap tabs don't have to be initiated via JavaScript, but
this page requires some JS to select the first tab as active if no other
tabs are active. Because of the way the template works it's not simple
to do it via template logic, so in this case some JS helps.

To test, apply the patch and rebuild the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Authorized values in the staff interface.
- Select a category and then add or edit an authorized value in that
  category.
  - On the edit page you should see tabs under "Choose an icon."
  - Confirm that the tabs look correct and work correctly.
  - If you did not previously have any icon selected, the "None" tab
    should be active.
  - If you had an icon selected, that icon set's tab should be
    active.
  - Confirm that changing icons works correctly and that the
    selected icon's tab is always active when you return to the edit
    page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 11 Jonathan Druart 2022-03-21 15:14:50 UTC
Created attachment 131980 [details] [review]
Bug 29999: (follow-up) Show the remote image tab if selected

This follow-up corrects the markup so that if a value is entered in the
"Remote image" field, the correct tab will be selected upon page load.

The patch also corrrects the input name on the "No image" field so that
the option works correctly.

To test, apply the patch and edit an authorized value.

- Select an icon from an icon set. Save, and then re-edit.
  - The correct icon set tab should be activated.
- Select "No image," save, and re-edit.
  - The "No image" tab should be selected.
- On the "Remote image" tab, enter a remote image url, e.g.
  https://via.placeholder.com/50/FF0000/FFFFFF.png. Save and re-edit.
- The "Remote image" should be selected.

Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 12 Fridolin Somers 2022-03-25 21:01:55 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄