Added Drawer to show the tag profile data #4132
Conversation
| @@ -75,7 +76,7 @@ export const AddOwnerModal = ({ visible, onClose, refetch }: Props) => { | |||
| type: EventType.EntityActionEvent, | |||
| actionType: EntityActionType.UpdateOwnership, | |||
| entityType, | |||
| entityUrn: urn, | |||
| entityUrn: urn || '', | |||
There was a problem hiding this comment.
Why would entityUrn be empty in Add Owner Modal? You are always adding owners to an entity. If this is for adding owners to tag as shown in the videos then should we not send tag URN in here? For all UI interactions we do want analytics. Does the analytics should up correctly?
There was a problem hiding this comment.
Fixed and committed.
There was a problem hiding this comment.
e a separate tag page altogether. We also need to change how the Tag Profile is rendered from the Search page! (It should still be a simple slide out. This would be inside of
Tag.tsx.
Fixed and committed.
There was a problem hiding this comment.
One small additional thing - Can we attempt to use an in place editing box instead of the update description modal. As shown here: https://ant.design/components/typography/ We can use the "editable" property to make the box in-place editable
Fixed and committed
| footer={ | ||
| <> | ||
| <Button onClick={onClose}>Cancel</Button> | ||
| <Button onClick={() => onSubmit(updatedDescription)} disabled={updatedDescription === description}> |
There was a problem hiding this comment.
Please add analytics for this like in AddOwnerModal.tsx
There was a problem hiding this comment.
Fixed and Committed.
| const entityRegistry = useEntityRegistry(); | ||
| const { urn, entityType } = useEntityData(); | ||
| const { entityType } = useEntityData(); |
There was a problem hiding this comment.
entity type needs to be provided as well since it may be a Tag and in other cases will be the main entity of the page
There was a problem hiding this comment.
Fixed and committed.
| export default function EditDescriptionModal({ title, description, onClose, onSubmit, isAddDesc }: Props) { | ||
| const [updatedDescription, setUpdatedDescription] = useState(description || ''); | ||
|
|
||
| return ( | ||
| <Modal | ||
| title={title} | ||
| visible | ||
| width={900} | ||
| onCancel={onClose} | ||
| okText={isAddDesc ? 'Submit' : 'Update'} |
There was a problem hiding this comment.
there is already the src/app/entity/shared/components/legacy/DescriptionModal.tsx Can we use that instead? if not, can we refactor it so it can be used by both schemas and tags?
There was a problem hiding this comment.
Fixed and committed.
| <EditIcon twoToneColor="#52c41a" onClick={() => setShowEditModal(true)} /> | ||
| <EditDescriptionText> Edit Description</EditDescriptionText> | ||
| </> |
There was a problem hiding this comment.
lets make the text clickable as well
There was a problem hiding this comment.
Removed the text as suggested
| useEffect(() => { | ||
| setUpdatedDescription(description); | ||
| // Manual Color Set-Up, Need to set once it will come from backend | ||
| setColorValue(hexColor); | ||
| }, [description, hexColor]); |
There was a problem hiding this comment.
these two actions should be in their own useEffects or I think some strange behavior may occur.
There was a problem hiding this comment.
Fixed and committed.
| const allSearchResultsByType = useGetAllEntitySearchResults({ | ||
| query: entityAndSchemaQuery, | ||
| start: 0, | ||
| count: 1, | ||
| filters: [], | ||
| }); | ||
|
|
||
| const statsLoading = Object.keys(allSearchResultsByType).some((type) => { | ||
| return allSearchResultsByType[type].loading; | ||
| }); | ||
|
|
||
| const someStats = | ||
| !statsLoading && | ||
| Object.keys(allSearchResultsByType).some((type) => { | ||
| return allSearchResultsByType[type]?.data?.search.total > 0; |
There was a problem hiding this comment.
while you're at it, can you switch this to using the all entities search? For example of usage: https://github.com/linkedin/datahub/blob/master/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearch.tsx#L77. This only has 1 API call total while this deprecated approach has many.
| {description.length === 0 ? ( | ||
| <> | ||
| <NoDescriptionText>No Description</NoDescriptionText> | ||
| {EditButton} |
There was a problem hiding this comment.
the spacing on this edit button looks a bit off from the video. Can you give it a bit more space between description and edit button?
| )} | ||
| <Divider /> | ||
| {/* Tag Charts, Datasets and Owners */} | ||
| <HeaderLayout> |
There was a problem hiding this comment.
This isn't really a header since its at the bottom of the pane? Maybe DetailsLayout?
There was a problem hiding this comment.
Fixed and Committed.
| `; | ||
|
|
||
| const ColorPickerButton = styled.div` | ||
| width: 20px; |
There was a problem hiding this comment.
Let's make this slightly smaller. Maybe 16x16px?
| <StyledTag | ||
| style={{ cursor: 'pointer' }} | ||
| onClick={() => showTagProfileDrawer(tag.tag.urn)} | ||
| $colorHash={tag.tag.urn} |
There was a problem hiding this comment.
The color should now come from whatever was chosen :)
There was a problem hiding this comment.
One small additional thing - Can we attempt to use an in place editing box instead of the update description modal. As shown here: https://ant.design/components/typography/ We can use the "editable" property to make the box in-place editable
|
We will need to make changes to |
|
Modify the Tag Profile Page |
| @@ -6,7 +6,7 @@ const generateColor = new ColorHash({ | |||
| saturation: 0.9, | |||
| }); | |||
|
|
|||
| export const StyledTag = styled(Tag)<{ $colorHash?: string }>` | |||
| export const StyledTag = styled(Tag)<{ $colorHash?: string | null }>` | |||
There was a problem hiding this comment.
I don't think that colorHash is what we want here - We need the styled tag to have the exact same color as what is the field of colorHex inside of the properties object
There was a problem hiding this comment.
Fixed the style tag issue
Side-drawer to show tag profile
* Added color-picker to change the color of the tag
* Added option to edit the description of the tag
* Added a button to add Owner's
* Added a link to redirect the datasets page
* Added a link to redirect the charts page
* Added a button at the bottom to close the side drawer
Tag_Profile_Drawer.mp4
Checklist