RI-7681: Make info section fixed + apply scrolling properly (#5175)

* add the wrapper components used for all forms regarding add / edit database forms

* add db: apply scrollable wrapper

* cloud connection form: apply scrollable wrapper and remove unused style

* cluster connection form: apply scrollable wrapper and content wrapper

* import db: apply scrollable wrapper

* all edit / clone forms: apply scrollable + content wrapper

* sentinel form: apply wrappers

* MAIN form panel - apply the fixed wrapper and scroll only remains in the wanted scrollable area

Author: dantovska

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx

@@ -27,6 +27,8 @@ import ConnectionUrl from './components/connection-url'
 import { Values } from './constants'
 import { CustomHorizontalRule } from './AddDatabaseScreen.styles'
 
+import { ScrollableWrapper } from '../styles.module'
+
 export interface Props {
   onSelectOption: (type: AddDbType, db: Nullable<Record<string, any>>) => void
   onClose?: () => void
@@ -102,7 +104,7 @@ const AddDatabaseScreen = (props: Props) => {
   })
 
   return (
-    <div>
+    <ScrollableWrapper>
       <form onSubmit={formik.handleSubmit} data-testid="form">
         <Row responsive>
           <FlexItem grow>
@@ -170,7 +172,7 @@ const AddDatabaseScreen = (props: Props) => {
         onClickOption={handleProceedForm}
         onClose={onClose}
       />
-    </div>
+    </ScrollableWrapper>
   )
 }
 

redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx

@@ -28,7 +28,7 @@ import { RiRadioGroup } from 'uiSrc/components/base/forms/radio-group/RadioGroup
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { ICloudConnectionSubmit } from '../CloudConnectionFormWrapper'
 
-import styles from '../styles.module.scss'
+import { ScrollableWrapper } from '../../styles.module'
 
 export interface Props {
   accessKey: string
@@ -179,7 +179,7 @@ const CloudConnectionForm = (props: Props) => {
   }
 
   const CloudApiForm = (
-    <div className={styles.cloudApi} data-testid="add-db_cloud-api">
+    <div data-testid="add-db_cloud-api">
       <MessageCloudApiKeys />
       <Spacer />
       <WindowEvent event="keydown" handler={onKeyDown} />
@@ -227,7 +227,7 @@ const CloudConnectionForm = (props: Props) => {
   )
 
   return (
-    <div className="getStartedForm eui-yScroll">
+    <ScrollableWrapper>
       <FeatureFlagComponent name={FeatureFlags.cloudSso}>
         <Col gap="l">
           <FlexItem grow>
@@ -252,7 +252,7 @@ const CloudConnectionForm = (props: Props) => {
         />
       )}
       {type === CloudConnectionOptions.ApiKeys && CloudApiForm}
-    </div>
+    </ScrollableWrapper>
   )
 }
 

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

@@ -1,10 +1,3 @@
-.cloudApi {
-  :global(.euiTextColor),
-  :global(.euiLink) {
-    color: currentColor !important;
-  }
-}
-
 .link {
   text-decoration: underline !important;
 

redisinsight/ui/src/pages/home/components/cluster-connection/ClusterConnectionFormWrapper.tsx

@@ -16,6 +16,8 @@ import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
 import { Title } from 'uiSrc/components/base/text/Title'
 import ClusterConnectionForm from './cluster-connection-form/ClusterConnectionForm'
 
+import { ContentWrapper } from '../styles.module'
+
 export interface Props {
   onClose?: () => void
 }
@@ -58,7 +60,8 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
 
   const formSubmit = (values: ICredentialsRedisCluster) => {
     sendEventTelemetry({
-      event: TelemetryEvent.CONFIG_DATABASES_REDIS_SOFTWARE_AUTODISCOVERY_SUBMITTED,
+      event:
+        TelemetryEvent.CONFIG_DATABASES_REDIS_SOFTWARE_AUTODISCOVERY_SUBMITTED,
     })
 
     dispatch(fetchInstancesRedisCluster(values, onSuccess))
@@ -77,7 +80,7 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
     )
 
   return (
-    <div ref={formRef}>
+    <ContentWrapper as="div" ref={formRef}>
       <ClusterConnectionForm
         host={credentials?.host ?? ''}
         port={credentials?.port?.toString() ?? ''}
@@ -89,7 +92,7 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
         onSubmit={formSubmit}
         loading={loading}
       />
-    </div>
+    </ContentWrapper>
   )
 }
 

redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx

@@ -29,6 +29,8 @@ import {
 import { RiTooltip } from 'uiSrc/components'
 import { HostInfoTooltipContent } from '../../host-info-tooltip-content/HostInfoTooltipContent'
 
+import { ScrollableWrapper } from '../../styles.module'
+
 export interface Props {
   host: string
   port: string
@@ -187,10 +189,9 @@ const ClusterConnectionForm = (props: Props) => {
   }
 
   return (
-    <div className="getStartedForm eui-yScroll" data-testid="add-db_cluster">
+    <ScrollableWrapper data-testid="add-db_cluster">
       <MessageEnterpriceSoftware />
       <br />
-
       <form>
         <WindowEvent event="keydown" handler={onKeyDown} />
 
@@ -266,7 +267,7 @@ const ClusterConnectionForm = (props: Props) => {
         </Col>
       </form>
       <Footer />
-    </div>
+    </ScrollableWrapper>
   )
 }
 

redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
-import { Theme } from '@redis-ui/styles'
-
 
 import { Nullable } from 'uiSrc/utils'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
@@ -40,10 +37,7 @@ import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
 import { FooterDatabaseForm } from 'uiSrc/components/form-dialog/FooterDatabaseForm'
 import { Title } from 'uiSrc/components/base/text'
 
-const ScrollableWrapper = styled.div`
-  height: 100%;
-  overflow: scroll;
-`
+import { FixedWrapper } from '../styles.module'
 
 export interface Props {
   editMode: boolean
@@ -198,13 +192,13 @@ const DatabasePanelDialog = (props: Props) => {
       header={modalHeader ?? <Title size="L">Add database</Title>}
       footer={<FooterDatabaseForm />}
     >
-      <ScrollableWrapper>
+      <FixedWrapper>
         <ModalHeaderProvider
           value={{ modalHeader, setModalHeader: handleSetModalHeader }}
         >
           {Form()}
         </ModalHeaderProvider>
-      </ScrollableWrapper>
+      </FixedWrapper>
     </FormDialog>
   )
 }

redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx

@@ -25,6 +25,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import ResultsLog from './components/ResultsLog'
 
 import styles from './styles.module.scss'
+import { ScrollableWrapper } from '../styles.module'
 
 export interface Props {
   onClose: () => void
@@ -167,7 +168,7 @@ const ImportDatabase = (props: Props) => {
 
   return (
     <>
-      <div className={styles.formWrapper} data-testid="add-db_import">
+      <ScrollableWrapper data-testid="add-db_import">
         <Col>
           <FlexItem grow>
             {isShowForm && (
@@ -234,7 +235,7 @@ const ImportDatabase = (props: Props) => {
             </FlexItem>
           </Row>
         )}
-      </div>
+      </ScrollableWrapper>
       <Footer />
     </>
   )

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

@@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
 
-import cx from 'classnames'
 import * as keys from 'uiSrc/constants/keys'
 import { resetInstanceUpdateAction } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
@@ -34,7 +33,7 @@ import CloneConnection from './components/CloneConnection'
 import FooterActions from './components/FooterActions'
 import { AddConnection, EditConnection, EditSentinelConnection } from './forms'
 
-import styles from './styles.module.scss'
+import { ScrollableWrapper, ContentWrapper } from '../../styles.module'
 
 export interface Props {
   formFields: DbConnectionInfo
@@ -233,21 +232,18 @@ const ManualConnectionForm = (props: Props) => {
   )
 
   return (
-    <div
-      className={styles.container}
-      data-testid="add-db_manual"
-    >
+    <ContentWrapper data-testid="add-db_manual">
       {isEditMode &&
         !isCloneMode &&
         server?.buildType !== BuildType.RedisStack && (
           <CloneConnection id={id} setIsCloneMode={setIsCloneMode} />
         )}
-      <div className={cx('getStartedForm', styles.content)} ref={formRef}>
+      <ContentWrapper as="div" ref={formRef}>
         {!isEditMode && !isFromCloud && (
           <>
             <Tabs />
             <Spacer />
-            <div className="eui-yScroll">
+            <ScrollableWrapper>
               <AddConnection
                 activeTab={activeTab}
                 formik={formik}
@@ -257,7 +253,7 @@ const ManualConnectionForm = (props: Props) => {
                 caCertificates={caCertificates}
                 buildType={buildType}
               />
-            </div>
+            </ScrollableWrapper>
           </>
         )}
         {(isEditMode || isCloneMode || isFromCloud) &&
@@ -280,7 +276,7 @@ const ManualConnectionForm = (props: Props) => {
               )}
               <Tabs />
               <Spacer />
-              <div className="eui-yScroll">
+              <ScrollableWrapper>
                 <EditConnection
                   activeTab={activeTab}
                   isCloneMode={isCloneMode}
@@ -293,7 +289,7 @@ const ManualConnectionForm = (props: Props) => {
                   caCertificates={caCertificates}
                   buildType={buildType}
                 />
-              </div>
+              </ScrollableWrapper>
             </>
           )}
         {(isEditMode || isCloneMode) &&
@@ -313,7 +309,7 @@ const ManualConnectionForm = (props: Props) => {
               )}
               <Tabs />
               <Spacer />
-              <div className="eui-yScroll">
+              <ScrollableWrapper>
                 <EditSentinelConnection
                   activeTab={activeTab}
                   isCloneMode={isCloneMode}
@@ -324,12 +320,12 @@ const ManualConnectionForm = (props: Props) => {
                   caCertificates={caCertificates}
                   db={db}
                 />
-              </div>
+              </ScrollableWrapper>
             </>
           )}
-      </div>
+      </ContentWrapper>
       <Footer />
-    </div>
+    </ContentWrapper>
   )
 }
 

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

@@ -22,6 +22,8 @@ import {
 import { RiTooltip } from 'uiSrc/components'
 import { Row } from 'uiSrc/components/base/layout/flex'
 
+import { ContentWrapper, ScrollableWrapper } from '../../styles.module'
+
 export interface Props {
   loading: boolean
   initialValues: DbConnectionInfo
@@ -132,12 +134,8 @@ const SentinelConnectionForm = (props: Props) => {
   }
 
   return (
-    <div
-      className="relative"
-      data-testid="add-db_sentinel"
-      style={{ height: '100%' }}
-    >
-      <div className="getStartedForm eui-yScroll" ref={formRef}>
+    <ContentWrapper data-testid="add-db_sentinel">
+      <ScrollableWrapper as="div" ref={formRef}>
         <MessageSentinel />
         <br />
         <form
@@ -163,9 +161,9 @@ const SentinelConnectionForm = (props: Props) => {
             caCertificates={caCertificates}
           />
         </form>
-      </div>
+      </ScrollableWrapper>
       <Footer />
-    </div>
+    </ContentWrapper>
   )
 }