Rudimentary Patch UI

[Firionus]

Implement Patch UI according to Wireframes while leaving out non-essential features.

ToDo

• Navbar and Tabs
• Table
• Add New Fixture Button
• Patch-State Management "read only"
• Fixture Type Page
• Add New Fixture Dialog
• Add Jest Test Setup that at least allows for basic, low-level Unit Tests (testing algorithms or similar)
• Test Navigation in Cypress

---

after implementing API server-side:

• update dependencies
• fix version issues due to update
  • does not compile due to node-sass 6 not supported -> changed to node-sass 5
  • remaining issues when doing npm install
• update npm itself?
• check how we can apply variables from Blueprint.js in JS or whether we should change to SASS, etc.
• pull out react-hotkeys-hook and replace with Blueprint.js (they added hooks now)
• Ensure Hotkey Help Dialog opens by pressing "?" on german keyboard (Support Non-American Keyboards #51)
• fix WebSocket connection issue (only in firefox, needs minutes to properly connect, Chrome works) (Use HTTP to Check whether Server is Available #52)
  • track https://forum.kee.pm/t/bug-firefox-the-kee-browser-extension-stalls-websocket-connections-to-localhost/3473
  • change Reconnection Behavior to use HTTP for checking whether Server is up and only then try to connect WS once or twice
• Connect WebSocket during Startup - if it doesn't work, display Alert
  • Ensure you can't click on anything if Altert is open
  • Ensure Hotkeys don't work while Alert is open => only render main app if connection is open (remove Dialog for this)
  • Ensure Event Listeners will only be added once to webSocketConnection - currently does so for every component that calls the hook
• Subscribe to Patch Stream
• Add Fixture Type
• Delete Fixture Type
• Add Fixtures
• Delete Fixtures
• Test Basic Add/Delete for Fixtures/Fixture Types
• disallow any type with linting (-> explicit any now creates warning)
• When not selecting a fixture in Fixture Types it should not display empty but "Select Fixture" or something like that
• Validate incoming messages -> nah, it all comes from our own server, so we should be fine. If we want to do it in the future, we can use io-ts or something like that
• Test: When WebSocket connection can't be established or is closed the pop-up appears and prevents all interaction
  • Mock websockets cypress-io/cypress#2492 (comment)
• Change Adress format to Universe.Address to avoid sorting issues, etc. -> don't know why I would want this as a user now
• Make Typing for React Tabulator work
• Selected Row in Table not highlighted
• Select Multiple Fixtures in Fixture Patch
• move state of "no fixture (type) selected" from name="" to Option/Some/undefined/whatever
• add text label and shortcut to remove button
• Install a CSS-in-JS solution and use it throughout the code base (Emotion? Other ones?) (pushed to later date when we actually need it)
• Edit values in Table: FID, Name, Universe, Address
• Fix Bug:
  • Set Universe to 0, change Universe to empty, change FID, Universe shows up as 0 again
  • Set Universe to 0, change Universe to empty, reload, Universe is 0 again
  • Setting Universe from 0 to empty does not fire a cell edited event
  • MCVE: https://jsfiddle.net/1vnr7byw/ (change Alice and Bob's Toy Count to empty string, observe event is only fired for Bob)
  • Traced to closed but unfixed issue Editor does not distinguish null, 0, '' values olifolkerd/tabulator#1700
  • Try if it can be solved with a custom editor and/or mutators
  • Proposed Fix: Don't allow setting Universe to empty in UI, only DMX Address which has the same effect
• test editing
• test that "removal" of universe/address values works (needs to set to -1 in messaging)
• Design a Keyboard-only story (no mouse for higher speed)
  • Add Fixture/GDTF
  • Patch Tabs
  • Patch Tables (way too much work and Tabulator isn't an end solution anyway)
  • Optimize add fixture story
  • Tests
• Make a React element for labels with hotkey hints
  • Fix Unique Key Warnings
• Check for remaining TODOs
• Crash when submitting Add Fixture Form without selecting Fixture Type
• Add Fixtures: Select one Fixture Type, select DMX mode from it, change fixture type, dmx mode selector opens, but click outside, will result in non-valid DMX mode being shown in text field while selected item under the hood is undefined, so by default the first mode of the selected fixture type is used. This should be communicated or be invalid.
• "Add Fixtures" Validation
  • Validation: integer, min, max, required (for fixture type, mode (automatically done right now - still validate), FID)
  • perform on blur for each field
  • perform for all fields on submit and block submit if invalid
  • color field red and show popover next to it with detailed message if invalid
  • Allow empty Universe and Address which should be added to the Patch as unpatched (-1 in the JSON, empty in UI)
  • Easy Tests
  • Refactors
• Review code for bad style (cluttered components that do more than one thing, bad naming, ...)

Ommited Features

moved to other issues

• Search (Search in Patch UI #43)
• Undo/Redo (Undo/Redo #44)
• Universe Bar ("Universe Bar" in Patch UI #45)
• Info Pane while adding fixtures (Info Pane While Adding Fixtures #46)
• FixtureType Details (Nice Display of Fixture Type Details #47)
• AutoPatch (Auto Patch #48)
• Error Handling in Patch UI (Patch Error Handling #22)
• Visual Snapshot Testing (Visual Snapshot Testing #49)
• "Add Fixture" Defaults (Defaults for Add Fixture #50)

Mockup

[Firionus]

waiting on #27 to finalize API and test against the server implementation

[Firionus]

working on this on branch feature/patch-ui