<!-- 
RSS generated by JIRA (1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d) at Fri Feb 09 00:20:12 UTC 2024

It is possible to restrict the fields that are returned in this document by specifying the 'field' parameter in your request.
For example, to request only the issue key and summary add field=key&field=summary to the URL of your request.
-->
<rss version="0.92" >
<channel>
    <title>FOLIO Jira</title>
    <link>https://folio-org.atlassian.net</link>
    <description>This file is an XML representation of an issue</description>
    <language>en-us</language>    <build-info>
        <version>1001.0.0-SNAPSHOT</version>
        <build-number>100246</build-number>
        <build-date>07-02-2024</build-date>
    </build-info>

<item>
            <title>[UXPROD-1990] Migrate to React Final Form</title>
                <link>https://folio-org.atlassian.net/browse/UXPROD-1990</link>
                <project id="10000" key="UXPROD">UX Product</project>
                    <description>&lt;h2&gt;&lt;a name=&quot;Purpose&quot;&gt;&lt;/a&gt;Purpose&lt;/h2&gt;
&lt;p&gt;Early in the FOLIO project, we made the decision to use Redux Form to help construct forms with complex state. Redux Form has been a huge time-saver, since we don&apos;t have to roll a new state machine ourselves every time we build a new form. In the years since we adopted it, the thinking around form state in the React/Redux community has evolved. The Redux docs even indicate tools like Redux Form probably aren&apos;t needed: &lt;a href=&quot;https://redux.js.org/faq/organizing-state#should-i-put-form-state-or-other-ui-state-in-my-store&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;https://redux.js.org/faq/organizing-state#should-i-put-form-state-or-other-ui-state-in-my-store&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://github.com/final-form/final-form&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;Final Form&lt;/a&gt; is the direct successor to Redux Form. Final Form has significant performance gains because it doesn&apos;t dispatch actions to the Redux store on every key press. It doesn&apos;t even use Redux.&lt;/p&gt;

&lt;p&gt;Additional benefits of Final Form we&apos;d immediately benefit from:&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;Modular pieces like &lt;tt&gt;final-form-calculate&lt;/tt&gt; and &lt;tt&gt;final-form-focus&lt;/tt&gt;&lt;/li&gt;
	&lt;li&gt;Much smaller bundle footprint than Redux Form (or Formik)&lt;/li&gt;
	&lt;li&gt;More mature API than Redux Form&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;&lt;a name=&quot;Approach&quot;&gt;&lt;/a&gt;Approach&lt;/h2&gt;
&lt;p&gt;Encourage the use of &lt;a href=&quot;https://github.com/final-form/react-final-form&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;React Final Form&lt;/a&gt; instead of Redux Form.&lt;/p&gt;

&lt;p&gt;&lt;tt&gt;ui-eholdings&lt;/tt&gt; is already migrated over: &lt;a href=&quot;https://github.com/folio-org/ui-eholdings/pull/680&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;https://github.com/folio-org/ui-eholdings/pull/680&lt;/a&gt;. Besides the performance benefits, I&apos;ve much preferred the ergonomics of using React components instead of &lt;tt&gt;reduxForm()&lt;/tt&gt; calls scattered around the component tree (which are really wrappers for &lt;tt&gt;redux&lt;/tt&gt; connects). With Redux Form, it was much more difficult to adhere to one of the tenets of the route-based architecture defined in STRIPES-589: &lt;em&gt;Only route components found in src/routes communicate with the data layer or server.&lt;/em&gt; &lt;/p&gt;

