From 32b070da901ad4720e1a978aa89ab42c969308b5 Mon Sep 17 00:00:00 2001
From: Harald Brabenetz <brabenetz@gmx.net>
Date: Thu, 18 Aug 2022 17:42:19 +0200
Subject: [PATCH] Extend "Component health check" widget Config: Add Input
 Configuration for GroupItemWidth

---
 app/src/common/utils/validation/validate.js   |  1 +
 .../componentHealthCheck.jsx                  |  5 +++
 .../groupsSection/groupItem/groupItem.jsx     |  6 ++--
 .../groupsSection/groupItem/groupItem.scss    |  2 +-
 .../groupsSection/groupsSection.jsx           |  2 ++
 .../groupsSection/propTypes.js                |  1 +
 .../componentHealthCheckControls.jsx          | 31 +++++++++++++++++++
 7 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/app/src/common/utils/validation/validate.js b/app/src/common/utils/validation/validate.js
index ea34eecec5..a5563fe72a 100644
--- a/app/src/common/utils/validation/validate.js
+++ b/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)]);
diff --git a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/componentHealthCheck.jsx b/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/componentHealthCheck.jsx
index 3012e64f24..8f7c15dc69 100644
--- a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/componentHealthCheck.jsx
+++ b/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}
diff --git a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.jsx b/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.jsx
index 524b4f7066..b7c6f7de18 100644
--- a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.jsx
+++ b/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: () => {},
diff --git a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.scss b/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.scss
index 9402393788..bee6b5ce2d 100644
--- a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupItem/groupItem.scss
+++ b/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;
diff --git a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupsSection.jsx b/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupsSection.jsx
index 4c8b50a2cf..e419eaf251 100644
--- a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/groupsSection.jsx
+++ b/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}
diff --git a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/propTypes.js b/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/propTypes.js
index a765bd4f9a..deb2cfe7b7 100644
--- a/app/src/components/widgets/multiLevelWidgets/componentHealthCheck/groupsSection/propTypes.js
+++ b/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,
 };
diff --git a/app/src/pages/inside/dashboardItemPage/modals/common/widgetControls/componentHealthCheckControls.jsx b/app/src/pages/inside/dashboardItemPage/modals/common/widgetControls/componentHealthCheckControls.jsx
index 390eb032a0..cbe9c41fd8 100644
--- a/app/src/pages/inside/dashboardItemPage/modals/common/widgetControls/componentHealthCheckControls.jsx
+++ b/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}