RI-7681: [NEW UI] Add DB form (#5120)

* edit text casing

* change modal title from M to L

* increase button sizes

* remove unused style, add spacing

* remove unneeded styles and add wrapper styled component for scrollable body

* style the connection url, remove some styles on the way

* remove hard coded unneeded textarea height

* add padding on the scrollable wrapper; remove some unneded styles

* Refactor and move horizontal rule

* remove rocket svg and its usages

* use different redis cloud icon

* move shield and redis software to icon registry and refactor connectivity options

* removing the size from the icon button as it follows the one set to the button anyway

* make title one liner - change badge color

* remove bunch of unused styles

* remove unneeded styles for the tooltip anchor and replace with flex item

* revert values interface :)

* move the custom horizontal rule to styles.ts file

Author: dantovska

redisinsight/ui/src/assets/img/icons/rocket.svg

@@ -35,15 +35,13 @@ export const BaseButton = ({
         icon={icon}
         iconSide={iconSide}
         loading={loading}
-        size={btnSize}
       />
       {children}
       <ButtonIcon
         buttonSide="right"
         icon={icon}
         iconSide={iconSide}
         loading={loading}
-        size={btnSize}
       />
     </Button>
   )

redisinsight/ui/src/assets/img/oauth/rocket.svg

@@ -36,7 +36,6 @@ import RedisDbBlueSvg from 'uiSrc/assets/img/icons/redis_db_blue.svg?react'
 import RedisLogoFullSvg from 'uiSrc/assets/img/logo.svg?react'
 import RedisLogoSvg from 'uiSrc/assets/img/logo_small.svg?react'
 import ResetSvg from 'uiSrc/assets/img/rdi/reset.svg?react'
-import RocketSvg from 'uiSrc/assets/img/rdi/rocket.svg?react'
 import ShrinkSvg from 'uiSrc/assets/img/icons/shrink.svg?react'
 import SilentModeSvg from 'uiSrc/assets/img/icons/silent_mode.svg?react'
 import SnoozeSvg from 'uiSrc/assets/img/icons/snooze.svg?react'
@@ -130,12 +129,9 @@ import PipelineStatisticsSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics.
 import PubSubSvg from 'uiSrc/assets/img/sidebar/pubsub.svg?react'
 import SlowLogSvg from 'uiSrc/assets/img/sidebar/slowlog.svg?react'
 import WorkbenchSvg from 'uiSrc/assets/img/sidebar/workbench.svg?react'
-// Missing SVGs and not used/legacy:
-// import BrowserActiveSvg from 'uiSrc/assets/img/sidebar/browser_active.svg?react'
-// import PipelineStatisticsActiveSvg from 'uiSrc/assets/img/sidebar/pipeline_statistics_active.svg?react'
-// import PubSubActiveSvg from 'uiSrc/assets/img/sidebar/pubsub_active.svg?react'
-// import SlowLogActiveSvg from 'uiSrc/assets/img/sidebar/slowlog_active.svg?react'
-// import WorkbenchActiveSvg from 'uiSrc/assets/img/sidebar/workbench_active.svg?react'
+
+import ShieldSvg from 'uiSrc/assets/img/shield.svg?react'
+import RedisSoftwareSvg from 'uiSrc/assets/img/redis-software.svg?react'
 
 import { Icon, IconProps } from './Icon'
 
@@ -208,7 +204,6 @@ export const RedisDbBlueIcon = createIconComponent(RedisDbBlueSvg)
 export const RedisLogo = createIconComponent(RedisLogoSvg)
 export const RedisLogoFullIcon = createIconComponent(RedisLogoFullSvg)
 export const RiResetIcon = createIconComponent(ResetSvg)
-export const RiRocketIcon = createIconComponent(RocketSvg)
 export const RiStarsIcon = createIconComponent(StarsSvg)
 export const RiStopIcon = createIconComponent(StopIconSvg)
 export const RiUserIcon = createIconComponent(UserSvg)
@@ -308,10 +303,6 @@ export const PipelineStatisticsIcon = createIconComponent(PipelineStatisticsSvg)
 export const PubSubIcon = createIconComponent(PubSubSvg)
 export const SlowLogIcon = createIconComponent(SlowLogSvg)
 export const WorkbenchIcon = createIconComponent(WorkbenchSvg)
-// export const BrowserActiveIcon = createIconComponent(BrowserActiveSvg)
-// export const PipelineStatisticsActiveIcon = createIconComponent(
-//   PipelineStatisticsActiveSvg,
-// )
-// export const PubSubActiveIcon = createIconComponent(PubSubActiveSvg)
-// export const SlowLogActiveIcon = createIconComponent(SlowLogActiveSvg)
-// export const WorkbenchActiveIcon = createIconComponent(WorkbenchActiveSvg)
+
+export const ShieldIcon = createIconComponent(ShieldSvg)
+export const RedisSoftwareIcon = createIconComponent(RedisSoftwareSvg)

redisinsight/ui/src/assets/img/rdi/rocket.svg

@@ -5,7 +5,7 @@ import { debounce } from 'lodash'
 import { useLocation, useParams } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 
-import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
+import { ChevronLeftIcon, RocketIcon } from 'uiSrc/components/base/icons'
 import { ExternalLink, HorizontalRule, LoadingContent } from 'uiSrc/components'
 import { RiPopover } from 'uiSrc/components/base'
 import { IEnablementAreaItem } from 'uiSrc/slices/interfaces'
@@ -16,7 +16,6 @@ import {
 } from 'uiSrc/telemetry'
 import { getTutorialCapability, Nullable } from 'uiSrc/utils'
 
-import RocketIcon from 'uiSrc/assets/img/icons/rocket.svg?react'
 import { appContextCapability } from 'uiSrc/slices/app/context'
 import {
   isShowCapabilityTutorialPopover,

redisinsight/ui/src/components/base/forms/buttons/Button.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components'
+
+export const CustomHorizontalRule = styled.div`
+  margin: 12px 0;
+  width: 100%;
+  text-align: center;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    width: 47%;
+    height: 1px;
+    background: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.neutral500};
+    position: absolute;
+    top: 50%;
+  }
+
+  &:after {
+    right: 0;
+  }
+`

redisinsight/ui/src/components/base/icons/iconRegistry.tsx

@@ -3,8 +3,8 @@ import { useFormik } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router'
 import { toNumber } from 'lodash'
-import { Nullable, parseRedisUrl } from 'uiSrc/utils'
 
+import { Nullable, parseRedisUrl } from 'uiSrc/utils'
 import { AddDbType, DEFAULT_TIMEOUT } from 'uiSrc/pages/home/constants'
 import { Instance } from 'uiSrc/slices/interfaces'
 import {
@@ -25,8 +25,7 @@ import { RiTooltip } from 'uiSrc/components'
 import ConnectivityOptions from './components/connectivity-options'
 import ConnectionUrl from './components/connection-url'
 import { Values } from './constants'
-
-import styles from './styles.module.scss'
+import { CustomHorizontalRule } from './AddDatabaseScreen.styles'
 
 export interface Props {
   onSelectOption: (type: AddDbType, db: Nullable<Record<string, any>>) => void
@@ -103,7 +102,7 @@ const AddDatabaseScreen = (props: Props) => {
   })
 
   return (
-    <div className="eui-yScroll">
+    <div>
       <form onSubmit={formik.handleSubmit} data-testid="form">
         <Row responsive>
           <FlexItem grow>
@@ -113,8 +112,8 @@ const AddDatabaseScreen = (props: Props) => {
             />
           </FlexItem>
         </Row>
-
-        <Row responsive justify="between" style={{ padding: 4 }}>
+        <Spacer size="xxl" />
+        <Row responsive justify="between" align="center">
           <FlexItem>
             <RiTooltip
               position="top"
@@ -130,19 +129,19 @@ const AddDatabaseScreen = (props: Props) => {
                 loading={isLoading}
                 data-testid="btn-test-connection"
               >
-                Test Connection
+                Test connection
               </EmptyButton>
             </RiTooltip>
           </FlexItem>
           <FlexItem>
             <Row responsive gap="l">
               <FlexItem>
                 <SecondaryButton
-                  size="small"
+                  size="medium"
                   onClick={() => handleProceedForm(AddDbType.manual)}
                   data-testid="btn-connection-settings"
                 >
-                  Connection Settings
+                  Connection settings
                 </SecondaryButton>
               </FlexItem>
               <FlexItem>
@@ -152,13 +151,13 @@ const AddDatabaseScreen = (props: Props) => {
                   content={isInvalid ? <span>{ConnectionUrlError}</span> : null}
                 >
                   <PrimaryButton
-                    size="small"
+                    size="medium"
                     type="submit"
                     disabled={!!isInvalid}
                     icon={isInvalid ? InfoIcon : undefined}
                     data-testid="btn-submit"
                   >
-                    Add Database
+                    Add database
                   </PrimaryButton>
                 </RiTooltip>
               </FlexItem>
@@ -167,7 +166,7 @@ const AddDatabaseScreen = (props: Props) => {
         </Row>
       </form>
       <Spacer />
-      <div className={styles.hr}>Or</div>
+      <CustomHorizontalRule>Or</CustomHorizontalRule>
       <Spacer />
       <ConnectivityOptions
         onClickOption={handleProceedForm}

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/InternalPage/InternalPage.tsx

@@ -1,10 +1,16 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { TextArea } from 'uiSrc/components/base/inputs'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiTooltip } from 'uiSrc/components'
-import styles from './styles.module.scss'
+import { FlexGroup, FlexItem } from 'uiSrc/components/base/layout/flex'
+import { Text } from 'uiSrc/components/base/text'
+
+const PointerIcon = styled(RiIcon)`
+  cursor: pointer;
+`
 
 export interface Props {
   value: string
@@ -14,8 +20,8 @@ export interface Props {
 const ConnectionUrl = ({ value, onChange }: Props) => (
   <FormField
     label={
-      <div className={styles.connectionUrlInfo}>
-        <div>Connection URL</div>
+      <FlexGroup gap="s" align="center">
+        <Text>Connection URL</Text>
         <RiTooltip
           title="The following connection URLs are supported:"
           className="homePage_tooltip"
@@ -37,9 +43,11 @@ const ConnectionUrl = ({ value, onChange }: Props) => (
             </ul>
           }
         >
-          <RiIcon type="InfoIcon" style={{ cursor: 'pointer' }} />
+          <FlexItem>
+            <PointerIcon type="InfoIcon" />
+          </FlexItem>
         </RiTooltip>
-      </div>
+      </FlexGroup>
     }
   >
     <TextArea
@@ -48,7 +56,6 @@ const ConnectionUrl = ({ value, onChange }: Props) => (
       value={value}
       onChangeCapture={onChange}
       placeholder="redis://[email protected]:6379"
-      style={{ height: 88 }}
       data-testid="connection-url"
     />
   </FormField>