Configuration

SketchSystems.spec

Configuration
  connections -> Connections
  channels -> Channels

  Connections
    add -> Configure Connection

    List Connections
      Has Data2?
        false -> loading2
        true -> idle2
      idle2
        refresh -> loading2
      
        Connection Card
          edit -> Configure Connection Details
          
          connected
          warning
          bloodyError
      
      loading2
        resolve -> idle2
        error -> error2
      error2
        retry -> loading2     

  Channels
    add -> Configure Connection
  
    List Channels*
      Has Data?
        no -> loading
        yes -> idle
      idle
        refresh -> loading
      
        Channel Card
          edit -> Configure Connection Details
      
          Initial*
            toggle -> Expanded
          Expanded
            toggle -> Initial
  
      loading
        resolve -> idle
        error -> error
      error
        retry -> loading
      
Configure Connection
  Select System*
    submit -> Is OAuth?
  Is OAuth?
    true -> OAuth Flow
    false -> Configure Connection Details
  OAuth Flow
    success -> Configure Connection Details
    error -> Select System
  Configure Connection Details
    submit -> Is Form Valid?
  Is Form Valid?
    true -> Submitting
    false -> Configure Connection Details
  Submitting
    resolve -> Done
    error -> Configure Connection Details
  Done
    close -> Configuration

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}