Merge pull request #4633 from openshift-cherrypick-robot/cherry-pick-…

…4518-to-release-4.4 [release-4.4] Bug 1807657: Alertmanager receiver creation page should mark Routing Labels field by red-star mark
openshift · Mar 5, 2020 · 943cedd · 943cedd
2 parents 53f3009 + 2c68e89
commit 943cedd
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/frontend/integration-tests/tests/monitoring.scenario.ts b/frontend/integration-tests/tests/monitoring.scenario.ts
@@ -282,7 +282,6 @@ describe('Alertmanager: Configuration', () => {
     // pagerduty subform should still be invalid at this point, thus save button should be disabled
     expect(monitoringView.saveButton.isEnabled()).toBe(false);
     await firstElementByTestID('integration-key').sendKeys('<integration_key>');
-    expect(monitoringView.saveButton.isEnabled()).toBe(true); // subform valid, save should be enabled at this point
 
     // labels
     expect(firstElementByTestID('invalid-label-name-error').isPresent()).toBe(false);
@@ -306,6 +305,7 @@ describe('Alertmanager: Configuration', () => {
     await firstElementByTestID('remove-routing-label').click();
     expect(firstElementByTestID('duplicate-label-name-error').isPresent()).toBe(false);
 
+    expect(monitoringView.saveButton.isEnabled()).toBe(true); // subform valid & labels provided, save should be enabled at this point
     await monitoringView.saveButton.click();
     await crudView.isLoaded();
     monitoringView.getFirstRowAsText().then((text) => {

diff --git a/frontend/public/components/monitoring/receiver-forms/alert-manager-receiver-forms.tsx b/frontend/public/components/monitoring/receiver-forms/alert-manager-receiver-forms.tsx
@@ -245,7 +245,10 @@ const ReceiverBaseForm: React.FC<ReceiverBaseFormProps> = ({
     !formValues.receiverType ||
     SubForm.isFormInvalid(formValues) ||
     !_.isEmpty(formValues.routeLabelFieldErrors) ||
-    formValues.routeLabelDuplicateNamesError;
+    formValues.routeLabelDuplicateNamesError ||
+    (!isDefaultReceiver &&
+      formValues.routeLabels.length === 1 &&
+      (formValues.routeLabels[0].name === '' || formValues.routeLabels[0].value === ''));
 
   const save = (e) => {
     e.preventDefault();

diff --git a/frontend/public/components/monitoring/receiver-forms/routing-labels-editor.tsx b/frontend/public/components/monitoring/receiver-forms/routing-labels-editor.tsx
@@ -84,7 +84,7 @@ export const RoutingLabelEditor = ({ formValues, dispatchFormChange, isDefaultRe
 
   return (
     <div data-test-id="receiver-routing-labels-editor" className="form-group">
-      <SectionHeading text="Routing Labels" />
+      <SectionHeading text="Routing Labels" required={!isDefaultReceiver} />
       <p className="co-help-text">
         Firing alerts with labels that match all of these selectors will be sent to this receiver.
         Label values can be matched exactly or with a &nbsp;

diff --git a/frontend/public/components/utils/headings.tsx b/frontend/public/components/utils/headings.tsx
@@ -165,9 +165,20 @@ export const PageHeading = connectToModel((props: PageHeadingProps) => {
   );
 });
 
-export const SectionHeading: React.SFC<SectionHeadingProps> = ({ text, children, style }) => (
+export const SectionHeading: React.SFC<SectionHeadingProps> = ({
+  text,
+  children,
+  style,
+  required,
+}) => (
   <h2 className="co-section-heading" style={style} data-test-section-heading={text}>
-    {text}
+    <span
+      className={classNames({
+        'co-required': required,
+      })}
+    >
+      {text}
+    </span>
     {children}
   </h2>
 );
@@ -264,6 +275,7 @@ export type SectionHeadingProps = {
   children?: any;
   style?: any;
   text: string;
+  required?: boolean;
 };
 
 export type SidebarSectionHeadingProps = {