Bug 30570

Summary:	Replace the use of jQueryUI tabs in OPAC templates
Product:	Koha	Reporter:	Owen Leonard <oleonard>
Component:	Templates	Assignee:	Owen Leonard <oleonard>
Status:	CLOSED FIXED	QA Contact:	Testopia <testopia>
Severity:	enhancement
Priority:	P5 - low	CC:	arthur.suzuki, dcook, jonathan.druart, lucas, testopia, tomascohen
Version:	Main
Hardware:	All
OS:	All
Change sponsored?:	---	Patch complexity:	Medium patch
Documentation contact:		Documentation submission:
Text to go in the release notes:		Version(s) released in:	22.11.00, 22.05.05
Circulation function:
Bug Depends on:
Bug Blocks:	29226, 31248, 32969
Attachments:	Bug 30570: Replace the use of jQueryUI tabs in OPAC templates Bug 30570: Replace the use of jQueryUI tabs in OPAC templates Bug 30570: Replace the use of jQueryUI tabs in OPAC templates Bug 30570: Replace the use of jQueryUI tabs in OPAC templates Bug 30570: (follow-up) Correct rebase errors Bug 30570: Replace the use of jQueryUI tabs in OPAC templates Bug 30570: Replace the use of jQueryUI tabs in OPAC templates Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

Description Owen Leonard 2022-04-20 12:42:48 UTC

As part of Bug 29226, "OMNIBUS: Replace the use of jQueryUI tabs," we should replace the use of the jQueryUI tabs component in OPAC templates.

- OPAC -> Advanced search
- OPAC -> Authority details
- OPAC -> Bibliographic details
- OPAC -> Patron checkout history
- OPAC -> Search history
- OPAC -> Patron summary

Comment 1 Owen Leonard 2022-04-21 11:03:18 UTC Comment hidden (obsolete)

