fix: remove old styles from InputField

dbeaver · Sep 27, 2023 · 37ed2ee · 37ed2ee
1 parent 9170a7b
commit 37ed2ee
Show file tree

Hide file tree

Showing 12 changed files with 14 additions and 34 deletions.
diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -7,7 +7,6 @@
  */
 import { observer } from 'mobx-react-lite';
 import { forwardRef, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
-import styled, { use } from 'reshadow';
 
 import type { ComponentStyle } from '@cloudbeaver/core-theming';
 import { isNotNullDefined } from '@cloudbeaver/core-utils';
@@ -161,7 +160,7 @@ export const InputField: InputFieldType = observer(
       return null;
     }
 
-    return styled(propStyles)(
+    return (
       <div data-testid="field" className={s(styles, { ...layoutProps, field: true }, className)}>
         <div data-testid="field-label" title={labelTooltip || rest.title} className={styles.fieldLabel}>
           {children}
@@ -178,7 +177,6 @@ export const InputField: InputFieldType = observer(
             onChange={handleChange}
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
-            {...use({ mod })}
             required={required}
           />
           {loading && (
@@ -198,11 +196,11 @@ export const InputField: InputFieldType = observer(
           )}
         </div>
         {(description || passwordType) && (
-          <div data-testid="field-description" className={s(styles, { fieldDescription: true, valid: !error, invalid: error })}>
+          <div data-testid="field-description" className={s(styles, { fieldDescription: true, invalid: error })}>
             {description}
           </div>
         )}
-      </div>,
+      </div>
     );
   }),
 );
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
@@ -212,7 +212,6 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
           state={state}
           disabled={disabled}
           readOnly={readOnly}
-          mod="surface"
           className={className}
         >
           {property.displayName ?? ''}
@@ -251,7 +250,6 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
         readOnly={readOnly}
         autoHide={autoHide}
         autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
-        mod="surface"
         className={className}
         canShowPassword={canShowPassword}
         onFocus={onFocus}
@@ -273,7 +271,6 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
       disabled={disabled}
       readOnly={readOnly}
       autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
-      mod="surface"
       className={className}
       canShowPassword={canShowPassword}
       onFocus={onFocus}

diff --git a/...stration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm.tsx b/...stration/src/ConfigurationWizard/ServerConfiguration/Form/ServerConfigurationInfoForm.tsx
@@ -22,7 +22,7 @@ export const ServerConfigurationInfoForm = observer<Props>(function ServerConfig
   return (
     <Group form gap>
       <GroupTitle>{translate('administration_configuration_wizard_configuration_server_info')}</GroupTitle>
-      <InputField type="text" name="serverName" state={state.serverConfig} mod="surface" required medium>
+      <InputField type="text" name="serverName" state={state.serverConfig} required medium>
         {translate('administration_configuration_wizard_configuration_server_name')}
       </InputField>
       <InputField
@@ -31,7 +31,6 @@ export const ServerConfigurationInfoForm = observer<Props>(function ServerConfig
         name="serverURL"
         state={state.serverConfig}
         readOnly={serverConfigLoader.resource.distributed}
-        mod="surface"
         required
         medium
       >
@@ -42,7 +41,6 @@ export const ServerConfigurationInfoForm = observer<Props>(function ServerConfig
         type="number"
         name="sessionExpireTime"
         state={state.serverConfig}
-        mod="surface"
         min={1}
         mapState={v => (v === 0 ? 60000 : v ?? 1800000) / 1000 / 60}
         mapValue={v => (v === undefined ? 30 : Number(v) || 1) * 1000 * 60}

diff --git a/...on-administration/src/Administration/ServerConfiguration/ServerConfigurationAdminForm.tsx b/...on-administration/src/Administration/ServerConfiguration/ServerConfigurationAdminForm.tsx
@@ -20,10 +20,10 @@ export const ServerConfigurationAdminForm = observer<Props>(function ServerConfi
   return (
     <Group form gap medium>
       <GroupTitle>{translate('administration_configuration_wizard_configuration_admin')}</GroupTitle>
-      <InputField type="text" name="adminName" state={serverConfig} minLength={6} mod="surface" required tiny>
+      <InputField type="text" name="adminName" state={serverConfig} minLength={6} required tiny>
         {translate('administration_configuration_wizard_configuration_admin_name')}
       </InputField>
-      <InputField type="password" name="adminPassword" state={serverConfig} autoComplete="new-password" mod="surface" required tiny>
+      <InputField type="password" name="adminPassword" state={serverConfig} autoComplete="new-password" required tiny>
         {translate('administration_configuration_wizard_configuration_admin_password')}
       </InputField>
     </Group>

diff --git a/...ministration/src/Administration/Users/MetaParameters/Form/UserInfo/MetaParametersForm.tsx b/...ministration/src/Administration/Users/MetaParameters/Form/UserInfo/MetaParametersForm.tsx
@@ -30,10 +30,10 @@ export const MetaParametersForm = observer<Props>(function MetaParametersForm({
       <Container medium gap>
         <Group form gap>
           <Container wrap gap>
-            <InputField type="text" name="userId" minLength={1} state={user} mod="surface" disabled readOnly required tiny fill>
+            <InputField type="text" name="userId" minLength={1} state={user} disabled readOnly required tiny fill>
               {translate('plugin_user_profile_info_id')}
             </InputField>
-            <InputField type="text" name="displayName" minLength={1} state={user} mod="surface" disabled readOnly required tiny fill>
+            <InputField type="text" name="displayName" minLength={1} state={user} disabled readOnly required tiny fill>
               {translate('plugin_user_profile_info_displayName')}
             </InputField>
           </Container>

diff --git a/...kages/plugin-authentication-administration/src/Administration/Users/UserForm/UserInfo.tsx b/...kages/plugin-authentication-administration/src/Administration/Users/UserForm/UserInfo.tsx
@@ -61,7 +61,6 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
             state={controller.credentials}
             disabled={controller.isSaving}
             readOnly={editing}
-            mod="surface"
             keepSize
             tiny
             required
@@ -78,7 +77,6 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
                 placeholder={editing ? PASSWORD_PLACEHOLDER : ''}
                 disabled={controller.isSaving}
                 canShowPassword={controller.credentials['password'] !== ''}
-                mod="surface"
                 keepSize
                 tiny
                 required
@@ -92,7 +90,6 @@ export const UserInfo: TabContainerPanelComponent<IUserFormProps> = observer(fun
                 placeholder={editing ? PASSWORD_PLACEHOLDER : ''}
                 canShowPassword={controller.credentials['passwordRepeat'] !== ''}
                 disabled={controller.isSaving}
-                mod="surface"
                 keepSize
                 tiny
                 required

diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx
@@ -53,7 +53,6 @@ export const AuthProviderForm = observer<Props>(function AuthProviderForm({ prov
               disabled={authenticate}
               canShowPassword={false}
               autoComplete={`section-authentication section-${provider.id} ${parameter.id}`}
-              mod="surface"
             >
               {parameter.displayName}
             </InputField>

diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx b/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx
@@ -53,10 +53,10 @@ export const NetworkHandlerAuthForm = observer<Props>(function NetworkHandlerAut
       </GroupTitle>
       {ssh && (
         <>
-          <InputField type="text" name="userName" state={state} disabled={disabled} mod="surface">
+          <InputField type="text" name="userName" state={state} disabled={disabled}>
             {translate(`connections_network_handler_${id}_user`, 'connections_network_handler_default_user')}
           </InputField>
-          <InputField type="password" name="password" canShowPassword={false} state={state} disabled={disabled} mod="surface">
+          <InputField type="password" name="password" canShowPassword={false} state={state} disabled={disabled}>
             {passwordLabel}
           </InputField>
         </>

diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx
@@ -236,7 +236,6 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
                 disabled={disabled}
                 readOnly={readonly}
                 autoComplete={`section-${config.driverId || 'driver'} section-jdbc`}
-                mod="surface"
               >
                 {translate('customConnection_url_JDBC')}
               </InputField>
@@ -253,7 +252,7 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
           </Group>
           <Group form gap>
             <Container wrap gap>
-              <InputField type="text" name="name" minLength={1} state={config} disabled={disabled} readOnly={readonly} mod="surface" required fill>
+              <InputField type="text" name="name" minLength={1} state={config} disabled={disabled} readOnly={readonly} required fill>
                 {translate('connections_connection_name')}
               </InputField>
               {!config.template && (
@@ -272,7 +271,6 @@ export const Options: TabContainerPanelComponent<IConnectionFormProps> = observe
                   state={config}
                   disabled={disabled}
                   autoComplete={`section-${config.driverId || 'driver'} section-folder`}
-                  mod="surface"
                   autoHide
                   readOnly
                   tiny

diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx
@@ -118,7 +118,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
               state={handlerState.properties}
               disabled={disabled || !enabled}
               readOnly={readonly}
-              mod="surface"
               required
               small
             >
@@ -130,7 +129,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
               state={handlerState.properties}
               disabled={disabled || !enabled}
               readOnly={readonly}
-              mod="surface"
               required
               tiny
             >
@@ -144,7 +142,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
               state={handlerState}
               disabled={disabled || !enabled}
               readOnly={readonly}
-              mod="surface"
               required={handlerState.savePassword}
               tiny
               fill
@@ -158,7 +155,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
               state={handlerState}
               disabled={disabled || !enabled}
               readOnly={readonly}
-              mod="surface"
               required={!keyAuth && handlerState.savePassword}
               description={passwordSaved ? translate('ui_processing_saved') : undefined}
               tiny
@@ -188,7 +184,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
                   disabled={disabled || !enabled}
                   readOnly={readonly}
                   labelTooltip={aliveIntervalLabel}
-                  mod="surface"
                   tiny
                 >
                   {aliveIntervalLabel}
@@ -200,7 +195,6 @@ export const SSH: TabContainerPanelComponent<Props> = observer(function SSH({ st
                   disabled={disabled || !enabled}
                   readOnly={readonly}
                   labelTooltip={connectTimeoutLabel}
-                  mod="surface"
                   tiny
                 >
                   {connectTimeoutLabel}

diff --git a/webapp/packages/plugin-settings-panel/src/SettingsPanel/SettingsInfoFormField.tsx b/webapp/packages/plugin-settings-panel/src/SettingsPanel/SettingsInfoFormField.tsx
@@ -93,7 +93,6 @@ export const SettingsInfoFormField = observer<SettingsInfoFormFieldProps>(functi
       description={description}
       disabled={disabled}
       readOnly={readOnly}
-      mod="surface"
       className={className}
       small
       onChange={onChange}

diff --git a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfo/UserInfoPanel.tsx b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfo/UserInfoPanel.tsx
@@ -45,13 +45,13 @@ export const UserInfoPanel = observer<Props>(function UserInfoPanel({ user, clas
           <Group form gap>
             <GroupTitle>{translate('plugin_user_profile_info')}</GroupTitle>
             <Container wrap gap>
-              <InputField type="text" name="userId" minLength={1} state={user} mod="surface" readOnly required tiny fill>
+              <InputField type="text" name="userId" minLength={1} state={user} readOnly required tiny fill>
                 {translate('plugin_user_profile_info_id')}
               </InputField>
-              <InputField type="text" name="displayName" minLength={1} state={user} mod="surface" readOnly required tiny fill>
+              <InputField type="text" name="displayName" minLength={1} state={user} readOnly required tiny fill>
                 {translate('plugin_user_profile_info_displayName')}
               </InputField>
-              <InputField type="text" name="authRole" mod="surface" state={user} autoHide readOnly tiny fill>
+              <InputField type="text" name="authRole" state={user} autoHide readOnly tiny fill>
                 {translate('authentication_user_role')}
               </InputField>
             </Container>