Extend "Component health check" widget Config: Add Input Configuration for GroupItemWidth

app/src/common/utils/validation/validate.js

@@ -102,6 +102,7 @@ export const attributesArray = (value) =>
 export const widgetNumberOfLaunches = composeValidators([isNotEmpty, range(1, 600)]);
 export const cumulativeItemsValidation = composeValidators([isNotEmpty, range(1, 20000)]);
 export const healthCheckWidgetPassingRate = composeValidators([isNotEmpty, range(50, 100)]);
+export const healthCheckWidgetGroupItemWidth = composeValidators([isNotEmpty, range(150, 1300)]);
 export const flakyWidgetNumberOfLaunches = composeValidators([isNotEmpty, range(2, 600)]);
 export const launchesWidgetContentFields = composeValidators([isNotEmptyArray, minLength(4)]);
 export const mostFailedWidgetNumberOfLaunches = composeValidators([isNotEmpty, range(2, 600)]);

app/src/components/widgets/multiLevelWidgets/componentHealthCheck/componentHealthCheck.jsx

@@ -205,6 +205,9 @@ export class ComponentHealthCheck extends Component {
   getPassingRateValue = () =>
     Number(this.props.widget.contentParameters.widgetOptions.minPassingRate);
 
+  getGroupItemWidth = () =>
+    Number(this.props.widget.contentParameters.widgetOptions.groupItemWidth);
+
   getGroupItems = () => {
     const { widget } = this.props;
     const passingRate = this.getPassingRateValue();
@@ -285,6 +288,7 @@ export class ComponentHealthCheck extends Component {
               <GroupsSection
                 sectionTitle={intl.formatMessage(messages.failedGroupsTitle)}
                 itemsCount={groupItems.failedGroupItems.length}
+                groupItemWidth={this.getGroupItemWidth()}
                 groups={groupItems.failedGroupItems}
                 colorCalculator={this.colorCalculator}
                 onClickGroupItem={this.onClickGroupItem}
@@ -296,6 +300,7 @@ export class ComponentHealthCheck extends Component {
               <GroupsSection
                 sectionTitle={intl.formatMessage(messages.passedGroupsTitle)}
                 itemsCount={groupItems.passedGroupItems.length}
+                groupItemWidth={this.getGroupItemWidth()}
                 groups={groupItems.passedGroupItems}
                 colorCalculator={this.colorCalculator}
                 onClickGroupItem={this.onClickGroupItem}

app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.jsx

@@ -29,15 +29,16 @@ export const GroupItem = ({
   formatMessage,
   attributeValue,
   passingRate,
+  groupItemWidth,
   total,
   color,
   onClickGroupItem,
   getSpecificTestListLink,
   isClickable,
 }) => (
-  <div
+	  <div
     className={cx('group-item', { 'group-item-clickable': isClickable })}
-    style={{ borderTopColor: color }}
+    style={{ borderTopColor: color, width: groupItemWidth + 'px' }}
     onClick={isClickable ? () => onClickGroupItem(attributeValue, passingRate, color) : undefined}
   >
     <h4 className={cx('item-title')} title={attributeValue}>
@@ -71,6 +72,7 @@ GroupItem.propTypes = {
 GroupItem.defaultProps = {
   attributeValue: '',
   passingRate: 0,
+  groupItemWidth: 204,
   total: 0,
   color: '',
   formatMessage: () => {},

app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.scss

@@ -47,7 +47,7 @@
 }
 
 .item-title {
-  max-width: 150px;
+  width: 100%;
   margin: 0 0 12px 0;
   overflow: hidden;
   text-overflow: ellipsis;

app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupsSection.jsx

@@ -29,6 +29,7 @@ export const GroupsSection = injectIntl(
     intl: { formatMessage },
     sectionTitle,
     itemsCount,
+    groupItemWidth,
     groups,
     colorCalculator,
     onClickGroupItem,
@@ -46,6 +47,7 @@ export const GroupsSection = injectIntl(
             <GroupItem
               {...item}
               color={colorCalculator(item.passingRate)}
+              groupItemWidth={groupItemWidth}
               formatMessage={formatMessage}
               onClickGroupItem={onClickGroupItem}
               getSpecificTestListLink={getSpecificTestListLink}

app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/propTypes.js

@@ -19,5 +19,6 @@ import PropTypes from 'prop-types';
 export const groupItemPropTypes = {
   attributeValue: PropTypes.string,
   passingRate: PropTypes.number,
+  groupItemWidth: PropTypes.number,
   total: PropTypes.number,
 };

app/src/pages/inside/dashboardItemPage/modals/common/widgetControls/componentHealthCheckControls.jsx

@@ -46,12 +46,17 @@ const cx = classNames.bind(styles);
 
 const MAX_ATTRIBUTES_AMOUNT = 10;
 const DEFAULT_PASSING_RATE = '100';
+const DEFAULT_GROUP_ITEM_WIDTH = '204';
 
 const messages = defineMessages({
   passingRateFieldLabel: {
     id: 'ComponentHealthCheckControls.PassingRateFieldLabel',
     defaultMessage: 'The min allowable passing rate for the component',
   },
+  groupItemWidthFieldLabel: {
+    id: 'ComponentHealthCheckControls.GroupItemWidthFieldLabel',
+    defaultMessage: 'The width of a GroupItem',
+  },
   componentTitle: {
     id: 'ComponentHealthCheckControls.ComponentTitle',
     defaultMessage: 'Component',
@@ -60,6 +65,10 @@ const messages = defineMessages({
     id: 'ComponentHealthCheckControls.PassingRateValidationError',
     defaultMessage: 'Should have value from 50 to 100',
   },
+  groupItemWidthValidationError: {
+    id: 'ComponentHealthCheckControls.GroupItemWidthValidationError',
+    defaultMessage: 'Should have value from 150 to 1300',
+  },
   attributesArrayValidationError: {
     id: 'ComponentHealthCheckControls.attributesArrayValidationError',
     defaultMessage:
@@ -72,6 +81,11 @@ const passingRateValidator = (formatMessage) =>
     validate.healthCheckWidgetPassingRate,
     formatMessage(messages.passingRateValidationError),
   );
+const groupItemWidthValidator = (formatMessage) =>
+  bindMessageToValidator(
+    validate.healthCheckWidgetGroupItemWidth,
+    formatMessage(messages.groupItemWidthValidationError),
+  );
 const attributeKeyValidator = (formatMessage) => (attributes) =>
   composeBoundValidators([
     bindMessageToValidator(
@@ -111,6 +125,7 @@ export class ComponentHealthCheckControls extends Component {
         contentFields: [],
         widgetOptions: {
           minPassingRate: DEFAULT_PASSING_RATE,
+          groupItemWidth: DEFAULT_GROUP_ITEM_WIDTH,
           latest: MODES_VALUES[CHART_MODES.ALL_LAUNCHES],
           attributeKeys: [],
         },
@@ -119,6 +134,8 @@ export class ComponentHealthCheckControls extends Component {
   }
 
   normalizeValue = (value) => value && `${value}`.replace(/\D+/g, '');
+  // formatGroupItemWidthValue is needed when you edit a widget which was created by an older version where groupItemWith where undefined.
+  formatGroupItemWidthValue = (value) => `${value?value:DEFAULT_GROUP_ITEM_WIDTH}`.replace(/\D+/g, '');
 
   formatFilterValue = (value) => value && value[0];
   parseFilterValue = (value) => value && [value];
@@ -193,6 +210,20 @@ export class ComponentHealthCheckControls extends Component {
                 inputBadge={'%'}
               />
             </FieldProvider>
+            <FieldProvider
+              name="contentParameters.widgetOptions.groupItemWidth"
+              validate={groupItemWidthValidator(formatMessage)}
+              format={this.formatGroupItemWidthValue}
+              normalize={this.normalizeValue}
+            >
+              <InputControl
+                fieldLabel={formatMessage(messages.groupItemWidthFieldLabel)}
+                inputWidth={ITEMS_INPUT_WIDTH}
+                maxLength="4"
+                hintType={'top-right'}
+                inputBadge={'px'}
+              />
+            </FieldProvider>
             <FieldArray
               name="contentParameters.widgetOptions.attributeKeys"
               component={this.renderAttributesFieldArray}