Merge pull request #4094 from RedisInsight/fe/feature/RI-6293-update-rdi-form

#RI-6293 - update RDI form

Author: rsergeenko

redisinsight/ui/src/components/form-dialog/FormDialog.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { render, screen } from 'uiSrc/utils/test-utils'
+
+import FormDialog from './FormDialog'
+
+describe('FormDialog', () => {
+  it('should render', () => {
+    render(
+      <FormDialog
+        isOpen
+        onClose={jest.fn()}
+        header={(<div data-testid="header" />)}
+        footer={(<div data-testid="footer" />)}
+      >
+        <div data-testid="body" />
+      </FormDialog>
+    )
+
+    expect(screen.getByTestId('header')).toBeInTheDocument()
+    expect(screen.getByTestId('footer')).toBeInTheDocument()
+    expect(screen.getByTestId('body')).toBeInTheDocument()
+  })
+})

redisinsight/ui/src/components/form-dialog/FormDialog.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { EuiModal, EuiModalBody, EuiModalFooter, EuiModalHeader, EuiModalHeaderTitle } from '@elastic/eui'
+import { Nullable } from 'uiSrc/utils'
+
+import styles from './styles.module.scss'
+
+export interface Props {
+  isOpen: boolean
+  onClose: () => void
+  header: Nullable<React.ReactNode>
+  footer?: Nullable<React.ReactNode>
+  children: Nullable<React.ReactNode>
+}
+
+const FormDialog = (props: Props) => {
+  const { isOpen, onClose, header, footer, children } = props
+
+  if (!isOpen) return null
+
+  return (
+    <EuiModal
+      className={styles.modal}
+      onClose={onClose}
+    >
+      <EuiModalHeader>
+        <EuiModalHeaderTitle id="formModalHeader">
+          {header}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+      <EuiModalBody>
+        {children}
+      </EuiModalBody>
+      <EuiModalFooter>
+        {footer}
+      </EuiModalFooter>
+    </EuiModal>
+  )
+}
+
+export default FormDialog

redisinsight/ui/src/components/form-dialog/index.ts

@@ -0,0 +1,3 @@
+import FormDialog from './FormDialog'
+
+export default FormDialog

redisinsight/ui/src/components/form-dialog/styles.module.scss

