Spike: Multiple input panels for the editor

[sra405]

Consider dragging tabs between panels Keyboard accessibility (research on current approaches)

Current WIP designs: https://www.figma.com/file/SrINjD1MCT6VWYf1Yc9fV1/Code-Editor---Designs?node-id=1900-118677&t=xsD5IbunV7NXBj2p-4

[sra405]

@max to link design

[create-issue-branch[bot]]

Branch issues/431-Spike_Multiple_input_panels_for_the_editor created!

[maxelkins]

@loiswells97 Some drag and drop libs:

• https://shopify.github.io/draggable/
  • Cool but not accessible
• https://sortablejs.github.io/Sortable/
  • Interesting but not accessible
• https://salesforce-ux.github.io/dnd-a11y-patterns/#/?_k=c31315
  • Interesting keyboard accessible ideas

[loiswells97]

What's changed in the spike (#438)

• Create custom DroppableTabList and DraggableTab to incorporate drag and drop functionality into existing tab structure
• Update openFiles to be a list of lists, with one list of open files for each file panel
• Update focussedFileIndex to be a list of indices of open files, one for each file panel, and rename to focussedFileIndices
• Slight refactor to tab opening/closing/focussing etc. to reflect this

What's left to do after spike

• Fix bug where TabPanel content doesn't always update after dragging/dropping tabs
• Look into and fix keyboard interactions of switching between tabs versus selecting a tab to drag/drop (looks like switching between tabs is currently broken)
• Fix autoscroll which now happens simultaneously in every pane
• Create content for empty (newly-opened) file panel as per designs, and think about what should happen when you close the last tab in a file panel (should it be empty or close the panel?)
• Think about whether files should always open in the top panel
• Option to switch between panels being rows/columns
• Dropdown menu with 'new panel' and row/column switching options
• Limit number of open panels to 3
• Fix broken tests