Merge pull request #2523 from RedisInsight/fe/bugfix/RI-4904_set_default_region

#RI-4904 - update default region

Author: mariasergeenko

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

@@ -3,8 +3,9 @@ import { cloneDeep } from 'lodash'
 import { cleanup, fireEvent, mockedStore, render, within } from 'uiSrc/utils/test-utils'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { addFreeDb, oauthCloudPlanSelector, oauthCloudSelector, initialState } from 'uiSrc/slices/oauth/cloud'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
-import { MOCK_NO_TF_REGION, MOCK_REGIONS, MOCK_RS_PREVIEW_REGION } from 'uiSrc/constants/mocks/mock-sso'
+import { MOCK_NO_TF_REGION, MOCK_REGIONS, MOCK_RS_PREVIEW_REGION, MOCK_CUSTOM_REGIONS } from 'uiSrc/constants/mocks/mock-sso'
 import OAuthSelectPlan from './OAuthSelectPlan'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -131,6 +132,15 @@ describe('OAuthSelectPlan', () => {
     expect(tfIconEl).toBeInTheDocument()
   })
 
+  it('if source is not Trigger and Functions region with RS should be selected by default', async () => {
+    const container = render(<OAuthSelectPlan />)
+
+    const { queryByTestId } = within(container.queryByTestId('select-oauth-region') as HTMLElement)
+    const tfIconEl = queryByTestId(/rs-text-/)
+
+    expect(tfIconEl).toBeInTheDocument()
+  })
+
   it('Should display region with RS preview text', async () => {
     (oauthCloudPlanSelector as jest.Mock).mockReturnValue({
       isOpenDialog: true,
@@ -145,6 +155,49 @@ describe('OAuthSelectPlan', () => {
     expect(rsTextEl).toBeInTheDocument()
   })
 
+  it('should be selected first region by default', async () => {
+    (oauthCloudPlanSelector as jest.Mock).mockReturnValue({
+      isOpenDialog: true,
+      data: MOCK_CUSTOM_REGIONS,
+    })
+
+    const container = render(<OAuthSelectPlan />)
+
+    const { queryByTestId } = within(container.queryByTestId('select-oauth-region') as HTMLElement)
+    const selectedEl = queryByTestId('option-custom-1')
+
+    expect(selectedEl).toBeInTheDocument()
+  })
+
+  it('should be selected us-east-2 region by default', async () => {
+    (oauthCloudPlanSelector as jest.Mock).mockReturnValue({
+      isOpenDialog: true,
+      data: [MOCK_NO_TF_REGION, MOCK_RS_PREVIEW_REGION, ...MOCK_CUSTOM_REGIONS],
+    });
+    (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({})
+
+    const container = render(<OAuthSelectPlan />)
+
+    const { queryByTestId } = within(container.queryByTestId('select-oauth-region') as HTMLElement)
+    const selectedEl = queryByTestId('option-us-east-2')
+
+    expect(selectedEl).toBeInTheDocument()
+  })
+
+  it('Should select region with RS preview text by default', async () => {
+    (oauthCloudPlanSelector as jest.Mock).mockReturnValue({
+      isOpenDialog: true,
+      data: [MOCK_RS_PREVIEW_REGION, ...MOCK_CUSTOM_REGIONS],
+    })
+
+    const container = render(<OAuthSelectPlan />)
+
+    const { queryByTestId } = within(container.queryByTestId('select-oauth-region') as HTMLElement)
+    const rsTextEl = queryByTestId(/rs-text-/)
+
+    expect(rsTextEl).toBeInTheDocument()
+  })
+
   it('should display text if no Trigger and Function regions available on this vendor', async () => {
     (oauthCloudPlanSelector as jest.Mock).mockReturnValue({
       isOpenDialog: true,

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

@@ -37,11 +37,10 @@ import { CloudSubscriptionPlanResponse } from 'apiSrc/modules/cloud/subscription
 import { OAuthProvider, OAuthProviders } from './constants'
 import styles from './styles.module.scss'
 
-export const DEFAULT_REGION = 'us-east-2'
-export const DEFAULT_REGION_2 = 'asia-northeast-1'
+export const DEFAULT_REGIONS = ['us-east-2', 'asia-northeast-1']
 export const DEFAULT_PROVIDER = OAuthProvider.AWS
 
-const getTFProviderRegions = (regions: Region[], provider: OAuthProvider) =>
+const getProviderRegions = (regions: Region[], provider: OAuthProvider) =>
   (find(regions, { provider }) || {}).regions || []
 
 const OAuthSelectPlan = () => {
@@ -56,35 +55,37 @@ const OAuthSelectPlan = () => {
   const [plans, setPlans] = useState(plansInit || [])
   const [planIdSelected, setPlanIdSelected] = useState('')
   const [providerSelected, setProviderSelected] = useState<OAuthProvider>(DEFAULT_PROVIDER)
-  const [tfProviderRegions, setTfProviderRegions] = useState(getTFProviderRegions(tfRegions, providerSelected))
+  const [tfProviderRegions, setTfProviderRegions] = useState(getProviderRegions(tfRegions, providerSelected))
+  const [rsProviderRegions, setRsProviderRegions] = useState(getProviderRegions(rsRegions, providerSelected))
 
   const dispatch = useDispatch()
 
   const isTFSource = source?.endsWith(OAuthSocialSource.TriggersAndFunctions)
 
   useEffect(() => {
-    setTfProviderRegions(getTFProviderRegions(tfRegions, providerSelected))
-  }, [providerSelected])
+    setTfProviderRegions(getProviderRegions(tfRegions, providerSelected))
+    setRsProviderRegions(getProviderRegions(rsRegions, providerSelected))
+  }, [providerSelected, plansInit])
 
   useEffect(() => {
     if (!plansInit.length) {
       return
     }
 
     const defaultRegions = isTFSource
-      ? tfProviderRegions || [DEFAULT_REGION, DEFAULT_REGION_2]
-      : [DEFAULT_REGION, DEFAULT_REGION_2]
+      ? [tfProviderRegions, DEFAULT_REGIONS].find((arr) => arr?.length)
+      : DEFAULT_REGIONS
 
     const filteredPlans = filter(plansInit, { provider: providerSelected })
       .sort((a, b) => (a?.details?.displayOrder || 0) - (b?.details?.displayOrder || 0))
 
     const defaultPlan = filteredPlans.find(({ region = '' }) => defaultRegions?.includes(region))
-
-    const planId = (defaultPlan || first(filteredPlans) || {}).id?.toString() || ''
+    const rsPreviewPlan = filteredPlans.find(({ region = '' }) => rsProviderRegions?.includes(region))
+    const planId = (defaultPlan || rsPreviewPlan || first(filteredPlans) || {}).id?.toString() || ''
 
     setPlans(filteredPlans)
     setPlanIdSelected(planId)
-  }, [isTFSource, plansInit, providerSelected, tfProviderRegions])
+  }, [isTFSource, plansInit, providerSelected, tfProviderRegions, rsProviderRegions])
 
   const handleOnClose = useCallback(() => {
     sendEventTelemetry({
@@ -104,7 +105,7 @@ const OAuthSelectPlan = () => {
     const rsProviderRegions: string[] = find(rsRegions, { provider })?.regions || []
 
     return (
-      <EuiText color="subdued" size="s">
+      <EuiText color="subdued" size="s" data-testid={`option-${region}`}>
         {`${countryName} (${cityName})`}
         <EuiTextColor className={styles.regionName}>{region}</EuiTextColor>
         {rsProviderRegions?.includes(region) && (
@@ -165,7 +166,7 @@ const OAuthSelectPlan = () => {
           </EuiTitle>
           <section className={styles.providers}>
             { OAuthProviders.map(({ icon, id, label }) => (
-              <div className={styles.provider}>
+              <div className={styles.provider} key={id}>
                 {id === providerSelected
                   && <div className={cx(styles.providerActiveIcon)}><EuiIcon type="check" /></div>}
                 <EuiButton

redisinsight/ui/src/constants/mocks/mock-sso.ts

@@ -4,11 +4,11 @@ export const MOCK_NO_TF_REGION = {
   name: 'Cache 30MB',
   provider: 'AWS',
   price: 0,
-  region: 'eu-west-1',
+  region: 'us-east-2',
   regionId: 4,
   details: {
     id: 4,
-    name: 'eu-west-1',
+    name: 'us-east-2',
     cloud: 'AWS',
     displayOrder: 4,
     countryName: 'Europe',
@@ -98,3 +98,63 @@ export const MOCK_REGIONS = [
     }
   }
 ]
+
+export const MOCK_CUSTOM_REGIONS = [
+  {
+    id: 12150,
+    type: 'fixed',
+    name: 'Cache 30MB',
+    provider: 'AWS',
+    price: 0,
+    region: 'custom-1',
+    regionId: 11,
+    details: {
+      id: 11,
+      name: 'custom-1',
+      cloud: 'AWS',
+      displayOrder: 2,
+      countryName: 'Asia Pacific',
+      cityName: 'Singapore',
+      regionId: 11,
+      flag: 'sg'
+    }
+  },
+  {
+    id: 12152,
+    type: 'fixed',
+    name: 'Cache 30MB',
+    provider: 'Azure',
+    price: 0,
+    region: 'custom-2',
+    regionId: 16,
+    details: {
+      id: 16,
+      name: 'custom-2',
+      cloud: 'Azure',
+      displayOrder: 10,
+      countryName: 'East US',
+      cityName: 'Virginia',
+      regionId: 16,
+      flag: 'us'
+    }
+  },
+  {
+    id: 12153,
+    type: 'fixed',
+    name: 'Cache 30MB',
+    provider: 'GCP',
+    price: 0,
+    region: 'custom-3',
+    regionId: 27,
+    details: {
+      id: 27,
+      name: 'custom-3',
+      cloud: 'GCP',
+      displayOrder: 17,
+      countryName: 'North America',
+      cityName: 'Iowa',
+      regionId: 27,
+      flag: 'us'
+    }
+  }
+]

redisinsight/ui/src/electron/components/ConfigOAuth/ConfigOAuth.tsx

@@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom'
 import {
   fetchPlans,
   fetchUserInfo,
-  oauthCloudUserDataSelector,
   setJob,
   setOAuthCloudSource,
   setSignInDialogState,
@@ -22,7 +21,6 @@ import { INFINITE_MESSAGES, InfiniteMessagesIds } from 'uiSrc/components/notific
 
 const ConfigOAuth = () => {
   const { isAutodiscoverySSO } = useSelector(cloudSelector)
-  const userData = useSelector(oauthCloudUserDataSelector)
 
   const isAutodiscoverySSORef = useRef(isAutodiscoverySSO)
 
@@ -36,10 +34,6 @@ const ConfigOAuth = () => {
     // dispatch(fetchUserInfo(fetchUserInfoSuccess))
   }, [])
 
-  useEffect(() => {
-    console.log({ userData })
-  }, [userData])
-
   useEffect(() => {
     isAutodiscoverySSORef.current = isAutodiscoverySSO
   }, [isAutodiscoverySSO])