From 740329693637181749c6dd6f31667af59b3abf3b Mon Sep 17 00:00:00 2001
From: Naumov Alexey <Iamemptyhuh@gmail.com>
Date: Thu, 20 Jan 2022 22:38:46 +0300
Subject: [PATCH] fix(core-blocks): CB-1542 add extra tooltip for labels

---
 .../core-blocks/src/FormControls/InputField.tsx      |  4 +++-
 .../core-blocks/src/FormControls/Textarea.tsx        |  4 +++-
 .../ObjectPropertyInfoForm/RenderField.tsx           | 12 ++++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
index 42187d9e63..13c218dbf9 100644
--- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx
@@ -62,6 +62,7 @@ const INPUT_FIELD_STYLES = composes(
 
 type BaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & {
   description?: string;
+  labelTooltip?: string;
   mod?: 'surface';
   ref?: React.Ref<HTMLInputElement>;
   style?: ComponentStyle;
@@ -105,6 +106,7 @@ export const InputField: InputFieldType = observer(function InputField({
   children,
   className,
   description,
+  labelTooltip,
   mod,
   fill,
   small,
@@ -161,7 +163,7 @@ export const InputField: InputFieldType = observer(function InputField({
 
   return styled(styles)(
     <field className={className} {...use({ small, medium, large, tiny })}>
-      <field-label title={rest.title}>{children}{required && ' *'}</field-label>
+      <field-label title={labelTooltip || rest.title}>{children}{required && ' *'}</field-label>
       <input-container>
         <input
           ref={ref}
diff --git a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
index 54ac67c211..2f182c64c3 100644
--- a/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
+++ b/webapp/packages/core-blocks/src/FormControls/Textarea.tsx
@@ -44,6 +44,7 @@ const styles = css`
 `;
 
 type BaseProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'style'> & ILayoutSizeProps & {
+  labelTooltip?: string;
   mod?: 'surface';
   style?: ComponentStyle;
   embedded?: boolean;
@@ -81,6 +82,7 @@ export const Textarea: TextareaType = observer(function Textarea({
   small,
   medium,
   large,
+  labelTooltip,
   mod,
   embedded,
   onChange = () => { },
@@ -104,7 +106,7 @@ export const Textarea: TextareaType = observer(function Textarea({
 
   return styled(useStyles(baseFormControlStyles, styles, style))(
     <field className={className} {...use({ tiny, small, medium, large, embedded })}>
-      <field-label as='label' title={rest.title}>{children}{required && ' *'}</field-label>
+      <field-label as='label' title={labelTooltip || rest.title}>{children}{required && ' *'}</field-label>
       <textarea
         {...rest}
         value={value ?? ''}
diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
index fcddce16ae..5704c87265 100644
--- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
+++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx
@@ -179,7 +179,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     if (state !== undefined) {
       return (
         <Textarea
-          title={property.description}
+          title={state[property.id!]}
+          labelTooltip={property.description || property.displayName}
           name={property.id!}
           state={state}
           disabled={disabled}
@@ -194,7 +195,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
 
     return (
       <Textarea
-        title={property.description}
+        title={value}
+        labelTooltip={property.description || property.displayName}
         name={property.id!}
         value={value}
         disabled={disabled}
@@ -211,7 +213,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
     return (
       <InputField
         type={password ? 'password' : 'text'}
-        title={property.description}
+        title={state[property.id!]}
+        labelTooltip={property.description || property.displayName}
         name={property.id!}
         state={state}
         defaultValue={defaultValue}
@@ -231,7 +234,8 @@ export const RenderField = observer<RenderFieldProps>(function RenderField({
   return (
     <InputField
       type={password ? 'password' : 'text'}
-      title={property.description}
+      title={value}
+      labelTooltip={property.description || property.displayName}
       name={property.id!}
       value={value}
       defaultValue={defaultValue}