Add repository visibility icon (#1648)

This is extracted from #1604.

app/components/repository-visibility-icon.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: ''
+});

app/styles/app/layouts/repo.scss

@@ -1,11 +1,28 @@
 .repo-header {
-  header {
+  header.name {
     @media #{$medium-up} {
       display: flex;
       flex-flow: row wrap;
       justify-content: flex-start;
       align-items: center;
     }
+
+    .icon {
+      width: 26px;
+      height: 26px;
+
+      @include colorSVG($cement-grey);
+
+      &.private {
+        transform: translateY(1px);
+      }
+
+      &.public {
+        transform: translateY(4px);
+      }
+
+      margin-right: 10px;
+    }
   }
 
   .repo-title {

app/templates/components/repository-layout.hbs

@@ -1,14 +1,17 @@
 <article class="repo-header">
-  <header>
-    <h1 data-test-repo-header-title class="repo-title">{{#link-to "owner" repo.owner.login}}{{repo.owner.login}}{{/link-to}} / {{#link-to "repo" repo}}{{repo.name}}{{/link-to}}</h1>
-      {{#external-link-to href=urlGithub class="repo-gh" title=(concat repo.name " on GitHub")}}
-        {{svg-jar 'icon-repooctocat'}}
-      {{/external-link-to}}
-      <div class="repo-badge">
-        <a href="#" id="status-image-popup" title="Latest push build on default branch: {{repo.defaultBranch.lastBuild.state}}" name="status-images" class="open-popup" {{action "toggleStatusBadgeModal"}}>
-          <img src={{statusImageUrl}} alt="build:{{repo.defaultBranch.lastBuild.state}}"/>
-        </a>
-      </div>
+  <header class='name'>
+    {{repository-visibility-icon repository=repo}}
+    <h1 data-test-repo-header-title class="repo-title">
+      {{#link-to "owner" repo.owner.login}}{{repo.owner.login}}{{/link-to}} / {{#link-to "repo" repo}}{{repo.name}}{{/link-to}}
+    </h1>
+    {{#external-link-to href=urlGithub class="repo-gh" title=(concat repo.name " on GitHub")}}
+      {{svg-jar 'icon-repooctocat'}}
+    {{/external-link-to}}
+    <div class="repo-badge">
+      <a href="#" id="status-image-popup" title="Latest push build on default branch: {{repo.defaultBranch.lastBuild.state}}" name="status-images" class="open-popup" {{action "toggleStatusBadgeModal"}}>
+        <img src={{statusImageUrl}} alt="build:{{repo.defaultBranch.lastBuild.state}}"/>
+      </a>
+    </div>
   </header>
   <main class="repo-main">
   <div class="repo-navigation">

app/templates/components/repository-visibility-icon.hbs

@@ -0,0 +1,5 @@
+{{#if repository.private}}
+  {{svg-jar 'icon-lock' alt='Private repository' class='icon private'}}
+{{else}}
+  {{svg-jar 'icon-os' alt='Public repository' class='icon public'}}
+{{/if}}