docs: remove tabbed widget code (#109944)

docs/apm/apm-app-users.asciidoc

@@ -113,8 +113,6 @@ Here are two examples:
 |Grants the privileges required to create, update, and view machine learning jobs
 |====
 
-include::./tab-widgets/code.asciidoc[]
-
 ////
 ***********************************  ***********************************
 ////
@@ -233,8 +231,6 @@ and the following Kibana feature privileges to anyone who needs to read central
 
 See <<apm-app-api-user>>.
 
-include::./tab-widgets/code.asciidoc[]
-
 ////
 ***********************************  ***********************************
 ////

docs/apm/tab-widgets/code.asciidoc

@@ -1,166 +0,0 @@
-// Defining styles and script here for simplicity.
-++++
-<style>
-.tabs {
-  width: 100%;
-}
-[role="tablist"] {
-  margin: 0 0 -0.1em;
-  overflow: visible;
-}
-[role="tab"] {
-  position: relative;
-  padding: 0.3em 0.5em 0.4em;
-  border: 1px solid hsl(219, 1%, 72%);
-  border-radius: 0.2em 0.2em 0 0;
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  background: hsl(220, 20%, 94%);
-}
-[role="tab"]:hover::before,
-[role="tab"]:focus::before,
-[role="tab"][aria-selected="true"]::before {
-  position: absolute;
-  bottom: 100%;
-  right: -1px;
-  left: -1px;
-  border-radius: 0.2em 0.2em 0 0;
-  border-top: 3px solid hsl(219, 1%, 72%);
-  content: '';
-}
-[role="tab"][aria-selected="true"] {
-  border-radius: 0;
-  background: hsl(220, 43%, 99%);
-  outline: 0;
-}
-[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
-  border-top: 5px solid hsl(218, 96%, 48%);
-}
-[role="tab"][aria-selected="true"]::after {
-  position: absolute;
-  z-index: 3;
-  bottom: -1px;
-  right: 0;
-  left: 0;
-  height: 0.3em;
-  background: hsl(220, 43%, 99%);
-  box-shadow: none;
-  content: '';
-}
-[role="tab"]:hover,
-[role="tab"]:focus,
-[role="tab"]:active {
-  outline: 0;
-  border-radius: 0;
-  color: inherit;
-}
-[role="tab"]:hover::before,
-[role="tab"]:focus::before {
-  border-color: hsl(218, 96%, 48%);
-}
-[role="tabpanel"] {
-  position: relative;
-  z-index: 2;
-  padding: 1em;
-  border: 1px solid hsl(219, 1%, 72%);
-  border-radius: 0 0.2em 0.2em 0.2em;
-  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
-  background: hsl(220, 43%, 99%);
-  margin-bottom: 1em;
-}
-[role="tabpanel"] p {
-  margin: 0;
-}
-[role="tabpanel"] * + p {
-  margin-top: 1em;
-}
-</style>
-
-<script>
-window.addEventListener("DOMContentLoaded", () => {
-  const tabs = document.querySelectorAll('[role="tab"]');
-  const tabList = document.querySelector('[role="tablist"]');
-  // Add a click event handler to each tab
-  tabs.forEach(tab => {
-    tab.addEventListener("click", changeTabs);
-  });
-  // Enable arrow navigation between tabs in the tab list
-  let tabFocus = 0;
-  tabList.addEventListener("keydown", e => {
-    // Move right
-    if (e.keyCode === 39 || e.keyCode === 37) {
-      tabs[tabFocus].setAttribute("tabindex", -1);
-      if (e.keyCode === 39) {
-        tabFocus++;
-        // If we're at the end, go to the start
-        if (tabFocus >= tabs.length) {
-          tabFocus = 0;
-        }
-        // Move left
-      } else if (e.keyCode === 37) {
-        tabFocus--;
-        // If we're at the start, move to the end
-        if (tabFocus < 0) {
-          tabFocus = tabs.length - 1;
-        }
-      }
-      tabs[tabFocus].setAttribute("tabindex", 0);
-      tabs[tabFocus].focus();
-    }
-  });
-});
-
-function setActiveTab(target) {
-  const parent = target.parentNode;
-  const grandparent = parent.parentNode;
-  // console.log(grandparent);
-  // Remove all current selected tabs
-  parent
-    .querySelectorAll('[aria-selected="true"]')
-    .forEach(t => t.setAttribute("aria-selected", false));
-  // Set this tab as selected
-  target.setAttribute("aria-selected", true);
-  // Hide all tab panels
-  grandparent
-    .querySelectorAll('[role="tabpanel"]')
-    .forEach(p => p.setAttribute("hidden", true));
-  // Show the selected panel
-  grandparent.parentNode
-    .querySelector(`#${target.getAttribute("aria-controls")}`)
-    .removeAttribute("hidden");
-}
-
-function changeTabs(e) {
-  // get the containing list of the tab that was just clicked
-  const tabList = e.target.parentNode;
-
-  // get all of the sibling tabs
-  const buttons = Array.apply(null, tabList.querySelectorAll('button'));
-
-  // loop over the siblings to discover which index thje clicked one was
-  const { index } = buttons.reduce(({ found, index }, button) => {
-    if (!found && buttons[index] === e.target) {
-      return { found: true, index };
-    } else if (!found) {
-      return { found, index: index + 1 };
-    } else {
-      return { found, index };
-    }
-  }, { found: false, index: 0 });
-
-  // get the tab container
-  const container = tabList.parentNode;
-  // read the data-tab-group value from the container, e.g. "os"
-  const { tabGroup } = container.dataset;
-  // get a list of all the tab groups that match this value on the page
-  const groups = document.querySelectorAll('[data-tab-group=' + tabGroup + ']');
-
-  // for each of the found tab groups, find the tab button at the previously discovered index and select it for each group
-  groups.forEach((group) => {
-    const target = group.querySelectorAll('button')[index];
-    setActiveTab(target);
-  });
-}
-</script>
-++++