SONAR-17226 Display authentication-related settings in a more intuitive way

13 files changed, 52 insertions, 186 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/AdditionalCategories.tsx b/server/sonar-web/src/main/js/apps/settings/components/AdditionalCategories.tsx
index 7b3c78f583a..1737728d02c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/AdditionalCategories.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/AdditionalCategories.tsx
@@ -82,7 +82,7 @@ export const ADDITIONAL_CATEGORIES: AdditionalCategory[] = [
     renderComponent: getAlmIntegrationComponent,
     availableGlobally: true,
     availableForProject: false,
-    displayTab: false
+    displayTab: true
   },
   {
     key: PULL_REQUEST_DECORATION_BINDING_CATEGORY,
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
index 127c0c1ca5b..bb471ee144e 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegration.tsx
@@ -34,13 +34,11 @@ import {
   AlmSettingsBindingStatusType
 } from '../../../../types/alm-settings';
 import { AppState } from '../../../../types/appstate';
-import { ExtendedSettingDefinition } from '../../../../types/settings';
 import { Dict } from '../../../../types/types';
 import AlmIntegrationRenderer from './AlmIntegrationRenderer';
 
 interface Props {
   appState: AppState;
-  definitions: ExtendedSettingDefinition[];
   location: Location;
   router: Router;
 }
@@ -212,8 +210,7 @@ export class AlmIntegration extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      appState: { branchesEnabled, multipleAlmEnabled },
-      definitions: settingsDefinitions
+      appState: { branchesEnabled, multipleAlmEnabled }
     } = this.props;
     const {
       currentAlmTab,
@@ -242,7 +239,6 @@ export class AlmIntegration extends React.PureComponent<Props, State> {
         loadingAlmDefinitions={loadingAlmDefinitions}
         loadingProjectCount={loadingProjectCount}
         projectCount={projectCount}
-        settingsDefinitions={settingsDefinitions}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx
index 414d9608583..769a2b2d79e 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmIntegrationRenderer.tsx
@@ -26,7 +26,6 @@ import {
   AlmSettingsBindingDefinitions,
   AlmSettingsBindingStatus
 } from '../../../../types/alm-settings';
-import { ExtendedSettingDefinition } from '../../../../types/settings';
 import { Dict } from '../../../../types/types';
 import { AlmTabs } from './AlmIntegration';
 import AlmTab from './AlmTab';
@@ -48,7 +47,6 @@ export interface AlmIntegrationRendererProps {
   onSelectAlmTab: (alm: AlmTabs) => void;
   onUpdateDefinitions: () => void;
   projectCount?: number;
-  settingsDefinitions: ExtendedSettingDefinition[];
 }
 
 const tabs = [
@@ -120,8 +118,7 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
     loadingProjectCount,
     branchesEnabled,
     multipleAlmEnabled,
-    projectCount,
-    settingsDefinitions
+    projectCount
   } = props;
 
   const bindingDefinitions = {
@@ -154,7 +151,6 @@ export default function AlmIntegrationRenderer(props: AlmIntegrationRendererProp
         onCheck={props.onCheckConfiguration}
         onDelete={props.onDelete}
         onUpdateDefinitions={props.onUpdateDefinitions}
-        settingsDefinitions={settingsDefinitions}
       />
 
       {definitionKeyForDeletion && (
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx
index a9b33a1d995..95c05874c1b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTab.tsx
@@ -23,7 +23,6 @@ import {
   AlmBindingDefinitionBase,
   AlmSettingsBindingStatus
 } from '../../../../types/alm-settings';
-import { ExtendedSettingDefinition } from '../../../../types/settings';
 import { Dict } from '../../../../types/types';
 import { AlmTabs } from './AlmIntegration';
 import AlmTabRenderer from './AlmTabRenderer';
@@ -39,7 +38,6 @@ interface Props {
   onCheck: (definitionKey: string) => void;
   onDelete: (definitionKey: string) => void;
   onUpdateDefinitions: () => void;
-  settingsDefinitions: ExtendedSettingDefinition[];
 }
 
 interface State {
@@ -93,8 +91,7 @@ export default class AlmTab extends React.PureComponent<Props, State> {
       definitionStatus,
       loadingAlmDefinitions,
       loadingProjectCount,
-      multipleAlmEnabled,
-      settingsDefinitions
+      multipleAlmEnabled
     } = this.props;
     const { editDefinition, editedDefinition } = this.state;
 
@@ -115,7 +112,6 @@ export default class AlmTab extends React.PureComponent<Props, State> {
         onEdit={this.handleEdit}
         onCancel={this.handleCancel}
         afterSubmit={this.handleAfterSubmit}
-        settingsDefinitions={settingsDefinitions}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx
index 12482862a20..0ed12fa6221 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmTabRenderer.tsx
@@ -18,7 +18,10 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
 import { Button } from '../../../../components/controls/buttons';
+import { Alert } from '../../../../components/ui/Alert';
 import DeferredSpinner from '../../../../components/ui/DeferredSpinner';
 import { translate } from '../../../../helpers/l10n';
 import {
@@ -28,10 +31,7 @@ import {
   AlmSettingsBindingStatus,
   isBitbucketCloudBindingDefinition
 } from '../../../../types/alm-settings';
-import { ExtendedSettingDefinition } from '../../../../types/settings';
 import { Dict } from '../../../../types/types';
-import { ALM_INTEGRATION_CATEGORY } from '../../constants';
-import CategoryDefinitionsList from '../CategoryDefinitionsList';
 import AlmBindingDefinitionBox from './AlmBindingDefinitionBox';
 import AlmBindingDefinitionForm from './AlmBindingDefinitionForm';
 import { AlmTabs } from './AlmIntegration';
@@ -53,9 +53,14 @@ export interface AlmTabRendererProps {
   onDelete: (definitionKey: string) => void;
   onEdit: (definitionKey: string) => void;
   afterSubmit: (config: AlmBindingDefinitionBase) => void;
-  settingsDefinitions: ExtendedSettingDefinition[];
 }
 
+const AUTHENTICATION_AVAILABLE_PLATFORMS = [
+  AlmKeys.GitHub,
+  AlmKeys.GitLab,
+  AlmKeys.BitbucketServer
+];
+
 export default function AlmTabRenderer(props: AlmTabRendererProps) {
   const {
     almTab,
@@ -66,8 +71,7 @@ export default function AlmTabRenderer(props: AlmTabRendererProps) {
     editedDefinition,
     loadingAlmDefinitions,
     loadingProjectCount,
-    multipleAlmEnabled,
-    settingsDefinitions
+    multipleAlmEnabled
   } = props;
 
   const preventCreation = loadingProjectCount || (!multipleAlmEnabled && definitions.length > 0);
@@ -115,16 +119,24 @@ export default function AlmTabRenderer(props: AlmTabRendererProps) {
           )}
         </DeferredSpinner>
       </div>
-
-      <div className="huge-spacer-top huge-spacer-bottom bordered-top" />
-
-      <div className="big-padded">
-        <CategoryDefinitionsList
-          category={ALM_INTEGRATION_CATEGORY}
-          definitions={settingsDefinitions}
-          subCategory={almTab}
-        />
-      </div>
+      {AUTHENTICATION_AVAILABLE_PLATFORMS.includes(almTab) && (
+        <Alert variant="info" className="spacer">
+          <FormattedMessage
+            id="settings.almintegration.tabs.authentication-moved"
+            defaultMessage={translate('settings.almintegration.tabs.authentication_moved')}
+            values={{
+              link: (
+                <Link
+                  to={{
+                    pathname: '/admin/settings?category=authentication'
+                  }}>
+                  {translate('property.category.authentication')}
+                </Link>
+              )
+            }}
+          />
+        </Alert>
+      )}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx
index aa701feea92..4b3fad35c24 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegration-test.tsx
@@ -190,7 +190,6 @@ function shallowRender(props: Partial<AlmIntegration['props']> = {}) {
   return shallow<AlmIntegration>(
     <AlmIntegration
       appState={mockAppState({ branchesEnabled: true })}
-      definitions={[]}
       location={mockLocation()}
       router={mockRouter()}
       {...props}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx
index bb363871be3..150027f8e3c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmIntegrationRenderer-test.tsx
@@ -51,7 +51,6 @@ function shallowRender(props: Partial<AlmIntegrationRendererProps> = {}) {
       onDelete={jest.fn()}
       onSelectAlmTab={jest.fn()}
       onUpdateDefinitions={jest.fn()}
-      settingsDefinitions={[]}
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx
index 260132fa317..7fbd2c73f0c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTab-test.tsx
@@ -86,7 +86,6 @@ function shallowRender(props: Partial<AlmTab['props']> = {}) {
       onCheck={jest.fn()}
       onDelete={jest.fn()}
       onUpdateDefinitions={jest.fn()}
-      settingsDefinitions={[]}
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx
index 6b55ee46e7a..76bb366affb 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/AlmTabRenderer-test.tsx
@@ -104,7 +104,6 @@ function shallowRender(props: Partial<AlmTabRendererProps> = {}) {
       onDelete={jest.fn()}
       onEdit={jest.fn()}
       afterSubmit={jest.fn()}
-      settingsDefinitions={[]}
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap
index 561988375f7..193dfaf0360 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegration-test.tsx.snap
@@ -23,6 +23,5 @@ exports[`should render correctly 1`] = `
   onDelete={[Function]}
   onSelectAlmTab={[Function]}
   onUpdateDefinitions={[Function]}
-  settingsDefinitions={Array []}
 />
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap
index 8a6aa95355a..dbbe5ea825c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmIntegrationRenderer-test.tsx.snap
@@ -83,7 +83,6 @@ exports[`should render correctly: azure 1`] = `
     onCheck={[MockFunction]}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
-    settingsDefinitions={Array []}
   />
 </Fragment>
 `;
@@ -171,7 +170,6 @@ exports[`should render correctly: bitbucket 1`] = `
     onCheck={[MockFunction]}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
-    settingsDefinitions={Array []}
   />
 </Fragment>
 `;
@@ -259,7 +257,6 @@ exports[`should render correctly: default 1`] = `
     onCheck={[MockFunction]}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
-    settingsDefinitions={Array []}
   />
 </Fragment>
 `;
@@ -347,7 +344,6 @@ exports[`should render correctly: delete modal 1`] = `
     onCheck={[MockFunction]}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
-    settingsDefinitions={Array []}
   />
   <DeleteModal
     id="keyToDelete"
@@ -440,7 +436,6 @@ exports[`should render correctly: gitlab 1`] = `
     onCheck={[MockFunction]}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
-    settingsDefinitions={Array []}
   />
 </Fragment>
 `;
@@ -528,7 +523,6 @@ exports[`should render correctly: loading 1`] = `
     onCheck={[MockFunction]}
     onDelete={[MockFunction]}
     onUpdateDefinitions={[MockFunction]}
-    settingsDefinitions={Array []}
   />
 </Fragment>
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap
index 38897cfa773..ae9342d08d0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTab-test.tsx.snap
@@ -22,6 +22,5 @@ exports[`should render correctly 1`] = `
   onCreate={[Function]}
   onDelete={[MockFunction]}
   onEdit={[Function]}
-  settingsDefinitions={Array []}
 />
 `;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap
index b987913a570..4a8a83d0009 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/__tests__/__snapshots__/AlmTabRenderer-test.tsx.snap
@@ -43,18 +43,6 @@ exports[`should render correctly for multi-ALM binding: editing a definition 1`]
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -101,18 +89,6 @@ exports[`should render correctly for multi-ALM binding: loaded 1`] = `
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -159,18 +135,6 @@ exports[`should render correctly for multi-ALM binding: loading ALM definitions
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -217,18 +181,6 @@ exports[`should render correctly for multi-ALM binding: loading project count 1`
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -275,18 +227,6 @@ exports[`should render correctly for single-ALM binding 1`] = `
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -333,18 +273,6 @@ exports[`should render correctly for single-ALM binding 2`] = `
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -391,18 +319,6 @@ exports[`should render correctly for single-ALM binding 3`] = `
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -439,18 +355,6 @@ exports[`should render correctly with validation: create a first 1`] = `
       </div>
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -501,18 +405,6 @@ exports[`should render correctly with validation: create a second 1`] = `
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -563,18 +455,6 @@ exports[`should render correctly with validation: default 1`] = `
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -611,18 +491,6 @@ exports[`should render correctly with validation: empty 1`] = `
       </div>
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
-  >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="azure"
-    />
-  </div>
 </div>
 `;
 
@@ -671,17 +539,27 @@ exports[`should render correctly with validation: pass the correct key for bitbu
       />
     </DeferredSpinner>
   </div>
-  <div
-    className="huge-spacer-top huge-spacer-bottom bordered-top"
-  />
-  <div
-    className="big-padded"
+  <Alert
+    className="spacer"
+    variant="info"
   >
-    <CategoryDefinitionsList
-      category="almintegration"
-      definitions={Array []}
-      subCategory="bitbucket"
+    <FormattedMessage
+      defaultMessage="settings.almintegration.tabs.authentication_moved"
+      id="settings.almintegration.tabs.authentication-moved"
+      values={
+        Object {
+          "link": <Link
+            to={
+              Object {
+                "pathname": "/admin/settings?category=authentication",
+              }
+            }
+          >
+            property.category.authentication
+          </Link>,
+        }
+      }
     />
-  </div>
+  </Alert>
 </div>
 `;