From 03ed70164ac6185d747b8c8c043e1a8222644957 Mon Sep 17 00:00:00 2001
From: Brandon Morelli <brandon.morelli@elastic.co>
Date: Wed, 25 Aug 2021 14:09:15 -0700
Subject: [PATCH] docs: remove tab widget code (#6038)

---
 docs/guide/distributed-tracing.asciidoc   |   3 -
 docs/guide/install-and-run.asciidoc       |   3 -
 docs/guide/opentelemetry-elastic.asciidoc |   7 +-
 docs/jaeger-support.asciidoc              |   3 -
 docs/tab-widgets/code.asciidoc            | 166 ----------------------
 5 files changed, 2 insertions(+), 180 deletions(-)
 delete mode 100644 docs/tab-widgets/code.asciidoc

diff --git a/docs/guide/distributed-tracing.asciidoc b/docs/guide/distributed-tracing.asciidoc
index 15e44200de..51a69d2b2b 100644
--- a/docs/guide/distributed-tracing.asciidoc
+++ b/docs/guide/distributed-tracing.asciidoc
@@ -1,9 +1,6 @@
 [[distributed-tracing]]
 === Distributed tracing
 
-// Make tab-widgets work
-include::../tab-widgets/code.asciidoc[]
-
 A `trace` is a group of <<transactions,transactions>> and <<transaction-spans,spans>> with a common root.
 Each `trace` tracks the entirety of a single request.
 When a `trace` travels through multiple services, as is common in a microservice architecture,
diff --git a/docs/guide/install-and-run.asciidoc b/docs/guide/install-and-run.asciidoc
index 66f1b5e89f..cacd159531 100644
--- a/docs/guide/install-and-run.asciidoc
+++ b/docs/guide/install-and-run.asciidoc
@@ -1,9 +1,6 @@
 [[install-and-run]]
 == Quick start guide
 
-// Make tab-widgets work
-include::../tab-widgets/code.asciidoc[]
-
 This guide describes how to get started quickly with Elastic APM. You’ll learn how to:
 
 * Spin up {es}, {kib}, and APM Server on {ess}
diff --git a/docs/guide/opentelemetry-elastic.asciidoc b/docs/guide/opentelemetry-elastic.asciidoc
index 407917f5aa..71eef16b39 100644
--- a/docs/guide/opentelemetry-elastic.asciidoc
+++ b/docs/guide/opentelemetry-elastic.asciidoc
@@ -26,7 +26,7 @@ business KPIs and technical components with the {stack}.
 
 IMPORTANT: The https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/exporter/elasticexporter#legacy-opentelemetry-collector-exporter-for-elastic[OpenTelemetry Collector exporter for Elastic]
 was deprecated in 7.13 and replaced by the native support of the OpenTelemetry Line Protocol in
-Elastic Observability (OTLP). To learn more, see 
+Elastic Observability (OTLP). To learn more, see
 https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/exporter/elasticexporter#migration[migration].
 
 Elastic APM Server natively supports the OpenTelemetry protocol.
@@ -359,7 +359,7 @@ Lambda layer for OpenTelemetry]. For example, `arn:aws:lambda:eu-west-1:90192057
 ** `OPENTELEMETRY_COLLECTOR_CONFIG_FILE="/var/task/opentelemetry-collector.yaml"` to specify the path to your OpenTelemetry Collector configuration
 ** `OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:55681/v1/traces"` this environment variable is required to be set until https://github.com/open-telemetry/opentelemetry-js/pull/2331[PR #2331] is merged and released.
 ** `OTEL_TRACES_SAMPLER="AlwaysOn"` define the required sampler strategy if it is not sent from the caller. Note that `Always_on` can potentially create a very large amount of data, so in production set the correct sampling configuration, as per the https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/trace/sdk.md#sampling[specification].
-        
+
 
 [[open-telemetry-aws-lambda-elastic-nodejs-terraform]]
 ===== Instrumenting AWS Lambda Node.js functions with Terraform
@@ -394,6 +394,3 @@ and https://www.javadoc.io/doc/io.opentelemetry/opentelemetry-api/latest/io/open
 ===== OpenTelemetry logs
 
 * OpenTelemetry logs are not yet supported https://github.com/elastic/apm-server/issues/5491[#5491]
-
-// Make tab-widgets work
-include::../tab-widgets/code.asciidoc[]
diff --git a/docs/jaeger-support.asciidoc b/docs/jaeger-support.asciidoc
index 75fd546739..2b1cfb5eb2 100644
--- a/docs/jaeger-support.asciidoc
+++ b/docs/jaeger-support.asciidoc
@@ -67,6 +67,3 @@ for more information.
 ==== Start sending span data
 
 That's it! Data sent from Jaeger clients to the APM Server can now be viewed in the APM app.
-
-// Make tab-widgets work
-include::./tab-widgets/code.asciidoc[]
\ No newline at end of file
diff --git a/docs/tab-widgets/code.asciidoc b/docs/tab-widgets/code.asciidoc
deleted file mode 100644
index 6a30cf55c8..0000000000
--- a/docs/tab-widgets/code.asciidoc
+++ /dev/null
@@ -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>
-++++
\ No newline at end of file