Refactor EuiTabbedContent to track its selected tab by name (#931)

* Refactor EuiTabbedContent to track its selected tab by id so content can be updated * changelog
elastic · Jun 18, 2018 · 53155b7 · 53155b7
1 parent f42798f
commit 53155b7
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.53`.
+**Bug fixes**
+
+- `EuiTabbedContent` now updates dynamic tab content when used as an uncontrolled component ([#931](https://github.com/elastic/eui/pull/931))
 
 ## [`0.0.53`](https://github.com/elastic/eui/tree/v0.0.53)
 

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
@@ -48,6 +48,101 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
 </div>
 `;
 
+exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should update if it receives new content 1`] = `
+<EuiTabbedContent
+  tabs={
+    Array [
+      Object {
+        "content": <p>
+          Elasticsearch content
+        </p>,
+        "id": "es",
+        "name": "Elasticsearch",
+      },
+      Object {
+        "content": <p>
+          updated Kibana content
+        </p>,
+        "data-test-subj": "kibanaTab",
+        "id": "kibana",
+        "name": "Kibana",
+      },
+    ]
+  }
+>
+  <div>
+    <EuiTabs>
+      <div
+        className="euiTabs"
+        role="tablist"
+      >
+        <EuiTab
+          aria-controls="42-es"
+          disabled={false}
+          id="es"
+          isSelected={false}
+          key="es"
+          onClick={[Function]}
+        >
+          <button
+            aria-controls="42-es"
+            aria-selected={false}
+            className="euiTab"
+            disabled={false}
+            id="es"
+            onClick={[Function]}
+            role="tab"
+            type="button"
+          >
+            <span
+              className="euiTab__content"
+            >
+              Elasticsearch
+            </span>
+          </button>
+        </EuiTab>
+        <EuiTab
+          aria-controls="42-kibana"
+          data-test-subj="kibanaTab"
+          disabled={false}
+          id="kibana"
+          isSelected={true}
+          key="kibana"
+          onClick={[Function]}
+        >
+          <button
+            aria-controls="42-kibana"
+            aria-selected={true}
+            className="euiTab euiTab-isSelected"
+            data-test-subj="kibanaTab"
+            disabled={false}
+            id="kibana"
+            onClick={[Function]}
+            role="tab"
+            type="button"
+          >
+            <span
+              className="euiTab__content"
+            >
+              Kibana
+            </span>
+          </button>
+        </EuiTab>
+      </div>
+    </EuiTabs>
+    <div
+      aria-labelledby="kibana"
+      id="42-kibana"
+      role="tabpanel"
+    >
+      <p>
+        updated Kibana content
+      </p>
+    </div>
+  </div>
+</EuiTabbedContent>
+`;
+
 exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
 <div
   aria-label="aria-label"

diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js
@@ -46,7 +46,7 @@ export class EuiTabbedContent extends Component {
     // Only track selection state if it's not controlled externally.
     if (!selectedTab) {
       this.state = {
-        selectedTab: initialSelectedTab || tabs[0],
+        selectedTabId: (initialSelectedTab && initialSelectedTab.id) || tabs[0].id,
       };
     }
   }
@@ -60,7 +60,7 @@ export class EuiTabbedContent extends Component {
 
     // Only track selection state if it's not controlled externally.
     if (!externalSelectedTab) {
-      this.setState({ selectedTab })
+      this.setState({ selectedTabId: selectedTab.id })
     }
   };
 
@@ -76,7 +76,9 @@ export class EuiTabbedContent extends Component {
     } = this.props;
 
     // Allow the consumer to control tab selection.
-    const selectedTab = externalSelectedTab || this.state.selectedTab
+    const selectedTab = externalSelectedTab || tabs.find(
+      tab => tab.id === this.state.selectedTabId
+    );
 
     const {
       content: selectedTabContent,

diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.js b/src/components/tabs/tabbed_content/tabbed_content.test.js
@@ -72,5 +72,29 @@ describe('EuiTabbedContent', () => {
       const component = render(<EuiTabbedContent tabs={tabs} />);
       expect(component).toMatchSnapshot();
     });
+
+    test('when uncontrolled, the selected tab should update if it receives new content', () => {
+      const tabs = [
+        elasticsearchTab,
+        {
+          ...kibanaTab
+        }
+      ];
+      const component = mount(<EuiTabbedContent tabs={tabs}/>);
+
+      component.find('EuiTab[id="kibana"] button').first().simulate('click');
+
+      component.setProps({
+        tabs: [
+          elasticsearchTab,
+          {
+            ...kibanaTab,
+            content: <p>updated Kibana content</p>
+          }
+        ]
+      });
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });