SONARCLOUD-176 Allow upgrading to paid organization when provisioning projects

* Update UpgradeOrganizationBox component with new cardPlan component
* Display upgrade box only when needed
* Introduce isDefined type guard
* Update repositories selection workflow

3 files changed, 30 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/Modal.tsx b/server/sonar-web/src/main/js/components/controls/Modal.tsx
index d57ba7d4ea1..14d5ea0de7c 100644
--- a/server/sonar-web/src/main/js/components/controls/Modal.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Modal.tsx
@@ -25,7 +25,9 @@ ReactModal.setAppElement('#content');
 
 interface OwnProps {
   medium?: boolean;
+  noBackdrop?: boolean;
   large?: boolean;
+  simple?: true;
 }
 
 type MandatoryProps = Pick<ReactModal.Props, 'contentLabel'>;
@@ -35,9 +37,13 @@ type Props = Partial<ReactModal.Props> & MandatoryProps & OwnProps;
 export default function Modal(props: Props) {
   return (
     <ReactModal
-      className={classNames('modal', { 'modal-medium': props.medium, 'modal-large': props.large })}
+      className={classNames('modal', {
+        'modal-medium': props.medium,
+        'modal-large': props.large,
+        'modal-simple': props.simple
+      })}
       isOpen={true}
-      overlayClassName="modal-overlay"
+      overlayClassName={classNames('modal-overlay', { 'modal-no-backdrop': props.noBackdrop })}
       {...props}
     />
   );
diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index 802be846f8b..529cb1ed269 100644
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -207,13 +207,15 @@ export class TooltipInner extends React.Component<Props, State> {
 
   handleMouseEnter = () => {
     this.mouseEnterTimeout = window.setTimeout(() => {
-      if (this.mounted) {
-        // for some reason even after the `this.mouseEnterTimeout` is cleared, it still triggers
-        // to workaround this issue, check that its value is not `undefined`
-        // (if it's `undefined`, it means the timer has been reset)
-        if (this.props.visible === undefined && this.mouseEnterTimeout !== undefined) {
-          this.setState({ visible: true });
-        }
+      // for some reason even after the `this.mouseEnterTimeout` is cleared, it still triggers
+      // to workaround this issue, check that its value is not `undefined`
+      // (if it's `undefined`, it means the timer has been reset)
+      if (
+        this.mounted &&
+        this.props.visible === undefined &&
+        this.mouseEnterTimeout !== undefined
+      ) {
+        this.setState({ visible: true });
       }
     }, (this.props.mouseEnterDelay || 0) * 1000);
 
@@ -230,10 +232,8 @@ export class TooltipInner extends React.Component<Props, State> {
 
     if (!this.mouseIn) {
       this.mouseLeaveTimeout = window.setTimeout(() => {
-        if (this.mounted) {
-          if (this.props.visible === undefined && !this.mouseIn) {
-            this.setState({ visible: false });
-          }
+        if (this.mounted && this.props.visible === undefined && !this.mouseIn) {
+          this.setState({ visible: false });
         }
       }, (this.props.mouseLeaveDelay || 0) * 1000);
 
@@ -254,7 +254,6 @@ export class TooltipInner extends React.Component<Props, State> {
 
   render() {
     const { classNameSpace = 'tooltip' } = this.props;
-
     return (
       <>
         {React.cloneElement(this.props.children, {
diff --git a/server/sonar-web/src/main/js/components/controls/react-select.css b/server/sonar-web/src/main/js/components/controls/react-select.css
index ac5829d0daf..dae9dbd8cd8 100644
--- a/server/sonar-web/src/main/js/components/controls/react-select.css
+++ b/server/sonar-web/src/main/js/components/controls/react-select.css
@@ -90,6 +90,10 @@
   border-color: var(--blue);
 }
 
+.Select-placeholder {
+  color: var(--secondFontColor);
+}
+
 .Select-placeholder,
 :not(.Select--multi) > .Select-control .Select-value {
   bottom: 0;
@@ -115,6 +119,13 @@
   padding-top: 4px;
 }
 
+.Select-value .outline-badge,
+.Select-option .outline-badge {
+  height: 20px;
+  line-height: 19px;
+  margin-top: 1px;
+}
+
 .Select-option svg,
 .Select-option img,
 .Select-option [class^='icon-'] {