RI-7054: replace EuiFormRow with FormField

redisinsight/ui/src/components/base/forms/FormField.ts

@@ -0,0 +1,3 @@
+import { FormField } from '@redis-ui/components'
+
+export { FormField }

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

@@ -70,7 +70,7 @@
       border-color: var(--separatorColor) !important;
     }
 
-    .euiFormRow, .euiFormControlLayout {
+    .euiFormControlLayout {
       max-width: none;
 
       .euiFormControlLayout:not(.euiFormControlLayout--compressed) {

redisinsight/ui/src/components/item-list/components/export-action/ExportAction.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
 import {
   EuiCheckbox,
-  EuiFormRow,
   EuiIcon,
   EuiPopover,
   EuiText,
 } from '@elastic/eui'
+import { FormField } from '@redis-ui/components'
 import { formatLongName } from 'uiSrc/utils'
 
 import { PrimaryButton } from 'uiSrc/components/base/forms/buttons'
@@ -63,7 +63,7 @@ const ExportAction = <T extends { id: string; name?: string }>(
           </Row>
         ))}
       </div>
-      <EuiFormRow style={{ marginTop: 16 }}>
+      <FormField style={{ marginTop: 16 }}>
         <EuiCheckbox
           id="export-passwords"
           name="export-passwords"
@@ -72,7 +72,7 @@ const ExportAction = <T extends { id: string; name?: string }>(
           onChange={(e) => setWithSecrets(e.target.checked)}
           data-testid="export-passwords"
         />
-      </EuiFormRow>
+      </FormField>
       <div className={styles.popoverFooter}>
         <PrimaryButton
           size="small"

redisinsight/ui/src/components/oauth/shared/oauth-form/components/oauth-sso-form/OAuthSsoForm.tsx

@@ -3,10 +3,10 @@ import React, { ChangeEvent, useState } from 'react'
 import {
   EuiFieldText,
   EuiForm,
-  EuiFormRow,
   EuiTitle,
   EuiToolTip,
 } from '@elastic/eui'
+import { FormField } from '@redis-ui/components'
 import { FormikErrors, useFormik } from 'formik'
 import { validateEmail, validateField } from 'uiSrc/utils'
 
@@ -95,7 +95,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
       <EuiForm component="form" onSubmit={formik.handleSubmit}>
         <Row>
           <FlexItem>
-            <EuiFormRow className={styles.formRaw} label="Email">
+            <FormField className={styles.formRaw} label="Email">
               <EuiFieldText
                 name="email"
                 id="sso-email"
@@ -110,7 +110,7 @@ const OAuthSsoForm = ({ onBack, onSubmit }: Props) => {
                   )
                 }}
               />
-            </EuiFormRow>
+            </FormField>
           </FlexItem>
         </Row>
         <Spacer />

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases-result/RedisCloudDatabasesResult.tsx

@@ -7,8 +7,8 @@ import {
   EuiText,
   EuiTitle,
   EuiFieldSearch,
-  EuiFormRow,
 } from '@elastic/eui'
