diff --git a/datahub-web-react/src/app/entity/shared/tabs/Properties/StructuredPropertyValue.tsx b/datahub-web-react/src/app/entity/shared/tabs/Properties/StructuredPropertyValue.tsx index a8b4e6607b25e..b1a01f2b69fe1 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Properties/StructuredPropertyValue.tsx +++ b/datahub-web-react/src/app/entity/shared/tabs/Properties/StructuredPropertyValue.tsx @@ -1,7 +1,7 @@ import Icon from '@ant-design/icons/lib/components/Icon'; -import React from 'react'; +import React, { useState } from 'react'; import Highlight from 'react-highlighter'; -import { Typography } from 'antd'; +import { Button, Typography } from 'antd'; import styled from 'styled-components'; import { ValueColumnData } from './types'; import { ANTD_GRAY } from '../../constants'; @@ -30,14 +30,27 @@ const IconWrapper = styled.span` margin-right: 4px; `; +const StyledButton = styled(Button)` + margin-top: 2px; +`; + interface Props { value: ValueColumnData; isRichText?: boolean; filterText?: string; } +const MAX_CHARACTERS = 200; + export default function StructuredPropertyValue({ value, isRichText, filterText }: Props) { const entityRegistry = useEntityRegistry(); + const [showMore, setShowMore] = useState(false); + + const toggleShowMore = () => { + setShowMore(!showMore); + }; + + const valueAsString = value?.value?.toString() ?? ''; return ( @@ -60,7 +73,16 @@ export default function StructuredPropertyValue({ value, isRichText, filterText {isRichText ? ( ) : ( - {value.value?.toString()} + <> + + {showMore ? valueAsString : valueAsString?.substring(0, MAX_CHARACTERS)} + + {valueAsString?.length > MAX_CHARACTERS && ( + + {showMore ? 'Show less' : 'Show more'} + + )} + )} )}