3 files changed, 33 insertions, 6 deletions
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 728bc05..b33f7b8 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -76,6 +76,12 @@ const PAGE_LIST_TOP_OPTIONS = [
   { name: -99, label: '──────────', disabled: true },
 ]
 
+const NO_POPUP = 0
+const POPUP_LIST_TOP_OPTIONS = [
+  { name: NO_POPUP, label: 'Select a popup group' },
+  { name: -99, label: '──────────', disabled: true },
+]
+
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
 // https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
 
@@ -181,6 +187,7 @@ class TileForm extends Component {
     errorFields: new Set([]),
     modified: false,
     pageList: [],
+    popupList: [],
   }
 
   constructor(props){
@@ -211,7 +218,11 @@ class TileForm extends Component {
       ...PAGE_LIST_TOP_OPTIONS,
       ...linkPages.map(page => ({ name: page.id, label: page.path }))
     ]
-    this.setState({ pageList })
+    let popupList = [
+      ...POPUP_LIST_TOP_OPTIONS,
+      ...Object.keys(page.editor.popups).map(popup_group => ({ name: popup_group, label: popup_group }))
+    ]
+    this.setState({ pageList, popupList })
     if (isNew) {
       const newTile = newImage({
         id: "new",
@@ -760,7 +771,7 @@ class TileForm extends Component {
 
   renderHyperlinkForm() {
     const { temporaryTile } = this.props
-    const { pageList } = this.state
+    const { pageList, popupList } = this.state
     const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
     const isPopupLink = (
       temporaryTile.target_page_id === OPEN_POPUP_LINK ||
@@ -785,8 +796,8 @@ class TileForm extends Component {
             onChange={this.handleSettingsSelect}
           />
         </div>
-        <div>
-          {isExternalLink &&
+        {isExternalLink && (
+          <div>
             <TextInput
               title=""
               placeholder='http://'
@@ -795,8 +806,19 @@ class TileForm extends Component {
               onChange={this.handleSettingsChange}
               autoComplete="off"
             />
-          }
-        </div>
+          </div>
+        )}
+        {(temporaryTile.target_page_id === OPEN_POPUP_LINK || temporaryTile.target_page_id === CLOSE_POPUP_LINK) && (
+          <div>
+            <Select
+              title="Popup"
+              name='target_popup'
+              selected={temporaryTile.settings.target_popup || NO_POPUP}
+              options={popupList}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
       </div>
     )
   }
diff --git a/frontend/app/views/tile/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js
index 9ceb999..127ca52 100644
--- a/frontend/app/views/tile/components/tile.list.js
+++ b/frontend/app/views/tile/components/tile.list.js
@@ -114,6 +114,10 @@ const TileListLink = ({ tile, pageTitles }) => (
       {'Link: '}
       {tile.target_page_id === -1
         ? 'External'
+        : tile.target_page_id === -2
+        ? 'Open popup'
+        : tile.target_page_id === -3
+        ? 'Close popup'
         : !tile.target_page_id
         ? 'No link specified!'
         : tile.target_page_id in pageTitles
diff --git a/frontend/app/views/tile/components/tile.new.js b/frontend/app/views/tile/components/tile.new.js
index b491fdd..e0f61a6 100644
--- a/frontend/app/views/tile/components/tile.new.js
+++ b/frontend/app/views/tile/components/tile.new.js
@@ -21,6 +21,7 @@ class TileNew extends Component {
         //   history.push('/' + graph.path + '/' + res.res.path)
         // }
         this.props.pageActions.hideAddTileForm()
+        this.props.pageActions.loadPopups()
         this.props.tileActions.clearTemporaryTile()
       })
       .catch(err => {