From 23bc3bab75bf6f4058ca6d5ff85735e51397c541 Mon Sep 17 00:00:00 2001 From: CD Cabrera Date: Fri, 25 Sep 2020 20:20:58 -0400 Subject: [PATCH] fix(inventoryList,graphCard): issues/403 set minheight on update (#439) --- .../__snapshots__/graphCard.test.js.snap | 920 +++++++++--------- src/components/graphCard/graphCard.js | 56 +- .../__snapshots__/inventoryList.test.js.snap | 433 +++++---- src/components/inventoryList/inventoryList.js | 95 +- src/styles/_usage-graph.scss | 2 - 5 files changed, 808 insertions(+), 698 deletions(-) diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap index 8e17a6673..d95e10f05 100644 --- a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap +++ b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap @@ -69,80 +69,90 @@ exports[`GraphCard Component should render a non-connected component: non-connec - - - - </CardTitle> - <CardActions - className="" - > - <Select - aria-label="t(curiosity-graph.dropdownPlaceholder)" - ariaLabel="Select option" + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions className="" - id="generatedid-" - isDisabled={false} - isToggleText={true} - name={null} - onSelect={[Function]} - options={ - Array [ - Object { - "selected": true, - "title": "t(curiosity-graph.dropdownDaily)", - "value": "daily", - }, - Object { - "title": "t(curiosity-graph.dropdownWeekly)", - "value": "weekly", - }, - Object { - "title": "t(curiosity-graph.dropdownMonthly)", - "value": "monthly", - }, + > + <Select + aria-label="t(curiosity-graph.dropdownPlaceholder)" + ariaLabel="Select option" + className="" + id="generatedid-" + isDisabled={false} + isToggleText={true} + name={null} + onSelect={[Function]} + options={ + Array [ + Object { + "selected": true, + "title": "t(curiosity-graph.dropdownDaily)", + "value": "daily", + }, + Object { + "title": "t(curiosity-graph.dropdownWeekly)", + "value": "weekly", + }, + Object { + "title": "t(curiosity-graph.dropdownMonthly)", + "value": "monthly", + }, + Object { + "title": "t(curiosity-graph.dropdownQuarterly)", + "value": "quarterly", + }, + ] + } + placeholder="t(curiosity-graph.dropdownPlaceholder)" + selectedOptions="daily" + toggleIcon={null} + variant="single" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardBody> + <div + className="fadein" + > + <ChartArea + chartLegend={[Function]} + chartTooltip={[Function]} + dataSets={Array []} + domain={Object {}} + height={275} + key="chart_{\\"granularity\\":\\"daily\\"}" + padding={ Object { - "title": "t(curiosity-graph.dropdownQuarterly)", - "value": "quarterly", - }, - ] - } - placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions="daily" - toggleIcon={null} - variant="single" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="fadein" - > - <ChartArea - chartLegend={[Function]} - chartTooltip={[Function]} - dataSets={Array []} - domain={Object {}} - height={275} - key="chart_{\\"granularity\\":\\"daily\\"}" - padding={ - Object { - "bottom": 75, - "left": 50, - "right": 50, - "top": 50, + "bottom": 75, + "left": 50, + "right": 50, + "top": 50, + } } - } - themeColor="blue" - xAxisFixLabelOverlap={true} - xAxisLabelIncrement={5} - xAxisTickFormat={[Function]} - yAxisTickFormat={[Function]} - /> - </div> - </CardBody> + themeColor="blue" + xAxisFixLabelOverlap={true} + xAxisLabelIncrement={5} + xAxisTickFormat={[Function]} + yAxisTickFormat={[Function]} + /> + </div> + </CardBody> + </MinHeight> </Card> `; @@ -186,112 +196,122 @@ exports[`GraphCard Component should render multiple states: error with 403 statu <Card className="curiosity-usage-graph" > - <CardHeader> - <CardTitle> - <Title - headingLevel="h2" - size="lg" - /> - </CardTitle> - <CardActions - className="blur" - > - <Select - aria-label="t(curiosity-graph.dropdownPlaceholder)" - ariaLabel="Select option" - className="" - id="generatedid-" - isDisabled={false} - isToggleText={true} - name={null} - onSelect={[Function]} - options={ - Array [ - Object { - "selected": true, - "title": "t(curiosity-graph.dropdownDaily)", - "value": "daily", - }, - Object { - "title": "t(curiosity-graph.dropdownWeekly)", - "value": "weekly", - }, - Object { - "title": "t(curiosity-graph.dropdownMonthly)", - "value": "monthly", - }, - Object { - "title": "t(curiosity-graph.dropdownQuarterly)", - "value": "quarterly", - }, - ] - } - placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions="daily" - toggleIcon={null} - variant="single" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="blur" - > - <ChartArea - chartLegend={[Function]} - chartTooltip={[Function]} - dataSets={ - Array [ - Object { - "animate": Object { - "duration": 250, - "onLoad": Object { + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions + className="blur" + > + <Select + aria-label="t(curiosity-graph.dropdownPlaceholder)" + ariaLabel="Select option" + className="" + id="generatedid-" + isDisabled={false} + isToggleText={true} + name={null} + onSelect={[Function]} + options={ + Array [ + Object { + "selected": true, + "title": "t(curiosity-graph.dropdownDaily)", + "value": "daily", + }, + Object { + "title": "t(curiosity-graph.dropdownWeekly)", + "value": "weekly", + }, + Object { + "title": "t(curiosity-graph.dropdownMonthly)", + "value": "monthly", + }, + Object { + "title": "t(curiosity-graph.dropdownQuarterly)", + "value": "quarterly", + }, + ] + } + placeholder="t(curiosity-graph.dropdownPlaceholder)" + selectedOptions="daily" + toggleIcon={null} + variant="single" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardBody> + <div + className="blur" + > + <ChartArea + chartLegend={[Function]} + chartTooltip={[Function]} + dataSets={ + Array [ + Object { + "animate": Object { "duration": 250, + "onLoad": Object { + "duration": 250, + }, }, + "data": Array [ + Object { + "date": 2019-06-01T00:00:00.000Z, + "x": 0, + "y": 10, + }, + Object { + "date": 2019-06-08T00:00:00.000Z, + "x": 1, + "y": 12, + }, + Object { + "date": 2019-06-25T00:00:00.000Z, + "x": 2, + "y": 3, + }, + ], + "id": "physicalSockets", + "isStacked": true, + "isThreshold": false, + "strokeWidth": 2, }, - "data": Array [ - Object { - "date": 2019-06-01T00:00:00.000Z, - "x": 0, - "y": 10, - }, - Object { - "date": 2019-06-08T00:00:00.000Z, - "x": 1, - "y": 12, - }, - Object { - "date": 2019-06-25T00:00:00.000Z, - "x": 2, - "y": 3, - }, - ], - "id": "physicalSockets", - "isStacked": true, - "isThreshold": false, - "strokeWidth": 2, - }, - ] - } - domain={Object {}} - height={275} - key="chart_{\\"granularity\\":\\"daily\\"}" - padding={ - Object { - "bottom": 75, - "left": 50, - "right": 50, - "top": 50, + ] + } + domain={Object {}} + height={275} + key="chart_{\\"granularity\\":\\"daily\\"}" + padding={ + Object { + "bottom": 75, + "left": 50, + "right": 50, + "top": 50, + } } - } - themeColor="blue" - xAxisFixLabelOverlap={true} - xAxisLabelIncrement={5} - xAxisTickFormat={[Function]} - yAxisTickFormat={[Function]} - /> - </div> - </CardBody> + themeColor="blue" + xAxisFixLabelOverlap={true} + xAxisLabelIncrement={5} + xAxisTickFormat={[Function]} + yAxisTickFormat={[Function]} + /> + </div> + </CardBody> + </MinHeight> </Card> `; @@ -299,112 +319,122 @@ exports[`GraphCard Component should render multiple states: error with 500 statu <Card className="curiosity-usage-graph" > - <CardHeader> - <CardTitle> - <Title - headingLevel="h2" - size="lg" - /> - </CardTitle> - <CardActions - className="blur" - > - <Select - aria-label="t(curiosity-graph.dropdownPlaceholder)" - ariaLabel="Select option" - className="" - id="generatedid-" - isDisabled={false} - isToggleText={true} - name={null} - onSelect={[Function]} - options={ - Array [ - Object { - "selected": true, - "title": "t(curiosity-graph.dropdownDaily)", - "value": "daily", - }, - Object { - "title": "t(curiosity-graph.dropdownWeekly)", - "value": "weekly", - }, - Object { - "title": "t(curiosity-graph.dropdownMonthly)", - "value": "monthly", - }, - Object { - "title": "t(curiosity-graph.dropdownQuarterly)", - "value": "quarterly", - }, - ] - } - placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions="daily" - toggleIcon={null} - variant="single" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="blur" - > - <ChartArea - chartLegend={[Function]} - chartTooltip={[Function]} - dataSets={ - Array [ - Object { - "animate": Object { - "duration": 250, - "onLoad": Object { + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions + className="blur" + > + <Select + aria-label="t(curiosity-graph.dropdownPlaceholder)" + ariaLabel="Select option" + className="" + id="generatedid-" + isDisabled={false} + isToggleText={true} + name={null} + onSelect={[Function]} + options={ + Array [ + Object { + "selected": true, + "title": "t(curiosity-graph.dropdownDaily)", + "value": "daily", + }, + Object { + "title": "t(curiosity-graph.dropdownWeekly)", + "value": "weekly", + }, + Object { + "title": "t(curiosity-graph.dropdownMonthly)", + "value": "monthly", + }, + Object { + "title": "t(curiosity-graph.dropdownQuarterly)", + "value": "quarterly", + }, + ] + } + placeholder="t(curiosity-graph.dropdownPlaceholder)" + selectedOptions="daily" + toggleIcon={null} + variant="single" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardBody> + <div + className="blur" + > + <ChartArea + chartLegend={[Function]} + chartTooltip={[Function]} + dataSets={ + Array [ + Object { + "animate": Object { "duration": 250, + "onLoad": Object { + "duration": 250, + }, }, + "data": Array [ + Object { + "date": 2019-06-01T00:00:00.000Z, + "x": 0, + "y": 10, + }, + Object { + "date": 2019-06-08T00:00:00.000Z, + "x": 1, + "y": 12, + }, + Object { + "date": 2019-06-25T00:00:00.000Z, + "x": 2, + "y": 3, + }, + ], + "id": "physicalSockets", + "isStacked": true, + "isThreshold": false, + "strokeWidth": 2, }, - "data": Array [ - Object { - "date": 2019-06-01T00:00:00.000Z, - "x": 0, - "y": 10, - }, - Object { - "date": 2019-06-08T00:00:00.000Z, - "x": 1, - "y": 12, - }, - Object { - "date": 2019-06-25T00:00:00.000Z, - "x": 2, - "y": 3, - }, - ], - "id": "physicalSockets", - "isStacked": true, - "isThreshold": false, - "strokeWidth": 2, - }, - ] - } - domain={Object {}} - height={275} - key="chart_{\\"granularity\\":\\"daily\\"}" - padding={ - Object { - "bottom": 75, - "left": 50, - "right": 50, - "top": 50, + ] + } + domain={Object {}} + height={275} + key="chart_{\\"granularity\\":\\"daily\\"}" + padding={ + Object { + "bottom": 75, + "left": 50, + "right": 50, + "top": 50, + } } - } - themeColor="blue" - xAxisFixLabelOverlap={true} - xAxisLabelIncrement={5} - xAxisTickFormat={[Function]} - yAxisTickFormat={[Function]} - /> - </div> - </CardBody> + themeColor="blue" + xAxisFixLabelOverlap={true} + xAxisLabelIncrement={5} + xAxisTickFormat={[Function]} + yAxisTickFormat={[Function]} + /> + </div> + </CardBody> + </MinHeight> </Card> `; @@ -412,112 +442,122 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = ` <Card className="curiosity-usage-graph" > - <CardHeader> - <CardTitle> - <Title - headingLevel="h2" - size="lg" - /> - </CardTitle> - <CardActions - className="" - > - <Select - aria-label="t(curiosity-graph.dropdownPlaceholder)" - ariaLabel="Select option" + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions className="" - id="generatedid-" - isDisabled={false} - isToggleText={true} - name={null} - onSelect={[Function]} - options={ - Array [ - Object { - "selected": true, - "title": "t(curiosity-graph.dropdownDaily)", - "value": "daily", - }, - Object { - "title": "t(curiosity-graph.dropdownWeekly)", - "value": "weekly", - }, - Object { - "title": "t(curiosity-graph.dropdownMonthly)", - "value": "monthly", - }, - Object { - "title": "t(curiosity-graph.dropdownQuarterly)", - "value": "quarterly", - }, - ] - } - placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions="daily" - toggleIcon={null} - variant="single" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="fadein" - > - <ChartArea - chartLegend={[Function]} - chartTooltip={[Function]} - dataSets={ - Array [ - Object { - "animate": Object { - "duration": 250, - "onLoad": Object { + > + <Select + aria-label="t(curiosity-graph.dropdownPlaceholder)" + ariaLabel="Select option" + className="" + id="generatedid-" + isDisabled={false} + isToggleText={true} + name={null} + onSelect={[Function]} + options={ + Array [ + Object { + "selected": true, + "title": "t(curiosity-graph.dropdownDaily)", + "value": "daily", + }, + Object { + "title": "t(curiosity-graph.dropdownWeekly)", + "value": "weekly", + }, + Object { + "title": "t(curiosity-graph.dropdownMonthly)", + "value": "monthly", + }, + Object { + "title": "t(curiosity-graph.dropdownQuarterly)", + "value": "quarterly", + }, + ] + } + placeholder="t(curiosity-graph.dropdownPlaceholder)" + selectedOptions="daily" + toggleIcon={null} + variant="single" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardBody> + <div + className="fadein" + > + <ChartArea + chartLegend={[Function]} + chartTooltip={[Function]} + dataSets={ + Array [ + Object { + "animate": Object { "duration": 250, + "onLoad": Object { + "duration": 250, + }, }, + "data": Array [ + Object { + "date": 2019-06-01T00:00:00.000Z, + "x": 0, + "y": 10, + }, + Object { + "date": 2019-06-08T00:00:00.000Z, + "x": 1, + "y": 12, + }, + Object { + "date": 2019-06-25T00:00:00.000Z, + "x": 2, + "y": 3, + }, + ], + "id": "physicalSockets", + "isStacked": true, + "isThreshold": false, + "strokeWidth": 2, }, - "data": Array [ - Object { - "date": 2019-06-01T00:00:00.000Z, - "x": 0, - "y": 10, - }, - Object { - "date": 2019-06-08T00:00:00.000Z, - "x": 1, - "y": 12, - }, - Object { - "date": 2019-06-25T00:00:00.000Z, - "x": 2, - "y": 3, - }, - ], - "id": "physicalSockets", - "isStacked": true, - "isThreshold": false, - "strokeWidth": 2, - }, - ] - } - domain={Object {}} - height={275} - key="chart_{\\"granularity\\":\\"daily\\"}" - padding={ - Object { - "bottom": 75, - "left": 50, - "right": 50, - "top": 50, + ] + } + domain={Object {}} + height={275} + key="chart_{\\"granularity\\":\\"daily\\"}" + padding={ + Object { + "bottom": 75, + "left": 50, + "right": 50, + "top": 50, + } } - } - themeColor="blue" - xAxisFixLabelOverlap={true} - xAxisLabelIncrement={5} - xAxisTickFormat={[Function]} - yAxisTickFormat={[Function]} - /> - </div> - </CardBody> + themeColor="blue" + xAxisFixLabelOverlap={true} + xAxisLabelIncrement={5} + xAxisTickFormat={[Function]} + yAxisTickFormat={[Function]} + /> + </div> + </CardBody> + </MinHeight> </Card> `; @@ -525,68 +565,78 @@ exports[`GraphCard Component should render multiple states: pending 1`] = ` <Card className="curiosity-usage-graph" > - <CardHeader> - <CardTitle> - <Title - headingLevel="h2" - size="lg" - /> - </CardTitle> - <CardActions - className="" - > - <Select - aria-label="t(curiosity-graph.dropdownPlaceholder)" - ariaLabel="Select option" + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions className="" - id="generatedid-" - isDisabled={false} - isToggleText={true} - name={null} - onSelect={[Function]} - options={ - Array [ - Object { - "selected": true, - "title": "t(curiosity-graph.dropdownDaily)", - "value": "daily", - }, - Object { - "title": "t(curiosity-graph.dropdownWeekly)", - "value": "weekly", - }, - Object { - "title": "t(curiosity-graph.dropdownMonthly)", - "value": "monthly", - }, + > + <Select + aria-label="t(curiosity-graph.dropdownPlaceholder)" + ariaLabel="Select option" + className="" + id="generatedid-" + isDisabled={false} + isToggleText={true} + name={null} + onSelect={[Function]} + options={ + Array [ + Object { + "selected": true, + "title": "t(curiosity-graph.dropdownDaily)", + "value": "daily", + }, + Object { + "title": "t(curiosity-graph.dropdownWeekly)", + "value": "weekly", + }, + Object { + "title": "t(curiosity-graph.dropdownMonthly)", + "value": "monthly", + }, + Object { + "title": "t(curiosity-graph.dropdownQuarterly)", + "value": "quarterly", + }, + ] + } + placeholder="t(curiosity-graph.dropdownPlaceholder)" + selectedOptions="daily" + toggleIcon={null} + variant="single" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={false} + minHeight={0} + > + <CardBody> + <div + className="fadein" + > + <Loader + skeletonProps={ Object { - "title": "t(curiosity-graph.dropdownQuarterly)", - "value": "quarterly", - }, - ] - } - placeholder="t(curiosity-graph.dropdownPlaceholder)" - selectedOptions="daily" - toggleIcon={null} - variant="single" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="fadein" - > - <Loader - skeletonProps={ - Object { - "size": "sm", + "size": "sm", + } } - } - tableProps={Object {}} - variant="graph" - /> - </div> - </CardBody> + tableProps={Object {}} + variant="graph" + /> + </div> + </CardBody> + </MinHeight> </Card> `; diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js index a2e46ca2b..11bae4e74 100644 --- a/src/components/graphCard/graphCard.js +++ b/src/components/graphCard/graphCard.js @@ -13,6 +13,7 @@ import GraphCardChartTooltip from './graphCardChartTooltip'; import GraphCardChartLegend from './graphCardChartLegend'; import { ChartArea } from '../chartArea/chartArea'; import { Loader } from '../loader/loader'; +import { MinHeight } from '../minHeight/minHeight'; import { translate } from '../i18n/i18n'; /** @@ -158,6 +159,11 @@ class GraphCard extends React.Component { ); } + /** + * ToDo: Evaluate applying a minHeight attr to the MinHeight component graphCard setup + * Appears there may be a minor page shift when compared to the prior hard-set min-height + * of 410px + */ /** * Render a chart/graph card with chart/graph. * @@ -175,29 +181,33 @@ class GraphCard extends React.Component { return ( <Card className="curiosity-usage-graph"> - <CardHeader> - <CardTitle> - <Title headingLevel="h2" size="lg"> - {cardTitle} - - - - {children} - + + + + + +
+ {pending && } + {!pending && this.renderChart()} +
+ + ); } diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap index 9d7de0ba7..f67890845 100644 --- a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap +++ b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap @@ -125,78 +125,93 @@ exports[`InventoryList Component should handle variations in data: filtered data - - - - </CardTitle> - <CardActions - className="" - > - <Connect(Pagination) - isCompact={true} - isDisabled={false} - itemCount={0} - perPageDefault={10} - productId="lorem" - viewId="inventoryList" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="fadein" - > - <Table - ariaLabel={null} - borders={true} - className="curiosity-inventory-list" - columnHeaders={ - Array [ - "t(curiosity-inventory.header, [object Object])", - ] - } - isHeader={true} - rows={ - Array [ - Object { - "cells": Array [ - "ipsum", - ], - "expandedContent": false, - }, - Object { - "cells": Array [ - "sit", - ], - "expandedContent": false, - }, - ] - } - summary={null} - t={[Function]} - variant="compact" - /> - </div> - </CardBody> - <CardFooter - className="" + <MinHeight + autoUpdate={true} + minHeight={0} + > + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions + className="" + > + <Connect(Pagination) + isCompact={true} + isDisabled={false} + itemCount={0} + perPageDefault={10} + productId="lorem" + viewId="inventoryList" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={true} + minHeight={0} > - <TableToolbar - isFooter={true} + <CardBody> + <div + className="fadein" + > + <Table + ariaLabel={null} + borders={true} + className="curiosity-inventory-list" + columnHeaders={ + Array [ + "t(curiosity-inventory.header, [object Object])", + ] + } + isHeader={true} + rows={ + Array [ + Object { + "cells": Array [ + "ipsum", + ], + "expandedContent": false, + }, + Object { + "cells": Array [ + "sit", + ], + "expandedContent": false, + }, + ] + } + summary={null} + t={[Function]} + variant="compact" + /> + </div> + </CardBody> + </MinHeight> + <MinHeight + autoUpdate={true} + minHeight={0} + > + <CardFooter + className="" > - <Connect(Pagination) - dropDirection="up" - isDisabled={false} - itemCount={0} - perPageDefault={10} - productId="lorem" - viewId="inventoryList" - /> - </TableToolbar> - </CardFooter> + <TableToolbar + isFooter={true} + > + <Connect(Pagination) + dropDirection="up" + isDisabled={false} + itemCount={0} + perPageDefault={10} + productId="lorem" + viewId="inventoryList" + /> + </TableToolbar> + </CardFooter> + </MinHeight> </Card> `; @@ -204,81 +219,96 @@ exports[`InventoryList Component should handle variations in data: variable data <Card className="curiosity-inventory-card" > - <CardHeader> - <CardTitle> - <Title - headingLevel="h2" - size="lg" - /> - </CardTitle> - <CardActions - className="" - > - <Connect(Pagination) - isCompact={true} - isDisabled={false} - itemCount={0} - perPageDefault={10} - productId="lorem" - viewId="inventoryList" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="fadein" - > - <Table - ariaLabel={null} - borders={true} - className="curiosity-inventory-list" - columnHeaders={ - Array [ - "t(curiosity-inventory.header, [object Object])", - "t(curiosity-inventory.header, [object Object])", - ] - } - isHeader={true} - rows={ - Array [ - Object { - "cells": Array [ - "ipsum", - "sit", - ], - "expandedContent": false, - }, - Object { - "cells": Array [ - "sit", - "amet", - ], - "expandedContent": false, - }, - ] - } - summary={null} - t={[Function]} - variant="compact" - /> - </div> - </CardBody> - <CardFooter - className="" + <MinHeight + autoUpdate={true} + minHeight={0} > - <TableToolbar - isFooter={true} + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions + className="" + > + <Connect(Pagination) + isCompact={true} + isDisabled={false} + itemCount={0} + perPageDefault={10} + productId="lorem" + viewId="inventoryList" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={true} + minHeight={0} + > + <CardBody> + <div + className="fadein" + > + <Table + ariaLabel={null} + borders={true} + className="curiosity-inventory-list" + columnHeaders={ + Array [ + "t(curiosity-inventory.header, [object Object])", + "t(curiosity-inventory.header, [object Object])", + ] + } + isHeader={true} + rows={ + Array [ + Object { + "cells": Array [ + "ipsum", + "sit", + ], + "expandedContent": false, + }, + Object { + "cells": Array [ + "sit", + "amet", + ], + "expandedContent": false, + }, + ] + } + summary={null} + t={[Function]} + variant="compact" + /> + </div> + </CardBody> + </MinHeight> + <MinHeight + autoUpdate={true} + minHeight={0} + > + <CardFooter + className="" > - <Connect(Pagination) - dropDirection="up" - isDisabled={false} - itemCount={0} - perPageDefault={10} - productId="lorem" - viewId="inventoryList" - /> - </TableToolbar> - </CardFooter> + <TableToolbar + isFooter={true} + > + <Connect(Pagination) + dropDirection="up" + isDisabled={false} + itemCount={0} + perPageDefault={10} + productId="lorem" + viewId="inventoryList" + /> + </TableToolbar> + </CardFooter> + </MinHeight> </Card> `; @@ -286,59 +316,74 @@ exports[`InventoryList Component should render a non-connected component: non-co <Card className="curiosity-inventory-card" > - <CardHeader> - <CardTitle> - <Title - headingLevel="h2" - size="lg" - /> - </CardTitle> - <CardActions - className="" - > - <Connect(Pagination) - isCompact={true} - isDisabled={false} - itemCount={0} - perPageDefault={10} - productId="lorem" - viewId="inventoryList" - /> - </CardActions> - </CardHeader> - <CardBody> - <div - className="fadein" - > - <Table - ariaLabel={null} - borders={true} - className="curiosity-inventory-list" - columnHeaders={Array []} - isHeader={true} - rows={Array []} - summary={null} - t={[Function]} - variant="compact" - /> - </div> - </CardBody> - <CardFooter - className="" + <MinHeight + autoUpdate={true} + minHeight={0} > - <TableToolbar - isFooter={true} + <CardHeader> + <CardTitle> + <Title + headingLevel="h2" + size="lg" + /> + </CardTitle> + <CardActions + className="" + > + <Connect(Pagination) + isCompact={true} + isDisabled={false} + itemCount={0} + perPageDefault={10} + productId="lorem" + viewId="inventoryList" + /> + </CardActions> + </CardHeader> + </MinHeight> + <MinHeight + autoUpdate={true} + minHeight={0} + > + <CardBody> + <div + className="fadein" + > + <Table + ariaLabel={null} + borders={true} + className="curiosity-inventory-list" + columnHeaders={Array []} + isHeader={true} + rows={Array []} + summary={null} + t={[Function]} + variant="compact" + /> + </div> + </CardBody> + </MinHeight> + <MinHeight + autoUpdate={true} + minHeight={0} + > + <CardFooter + className="" > - <Connect(Pagination) - dropDirection="up" - isDisabled={false} - itemCount={0} - perPageDefault={10} - productId="lorem" - viewId="inventoryList" - /> - </TableToolbar> - </CardFooter> + <TableToolbar + isFooter={true} + > + <Connect(Pagination) + dropDirection="up" + isDisabled={false} + itemCount={0} + perPageDefault={10} + productId="lorem" + viewId="inventoryList" + /> + </TableToolbar> + </CardFooter> + </MinHeight> </Card> `; diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js index b62c91f17..671ad5159 100644 --- a/src/components/inventoryList/inventoryList.js +++ b/src/components/inventoryList/inventoryList.js @@ -9,6 +9,7 @@ import { helpers } from '../../common'; import { connect, reduxActions, reduxSelectors, reduxTypes, store } from '../../redux'; import Table from '../table/table'; import { Loader } from '../loader/loader'; +import { MinHeight } from '../minHeight/minHeight'; import GuestsList from '../guestsList/guestsList'; import { inventoryListHelpers } from './inventoryListHelpers'; import Pagination from '../pagination/pagination'; @@ -164,51 +165,57 @@ class InventoryList extends React.Component { return ( <Card className="curiosity-inventory-card"> - <CardHeader> - <CardTitle> - <Title headingLevel="h2" size="lg"> - {cardTitle} - - - - - - - -
- {pending && ( - + + + + {cardTitle} + + + + - )} - {!pending && this.renderTable()} -
- - - - - - + + + + + +
+ {pending && ( + + )} + {!pending && this.renderTable()} +
+ + + + + + + + + ); } diff --git a/src/styles/_usage-graph.scss b/src/styles/_usage-graph.scss index 57014b7cf..dcece156b 100644 --- a/src/styles/_usage-graph.scss +++ b/src/styles/_usage-graph.scss @@ -1,7 +1,5 @@ .curiosity { .curiosity-usage-graph { - min-height: 410px; - .pf-c-card__header { border-bottom: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100); padding-bottom: 1em;