From 02e428f88ce673895f18b431c66a4b31fca5cf46 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Mon, 30 Apr 2018 11:06:27 -0700
Subject: [PATCH] Don't track selection state when it's controlled externally.
 Add more requirements for tabs propType.

---
 .../__snapshots__/tabbed_content.test.js.snap | 50 +++++++++++--------
 .../tabs/tabbed_content/tabbed_content.js     | 25 +++++++---
 .../tabbed_content/tabbed_content.test.js     |  4 +-
 3 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
index 20af5f7765ba..9932cb2343fe 100644
--- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
+++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
@@ -12,12 +12,13 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       class="euiTab euiTab-isSelected"
       id="es"
       role="tab"
-      title="Elasticsearch"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Elasticsearch
+      </span>
     </button>
     <button
       aria-controls="42-kibana"
@@ -26,12 +27,13 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
-      title="Kibana"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Kibana
+      </span>
     </button>
   </div>
   <div
@@ -62,12 +64,13 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       class="euiTab euiTab-isSelected"
       id="es"
       role="tab"
-      title="Elasticsearch"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Elasticsearch
+      </span>
     </button>
     <button
       aria-controls="42-kibana"
@@ -76,12 +79,13 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
-      title="Kibana"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Kibana
+      </span>
     </button>
   </div>
   <div
@@ -108,12 +112,13 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       class="euiTab"
       id="es"
       role="tab"
-      title="Elasticsearch"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Elasticsearch
+      </span>
     </button>
     <button
       aria-controls="42-kibana"
@@ -122,12 +127,13 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
-      title="Kibana"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Kibana
+      </span>
     </button>
   </div>
   <div
@@ -154,12 +160,13 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       class="euiTab"
       id="es"
       role="tab"
-      title="Elasticsearch"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Elasticsearch
+      </span>
     </button>
     <button
       aria-controls="42-kibana"
@@ -168,12 +175,13 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
-      title="Kibana"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Kibana
+      </span>
     </button>
   </div>
   <div
@@ -200,12 +208,13 @@ exports[`EuiTabbedContent props size is rendered 1`] = `
       class="euiTab euiTab-isSelected"
       id="es"
       role="tab"
-      title="Elasticsearch"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Elasticsearch
+      </span>
     </button>
     <button
       aria-controls="42-kibana"
@@ -214,12 +223,13 @@ exports[`EuiTabbedContent props size is rendered 1`] = `
       data-test-subj="kibanaTab"
       id="kibana"
       role="tab"
-      title="Kibana"
       type="button"
     >
       <span
         class="euiTab__content"
-      />
+      >
+        Kibana
+      </span>
     </button>
   </div>
   <div
diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js
index 4afe086fc889..c391c3b174b7 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.js
+++ b/src/components/tabs/tabbed_content/tabbed_content.js
@@ -13,9 +13,14 @@ export class EuiTabbedContent extends Component {
     className: PropTypes.string,
 
     /**
-     * Each tab needs an id property, so we can associate it with its panel for accessibility
+     * Each tab needs id and content properties, so we can associate it with its panel for accessibility.
+     * The name property is also required to display to the user.
      */
-    tabs: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired })).isRequired,
+    tabs: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      content: PropTypes.node.isRequired,
+    })).isRequired,
     onTabClick: PropTypes.func,
 
     /**
@@ -38,19 +43,25 @@ export class EuiTabbedContent extends Component {
 
     this.rootId = makeId();
 
-    this.state = {
-      selectedTab: selectedTab || initialSelectedTab || tabs[0],
-    };
+    // Only track selection state if it's not controlled externally.
+    if (!selectedTab) {
+      this.state = {
+        selectedTab: initialSelectedTab || tabs[0],
+      };
+    }
   }
 
   onTabClick = (selectedTab) => {
-    const { onTabClick } = this.props;
+    const { onTabClick, selectedTab: externalSelectedTab } = this.props;
 
     if (onTabClick) {
       onTabClick(selectedTab)
     }
 
-    this.setState({ selectedTab })
+    // Only track selection state if it's not controlled externally.
+    if (!externalSelectedTab) {
+      this.setState({ selectedTab })
+    }
   };
 
   render() {
diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.js b/src/components/tabs/tabbed_content/tabbed_content.test.js
index 15006b8438e9..453189fc816e 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.test.js
+++ b/src/components/tabs/tabbed_content/tabbed_content.test.js
@@ -12,13 +12,13 @@ jest.mock('../../../services/accessibility/html_id_generator', () => ({
 
 const elasticsearchTab = {
   id: 'es',
-  title: `Elasticsearch`,
+  name: `Elasticsearch`,
   content: <p>Elasticsearch content</p>,
 };
 
 const kibanaTab = {
   id: 'kibana',
-  title: `Kibana`,
+  name: `Kibana`,
   'data-test-subj': 'kibanaTab',
   content: <p>Kibana content</p>,
 };