Remove the 'remove' button from home snap card; fix alignemtn in snap…

snappy/app/converge.go

@@ -37,6 +37,7 @@ import (
 const (
 	installedSnaps = iota
 	availableSnaps
+	trackedSnaps
 )
 
 // SnapState wraps the current state of a snap
@@ -104,6 +105,18 @@ func (h *Handler) allPackages(snapCondition int, query string, private bool, sec
 
 	if snapCondition == installedSnaps {
 		snaps, err = h.snapdClient.List(nil, nil)
+	} else if snapCondition == trackedSnaps {
+		names := h.stateTracker.AllTrackedSnaps()
+		sort.Strings(names)
+
+		snaps = make([]*client.Snap, 0, len(names))
+		for n := range names {
+			s, err := h.getSnap(names[n])
+			if err != nil {
+				break
+			}
+			snaps = append(snaps, s)
+		}
 	} else {
 		opts := &client.FindOptions{
 			Query:   url.QueryEscape(query),
@@ -232,7 +245,8 @@ func formatInstallData(d time.Time) string {
 		// store snap
 		return ""
 	}
-	return d.Format(time.UnixDate)
+	const layout = "02 January 2006 15:04:05"
+	return d.Format(layout)
 }
 
 type snapPrices map[string]float64

snappy/app/converge_test.go

@@ -301,10 +301,11 @@ func (s *AllPackagesSuite) TestHasSnaps(c *C) {
 
 func (s *AllPackagesSuite) TestFormatInstallDate(c *C) {
 	c.Assert(formatInstallData(time.Time{}), Equals, "")
-	t, _ := time.Parse("2006-Jan-02", "2013-Feb-03")
+	const layout = "2006-Jan-02"
+	t, _ := time.Parse(layout, "2013-Feb-03")
 	c.Assert(formatInstallData(t),
 		Equals,
-		"Sun Feb  3 00:00:00 UTC 2013")
+		"03 February 2013 00:00:00")
 }
 
 func (s *AllPackagesSuite) TestSnapPrices(c *C) {
@@ -317,6 +318,34 @@ func (s *AllPackagesSuite) TestSnapPrices(c *C) {
 	c.Assert(priceStringFromSnapPrice(prices), Equals, "0.1 EUR")
 }
 
+func (s *AllPackagesSuite) TestTrackedSnapsListing(c *C) {
+	s.c.StoreSnaps = []*client.Snap{
+		common.NewSnap("app2"),
+		common.NewSnap("app1"),
+	}
+
+	s.c.StoreSnaps[0].Status = client.StatusAvailable
+	s.c.StoreSnaps[1].Status = client.StatusAvailable
+
+	s.c.Err = errors.New("error")
+	err := s.h.installPackage("app1")
+	c.Assert(err, IsNil)
+	s.c.Err = nil
+
+	s.c.Err = errors.New("error")
+	snaps, err := s.h.allPackages(trackedSnaps, "", false, "")
+
+	c.Assert(err, IsNil)
+	c.Assert(snaps, HasLen, 1)
+	c.Assert(snaps[0].Name, Equals, "app1")
+
+	// s.c.Err = nil
+	s.h.abortRunningOperation("app1")
+	snaps, err = s.h.allPackages(trackedSnaps, "", false, "")
+	c.Assert(snaps, HasLen, 0)
+	c.Assert(err, IsNil)
+}
+
 type SnapOperationTrackingSuite struct {
 	h Handler
 	c *snapdclient.FakeSnapdClient

snappy/app/handlers.go

@@ -77,6 +77,8 @@ func (h *Handler) getAll(w http.ResponseWriter, r *http.Request) {
 	snapCondition := availableSnaps
 	if r.FormValue("installed_only") == "true" {
 		snapCondition = installedSnaps
+	} else if r.FormValue("tracked_snaps") == "true" {
+		snapCondition = trackedSnaps
 	} else {
 		snapCondition = availableSnaps
 	}

snappy/app/handlers_test.go

@@ -87,6 +87,7 @@ func (s *HandlersSuite) TestGetAll(c *C) {
 		{"/?installed_only=true", true, ""},
 		{"/?q=foo", false, "foo"},
 		{"/?installed_only=true&q=foo", true, ""},
+		{"/?tracked_snaps=true", false, ""},
 	}
 
 	for _, tt := range tests {

statetracker/statetracker.go

@@ -132,6 +132,17 @@ func (s *StateTracker) IsTrackedForRunningOperation(snap *client.Snap) (bool, st
 	return !hasOperationCompleted(state.Status, snap), state.ChangeID
 }
 
+// AllTrackedSnaps returns the list of snap names that are currently being tracked
+func (s *StateTracker) AllTrackedSnaps() []string {
+	keys := make([]string, len(s.states))
+	i := 0
+	for k := range s.states {
+		keys[i] = k
+		i++
+	}
+	return keys
+}
+
 // TrackInstall tracks the installation of the given snap
 func (s *StateTracker) TrackInstall(changeID string, snap *client.Snap) {
 	if isInstalled(snap) {
@@ -141,7 +152,6 @@ func (s *StateTracker) TrackInstall(changeID string, snap *client.Snap) {
 	if tracked, _ := s.IsTrackedForRunningOperation(snap); tracked {
 		return
 	}
-
 	s.trackOperation(changeID, snap.Name, StatusInstalling)
 }
 

statetracker/statetracker_test.go

@@ -18,6 +18,7 @@
 package statetracker
 
 import (
+	"sort"
 	"testing"
 	"time"
 
@@ -232,3 +233,33 @@ func (s *StateTrackerSuite) TestTrackInstallingChange(c *C) {
 		DeepEquals,
 		&SnapState{Status: StatusInstalling, ChangeID: changeID, LocalSize: 2, TaskSummary: "summary"})
 }
+
+func (s *StateTrackerSuite) TestAllTrackedSnaps(c *C) {
+	snaps := []*client.Snap{
+		&client.Snap{Name: "name", Status: client.StatusActive},
+		&client.Snap{Name: "name1", Status: client.StatusActive},
+		&client.Snap{Name: "name2", Status: client.StatusActive},
+	}
+	s.t.TrackDisable("", snaps[0])
+	s.t.TrackDisable("", snaps[1])
+	s.t.TrackDisable("", snaps[2])
+
+	names := s.t.AllTrackedSnaps()
+	sort.Strings(names)
+	c.Assert(names, DeepEquals, []string{"name", "name1", "name2"})
+
+	s.t.CancelTrackingFor("name")
+	names = s.t.AllTrackedSnaps()
+	sort.Strings(names)
+	c.Assert(names, DeepEquals, []string{"name1", "name2"})
+
+	s.t.CancelTrackingFor("name2")
+	names = s.t.AllTrackedSnaps()
+	sort.Strings(names)
+	c.Assert(names, DeepEquals, []string{"name1"})
+
+	s.t.CancelTrackingFor("name1")
+	names = s.t.AllTrackedSnaps()
+	sort.Strings(names)
+	c.Assert(names, DeepEquals, []string{})
+}

www/src/js/common/snaplists.js

@@ -49,21 +49,20 @@ var updateInstalledStates = function(collection) {
 };
 
 module.exports = {
-  fetchSnapListView: function(title, query, options) {
+  fetchSnapListView: function(query, section, options) {
     var chan = Radio.channel('root');
     var snaplist = new Snaplist();
     var sections = [];
 
     if (localStorage) {
       sections = JSON.parse(localStorage.getItem('storeSections')) || [];
     }
-
     var m = new Backbone.Model({
       query: query,
-      title: title,
+      title: 'App store',
       isGrid: true,
-      isHomeActive: false,
       sections: sections.concat('private'),
+      activeSection: section,
       loading: true
     });
 

www/src/js/controllers/home.js

@@ -6,30 +6,35 @@ var Snap = require('../models/snap.js');
 var HomeLayoutView = require('../views/home.js');
 var React = require('react')
 var ReactBackbone = require('react.backbone');
+var Config = require('../config.js');
 
 var SnapList = require('../collections/snaplist.js');
 
 module.exports = {
   index: function() {
     var chan = Radio.channel('root');
-    var installedBask = new SnapList();
+    var trackedSnapList = new SnapList();
+    var installedSnapList = new SnapList();
 
-    installedBask.fetch({
-      data: $.param({
-        'installed_only': true
-      }),
-      success: function(snaplist) {
-        var c = snaplist.all()
+    $.when(
+      trackedSnapList.fetch({ data: $.param({ 'tracked_snaps': true })}),
+      installedSnapList.fetch({ data: $.param({ 'installed_only': true })})
+    ).then(function() {
+      trackedSnapList = new Backbone.Collection(trackedSnapList.filter(function(s) {
+        return s.get('status') === Config.INSTALL_STATE.INSTALLING;
+      }));
+      installedSnapList.add(trackedSnapList.toJSON(), {silent : true});
 
-        var installedSnapsView = React.createElement(HomeLayoutView, {
-          model: new Backbone.Model({
-            title: 'Installed snaps',
-            isHomeActive: true,
-          }),
+      var c = new Backbone.Collection(
+        trackedSnapList.toJSON().concat(
+          installedSnapList.toJSON()
+        )
+      );
+      var installedSnapsView = React.createElement(HomeLayoutView, {
+          model: new Backbone.Model({}),
           collection: c
-        });
-        chan.command('set:content', {reactElement: installedSnapsView});
-      }
+      });
+      chan.command('set:content', {reactElement: installedSnapsView});
     });
   },
 };

www/src/js/controllers/store.js

@@ -1,30 +1,20 @@
 var $ = require('jquery');
 var SnaplistTools = require('../common/snaplists.js');
 
+// TODO factor code a bit more
+
 module.exports = {
   index: function() {
-    SnaplistTools.fetchSnapListView(
-      'Featured snaps',
-      '',
-      {data: $.param({'section': 'featured'})}
-    );
+    var section = 'featured';
+    SnaplistTools.fetchSnapListView('', section, {data: $.param({'section': section})});
   },
   section: function(s) {
     // Special case for private section which is not a section
     // per se but a specificity of a snap
+    var data = {data: $.param({'section': s})};
     if (s === 'private') {
-      SnaplistTools.fetchSnapListView(
-        'Private snaps',
-        '',
-        {data: $.param({'private_snaps': true})}
-      );
-    }
-    else {
-      SnaplistTools.fetchSnapListView(
-        s,
-        '',
-        {data: $.param({'section': s})}
-      );
+      data = {data: $.param({'private_snaps': true})};
     }
+    SnaplistTools.fetchSnapListView('', s, data);
   }
 };

www/src/js/views/home.js

@@ -25,7 +25,12 @@ function snapToCard(snap) {
     name: snap.get('name'),
     author: snap.get('developer'),
     type: snap.get('type') === 'app'? '' : snap.get('type'),
-    action: snap.get('installActionString'),
+    action: (
+      snap.get('status') === Config.INSTALL_STATE.INSTALLING
+        || snap.get('status') === Config.INSTALL_STATE.REMOVING
+        ? snap.get('installActionString')
+        : ''
+    ),
     actions: [snap.get('installActionString')],
     image: snap.get('id'),
     installProgress: (
@@ -38,6 +43,16 @@ function snapToCard(snap) {
   }
 }
 
+function snapTypeToString(type) {
+  if (! type) {
+    return "";
+  }
+  if (type === "os") {
+    return "OS";
+  }
+  return type;
+}
+
 module.exports = React.createBackboneClass({
   getInitialState: function() {
     return {
@@ -165,8 +180,8 @@ module.exports = React.createBackboneClass({
                             </div>
                           </a>
                         </td>
-                        <td>By {snap.get('developer')}</td>
-                        <td>{snap.get('type')}</td>
+                        <td>{snap.get('developer')}</td>
+                        <td>{snapTypeToString(snap.get('type'))}</td>
                       </tr>
                   );
                 })}

www/src/js/views/layout-banner.js

@@ -33,7 +33,6 @@ module.exports = Marionette.ItemView.extend({
       'query': window.decodeURI(window.location.search.slice(3)) || '',
       'name': snapweb.NAME,
       'subname': snapweb.SUBNAME,
-      'isHomeActive': (path === ''),
       'isStoreActive': (path === 'store' || path === 'search'),
       'isSettingsActive': (path === 'settings'),
       'isUPS': (window.location.port !== '4201')

www/src/js/views/snap-details.js

@@ -132,15 +132,6 @@ function SnapActions(props) {
     installerClass += " b-installer_thinking";
   }
 
-  var installerButtonClassName = "col-5";
-  if (status === CONF.INSTALL_STATE.INSTALLED ||
-      status === CONF.INSTALL_STATE.ACTIVE) {
-    installerButtonClassName = "col-2";
-  }
-  if (status === CONF.INSTALL_STATE.REMOVED) {
-    installerButtonClassName = "col-5";
-  }
-
   var progressBarWrapperStyle = {
     border: progressBarBorder,
     borderRadius: progressBarBorderRadius,
@@ -156,7 +147,7 @@ function SnapActions(props) {
   };
 
   return (
-    <div id="installer-button" className={installerButtonClassName}>
+    <div id="installer-button">
       <Installer
          installerClass={installerClass}
          model={model} />
@@ -226,6 +217,9 @@ module.exports = React.createBackboneClass({
 
           <div className="row" style={{padding: "0", paddingBottom: "0.5em"}}>
             <div className="col-7">
+              <ul className="p-list--divided"></ul>
+            </div>
+            <div className="col-4">
               <SnapActions
                 model={model}
                 downloadProgress={this.state.downloadProgress}

www/src/js/views/store.js

@@ -37,9 +37,10 @@ module.exports = React.createBackboneClass({
             </div>
           </div>
 
-          <div className="row">
+          <div className="row" style={{fontSize: "24px", marginBottom: "55px"}}>
+            <h1 style={{fontSize: "24px"}}>{model.get('title')}</h1>
             <StoreSections
-              title={model.get('title')}
+              activeSection={model.get('activeSection')}
               sections={model.get('sections')}
             />
           </div>