&lt;p&gt;There are cases where Redux Form is still the appropriate tool, like multi-page wizard forms, but they won&apos;t be the norm in FOLIO. We should remove the &lt;tt&gt;redux-form&lt;/tt&gt; reducer from &lt;tt&gt;stripes-core&lt;/tt&gt;, but modules that want to use &lt;tt&gt;redux-form&lt;/tt&gt; for exceptional cases can still add that reducer themselves. &lt;tt&gt;ui-eholdings&lt;/tt&gt; has an &lt;a href=&quot;https://github.com/folio-org/ui-eholdings/blob/09b9371fd2356afb91d16e98b19117e946429cfd/src/index.js&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;example of injecting a reducer&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;In a post-Redux Form &lt;tt&gt;stripes&lt;/tt&gt; ecosystem, the &lt;tt&gt;stripes-form&lt;/tt&gt; library is no longer necessary. &lt;tt&gt;stripes-form&lt;/tt&gt; provides two key pieces of functionality:&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;When a user tries to submit a form and there&apos;s a validation error, the first error on the form receives focus. Final Form&apos;s solution: &lt;a href=&quot;https://github.com/final-form/final-form-focus&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;https://github.com/final-form/final-form-focus&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;When a user has unsaved changes and attempts to leave the URL in question, pop up a modal asking them if they want to keep editing or abandon the form. This can be extracted into a standalone component a la &lt;tt&gt;&amp;lt;NavigationModal&amp;gt;&lt;/tt&gt; in &lt;tt&gt;ui-eholdings&lt;/tt&gt;: &lt;a href=&quot;https://github.com/folio-org/ui-eholdings/blob/master/src/components/navigation-modal/navigation-modal.js&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;https://github.com/folio-org/ui-eholdings/blob/master/src/components/navigation-modal/navigation-modal.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;&lt;a name=&quot;Tasks&quot;&gt;&lt;/a&gt;Tasks&lt;/h2&gt;
&lt;h3&gt;&lt;a name=&quot;TierOne&quot;&gt;&lt;/a&gt;Tier One&lt;/h3&gt;
&lt;p&gt;These are the items needed to unblock anyone from using React Final Form with the same features currently available from &lt;tt&gt;stripes-form&lt;/tt&gt;.&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;Switch &lt;tt&gt;stripes-components&lt;/tt&gt; tests to use React Final Form instead of Redux Form. This would 100% eliminate &lt;tt&gt;stripes-components&lt;/tt&gt;&apos; dependency on &lt;tt&gt;redux&lt;/tt&gt;. It also unlocks some simplification of the &lt;tt&gt;mountWithContext()&lt;/tt&gt; helper.&lt;/li&gt;
	&lt;li&gt;Expose a &lt;tt&gt;&amp;lt;NavigationModal&amp;gt;&lt;/tt&gt; from &lt;tt&gt;stripes-core&lt;/tt&gt; or &lt;tt&gt;stripes-components&lt;/tt&gt; (which repo it belongs in is up for debate)&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;&lt;a name=&quot;TierTwo&quot;&gt;&lt;/a&gt;Tier Two&lt;/h3&gt;
&lt;p&gt;These are the next steps, where &lt;tt&gt;stripes-core&lt;/tt&gt; and &lt;tt&gt;stripes-smart-components&lt;/tt&gt; would no longer depend on &lt;tt&gt;stripes-form&lt;/tt&gt;. Can be done in parallel with Tier Three tasks.&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;Migrate &lt;tt&gt;stripes-core&lt;/tt&gt; forms using &lt;tt&gt;redux-form&lt;/tt&gt; to React Final Form.&lt;/li&gt;
	&lt;li&gt;Migrate &lt;tt&gt;stripes-smart-components&lt;/tt&gt; using &lt;tt&gt;stripes-form&lt;/tt&gt; to instead use React Final Form with &lt;tt&gt;&amp;lt;NavigationModal&amp;gt;&lt;/tt&gt; and &lt;tt&gt;final-form-focus&lt;/tt&gt;. Remove &lt;tt&gt;stripes-smart-components&lt;/tt&gt; dependency on &lt;tt&gt;stripes-form&lt;/tt&gt;.&lt;/li&gt;
	&lt;li&gt;Place deprecation warnings in &lt;tt&gt;stripes-form&lt;/tt&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;&lt;a name=&quot;TierThree&quot;&gt;&lt;/a&gt;Tier Three&lt;/h3&gt;
