Add tabbed widget JS and CSS to build

[bmorelli25]

Summary

We're now using the tabbed widget in at least 10 different documentation books! This PR adds the tabbed widget JS and CSS to the documentation build. I'm confident I've added the CSS correctly, but the JavaScript is another story. It works 😮, but I'm not sure if there's a better way to go about this. @gtback, if this is comically wrong, just let me know and I'll close this PR 😬

How to test this

1. Checkout this PR: gh pr checkout 2180
2. Add a simple tabbed widget to any documentation page. Here's a boilerplate widget:

++++
<div class="tabs" data-tab-group="config-agent">
  <div role="tablist" aria-label="Configure agents">
    <button role="tab"
            aria-selected="true"
            aria-controls="cloud-tab-config-agent"
            id="cloud-config-agent">
      Central configuration
    </button>
    <button role="tab"
            aria-selected="false"
            aria-controls="self-managed-tab-config-agent"
            id="self-managed-config-agent"
            tabindex="-1">
      Agent configuration
    </button>
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="cloud-tab-config-agent"
       aria-labelledby="cloud-config-agent">
++++

This is the content for tab #1

++++
  </div>
  <div tabindex="0"
       role="tabpanel"
       id="self-managed-tab-config-agent"
       aria-labelledby="self-managed-config-agent"
       hidden="">
++++

This is the content for tab #2

++++
  </div>
</div>
++++

3. Build that documentation book and ensure the widget works as expected

Related issues

Closes #1895.

[gtback]

I think we'll want to change the JS so it gets included in /guide/static/docs.js (and thus can be loaded once and cached) rather than inlining it on every page (increasing page sizes and slowing down page loads, even if only marginally), even pages that don't use the widgets.

I'll have to refresh my memory on how that all gets built, but if you want to try to figure it out, great!

[bmorelli25]

Moved JS to resources/web/lib/prettify/prettify.js. That might be right. When running the doc build locally, it looks like JS isn't minified. I'm able to see the new JS when I navigate to http://localhost:8000/guide/static/docs.js, and the JS is applied to the tabbed widgets. But there's a new problem -- this breaks the CSS for some reason. Looking into that now.

[bmorelli25]

OK, I think this is ready for review again. I can see the JS at http://localhost:8000/guide/static/docs.js, and the CSS at http://localhost:8000/guide/static/styles.css

[gtback]

It seems like the test is failing because it's trying to set the active tab on a test page that doesn't have the tab widget?

[gtback]

This is looking good! I think we just need to update the functions to not do anything if there are no tab widgets on the page.

[bmorelli25]

I think we just need to update the functions to not do anything if there are no tab widgets on the page.

Interesting! OK, let me try to figure out how to do that 🤔

Relevant failure:

12:17:20 FAIL tests/docs.test.js
12:17:20   ● Test suite failed to run
12:17:20 
12:17:20     TypeError: Cannot read property 'parentNode' of undefined
12:17:20 
12:17:20       21004 | 
12:17:20       21005 | const setActiveTab = target => {
12:17:20     > 21006 |   const parent = target.parentNode;
12:17:20             |                         ^
12:17:20       21007 |   const grandparent = parent.parentNode; // console.log(grandparent);
12:17:20       21008 |   // Remove all current selected tabs
12:17:20       21009 | 
12:17:20 
12:17:20       at parentNode (resources/web/tests/docs.test.js:21006:25)
12:17:20       at Object.<anonymous>.parcelRequire.S3PC../components/alternative_switcher (resources/web/tests/docs.test.js:23818:1)
12:17:20       at call (resources/web/tests/docs.test.js:47:24)
12:17:20       at newRequire (resources/web/tests/docs.test.js:53:14)
12:17:20       at Object.require (resources/web/tests/docs.test.js:23827:14)
12:17:20       at call (resources/web/tests/docs.test.js:47:24)
12:17:20       at newRequire (resources/web/tests/docs.test.js:81:7)
12:17:20       at Object.<anonymous> (resources/web/tests/docs.test.js:8:17)
12:17:20 
12:17:20 Test Suites: 1 failed, 11 passed, 12 total

[bmorelli25]

I have an idea of how to fix this. Is there a way to run self-test locally so I don't have to push and wait for it to run?

TypeError: Cannot read property 'parentNode' of undefined

I think this is failing because the setActiveTab function requires a target node parameter. When the page is built, and someone clicks on a tab widget, it receives one. But when the tests run, which invokes the setActiveTab function here, no target parameter is passed in.
As it turns out, the setActiveTab and changeTabs functions don't need to be exported and invoked in index.js. I think this might fix the problem as these functions will no longer run automatically when resources/web/tests/docs.test.js runs. See 9b56afd.

[gtback]

Is there a way to run self-test locally so I don't have to push and wait for it to run?

@bmorelli25 You can change into the resources/web directory and run make check to run just these tests. You can also run make check from the root of the repo to run the full test suite (which is pretty slow because of the integration tests) or make unit_test for just the "fast" tests.

[gtback]

Once you get the tests passing, feel free to merge!

[bmorelli25]

Will do! It looks like that fixed self-test 🎉 . I'm going to add some docs to the readme before merging. Thanks for all of your help!