Minor adjustments to discovery page

- group more strongly by whether they accept payment
- indicate when no packages are found
- make renames more obvious
- open discovered pages in new tab to work around back issue

scss/pages/npm.scss

@@ -49,6 +49,9 @@
                 }
             }
         }
+        .discovery .sorry {
+            margin: 40px 0;
+        }
 
         form.package-json {
             margin-top: 30px;

tests/ttw/test_package_discovery.py

@@ -45,7 +45,7 @@ def test_pasting_a_package_json_works(self):
         self.css('form.package-json button').click()
 
         names = [x.text for x in self.css('.listing-name')]
-        assert names == ['mysql \u2192 MySQL', 'scape', 'amperize', 'netjet', 'falafel']
+        assert names == ['MySQL (mysql on npm)', 'scape', 'amperize', 'netjet', 'falafel']
 
         statuses = [x.text[3:] for x in self.css('.listing-details .status')]
         assert statuses == ['Approved', 'Rejected', 'Unreviewed', 'Unclaimed']

www/on/npm/index.html.spt

@@ -28,7 +28,7 @@ i18ned_flows = {'give': _('Give'), 'receive' : _('Receive')}
 tab_html = lambda key, tab: '{}'.format(i18ned_flows[key])
 tabs = tabs.make(tab_html, 'flow', flow, 'give', 'receive')
 
-deps, devdeps, optdeps = [], [], []
+discovered = []
 if request.method == 'POST':
     try:
         package_json = json.loads(request.body['package.json'], object_pairs_hook=OrderedDict)
@@ -40,12 +40,12 @@ if request.method == 'POST':
     # name in the tuple in case there is no package. Package and team should be
     # None if we don't have one.
 
-    groups = [package_json.get(g, OrderedDict()) for g in GROUPS]
-    assert all(d.__class__ is OrderedDict for d in groups)
+    package_json_groups = [package_json.get(g, OrderedDict()) for g in GROUPS]
+    assert all(d.__class__ is OrderedDict for d in package_json_groups)
 
     # Load package and project (team) objects (in a single database call).
     alldeps = set()
-    [map(alldeps.add, d) for d in groups]
+    [map(alldeps.add, d) for d in package_json_groups]
     known = website.db.all('''
         SELECT p.name
              , p.*::packages    package
@@ -61,19 +61,18 @@ if request.method == 'POST':
     known = {n:(p,t) for n,p,t in known}
 
     # Replace ranges with tuples.
-    for source, deps in zip(GROUPS, groups):
+    for source, deps in zip(GROUPS, package_json_groups):
         for name in deps:
             package, project = known.get(name, (None, None))
             deps[name] = (source, name, package, project)
 
-    # Flatten into a single list, approved teams first.
-    ready, not_ready = [], []
-    for group in groups:
+    # Regroup.
+    yes, no = [], []
+    for group in package_json_groups:
         for rec in group.values():
             project = rec[3]
-            is_ready = project.is_approved if project else False
-            (ready if is_ready else not_ready).append(rec)
-    discovered = ready + not_ready
+            (yes if project and project.is_approved else no).append(rec)
+    discovered = [(_("Ready to accept payments"), yes), (_("Not available to pay"), no)]
 
 [---]
 {% from "templates/nav-tabs.html" import nav_tabs with context %}
@@ -105,8 +104,12 @@ if request.method == 'POST':
 
 {% if flow == None %}
 {% if discovered %}
+<div class="discovery">
+{% for heading, group in discovered %}
+<h2>{{ heading }}</h2>
+{% if group %}
 <table class="listing">
-    {% for i,(group, name, package, project) in enumerate(discovered, start=1) %}
+    {% for i, (source, name, package, project) in enumerate(group, start=1) %}
     <tr>
         <td class="item i{{i}}{% if not package %} disabled{% endif %}">
             {% if project %}
@@ -117,20 +120,27 @@ if request.method == 'POST':
             <div class="package-manager"><img src="{{ website.asset('npm-n.png') }}"></div>
 
             {% if project and project.name != package.name %}
-            <a class="listing-name" href="{{ project.url_path }}">
-                {{ package.name }} &rarr; {{ project.name }}
+            <a class="listing-name" href="{{ project.url_path }}" target="_blank">
+                {{ _( "{project} ({package} on npm)"
+                    , project=project.name
+                    , package=package.name
+                     ) }}
             </a>
             {% elif project %}
-            <a class="listing-name" href="{{ project.url_path }}">{{ package.name }}</a>
+            <a class="listing-name" href="{{ project.url_path }}" target="_blank">
+                {{ package.name }}
+            </a>
             {% elif package %}
-            <a class="listing-name" href="{{ package.url_path }}">{{ package.name }}</a>
+            <a class="listing-name" href="{{ package.url_path }}" target="_blank">
+                {{ package.name }}
+            </a>
             {% else %}
             <span class="listing-name">{{ name }}</span>
             {% endif %}
 
             <div class="listing-details">
                 <span class="i">{{ i }}</span>
-                <span>&middot; <code>{{ group }}</code></span>
+                <span>&middot; <code>{{ source }}</code></span>
                 {% if project %}
                 <span class="status">&middot;
                     <a href="{{ project.review_url }}"><span
@@ -154,6 +164,11 @@ if request.method == 'POST':
     </tr>
     {% endfor %}
 </table>
+{% else %}
+<p class="sorry">{{ _("No packages discovered.") }}</p>
+{% endif %}
+{% endfor %}
+</div>
 {% endif %}
 
 <form action="./" method="POST" class="package-json">
@@ -178,7 +193,6 @@ if request.method == 'POST':
 {% if user.ANON %}
     <div class="important-button">{{ sign_in_using(button_class='large') }}</div>
 {% else %}
-    </p>
     {% if not packages_for_claiming %}
     <p class="sorry">{{ _("No packages found.") }}</p>
     {% else %}

www/search.spt

@@ -227,7 +227,7 @@ zip = zip
     {% endif %}
 
     {% if query and not (usernames or statements or emails or projects) %}
-    <p class="note">{{ _("Sorry, we didn't find anything matching your query.") }}</p>
+    <p class="sorry">{{ _("Sorry, we didn't find anything matching your query.") }}</p>
     {% endif %}
 
 {% endblock %}