SONAR-10682 Impossible to create new metric domain

2 files changed, 37 insertions, 1 deletions

diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
index 89c4fc9ba20..c6d4e5ee4c3 100644
--- a/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
+++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/Form.tsx
@@ -90,6 +90,11 @@ export default class Form extends React.PureComponent<Props, State> {
   };
 
   render() {
+    const domains = [...this.props.domains];
+    if (this.state.domain) {
+      domains.push(this.state.domain);
+    }
+
     return (
       <SimpleModal
         header={this.props.header}
@@ -146,7 +151,7 @@ export default class Form extends React.PureComponent<Props, State> {
                 <label htmlFor="create-metric-domain">{translate('custom_metrics.domain')}</label>
                 <Creatable
                   onChange={this.handleDomainChange}
-                  options={this.props.domains.map(domain => ({ label: domain, value: domain }))}
+                  options={domains.map(domain => ({ label: domain, value: domain }))}
                   value={this.state.domain}
                 />
               </div>
diff --git a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/Form-test.tsx b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/Form-test.tsx
index 1e828bc139e..c3ed8823066 100644
--- a/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/Form-test.tsx
+++ b/server/sonar-web/src/main/js/apps/custom-metrics/components/__tests__/Form-test.tsx
@@ -57,3 +57,34 @@ it('should render form', async () => {
   click(wrapper.find('ResetButtonLink'));
   expect(onClose).toBeCalled();
 });
+
+it('should create new domain', () => {
+  const wrapper = shallow(
+    <Form
+      confirmButtonText="confirmButtonText"
+      domains={['Coverage', 'Issues']}
+      header="header"
+      onClose={jest.fn()}
+      onSubmit={jest.fn()}
+      types={['INT', 'STRING']}
+    />
+  );
+
+  const optionsBefore = [
+    { label: 'Coverage', value: 'Coverage' },
+    { label: 'Issues', value: 'Issues' }
+  ];
+  expect(getSelect().prop('options')).toEqual(optionsBefore);
+
+  getSelect().prop<Function>('onChange')({ value: 'Another' });
+  wrapper.update();
+
+  expect(getSelect().prop('options')).toEqual([
+    ...optionsBefore,
+    { label: 'Another', value: 'Another' }
+  ]);
+
+  function getSelect() {
+    return wrapper.dive().find('Creatable');
+  }
+});