WIP: GitHub download by URL

.gitignore

@@ -7,6 +7,7 @@
 /preview/components/*/
 /spec/*.js
 /spec/browser/*.js
+/spec/utils/*.js
 /spec/*.xml
 /spec/tests.html
 /dist/

Gruntfile.coffee

@@ -76,6 +76,14 @@ module.exports = ->
         src: '*.coffee'
         dest: 'spec'
         ext: '.js'
+      spec_utils:
+        options:
+          bare: true
+        expand: true
+        cwd: 'spec/utils'
+        src: '*.coffee'
+        dest: 'spec/utils'
+        ext: '.js'
       spec_browser:
         options:
           bare: true
@@ -348,11 +356,11 @@ module.exports = ->
           max_line_length:
             level: "ignore"
         src: 'spec/*.coffee'
-      spec_browser:
+      spec_sub:
         options:
           max_line_length:
             level: "ignore"
-        src: 'spec/browser/*.coffee'
+        src: 'spec/**/*.coffee'
 
 
     inlinelint:
@@ -389,6 +397,7 @@ module.exports = ->
         options:
           scripts: [
             "../browser/<%=pkg.name%>.js"
+            "./utils/middleware.js"
             '../node_modules/sinon/pkg/sinon-server.js'
           ]
         files:
