[JIRAALIGN-1216] Roadmap column "State" ordering should be based on flow sequence rather than 1st character of State name

Issue Summary

When sorting the "State" column on the Roadmap page, the ordering is sorted via the 1st character of the State name rather than the 0- 1- 2- predecessor label that we use in other places like Roadmap filtering. The problem is then that the sort order ends up looking awkward.

Pending Approval really should sequence then Ready to Start then In Progress etc. or vice versa based on clicking the column.

This is also reproducible on ac10xm1.agilecraft.com

Steps to Reproduce

1. Log in to Jira Align
2. Navigate to the Roadmaps page
3. In tier 1, configure a program and at least one PI
4. Here is what I used on ac10xm1 for my Program and PI:
   

1. Click on the State column to sort the states of the work items. Note also that it's not obvious that a user can click on this column header to sort the items.

Expected Results

The column, when clicked, should be sorted by the actual flow, i.e. Pending Approval -> Ready to Start -> In Progress, and so forth.

Actual Results

We are sorting the states alphabetically, ascending or descending, depending on how many times the status column header is clicked. The screenshot above shows this...note that we have Accepted, followed by In Progress, then Pending Approval.

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available