SONAR-11614 Make display name optional during project creation

5 files changed, 23 insertions, 21 deletions

diff --git a/server/sonar-web/src/main/js/apps/create/components/ProjectNameInput.tsx b/server/sonar-web/src/main/js/apps/create/components/ProjectNameInput.tsx
index e37e7e8dfc5..8ad6e99771d 100644
--- a/server/sonar-web/src/main/js/apps/create/components/ProjectNameInput.tsx
+++ b/server/sonar-web/src/main/js/apps/create/components/ProjectNameInput.tsx
@@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n';
 
 interface Props {
   className?: string;
-  initialValue?: string;
+  value?: string;
   onChange: (value: string | undefined) => void;
 }
 
@@ -32,23 +32,22 @@ interface State {
   editing: boolean;
   error?: string;
   touched: boolean;
-  value: string;
 }
 
 export default class ProjectNameInput extends React.PureComponent<Props, State> {
-  state: State = { error: undefined, editing: false, touched: false, value: '' };
+  state: State = { error: undefined, editing: false, touched: false };
 
   componentDidMount() {
-    if (this.props.initialValue) {
-      const error = this.validateName(this.props.initialValue);
-      this.setState({ error, touched: Boolean(error), value: this.props.initialValue });
+    if (this.props.value) {
+      const error = this.validateName(this.props.value);
+      this.setState({ error, touched: Boolean(error) });
     }
   }
 
   handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.currentTarget;
     const error = this.validateName(value);
-    this.setState({ error, touched: true, value });
+    this.setState({ error, touched: true });
     this.props.onChange(error === undefined ? value : undefined);
   };
 
@@ -69,12 +68,13 @@ export default class ProjectNameInput extends React.PureComponent<Props, State>
 
   render() {
     const isInvalid = this.state.touched && !this.state.editing && this.state.error !== undefined;
-    const isValid = this.state.touched && this.state.error === undefined && this.state.value !== '';
+    const isValid = this.state.touched && this.state.error === undefined && this.props.value !== '';
     return (
       <ValidationInput
         className={this.props.className}
         description={translate('onboarding.create_project.display_name.description')}
         error={this.state.error}
+        help={translate('onboarding.create_project.display_name.help')}
         id="project-name"
         isInvalid={isInvalid}
         isValid={isValid}
@@ -91,9 +91,8 @@ export default class ProjectNameInput extends React.PureComponent<Props, State>
           onBlur={this.handleBlur}
           onChange={this.handleChange}
           onFocus={this.handleFocus}
-          required={true}
           type="text"
-          value={this.state.value}
+          value={this.props.value || ''}
         />
       </ValidationInput>
     );
diff --git a/server/sonar-web/src/main/js/apps/create/components/__tests__/ProjectNameInput-test.tsx b/server/sonar-web/src/main/js/apps/create/components/__tests__/ProjectNameInput-test.tsx
index b1c6b1e26fc..4c4ab531c08 100644
--- a/server/sonar-web/src/main/js/apps/create/components/__tests__/ProjectNameInput-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/components/__tests__/ProjectNameInput-test.tsx
@@ -22,7 +22,7 @@ import { shallow } from 'enzyme';
 import ProjectNameInput from '../ProjectNameInput';
 
 it('should render correctly', () => {
-  const wrapper = shallow(<ProjectNameInput initialValue="Project Name" onChange={jest.fn()} />);
+  const wrapper = shallow(<ProjectNameInput onChange={jest.fn()} value="Project Name" />);
   expect(wrapper).toMatchSnapshot();
   wrapper.setState({ touched: true });
   expect(wrapper.find('ValidationInput').prop('isValid')).toMatchSnapshot();
@@ -30,7 +30,7 @@ it('should render correctly', () => {
 
 it('should have an error when name is too long', () => {
   expect(
-    shallow(<ProjectNameInput initialValue={'x'.repeat(501)} onChange={jest.fn()} />)
+    shallow(<ProjectNameInput onChange={jest.fn()} value={'x'.repeat(501)} />)
       .find('ValidationInput')
       .prop('isInvalid')
   ).toBe(true);
diff --git a/server/sonar-web/src/main/js/apps/create/components/__tests__/__snapshots__/ProjectNameInput-test.tsx.snap b/server/sonar-web/src/main/js/apps/create/components/__tests__/__snapshots__/ProjectNameInput-test.tsx.snap
index 41b7f890f51..d3eeb71a291 100644
--- a/server/sonar-web/src/main/js/apps/create/components/__tests__/__snapshots__/ProjectNameInput-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/create/components/__tests__/__snapshots__/ProjectNameInput-test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`should render correctly 1`] = `
 <ValidationInput
   description="onboarding.create_project.display_name.description"
+  help="onboarding.create_project.display_name.help"
   id="project-name"
   isInvalid={false}
   isValid={false}
@@ -17,7 +18,6 @@ exports[`should render correctly 1`] = `
     onBlur={[Function]}
     onChange={[Function]}
     onFocus={[Function]}
-    required={true}
     type="text"
     value="Project Name"
   />
diff --git a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
index a09f2a4b548..c4e9b3426a1 100644
--- a/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/ManualProjectCreate.tsx
@@ -41,13 +41,14 @@ interface Props {
 
 interface State {
   projectName?: string;
+  projectNameChanged: boolean;
   projectKey?: string;
   selectedOrganization?: T.Organization;
   selectedVisibility?: T.Visibility;
   submitting: boolean;
 }
 
-type ValidState = State & Required<Pick<State, 'projectName' | 'projectKey'>>;
+type ValidState = State & Required<Pick<State, 'projectKey' | 'projectName'>>;
 
 export default class ManualProjectCreate extends React.PureComponent<Props, State> {
   mounted = false;
@@ -55,6 +56,7 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat
   constructor(props: Props) {
     super(props);
     this.state = {
+      projectNameChanged: false,
       selectedOrganization: this.getInitialSelectedOrganization(props),
       submitting: false
     };
@@ -102,7 +104,7 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat
       this.setState({ submitting: true });
       createProject({
         project: state.projectKey,
-        name: state.projectName,
+        name: state.projectName || state.projectKey,
         organization: state.selectedOrganization && state.selectedOrganization.key,
         visibility: this.state.selectedVisibility
       }).then(
@@ -147,12 +149,15 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat
     );
   };
 
-  handleProjectNameChange = (projectName?: string) => {
-    this.setState({ projectName });
+  handleProjectNameChange = (projectName: string | undefined) => {
+    this.setState({ projectName, projectNameChanged: true });
   };
 
   handleProjectKeyChange = (projectKey?: string) => {
-    this.setState({ projectKey });
+    this.setState(state => ({
+      projectKey,
+      projectName: state.projectNameChanged ? state.projectName : projectKey || ''
+    }));
   };
 
   handleVisibilityChange = (selectedVisibility: T.Visibility) => {
@@ -182,8 +187,8 @@ export default class ManualProjectCreate extends React.PureComponent<Props, Stat
             />
             <ProjectNameInput
               className="form-field"
-              initialValue={this.state.projectName}
               onChange={this.handleProjectNameChange}
+              value={this.state.projectName}
             />
             {isSonarCloud() &&
               selectedOrganization && (
diff --git a/server/sonar-web/src/main/js/apps/create/project/__tests__/ManualProjectCreate-test.tsx b/server/sonar-web/src/main/js/apps/create/project/__tests__/ManualProjectCreate-test.tsx
index 6d79f03ea0e..789a2c8a25e 100644
--- a/server/sonar-web/src/main/js/apps/create/project/__tests__/ManualProjectCreate-test.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/__tests__/ManualProjectCreate-test.tsx
@@ -45,8 +45,6 @@ it('should correctly create a public project', async () => {
   wrapper.find('withRouter(OrganizationInput)').prop<Function>('onChange')({ key: 'foo' });
 
   change(wrapper.find('ProjectKeyInput'), 'bar');
-  expect(wrapper.find('SubmitButton').prop('disabled')).toBe(true);
-
   change(wrapper.find('ProjectNameInput'), 'Bar');
   expect(wrapper.find('SubmitButton').prop('disabled')).toBe(false);