@@ -495,8 +504,9 @@ module.exports = ->
   ]
   @registerTask 'spec', [
     'coffeelint:spec'
-    'coffeelint:spec_browser'
+    'coffeelint:spec_sub'
     'coffee:spec'
+    'coffee:spec_utils'
     'coffee:spec_browser'
     'connect:server'
     'watch'

README.md

@@ -76,6 +76,51 @@ Once it is built and the server is running you can access the UI at `http://loca
 
 In addition to this project, the other repository of interest is the [the-graph](https://github.com/the-grid/the-graph) graph editor widget used for editing flows.
 
+
+### Architecture
+
+On high level, the noflo-ui architecture follows [Redux](http://redux.js.org/) conventions adapted to NoFlo. Here is how the main data flow looks like:
+
+```fbp
+Store OUT -> IN Middleware     # Store sends actions together with application state to middleware
+Middleware NEW -> ACTION Store # Middleware can trigger new actions
+Middleware PASS -> IN Reduce   # Actions go from middleware to reducers
+Reduce OUT -> STATE Store      # Reducers produce a new state object that gets sent to store
+Reduce OUT -> STATE View       # State also goes to the view
+View ACTION -> ACTION Store    # View can trigger actions
+```
+
+The actual flow is more detailed. You can view and edit it in `graphs/main.fbp`.
+
+**Note:** the priciples outlined below are the architecture we're aiming towards. We're refactoring parts of the system to fit this architecture as we modify them. All new functionality should be implemented following this architecture.
+
+#### Store
+
+The Store component keeps track of the latest application state. When it receives new actions, it sends the out to the middleware and reducer chain together with the latest application state.
+
+#### Middleware
+
+noflo-ui middleware are components or graphs that can interact with particular actions. Each action passes through the chain of middlewares, and each middleware has two options on dealing with an action:
+
+1. Pass the action along without modifying it
+2. Capture the action and trigger new action(s)
+
+Middleware are where side effects related to the application state are handled. This can include talking to external web services, FBP runtime communications, and loading or saving data to the local IndexedDB. Middleware do receive the current application state and can read from it, but they only manipulate state by the way of creating new actions.
+
+Some middleware can also act as [generators](http://bergie.iki.fi/blog/noflo-process-api/#generator-components), creating new actions based on external input.
+
+The middleware approach is explained further in [this blog post](http://bergie.iki.fi/blog/redux-middleware-noflo/).
+
+#### Reducers
+
+The job of the reducers is to receive actions and make changes to application state. The reducers must in effect be pure functions, where the same input state and action combination always produces the same new state.
+
+#### View
+
+The application's view layer is implemented as [Polymer](https://www.polymer-project.org/) elements. The application view receives the state object produced by the reducers.
+
+User interactions in the application view must not make direct state changes. Instead, the application view can trigger new actions by firing Polymer events. These then get processed by the middleware and reducers, causing the state to change.
+
 ## Authentication and custom URLs
 
 NoFlo UI is using GitHub for authentication. We have a default application configured to work at `http://localhost:9999`. If you want to serve your NoFlo UI from a different URL, you need to register your own [OAuth application](https://github.com/settings/applications/new) with them. Make sure to match GitHub's [redirect URL policy](https://developer.github.com/v3/oauth/#redirect-urls).

components/BlobToEntry.coffee

@@ -16,13 +16,13 @@ handleGraph = (sha, content, entry, project, out) ->
     graph.properties.changed = false
     graph.properties.project = project.id
 
-    if entry.local
+    if entry.local and entry.local.startTransaction
       entry.local.startTransaction sha
       noflo.graph.mergeResolveTheirs entry.local, graph
       entry.local.endTransaction sha
       # Ensure the graph is marked as not changed since SHA
       entry.local.properties.changed = false
-      out.send entry.local
+      out.send entry.local.toJSON()
       return
 
     graph.properties.name = entry.remote.name
@@ -31,7 +31,7 @@ handleGraph = (sha, content, entry, project, out) ->
     graph.properties.environment = {} unless graph.properties.environment
     graph.properties.environment.type = project.type unless graph.properties.environment.type
     project.graphs.push graph
-    out.send graph
+    out.send graph.toJSON()
 
 handleComponent = (sha, content, entry, project, out) ->
   if entry.local

components/CheckGistExists.coffee

@@ -0,0 +1,34 @@
+noflo = require 'noflo'
+
+exports.getComponent = ->
+  c = new noflo.Component
+  c.inPorts.add 'in',
+    datatype: 'object'
+  c.outPorts.add 'existing',
+    datatype: 'array'
+  c.outPorts.add 'new',
+    datatype: 'object'
+
+  noflo.helpers.WirePattern c,
+    out: ['existing', 'new']
+    async: true
+  , (data, groups, out, callback) ->
+    unless data.state?.projects?.local.length
+      # No local projects, pass
+      out.new.send data
+      do callback
+      return
+
+    existing = data.state.projects.local.filter (project) ->
+      project.gist is data.payload.gist
+    unless existing.length
+      out.new.send data
+      do callback
+      return
+
+    out.existing.send [
+      'project'
+      existing[0].id
+      existing[0].main
+    ]
+    do callback

components/CheckRepoExists.coffee

@@ -0,0 +1,39 @@
+noflo = require 'noflo'
+
+exports.getComponent = ->
+  c = new noflo.Component
+  c.inPorts.add 'in',
+    datatype: 'object'
+  c.outPorts.add 'existing',
+    datatype: 'array'
+  c.outPorts.add 'new',
+    datatype: 'object'
+
+  noflo.helpers.WirePattern c,
+    out: ['existing', 'new']
+    async: true
+  , (data, groups, out, callback) ->
+    unless data.state?.projects?.local.length
+      # No local projects, pass
+      out.new.send data
+      do callback
+      return
+
+    existing = data.state.projects.local.filter (project) ->
+      return false unless project.repo is data.payload.repo
+      if data.payload.branch is 'master' and not project.branch
+        # We didn't use to store branch info, assume master
+        return true
+      return project.branch is data.payload.branch
+    unless existing.length
+      out.new.send data
+      do callback
+      return
+
+    out.existing.send [
+      'project'
+      existing[0].id
+      existing[0].main
+    ]
+    do callback
+

components/ClearWorkspace.coffee

@@ -0,0 +1,31 @@
+noflo = require 'noflo'
+
+clearList = (list) ->
+  list.splice 0, list.length
+clearWorkspace = (workspace) ->
+  workspace.project = null
+  workspace.graph = null
+  workspace.component = null
+  workspace.runtime.selected = null
+  clearList workspace.runtime.compatible
+  clearList workspace.graphs
+  clearList workspace.library
+  workspace.search.query = null
+  clearList workspace.search.components
+  clearList workspace.search.nodes
+  clearList workspace.selection.edges
+  clearList workspace.selection.nodes
+
+exports.getComponent = ->
+  c = new noflo.Component
+  c.inPorts.add 'in',
+    datatype: 'object'
+  c.outPorts.add 'out',
+    datatype: 'object'
+
+  noflo.helpers.WirePattern c,
+    async: true
+  , (data, groups, out, callback) ->
+    clearWorkspace data.state.workspace
+    out.send data.state
+    do callback