Allow supplying and absolute image in search.

[delivers #89736538 #89736572]

.jshintrc

@@ -14,5 +14,6 @@
   "undef": false,
   "strict": false,
   "trailing": true,
-  "browser": true
+  "browser": true,
+  "maxlen": 120
 }

app/assets/javascripts/jquery.filterable_list/jquery.filterable_list.js

@@ -5,17 +5,23 @@
 
     base.$el = $(el);
 
+    base.filters = {
+      absolute: /^!=\s*/
+    };
+
     base.defaultOptions = {
       $queryField: base.$el.find('input.query-field'),
       queryFormSelector: 'form.search-form',
       $queryForm: base.$el.find('form.search-form'),
       limit: 40,
       $localImageResults: base.$el.find('.local-image-results'),
       $remoteImageResults: base.$el.find('.remote-image-results'),
+      $absoluteImageResults: base.$el.find('.absolute-image-results'),
       $templateResults: base.$el.find('.template-results'),
       $resultHeadings: base.$el.find('.search-title'),
       remoteImageResultTemplate: Handlebars.compile($('#remote_image_result_template').html()),
       localImageResultTemplate: Handlebars.compile($('#local_image_result_template').html()),
+      absoluteImageResultTemplate: Handlebars.compile($('#absolute_image_result_template').html()),
       templateResultTemplate: Handlebars.compile($('#template_result_template').html()),
       loadingTemplate: Handlebars.compile($('#loading_row_template').html()),
       noResultsTemplate: Handlebars.compile($('#no_results_row_template').html()),
@@ -36,19 +42,15 @@
     };
 
     base.bindEvents = function() {
-      base.queryField.onChange(base.fetchResults);
+      base.queryField.onChange(base.execQuery);
       base.$el.on('submit', base.options.queryFormSelector, base.handleSubmit);
       base.$el.on('click', base.options.chosenDropdownSelector, base.fetchTags);
       base.$el.on('click', base.options.templateDetailsSelector, base.handleTemplateDetailsClick);
     };
 
     base.handleSubmit = function(e) {
       e.preventDefault();
-      base.fetchResults(base.queryField.getTerm());
-    };
-
-    base.handleQueryChange = function(e) {
-      base.fetchResults();
+      base.execQuery(base.queryField.getTerm());
     };
 
     base.handleTemplateDetailsClick = function(e) {
@@ -66,15 +68,29 @@
       return modal;
     };
 
-    base.fetchResults = function(term) {
-      base.displayLoadingIndicators();
-      base.options.$resultHeadings.css('display', 'block');
+    base.execQuery = function(term) {
       PMX.Tracker.trackEvent('search', base.options.trackingAction, term);
+      base.options.$resultHeadings.css('display', 'block');
+
+      if (term.match(base.filters.absolute)) {
+        base.loadAbsoluteResult(term);
+      } else {
+        base.displayLoadingIndicators();
+        base.searchResults.fetch(term);
+        base.searchResults.templates(base.loadTemplateResults);
+        base.searchResults.localImages(base.loadLocalImageResults);
+        base.searchResults.remoteImages(base.loadRemoteImageResults);
+      }
+    };
+
+    base.loadAbsoluteResult = function(term) {
+        base.options.$resultHeadings.first().css('display', 'none');
+        base.options.$templateResults.html('');
+        base.options.$remoteImageResults.html('');
 
-      base.searchResults.fetch(term);
-      base.searchResults.templates(base.loadTemplateResults);
-      base.searchResults.localImages(base.loadLocalImageResults);
-      base.searchResults.remoteImages(base.loadRemoteImageResults);
+        var image = { source: term.replace(base.filters.absolute, '') };
+        var resultsHtml = base.options.absoluteImageResultTemplate(image);
+        base.options.$localImageResults.html(resultsHtml);
     };
 
     base.loadRemoteImageResults = function(images, errors) {

app/assets/stylesheets/panamax/search.css.scss.erb

@@ -393,6 +393,23 @@ body#search_flow main:after {
   }
 }
 
