From a28147aea2b2d66266fd2a4396ad1e6d5f84df40 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Sat, 1 Dec 2018 13:16:41 -0800
Subject: [PATCH] Updates Wikidata field for the latest field flexbox changes
 Adds an Identifier label to the Wikidata QID input

---
 data/core.yaml                |  2 ++
 dist/locales/en.json          |  3 ++
 modules/ui/fields/wikidata.js | 52 +++++++++++++++++++++++++++--------
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index 6d672ae10..154539f0d 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -1243,3 +1243,5 @@ en:
     west: "W"
     coordinate: "{coordinate}{direction}"
     coordinate_pair: "{latitude}, {longitude}"
+  wikidata:
+    identifier: "Identifier"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 00df217ee..bf0506afe 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -1437,6 +1437,9 @@
             "coordinate": "{coordinate}{direction}",
             "coordinate_pair": "{latitude}, {longitude}"
         },
+        "wikidata": {
+            "identifier": "Identifier"
+        },
         "presets": {
             "categories": {
                 "category-barrier": {
diff --git a/modules/ui/fields/wikidata.js b/modules/ui/fields/wikidata.js
index e0e2e75d9..497aebe6d 100644
--- a/modules/ui/fields/wikidata.js
+++ b/modules/ui/fields/wikidata.js
@@ -12,6 +12,8 @@ import {
     utilRebind
 } from '../../util';
 
+import { t } from '../../util/locale';
+
 
 export function uiFieldWikidata(field) {
     var dispatch = d3_dispatch('change'),
@@ -23,14 +25,46 @@ export function uiFieldWikidata(field) {
 
     function wiki(selection) {
 
-        title = selection.selectAll('input.wiki-title')
+        var wrap = selection.selectAll('.form-field-input-wrap')
             .data([0]);
 
-        title = title.enter()
-            .append('input')
+        wrap = wrap.enter()
+            .append('div')
+            .attr('class', 'form-field-input-wrap form-field-input-' + field.type)
+            .merge(wrap);
+
+
+        var list = wrap.selectAll('ul')
+            .data([0]);
+
+        list = list.enter()
+            .append('ul')
+            .attr('class', 'labeled-inputs')
+            .merge(list);
+
+
+        var items = list.selectAll('li')
+            .data(field.keys);
+
+        // Enter
+        var enter = items.enter()
+            .append('li')
+            .attr('class', function(d) { return 'preset-access-' + d; });
+
+        enter
+            .append('span')
+            .attr('class', 'label preset-label-access')
+            .attr('for', function(d) { return 'preset-input-wikidata-' + d; })
+            .text(t('wikidata.identifier'));
+
+        var inputWrap = enter
+            .append('div')
+            .attr('class', 'preset-input-wikidata-wrap');
+
+        title = inputWrap.append('input')
             .attr('type', 'text')
-            .attr('class', 'wiki-title')
-            .attr('id', 'preset-input-' + field.safeid)
+            .attr('class', 'preset-input-wikidata')
+            .attr('id', function(d) { return 'preset-input-wikidata-' + d; })
             .call(utilNoAuto)
             .merge(title);
 
@@ -38,13 +72,9 @@ export function uiFieldWikidata(field) {
             .on('blur', blur)
             .on('change', change);
 
-
-        link = selection.selectAll('.wiki-link')
-            .data([0]);
-
-        link = link.enter()
+        link = enter
             .append('button')
-            .attr('class', 'button-input-action wiki-link minor')
+            .attr('class', 'form-field-button wiki-link')
             .attr('tabindex', -1)
             .call(svgIcon('#iD-icon-out-link'))
             .merge(link);