Skip to content

[dashboard] Fix workspace entry truncation #4416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

[dashboard] Fix workspace entry truncation #4416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f41b1d
[dashboard] Fix workspace entry truncation
corneliusludmann Jun 7, 2021
4476666
[dashboard] Add tooltip for possibly truncated values in workspace list
corneliusludmann Jun 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions components/dashboard/src/components/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@ import { useState } from 'react';
export interface TooltipProps {
children: React.ReactChild[] | React.ReactChild;
content: string;
className?: string;
}

function Tooltip(props: TooltipProps) {
const [expanded, setExpanded] = useState(false);

return (
<div onMouseLeave={() => setExpanded(false)} onMouseEnter={() => setExpanded(true)} className="relative">
<div>
<div onMouseLeave={() => setExpanded(false)} onMouseEnter={() => setExpanded(true)} className={"relative " + (props.className || "")}>
<div className={props.className}>
{props.children}
</div>
{expanded ?
Expand Down
28 changes: 20 additions & 8 deletions components/dashboard/src/workspaces/WorkspaceEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,19 +86,31 @@ export function WorkspaceEntry({ desc, model, isAdmin, stopWorkspace }: Props) {
<WorkspaceStatusIndicator instance={desc?.latestInstance} />
</div>
<div className="flex flex-col w-3/12">
<a href={startUrl.toString()}><div className="font-medium text-gray-800 dark:text-gray-100 truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.id}</div></a>
<a href={project ? 'https://' + project : undefined}><div className="text-sm overflow-ellipsis truncate text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div></a>
<Tooltip content={ws.id}>
<a href={startUrl.toString()}>
<div className="font-medium text-gray-800 dark:text-gray-100 overflow-ellipsis truncate w-full hover:text-blue-600 dark:hover:text-blue-400">{ws.id}</div>
</a>
</Tooltip>
<Tooltip content={project || 'Unknown'}>
<a href={project ? 'https://' + project : undefined}>
<div className="text-sm overflow-ellipsis truncate w-full text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">{project || 'Unknown'}</div>
</a>
</Tooltip>
</div>
<div className="flex w-4/12 truncate overflow-ellipsis">
<div className="flex flex-col">
<div className="text-gray-500 overflow-ellipsis truncate">{ws.description}</div>
<div className="flex flex-col w-4/12">
<Tooltip content={ws.description}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Adding the tooltip on all element can a) make the interface feel slightly overwelmed, b) feel redandunt on some elements like the workspace name, and introduce some visual imbalance (see screenshots).

Context Changes
Screenshot 2021-06-10 at 2 22 19 AM Screenshot 2021-06-10 at 2 22 10 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, absolutely. Since the truncation is fixed in #4454 already, I'll close this one.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @corneliusludmann! 🏓

<div className="text-gray-500 overflow-ellipsis truncate w-full">{ws.description}</div>
</Tooltip>
<Tooltip content={ws.contextURL}>
<a href={ws.contextURL}>
<div className="text-sm text-gray-400 overflow-ellipsis truncate hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
<div className="text-sm text-gray-400 overflow-ellipsis truncate w-full hover:text-blue-600 dark:hover:text-blue-400">{ws.contextURL}</div>
</a>
</div>
</Tooltip>
</div>
<div className="flex flex-col items-start w-2/12">
<div className="text-gray-500 truncate">{currentBranch}</div>
<Tooltip content={currentBranch} className="w-full">
<div className="text-gray-500 overflow-ellipsis truncate w-full">{currentBranch}</div>
Copy link
Contributor

@gtsiolis gtsiolis Jun 9, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: May I suggest to leave the truncation on and remove most, if not all, tooltips for this iteration? What do you think? 🎈

Ideally, we could make the Context column so that it contains more compact information (see #3594). This way, we would only need a tooltip on the first row of the context column.

Additionally, on the Pending Changes column we could truncate the branch name and offer a copy-to-clipboard button without also having a tooltip.

</Tooltip>
<PendingChangesDropdown workspaceInstance={desc.latestInstance} />
</div>
<div className="flex w-2/12 self-center">
Expand Down