RI-7681: Polish sentinel add / edit / clone forms

redisinsight/ui/src/pages/home/components/cluster-connection/styles.module.scss

@@ -1,10 +1,6 @@
 .message {
   font-family: 'Graphik', sans-serif;
   color: var(--euiTextSubduedColor) !important;
-
-  :global(.euiTextColor), :global(.euiLink) {
-    color: currentColor !important;
-  }
 }
 
 .link {

redisinsight/ui/src/pages/home/components/form/Messages.tsx

@@ -8,12 +8,7 @@
 import styles from '../styles.module.scss'
 
 const MessageCloudApiKeys = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     {
       'Enter Redis Cloud API keys to discover and add databases. API keys can be enabled by following the steps mentioned in the '
     }
@@ -28,33 +23,23 @@
 )
 
 const MessageStandalone = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     You can manually add your Redis databases. Enter host and port of your Redis
     database to add it to {APPLICATION_NAME}. &nbsp;
     <ExternalLink
       className={cx(styles.link, styles.external)}
       href={getUtmExternalLink(
         'https://redis.io/docs/latest/develop/connect/insight#connection-management',
         { campaign: 'redisinsight' },
       )}
     >
       Learn more here.
     </ExternalLink>
   </Text>
 )
 
 const MessageSentinel = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     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}. &nbsp;
@@ -71,12 +56,7 @@
 )
 
 const MessageEnterpriceSoftware = () => (
-  <Text
-    color="subdued"
-    size="s"
-    className={styles.message}
-    data-testid="summary"
-  >
+  <Text data-testid="summary">
     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}. &nbsp;

redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { FormikProps } from 'formik'
 
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { TextInput } from 'uiSrc/components/base/inputs'
 
@@ -15,10 +15,10 @@ export interface Props {
 const PrimaryGroupSentinel = (props: Props) => {
   const { flexGroupClassName = '', flexItemClassName = '', formik } = props
   return (
-    <>
+    <Col gap="l">
       <Row gap="m" responsive className={flexGroupClassName}>
         <FlexItem grow className={flexItemClassName}>
-          <FormField label="Database Alias*">
+          <FormField label="Database alias" required>
             <TextInput
               name="name"
               id="name"
@@ -33,7 +33,7 @@ const PrimaryGroupSentinel = (props: Props) => {
       </Row>
       <Row gap="m" responsive className={flexGroupClassName}>
         <FlexItem grow className={flexItemClassName}>
-          <FormField label="Primary Group Name*">
+          <FormField label="Primary group name" required>
             <TextInput
               name="sentinelMasterName"
               id="sentinelMasterName"
@@ -47,7 +47,7 @@ const PrimaryGroupSentinel = (props: Props) => {
           </FormField>
         </FlexItem>
       </Row>
-    </>
+    </Col>
   )
 }
 

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/forms/EditSentinelConnection.tsx

@@ -12,7 +12,7 @@ import {
   TlsDetails,
 } from 'uiSrc/pages/home/components/form'
 import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { Title } from 'uiSrc/components/base/text/Title'
@@ -45,38 +45,36 @@ const EditSentinelConnection = (props: Props) => {
   } = props
 
   const GeneralFormClodeMode = (
-    <>
+    <Col gap="l">
       <PrimaryGroupSentinel formik={formik} />
       <Divider />
-      <Title size="XS">Database</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Database
+      </Title>
       <SentinelMasterDatabase
         formik={formik}
         db={db}
         isCloneMode={isCloneMode}
       />
       <Divider />
-      <Title size="XS">Sentinel</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Sentinel
+      </Title>
       <DatabaseForm
         formik={formik}
         showFields={{ host: true, port: true, alias: false, timeout: false }}
         onHostNamePaste={onHostNamePaste}
       />
-      <Spacer size="m" />
       <Divider />
-      <Spacer size="m" />
       <DbIndex formik={formik} />
-      <Spacer size="m" />
-      <Divider />
-    </>
+    </Col>
   )
 
   const GeneralFormEditMode = (
-    <>
+    <Col gap="l">
       <Row gap="m">
         <FlexItem grow>
-          <FormField label="Database Alias*">
+          <FormField label="Database Alias" required>
             <TextInput
               name="name"
               id="name"
@@ -90,24 +88,25 @@ const EditSentinelConnection = (props: Props) => {
           </FormField>
         </FlexItem>
       </Row>
-      <Spacer size="s" />
       <Divider />
-      <Title size="XS">Database</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Database
+      </Title>
       <SentinelMasterDatabase
         formik={formik}
         db={db}
         isCloneMode={isCloneMode}
       />
       <Divider />
-      <Title size="XS">Sentinel</Title>
-      <Spacer size="s" />
+      <Title color="primary" size="M">
+        Sentinel
+      </Title>
       <DatabaseForm
         formik={formik}
         showFields={{ host: false, port: true, alias: false, timeout: false }}
         onHostNamePaste={onHostNamePaste}
       />
-    </>
+    </Col>
   )
 
   return (

redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx

@@ -20,6 +20,7 @@ import {
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
 import { RiTooltip } from 'uiSrc/components'
+import { Row } from 'uiSrc/components/base/layout/flex'
 
 export interface Props {
   loading: boolean
@@ -92,16 +93,14 @@ const SentinelConnectionForm = (props: Props) => {
       content={getSubmitButtonContent(errors, submitIsDisabled)}
     >
       <PrimaryButton
-        size="s"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
         loading={loading}
         icon={submitIsDisabled ? InfoIcon : undefined}
         data-testid="btn-submit"
-        style={{ marginLeft: 12 }}
       >
-        Discover Database
+        Discover database
       </PrimaryButton>
     </RiTooltip>
   )
@@ -111,10 +110,9 @@ const SentinelConnectionForm = (props: Props) => {
 
     if (footerEl) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m" className="footerAddDatabase">
           {onClose && (
             <SecondaryButton
-              size="s"
               onClick={onClose}
               className="btn-cancel"
               data-testid="btn-cancel"
@@ -126,7 +124,7 @@ const SentinelConnectionForm = (props: Props) => {
             onClick={formik.submitForm}
             submitIsDisabled={submitIsDisable()}
           />
-        </div>,
+        </Row>,
         footerEl,
       )
     }

redisinsight/ui/src/pages/home/components/styles.module.scss

@@ -108,10 +108,6 @@
 .message {
   font-family: 'Graphik', sans-serif;
   color: var(--euiTextSubduedColor) !important;
-
-  :global(.euiTextColor), :global(.euiLink) {
-    color: currentColor !important;
-  }
 }
 
 .link {