js: created <tag> component with copy to clipboard

Fixes #697
Fixes #1108

app/assets/javascripts/main.js

@@ -22,6 +22,7 @@ import './bootstrap';
 // new modules structure
 import './modules/users';
 import './modules/dashboard';
+import './modules/explore';
 import './modules/repositories';
 import './modules/namespaces';
 import './modules/teams';

app/assets/javascripts/modules/explore/components/result-item.js

@@ -0,0 +1,19 @@
+import moment from 'moment';
+
+import Tag from '~/modules/repositories/components/tag';
+
+export default {
+  template: '#js-result-item-tmpl',
+
+  props: ['repository'],
+
+  components: {
+    Tag,
+  },
+
+  computed: {
+    updatedAt() {
+      return moment(this.repository.updated_at).fromNow();
+    },
+  },
+};

app/assets/javascripts/modules/explore/index.js

@@ -0,0 +1 @@
+import './pages/index';

app/assets/javascripts/modules/explore/pages/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+
+import ResultItem from '../components/result-item';
+
+const { set } = Vue;
+
+$(() => {
+  if (!$('body[data-route="explore/index"]').length) {
+    return;
+  }
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: 'body[data-route="explore/index"] .vue-root',
+
+    components: {
+      ResultItem,
+    },
+
+    data() {
+      return {
+        repositories: [],
+      };
+    },
+
+    mounted() {
+      set(this, 'repositories', window.repositories);
+    },
+  });
+});

app/assets/javascripts/modules/repositories/components/tag.vue

@@ -0,0 +1,42 @@
+<style scoped>
+  .label {
+    cursor: pointer;
+  }
+</style>
+
+<template>
+  <div class="label label-success" title="Copy to clipboard" @click="copyToClipboard">
+    {{ tag.name }}
+  </div>
+</template>
+
+<script>
+  import Alert from '~/shared/components/alert';
+
+  export default {
+    props: ['tag', 'repository'],
+
+    computed: {
+      commandToPull() {
+        const hostname = this.repository.registry_hostname;
+        const repoName = this.repository.full_name;
+        const tagName = this.tag.name;
+
+        return `docker pull ${hostname}/${repoName}:${tagName}`;
+      },
+    },
+
+    methods: {
+      copyToClipboard() {
+        const $temp = $('<input>');
+
+        $('body').append($temp);
+        $temp.val(this.commandToPull).select();
+        document.execCommand('copy');
+        $temp.remove();
+
+        Alert.show('Copied pull command to clipboard');
+      },
+    },
+  };
+</script>

app/assets/javascripts/modules/repositories/components/tags-table-row.vue

@@ -10,7 +10,7 @@
       <input type="checkbox" v-model="selected" @change="toggleTag()">
     </td>
     <td>
-      <div class="label label-success" v-for="t in tag">{{ t.name }}</div>
+      <tag v-for="t in tag" :key="t.name" :tag="t" :repository="state.repository"></tag>
     </td>
 
     <td>{{ tag[0].author.username }}</td>
@@ -33,6 +33,8 @@
 </template>
 
 <script>
+  import Tag from './tag';
+
   import VulnerabilitiesParser from '../services/vulnerabilities-parser';
 
   export default {
@@ -43,6 +45,10 @@
       state: Object,
     },
 
