refactor: replace custom clipboard with stimulus (pypi#13353)

* refactor: replace custom clipboard with stimulus

Replaces the `clipboard` dependency with a Stimulus controller.
Uses native `navigator` browser API.

Refs: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

Signed-off-by: Mike Fiedler <[email protected]>

* translations

Signed-off-by: Mike Fiedler <[email protected]>

---------

Signed-off-by: Mike Fiedler <[email protected]>
Co-authored-by: Dustin Ingram <[email protected]>

Author: miketheman

tests/frontend/clipboard_controller_test.js

@@ -0,0 +1,69 @@
+/* Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global expect, beforeEach, describe, it, jest */
+
+import { Application } from "@hotwired/stimulus";
+import ClipboardController from "../../warehouse/static/js/warehouse/controllers/clipboard_controller";
+
+// Create a mock clipboard object, since jsdom doesn't support the clipboard API
+// See https://github.com/jsdom/jsdom/issues/1568
+Object.defineProperty(navigator, "clipboard", {
+  writable: true,
+  value: {
+    writeText: jest.fn(),
+  },
+});
+
+
+const clipboardContent = `
+  <div data-controller="clipboard">
+    <span id="#id" data-clipboard-target="source">Copyable Thing</span>
+    <button 
+      type="button"
+      class="copy-tooltip"
+      data-action="clipboard#copy"
+      data-clipboard-target="tooltip"
+      data-clipboard-tooltip-value="Copy to clipboard"
+    >
+      <i class="fa fa-copy" aria-hidden="true"></i>
+    </button>
+  </div>
+`;
+
+describe("ClipboardController", () => {
+  beforeEach(() => {
+    document.body.innerHTML = clipboardContent;
+    const application = Application.start();
+    application.register("clipboard", ClipboardController);
+  });
+
+  describe("copy", () => {
+    it("copies text to clipboard and resets", () => {
+      const button = document.querySelector(".copy-tooltip");
+      expect(button.dataset.clipboardTooltipValue).toEqual("Copy to clipboard");
+
+      button.click();
+
+      // Check that the text was copied to the clipboard
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith("Copyable Thing");
+      // Check that the tooltip text was changed
+      expect(button.dataset.clipboardTooltipValue).toEqual("Copied");
+
+      button.dispatchEvent(new FocusEvent("focusout"));
+
+      // Check that the tooltip text was reset
+      expect(button.dataset.clipboardTooltipValue).toEqual("Copy to clipboard");
+    });
+  });
+});

warehouse/locale/messages.pot

@@ -573,8 +573,8 @@ msgstr ""
 #: warehouse/templates/manage/project/release.html:194
 #: warehouse/templates/manage/project/releases.html:140
 #: warehouse/templates/manage/project/releases.html:179
-#: warehouse/templates/packaging/detail.html:362
-#: warehouse/templates/packaging/detail.html:381
+#: warehouse/templates/packaging/detail.html:364
+#: warehouse/templates/packaging/detail.html:383
 #: warehouse/templates/pages/classifiers.html:25
 #: warehouse/templates/pages/help.html:20
 #: warehouse/templates/pages/help.html:218
@@ -2431,9 +2431,9 @@ msgstr ""
 #: warehouse/templates/includes/hash-modal.html:50
 #: warehouse/templates/includes/hash-modal.html:59
 #: warehouse/templates/manage/account.html:206
-#: warehouse/templates/manage/account/recovery_codes-provision.html:57
+#: warehouse/templates/manage/account/recovery_codes-provision.html:58
 #: warehouse/templates/manage/account/totp-provision.html:57
-#: warehouse/templates/packaging/detail.html:161
+#: warehouse/templates/packaging/detail.html:162
 #: warehouse/templates/pages/classifiers.html:38
 msgid "Copy to clipboard"
 msgstr ""
@@ -2442,7 +2442,7 @@ msgstr ""
 #: warehouse/templates/includes/hash-modal.html:51
 #: warehouse/templates/includes/hash-modal.html:60
 #: warehouse/templates/manage/account.html:207
-#: warehouse/templates/manage/account/recovery_codes-provision.html:58
+#: warehouse/templates/manage/account/recovery_codes-provision.html:59
 #: warehouse/templates/manage/account/totp-provision.html:58
 #: warehouse/templates/pages/classifiers.html:39
 msgid "Copy"
@@ -4055,26 +4055,26 @@ msgstr ""
 msgid "Save your recovery codes"
 msgstr ""
 
-#: warehouse/templates/manage/account/recovery_codes-provision.html:62
+#: warehouse/templates/manage/account/recovery_codes-provision.html:63
 msgid "Download as file"
 msgstr ""
 
-#: warehouse/templates/manage/account/recovery_codes-provision.html:63
+#: warehouse/templates/manage/account/recovery_codes-provision.html:64
 #: warehouse/templates/manage/organization/roles.html:193
 #: warehouse/templates/manage/project/roles.html:134
 #: warehouse/templates/manage/project/roles.html:191
 msgid "Save"
 msgstr ""
 
-#: warehouse/templates/manage/account/recovery_codes-provision.html:66
+#: warehouse/templates/manage/account/recovery_codes-provision.html:67
 msgid "Continue"
 msgstr ""
 
-#: warehouse/templates/manage/account/recovery_codes-provision.html:69
+#: warehouse/templates/manage/account/recovery_codes-provision.html:70
 msgid "These codes will not be visible again."
 msgstr ""
 
-#: warehouse/templates/manage/account/recovery_codes-provision.html:72
+#: warehouse/templates/manage/account/recovery_codes-provision.html:73
 msgid "Ensure that you have securely stored them before continuing."
 msgstr ""
 
@@ -6014,139 +6014,139 @@ msgstr ""
 msgid "RSS: latest releases for %(project_name)s"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:163
+#: warehouse/templates/packaging/detail.html:164
 msgid "Copy PIP instructions"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:173
+#: warehouse/templates/packaging/detail.html:175
 msgid "This release has been yanked"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:179
+#: warehouse/templates/packaging/detail.html:181
 #, python-format
 msgid "Stable version available (%(version)s)"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:183
+#: warehouse/templates/packaging/detail.html:185
 #, python-format
 msgid "Newer version available (%(version)s)"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:187
+#: warehouse/templates/packaging/detail.html:189
 msgid "Latest version"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:192
+#: warehouse/templates/packaging/detail.html:194
 #, python-format
 msgid "Released: %(release_date)s"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:204
+#: warehouse/templates/packaging/detail.html:206
 msgid "No project description provided"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:217
+#: warehouse/templates/packaging/detail.html:219
 msgid "Navigation"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:218
-#: warehouse/templates/packaging/detail.html:250
+#: warehouse/templates/packaging/detail.html:220
+#: warehouse/templates/packaging/detail.html:252
 #, python-format
 msgid "Navigation for %(project)s"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:221
-#: warehouse/templates/packaging/detail.html:253
+#: warehouse/templates/packaging/detail.html:223
+#: warehouse/templates/packaging/detail.html:255
 msgid "Project description. Focus will be moved to the description."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:223
-#: warehouse/templates/packaging/detail.html:255
-#: warehouse/templates/packaging/detail.html:283
+#: warehouse/templates/packaging/detail.html:225
+#: warehouse/templates/packaging/detail.html:257
+#: warehouse/templates/packaging/detail.html:285
 msgid "Project description"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:227
-#: warehouse/templates/packaging/detail.html:265
+#: warehouse/templates/packaging/detail.html:229
+#: warehouse/templates/packaging/detail.html:267
 msgid "Release history. Focus will be moved to the history panel."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:229
-#: warehouse/templates/packaging/detail.html:267
-#: warehouse/templates/packaging/detail.html:305
+#: warehouse/templates/packaging/detail.html:231
+#: warehouse/templates/packaging/detail.html:269
+#: warehouse/templates/packaging/detail.html:307
 msgid "Release history"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:234
-#: warehouse/templates/packaging/detail.html:272
+#: warehouse/templates/packaging/detail.html:236
+#: warehouse/templates/packaging/detail.html:274
 msgid "Download files. Focus will be moved to the project files."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:236
-#: warehouse/templates/packaging/detail.html:274
-#: warehouse/templates/packaging/detail.html:361
+#: warehouse/templates/packaging/detail.html:238
+#: warehouse/templates/packaging/detail.html:276
+#: warehouse/templates/packaging/detail.html:363
 msgid "Download files"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:259
+#: warehouse/templates/packaging/detail.html:261
 msgid "Project details. Focus will be moved to the project details."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:261
-#: warehouse/templates/packaging/detail.html:297
+#: warehouse/templates/packaging/detail.html:263
+#: warehouse/templates/packaging/detail.html:299
 msgid "Project details"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:290
+#: warehouse/templates/packaging/detail.html:292
 msgid "The author of this package has not provided a project description"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:307
+#: warehouse/templates/packaging/detail.html:309
 msgid "Release notifications"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:308
+#: warehouse/templates/packaging/detail.html:310
 msgid "RSS feed"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:320
+#: warehouse/templates/packaging/detail.html:322
 msgid "This version"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:340
+#: warehouse/templates/packaging/detail.html:342
 msgid "pre-release"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:345
+#: warehouse/templates/packaging/detail.html:347
 msgid "yanked"
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:362
+#: warehouse/templates/packaging/detail.html:364
 #, python-format
 msgid ""
 "Download the file for your platform. If you're not sure which to choose, "
 "learn more about <a href=\"%(href)s\" title=\"%(title)s\" "
 "target=\"_blank\" rel=\"noopener\">installing packages</a>."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:364
+#: warehouse/templates/packaging/detail.html:366
 msgid "Source Distribution"
 msgid_plural "Source Distributions"
 msgstr[0] ""
 msgstr[1] ""
 
-#: warehouse/templates/packaging/detail.html:380
+#: warehouse/templates/packaging/detail.html:382
 msgid "No source distribution files available for this release."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:381
+#: warehouse/templates/packaging/detail.html:383
 #, python-format
 msgid ""
 "See tutorial on <a href=\"%(href)s\" title=\"%(title)s\" "
 "target=\"_blank\" rel=\"noopener\">generating distribution archives</a>."
 msgstr ""
 
-#: warehouse/templates/packaging/detail.html:388
+#: warehouse/templates/packaging/detail.html:390
 msgid "Built Distribution"
 msgid_plural "Built Distributions"
 msgstr[0] ""

warehouse/static/js/warehouse/controllers/clipboard_controller.js

@@ -0,0 +1,46 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Controller } from "@hotwired/stimulus";
+
+// Copy handler for copy tooltips, e.g.
+//   - the pip command on package detail page
+//   - the copy hash on package detail page
+//   - the copy hash on release maintainers page
+
+// See `warehouse/static/sass/blocks/_copy-tooltip.scss` for style details.
+export default class extends Controller {
+  static targets = [ "source", "tooltip" ];
+
+  copy() {
+    // save the original tooltip text
+    const clipboardTooltipOriginalValue = this.tooltipTarget.dataset.clipboardTooltipValue;
+    // copy the source text to clipboard
+    navigator.clipboard.writeText(this.sourceTarget.textContent);
+    // set the tooltip text to "Copied"
+    this.tooltipTarget.dataset.clipboardTooltipValue = "Copied";
+
+    // on focusout and mouseout, reset the tooltip text to the original value
+    const resetTooltip = () => {
+      // restore the original tooltip text
+      this.tooltipTarget.dataset.clipboardTooltipValue = clipboardTooltipOriginalValue;
+      // remove focus
+      this.tooltipTarget.blur();
+      // remove event listeners
+      this.tooltipTarget.removeEventListener("focusout", resetTooltip);
+      this.tooltipTarget.removeEventListener("mouseout", resetTooltip);
+    };
+    this.tooltipTarget.addEventListener("focusout", resetTooltip);
+    this.tooltipTarget.addEventListener("mouseout", resetTooltip);
+  }
+}