SONAR-20366 Migrate Select Projects Modal

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
index 164309846262d34ed9d6d000039c692ad1a15e48..d6d85c4747dfbb6af7a8e09b1acac6ab2cd2a4a2 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ChangeProjectsForm.tsx
@@ -17,16 +17,15 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { Modal, Note } from 'design-system';
 import { find, without } from 'lodash';
 import * as React from 'react';
 import {
+  ProfileProject,
   associateProject,
   dissociateProject,
   getProfileProjects,
-  ProfileProject,
 } from '../../../api/quality-profiles';
-import { ResetButtonLink } from '../../../components/controls/buttons';
-import Modal from '../../../components/controls/Modal';
 import SelectList, {
   SelectListFilter,
   SelectListSearchParams,
@@ -122,17 +121,17 @@ export default class ChangeProjectsForm extends React.PureComponent<Props, State
   renderElement = (key: string): React.ReactNode => {
     const project = find(this.state.projects, { key });
     return (
-      <div className="select-list-list-item">
+      <>
         {project === undefined ? (
           key
         ) : (
           <>
             {project.name}
             <br />
-            <span className="note">{project.key}</span>
+            <Note>{project.key}</Note>
           </>
         )}
-      </div>
+      </>
     );
   };
 
@@ -140,37 +139,34 @@ export default class ChangeProjectsForm extends React.PureComponent<Props, State
     const header = translate('projects');
 
     return (
-      <Modal contentLabel={header} onRequestClose={this.props.onClose}>
-        <div className="modal-head">
-          <h2>{header}</h2>
-        </div>
-
-        <div className="modal-body modal-container" id="profile-projects">
-          <SelectList
-            allowBulkSelection
-            elements={this.state.projects.map((project) => project.key)}
-            elementsTotalCount={this.state.projectsTotalCount}
-            labelAll={translate('quality_gates.projects.all')}
-            labelSelected={translate('quality_gates.projects.with')}
-            labelUnselected={translate('quality_gates.projects.without')}
-            needToReload={
-              this.state.needToReload &&
-              this.state.lastSearchParams &&
-              this.state.lastSearchParams.filter !== SelectListFilter.All
-            }
-            onSearch={this.fetchProjects}
-            onSelect={this.handleSelect}
-            onUnselect={this.handleUnselect}
-            renderElement={this.renderElement}
-            selectedElements={this.state.selectedProjects}
-            withPaging
-          />
-        </div>
-
-        <div className="modal-foot">
-          <ResetButtonLink onClick={this.props.onClose}>{translate('close')}</ResetButtonLink>
-        </div>
-      </Modal>
+      <Modal
+        headerTitle={header}
+        isOverflowVisible
+        onClose={this.props.onClose}
+        body={
+          <div className="sw-mt-1">
+            <SelectList
+              allowBulkSelection
+              elements={this.state.projects.map((project) => project.key)}
+              elementsTotalCount={this.state.projectsTotalCount}
+              labelAll={translate('quality_gates.projects.all')}
+              labelSelected={translate('quality_gates.projects.with')}
+              labelUnselected={translate('quality_gates.projects.without')}
+              needToReload={
+                this.state.needToReload &&
+                this.state.lastSearchParams &&
+                this.state.lastSearchParams.filter !== SelectListFilter.All
+              }
+              onSearch={this.fetchProjects}
+              onSelect={this.handleSelect}
+              onUnselect={this.handleUnselect}
+              renderElement={this.renderElement}
+              selectedElements={this.state.selectedProjects}
+              withPaging
+            />
+          </div>
+        }
+      />
     );
   }
 }