Add custom UI for selecting from partial QID matches

src/cita/wikidata.ts

@@ -7,6 +7,7 @@ import qs2wbEdit from "quickstatements-to-wikibase-edit";
 // @ts-ignore - couldn't find the types for this
 import wbEdit from "wikibase-edit";
 import ItemWrapper from "./itemWrapper";
+import { config } from "../../package.json";
 
 // this is ugly but it automatically pulls the external package versions for us
 import { version as wbSdkVersion } from "../../node_modules/wikibase-sdk/package.json";
@@ -241,6 +242,7 @@ export default class {
 					)
 				) {
 					// query batch succeeded and at least one query returned results
+					// fix: this says "done" when the selector pops up if only partial matches are found
 					progress.updateLine(
 						"done",
 						Wikicite.getString(
@@ -336,23 +338,26 @@ export default class {
 							return candidateStr;
 						}),
 					];
-					const selection: any = {};
-					const select = Services.prompt.select(
-						window as mozIDOMWindowProxy,
-						Wikicite.getString(
-							"wikicite.wikidata.reconcile.approx.title",
-						),
-						Wikicite.formatString(
+					const args = {
+						choices: choices,
+						message: Wikicite.formatString(
 							"wikicite.wikidata.reconcile.approx.message",
 							[
 								item.title,
 								Zotero.ItemTypes.getLocalizedString(item.type),
 							],
 						),
-						choices,
+						Wikicite: Wikicite,
+					};
+					const selection: { value?: number } = {};
+					window.openDialog(
+						`chrome://${config.addonRef}/content/selector.xhtml`,
+						"",
+						"chrome,dialog=no,modal,centerscreen,resizable,width=500,height=340",
+						args,
 						selection,
 					);
-					if (select) {
+					if (selection.value) {
 						if (selection.value > 0) {
 							const index = selection.value - 1;
 							qids.set(item, candidates[index].id);

src/dialogs/selector/Selector.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as PropTypes from "prop-types";
+
+const Selector = (props: {
+	choices: string[];
+	message: string;
+	getString: (name: string) => string;
+	onCancel: () => void;
+	onConfirm: () => void;
+}) => (
+	<div>
+		<div id="selector-description">
+			<label>{props.message}</label>
+		</div>
+		<select size={10} id="selector-list">
+			{props.choices.map((text) => (
+				<option>{text}</option>
+			))}
+		</select>
+		<div id="selector-buttons">
+			<button onClick={props.onCancel}>
+				{props.getString("wikicite.wikidata.reconcile.approx.cancel")}
+			</button>
+			<button onClick={props.onConfirm}>
+				{props.getString("wikicite.wikidata.reconcile.approx.confirm")}
+			</button>
+		</div>
+	</div>
+);
+
+Selector.propTypes = {
+	choices: PropTypes.arrayOf(PropTypes.string),
+	message: PropTypes.string,
+	getString: PropTypes.func,
+	onCancel: PropTypes.func,
+	onConfirm: PropTypes.func,
+};
+
+export default Selector;

src/dialogs/selector/index.tsx

@@ -0,0 +1,36 @@
+import Selector from "./Selector";
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+
+let choices: string[];
+let message: string;
+let Wikicite: any;
+({ choices: choices, message, Wikicite } = (window as any).arguments[0]);
+const retVals: { value?: number } = (window as any).arguments[1];
+
+function onCancel() {
+	window.close();
+}
+
+function onConfirm() {
+	retVals.value = (
+		document.getElementById("selector-list") as HTMLSelectElement
+	).selectedIndex;
+	window.close();
+}
+
+window.addEventListener("load", () => {
+	document.title = Wikicite.getString(
+		"wikicite.wikidata.reconcile.approx.title",
+	);
+	const root = createRoot(document.getElementById("root")!);
+	root.render(
+		<Selector
+			choices={choices}
+			message={message}
+			getString={(name) => Wikicite.getString(name)}
+			onCancel={onCancel}
+			onConfirm={onConfirm}
+		/>,
+	);
+});

static/chrome/content/selector.xhtml

@@ -0,0 +1,16 @@
+<window id="selector" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+	<linkset>
+		<html:link rel="stylesheet" href="chrome://global/skin/" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://zotero/skin/zotero.css" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://__addonRef__/content/skin/default/selector.css" type="text/css" />
+		<html:link rel="stylesheet" href="chrome://__addonRef__/content/skin/default/overlay.css" type="text/css" />
+		<html:link rel="localization" href="__addonRef__-addon.ftl" />
+	</linkset>
+
+	<script type="text/javascript" src="chrome://zotero/content/include.js"></script>
+	<script src="chrome://__addonRef__/content/scripts/dialogs/selector/index.js"></script>
+
+	<html:div id="root"></html:div>
+</window>

static/chrome/content/skin/default/selector.css

@@ -0,0 +1,32 @@
+window#selector {
+	width: 100%;
+	height: 100%;
+	padding: 1em;
+}
+
+div#selector-description {
+	margin-bottom: 10px;
+}
+
+#selector-list {
+	margin-top: 10px;
+	margin-bottom: 10px;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+}
+
+div#selector-buttons {
+	margin-top: 10px;
+	text-align: right;
+}
+
+div#selector-buttons > button {
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+#root {
+	height: 100%;
+	width: 100%;
+}

static/chrome/locale/en-US/wikicite.properties

@@ -218,6 +218,8 @@ wikicite.wikidata.progress.qid.fetch.zero = No Wikidata entries were found
 wikicite.wikidata.progress.upload.done = Changes uploaded
 wikicite.wikidata.progress.upload.error = Uploading changes to Wikidata failed
 wikicite.wikidata.progress.upload.loading = Uploading changes to Wikidata
+wikicite.wikidata.reconcile.approx.cancel = Cancel
+wikicite.wikidata.reconcile.approx.confirm = Confirm
 wikicite.wikidata.reconcile.approx.message = Could not find exact match for "%1$s" (%2$s). Did you mean...?
 wikicite.wikidata.reconcile.approx.none = None
 wikicite.wikidata.reconcile.approx.title = Approximate match

zotero-plugin.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
 					"src/dialogs/identifier-importer/index.tsx",
 					"src/dialogs/citation-importer/index.tsx",
 					// "src/dialogs/preferences/index.tsx",
+					"src/dialogs/selector/index.tsx",
 				],
 				define: {
 					__env__: `"${process.env.NODE_ENV}"`,