From cf36d2bfe8694d543fbbebfb3af0ef527cf857cc Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 7 Nov 2025 15:57:24 +0200 Subject: [PATCH 01/10] refactor autodiscovery - discover with cloud account page --- .../OAuthAutodiscovery.styles.ts | 22 ++++ .../OAuthAutodiscovery.tsx | 55 +++++---- .../oauth-autodiscovery/styles.module.scss | 109 ------------------ .../CloudConnectionForm.tsx | 22 ++-- 4 files changed, 60 insertions(+), 148 deletions(-) create mode 100644 redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts delete mode 100644 redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts new file mode 100644 index 0000000000..ec699fb6a7 --- /dev/null +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components' +import { Col, Row } from 'uiSrc/components/base/layout/flex' +import { Text } from 'uiSrc/components/base/text' + +export const StyledDiscoverText = styled(Text)` + align-self: flex-start; +` + +export const StyledContainer = styled(Col)`` + +export const StyledCreateDbSection = styled(Row)` + width: 100%; + border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500}; + border-radius: 8px; + padding-block: ${({ theme }) => theme.core.space.space100}; + padding-inline: ${({ theme }) => theme.core.space.space200}; +` + +export const StyledAgreementContainer = styled.div` + margin-top: ${({ theme }) => theme.core.space.space200}; + width: 50%; +` diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx index 043b82506d..90149a39c1 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx @@ -17,14 +17,20 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { Pages } from 'uiSrc/constants' import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form' -import CloudIcon from 'uiSrc/assets/img/oauth/cloud_centered.svg?react' - import { OAuthSsoHandlerDialog } from 'uiSrc/components' import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' -import styles from './styles.module.scss' +import { Row } from 'uiSrc/components/base/layout/flex' +import { CloudIcon } from 'uiSrc/components/base/icons' + +import { + StyledDiscoverText, + StyledContainer, + StyledCreateDbSection, + StyledAgreementContainer, +} from './OAuthAutodiscovery.styles' export interface Props { inline?: boolean @@ -73,7 +79,7 @@ const OAuthAutodiscovery = (props: Props) => { return (
- + Use{' '} {currentAccountName?.name} #{currentAccountId} @@ -107,11 +113,11 @@ const OAuthAutodiscovery = (props: Props) => { } const CreateFreeDb = () => ( -
-
- - Start FREE with Redis Cloud -
+ + + + Start FREE with Redis Cloud + {(ssoCloudHandlerClick) => ( { )} -
+ ) return ( -
+ {(form: React.ReactNode) => ( <> - + Discover subscriptions and add your databases. A new Redis Cloud account will be created for you if you don’t have one. - - + + - + Get started with - - Redis Cloud account - - + Redis Cloud account + {form} - -
+ + -
+ )} -
+ ) } diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss deleted file mode 100644 index eb51711e35..0000000000 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/styles.module.scss +++ /dev/null @@ -1,109 +0,0 @@ -.container { - display: flex; - flex-direction: column; - align-items: center; - - .buttonsContainer { - .button { - margin: 0 10px; - - padding: 4px 31px !important; - width: 100px !important; - height: 22px !important; - border-radius: 4px !important; - - background-color: var(--comboBoxBadgeBgColor); - - svg { - width: 15px !important; - height: 14px !important; - margin-top: 0 !important; - margin-right: 0 !important; - } - - &.googleButton { - background-color: var(--cloudSsoGoogle); - } - - &.githubButton { - background-color: var(--cloudSsoGithub); - } - } - } - - .title { - font-size: 28px; - font-weight: 700 !important; - } - - .text { - font-style: normal; - font-weight: 400 !important; - line-height: 150% !important; - color: var(--htmlColor) !important; - font-size: 13px !important; - padding-bottom: 16px; - align-self: flex-start; - } - - .containerAgreement { - margin-top: 16px; - text-align: left; - - :global(.euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label) { - line-height: 18px !important; - font-size: 12px !important; - } - } - - .createDbSection { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - - border: 1px solid var(--controlsBorderColor); - border-radius: 8px; - padding: 8px 16px; - - .createDbTitle { - display: flex; - align-items: center; - - > svg { - margin-right: 8px; - } - } - } -} - -.withAdvantagesWrapper { - height: 100%; - display: flex; - - .advantagesContainer { - max-width: 300px; - padding-bottom: 24px; - } - - .socialContainer { - display: flex; - flex-direction: column; - align-items: center; - - padding: 108px 0px 40px 40px; - - .subTitle { - font-size: 16px; - } - - .title { - font-weight: bold; - } - } - - .socialButtons { - margin: 40px 0 60px; - } -} - diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx index ef976d241d..d53905145f 100644 --- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx @@ -197,11 +197,8 @@ const CloudConnectionForm = (props: Props) => { placeholder={fieldDisplayNames.accessKey} value={formik.values.accessKey} autoComplete="off" - onChange={value => { - formik.setFieldValue( - 'accessKey', - validateField(value.trim()), - ) + onChange={(value) => { + formik.setFieldValue('accessKey', validateField(value.trim())) }} /> @@ -219,11 +216,8 @@ const CloudConnectionForm = (props: Props) => { placeholder={fieldDisplayNames.secretKey} value={formik.values.secretKey} autoComplete="off" - onChange={value => { - formik.setFieldValue( - 'secretKey', - validateField(value.trim()), - ) + onChange={(value) => { + formik.setFieldValue('secretKey', validateField(value.trim())) }} /> @@ -237,11 +231,9 @@ const CloudConnectionForm = (props: Props) => { return (
- + - - Connect with: - + Connect with { /> - + {type === CloudConnectionOptions.Account && ( Date: Fri, 7 Nov 2025 16:05:58 +0200 Subject: [PATCH 02/10] fix the cloud api page layout and forms --- .../cloud-connection-form/CloudConnectionForm.tsx | 10 ++++------ .../ui/src/pages/home/components/form/Messages.tsx | 13 ++++++++----- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx index d53905145f..c94e879176 100644 --- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx @@ -121,7 +121,6 @@ const CloudConnectionForm = (props: Props) => { const CancelButton = ({ onClick }: { onClick: () => void }) => ( { } > { const footerEl = document.getElementById('footerDatabaseForm') if (footerEl) { return ReactDOM.createPortal( -
+ {onClose && } -
, + , footerEl, ) } @@ -188,7 +186,7 @@ const CloudConnectionForm = (props: Props) => {
- + { - + ( { 'Enter Redis Cloud API keys to discover and add databases. API keys can be enabled by following the steps mentioned in the ' } - - - documentation. - + documentation + + {'.'} ) From bded23f1c7147e5acf5afdfdbe9f5b9a0e19f1b0 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 7 Nov 2025 17:01:17 +0200 Subject: [PATCH 03/10] add transition to boxes hover --- .../connectivity-options/ConnectivityOptions.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts index 120e28aa35..4110ebe0b1 100644 --- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts +++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.styles.ts @@ -26,6 +26,7 @@ export const StyledConnectivityLink = styled(Link)` color: ${({ theme }) => theme.semantic.color.text.neutral800}; opacity: 0.8; transform: translateY(-1px); + transition: transform 0.2s ease-in-out; box-shadow: none; } ` From 7fb5174ddf105cc45b586f27bcbc1507121ce753 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 7 Nov 2025 17:01:32 +0200 Subject: [PATCH 04/10] fix leftover container style usage --- .../oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx index 90149a39c1..2c1a37b219 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx @@ -78,7 +78,7 @@ const OAuthAutodiscovery = (props: Props) => { ) return ( -
+ Use{' '} @@ -94,7 +94,7 @@ const OAuthAutodiscovery = (props: Props) => { > Discover -
+ ) } From 43128af95aec784ffc668f7630a869bc1432a712 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 7 Nov 2025 17:12:33 +0200 Subject: [PATCH 05/10] Change the messages to use Link instead of ExternalLink --- .../pages/home/components/form/Messages.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/redisinsight/ui/src/pages/home/components/form/Messages.tsx b/redisinsight/ui/src/pages/home/components/form/Messages.tsx index c9009309a7..26d8a59941 100644 --- a/redisinsight/ui/src/pages/home/components/form/Messages.tsx +++ b/redisinsight/ui/src/pages/home/components/form/Messages.tsx @@ -1,22 +1,18 @@ import React from 'react' -import cx from 'classnames' import { APPLICATION_NAME } from 'uiSrc/constants' import { Text } from 'uiSrc/components/base/text' import { getUtmExternalLink } from 'uiSrc/utils/links' import { Link } from 'uiSrc/components/base/link/Link' -import { ExternalLink } from 'uiSrc/components' -import styles from '../styles.module.scss' - const MessageCloudApiKeys = () => ( - + { 'Enter Redis Cloud API keys to discover and add databases. API keys can be enabled by following the steps mentioned in the ' } documentation @@ -26,52 +22,55 @@ const MessageCloudApiKeys = () => ( ) const MessageStandalone = () => ( - + You can manually add your Redis databases. Enter host and port of your Redis database to add it to {APPLICATION_NAME}.   - Learn more here. - + ) const MessageSentinel = () => ( - + You can automatically discover and add primary groups from your Redis Sentinel. Enter host and port of your Redis Sentinel to automatically discover your primary groups and add them to {APPLICATION_NAME}.   - Learn more here. - + ) const MessageEnterpriceSoftware = () => ( - + Your Redis Software databases can be automatically added. Enter the connection details of your Redis Software Cluster to automatically discover your databases and add them to {APPLICATION_NAME}.   - Learn more here. - + ) From b354a992ecf1948c4b791441374a72ddea147156 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Fri, 7 Nov 2025 17:12:48 +0200 Subject: [PATCH 06/10] Change text colors and button sizes --- .../oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx | 9 ++++----- .../cloud-connection-form/CloudConnectionForm.tsx | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx index 2c1a37b219..e04a527a07 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx @@ -116,12 +116,11 @@ const OAuthAutodiscovery = (props: Props) => { - Start FREE with Redis Cloud + Start FREE with Redis Cloud {(ssoCloudHandlerClick) => ( { > {(form: React.ReactNode) => ( <> - + Discover subscriptions and add your databases. A new Redis Cloud account will be created for you if you don’t have one. - Get started with - Redis Cloud account + Get started with + Redis Cloud account {form} diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx index c94e879176..6a7dd5d47d 100644 --- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx +++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx @@ -231,7 +231,7 @@ const CloudConnectionForm = (props: Props) => { - Connect with + Connect with Date: Fri, 7 Nov 2025 17:15:11 +0200 Subject: [PATCH 07/10] change color to subdued --- redisinsight/ui/src/pages/home/components/form/Messages.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/redisinsight/ui/src/pages/home/components/form/Messages.tsx b/redisinsight/ui/src/pages/home/components/form/Messages.tsx index 26d8a59941..4e4339a9f2 100644 --- a/redisinsight/ui/src/pages/home/components/form/Messages.tsx +++ b/redisinsight/ui/src/pages/home/components/form/Messages.tsx @@ -13,6 +13,7 @@ const MessageCloudApiKeys = () => ( documentation @@ -28,6 +29,7 @@ const MessageStandalone = () => ( ( ( Date: Mon, 10 Nov 2025 12:47:23 +0200 Subject: [PATCH 08/10] finalize the discover db modal when logged in to cloud account --- .../OAuthAutodiscovery.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx index e04a527a07..cfb022b2db 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx @@ -78,22 +78,24 @@ const OAuthAutodiscovery = (props: Props) => { ) return ( - + Use{' '} - + {currentAccountName?.name} #{currentAccountId} - {' '} + + {' '} account to auto-discover subscriptions and add your databases. - - - Discover - + + + Discover + + ) } From 54e3bacd5233161417755181386edb9ec7f898df Mon Sep 17 00:00:00 2001 From: dantovska Date: Mon, 10 Nov 2025 14:00:52 +0200 Subject: [PATCH 09/10] Update redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts Co-authored-by: Valentin Kirilov --- .../oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts index ec699fb6a7..435a6d39a0 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts @@ -11,7 +11,7 @@ export const StyledContainer = styled(Col)`` export const StyledCreateDbSection = styled(Row)` width: 100%; border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500}; - border-radius: 8px; + border-radius: ${theme.core.space.space100} padding-block: ${({ theme }) => theme.core.space.space100}; padding-inline: ${({ theme }) => theme.core.space.space200}; ` From fa384404f142545bfdf3062981b4476e718cb239 Mon Sep 17 00:00:00 2001 From: Dijana Antovska Date: Mon, 10 Nov 2025 14:03:17 +0200 Subject: [PATCH 10/10] fix border radius row and apply formatting --- .../oauth-autodiscovery/OAuthAutodiscovery.styles.ts | 2 +- .../oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts index 435a6d39a0..cd5295850b 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.styles.ts @@ -11,7 +11,7 @@ export const StyledContainer = styled(Col)`` export const StyledCreateDbSection = styled(Row)` width: 100%; border: 1px solid ${({ theme }) => theme.semantic.color.border.neutral500}; - border-radius: ${theme.core.space.space100} + border-radius: ${({ theme }) => theme.core.space.space100}; padding-block: ${({ theme }) => theme.core.space.space100}; padding-inline: ${({ theme }) => theme.core.space.space200}; ` diff --git a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx index cfb022b2db..201a789ca2 100644 --- a/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx +++ b/redisinsight/ui/src/components/oauth/oauth-sso/oauth-autodiscovery/OAuthAutodiscovery.tsx @@ -18,7 +18,6 @@ import { Pages } from 'uiSrc/constants' import OAuthForm from 'uiSrc/components/oauth/shared/oauth-form' import { OAuthSsoHandlerDialog } from 'uiSrc/components' -import { Spacer } from 'uiSrc/components/base/layout/spacer' import { PrimaryButton } from 'uiSrc/components/base/forms/buttons' import { Title } from 'uiSrc/components/base/text/Title' import { Text } from 'uiSrc/components/base/text' @@ -83,8 +82,7 @@ const OAuthAutodiscovery = (props: Props) => { Use{' '} {currentAccountName?.name} #{currentAccountId} - - {' '} + {' '} account to auto-discover subscriptions and add your databases. @@ -162,7 +160,9 @@ const OAuthAutodiscovery = (props: Props) => { Get started with - Redis Cloud account + + Redis Cloud account + {form}