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
+
+
+
+
+
+
+
+
+
-
+
+
+
@@ -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