&lt;p&gt;Migrating modules will take a while, but can be done on any timetable. At this stage &lt;tt&gt;redux-form&lt;/tt&gt; and &lt;tt&gt;react-final-form&lt;/tt&gt; can continue to be first-class citizens together.&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;Identify &lt;tt&gt;platform-core&lt;/tt&gt; modules using &lt;tt&gt;stripes-form&lt;/tt&gt;. Refactor those instances to use React Final Form with &lt;tt&gt;&amp;lt;NavigationModal&amp;gt;&lt;/tt&gt; and &lt;tt&gt;final-form-focus&lt;/tt&gt;.&lt;/li&gt;
	&lt;li&gt;Identify &lt;tt&gt;platform-complete&lt;/tt&gt; modules using &lt;tt&gt;stripes-form&lt;/tt&gt;. Refactor those instances to use React Final Form with &lt;tt&gt;&amp;lt;NavigationModal&amp;gt;&lt;/tt&gt; and &lt;tt&gt;final-form-focus&lt;/tt&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;h3&gt;&lt;a name=&quot;Someday&quot;&gt;&lt;/a&gt;Someday&lt;/h3&gt;
&lt;p&gt;This is the stage where &lt;tt&gt;redux-form&lt;/tt&gt; first-class support goes away, and modules that want to use it would need to add the reducer themselves.&lt;/p&gt;
&lt;ul class=&quot;alternate&quot; type=&quot;square&quot;&gt;
	&lt;li&gt;Remove &lt;tt&gt;redux-form&lt;/tt&gt; reducer from &lt;tt&gt;stripes-core&lt;/tt&gt;.&lt;/li&gt;
	&lt;li&gt;Archive &lt;tt&gt;stripes-form&lt;/tt&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;h2&gt;&lt;a name=&quot;References&quot;&gt;&lt;/a&gt;References&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://youtu.be/fxEW4jgoX-4&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;Erik Rasmussen &#8212; Final Form: Form state management via Observers&lt;/a&gt;&lt;br/&gt;
