Add attribute description to Custom Attribute widget input (#783)

CZERTAINLY · Aug 23, 2024 · 268a3f2 · 268a3f2
1 parent ca9bacf
commit 268a3f2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/components/Attributes/CustomAttributeWidget/customAttributeWidget.module.scss b/src/components/Attributes/CustomAttributeWidget/customAttributeWidget.module.scss
@@ -0,0 +1,3 @@
+.formatTextStyle {
+    margin-left: 0.75px;
+}
diff --git a/src/components/Attributes/CustomAttributeWidget/index.tsx b/src/components/Attributes/CustomAttributeWidget/index.tsx
@@ -2,14 +2,15 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { Field, Form } from 'react-final-form';
 import { useDispatch, useSelector } from 'react-redux';
 import Select from 'react-select';
-import { Form as BootstrapForm, Col, Row } from 'reactstrap';
+import { Form as BootstrapForm, Col, FormText, Row } from 'reactstrap';
 import { LockWidgetNameEnum } from 'types/user-interface';
 import { actions as customAttributesActions, selectors as customAttributesSelectors } from '../../../ducks/customAttributes';
 import { AttributeResponseModel, BaseAttributeContentModel, CustomAttributeModel } from '../../../types/attributes';
 import { Resource } from '../../../types/openapi';
 import ContentValueField from '../../Input/DynamicContent/ContentValueField';
 import Widget from '../../Widget';
 import AttributeViewer, { ATTRIBUTE_VIEWER_TYPE } from '../AttributeViewer';
+import style from './customAttributeWidget.module.scss';
 
 export type Props = {
     resource: Resource;
@@ -134,14 +135,17 @@ export default function CustomAttributeWidget({ resource, resourceUuid, attribut
                                 </Col>
                                 <Col xs="6" sm="6" md="6" lg="6" xl="6">
                                     {attribute && (
-                                        <ContentValueField
-                                            descriptor={attribute}
-                                            onSubmit={(uuid, content) => {
-                                                form.change('selectCustomAttribute', undefined);
-                                                setAttribute(undefined);
-                                                addCustomAttribute(uuid, content);
-                                            }}
-                                        />
+                                        <div>
+                                            <ContentValueField
+                                                descriptor={attribute}
+                                                onSubmit={(uuid, content) => {
+                                                    form.change('selectCustomAttribute', undefined);
+                                                    setAttribute(undefined);
+                                                    addCustomAttribute(uuid, content);
+                                                }}
+                                            />
+                                            <FormText className={style.formatTextStyle}>{attribute.description}</FormText>
+                                        </div>
                                     )}
                                 </Col>
                             </Row>