UA copy operation

[blackboxsw]

Originally filed against ubuntu-advantage-client as https://github.com/CanonicalLtd/ubuntu-advantage-client/issues/483

---

Note: This is not a UA-client issue, but I file it here for you to re-route it accordingly.

That failing button is defined as:

<div class="p-code-snippet">
  <input type="text"
         id="ua-token"
         class="p-code-snippet__input"
         value="..."
         readonly="readonly">
  <button class="p-code-snippet__action">Copy to clipboard</button>
</div>

Affected Browsers (What is in Bionic as of today):

• Chrome 74.0.3729.108-1
• Firefox 66.0.3+build1-0ubuntu0.18.04.1

The css is from the vanilla framework, inspection shows vanilla-framework-version-1.8.1.css

Based on that I guessed that some JS in the vanilla framework would assign an onclick to this class, but I haven't found any JS other than the google analytics. Of course my 20 year old web-foo might just be outdated.

But knowing that we use that style all over out tutorials and such I tried there and it worked fine e.g. on provisioning maas

Inspecting (and comparing) that showed the same button tech: <button class="p-code-snippet__action">Copy to clipboard</button>

But the broken (contracts.canonical.com) had no Event Listeners at all on that button. While the tutorial had several registered, those were a bunch of google analytics tags but more importantly also this:

This seems to be the missing code

    n.commandLine = function() {
        document.querySelectorAll(".p-code-snippet").forEach(function(a) {
            var e = a.querySelector(".p-code-snippet__action")
              , n = a.querySelector(".p-code-snippet__input");
            e && n && e.addEventListener("click", function(e) {
                n.select(),
                e.preventDefault;
                try {
                    document.execCommand("copy");

And knowing that we find in the main page the loaders:

</footer>
        <!-- Polyfill functions -->
[...]
    <script src="/static/js/build/main.min.js?v=a3555ea"></script>
    <script src="https://assets.ubuntu.com/v1/f5bf3854-respond.min.js"></script>

And the broken page has nothing there:

        </div>
      </footer>
    </div>
  </body>
</html>

Please fix https://auth.contracts.canonical.com/ to carry the code to be active on that copy-to-clipboard button

[anthonydillon]

@blackboxsw Sorry that Vanilla framework is misleading in promise of functionality. Vanilla framework is a CSS only framework but we are working on our documentation to make is easier to integrate into any JS or JS framework.

That said we do have a small ES6 script which you can use to give you the functionality you are seeking. You can find this script in the source of the pattern demo: view-source:https://canonical-web-and-design.github.io/vanilla-framework/examples/patterns/code-snippet/

[cpaelzer]

@anthonydillon thanks, there might be a pre writeup how to get the active JS attached already. That would be the fix (or better how-to) then.

But do we know who owns/administrates https://auth.contracts.canonical.com/ so that this can then be implemented? @blackboxsw do you happen to know who owns that?

[anthonydillon]

@cpaelzer it looks like this is the repo for the template which is that used in the parent project: https://github.com/CanonicalLtd/ua-frontend

This should help you know who maintains that site.

[anthonydillon]

I have reported an issue to add the copy to clipboard functionally to the sites template: https://github.com/CanonicalLtd/ua-frontend/issues/22

[cpaelzer]

Thank you @anthonydillon

[anthonydillon]

This has been fixed upstream and should be live shortly.