]> source.dussan.org Git - sonarqube.git/commitdiff
SONAR-20337 - Quality gate project list adopts new UI
authorKevin Silva <kevin.silva@sonarsource.com>
Mon, 11 Sep 2023 16:39:19 +0000 (17:39 +0100)
committersonartech <sonartech@sonarsource.com>
Tue, 19 Sep 2023 20:02:46 +0000 (20:02 +0000)
server/sonar-web/src/main/js/apps/quality-gates/components/DetailsContent.tsx
server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx

index 688ceab7bcecce6f49fad516d379b8ff782dace3..24617cc38504818a49d8fc55663a211ff3fd17cc 100644 (file)
@@ -17,9 +17,9 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { FlagMessage, HelperHintIcon, SubTitle } from 'design-system';
 import * as React from 'react';
-import HelpTooltip from '../../../components/controls/HelpTooltip';
-import { Alert } from '../../../components/ui/Alert';
+import DocumentationTooltip from '../../../components/common/DocumentationTooltip';
 import { translate } from '../../../helpers/l10n';
 import { Condition, QualityGate } from '../../../types/types';
 import Conditions from './Conditions';
@@ -40,12 +40,12 @@ export function DetailsContent(props: DetailsContentProps) {
   const actions = qualityGate.actions || {};
 
   return (
-    <div className="layout-page-main-inner">
+    <div>
       {isDefault &&
         (qualityGate.conditions === undefined || qualityGate.conditions.length === 0) && (
-          <Alert className="big-spacer-bottom" variant="warning">
+          <FlagMessage className="sw-mb-4" variant="warning">
             {translate('quality_gates.is_default_no_conditions')}
-          </Alert>
+          </FlagMessage>
         )}
 
       <Conditions
@@ -56,21 +56,20 @@ export function DetailsContent(props: DetailsContentProps) {
         updatedConditionId={updatedConditionId}
       />
 
-      <div className="display-flex-row huge-spacer-top">
-        <div className="quality-gate-section width-50 big-padded-right" id="quality-gate-projects">
-          <header className="display-flex-center spacer-bottom">
-            <h3>{translate('quality_gates.projects')}</h3>
-            <HelpTooltip
-              className="spacer-left"
-              overlay={
-                <div className="big-padded-top big-padded-bottom">
-                  {translate('quality_gates.projects.help')}
-                </div>
-              }
-            />
-          </header>
+      <div>
+        <div className="sw-flex sw-flex-col">
+          <SubTitle as="h3" className="sw-body-md-highlight">
+            {translate('quality_gates.projects')}
+            <DocumentationTooltip
+              className="sw-ml-2"
+              content={translate('quality_gates.projects.help')}
+            >
+              <HelperHintIcon />
+            </DocumentationTooltip>
+          </SubTitle>
+
           {isDefault ? (
-            translate('quality_gates.projects_for_default')
+            <p className="sw-body-sm sw-mb-2">{translate('quality_gates.projects_for_default')}</p>
           ) : (
             <Projects
               canEdit={actions.associateProjects}
@@ -80,8 +79,9 @@ export function DetailsContent(props: DetailsContentProps) {
             />
           )}
         </div>
+
         {actions.delegate && (
-          <div className="width-50 big-padded-left">
+          <div className="sw-mt-10">
             <QualityGatePermissions qualityGate={qualityGate} />
           </div>
         )}
index 1aab7e8dc28bdf312f597f3b46123aaed7e80744..92da185ae618cea0ea485f489477dc6a2948288e 100644 (file)
@@ -62,7 +62,7 @@ export default function List({ qualityGates, currentQualityGate }: Props) {
               redirectQualityGate(qualityGate.name);
             }}
           >
-            <div className="sw-flex sw-flex-col">
+            <div className="sw-flex sw-flex-col sw-min-w-0">
               <BareButton
                 aria-current={currentQualityGate === qualityGate.name && 'page'}
                 title={`${qualityGate.name}${isDefaultTitle}${isBuiltInTitle}`}