+.search-result-item.absolute-image-result {
+  background: $white;
+  border: none;
+
+  .badge {
+    width: 80px;
+    height: 80px;
+    border-radius: 40px;
+    margin: 15px;
+    line-height: 80px;
+  }
+
+  .actions {
+    border: none;
+  }
+}
+
 .search-result-item.template-result {
   .community-data {
     @extend .actions;

app/views/search/_absolute_image_row.html.haml

@@ -0,0 +1,23 @@
+- remote ||= false
+- app ||= nil
+.search-result-item.absolute-image-result{data: {'title' => presenter.title, 'status-label' => presenter.status_label}}
+  .badge.absolute= 'Absolute'
+  .basic-info
+    %h3
+      = presenter.title
+    %p
+      This image search query looks like it may be a private image.
+      %br/
+      = link_to 'Learn about private image authorization.', 'https://github.com/CenturyLinkLabs/panamax-ui/wiki/How-to:-Add-Registries', target: '_blank'
+  .actions
+    - if app
+      = form_tag app_services_path(app.id) do
+        = hidden_field_tag 'app[name]', @app.name
+        = hidden_field_tag 'app[category]', 'null', class: 'category-form-field'
+        = hidden_field_tag 'name', presenter.title
+        = hidden_field_tag 'app[image]', presenter.title
+        %button.button-positive{ data: { disable_with: 'Adding...', tracking: { method: 'click', action: 'Add to Application', category: 'Run Image', label: presenter.title }}} Add to App
+    - else
+      = form_tag apps_path do
+        = hidden_field_tag 'app[image]', presenter.title
+        %button.button-positive{ data: { disable_with: 'Starting App...', tracking: { method: 'click', action: 'Create Application', category: 'Run Image', label: presenter.title }}} Run Image

app/views/search/new.html.haml

@@ -1,12 +1,16 @@
-- content_for(:title, 'Search')
-- content_for(:body_id, 'search_flow')
+:ruby
+  json_image_presenter = JsonImagePresenter.new
+  content_for(:title, 'Search')
+  content_for(:body_id, 'search_flow')
 
 %script#template_result_template{type: 'text/x-handlebars-template'}
   = render 'template_row', {presenter: JsonTemplatePresenter.new}
 %script#remote_image_result_template{type: 'text/x-handlebars-template'}
-  = render 'image_row', {presenter: JsonImagePresenter.new, remote: true}
+  = render 'image_row', {presenter: json_image_presenter, remote: true}
 %script#local_image_result_template{type: 'text/x-handlebars-template'}
-  = render 'image_row', {presenter: JsonImagePresenter.new}
+  = render 'image_row', {presenter: json_image_presenter}
+%script#absolute_image_result_template{type: 'text/x-handlebars-template'}
+  = render 'absolute_image_row', {presenter: json_image_presenter}
 %script#loading_row_template{type: 'text/x-handlebars-template'}
   = render 'loading_row'
 %script#no_results_row_template{type: 'text/x-handlebars-template'}
@@ -21,7 +25,12 @@
   = form_for @search_result_set, url: search_path, method: :get, html: {class: 'search-form'} do |f|
     = f.text_field :q, placeholder: 'enter your query', accesskey: 's', class: 'query-field'
     = f.button 'Search', class: 'button-primary'
-    %p.microcopy Examples: Rails, redis, NGiNX, mongoDB, you get the picture...
+    %p.microcopy
+      %strong Examples:
+      Wordpress,
+      =link_to '!=namespace/private-repo', 'https://github.com/CenturyLinkLabs/panamax-ui/wiki/How-to:-Add-Registries#running-an-image-from-a-private-repository', target: '_blank', title: 'Learn about search filters.'
+      =','
+      Rails, redis, NGiNX, you get the picture...
 
   = render 'keyword_cloud', keywords: @keywords_sorted_by_term, sort_title: 'Count', sorted_by: :name, display_style: 'none'
   = render 'keyword_cloud', keywords: @keywords_sorted_by_count, sort_title: 'Name', sorted_by: :count

app/views/services/_add_service.html.haml

@@ -1,9 +1,12 @@
+- json_image_presenter = JsonImagePresenter.new
 %script#template_result_template{type: 'text/x-handlebars-template'}
   = render '/search/template_row', {presenter: JsonTemplatePresenter.new}
 %script#remote_image_result_template{type: 'text/x-handlebars-template'}
-  = render '/search/modal_image_row', {presenter: JsonImagePresenter.new, remote: true}
+  = render '/search/modal_image_row', {presenter: json_image_presenter, remote: true}
 %script#local_image_result_template{type: 'text/x-handlebars-template'}
-  = render '/search/modal_image_row', {presenter: JsonImagePresenter.new, locals: {app: @app}}
+  = render '/search/modal_image_row', {presenter: json_image_presenter, locals: {app: @app}}
+%script#absolute_image_result_template{type: 'text/x-handlebars-template'}
+  = render '/search/absolute_image_row', {presenter: json_image_presenter, app: @app}
 %script#source_blurb_row_template{type: 'text/x-handlebars-template'}
   = render '/search/source_blurb_row'
 %script#loading_row_template{type: 'text/x-handlebars-template'}

spec/javascripts/fixtures/search.html.haml

@@ -32,6 +32,10 @@
       id: nil,
       class: 'image-tag-select',
       data: {'loaded' => false}
+%script#absolute_image_result_template{type: 'text/x-handlebars-template'}
+  .search-result-item
+    %h4= '{{source}}'
+    %p This is an absolute path
 %script#no_results_row_template{type: 'text/x-handlebars-template'}
   %p sorry, nothin here
 %script#source_blurb_row_template{type: 'text/x-handlebars-template'}

spec/javascripts/jquery.filterable_list/jquery.filterable_list_spec.js

@@ -37,9 +37,15 @@ describe('$.fn.filterableList', function() {
 
     return {
       fetch: function() {},
-      templates: function(callback) { callback.call(this, dummyTemplates) },
-      localImages: function(callback) { callback.call(this, dummyLocalImages) },
-      remoteImages: function(callback) { callback.call(this, dummyRemoteImages, dummyErrors) }
+      templates: function(callback) {
+        callback.call(this, dummyTemplates);
+      },
+      localImages: function(callback) {
+        callback.call(this, dummyLocalImages, 'mys');
+      },
+      remoteImages: function(callback) {
+        callback.call(this, dummyRemoteImages, dummyErrors);
+      }
     }
   };
 
@@ -171,6 +177,13 @@ describe('$.fn.filterableList', function() {
 
       expect($('.template-results').html()).toContain('sorry, nothin here');
     });
+
+    it('displays the absolute image if no local images match the query', function() {
+      enterTerm('!=apache');
+
+      expect($('.local-image-results').html()).toContain('This is an absolute path');
+
+    });
   });
 
   describe('searching for anything', function() {