+import { FormField } from '@redis-ui/components'
 import {
   InstanceRedisCloud,
   AddRedisDatabaseStatus,
@@ -100,7 +100,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
             </MessageBar>
           </FlexItem>
           <FlexItem>
-            <EuiFormRow className={styles.searchForm}>
+            <FormField className={styles.searchForm}>
               <EuiFieldSearch
                 placeholder="Search..."
                 className={styles.search}
@@ -109,7 +109,7 @@ const RedisCloudDatabaseListResult = ({ columns, onBack, onView }: Props) => {
                 aria-label="Search"
                 data-testid="search"
               />
-            </EuiFormRow>
+            </FormField>
           </FlexItem>
         </Flex>
         <br />

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-databases/RedisCloudDatabases/RedisCloudDatabases.tsx

@@ -8,12 +8,12 @@ import {
   EuiText,
   EuiTitle,
   EuiFieldSearch,
-  EuiFormRow,
   EuiToolTip,
 } from '@elastic/eui'
 import { map, pick } from 'lodash'
 import { useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
+import { FormField } from '@redis-ui/components'
 
 import { cloudSelector } from 'uiSrc/slices/instances/cloud'
 import { InstanceRedisCloud } from 'uiSrc/slices/interfaces'
@@ -214,7 +214,7 @@ const RedisCloudDatabasesPage = ({
           </FlexItem>
         </Row>
         <FlexItem>
-          <EuiFormRow className={styles.searchForm}>
+          <FormField className={styles.searchForm}>
             <EuiFieldSearch
               placeholder="Search..."
               className={styles.search}
@@ -223,7 +223,7 @@ const RedisCloudDatabasesPage = ({
               aria-label="Search"
               data-testid="search"
             />
-          </EuiFormRow>
+          </FormField>
         </FlexItem>
         <br />
 

redisinsight/ui/src/pages/autodiscover-cloud/redis-cloud-subscriptions/RedisCloudSubscriptions/RedisCloudSubscriptions.tsx

@@ -9,10 +9,10 @@ import {
   EuiText,
   EuiTitle,
   EuiFieldSearch,
-  EuiFormRow,
   EuiToolTip,
 } from '@elastic/eui'
 import cx from 'classnames'
+import { FormField } from '@redis-ui/components'
 import {
   InstanceRedisCloud,
   RedisCloudAccount,
@@ -266,7 +266,7 @@ const RedisCloudSubscriptions = ({
             </MessageBar>
           </FlexItem>
           <FlexItem>
-            <EuiFormRow className={styles.searchForm}>
+            <FormField className={styles.searchForm}>
               <EuiFieldSearch
                 placeholder="Search..."
                 className={styles.search}
@@ -275,7 +275,7 @@ const RedisCloudSubscriptions = ({
                 aria-label="Search"
                 data-testid="search"
               />
-            </EuiFormRow>
+            </FormField>
           </FlexItem>
         </Row>
         <br />

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases-result/components/SentinelDatabasesResult/SentinelDatabasesResult.tsx

@@ -6,10 +6,10 @@ import {
   EuiText,
   EuiTitle,
   EuiFieldSearch,
-  EuiFormRow,
 } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 
+import { FormField } from '@redis-ui/components'
 import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
 import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import MessageBar from 'uiSrc/components/message-bar/MessageBar'
@@ -115,7 +115,7 @@ const SentinelDatabasesResult = ({
           </FlexItem>
         </Row>
         <FlexItem>
-          <EuiFormRow className={styles.searchForm}>
+          <FormField className={styles.searchForm}>
             <EuiFieldSearch
               placeholder="Search..."
               className={styles.search}
@@ -124,7 +124,7 @@ const SentinelDatabasesResult = ({
               aria-label="Search"
               data-testid="search"
             />
-          </EuiFormRow>
+          </FormField>
         </FlexItem>
         <br />
         <div className="itemList databaseList sentinelDatabaseListResult">

redisinsight/ui/src/pages/autodiscover-sentinel/sentinel-databases/components/SentinelDatabases/SentinelDatabases.tsx

@@ -9,11 +9,11 @@ import {
   EuiText,
   EuiTitle,
   EuiFieldSearch,
-  EuiFormRow,
   EuiToolTip,
 } from '@elastic/eui'
 import { useSelector } from 'react-redux'
 
+import { FormField } from '@redis-ui/components'
 import { sentinelSelector } from 'uiSrc/slices/instances/sentinel'
 import { ModifiedSentinelMaster } from 'uiSrc/slices/interfaces'
 import validationErrors from 'uiSrc/constants/validationErrors'
@@ -219,7 +219,7 @@ const SentinelDatabases = ({
             </EuiText>
           </FlexItem>
           <FlexItem>
-            <EuiFormRow className={styles.searchForm}>
+            <FormField className={styles.searchForm}>
               <EuiFieldSearch
                 placeholder="Search..."
                 className={styles.search}
@@ -228,7 +228,7 @@ const SentinelDatabases = ({
                 aria-label="Search"
                 data-testid="search"
               />
-            </EuiFormRow>
+            </FormField>
           </FlexItem>
         </Row>
         <br />

redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx

@@ -3,9 +3,9 @@ import { toNumber } from 'lodash'
 import {
   EuiFieldText,
   EuiFormFieldset,
-  EuiFormRow,
   EuiSuperSelect,
 } from '@elastic/eui'
+import { FormField } from '@redis-ui/components'
 import { MAX_TTL_NUMBER, Maybe, validateTTLNumberForAddKey } from 'uiSrc/utils'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
@@ -54,7 +54,7 @@ const AddKeyCommonFields = (props: Props) => {
           <EuiFormFieldset
             legend={{ children: 'Select key type', display: 'hidden' }}
           >
-            <EuiFormRow label="Key Type*" fullWidth>
+            <FormField label="Key Type*">
               <EuiSuperSelect
                 itemClassName="withColorDefinition"
                 fullWidth
@@ -64,11 +64,11 @@ const AddKeyCommonFields = (props: Props) => {
                 onChange={(value: string) => onChangeType(value)}
                 data-testid="select-key-type"
               />
-            </EuiFormRow>
+            </FormField>
           </EuiFormFieldset>
         </FlexItem>
         <FlexItem grow>
-          <EuiFormRow label={config.keyTTL.label} fullWidth>
+          <FormField label={config.keyTTL.label}>
             <EuiFieldText
               fullWidth
               name={config.keyTTL.name}
@@ -83,10 +83,10 @@ const AddKeyCommonFields = (props: Props) => {
               autoComplete="off"
               data-testid="ttl"
             />
-          </EuiFormRow>
+          </FormField>
         </FlexItem>
       </Row>
-      <EuiFormRow label={config.keyName.label} fullWidth>
+      <FormField label={config.keyName.label}>
         <EuiFieldText
           fullWidth
           name={config.keyName.name}
@@ -100,7 +100,7 @@ const AddKeyCommonFields = (props: Props) => {
           autoComplete="off"
           data-testid="key"
         />
-      </EuiFormRow>
+      </FormField>
     </div>
   )
 }

redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx

@@ -6,13 +6,7 @@ import React, {
   useState,
 } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import {
-  EuiFieldText,
-  EuiFormRow,
-  EuiTextColor,
-  EuiForm,
-  EuiPanel,
-} from '@elastic/eui'
+import { EuiFieldText, EuiForm, EuiPanel } from '@elastic/eui'
 import { toNumber } from 'lodash'
 import {
   isVersionHigherOrEquals,
@@ -32,6 +26,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { FormField } from 'uiSrc/components/base/forms/FormField'
 import {
   CreateHashWithExpireDto,
   HashFieldDto,
@@ -178,7 +173,7 @@ const AddKeyHash = (props: Props) => {
         {(item, index) => (
           <Row align="center">
             <FlexItem grow={2}>
-              <EuiFormRow fullWidth>
+              <FormField>
                 <EuiFieldText
                   fullWidth
                   name={`fieldName-${item.id}`}
@@ -194,10 +189,10 @@ const AddKeyHash = (props: Props) => {
                   }
                   data-testid="field-name"
                 />
-              </EuiFormRow>
+              </FormField>
             </FlexItem>
             <FlexItem grow={2}>
-              <EuiFormRow fullWidth>
+              <FormField>
                 <EuiFieldText
                   fullWidth
                   name={`fieldValue-${item.id}`}
@@ -210,11 +205,11 @@ const AddKeyHash = (props: Props) => {
                   }
                   data-testid="field-value"
                 />
-              </EuiFormRow>
+              </FormField>
             </FlexItem>
             {isTTLAvailable && (
               <FlexItem grow={1}>
-                <EuiFormRow fullWidth>
+                <FormField>
                   <EuiFieldText
                     fullWidth
                     name={`fieldTTL-${item.id}`}
@@ -231,7 +226,7 @@ const AddKeyHash = (props: Props) => {
                     }
                     data-testid="hash-ttl"
                   />
-                </EuiFormRow>
+                </FormField>
               </FlexItem>
             )}
           </Row>

redisinsight/ui/src/pages/browser/components/add-key/AddKeyReJSON/AddKeyReJSON.tsx

@@ -1,12 +1,7 @@
 import React, { FormEvent, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import {
-  EuiFormRow,
-  EuiTextColor,
-  EuiForm,
-  EuiPanel,
-} from '@elastic/eui'
+import { EuiTextColor, EuiForm, EuiPanel } from '@elastic/eui'
 
 import { Maybe, stringToBuffer } from 'uiSrc/utils'
 import { addKeyStateSelector, addReJSONKey } from 'uiSrc/slices/browser/keys'
@@ -19,6 +14,7 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { CreateRejsonRlWithExpireDto } from 'apiSrc/modules/browser/rejson-rl/dto'
 
 import { AddJSONFormConfig as config } from '../constants/fields-config'
@@ -83,7 +79,7 @@ const AddKeyReJSON = (props: Props) => {
 
   return (
     <EuiForm component="form" onSubmit={onFormSubmit}>
-      <EuiFormRow label={config.value.label} fullWidth>
+      <FormField label={config.value.label}>
         <>
           <MonacoJson
             value={ReJSONValue}
@@ -101,7 +97,7 @@ const AddKeyReJSON = (props: Props) => {
             </FlexItem>
           </Row>
         </>
-      </EuiFormRow>
+      </FormField>
 
       <PrimaryButton type="submit" style={{ display: 'none' }}>
         Submit