+    components: {
+      Tag,
+    },
+
     data() {
       return {
         tagsPath: '/tags',

app/assets/javascripts/modules/repositories/pages/show.js

@@ -51,6 +51,7 @@ $(() => {
         const id = this.$refs.repoLink.dataset.id;
 
         RepositoriesService.get(id).then((response) => {
+          set(this.state, 'repository', response.body);
           set(this, 'tags', response.body.tags);
           set(this, 'notLoaded', false);
           set(this, 'unableToFetchBefore', false);

app/assets/stylesheets/pages/explore.scss

@@ -10,7 +10,7 @@
   }
 
   .result-item {
-    background: rgba(255, 255, 255, 0.7);
+    background: rgba(255, 255, 255, 0.85);
     border-radius: 5px;
     margin-bottom: 10px;
     padding: 15px;

app/models/repository.rb

@@ -25,6 +25,7 @@ class Repository < ActiveRecord::Base
   has_many :stars, dependent: :delete_all
   has_many :comments, dependent: :delete_all
 
+  delegate :registry, to: :namespace
   # We don't validate the format because we get that from the registry, and
   # it's guaranteed to be well-formatted there.
   validates :name, presence: true, uniqueness: { scope: "namespace_id" }
@@ -73,6 +74,9 @@ def as_json(options = {})
 
     super(options).tap do |json|
       json["full_name"] = full_name
+      json["registry_hostname"] = registry.hostname
+      json["stars"] = stars.count
+      json["updated_at"] = updated_at
       json["namespace"] = namespace.as_json(only: [:id, :name])
       json["team"] = namespace.team.as_json(only: [:id, :name])
       json["tags"] = groupped_tags

app/views/explore/components/_result_item.slim

@@ -0,0 +1,16 @@
+li.result-item.text-left
+  .clearfix
+    h4.result-item-name.pull-left
+      | {{ repository.full_name }}
+
+    .result-item-stars.pull-right
+      | {{ repository.stars }}
+      |  
+      i.fa.fa-star
+
+  .clearfix
+    .tags.pull-left
+      <tag :tag="tag" v-for="tag in repository.tags[0]" :key="tag.id" :repository="repository"></tag>
+
+    .pull-right
+      | Updated {{ updatedAt }}

app/views/explore/index.slim

@@ -3,5 +3,4 @@ section.row-0
     .col-md-4.col-sm-3.col-xs-1
     .col-md-4.col-sm-6.col-xs-10.text-center
       = render 'explore/partials/top'
-      = render 'explore/partials/form'
       = render 'explore/partials/result'

app/views/explore/partials/_result.html.slim

@@ -3,8 +3,16 @@
     - repo_count = @repositories.count
     | #{pluralize(repo_count, 'repository')} #{repo_count == 1 ? "was" : "were"} found
   ul.result-list
-    - @repositories.each do |r|
-      = render partial: 'explore/partials/result_item', locals: { repository: r }
+    <result-item :repository="repository" v-for="repository in repositories" :key="repository.full_name"></result-item>
 
 - if params[:explore] && [email protected]?
   h2 Your search did not match any repositories.
+
+- content_for :js_header do
+  javascript:
+    window.repositories = #{raw @repositories.to_json};
+
+- content_for :js_body do
+  - cache "explore/components/templates" do
+    script#js-result-item-tmpl type="text/x-template"
+      = render "explore/components/result_item"

app/views/explore/partials/_top.html.slim

@@ -2,3 +2,5 @@
 = image_tag 'layout/portus-logo-login-page.png', class: 'login-picture'
 
 .text-center = link_to 'Go back to the login page', new_user_session_path, class: 'btn btn-link'
+
+= render 'explore/partials/form'

app/views/layouts/authentication.html.slim

@@ -3,7 +3,6 @@ html
   head
     title Portus
     = stylesheet_link_tag 'application', media: 'all'
-    = javascript_include_tag(*webpack_asset_paths("application"))
     = csrf_meta_tags
     meta content="width=device-width, initial-scale=1" name="viewport"
     link href="/favicon/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"
@@ -28,6 +27,13 @@ html
     meta content="/favicon/mstile-144x144.png" name="msapplication-TileImage"
     meta content="/favicon/browserconfig.xml" name="msapplication-config"
     meta content="#205683" name="theme-color"
+
+    script src="//cdn.polyfill.io/v2/polyfill.js?features=Array.prototype.some,Array.prototype.findIndex,Array.from"
+    = javascript_include_tag(*webpack_asset_paths("application"))
+    = yield :js_header
+
   body.login data-route="#{js_route}"
-    .container-fluid
+    .container-fluid.vue-root
       = yield
+
+    = yield :js_body