cccs-RyanK commented on PR #20876: URL: https://github.com/apache/superset/pull/20876#issuecomment-1199848057
> > Hi all, thanks for the great work on this! I have a few UX/UI suggestions that would better align with Superset's current patterns. > > **Edit properties modal** Instead of putting the applied tags to the right of the tag selection field, I would use the multi-select component and keep the tags inside the bounds of the field (like the multi-select filter field in dashboards): <img alt="Screen Shot 2022-07-28 at 10 49 11 AM" width="250" src="https://user-images.githubusercontent.com/90715511/181603984-0c910a36-fbcc-4024-a976-59a57c953984.png";> > > **Tags view** I would actually create two views here to properly utilize and manage tags. > > > > 1. Tags CRUD > > A Tags page, accessible from the global settings menu, that uses the existing CRUD template to display all tags. Columns in the table could include how many entities are tagged, who created it, etc. This is where the user would manage (edit/add/delete) tags. > > 2. "All entities" view > > To satisfy the need to see all entities with a certain tag applied, I would create another CRUD view that combines dashboards/charts/queries and allows the user to filter by tags. This could be accessible from the main navigation. > > Thanks for working on this! Have a few additional comments. > > **Crud view** I think the field in the filter bar should be a multi select, not a search. Search does not show all of the possible tags and I think it would be hard to remember all of them to choose the right one. > > Our multiple select currently expands in height when multiple values are selected before truncating, so it would have to have fixed height and truncate earlier. > > **Object pages** Do tags have to be displayed in the header? I guess they will be mostly used for searching/grouping things. > > 1. It clutters the header + the question on what is more important comes up. Let's say you have a long name of the chart and 10 tags. I would say that title is more important in this case. How tags would be truncated? > > 2. We are adding something called metadata bar to the header, which will display the most important info about the object. We could add a section "tags" which would display all of the tags on hover for example. Below screenshot on how the metadata bar will look like. > > > <img alt="image" width="1306" src="https://user-images.githubusercontent.com/36897697/181609940-297df6ca-16dc-4765-8bfa-7bb83541acd2.png";> Thank you for the quick feedback @kasiazjc and @jess-dillard ! I agree I think tags are mostly useful in the CRUD views where objects can be grouped/filtered by using tags, and not so much in the headers like you said. For your question on truncating tags, the length of an individual tag's text is limited to 20 characters right now. In terms of truncating the list of tags, there is a maxTags attribute for the TagsList component that can be used to limit the number of tags shown by default. Currently, you can click on the last tag that shows the number of truncated tags to toggle between showing the full list of tags and the truncated list. I really like the idea you mentioned of hovering over the component, and it showing all the tags in a small popup view, but I didn't end up getting around to implementing it in this PR. Here is an example with a dashboard with a long title and too many tags:   Perhaps it would be best to remove the tags from the object headers for now and then consider adding them to the metadata bar when that is introduced? Is there any timeline on when the metadata bar will be pushed? -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
![https://user-images.githubusercontent.com/90715511/181603984-0c910a36-fbcc-4024-a976-59a57c953984.png"](https://user-images.githubusercontent.com/90715511/181603984-0c910a36-fbcc-4024-a976-59a57c953984.png"){kind=link}
![https://user-images.githubusercontent.com/36897697/181609940-297df6ca-16dc-4765-8bfa-7bb83541acd2.png"](https://user-images.githubusercontent.com/36897697/181609940-297df6ca-16dc-4765-8bfa-7bb83541acd2.png"){kind=link}
