Mar 17, 2025 · Mar 11, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 12, 2025
diff --git a/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx b/site/src/pages/WorkspacesPage/WorkspacesEmpty.tsx
 const defaultMessage =
 "A workspace is your personal, customizable development environment.";
 const defaultImage = (
 <div
 css={{
 maxWidth: "50%",
 height: 272,
 overflow: "hidden",
 marginTop: 48,
 opacity: 0.85,

 "& img": {
 maxWidth: "100%",
 },
 }}
 >
 <img src="/featured/workspaces.webp" alt="" />
 <div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
 <img src="/featured/workspaces.webp" alt="" className="max-w-full" />
 </div>
 );

 <Link to="/templates">Go to templates</Link>
 </Button>
 }
 css={{
 paddingBottom: 0,
 }}
 className="pb-0"
 image={defaultImage}
 />
 );
 <TableEmpty
 message={defaultTitle}
 description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
 css={{
 paddingBottom: 0,
 }}
 className="pb-0"
 image={defaultImage}
 />
 );
 description={`${defaultMessage} Select one template below to start.`}
 cta={
 <div>
 <div
 css={{
 display: "flex",
 flexWrap: "wrap",
 gap: 16,
 marginBottom: 24,
 justifyContent: "center",
 maxWidth: "800px",
 }}
 >
 <div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
 {featuredTemplates?.map((t) => (
 <Link
 key={t.id}
 to={`${getLink(
 linkToTemplate(t.organization_name, t.name),
 )}/workspace`}
 css={(theme) => ({
 width: "320px",
 padding: 16,
 borderRadius: 6,
 border: `1px solid ${theme.palette.divider}`,
 textAlign: "left",
 display: "flex",
 gap: 16,
 textDecoration: "none",
 color: "inherit",

 "&:hover": {
 backgroundColor: theme.palette.background.paper,
 },
 })}
 className="w-[320px] p-4 rounded-md border border-solid border-surface-quaternary text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
 >
 <divcss={{ flexShrink: 0, paddingTop: 4 }}>
 <divclassName="flex-shrink-0 pt-1">
 <Avatar variant="icon" src={t.icon} fallback={t.name} />
 </div>

 <div css={{ width: "100%", minWidth: "0" }}>
 <h4
 css={{
 fontSize: 14,
 fontWeight: 600,
 margin: 0,
 overflow: "hidden",
 textOverflow: "ellipsis",
 whiteSpace: "nowrap",
 }}
 >
 <div className="w-full min-w-0">
 <h4 className="text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap">
 {t.display_name || t.name}
 </h4>

 <p
 css={(theme) => ({
 fontSize: 13,
 color: theme.palette.text.secondary,
 lineHeight: "1.4",
 margin: 0,
 paddingTop: "4px",

 // We've had users plug URLs directly into the
 // descriptions, when those URLS have no hyphens or other
 // easy semantic breakpoints. Need to set this to ensure
 // those URLs don't break outside their containing boxes
 wordBreak: "break-word",
 })}
 // We've had users plug URLs directly into the
 // descriptions, when those URLS have no hyphens or other
 // easy semantic breakpoints. Need to set this to ensure
 // those URLs don't break outside their containing boxes
 className="text-sm text-gray-400 leading-[1.4] m-0 pt-1 break-words"
 >
 {t.description}
 </p>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,20 +25,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
		const defaultMessage =
		"A workspace is your personal, customizable development environment.";
		const defaultImage = (
		<div
		css={{
		maxWidth: "50%",
		height: 272,
		overflow: "hidden",
		marginTop: 48,
		opacity: 0.85,

		"& img": {
		maxWidth: "100%",
		},
		}}
		>
		<img src="/featured/workspaces.webp" alt="" />
		<div className="max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85">
		<img src="/featured/workspaces.webp" alt="" className="max-w-full" />
		</div>
		);

Expand All		@@ -56,9 +44,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
		<Link to="/templates">Go to templates</Link>
		</Button>
		}
		css={{
		paddingBottom: 0,
		}}
		className="pb-0"
		image={defaultImage}
		/>
		);
Expand All		@@ -69,9 +55,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
		<TableEmpty
		message={defaultTitle}
		description={`${defaultMessage} There are no templates available, but you will see them here once your admin adds them.`}
		css={{
		paddingBottom: 0,
		}}
		className="pb-0"
		image={defaultImage}
		/>
		);
Expand All		@@ -83,70 +67,30 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
		description={`${defaultMessage} Select one template below to start.`}
		cta={
		<div>
		<div
		css={{
		display: "flex",
		flexWrap: "wrap",
		gap: 16,
		marginBottom: 24,
		justifyContent: "center",
		maxWidth: "800px",
		}}
		>
		<div className="flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]">
		{featuredTemplates?.map((t) => (
		<Link
		key={t.id}
		to={`${getLink(
		linkToTemplate(t.organization_name, t.name),
		)}/workspace`}
		css={(theme) => ({
		width: "320px",
		padding: 16,
		borderRadius: 6,
		border: `1px solid ${theme.palette.divider}`,
		textAlign: "left",
		display: "flex",
		gap: 16,
		textDecoration: "none",
		color: "inherit",

		"&:hover": {
		backgroundColor: theme.palette.background.paper,
		},
		})}
		className="w-[320px] p-4 rounded-md border border-solid border-surface-quaternary text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
		>
		<divcss={{ flexShrink: 0, paddingTop: 4 }}>
		<divclassName="flex-shrink-0 pt-1">
		<Avatar variant="icon" src={t.icon} fallback={t.name} />
		</div>

		<div css={{ width: "100%", minWidth: "0" }}>
		<h4
		css={{
		fontSize: 14,
		fontWeight: 600,
		margin: 0,
		overflow: "hidden",
		textOverflow: "ellipsis",
		whiteSpace: "nowrap",
		}}
		>
		<div className="w-full min-w-0">
		<h4 className="text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap">
		{t.display_name \|\| t.name}
		</h4>

		<p
		css={(theme) => ({
		fontSize: 13,
		color: theme.palette.text.secondary,
		lineHeight: "1.4",
		margin: 0,
		paddingTop: "4px",

		// We've had users plug URLs directly into the
		// descriptions, when those URLS have no hyphens or other
		// easy semantic breakpoints. Need to set this to ensure
		// those URLs don't break outside their containing boxes
		wordBreak: "break-word",
		})}
		// We've had users plug URLs directly into the
		// descriptions, when those URLS have no hyphens or other
		// easy semantic breakpoints. Need to set this to ensure
		// those URLs don't break outside their containing boxes
aslilac marked this conversation as resolved. Show resolvedHide resolved
		className="text-sm text-gray-400 leading-[1.4] m-0 pt-1 break-words"
		>
		{t.description}
		</p>
Expand Down