From 4597cabcab19a954002f40ab236a0d99ef44ad67 Mon Sep 17 00:00:00 2001
From: Conrad Chan <conradchan@box.com>
Date: Thu, 3 Jun 2021 16:08:25 -0700
Subject: [PATCH 1/2] chore: Add support for collections for start:dev

---
 src/index.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/index.html b/src/index.html
index 1aa871485..f24117b5f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -39,6 +39,13 @@
                 height: 90vh;
                 width: 100vw;
             }
+
+            @media only screen and (max-width: 375px) {
+                /* Hide the collections fields when the viewport is small so the E2E tests don't fail */
+                #collection {
+                    display: none;
+                }
+            }
         </style>
     </head>
 
@@ -56,6 +63,14 @@
                 <button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
             </div>
 
+            <div class="container" id="collection">
+                <div>Collection: <span id="collection-display"></span></div>
+                <input id="collection-set" data-testid="collection" placeholder="Enter list of file ids" />
+                <button onClick="setProperty('collection')" data-testid="collection-set">Set new collection</button>
+                <button onClick="clearProperty('collection')" data-testid="collection-clear">Clear</button>
+                <div>Enter 2+ comma separated list of file ids</div>
+            </div>
+
             <div class="container" id="load">
                 <button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
             </div>
@@ -67,6 +82,14 @@
             /* global Box */
             preview = new Box.Preview();
 
+            function clearProperty(selector) {
+                var inputEl = document.getElementById(selector + '-set');
+                var displayEl = document.getElementById(selector + '-display');
+                inputEl.value = '';
+                displayEl.textContent = '';
+                localStorage.setItem(selector, '');
+            }
+
             function setProperty(selector) {
                 // Get new value, fallback to local storage
                 var inputValue = document.querySelector('#' + selector + '-set');
@@ -87,12 +110,20 @@
             function loadPreview(options) {
                 var token = localStorage.getItem('token');
                 var fileid = localStorage.getItem('fileid');
+                var fileidList = localStorage.getItem('collection') || '';
 
                 if (!token || !fileid) {
                     return;
                 }
 
+                var collection =
+                    fileidList &&
+                    fileidList.split(',').map(function(fileid) {
+                        return fileid.trim();
+                    });
+
                 var previewOptions = options || {
+                    collection,
                     enableThumbnailsSidebar: true,
                     showAnnotations: true,
                     showDownload: true,
@@ -105,6 +136,7 @@
             // Try to load all properties from storage on page load
             setProperty('token');
             setProperty('fileid');
+            setProperty('collection');
             loadPreview();
         </script>
     </body>

From 0d02f3f89e7eb1ac12e1b29f60c4d5623efeabed Mon Sep 17 00:00:00 2001
From: Conrad Chan <conradchan@box.com>
Date: Fri, 4 Jun 2021 10:27:45 -0700
Subject: [PATCH 2/2] chore: changed the layout styles

---
 src/index.html | 75 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 27 deletions(-)

diff --git a/src/index.html b/src/index.html
index f24117b5f..f11be064b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,17 +9,18 @@
         <style>
             * {
                 box-sizing: border-box;
-                font-family: sans-serif;
                 margin: 0;
                 padding: 0;
+                font-family: sans-serif;
             }
 
             .setters-container {
                 display: flex;
-                font-size: 75%;
+                flex-direction: column;
                 height: 10vh;
-                justify-content: space-around;
                 padding: 20px;
+                overflow: auto;
+                font-size: 75%;
             }
 
             .setters-container button,
@@ -28,6 +29,7 @@
             }
 
             .container {
+                flex: 1 1 auto;
                 text-align: center;
             }
 
@@ -36,14 +38,29 @@
             }
 
             .preview-container {
-                height: 90vh;
                 width: 100vw;
+                height: 90vh;
+            }
+
+            .primary-setters,
+            .secondary-setters {
+                display: flex;
+            }
+
+            .secondary-setters {
+                margin-top: 10px;
             }
 
             @media only screen and (max-width: 375px) {
-                /* Hide the collections fields when the viewport is small so the E2E tests don't fail */
-                #collection {
-                    display: none;
+                .setters-container {
+                    padding: 0;
+                }
+
+                .input-display {
+                    max-width: 150px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                 }
             }
         </style>
@@ -51,28 +68,32 @@
 
     <body>
         <div class="setters-container">
-            <div class="container" id="token">
-                <div>Token: <span id="token-display"></span></div>
-                <input id="token-set" data-testid="token" placeholder="Enter token" />
-                <button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
-            </div>
-
-            <div class="container" id="file">
-                <div>File ID: <span id="fileid-display"></span></div>
-                <input id="fileid-set" placeholder="Enter file ID" data-testid="fileid" />
-                <button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
-            </div>
-
-            <div class="container" id="collection">
-                <div>Collection: <span id="collection-display"></span></div>
-                <input id="collection-set" data-testid="collection" placeholder="Enter list of file ids" />
-                <button onClick="setProperty('collection')" data-testid="collection-set">Set new collection</button>
-                <button onClick="clearProperty('collection')" data-testid="collection-clear">Clear</button>
-                <div>Enter 2+ comma separated list of file ids</div>
+            <div class="primary-setters">
+                <div class="container" id="token">
+                    <div class="input-display">Token: <span id="token-display"></span></div>
+                    <input id="token-set" data-testid="token" placeholder="Enter token" />
+                    <button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
+                </div>
+
+                <div class="container" id="file">
+                    <div class="input-display">File ID: <span id="fileid-display"></span></div>
+                    <input id="fileid-set" placeholder="Enter file ID" data-testid="fileid" />
+                    <button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
+                </div>
+
+                <div class="container" id="load">
+                    <button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
+                </div>
             </div>
 
-            <div class="container" id="load">
-                <button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
+            <div class="secondary-setters">
+                <div class="container" id="collection">
+                    <div class="input-display">Collection: <span id="collection-display"></span></div>
+                    <input id="collection-set" data-testid="collection" placeholder="Enter list of file ids" />
+                    <button onClick="setProperty('collection')" data-testid="collection-set">Set new collection</button>
+                    <button onClick="clearProperty('collection')" data-testid="collection-clear">Clear</button>
+                    <div>Enter 2+ comma separated list of file ids</div>
+                </div>
             </div>
         </div>