replace select plan modal

Author: dantovska

redisinsight/ui/src/components/oauth/oauth-select-plan/OAuthSelectPlan.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { EuiModal, EuiModalBody } from '@elastic/eui'
 import { toNumber, filter, get, find, first } from 'lodash'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
@@ -23,10 +22,10 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
-import { Title } from 'uiSrc/components/base/text/Title'
 import { ColorText, Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
+import { Modal } from 'uiSrc/components/base/display'
 import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription/dto'
 import { OAuthProvider, OAuthProviders } from './constants'
 import styles from './styles.module.scss'
@@ -172,93 +171,95 @@ const OAuthSelectPlan = () => {
   }
 
   return (
-    <EuiModal
+    <Modal
+      open
+      width="fit-content"
       className={styles.container}
-      onClose={handleOnClose}
+      onCancel={handleOnClose}
       data-testid="oauth-select-plan-dialog"
-    >
-      <EuiModalBody className={styles.modalBody}>
-        <section className={styles.content}>
-          <Title size="XL" className={styles.title}>
-            Choose a cloud vendor
-          </Title>
-          <Text className={styles.subTitle}>
-            Select a cloud vendor and region to complete the final step towards
-            your free trial Redis database. No credit card is required.
-          </Text>
-          <section className={styles.providers}>
-            {OAuthProviders.map(({ icon, id, label }) => {
-              const Icon = () => (
-                <RiIcon type={icon} size="original" style={{ width: 44 }} />
-              )
-              return (
-                <div className={styles.provider} key={id}>
-                  {id === providerSelected && (
-                    <div className={cx(styles.providerActiveIcon)}>
-                      <RiIcon type="CheckThinIcon" />
-                    </div>
-                  )}
-                  <EmptyButton
-                    size="large"
-                    icon={Icon}
-                    onClick={() => setProviderSelected(id)}
-                    className={cx(styles.providerBtn, {
-                      [styles.activeProvider]: id === providerSelected,
-                    })}
-                  />
-                  <Text className={styles.providerLabel}>{label}</Text>
-                </div>
-              )
-            })}
-          </section>
-          <section className={styles.region}>
-            <Text className={styles.regionLabel}>Region</Text>
-            <RiSelect
-              loading={loading}
-              disabled={loading || !regionOptions.length}
-              options={regionOptions}
-              value={planIdSelected}
-              data-testid="select-oauth-region"
-              onChange={onChangeRegion}
-              valueRender={({ option, isOptionValue }) => {
-                if (isOptionValue) {
-                  return option.inputDisplay
-                }
-                return option.dropdownDisplay
-              }}
-            />
-            {!regionOptions.length && (
-              <Text
-                className={styles.selectDescription}
-                data-testid="select-region-select-description"
+      title="Choose a cloud vendor"
+      content={
+        <>
+          <section className={styles.content}>
+            <Text className={styles.subTitle}>
+              Select a cloud vendor and region to complete the final step
+              towards your free trial Redis database. No credit card is
+              required.
+            </Text>
+            <section className={styles.providers}>
+              {OAuthProviders.map(({ icon, id, label }) => {
+                const Icon = () => (
+                  <RiIcon type={icon} size="original" style={{ width: 44 }} />
+                )
+                return (
+                  <div className={styles.provider} key={id}>
+                    {id === providerSelected && (
+                      <div className={cx(styles.providerActiveIcon)}>
+                        <RiIcon type="CheckThinIcon" />
+                      </div>
+                    )}
+                    <EmptyButton
+                      size="large"
+                      icon={Icon}
+                      onClick={() => setProviderSelected(id)}
+                      className={cx(styles.providerBtn, {
+                        [styles.activeProvider]: id === providerSelected,
+                      })}
+                    />
+                    <Text className={styles.providerLabel}>{label}</Text>
+                  </div>
+                )
+              })}
+            </section>
+            <section className={styles.region}>
+              <Text className={styles.regionLabel}>Region</Text>
+              <RiSelect
+                loading={loading}
+                disabled={loading || !regionOptions.length}
+                options={regionOptions}
+                value={planIdSelected}
+                data-testid="select-oauth-region"
+                onChange={onChangeRegion}
+                valueRender={({ option, isOptionValue }) => {
+                  if (isOptionValue) {
+                    return option.inputDisplay
+                  }
+                  return option.dropdownDisplay
+                }}
+              />
+              {!regionOptions.length && (
+                <Text
+                  className={styles.selectDescription}
+                  data-testid="select-region-select-description"
+                >
+                  No regions available, try another vendor.
+                </Text>
+              )}
+            </section>
+            <footer className={styles.footer}>
+              <SecondaryButton
+                className={styles.button}
+                onClick={handleOnClose}
+                data-testid="close-oauth-select-plan-dialog"
+                aria-labelledby="close oauth select plan dialog"
+              >
+                Cancel
+              </SecondaryButton>
+              <PrimaryButton
+                disabled={loading || !planIdSelected}
+                loading={loading}
+                className={styles.button}
+                onClick={handleSubmit}
+                data-testid="submit-oauth-select-plan-dialog"
+                aria-labelledby="submit oauth select plan dialog"
               >
-                No regions available, try another vendor.
-              </Text>
-            )}
+                Create database
+              </PrimaryButton>
+            </footer>
           </section>
-          <footer className={styles.footer}>
-            <SecondaryButton
-              className={styles.button}
-              onClick={handleOnClose}
-              data-testid="close-oauth-select-plan-dialog"
-              aria-labelledby="close oauth select plan dialog"
-            >
-              Cancel
-            </SecondaryButton>
-            <PrimaryButton
-              disabled={loading || !planIdSelected}
-              loading={loading}
-              className={styles.button}
-              onClick={handleSubmit}
-              data-testid="submit-oauth-select-plan-dialog"
-              aria-labelledby="submit oauth select plan dialog"
-            >
-              Create database
-            </PrimaryButton>
-          </footer>
-        </section>
-      </EuiModalBody>
-    </EuiModal>
+        </>
+      }
+    />
   )
 }