diff --git a/site/src/pages/AgentsPage/AgentSettingsSpendPageView.tsx b/site/src/pages/AgentsPage/AgentSettingsSpendPageView.tsx index 2156a64bf7..5f7fb915d6 100644 --- a/site/src/pages/AgentsPage/AgentSettingsSpendPageView.tsx +++ b/site/src/pages/AgentsPage/AgentSettingsSpendPageView.tsx @@ -415,6 +415,7 @@ export const AgentSettingsSpendPageView: FC< = { component: GroupLimitsSection, args: { groupOverrides: mockGroupOverrides, + groupOrganizationNames: { + "group-1": "acme", + "group-2": "acme", + "group-4": "acme", + }, showGroupForm: false, onShowGroupFormChange: fn(), selectedGroup: null, diff --git a/site/src/pages/AgentsPage/components/LimitsTab/GroupLimitsSection.tsx b/site/src/pages/AgentsPage/components/LimitsTab/GroupLimitsSection.tsx index 3c31a22d21..dcb07674c4 100644 --- a/site/src/pages/AgentsPage/components/LimitsTab/GroupLimitsSection.tsx +++ b/site/src/pages/AgentsPage/components/LimitsTab/GroupLimitsSection.tsx @@ -1,7 +1,8 @@ import { Check } from "lucide-react"; import { type FC, useId, useState } from "react"; +import { Link } from "react-router"; import { getErrorMessage } from "#/api/errors"; -import type { Group } from "#/api/typesGenerated"; +import type { ChatUsageLimitGroupOverride, Group } from "#/api/typesGenerated"; import { Autocomplete } from "#/components/Autocomplete/Autocomplete"; import { AvatarData } from "#/components/Avatar/AvatarData"; import { Button } from "#/components/Button/Button"; @@ -26,14 +27,9 @@ import { SectionHeader } from "../SectionHeader"; interface GroupLimitsSectionProps { hideHeader?: boolean; - groupOverrides: ReadonlyArray<{ - group_id: string; - group_display_name: string; - group_name: string; - group_avatar_url: string; - member_count: number; - spend_limit_micros: number | null; - }>; + groupOverrides: readonly ChatUsageLimitGroupOverride[]; + /** Maps group_id → organization_name for building links to the group page. */ + groupOrganizationNames?: Record; showGroupForm: boolean; onShowGroupFormChange: (show: boolean) => void; selectedGroup: Group | null; @@ -65,6 +61,7 @@ interface GroupLimitsSectionProps { export const GroupLimitsSection: FC = ({ hideHeader, groupOverrides, + groupOrganizationNames, showGroupForm, onShowGroupFormChange, selectedGroup, @@ -111,48 +108,68 @@ export const GroupLimitsSection: FC = ({ - {groupOverrides.map((override) => ( - - - - - {override.member_count} - - {override.spend_limit_micros !== null - ? formatCostMicros(override.spend_limit_micros) - : "Unlimited"} - - -
- - -
-
-
- ))} + {groupOverrides.map((override) => { + const orgName = groupOrganizationNames?.[override.group_id]; + const groupLink = orgName + ? `/organizations/${orgName}/groups/${override.group_name}` + : undefined; + + const avatar = ( + + ); + + return ( + + + {groupLink ? ( + + {avatar} + + ) : ( + avatar + )} + + {override.member_count} + + {override.spend_limit_micros !== null + ? formatCostMicros(override.spend_limit_micros) + : "Unlimited"} + + +
+ + +
+
+
+ ); + })}
) : ( diff --git a/site/src/pages/AgentsPage/components/LimitsTab/GroupOverrideController.tsx b/site/src/pages/AgentsPage/components/LimitsTab/GroupOverrideController.tsx index 2ccd1ae44f..b65e639231 100644 --- a/site/src/pages/AgentsPage/components/LimitsTab/GroupOverrideController.tsx +++ b/site/src/pages/AgentsPage/components/LimitsTab/GroupOverrideController.tsx @@ -37,6 +37,7 @@ type GroupOverrideChildProps = { existingGroupIds: Set; availableGroups: Group[]; groupAutocompleteNoOptionsText: string; + groupOrganizationNames: Record; }; interface GroupOverrideControllerProps { @@ -67,6 +68,10 @@ export const GroupOverrideController: FC = ({ // Derived values. const existingGroupIds = new Set(groupOverrides.map((g) => g.group_id)); const availableGroups = groups.filter((g) => !existingGroupIds.has(g.id)); + const groupOrganizationNames: Record = {}; + for (const g of groups) { + groupOrganizationNames[g.id] = g.organization_name; + } const groupAutocompleteNoOptionsText = isLoadingGroups ? "Loading groups..." : groups.length === 0 @@ -137,5 +142,6 @@ export const GroupOverrideController: FC = ({ existingGroupIds, availableGroups, groupAutocompleteNoOptionsText, + groupOrganizationNames, }); };