From 030a00e5ea72e1de507642b40914ead54b934c9b Mon Sep 17 00:00:00 2001 From: Stephen Stone Date: Mon, 19 Oct 2020 13:01:36 -0500 Subject: [PATCH] fix(dashboardeditor): pass mergedi18n, use dotted border for selected --- src/components/Card/CardToolbar.jsx | 97 +++--- .../__snapshots__/Dashboard.story.storyshot | 307 ++++++++++++++++-- .../DashboardEditor/_dashboard-editor.scss | 2 +- .../DashboardEditor/editorUtils.jsx | 6 +- src/components/ImageCard/ImageCard.jsx | 6 +- .../__snapshots__/ImageCard.story.storyshot | 32 +- src/components/TableCard/TableCard.jsx | 48 +-- .../__snapshots__/TableCard.story.storyshot | 5 +- 8 files changed, 372 insertions(+), 131 deletions(-) diff --git a/src/components/Card/CardToolbar.jsx b/src/components/Card/CardToolbar.jsx index 76f5d8ad21..6ee0de5a5f 100644 --- a/src/components/Card/CardToolbar.jsx +++ b/src/components/Card/CardToolbar.jsx @@ -49,6 +49,22 @@ const propTypes = { * i.e. { thisWeek: 'This week', lastWeek: 'Last week'} */ timeRangeOptions: TimeRangeOptionsPropTypes, // eslint-disable-line react/require-default-props + i18n: PropTypes.shape({ + last24Hours: PropTypes.string, + last7Days: PropTypes.string, + lastMonth: PropTypes.string, + lastQuarter: PropTypes.string, + lastYear: PropTypes.string, + thisWeek: PropTypes.string, + thisMonth: PropTypes.string, + thisQuarter: PropTypes.string, + thisYear: PropTypes.string, + overflowMenuDescription: PropTypes.string, + cloneCardLabel: PropTypes.string, + deleteCardLabel: PropTypes.string, + closeLabel: PropTypes.string, + expandLabel: PropTypes.string, + }), }; const defaultProps = { @@ -57,6 +73,22 @@ const defaultProps = { renderExpandIcon: Popup16, className: null, timeRangeOptions: null, + i18n: { + last24Hours: 'Last 24 hours', + last7Days: 'Last 7 days', + lastMonth: 'Last month', + lastQuarter: 'Last quarter', + lastYear: 'Last year', + thisWeek: 'This week', + thisMonth: 'This month', + thisQuarter: 'This quarter', + thisYear: 'This year', + overflowMenuDescription: 'Card actions menu', + cloneCardLabel: 'Clone card', + deleteCardLabel: 'Delete card', + closeLabel: 'Close', + expandLabel: 'Expand', + }, }; const CardToolbar = ({ @@ -71,56 +103,47 @@ const CardToolbar = ({ onCardAction, className, }) => { + const mergedI18n = { ...defaultProps.i18n, ...i18n }; // maps the timebox internal label to a translated string // Need the default here in case that the CardToolbar is used by multiple different components // Also needs to reassign itself if i18n changes const timeRangeOptions = useMemo( () => timeRangeOptionsProp || { - last24Hours: i18n.last24HoursLabel, - last7Days: i18n.last7DaysLabel, - lastMonth: i18n.lastMonthLabel, - lastQuarter: i18n.lastQuarterLabel, - lastYear: i18n.lastYearLabel, - thisWeek: i18n.thisWeekLabel, - thisMonth: i18n.thisMonthLabel, - thisQuarter: i18n.thisQuarterLabel, - thisYear: i18n.thisYearLabel, + last24Hours: mergedI18n.last24HoursLabel, + last7Days: mergedI18n.last7DaysLabel, + lastMonth: mergedI18n.lastMonthLabel, + lastQuarter: mergedI18n.lastQuarterLabel, + lastYear: mergedI18n.lastYearLabel, + thisWeek: mergedI18n.thisWeekLabel, + thisMonth: mergedI18n.thisMonthLabel, + thisQuarter: mergedI18n.thisQuarterLabel, + thisYear: mergedI18n.thisYearLabel, }, [ - i18n.last24HoursLabel, - i18n.last7DaysLabel, - i18n.lastMonthLabel, - i18n.lastQuarterLabel, - i18n.lastYearLabel, - i18n.thisMonthLabel, - i18n.thisQuarterLabel, - i18n.thisWeekLabel, - i18n.thisYearLabel, + mergedI18n.last24HoursLabel, + mergedI18n.last7DaysLabel, + mergedI18n.lastMonthLabel, + mergedI18n.lastQuarterLabel, + mergedI18n.lastYearLabel, + mergedI18n.thisMonthLabel, + mergedI18n.thisQuarterLabel, + mergedI18n.thisWeekLabel, + mergedI18n.thisYearLabel, timeRangeOptionsProp, ] ); return isEditable ? (
- {(availableActions.edit || - availableActions.clone || - availableActions.delete) && ( - - {availableActions.edit && ( - { - onCardAction(CARD_ACTIONS.EDIT_CARD); - }} - itemText={i18n.editCardLabel} - /> - )} + {(availableActions.clone || availableActions.delete) && ( + {availableActions.clone && ( { onCardAction(CARD_ACTIONS.CLONE_CARD); }} - itemText={i18n.cloneCardLabel} + itemText={mergedI18n.cloneCardLabel} /> )} {availableActions.delete && ( @@ -129,7 +152,7 @@ const CardToolbar = ({ onClick={() => { onCardAction(CARD_ACTIONS.DELETE_CARD); }} - itemText={i18n.deleteCardLabel} + itemText={mergedI18n.deleteCardLabel} /> )} @@ -140,7 +163,7 @@ const CardToolbar = ({ {availableActions.range ? ( {isExpanded ? ( onCardAction(CARD_ACTIONS.CLOSE_EXPANDED_CARD)} - iconDescription={i18n.closeLabel} + iconDescription={mergedI18n.closeLabel} renderIcon={Close16} /> ) : ( { onCardAction(CARD_ACTIONS.OPEN_EXPANDED_CARD); }} - iconDescription={i18n.expandLabel} + iconDescription={mergedI18n.expandLabel} renderIcon={renderExpandIcon} /> )} diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index 71898ebec4..25e97bc574 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -1541,8 +1541,53 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
+
+ +
+
+ +
+
+ +
- + + + + + + Select time range + + + +
@@ -11132,8 +11283,53 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
+
+ +
+
+ +
-
+ />
{ + const mergedI18n = { ...defaultProps.i18n, ...i18n }; + // Set the locale moment.locale(locale); /** Searches for variables and updates the card if it is passed the cardVariables prop */ @@ -387,7 +392,7 @@ const TableCard = ({ renderIcon={() => ( )}> {actionList.map((item) => { @@ -410,11 +415,6 @@ const TableCard = ({ ) : null; }; - const strings = { - ...defaultProps.i18n, - ...i18n, - }; - const renderThresholdIcon = (cellItem) => { const matchingThresholdValue = findMatchingThresholds( thresholds, @@ -426,7 +426,7 @@ const TableCard = ({ { @@ -589,9 +589,9 @@ const TableCard = ({ [ actionColumn, hasActionColumn, + mergedI18n.defaultFilterStringPlaceholdText, newColumns, newSize, - strings.defaultFilterStringPlaceholdText, ] ); @@ -802,14 +802,22 @@ const TableCard = ({ ? columnsToRender.find((item) => item.priority === 1) : columnStartSortDefined; + const mergedAvailableActions = { + ...availableActions, + expand: isExpandable, + range: true, + }; + const cardToolbar = ( ); @@ -821,7 +829,7 @@ const TableCard = ({ availableActions={{ expand: isExpandable, range: true }} isEditable={isEditable} isExpanded={isExpanded} - i18n={i18n} + i18n={mergedI18n} hideHeader {...others}> {({ height }) => { @@ -882,12 +890,12 @@ const TableCard = ({ } : {}), emptyState: { - message: emptyMessage || strings.emptyMessage, + message: emptyMessage || mergedI18n.emptyMessage, }, }, }} showHeader={showHeader !== undefined ? showHeader : true} - i18n={i18n} // TODO: add Card defaultprops ? + i18n={mergedI18n} // TODO: add Card defaultprops ? /> ); }} diff --git a/src/components/TableCard/__snapshots__/TableCard.story.storyshot b/src/components/TableCard/__snapshots__/TableCard.story.storyshot index 993ba33872..4034f02d83 100644 --- a/src/components/TableCard/__snapshots__/TableCard.story.storyshot +++ b/src/components/TableCard/__snapshots__/TableCard.story.storyshot @@ -10548,10 +10548,11 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table onKeyDown={[Function]} open={false} tabIndex={0} + title="Select time range" type="button" > - open and close list of options + Select time range