From ed25a72e99d56c2141175cd0cb4306353e65e6ad Mon Sep 17 00:00:00 2001
From: wang chenyu <cwang592@usc.edu>
Date: Thu, 10 Jun 2021 18:19:56 -0700
Subject: [PATCH] fix(devui): Fix buggy UI behaviors with redux-devtools-app
 (#709)

* fix(devui): Always run updateTabs on UNSAFE_componentWillReceiveProps. Otherwise, the changes in property tabs might not be reflected on the UI.

* chore(*): Update devui version. Fix the container growing out of viewport when too many actions.

* fix(devui): Update snapshots

* Update Tabs.tsx

* Update package.json

* Update package.json

Co-authored-by: Nathan Bierema <nbierema@gmail.com>
---
 packages/devui/src/Container/styles/index.ts           |  7 ++++++-
 packages/devui/src/Tabs/Tabs.tsx                       | 10 +++-------
 .../devui/tests/__snapshots__/Container.test.tsx.snap  |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/devui/src/Container/styles/index.ts b/packages/devui/src/Container/styles/index.ts
index dab1ca8a..8c259671 100644
--- a/packages/devui/src/Container/styles/index.ts
+++ b/packages/devui/src/Container/styles/index.ts
@@ -6,6 +6,8 @@ export const MainContainerWrapper = styled.div`
   height: 100%;
   width: 100%;
   flex-flow: column nowrap;
+  flex-shrink: 1;
+  min-height: 0;
   background-color: ${(props) => color(props.theme.base00, 'lighten', 0.03)};
   color: ${(props) => props.theme.base07};
   font-size: 12px;
@@ -30,7 +32,8 @@ export const MainContainerWrapper = styled.div`
     flex-grow: 1;
     display: flex;
     flex-flow: column nowrap;
-    height: 100%;
+    flex-shrink: 1;
+    min-height: 0;
 
     > div {
       flex-grow: 1;
@@ -43,4 +46,6 @@ export const ContainerWrapper = styled.div`
   height: 100%;
   width: 100%;
   flex-flow: column nowrap;
+  flex-shrink: 1;
+  min-height: 0;
 `;
diff --git a/packages/devui/src/Tabs/Tabs.tsx b/packages/devui/src/Tabs/Tabs.tsx
index 38649751..7b073df0 100644
--- a/packages/devui/src/Tabs/Tabs.tsx
+++ b/packages/devui/src/Tabs/Tabs.tsx
@@ -24,12 +24,6 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
   SelectedComponent?: React.ComponentType<P>;
   selector?: () => P;
 
-  UNSAFE_componentWillReceiveProps(nextProps: TabsProps<P>) {
-    if (nextProps.selected !== this.props.selected) {
-      this.updateTabs(nextProps);
-    }
-  }
-
   onMouseUp: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.currentTarget.blur();
   };
@@ -38,7 +32,7 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
     this.props.onClick(e.currentTarget.value);
   };
 
-  updateTabs(props: TabsProps<P>) {
+  updateTabs(props: TabsProps<P>): void {
     const tabs = props.tabs;
     const selected = props.selected;
 
@@ -67,6 +61,8 @@ export default class Tabs<P> extends Component<TabsProps<P>> {
   }
 
   render() {
+    this.updateTabs(nextProps);
+    
     const tabsHeader = (
       <TabsHeader
         tabs={this.tabsHeader!}
diff --git a/packages/devui/tests/__snapshots__/Container.test.tsx.snap b/packages/devui/tests/__snapshots__/Container.test.tsx.snap
index cb057d78..ebfa6fe2 100644
--- a/packages/devui/tests/__snapshots__/Container.test.tsx.snap
+++ b/packages/devui/tests/__snapshots__/Container.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Container renders correctly 1`] = `
 <div
-  class="sc-AxjAm XFnbZ"
+  class="sc-AxjAm jlQKkV"
 >
   Text
 </div>