Uploaded image for project: 'ui-data-import'
  1. ui-data-import
  2. UIDATIMP-979

Resizable Panes - Persistence | Use PersistedPaneset smart component for Settings: Data Import pages

    XMLWordPrintable

    Details

    • Type: Story
    • Status: Open (View Workflow)
    • Priority: P3
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
    • Template:
      Folijet UI story template
    • Story Points:
      2
    • Development Team:
      Folijet
    • Release:
      Lotus R1 2022

      Description

      Requirement: Update Resizable panes to support session/local storage persistence. See below documentation

      Acceptance criteria
      Given I am on a <<TBD>> app
      AND I resize the second or third pane
      AND I go to another app
      When I return to the <<TBD>> app
      Then resize should persists based on session and/or local storage

      Technical documentation
      we’ve added a new component, <PersistedPaneset> to stripes-smart-components: https://github.com/folio-org/stripes-smart-components/tree/master/lib/PersistedPaneset
      you’re already using <Paneset> in your apps, to which @j.coburn recently added the ability to resize Panes (scroll up :wink. PersistedPaneset saves the current pane widths to the user’s localStorage so if you resize a pane, close the window, and then bring up folio again, the panes will be the same width.
      to use PersistedPaneset

      what about the search-and-filters pane?
      while working on this, i realised i could use the same technique to persist the visibility of the filters pane. that is, if a user has hidden them and they refresh, the filters pane will remain hidden. so i’ve now done that in the Agreements and Licenses apps as well.
      i don’t have as concise a commit diff to show as an example, but the key parts are here: https://github.com/folio-org/ui-agreements/blob/v6.0.0/src/components/views/Agreements.js#L75-L81
      there, we’re using the @rehooks/local-storage package to give us a local storage hook that we use to read/set the visibility. note the filterPaneVisibilityKey that namespaces the local storage to this app. NB: you should never use an un-namespaced key into local storage since you share it with all folio apps in existence now and in the future, including ones you may not know of that were developed independently at some random library/university.

        TestRail: Results

          Attachments

            Issue Links

              Activity

                People

                Assignee:
                Oleksandr Hladchenko1 Oleksandr Hladchenko1
                Reporter:
                abreaux Ann-Marie Breaux
                Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                  Dates

                  Created:
                  Updated:

                    TestRail: Runs

                      TestRail: Cases