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

@@ -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;
 `;

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!}

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>