Skip to content

Commit 0f78150

Browse files
filiptronicekfiliptronicek
committed
[dashboard] Spacing and pill labels
Tool: gitpod/catfood.gitpod.cloud
1 parent f392f79 commit 0f78150

File tree

4 files changed

+65
-57
lines changed

4 files changed

+65
-57
lines changed

‎components/dashboard/src/repositories/list/RepoListItem.tsx‎

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@ import {
2020
DropdownMenuItem,
2121
DropdownMenuTrigger,
2222
} from "@podkit/dropdown/DropDown";
23+
import PillLabel from "../../components/PillLabel";
2324

2425
type Props = {
2526
configuration: Configuration;
2627
isSuggested: boolean;
27-
handleModifySuggestedRepository: (configurationId: string, suggested: boolean) => void;
28+
handleModifySuggestedRepository?: (configurationId: string, suggested: boolean) => void;
2829
};
2930
export const RepositoryListItem: FC<Props> = ({ configuration, isSuggested, handleModifySuggestedRepository }) => {
3031
const url = usePrettyRepoURL(configuration.cloneUrl);
@@ -37,8 +38,18 @@ export const RepositoryListItem: FC<Props> = ({ configuration, isSuggested, hand
3738
return (
3839
<TableRow>
3940
<TableCell>
40-
<div className="flex flex-col gap-1 break-words w-52">
41-
<Text className="font-semibold">{configuration.name}</Text>
41+
<div className="flex flex-col gap-1 break-words w-auto md:w-64">
42+
<Text className="font-semibold flex items-center justify-between gap-1">
43+
{configuration.name}
44+
{isSuggested && (
45+
<PillLabel
46+
className="capitalize bg-kumquat-light shrink-0 text-sm hidden xl:block"
47+
type="warn"
48+
>
49+
Suggested
50+
</PillLabel>
51+
)}
52+
</Text>
4253
{/* We show the url on a 2nd line for smaller screens since we hide the column */}
4354
<TextMuted className="inline md:hidden text-sm break-all">{url}</TextMuted>
4455
</div>
@@ -66,37 +77,41 @@ export const RepositoryListItem: FC<Props> = ({ configuration, isSuggested, hand
6677
<LinkButton href={`/repositories/${configuration.id}`} variant="secondary">
6778
View
6879
</LinkButton>
69-
<DropdownMenu>
70-
<DropdownMenuTrigger asChild>
71-
<Button variant="ghost">
72-
<Ellipsis size={20} />
73-
</Button>
74-
</DropdownMenuTrigger>
75-
<DropdownMenuContent className="w-52">
76-
{isSuggested ? (
77-
<DropdownMenuItem onClick={() => handleModifySuggestedRepository(configuration.id, false)}>
78-
Remove from suggested repos
79-
</DropdownMenuItem>
80-
) : (
81-
<>
80+
{handleModifySuggestedRepository && (
81+
<DropdownMenu>
82+
<DropdownMenuTrigger asChild>
83+
<Button variant="ghost">
84+
<Ellipsis size={20} />
85+
</Button>
86+
</DropdownMenuTrigger>
87+
<DropdownMenuContent className="w-52">
88+
{isSuggested ? (
8289
<DropdownMenuItem
83-
onClick={() => handleModifySuggestedRepository(configuration.id, true)}
90+
onClick={() => handleModifySuggestedRepository(configuration.id, false)}
8491
>
85-
Add to suggested repos
92+
Remove from suggested repos
8693
</DropdownMenuItem>
87-
<DropdownLinkMenuItem
88-
href="https://www.gitpod.io/docs/"
89-
className="gap-1 text-xs"
90-
target="_blank"
91-
rel="noreferrer"
92-
>
93-
Learn about suggestions
94-
<SquareArrowOutUpRight size={12} />
95-
</DropdownLinkMenuItem>
96-
</>
97-
)}
98-
</DropdownMenuContent>
99-
</DropdownMenu>
94+
) : (
95+
<>
96+
<DropdownMenuItem
97+
onClick={() => handleModifySuggestedRepository(configuration.id, true)}
98+
>
99+
Add to suggested repos
100+
</DropdownMenuItem>
101+
<DropdownLinkMenuItem
102+
href="https://www.gitpod.io/docs/"
103+
className="gap-1 text-xs"
104+
target="_blank"
105+
rel="noreferrer"
106+
>
107+
Learn about suggestions
108+
<SquareArrowOutUpRight size={12} />
109+
</DropdownLinkMenuItem>
110+
</>
111+
)}
112+
</DropdownMenuContent>
113+
</DropdownMenu>
114+
)}
100115
</TableCell>
101116
</TableRow>
102117
);

‎components/dashboard/src/repositories/list/RepositoryTable.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Button } from "@podkit/buttons/Button";
1919
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@podkit/select/Select";
2020
import { useUpdateOrgSettingsMutation } from "../../data/organizations/update-org-settings-mutation";
2121
import { useOrgSettingsQuery } from "../../data/organizations/org-settings-query";
22+
import { useToast } from "../../components/toasts/Toasts";
2223

2324
type Props = {
2425
configurations: Configuration[];
@@ -55,6 +56,7 @@ export const RepositoryTable: FC<Props> = ({
5556
}) => {
5657
const updateTeamSettings = useUpdateOrgSettingsMutation();
5758
const { data: settings } = useOrgSettingsQuery();
59+
const { toast } = useToast();
5860

5961
const updateRecommendedRepository = async (configurationId: string, suggested: boolean) => {
6062
const newRepositories = new Set(settings?.onboardingSettings?.recommendedRepositories ?? []);
@@ -64,11 +66,18 @@ export const RepositoryTable: FC<Props> = ({
6466
newRepositories.delete(configurationId);
6567
}
6668

67-
await updateTeamSettings.mutateAsync({
68-
onboardingSettings: {
69-
recommendedRepositories: [...newRepositories],
69+
await updateTeamSettings.mutateAsync(
70+
{
71+
onboardingSettings: {
72+
recommendedRepositories: [...newRepositories],
73+
},
7074
},
71-
});
75+
{
76+
onError: (error) => {
77+
toast(`Failed to update recommended repositories: ${error.message}`);
78+
},
79+
},
80+
);
7281
};
7382

7483
return (
@@ -106,7 +115,7 @@ export const RepositoryTable: FC<Props> = ({
106115
<TableHeader>
107116
<TableRow>
108117
<SortableTableHead
109-
className="w-52"
118+
className="w-auto md:w-64"
110119
columnName="name"
111120
sortOrder={sortBy === "name" ? sortOrder : undefined}
112121
onSort={onSort}

‎components/dashboard/src/teams/TeamOnboarding.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -77,20 +77,6 @@ export default function TeamOnboardingPage() {
7777
[handleUpdateTeamSettings, internalLink, settings?.onboardingSettings?.recommendedRepositories],
7878
);
7979

80-
const removeRecommendedRepository = useCallback(
81-
async (configurationId: string) => {
82-
const newRepositories = new Set(settings?.onboardingSettings?.recommendedRepositories ?? []);
83-
newRepositories.delete(configurationId);
84-
85-
await updateTeamSettings.mutateAsync({
86-
onboardingSettings: {
87-
recommendedRepositories: [...newRepositories],
88-
},
89-
});
90-
},
91-
[settings?.onboardingSettings?.recommendedRepositories, updateTeamSettings],
92-
);
93-
9480
useEffect(() => {
9581
if (settings) {
9682
setInternalLink(settings.onboardingSettings?.internalLink);
@@ -129,8 +115,7 @@ export default function TeamOnboardingPage() {
129115
<ConfigurationSettingsField>
130116
<Heading3>Suggested repositories</Heading3>
131117
<Subheading>
132-
Repositories suggested to start workspaces from for new organization members. To set them up,
133-
visit the{" "}
118+
A list of repositories suggested to new organization members. To set them up, visit the{" "}
134119
<Link to="/repositories" className="gp-link">
135120
Repository settings
136121
</Link>{" "}
@@ -164,7 +149,6 @@ export default function TeamOnboardingPage() {
164149
key={repo.configurationId}
165150
configuration={repo.configuration}
166151
isSuggested={true}
167-
handleModifySuggestedRepository={removeRecommendedRepository}
168152
/>
169153
))}
170154
</TableBody>

‎components/server/src/api/organization-service-api.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -358,14 +358,14 @@ export class OrganizationServiceAPI implements ServiceImpl<typeof OrganizationSe
358358
"there can't be more than 3 recommendedRepositories",
359359
);
360360
}
361-
for (const repo of req.onboardingSettings.recommendedRepositories) {
362-
if (!uuidValidate(repo)) {
361+
for (const configurationId of req.onboardingSettings.recommendedRepositories) {
362+
if (!uuidValidate(configurationId)) {
363363
throw new ApplicationError(ErrorCodes.BAD_REQUEST, "recommendedRepositories must be UUIDs");
364364
}
365365

366-
const project = await this.projectService.getProject(ctxUserId(), repo);
366+
const project = await this.projectService.getProject(ctxUserId(), configurationId);
367367
if (!project) {
368-
throw new ApplicationError(ErrorCodes.BAD_REQUEST, `repository ${repo} not found`);
368+
throw new ApplicationError(ErrorCodes.BAD_REQUEST, `repository ${configurationId} not found`);
369369
}
370370
}
371371
}

0 commit comments

Comments
 (0)