Add UI updates to site page

Author: jeremydw

src/api.ts

@@ -15,6 +15,7 @@ interface GetManifestResponse {
 
 interface ListManifestRequest {
   site: string;
+  manifestType: string;
 }
 
 interface ListManifestResponse {
@@ -45,7 +46,10 @@ export class ApiHandler {
     expressRequest: express.Request,
     request: ListManifestRequest
   ): Promise<ListManifestResponse> {
-    const manifests = await server.listManifests(request.site);
+    const manifests = await server.listManifests(
+      request.site,
+      request.manifestType
+    );
     if (!manifests) {
       return {
         manifests: null,

src/server.ts

@@ -74,10 +74,13 @@ export const lookupManifest = async (options: ManifestLookupOptions[]) => {
   return entities.find(Boolean);
 };
 
-export const listManifests = async (siteId: string) => {
+export const listManifests = async (siteId: string, manifestType?: string) => {
   const query = datastore.createQuery('Fileset2Manifest');
   query.filter('site', siteId);
-  query.filter('manifestType', ManifestType.Branch);
+  query.filter(
+    'manifestType',
+    manifestType ? manifestType : ManifestType.Branch
+  );
   const result = await query.run();
   if (result) {
     return result[0];

src/webui/pages/sitepage.tsx

@@ -35,10 +35,20 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
 
   async componentDidMount() {
     document.title = `${this.state.siteId} – Fileset`;
+    this.updateTable(this.state.tab === undefined ? 'branch' : 'ref');
+  }
+
+  async componentWillReceiveProps(props: SitePageProps) {
+    this.setState({tab: props.tab});
+    this.updateTable(props.tab === undefined ? 'branch' : 'ref');
+  }
+
+  async updateTable(manifestType: string) {
     try {
       this.setState({loading: true});
       const resp: any = await rpc('manifest.list', {
         site: this.state.siteId,
+        manifestType: manifestType,
       });
       this.setState({
         loading: false,
@@ -50,10 +60,6 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
     }
   }
 
-  async componentWillReceiveProps(props: SitePageProps) {
-    this.setState({tab: props.tab});
-  }
-
   filterManifests(manifests: Array<any>) {
     return manifests.sort(
       (a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime()
@@ -92,24 +98,25 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
           </Link>
         </div>
         <div>
-          {this.state.tab === undefined ? this.renderManifestTable() : ''}
-          {this.state.tab === 'history' ? this.renderManifestTable() : ''}
+          {this.state.loading
+            ? this.renderLoading()
+            : this.renderManifestTable()}
         </div>
       </div>
     );
   }
 
-  renderManifestTable() {
-    return this.state.manifests && this.state.manifests.length ? (
+  renderStagingLinkTable() {
+    return (
       <div class="SitePage__content__table">
         <table>
           <thead>
             <tr>
               <th>Branch</th>
-              <th>Commit</th>
+              <th data-extra-small>Commit</th>
               <th>Modified</th>
-              <th>Files</th>
-              <th>Staging link</th>
+              <th data-extra-small>Files</th>
+              <th data-extra-small>Staging link</th>
             </tr>
           </thead>
           <tbody>
@@ -148,6 +155,78 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
           </tbody>
         </table>
       </div>
+    );
+  }
+
+  renderHistoryTable() {
+    return (
+      <div class="SitePage__content__table">
+        <table>
+          <thead>
+            <tr>
+              <th>Description</th>
+              <th data-extra-small>Commit</th>
+              <th>Modified</th>
+              <th data-extra-small>Files</th>
+              <th data-small>Links</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.filterManifests(this.state.manifests).map((manifest, i) => (
+              <tr>
+                <td>
+                  {manifest.commit ? (
+                    <div>
+                      {manifest.commit.message}{' '}
+                      <small>{manifest.commit.author.name}</small>
+                    </div>
+                  ) : (
+                    <small>(unknown)</small>
+                  )}
+                </td>
+                <td>
+                  <code>{manifest.ref.slice(0, 7)}</code>
+                </td>
+                <td>{prettyDate(manifest.modified)}</td>
+                <td>{Object.keys(manifest.paths).length}</td>
+                <td>
+                  <a
+                    class="button button--tonal button--small"
+                    href={`/fileset/sites/${
+                      this.state.siteId
+                    }/${encodeURIComponent(manifest.ref.slice(0, 7))}/`}
+                  >
+                    <span class="material-icons-outlined">view_list</span>
+                    Details
+                  </a>
+                  <a
+                    class="button button--tonal button--small"
+                    href={createStagingLink(
+                      window.location.href,
+                      manifest.site,
+                      '',
+                      manifest.ref
+                    )}
+                  >
+                    <span class="material-icons-outlined">open_in_new</span>
+                    Staging
+                  </a>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  renderManifestTable() {
+    return this.state.manifests && this.state.manifests.length ? (
+      this.state.tab === 'history' ? (
+        this.renderHistoryTable()
+      ) : (
+        this.renderStagingLinkTable()
+      )
     ) : (
       <div class="SitePage__content__empty">
         <div class="SitePage__content__empty__headline">
@@ -178,9 +257,7 @@ export class SitePage extends Page<SitePageProps, SitePageState> {
             {this.state.siteId}
           </Link>
         </div>
-        <div class="SitePage__content">
-          {this.state.loading ? this.renderLoading() : this.renderTabSet()}
-        </div>
+        <div class="SitePage__content">{this.renderTabSet()}</div>
       </div>
     );
   }

src/webui/sass/components/_button.sass

@@ -126,4 +126,4 @@ $button-primary-hover-color: $color-primary-hover
 
   .material-icons-outlined
     margin-right: 4px
-    margin-top: -1px
+    margin-top: 0

src/webui/sass/pages/_sitepage.sass

@@ -25,9 +25,18 @@
     text-align: left
     top: 0
 
+    &[data-extra-small]
+        width: 100px
+
+    &[data-small]
+        width: 200px
+
 .SitePage__content__table table tr td
     padding: 5px 10px
 
+    small
+        font-weight: 700
+
 .SitePage__content__table table tr:hover td
     background: #F7F8F8
 

src/webui/sass/utils/_tabset.sass

@@ -13,8 +13,10 @@
     font-weight: 700
 
     .material-icons-outlined
-        margin-right: 7px
         color: #969DA4
+        margin-right: 7px
+        max-height: 17px
+        max-width: 17px
 
     &--active
         border-bottom-color: $color-primary

src/webui/utils/links.ts

@@ -19,8 +19,9 @@ export function createStagingLink(
   });
   branch = branch.replace('/', '--');
   let prefix;
-  // Resulting branch isn't URL safe, we need to use the ref.
-  if (encodeURIComponent(branch) !== branch) {
+  // Resulting branch is empty (meaning we want the ref link), or isn't URL
+  // safe, we need to use the ref.
+  if (!branch || encodeURIComponent(branch) !== branch) {
     prefix = ref.slice(0, 7);
   } else {
     prefix = branch;