&lt;a href=&quot;https://github.com/final-form/react-final-form&quot; class=&quot;external-link&quot; rel=&quot;nofollow noreferrer&quot;&gt;React Final Form&lt;/a&gt;&lt;/p&gt;</description>
                <environment></environment>
        <key id="10946">UXPROD-1990</key>
            <summary>Migrate to React Final Form</summary>
                <type id="10002" iconUrl="https://folio-org.atlassian.net/rest/api/2/universal_avatar/view/type/issuetype/avatar/10322?size=medium">New Feature</type>
                                            <priority id="10002" iconUrl="https://dev.folio.org/assets/jira-priority/jira-p3.svg">P3</priority>
                        <status id="6" iconUrl="https://folio-org.atlassian.net/images/icons/statuses/closed.png" description="The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.">Closed</status>
                    <statusCategory id="3" key="done" colorName="green"/>
                                    <resolution id="10000">Won&apos;t Do</resolution>
                                                        <assignee accountid="62a96ae7192edb006f9f1bf9">Khalilah Gambrell</assignee>
                                                                <reporter accountid="62a96ae7192edb006f9f1bf9">Khalilah Gambrell</reporter>
                                    <labels>
                            <label>NFR</label>
                            <label>tech-debt</label>
                            <label>ux</label>
                    </labels>
                <created>Mon, 21 Jan 2019 20:56:28 +0000</created>
                <updated>Mon, 1 Mar 2021 08:27:57 +0000</updated>
                            <resolved>Wed, 13 Nov 2019 16:20:10 +0000</resolved>
                                                                        <due></due>
                            <votes>0</votes>
                                    <watches>2</watches>
                                                                <comments>
                                                            <comment id="11073" author="62a96ae7192edb006f9f1bf9" created="Tue, 22 Jan 2019 13:03:37 +0000"  >&lt;p&gt;&lt;a href=&quot;https://folio-org.atlassian.net/secure/ViewProfile.jspa?accountId=712020%3A3d5df1a2-9ff6-4d03-b1b0-7d6b01378729&quot; class=&quot;user-hover&quot; rel=&quot;712020:3d5df1a2-9ff6-4d03-b1b0-7d6b01378729&quot; data-account-id=&quot;712020:3d5df1a2-9ff6-4d03-b1b0-7d6b01378729&quot; accountid=&quot;712020:3d5df1a2-9ff6-4d03-b1b0-7d6b01378729&quot; rel=&quot;noreferrer&quot;&gt;Jeffrey Cherewaty&lt;/a&gt; and &lt;a href=&quot;https://folio-org.atlassian.net/secure/ViewProfile.jspa?accountId=5cd595118fa24d0dd2de1253&quot; class=&quot;user-hover&quot; rel=&quot;5cd595118fa24d0dd2de1253&quot; data-account-id=&quot;5cd595118fa24d0dd2de1253&quot; accountid=&quot;5cd595118fa24d0dd2de1253&quot; rel=&quot;noreferrer&quot;&gt;John Coburn&lt;/a&gt; - should this be considered a RFC? &lt;/p&gt;</comment>
                                                            <comment id="11077" author="62a96ae7192edb006f9f1bf9" created="Wed, 13 Nov 2019 16:19:42 +0000"  >&lt;p&gt;Closing feature. Will provide a React Final Form migration guide&lt;/p&gt;</comment>
                    </comments>
                <issuelinks>
                            <issuelinktype id="10006">
                    <name>Gantt End to Start</name>
                                            <outwardlinks description="has to be done before">
                                        <issuelink>
            <issuekey id="74538">STCON-110</issuekey>
        </issuelink>
            <issuelink>
            <issuekey id="61896">STCOR-308</issuekey>
        </issuelink>
                            </outwardlinks>
                                                        </issuelinktype>
                            <issuelinktype id="10003">
                    <name>Relates</name>
                                            <outwardlinks description="relates to">
                                        <issuelink>
            <issuekey id="25223">UIOR-561</issuekey>
        </issuelink>
                            </outwardlinks>
                                                                <inwardlinks description="relates to">
                                        <issuelink>
            <issuekey id="13699">UXPROD-2266</issuekey>
        </issuelink>
            <issuelink>
            <issuekey id="71117">UITEN-22</issuekey>
        </issuelink>
            <issuelink>
            <issuekey id="11992">UXPROD-2923</issuekey>
        </issuelink>
            <issuelink>
            <issuekey id="61934">STCOR-394</issuekey>
        </issuelink>
                            </inwardlinks>
                                    </issuelinktype>
                    </issuelinks>
                <attachments>
                    </attachments>
                <subtasks>
                    </subtasks>
                <customfields>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <customfield id="customfield_10000" key="com.atlassian.jira.plugins.jira-development-integration-plugin:devsummarycf">
                        <customfieldname>Development</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10057" key="com.atlassian.jira.plugin.system.customfieldtypes:select">
                        <customfieldname>Development Team</customfieldname>
                        <customfieldvalues>
                                <customfieldvalue key="10183"><![CDATA[Stripes Force]]></customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_10051" key="com.atlassian.jira.plugin.system.customfieldtypes:userpicker">
                        <customfieldname>Front End Estimator</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>557058:b5c00130-8516-454c-acae-335db2b62fd8</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <customfield id="customfield_10019" key="com.pyxis.greenhopper.jira:gh-lexo-rank">
                        <customfieldname>Rank</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0|hzxaug:</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_10020" key="com.pyxis.greenhopper.jira:gh-sprint">
                        <customfieldname>Sprint</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <customfield id="customfield_10025" key="com.atlassian.jira.ext.charting:timeinstatus">
                        <customfieldname>[CHART] Time in Status</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                    </customfields>
    </item>
</channel>
</rss>