Support categorization and reordering of Canned Responses

[kohlee]

Is your feature request related to a problem? Please describe.
It is difficult for texters to locate Canned Responses because they display in an alphabetical list.

Describe the solution you'd like
Admins should be able to reorder the Canned Responses list and create headings for different categories of responses.

Describe alternatives you've considered
Canned Responses could display in the order in which they were created rather than alphabetical order, so admins had some control over their presentation.

Additional context
mui/material-ui#836 mui/material-ui#837 mui/material-ui#839

[hiemanshu]

@kohlee confirming, you want the canned responses to be orderable. Changing to just display in order of creation, would take a few mins. Making the list orderable would be a few hours to a day's worth of work.

[hiemanshu]

@politics-rewired/organizing should have been tagged!

[kohlee]

@hiemanshu This + global canned responses or the ability to copy and paste all could be delayed until we have the time, but orderable is definitely worth it!

[hiemanshu]

Created by: Hiemanshu
Signed off by:

User Story

As a SuperVolunteer
I should be able to reorder canned responses

UI Design Considerations

The UI will get a small change, on the left of the canned responses, we'll add an icon (like the hamburger icon), to signify that items are reorderable.

Technical Details

• canned_response will get a new column called order, to store the order of canned responses.
• react-beautiful-dnd will be added to add Drag and Drop support (recommended by MUI itself) more details/examples here: https://codesandbox.io/s/draggable-material-ui-oj3wz Add Drag & drop component mui/mui-x#12364

Acceptance Criteria

Scenario: Supervolunteer reorders canned resposne
“Given that I’m in a role of Supervolunteer (or above)
When I open the “Canned Responses” section
Then the system shows me the list of all canned responses
When I drag the canned responses around
And I click the "Save" button
Then the system saves the canned responses in the order
And the texter will see the canned responses in the saved order”

QA Considerations

QA happens at 3 stages, devs before PR creation, release coordinator during RC release, and organising during the beta stage. Describe any considerations to be taken during QA, or parts that might induce more anxiety, and needs extra testing.

[hiemanshu]

@politics-rewired/organizing @bchrobot thoughts please!

[ninabaldwin]

@hiemanshu this looks good! Can we use this kind of icon instead?

[bchrobot]

Looks good to me!