SONAR-20086 Migrate new code period setup page

4 files changed, 127 insertions, 118 deletions

diff --git a/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx b/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx
index b8d3ad3898c..133e3e0b711 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/GlobalNewCodeDefinitionDescription.tsx
@@ -17,12 +17,11 @@
  * 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, Link } from 'design-system';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import { NewCodeDefinition, NewCodeDefinitionType } from '../../types/new-code-definition';
-import Link from '../common/Link';
-import { Alert } from '../ui/Alert';
 
 interface Props {
   globalNcd: NewCodeDefinition;
@@ -54,7 +53,7 @@ export default function GlobalNewCodeDefinitionDescription({
   return (
     <>
       <div className="sw-flex sw-flex-col sw-gap-2 sw-max-w-[800px]">
-        <span className="sw-font-bold flex-0">{setting}</span>
+        <strong className="sw-font-bold">{setting}</strong>
         {isGlobalNcdCompliant && (
           <>
             <span>{description}</span>
@@ -63,32 +62,34 @@ export default function GlobalNewCodeDefinitionDescription({
         )}
       </div>
       {!isGlobalNcdCompliant && (
-        <Alert variant="warning" className="sw-mt-4 sw-max-w-[800px]">
-          <p className="sw-mb-2 sw-font-bold">
-            {translate('new_code_definition.compliance.warning.title.global')}
-          </p>
-          <p className="sw-mb-2">
-            {canAdmin ? (
-              <FormattedMessage
-                id="new_code_definition.compliance.warning.explanation.admin"
-                defaultMessage={translate(
-                  'new_code_definition.compliance.warning.explanation.admin'
-                )}
-                values={{
-                  link: (
-                    <Link to="/admin/settings?category=new_code_period">
-                      {translate(
-                        'new_code_definition.compliance.warning.explanation.action.admin.link'
-                      )}
-                    </Link>
-                  ),
-                }}
-              />
-            ) : (
-              translate('new_code_definition.compliance.warning.explanation')
-            )}
-          </p>
-        </Alert>
+        <FlagMessage variant="warning" className="sw-mt-4 sw-max-w-[800px]">
+          <span>
+            <p className="sw-mb-2 sw-font-bold">
+              {translate('new_code_definition.compliance.warning.title.global')}
+            </p>
+            <p className="sw-mb-2">
+              {canAdmin ? (
+                <FormattedMessage
+                  id="new_code_definition.compliance.warning.explanation.admin"
+                  defaultMessage={translate(
+                    'new_code_definition.compliance.warning.explanation.admin'
+                  )}
+                  values={{
+                    link: (
+                      <Link to="/admin/settings?category=new_code_period">
+                        {translate(
+                          'new_code_definition.compliance.warning.explanation.action.admin.link'
+                        )}
+                      </Link>
+                    ),
+                  }}
+                />
+              ) : (
+                translate('new_code_definition.compliance.warning.explanation')
+              )}
+            </p>
+          </span>
+        </FlagMessage>
       )}
     </>
   );
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx
index a3b52e9f642..126ae94e93c 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionDaysOption.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { FlagErrorIcon, InputField, Note, SelectionCard } from 'design-system';
 import * as React from 'react';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 import {
@@ -24,9 +25,6 @@ import {
   NUMBER_OF_DAYS_MIN_VALUE,
 } from '../../helpers/new-code-definition';
 import { NewCodeDefinitionType } from '../../types/new-code-definition';
-import RadioCard from '../controls/RadioCard';
-import ValidationInput, { ValidationInputErrorPlacement } from '../controls/ValidationInput';
-import MandatoryFieldsExplanation from '../ui/MandatoryFieldsExplanation';
 
 export interface Props {
   className?: string;
@@ -43,8 +41,7 @@ export default function NewCodeDefinitionDaysOption(props: Props) {
   const { className, days, disabled, isChanged, isValid, onChangeDays, onSelect, selected } = props;
 
   return (
-    <RadioCard
-      noRadio
+    <SelectionCard
       className={className}
       disabled={disabled}
       onClick={() => onSelect(NewCodeDefinitionType.NumberOfDays)}
@@ -53,36 +50,36 @@ export default function NewCodeDefinitionDaysOption(props: Props) {
     >
       <>
         <div>
-          <p className="sw-mb-3">{translate('new_code_definition.number_days.description')}</p>
-          <p className="sw-mb-4">{translate('new_code_definition.number_days.usecase')}</p>
+          <p className="sw-mb-2">{translate('new_code_definition.number_days.description')}</p>
+          <p>{translate('new_code_definition.number_days.usecase')}</p>
         </div>
         {selected && (
-          <>
-            <MandatoryFieldsExplanation />
-
-            <ValidationInput
-              labelHtmlFor="baseline_number_of_days"
-              isInvalid={!isValid}
-              isValid={isChanged && isValid}
-              errorPlacement={ValidationInputErrorPlacement.Bottom}
-              error={translateWithParameters(
+          <div className="sw-mt-4">
+            <label>
+              {translate('new_code_definition.number_days.specify_days')}
+              <div className="sw-my-2 sw-flex sw-items-center">
+                <InputField
+                  id="baseline_number_of_days"
+                  type="number"
+                  required
+                  isInvalid={!isValid}
+                  isValid={isChanged && isValid}
+                  onChange={(e) => onChangeDays(e.currentTarget.value)}
+                  value={days}
+                />
+                {!isValid && <FlagErrorIcon className="sw-ml-2" />}
+              </div>
+            </label>
+            <Note>
+              {translateWithParameters(
                 'new_code_definition.number_days.invalid',
                 NUMBER_OF_DAYS_MIN_VALUE,
                 NUMBER_OF_DAYS_MAX_VALUE
               )}
-              label={translate('new_code_definition.number_days.specify_days')}
-              required
-            >
-              <input
-                id="baseline_number_of_days"
-                onChange={(e) => onChangeDays(e.currentTarget.value)}
-                type="text"
-                value={days}
-              />
-            </ValidationInput>
-          </>
+            </Note>
+          </div>
         )}
       </>
-    </RadioCard>
+    </SelectionCard>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx
index 60141f592e7..28aed689648 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionPreviousVersionOption.tsx
@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import { SelectionCard } from 'design-system';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { NewCodeDefinitionType } from '../../types/new-code-definition';
-import RadioCard from '../controls/RadioCard';
 
 interface Props {
   disabled?: boolean;
@@ -36,8 +36,7 @@ export default function NewCodeDefinitionPreviousVersionOption({
   selected,
 }: Props) {
   return (
-    <RadioCard
-      noRadio
+    <SelectionCard
       disabled={disabled}
       onClick={() => onSelect(NewCodeDefinitionType.PreviousVersion)}
       selected={selected}
@@ -47,9 +46,9 @@ export default function NewCodeDefinitionPreviousVersionOption({
       }
     >
       <div>
-        <p>{translate('new_code_definition.previous_version.description')}</p>
-        <p className="sw-mt-3">{translate('new_code_definition.previous_version.usecase')}</p>
+        <p className="sw-mb-2">{translate('new_code_definition.previous_version.description')}</p>
+        <p>{translate('new_code_definition.previous_version.usecase')}</p>
       </div>
-    </RadioCard>
+    </SelectionCard>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
index 2f4660713f6..47dd557065b 100644
--- a/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
+++ b/server/sonar-web/src/main/js/components/new-code-definition/NewCodeDefinitionSelector.tsx
@@ -17,7 +17,14 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { RadioButton } from 'design-system/lib';
+import styled from '@emotion/styled';
+import {
+  FlagMessage,
+  PageContentFontWrapper,
+  RadioButton,
+  SelectionCard,
+  themeColor,
+} from 'design-system';
 import { noop } from 'lodash';
 import * as React from 'react';
 import { getNewCodePeriod } from '../../api/newCodePeriod';
@@ -31,9 +38,7 @@ import {
   NewCodeDefinitionType,
   NewCodeDefinitiondWithCompliance,
 } from '../../types/new-code-definition';
-import RadioCard from '../controls/RadioCard';
 import Tooltip from '../controls/Tooltip';
-import { Alert } from '../ui/Alert';
 import GlobalNewCodeDefinitionDescription from './GlobalNewCodeDefinitionDescription';
 import NewCodeDefinitionDaysOption from './NewCodeDefinitionDaysOption';
 import NewCodeDefinitionPreviousVersionOption from './NewCodeDefinitionPreviousVersionOption';
@@ -99,15 +104,16 @@ export default function NewCodeDefinitionSelector(props: Props) {
   }, [selectedNcdType, days, isCompliant, onNcdChanged]);
 
   return (
-    <>
+    <PageContentFontWrapper>
       <p className="sw-mt-10">
-        <strong>{translate('new_code_definition.question')}</strong>
+        <strong className="sw-body-md-highlight">
+          {translate('new_code_definition.question')}
+        </strong>
       </p>
-      <div className="big-spacer-top spacer-bottom" role="radiogroup">
+      <div className="sw-mt-7 sw-ml-1" role="radiogroup">
         <RadioButton
           aria-label={translate('new_code_definition.global_setting')}
           checked={selectedNcdType === NewCodeDefinitionType.Inherited}
-          className="big-spacer-bottom"
           disabled={!isGlobalNcdCompliant}
           onCheck={() => handleNcdChanged(NewCodeDefinitionType.Inherited)}
           value="general"
@@ -119,11 +125,16 @@ export default function NewCodeDefinitionSelector(props: Props) {
                 : translate('new_code_definition.compliance.warning.title.global')
             }
           >
-            <span>{translate('new_code_definition.global_setting')}</span>
+            <span className="sw-font-semibold">
+              {translate('new_code_definition.global_setting')}
+            </span>
           </Tooltip>
         </RadioButton>
 
-        <div className="sw-ml-4">
+        <StyledGlobalSettingWrapper
+          className="sw-mt-4 sw-ml-6"
+          selected={selectedNcdType === NewCodeDefinitionType.Inherited}
+        >
           {globalNcd && (
             <GlobalNewCodeDefinitionDescription
               globalNcd={globalNcd}
@@ -131,12 +142,12 @@ export default function NewCodeDefinitionSelector(props: Props) {
               canAdmin={canAdmin}
             />
           )}
-        </div>
+        </StyledGlobalSettingWrapper>
 
         <RadioButton
           aria-label={translate('new_code_definition.specific_setting')}
           checked={Boolean(selectedNcdType && selectedNcdType !== NewCodeDefinitionType.Inherited)}
-          className="huge-spacer-top"
+          className="sw-mt-12 sw-font-semibold"
           onCheck={() => handleNcdChanged(NewCodeDefinitionType.PreviousVersion)}
           value="specific"
         >
@@ -144,51 +155,52 @@ export default function NewCodeDefinitionSelector(props: Props) {
         </RadioButton>
       </div>
 
-      <div className="big-spacer-left big-spacer-right project-baseline-setting">
-        <div className="display-flex-row big-spacer-bottom" role="radiogroup">
-          <NewCodeDefinitionPreviousVersionOption
-            disabled={Boolean(
-              !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
-            )}
-            onSelect={handleNcdChanged}
-            selected={selectedNcdType === NewCodeDefinitionType.PreviousVersion}
-          />
-
-          <NewCodeDefinitionDaysOption
-            days={days}
-            disabled={Boolean(
-              !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
-            )}
-            isChanged={isChanged}
-            isValid={isCompliant}
-            onChangeDays={setDays}
-            onSelect={handleNcdChanged}
-            selected={selectedNcdType === NewCodeDefinitionType.NumberOfDays}
-          />
-
-          <RadioCard
-            noRadio
-            disabled={Boolean(
-              !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
+      <div className="sw-flex sw-flex-col sw-my-4 sw-mr-4 sw-gap-4" role="radiogroup">
+        <NewCodeDefinitionPreviousVersionOption
+          disabled={Boolean(
+            !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
+          )}
+          onSelect={handleNcdChanged}
+          selected={selectedNcdType === NewCodeDefinitionType.PreviousVersion}
+        />
+
+        <NewCodeDefinitionDaysOption
+          days={days}
+          disabled={Boolean(
+            !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
+          )}
+          isChanged={isChanged}
+          isValid={isCompliant}
+          onChangeDays={setDays}
+          onSelect={handleNcdChanged}
+          selected={selectedNcdType === NewCodeDefinitionType.NumberOfDays}
+        />
+
+        <SelectionCard
+          disabled={Boolean(
+            !selectedNcdType || selectedNcdType === NewCodeDefinitionType.Inherited
+          )}
+          onClick={() => handleNcdChanged(NewCodeDefinitionType.ReferenceBranch)}
+          selected={selectedNcdType === NewCodeDefinitionType.ReferenceBranch}
+          title={translate('new_code_definition.reference_branch')}
+        >
+          <div>
+            <p className="sw-mb-2">
+              {translate('new_code_definition.reference_branch.description')}
+            </p>
+            <p>{translate('new_code_definition.reference_branch.usecase')}</p>
+            {selectedNcdType === NewCodeDefinitionType.ReferenceBranch && (
+              <FlagMessage className="sw-mt-4" variant="info">
+                {translate('new_code_definition.reference_branch.notice')}
+              </FlagMessage>
             )}
-            onClick={() => handleNcdChanged(NewCodeDefinitionType.ReferenceBranch)}
-            selected={selectedNcdType === NewCodeDefinitionType.ReferenceBranch}
-            title={translate('new_code_definition.reference_branch')}
-          >
-            <div>
-              <p className="sw-mb-3">
-                {translate('new_code_definition.reference_branch.description')}
-              </p>
-              <p className="sw-mb-4">{translate('new_code_definition.reference_branch.usecase')}</p>
-              {selectedNcdType === NewCodeDefinitionType.ReferenceBranch && (
-                <Alert variant="info">
-                  {translate('new_code_definition.reference_branch.notice')}
-                </Alert>
-              )}
-            </div>
-          </RadioCard>
-        </div>
+          </div>
+        </SelectionCard>
       </div>
-    </>
+    </PageContentFontWrapper>
   );
 }
+
+const StyledGlobalSettingWrapper = styled.div<{ selected: boolean }>`
+  color: ${({ selected }) => (selected ? 'inherit' : themeColor('selectionCardDisabledText'))};
+`;