SONAR-9392 Add option to choose parent when creating new profile

2 files changed, 58 insertions, 3 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
index cb315fb9400..56d1032bd40 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/CreateProfileForm.tsx
@@ -19,17 +19,23 @@
  */
 import * as React from 'react';
 import { sortBy } from 'lodash';
-import { getImporters, createQualityProfile } from '../../../api/quality-profiles';
+import {
+  changeProfileParent,
+  createQualityProfile,
+  getImporters
+} from '../../../api/quality-profiles';
 import Modal from '../../../components/controls/Modal';
 import Select from '../../../components/controls/Select';
 import { SubmitButton, ResetButtonLink } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
+import { Profile } from '../types';
 
 interface Props {
   languages: Array<{ key: string; name: string }>;
   onClose: () => void;
   onCreate: Function;
   organization: string | null;
+  profiles: Profile[];
 }
 
 interface State {
@@ -37,6 +43,7 @@ interface State {
   language?: string;
   loading: boolean;
   name: string;
+  parent?: string;
   preloading: boolean;
 }
 
@@ -76,6 +83,10 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
     this.setState({ language: option.value });
   };
 
+  handleParentChange = (option: { value: string } | null) => {
+    this.setState({ parent: option ? option.value : undefined });
+  };
+
   handleFormSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
     event.preventDefault();
 
@@ -87,7 +98,19 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
     }
 
     createQualityProfile(data).then(
-      (response: any) => this.props.onCreate(response.profile),
+      ({ profile }: { profile: Profile }) => {
+        if (this.state.parent) {
+          // eslint-disable-next-line promise/no-nesting
+          changeProfileParent(profile.key, this.state.parent).then(
+            () => {
+              this.props.onCreate(profile);
+            },
+            () => {}
+          );
+        } else {
+          this.props.onCreate(profile);
+        }
+      },
       () => {
         if (this.mounted) {
           this.setState({ loading: false });
@@ -98,13 +121,27 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
 
   render() {
     const header = translate('quality_profiles.new_profile');
-
     const languages = sortBy(this.props.languages, 'name');
+    let profiles: Array<{ label: string; value: string }> = [];
+
     const selectedLanguage = this.state.language || languages[0].key;
     const importers = this.state.importers.filter(importer =>
       importer.languages.includes(selectedLanguage)
     );
 
+    if (selectedLanguage) {
+      const languageProfiles = this.props.profiles.filter(p => p.language === selectedLanguage);
+      profiles = [
+        { label: translate('none'), value: '' },
+        ...sortBy(languageProfiles, 'name').map(profile => ({
+          label: profile.isBuiltIn
+            ? `${profile.name} (${translate('quality_profiles.built_in')})`
+            : profile.name,
+          value: profile.key
+        }))
+      ];
+    }
+
     return (
       <Modal contentLabel={header} onRequestClose={this.props.onClose}>
         <form id="create-profile-form" onSubmit={this.handleFormSubmit}>
@@ -152,6 +189,22 @@ export default class CreateProfileForm extends React.PureComponent<Props, State>
                   value={selectedLanguage}
                 />
               </div>
+              {selectedLanguage &&
+                profiles.length && (
+                  <div className="modal-field">
+                    <label htmlFor="create-profile-parent">
+                      {translate('quality_profiles.parent')}
+                    </label>
+                    <Select
+                      clearable={true}
+                      id="create-profile-parent"
+                      name="parentKey"
+                      onChange={this.handleParentChange}
+                      options={profiles}
+                      value={this.state.parent || ''}
+                    />
+                  </div>
+                )}
               {importers.map(importer => (
                 <div
                   className="modal-field spacer-bottom js-importer"
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx
index 5e95dd60e44..8258c8fdab5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/PageHeader.tsx
@@ -32,6 +32,7 @@ interface Props {
   actions: Actions;
   languages: Array<{ key: string; name: string }>;
   organization: string | null;
+  profiles: Profile[];
   router: Pick<Router, 'push'>;
   updateProfiles: () => Promise<void>;
 }
@@ -121,6 +122,7 @@ class PageHeader extends React.PureComponent<Props, State> {
             onClose={this.closeCreateForm}
             onCreate={this.handleCreate}
             organization={this.props.organization}
+            profiles={this.props.profiles}
           />
         )}
       </header>