Repo-view page with header, sidebar and body

static/js/directives/components/pages/repo-page/body.tsx

@@ -1,8 +1,32 @@
 import * as React from "react";
 
-class body extends React.Component<{}, {}> {
+interface IMain {
+  description: string
+}
+
+class body extends React.Component<IMain, {}> {
+  static propTypes = {
+    description: React.PropTypes.string.isRequired,
+  }
   render () {
-    return <div> The component for the main content</div>;
+    return(
+      <div>
+        <ul className="nav nav-tabs rp-tabs">
+            <li className="active"><a href="#tab1" data-toggle="tab">Description</a></li>
+            <li><a href="#tab2" data-toggle="tab">Automated Builds</a></li>
+        </ul>
+          <div className="panel-body rp-panelBody">
+              <div className="tab-content">
+                  <div className="tab-pane in active" id="tab1">
+                    <div className="rp-description">{this.props.description}</div>
+                  </div>
+                  <div className="tab-pane" id="tab2">
+                    TODO (IAN): Convert the build directives to angular components
+                  </div>
+              </div>
+          </div>
+      </div>
+    );
   }
 }
 

static/js/directives/components/pages/repo-page/header.tsx

@@ -1,8 +1,36 @@
 import * as React from "react";
 
-class repoHeader extends React.Component<{}, {}> {
+interface IHeader {
+  name: string,
+  namespace: string
+}
+
+class repoHeader extends React.Component<IHeader, {}> {
+  static propTypes = {
+    name: React.PropTypes.string.isRequired,
+    namespace: React.PropTypes.string.isRequired
+  }
   render () {
-    return <div> The component for the header</div>;
+    return(
+      <div className="row rp-header__row">
+        <div className="rp-title">{this.props.namespace}/{this.props.name}</div>
+        <div className="rp-button">
+          <div className="dropdown">
+            <button className="btn rp-button__dropdown dropdown-toggle" type="button" data-toggle="dropdown">
+              <span className="rp-button__text">
+                Run with <span className="rp-button__text--bold">Docker</span>
+              </span>
+              <span className="caret"></span>
+            </button>
+            <ul className="dropdown-menu">
+              <li><a href="#">Squashed Docker Image</a></li>
+              <li><a href="#">Rocket Fetch</a></li>
+              <li><a href="#">Basic Docker Pull</a></li>
+            </ul>
+          </div>
+        </div>        
+      </div>      
+    );
   }
 }
 

static/js/directives/components/pages/repo-page/sidebar.tsx

@@ -1,8 +1,84 @@
 import * as React from "react";
+import * as moment from "moment";
 
-class repoSidebar extends React.Component<{}, {}> {
+interface tag {
+  image_id: string;
+  last_modified: string;
+  name: string;
+  size: number;
+}
+
+interface ISidebar {
+  isPublic: string,
+  tags: Array<tag>,
+  repository: Object
+}
+
+class repoSidebar extends React.Component<ISidebar, {}> {
+  static propTypes = {
+    isPublic: React.PropTypes.string.isRequired,
+    tags: React.PropTypes.array.isRequired,
+    repository: React.PropTypes.object.isRequired
+  }
   render () {
-    return <div> The component for the sidebar</div>;
+    let isPublic: string = (this.props.isPublic) ? "Public" : "Private";
+    let sortedTags: Array<any> = [];
+    let tagRows: Array<any> = [];
+    let badgeIcon: string = (this.props.isPublic) ? "rp-badge__icon--public" : "rp-badge__icon--private";
+    let repository: any = this.props.repository;
+    let sharing: string = repository.company || repository.namespace;
+    for (let t in this.props.tags){
+      sortedTags.push(
+        {
+          name: this.props.tags[t].name,
+          lastModified: Date.parse(this.props.tags[t].last_modified)
+        }
+      );
+    }
+
+    sortedTags = sortedTags.sort(function(a,b){return a.lastModified - b.lastModified});
+    sortedTags.forEach(function(el, i){
+      tagRows.push(
+        <tr>
+          <td>
+            <i className="fa fa-tag rp-imagesTable__tagIcon" aria-hidden="true"></i>
+            {el.name}                   
+          </td>
+          <td>
+            {moment(el.lastModified).fromNow()}
+          </td>
+        </tr>
+      );
+    });
+
+    return(
+      <div>
+        <div className="rp-badge">
+          <div className={badgeIcon}>
+            {isPublic}
+          </div>
+        </div>
+        <div className="rp-sharing">
+          {sharing} is sharing this container {this.props.isPublic ? "publically" : "privately"}
+        </div>
+        <div className="rp-imagesHeader">
+          Latest Images
+        </div>
+        <div>
+          <table className="co-table co-fixed-table rp-imagesTable">
+            <thead>
+              <tr>
+                <th className="rp-imagesTable__headerCell">NAME</th>
+                <th className="rp-imagesTable__headerCell">LAST MODIFIED</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tagRows}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );    
   }
 }
 

static/js/pages/repo-view.js

@@ -61,10 +61,13 @@
         $scope.repository = repo;
         $scope.viewScope.repository = repo;
         $scope.publicRepoExperiment = CookieService.get('quay.public-repo-exp') == 'true';
+        if (!$scope.repository.description){
+          $scope.repository.description = "No Description";
+        }
 
         // Flag for new repo page experiment
         $scope.newRepoExperiment = $scope.repository.is_public && $scope.user.username != $scope.repository.namespace && $scope.publicRepoExperiment;
-
+        
         // Load the remainder of the data async, so we don't block the initial view from
         // showing.
         $timeout(function() {