Add skeleton experiment for new repo page

static/js/pages/repo-view.js

@@ -7,7 +7,7 @@
       'newLayout': true,
       'title': '{{ namespace }}/{{ name }}',
       'description': 'Repository {{ namespace }}/{{ name }}'
-    })
+    });
   }]);
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService) {
@@ -61,6 +61,9 @@
         $scope.repository = repo;
         $scope.viewScope.repository = repo;
 
+        // Flag for new repo page experiment
+        $scope.newRepoExperiment = ($scope.repository.is_public && $scope.user.username != $scope.repository.namespace && $scope.publicRepoExperiment) ? true : false;
+
         // Load the remainder of the data async, so we don't block the initial view from
         // showing.
         $timeout(function() {

static/partials/repo-view.html

@@ -2,102 +2,108 @@
      resource="repositoryResource"
      error-message="'Repository not found'">
   <div class="page-content">
-    <div class="cor-title">
-      <span class="cor-title-link">
-        <a class="back-link" href="/repository">
-          Repositories
-        </a>
-      </span>
-      <span class="cor-title-content">
-        <span class="repo-circle no-background hidden-xs" repo="viewScope.repository"></span>
-        {{ namespace }} / {{ name }}
-        <span class="repo-star hidden-xs" repository="viewScope.repository" ng-if="!user.anonymous"></span>
-      </span>
+    <!-- New Public Repo Page experiment -->
+    <div ng-if="newRepoExperiment">
     </div>
-
-    <div class="cor-tab-panel">
-      <div class="cor-tabs">
-        <span class="cor-tab" tab-active="true" tab-title="Information" tab-target="#info"
-              tab-init="showInfo()">
-          <i class="fa fa-info-circle"></i>
+    <!-- Old Repo Page -->
+    <div ng-if="!newRepoExperiment">
+      <div class="cor-title">
+        <span class="cor-title-link">
+          <a class="back-link" href="/repository">
+            Repositories
+          </a>
         </span>
-
-        <span class="cor-tab" tab-title="Tags" tab-target="#tags" id="tagsTab"
-              tab-init="showTags()">
-          <i class="fa fa-tags"></i>
+        <span class="cor-title-content">
+          <span class="repo-circle no-background hidden-xs" repo="viewScope.repository"></span>
+          {{ namespace }} / {{ name }}
+          <span class="repo-star hidden-xs" repository="viewScope.repository" ng-if="!user.anonymous"></span>
         </span>
+      </div>
 
-        <span class="cor-tab" tab-title="Builds" tab-target="#builds" id="buildsTab"
-              tab-init="showBuilds()"
-              quay-show="viewScope.repository.can_write && Features.BUILD_SUPPORT">
-          <i class="fa fa-tasks"></i>
-        </span>
+      <div class="cor-tab-panel">
+        <div class="cor-tabs">
+          <span class="cor-tab" tab-active="true" tab-title="Information" tab-target="#info"
+                tab-init="showInfo()">
+            <i class="fa fa-info-circle"></i>
+          </span>
 
-        <span class="cor-tab" tab-title="Visualize" tab-target="#changes"
-              tab-shown="handleChangesState(true)"
-              tab-hidden="handleChangesState(false)">
-          <i class="fa fa-code-fork"></i>
-        </span>
+          <span class="cor-tab" tab-title="Tags" tab-target="#tags" id="tagsTab"
+                tab-init="showTags()">
+            <i class="fa fa-tags"></i>
+          </span>
 
-        <!-- Admin Only Tabs -->
-        <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
-              ng-show="viewScope.repository.can_admin">
-          <i class="fa fa-bar-chart"></i>
-        </span>
+          <span class="cor-tab" tab-title="Builds" tab-target="#builds" id="buildsTab"
+                tab-init="showBuilds()"
+                quay-show="viewScope.repository.can_write && Features.BUILD_SUPPORT">
+            <i class="fa fa-tasks"></i>
+          </span>
 
-        <span class="cor-tab" tab-title="Settings" tab-target="#settings" id="settingsTab"
-              tab-init="showSettings()"
-              ng-show="viewScope.repository.can_admin">
-          <i class="fa fa-gear"></i>
-        </span>
-      </div> <!-- /cor-tabs -->
+          <span class="cor-tab" tab-title="Visualize" tab-target="#changes"
+                tab-shown="handleChangesState(true)"
+                tab-hidden="handleChangesState(false)">
+            <i class="fa fa-code-fork"></i>
+          </span>
 
-      <div class="cor-tab-content">
-        <!-- Information -->
-        <div id="info" class="tab-pane active">
-          <div class="repo-panel-info"
-               repository="viewScope.repository"
-               builds="viewScope.builds"
-               is-enabled="infoShown"></div>
-        </div>
+          <!-- Admin Only Tabs -->
+          <span class="cor-tab" tab-title="Usage Logs" tab-target="#logs" tab-init="showLogs()"
+                ng-show="viewScope.repository.can_admin">
+            <i class="fa fa-bar-chart"></i>
+          </span>
 
-        <!-- Tags -->
-        <div id="tags" class="tab-pane">
-          <div class="repo-panel-tags"
-               repository="viewScope.repository"
-               image-loader="viewScope.imageLoader"
-               selected-tags="viewScope.selectedTags"
-               is-enabled="tagsShown"></div>
-        </div>
+          <span class="cor-tab" tab-title="Settings" tab-target="#settings" id="settingsTab"
+                tab-init="showSettings()"
+                ng-show="viewScope.repository.can_admin">
+            <i class="fa fa-gear"></i>
+          </span>
+        </div> <!-- /cor-tabs -->
 
-        <!-- Builds -->
-        <div id="builds" class="tab-pane">
-          <div class="repo-panel-builds"
-               repository="viewScope.repository"
-               builds="viewScope.builds"
-               is-enabled="buildsShown"></div>
-        </div>
+        <div class="cor-tab-content">
+          <!-- Information -->
+          <div id="info" class="tab-pane active">
+            <div class="repo-panel-info"
+                 repository="viewScope.repository"
+                 builds="viewScope.builds"
+                 is-enabled="infoShown"></div>
+          </div>
 
-        <!-- Changes -->
-        <div id="changes" class="tab-pane">
-          <div class="repo-panel-changes"
-               repository="viewScope.repository"
-               image-loader="viewScope.imageLoader"
-               selected-tags="viewScope.selectedTags"
-               is-enabled="viewScope.changesVisible"></div>
-        </div>
+          <!-- Tags -->
+          <div id="tags" class="tab-pane">
+            <div class="repo-panel-tags"
+                 repository="viewScope.repository"
+                 image-loader="viewScope.imageLoader"
+                 selected-tags="viewScope.selectedTags"
+                 is-enabled="tagsShown"></div>
+          </div>
 
-        <!-- Usage Logs -->
-        <div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin">
-          <div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div>
-        </div>
+          <!-- Builds -->
+          <div id="builds" class="tab-pane">
+            <div class="repo-panel-builds"
+                 repository="viewScope.repository"
+                 builds="viewScope.builds"
+                 is-enabled="buildsShown"></div>
+          </div>
 
-        <!-- Settings -->
-        <div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin">
-          <div class="repo-panel-settings" repository="viewScope.repository"
-               is-enabled="settingsShown"></div>
-        </div>
-      </div> <!-- /cor-tab-content -->
+          <!-- Changes -->
+          <div id="changes" class="tab-pane">
+            <div class="repo-panel-changes"
+                 repository="viewScope.repository"
+                 image-loader="viewScope.imageLoader"
+                 selected-tags="viewScope.selectedTags"
+                 is-enabled="viewScope.changesVisible"></div>
+          </div>
+
+          <!-- Usage Logs -->
+          <div id="logs" class="tab-pane" ng-if="viewScope.repository.can_admin">
+            <div class="logs-view" repository="viewScope.repository" makevisible="logsShown"></div>
+          </div>
+
+          <!-- Settings -->
+          <div id="settings" class="tab-pane" ng-if="viewScope.repository.can_admin">
+            <div class="repo-panel-settings" repository="viewScope.repository"
+                 is-enabled="settingsShown"></div>
+          </div>
+        </div> <!-- /cor-tab-content -->
+      </div>
     </div>
   </div>
 </div>