Created attachment 133538 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
  - Holdings
  - Other holdings ( If OpacSeparateHoldings is enabled)
  - Descriptions ( MARC notes )
  - Subscriptions
  - Serial collection (UNIMARC, untested)
  - Components ( If ShowComponentRecords is enabled. Link to sample
    record: https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
  - Comments
  - Editions (OPACFRBRizeEditions)
  - Html5media ( If HTML5MediaEnabled is on. Link to sample records:
    (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
  - Images ( If OPACLocalCoverImages is enabled )

  Bonus points for testing these tabs for which I don't have
  credentials:
  - Syndetics TOC
  - Syndetics Excerpt
  - Syndetics Reviews
  - Syndetics AuthorNotes
  - LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
    set to "in tabs."
  - NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Comment 2 Jonathan Druart 2022-05-09 08:54:10 UTC

There is a conflict, can you rebase please?

CONFLICT (content): Merge conflict in koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt

Comment 3 Owen Leonard 2022-05-09 18:44:14 UTC Comment hidden (obsolete)

Created attachment 134793 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
  - Holdings
  - Other holdings ( If OpacSeparateHoldings is enabled)
  - Descriptions ( MARC notes )
  - Subscriptions
  - Serial collection (UNIMARC, untested)
  - Components ( If ShowComponentRecords is enabled. Link to sample
    record: https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
  - Comments
  - Editions (OPACFRBRizeEditions)
  - Html5media ( If HTML5MediaEnabled is on. Link to sample records:
    (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
  - Images ( If OPACLocalCoverImages is enabled )

  Bonus points for testing these tabs for which I don't have
  credentials:
  - Syndetics TOC
  - Syndetics Excerpt
  - Syndetics Reviews
  - Syndetics AuthorNotes
  - LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
    set to "in tabs."
  - NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Comment 4 Owen Leonard 2022-05-09 18:51:13 UTC Comment hidden (obsolete)

Created attachment 134795 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
  - Holdings
  - Other holdings ( If OpacSeparateHoldings is enabled)
  - Descriptions ( MARC notes )
  - Subscriptions
  - Serial collection (UNIMARC, untested)
  - Components ( If ShowComponentRecords is enabled. Link to sample
    record: https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
  - Comments
  - Editions (OPACFRBRizeEditions)
  - Html5media ( If HTML5MediaEnabled is on. Link to sample records:
    (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
  - Images ( If OPACLocalCoverImages is enabled )

  Bonus points for testing these tabs for which I don't have
  credentials:
  - Syndetics TOC
  - Syndetics Excerpt
  - Syndetics Reviews
  - Syndetics AuthorNotes
  - LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
    set to "in tabs."
  - NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Comment 5 Lucas Gass (lukeg) 2022-05-17 21:06:16 UTC Comment hidden (obsolete)

Created attachment 135079 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
  - Holdings
  - Other holdings ( If OpacSeparateHoldings is enabled)
  - Descriptions ( MARC notes )
  - Subscriptions
  - Serial collection (UNIMARC, untested)
  - Components ( If ShowComponentRecords is enabled. Link to sample
    record: https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
  - Comments
  - Editions (OPACFRBRizeEditions)
  - Html5media ( If HTML5MediaEnabled is on. Link to sample records:
    (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
  - Images ( If OPACLocalCoverImages is enabled )

  Bonus points for testing these tabs for which I don't have
  credentials:
  - Syndetics TOC
  - Syndetics Excerpt
  - Syndetics Reviews
  - Syndetics AuthorNotes
  - LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
    set to "in tabs."
  - NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Comment 6 Lucas Gass (lukeg) 2022-05-17 21:07:07 UTC

Seems to work well everywhere including Syndetics, LibraryThing, and Novelist.

Comment 7 Jonathan Druart 2022-05-31 07:29:04 UTC

This should be an early push for 22.11

Comment 8 Jonathan Druart 2022-05-31 07:37:34 UTC

I think those two occurrences are bad rebase conflict resolution:

opac-user.tt

                                                 <td class="recalldate" data-order="[% RECALL.created_date | html %]">
-                                                <span title="[% RECALL.created_date | html %]">
+                                                    <span title="[% RECALL.recalldate | html %]">
                                                         <span class="tdlabel">Recall date:</span>
                                                         [% RECALL.created_date | $KohaDates %]




-                                                        [% RECALL.expiration_date | $KohaDates %]
+                                                            [% RECALL.expirationdate | $KohaDates %]

Comment 9 Owen Leonard 2022-06-03 12:24:13 UTC Comment hidden (obsolete)

Created attachment 135678 [details] [review]
Bug 30570: (follow-up) Correct rebase errors

Comment 10 Jonathan Druart 2022-06-07 11:55:50 UTC Comment hidden (obsolete)

Created attachment 135754 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
  - Holdings
  - Other holdings ( If OpacSeparateHoldings is enabled)
  - Descriptions ( MARC notes )
  - Subscriptions
  - Serial collection (UNIMARC, untested)
  - Components ( If ShowComponentRecords is enabled. Link to sample
    record: https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
  - Comments
  - Editions (OPACFRBRizeEditions)
  - Html5media ( If HTML5MediaEnabled is on. Link to sample records:
    (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
  - Images ( If OPACLocalCoverImages is enabled )

  Bonus points for testing these tabs for which I don't have
  credentials:
  - Syndetics TOC
  - Syndetics Excerpt
  - Syndetics Reviews
  - Syndetics AuthorNotes
  - LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
    set to "in tabs."
  - NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Bug 30570: (follow-up) Correct rebase errors

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Comment 11 Tomás Cohen Arazi (tcohen) 2022-07-01 19:53:24 UTC

Sorry, please rebase ASAP.

Comment 12 Owen Leonard 2022-07-06 11:41:24 UTC Comment hidden (obsolete)

Created attachment 137205 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
- Holdings
- Other holdings ( If OpacSeparateHoldings is enabled)
- Descriptions ( MARC notes )
- Subscriptions
- Serial collection (UNIMARC, untested)
- Components ( If ShowComponentRecords is enabled. Link to sample
  record:
  https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
- Comments
- Editions (OPACFRBRizeEditions)
- Html5media ( If HTML5MediaEnabled is on. Link to sample records:
  (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
- Images ( If OPACLocalCoverImages is enabled )

Bonus points for testing these tabs for which I don't have
credentials:
- Syndetics TOC
- Syndetics Excerpt
- Syndetics Reviews
- Syndetics AuthorNotes
- LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
  set to "in tabs."
- NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Comment 13 Jonathan Druart 2022-07-06 14:16:33 UTC

Do I need to review this 200kb patch again? :-/

Comment 14 Owen Leonard 2022-07-06 14:21:05 UTC

Created attachment 137214 [details] [review]
Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

This patch switches to Bootstrap tabs anywhere in the OPAC where
jQueryUI tabs were used.

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

- Test the item type/collection/shelvinglocation tabs on the advanced
  search page. Test that it works correctly with different variations of
  the OpacAdvancedSearchTypes system preference.
- Search for an authority record and view the details. The "Notes"
  tab should be styled correctly.
- Locate a bibliographic record and view the detail page. Verify
  that tabs are working, including all the options:
- Holdings
- Other holdings ( If OpacSeparateHoldings is enabled)
- Descriptions ( MARC notes )
- Subscriptions
- Serial collection (UNIMARC, untested)
- Components ( If ShowComponentRecords is enabled. Link to sample
  record:
  https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
- Comments
- Editions (OPACFRBRizeEditions)
- Html5media ( If HTML5MediaEnabled is on. Link to sample records:
  (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
- Images ( If OPACLocalCoverImages is enabled )

Bonus points for testing these tabs for which I don't have
credentials:
- Syndetics TOC
- Syndetics Excerpt
- Syndetics Reviews
- Syndetics AuthorNotes
- LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
  set to "in tabs."
- NovelistSelect

- Check tabs on these patron-related pages:
  - Checkout history
  - Search history
  - Patron summary. The following tabs are
    ✓ Checkouts
    ✓ Relatives' checkouts
    ✓ Overdues
    ✓ Fines
    ✓ Relatives' fines
    ✓ Holds
    ✓ Recalls
    ✓ Article requests
    ✓ Overdrive

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Bug 30570: (follow-up) Correct rebase errors

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Comment 15 Owen Leonard 2022-07-06 14:23:35 UTC

I don't know if it's what you were complaining about Jonathan but I re-uploaded the patch with the signoffs on it. It was my carelessness that omitted them from the previous rebased patch.

Comment 16 Jonathan Druart 2022-07-06 14:33:47 UTC

(In reply to Owen Leonard from comment #15)
> I don't know if it's what you were complaining about Jonathan but I
> re-uploaded the patch with the signoffs on it. It was my carelessness that
> omitted them from the previous rebased patch.

I hadn't noticed that! :D
Now that you set the status back to PQA I am happy :)

Comment 17 Tomás Cohen Arazi (tcohen) 2022-07-20 13:11:25 UTC

Pushed to master for 22.11.

Nice work everyone, thanks!

Comment 18 Lucas Gass (lukeg) 2022-08-23 20:03:37 UTC

Backported to 22.05.x for 22.05.05

Comment 19 Arthur Suzuki 2022-08-26 13:49:29 UTC

enhancement, lots of conflicts...
won't apply unless backport patch provided for 21.11.