Skip to content

Commit

Permalink
[dashboard] Spacing and pill labels
Browse files Browse the repository at this point in the history 
Tool: gitpod/catfood.gitpod.cloud
  • Loading branch information
@filiptronicek
filiptronicek committed Jan 28, 2025
1 parent f392f79 commit 0f78150
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 57 deletions.
77 changes: 46 additions & 31 deletions components/dashboard/src/repositories/list/RepoListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@podkit/dropdown/DropDown";
import PillLabel from "../../components/PillLabel";

type Props = {
configuration: Configuration;
isSuggested: boolean;
handleModifySuggestedRepository: (configurationId: string, suggested: boolean) => void;
handleModifySuggestedRepository?: (configurationId: string, suggested: boolean) => void;
};
export const RepositoryListItem: FC<Props> = ({ configuration, isSuggested, handleModifySuggestedRepository }) => {
const url = usePrettyRepoURL(configuration.cloneUrl);
Expand All @@ -37,8 +38,18 @@ export const RepositoryListItem: FC<Props> = ({ configuration, isSuggested, hand
return (
<TableRow>
<TableCell>
<div className="flex flex-col gap-1 break-words w-52">
<Text className="font-semibold">{configuration.name}</Text>
<div className="flex flex-col gap-1 break-words w-auto md:w-64">
<Text className="font-semibold flex items-center justify-between gap-1">
{configuration.name}
{isSuggested && (
<PillLabel
className="capitalize bg-kumquat-light shrink-0 text-sm hidden xl:block"
type="warn"
>
Suggested
</PillLabel>
)}
</Text>
{/* We show the url on a 2nd line for smaller screens since we hide the column */}
<TextMuted className="inline md:hidden text-sm break-all">{url}</TextMuted>
</div>
Expand Down Expand Up @@ -66,37 +77,41 @@ export const RepositoryListItem: FC<Props> = ({ configuration, isSuggested, hand
<LinkButton href={`/repositories/${configuration.id}`} variant="secondary">
View
</LinkButton>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost">
<Ellipsis size={20} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52">
{isSuggested ? (
<DropdownMenuItem onClick={() => handleModifySuggestedRepository(configuration.id, false)}>
Remove from suggested repos
</DropdownMenuItem>
) : (
<>
{handleModifySuggestedRepository && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost">
<Ellipsis size={20} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-52">
{isSuggested ? (
<DropdownMenuItem
onClick={() => handleModifySuggestedRepository(configuration.id, true)}
onClick={() => handleModifySuggestedRepository(configuration.id, false)}
>
Add to suggested repos
Remove from suggested repos
</DropdownMenuItem>
<DropdownLinkMenuItem
href="https://www.gitpod.io/docs/"
className="gap-1 text-xs"
target="_blank"
rel="noreferrer"
>
Learn about suggestions
<SquareArrowOutUpRight size={12} />
</DropdownLinkMenuItem>
</>
)}
</DropdownMenuContent>
</DropdownMenu>
) : (
<>
<DropdownMenuItem
onClick={() => handleModifySuggestedRepository(configuration.id, true)}
>
Add to suggested repos
</DropdownMenuItem>
<DropdownLinkMenuItem
href="https://www.gitpod.io/docs/"
className="gap-1 text-xs"
target="_blank"
rel="noreferrer"
>
Learn about suggestions
<SquareArrowOutUpRight size={12} />
</DropdownLinkMenuItem>
</>
)}
</DropdownMenuContent>
</DropdownMenu>
)}
</TableCell>
</TableRow>
);
Expand Down
19 changes: 14 additions & 5 deletions components/dashboard/src/repositories/list/RepositoryTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Button } from "@podkit/buttons/Button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@podkit/select/Select";
import { useUpdateOrgSettingsMutation } from "../../data/organizations/update-org-settings-mutation";
import { useOrgSettingsQuery } from "../../data/organizations/org-settings-query";
import { useToast } from "../../components/toasts/Toasts";

type Props = {
configurations: Configuration[];
Expand Down Expand Up @@ -55,6 +56,7 @@ export const RepositoryTable: FC<Props> = ({
}) => {
const updateTeamSettings = useUpdateOrgSettingsMutation();
const { data: settings } = useOrgSettingsQuery();
const { toast } = useToast();

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

await updateTeamSettings.mutateAsync({
onboardingSettings: {
recommendedRepositories: [...newRepositories],
await updateTeamSettings.mutateAsync(
{
onboardingSettings: {
recommendedRepositories: [...newRepositories],
},
},
});
{
onError: (error) => {
toast(`Failed to update recommended repositories: ${error.message}`);
},
},
);
};

return (
Expand Down Expand Up @@ -106,7 +115,7 @@ export const RepositoryTable: FC<Props> = ({
<TableHeader>
<TableRow>
<SortableTableHead
className="w-52"
className="w-auto md:w-64"
columnName="name"
sortOrder={sortBy === "name" ? sortOrder : undefined}
onSort={onSort}
Expand Down
18 changes: 1 addition & 17 deletions components/dashboard/src/teams/TeamOnboarding.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,20 +77,6 @@ export default function TeamOnboardingPage() {
[handleUpdateTeamSettings, internalLink, settings?.onboardingSettings?.recommendedRepositories],
);

const removeRecommendedRepository = useCallback(
async (configurationId: string) => {
const newRepositories = new Set(settings?.onboardingSettings?.recommendedRepositories ?? []);
newRepositories.delete(configurationId);

await updateTeamSettings.mutateAsync({
onboardingSettings: {
recommendedRepositories: [...newRepositories],
},
});
},
[settings?.onboardingSettings?.recommendedRepositories, updateTeamSettings],
);

useEffect(() => {
if (settings) {
setInternalLink(settings.onboardingSettings?.internalLink);
Expand Down Expand Up @@ -129,8 +115,7 @@ export default function TeamOnboardingPage() {
<ConfigurationSettingsField>
<Heading3>Suggested repositories</Heading3>
<Subheading>
Repositories suggested to start workspaces from for new organization members. To set them up,
visit the{" "}
A list of repositories suggested to new organization members. To set them up, visit the{" "}
<Link to="/repositories" className="gp-link">
Repository settings
</Link>{" "}
Expand Down Expand Up @@ -164,7 +149,6 @@ export default function TeamOnboardingPage() {
key={repo.configurationId}
configuration={repo.configuration}
isSuggested={true}
handleModifySuggestedRepository={removeRecommendedRepository}
/>
))}
</TableBody>
Expand Down
8 changes: 4 additions & 4 deletions components/server/src/api/organization-service-api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,14 +358,14 @@ export class OrganizationServiceAPI implements ServiceImpl<typeof OrganizationSe
"there can't be more than 3 recommendedRepositories",
);
}
for (const repo of req.onboardingSettings.recommendedRepositories) {
if (!uuidValidate(repo)) {
for (const configurationId of req.onboardingSettings.recommendedRepositories) {
if (!uuidValidate(configurationId)) {
throw new ApplicationError(ErrorCodes.BAD_REQUEST, "recommendedRepositories must be UUIDs");
}

const project = await this.projectService.getProject(ctxUserId(), repo);
const project = await this.projectService.getProject(ctxUserId(), configurationId);
if (!project) {
throw new ApplicationError(ErrorCodes.BAD_REQUEST, `repository ${repo} not found`);
throw new ApplicationError(ErrorCodes.BAD_REQUEST, `repository ${configurationId} not found`);
}
}
}
Expand Down

0 comments on commit 0f78150

Please sign in to comment.