[Management] Update pager with new props in Index Pattern Creation (e…

…lastic#16195) * Update pager with new props * Update snapshot description
chrisronline · Jan 22, 2018 · 4b45460 · 4b45460
1 parent 46ee1c3
commit 4b45460
Show file tree

Hide file tree

Showing 3 changed files with 223 additions and 0 deletions.
diff --git a/...p_index_pattern/components/indices_list/__tests__/__snapshots__/indices_list.test.js.snap b/...p_index_pattern/components/indices_list/__tests__/__snapshots__/indices_list.test.js.snap
@@ -299,3 +299,193 @@ exports[`IndicesList should render normally 1`] = `
   </EuiFlexGroup>
 </div>
 `;
+
+exports[`IndicesList updating props should render all new indices 1`] = `
+<div>
+  <EuiTable>
+    <EuiTableBody>
+      <EuiTableRow
+        key="0"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          kibana
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="1"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          es
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="2"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          kibana
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="3"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          es
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="4"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          kibana
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="5"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          es
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="6"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          kibana
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="7"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          es
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="8"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          kibana
+        </EuiTableRowCell>
+      </EuiTableRow>
+      <EuiTableRow
+        key="9"
+      >
+        <EuiTableRowCell
+          align="left"
+          textOnly={true}
+        >
+          es
+        </EuiTableRowCell>
+      </EuiTableRow>
+    </EuiTableBody>
+  </EuiTable>
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFlexGroup
+    alignItems="center"
+    component="div"
+    gutterSize="l"
+    justifyContent="spaceBetween"
+    responsive={true}
+    wrap={false}
+  >
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiPopover
+        anchorPosition="downCenter"
+        button={
+          <EuiButtonEmpty
+            color="text"
+            iconSide="right"
+            iconType="arrowDown"
+            onClick={[Function]}
+            size="s"
+            type="button"
+          >
+            Rows per page: 
+            10
+          </EuiButtonEmpty>
+        }
+        closePopover={[Function]}
+        id="customizablePagination"
+        isOpen={false}
+        ownFocus={false}
+        panelPaddingSize="none"
+        withTitle={true}
+      >
+        <EuiContextMenuPanel
+          hasFocus={true}
+          items={
+            Array [
+              <EuiContextMenuItem
+                icon="empty"
+                onClick={[Function]}
+              >
+                5
+              </EuiContextMenuItem>,
+              <EuiContextMenuItem
+                icon="empty"
+                onClick={[Function]}
+              >
+                10
+              </EuiContextMenuItem>,
+              <EuiContextMenuItem
+                icon="empty"
+                onClick={[Function]}
+              >
+                20
+              </EuiContextMenuItem>,
+              <EuiContextMenuItem
+                icon="empty"
+                onClick={[Function]}
+              >
+                50
+              </EuiContextMenuItem>,
+            ]
+          }
+        />
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem
+      component="div"
+      grow={false}
+    >
+      <EuiPagination
+        activePage={0}
+        onPageClick={[Function]}
+        pageCount={2}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+`;
diff --git a/...zard/components/step_index_pattern/components/indices_list/__tests__/indices_list.test.js b/...zard/components/step_index_pattern/components/indices_list/__tests__/indices_list.test.js
@@ -41,4 +41,27 @@ describe('IndicesList', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('updating props', () => {
+    it('should render all new indices', () => {
+      const component = shallow(
+        <IndicesList indices={indices}/>
+      );
+
+      const moreIndices = [
+        ...indices,
+        ...indices,
+        ...indices,
+        ...indices,
+        ...indices,
+        ...indices,
+        ...indices,
+        ...indices,
+      ];
+
+      component.setProps({ indices: moreIndices });
+      component.update();
+      expect(component).toMatchSnapshot();
+    });
+  });
 });
diff --git a/...ndex_pattern_wizard/components/step_index_pattern/components/indices_list/indices_list.js b/...ndex_pattern_wizard/components/step_index_pattern/components/indices_list/indices_list.js
@@ -38,6 +38,15 @@ export class IndicesList extends Component {
     this.pager = new Pager(props.indices.length, this.state.perPage, this.state.page);
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.indices.length !== this.props.indices.length) {
+      this.pager.setTotalItems(nextProps.indices.length);
+      this.resetPageTo0();
+    }
+  }
+
+  resetPageTo0 = () => this.onChangePage(0);
+
   onChangePage = page => {
     this.pager.goToPageIndex(page);
     this.setState({ page });
@@ -46,6 +55,7 @@ export class IndicesList extends Component {
   onChangePerPage = perPage => {
     this.pager.setItemsPerPage(perPage);
     this.setState({ perPage });
+    this.resetPageTo0();
     this.closePerPageControl();
   }