@@ -0,0 +1,95 @@
+.modal {
+  width: 900px !important;
+  height: 700px !important;
+
+  max-width: calc(100vw - 120px) !important;
+  max-height: calc(100vh - 120px) !important;
+
+  &:global(.euiModal) {
+    background-color: var(--euiColorEmptyShade) !important;
+  }
+
+  :global {
+    .euiModalHeader {
+      padding: 18px 24px;
+
+      .euiModalHeader__title .euiTitle {
+        font-size: 18px;
+      }
+    }
+
+    .euiModalBody__overflow {
+      padding: 8px 30px;
+      overflow-y: hidden !important;
+      mask-image: none !important;
+    }
+
+    .euiModal__closeIcon {
+      top: 16px !important;
+      right: 16px !important;
+      background: none;
+    }
+
+    .euiModalFooter {
+      display: block;
+      margin-top: 12px;
+    }
+
+    .footerAddDatabase {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+
+/* form override */
+.modal {
+  :global {
+    .form__divider {
+      padding: 18px 0;
+    }
+
+    .euiFieldText,
+    .euiFieldNumber,
+    .euiFieldPassword,
+    .euiFieldSearch,
+    .euiSelect,
+    .euiSuperSelectControl,
+    .euiComboBox .euiComboBox__inputWrap,
+    .euiTextArea {
+      background-color: var(--browserTableRowEven) !important;
+      padding: 12px;
+      border-color: var(--separatorColor) !important;
+    }
+
+    .euiTextArea {
+      min-height: 80px;
+    }
+
+    .euiFormControlLayout--group {
+      border-color: var(--separatorColor) !important;
+    }
+
+    .euiFormRow, .euiFormControlLayout {
+      max-width: none;
+
+      .euiFormControlLayout:not(.euiFormControlLayout--compressed) {
+        height: 42px !important;
+      }
+
+      .euiSuperSelectControl:not(.euiSuperSelectControl--compressed),
+      .euiSelect:not(.euiSelect--compressed),
+      .euiFieldText:not(.euiFieldText--compressed),
+      .euiFieldNumber:not(.euiFieldNumber--compressed),
+      .euiFieldPassword {
+        height: 40px !important;
+      }
+    }
+
+    .euiCheckbox__input~.euiCheckbox__label {
+      line-height: 24px !important;
+      font-size: 14px !important;
+    }
+  }
+}

redisinsight/ui/src/components/index.ts

@@ -35,6 +35,7 @@ import {
 } from './recommendation'
 import { FormatedDate } from './formated-date'
 import { UploadWarning } from './upload-warning'
+import FormDialog from './form-dialog'
 
 export { FullScreen } from './full-screen'
 
@@ -81,4 +82,5 @@ export {
   RecommendationBadgesLegend,
   FormatedDate,
   UploadWarning,
+  FormDialog
 }

redisinsight/ui/src/contexts/ModalTitleProvider.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, useContext } from 'react'
+import { Nullable } from 'uiSrc/utils'
+
+interface ModalHeaderContextType {
+  modalHeader: Nullable<React.ReactNode>
+  setModalHeader: (content: Nullable<React.ReactNode>) => void
+}
+
+// Create a context
+const ModalHeaderContext = createContext<ModalHeaderContextType>({
+  modalHeader: null,
+  setModalHeader: () => {}
+})
+
+// Custom hook to access the header context
+export const useModalHeader = () => useContext(ModalHeaderContext)
+export const ModalHeaderProvider = ModalHeaderContext.Provider

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

@@ -4,13 +4,9 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
   EuiRadioGroup,
-  EuiRadioGroupOption, EuiSpacer,
+  EuiRadioGroupOption,
+  EuiSpacer,
   EuiText,
   EuiTitle
 } from '@elastic/eui'
@@ -31,7 +27,8 @@ import AddDatabaseFlowTabs from 'uiSrc/pages/home/components/add-database-flow-t
 
 import CloudConnectionFormWrapper from 'uiSrc/pages/home/components/cloud-connection'
 import ImportDatabase from 'uiSrc/pages/home/components/import-database'
-import { HeaderProvider } from './ModalTitleProvider'
+import { FormDialog } from 'uiSrc/components'
+import { ModalHeaderProvider } from 'uiSrc/contexts/ModalTitleProvider'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -57,7 +54,7 @@ const DatabasePanelDialog = (props: Props) => {
     InstanceType.RedisEnterpriseCluster
   )
   const [connectionType, setConnectionType] = useState<AddDbType>(initConnectionType)
-  const [headerContent, setHeaderContent] = useState<Nullable<React.ReactNode>>(null)
+  const [modalHeader, setModalHeader] = useState<Nullable<React.ReactNode>>(null)
 
   const { credentials: clusterCredentials } = useSelector(clusterSelector)
   const { credentials: cloudCredentials } = useSelector(cloudSelector)
@@ -189,38 +186,28 @@ const DatabasePanelDialog = (props: Props) => {
     </>
   )
 
-  if (!isOpen) return null
-
   return (
-    <EuiModal
-      className={styles.modal}
+    <FormDialog
+      isOpen={isOpen}
       onClose={onClose}
+      header={modalHeader ?? (<EuiTitle size="s"><h4>Discover and Add Redis Databases</h4></EuiTitle>)}
+      footer={<div id="footerDatabaseForm" />}
     >
-      <EuiModalHeader>
-        <EuiModalHeaderTitle id="formModalHeader">
-          {headerContent ?? (<EuiTitle size="s"><h4>Discover and Add Redis Databases</h4></EuiTitle>)}
-        </EuiModalHeaderTitle>
-      </EuiModalHeader>
-      <EuiModalBody>
-        <div className={cx(styles.bodyWrapper, 'container relative', { addDbWrapper: !editMode })}>
-          {!editMode && (
-            <AddDatabaseFlowTabs
-              connectionType={connectionType}
-              onChange={changeConnectionType}
-            />
-          )}
-          <div className={styles.formWrapper}>
+      <div className={cx(styles.bodyWrapper, 'container relative', { addDbWrapper: !editMode })}>
+        {!editMode && (
+          <AddDatabaseFlowTabs
+            connectionType={connectionType}
+            onChange={changeConnectionType}
+          />
+        )}
+        <div className={styles.formWrapper}>
+          <ModalHeaderProvider value={{ modalHeader, setModalHeader }}>
             {connectionType === AddDbType.auto && <InstanceTypes />}
-            <HeaderProvider value={{ headerContent, setHeaderContent }}>
-              {Form()}
-            </HeaderProvider>
-          </div>
+            {Form()}
+          </ModalHeaderProvider>
         </div>
-      </EuiModalBody>
-      <EuiModalFooter>
-        <div id="footerDatabaseForm" />
-      </EuiModalFooter>
-    </EuiModal>
+      </div>
+    </FormDialog>
   )
 }