Skip to content

[dashboard] user visible rename team->organization #16050

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

Merged
merged 1 commit into from
Jan 31, 2023
Merged

[dashboard] user visible rename team->organization #16050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 8 additions & 6 deletions components/dashboard/src/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ export default function Menu() {
"users",
"workspaces",
"teams",
"orgs",
].includes(resource)
) {
return resource;
Expand Down Expand Up @@ -118,6 +119,7 @@ export default function Menu() {
"usage",
"plans",
"teams",
"orgs",
"variables",
"keys",
"integrations",
Expand Down Expand Up @@ -282,8 +284,8 @@ export default function Menu() {
<div className="p-1 text-base text-gray-500 dark:text-gray-400 border-gray-800">
<PillMenuItem
additionalClasses="border-2 border-gray-200 dark:border-gray-700 border-dashed"
name="New Team →"
link="/teams/new"
name="New Organization →"
link="/orgs/new"
/>
</div>
);
Expand Down Expand Up @@ -330,10 +332,10 @@ export default function Menu() {
.sort((a, b) => (a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1)),
{
slug: "new",
title: "Create a new team",
title: "Create a new organization",
customContent: (
<div className="w-full text-gray-400 flex items-center">
<span className="flex-1 font-semibold">New Team</span>
<span className="flex-1 font-semibold">New Organization</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" className="w-3.5">
<path
fill="currentColor"
Expand All @@ -344,7 +346,7 @@ export default function Menu() {
</svg>
</div>
),
link: "/teams/new",
link: "/orgs/new",
},
];
const classes =
Expand All @@ -370,7 +372,7 @@ export default function Menu() {
d="M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z"
fill="#78716C"
/>
<title>Toggle team selection menu</title>
<title>Toggle organization selection menu</title>
</svg>
</div>
</ContextMenu>
Expand Down
6 changes: 3 additions & 3 deletions components/dashboard/src/admin/TeamsSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import Pagination from "../Pagination/Pagination";

export default function TeamsSearchPage() {
return (
<PageWithAdminSubMenu title="Teams" subtitle="Search and manage teams.">
<PageWithAdminSubMenu title="Organizations" subtitle="Search and manage organizations.">
<TeamsSearch />
</PageWithAdminSubMenu>
);
Expand Down Expand Up @@ -104,7 +104,7 @@ export function TeamsSearch() {
</div>
<input
type="search"
placeholder="Search Teams"
placeholder="Search Organizations"
onKeyDown={(k) => k.key === "Enter" && search()}
onChange={(v) => {
setSearchTerm(v.target.value.trim());
Expand Down Expand Up @@ -147,7 +147,7 @@ export function TeamsSearch() {
return (
<Link
key={"pr-" + props.team.name}
to={"/admin/teams/" + props.team.id}
to={"/admin/orgs/" + props.team.id}
data-analytics='{"button_type":"sidebar_menu"}'
>
<div className="rounded-xl whitespace-nowrap flex py-6 px-6 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/admin/admin-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export function getAdminMenu() {
link: ["/admin/projects"],
},
{
title: "Teams",
link: ["/admin/teams"],
title: "Organizationss",
link: ["/admin/orgs"],
},
{
title: "Blocked Repositories",
Expand Down
14 changes: 10 additions & 4 deletions components/dashboard/src/app/AppRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ import {
settingsPathPreferences,
settingsPathTeams,
settingsPathTeamsJoin,
settingsPathTeamsNew,
settingsPathOrgs,
settingsPathOrgsJoin,
settingsPathOrgsNew,
settingsPathVariables,
settingsPathSSHKeys,
usagePathMain,
Expand Down Expand Up @@ -198,7 +200,7 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
<Route path="/from-referrer" exact component={FromReferrer} />

<AdminRoute path="/admin/users" component={UserSearch} />
<AdminRoute path="/admin/teams" component={TeamsSearch} />
<AdminRoute path="/admin/orgs" component={TeamsSearch} />
<AdminRoute path="/admin/workspaces" component={WorkspacesSearch} />
<AdminRoute path="/admin/projects" component={ProjectsSearch} />
<AdminRoute path="/admin/blocked-repositories" component={BlockedRepositories} />
Expand Down Expand Up @@ -248,11 +250,15 @@ export const AppRoutes: FunctionComponent<AppRoutesProps> = ({ user, teams }) =>
}}
/>
</Route>
{/* TODO remove these navigation after a few weeks */}
<Route path={settingsPathTeams}>
<Route exact path={settingsPathTeams} component={Teams} />
<Route exact path={settingsPathTeamsNew} component={NewTeam} />
<Route exact path={settingsPathTeamsJoin} component={JoinTeam} />
</Route>
<Route path={settingsPathOrgs}>
<Route exact path={settingsPathOrgs} component={Teams} />
<Route exact path={settingsPathOrgsNew} component={NewTeam} />
<Route exact path={settingsPathOrgsJoin} component={JoinTeam} />
</Route>
{(teams || []).map((team) => (
<Route path={`/t/${team.slug}`} key={team.slug}>
<Route exact path={`/t/${team.slug}`}>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/components/BillingAccountSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
return;
}

// Fetch the list of teams we can actually attribute to
// Fetch the list of orgs we can actually attribute to
getGitpodService()
.server.listAvailableUsageAttributionIds()
.then((attrIds) => {
Expand Down Expand Up @@ -59,7 +59,7 @@ export function BillingAccountSelector(props: { onSelected?: () => void }) {
(await teamsService.getTeam({ teamId: team!.id })).team?.members || [],
);
} catch (error) {
console.warn("Could not get members of team", team, error);
console.warn("Could not get members of org", team, error);
}
}),
).then(() => setMembersByTeam(members));
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/UsageBasedBillingConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default function UsageBasedBillingConfig({ attributionId }: Props) {
<h2 className="text-gray-500">
{attributionId && AttributionId.parse(attributionId)?.kind === "user"
? "Manage billing for your personal account."
: "Manage billing for your team."}
: "Manage billing for your organization."}
</h2>
<div className="max-w-xl flex flex-col">
{errorMessage && (
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/components/UsageLimitReachedModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function UsageLimitReachedModal(p: { hints: any }) {
You have reached the <strong>usage limit</strong> of your billing account.
</Alert>
<p className="mt-3 text-base text-gray-600 dark:text-gray-300">
{"Contact a team owner "}
{"Contact an organization owner "}
{attributedTeamName && (
<>
of <strong>{attributedTeamName} </strong>
Expand Down
7 changes: 2 additions & 5 deletions components/dashboard/src/components/UsageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,9 +174,6 @@ function UsageView({ attributionId }: UsageViewProps) {
};

const currentPaginatedResults = usagePage?.usageEntriesList.filter((u) => u.kind === "workspaceinstance") ?? [];

const headerTitle = attributionId.kind === "team" ? "Team Usage" : "Personal Usage";

const DateDisplay = forwardRef((arg: any, ref: any) => (
<div
className="px-2 py-0.5 text-gray-500 bg-gray-50 dark:text-gray-400 dark:bg-gray-800 rounded-md cursor-pointer flex items-center hover:bg-gray-100 dark:hover:bg-gray-700"
Expand Down Expand Up @@ -209,7 +206,7 @@ function UsageView({ attributionId }: UsageViewProps) {
<Header
title={
<div className="flex items-baseline">
<h1 className="tracking-tight">{headerTitle}</h1>
<h1 className="tracking-tight">Usage</h1>
<h2 className="ml-3">(updated every 15 minutes).</h2>
</div>
}
Expand Down Expand Up @@ -281,7 +278,7 @@ function UsageView({ attributionId }: UsageViewProps) {
{" "}
workspaces
</a>{" "}
in {startDate.format("MMMM YYYY")} or checked your other teams?
in {startDate.format("MMMM YYYY")} or checked your other organizations?
</p>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/contexts/FeatureFlagContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const FeatureFlagContextProvider: React.FC = ({ children }) => {

for (const [flagName, config] of Object.entries(featureFlags)) {
const value = async () => {
// First check if the flag is non-default for any of the teams
// First check if the flag is non-default for any of the orgs
for (const team of teams || []) {
const flagValue = await getExperimentsClient().getValueAsync(flagName, config.defaultValue, {
user,
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/hooks/use-user-and-teams-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const useUserAndTeamsLoader = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

// TODO: Can this check happen when we load the teams rather than a separate effect?
// TODO: Can this check happen when we load the orgs rather than a separate effect?
useEffect(() => {
if (!teams) {
return;
Expand Down
22 changes: 5 additions & 17 deletions components/dashboard/src/projects/NewProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ export default function NewProject() {
<p className="text-gray-500 text-center text-base">
Projects allow you to manage prebuilds and workspaces for your repository.{" "}
<a
href="https://www.gitpod.io/docs/teams-and-projects"
href="https://www.gitpod.io/docs/orgs-and-projects"
target="_blank"
rel="noreferrer"
className="gp-link"
Expand Down Expand Up @@ -527,23 +527,11 @@ export default function NewProject() {
};

const renderSelectTeam = () => {
const userFullName = user?.fullName || user?.name || "...";
const teamsToRender = teams || [];
return (
<>
<p className="mt-2 text-gray-500 text-center text-base">Select team or personal account</p>
<p className="mt-2 text-gray-500 text-center text-base">Select organization</p>
<div className="mt-14 flex flex-col space-y-2">
<label
key={`user-${userFullName}`}
className={`w-80 px-4 py-3 flex space-x-3 items-center cursor-pointer rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800`}
onClick={() => setSelectedTeamOrUser(user)}
>
<input type="radio" />
<div className="flex-grow overflow-ellipsis truncate flex flex-col">
<span className="font-semibold">{userFullName}</span>
<span className="text-sm text-gray-400">Personal account</span>
</div>
</label>
{teamsToRender.map((t) => (
<label
key={`team-${t.name}`}
Expand All @@ -558,7 +546,7 @@ export default function NewProject() {
? `${teamMembers[t.id].length} member${
teamMembers[t.id].length === 1 ? "" : "s"
}`
: "Team"}
: "Organization"}
</span>
</div>
</label>
Expand All @@ -567,7 +555,7 @@ export default function NewProject() {
<div className="flex space-x-3 items-center relative">
<input type="radio" onChange={() => setShowNewTeam(!showNewTeam)} />
<div className="flex-grow overflow-ellipsis truncate flex flex-col">
<span className="font-semibold">Create new team</span>
<span className="font-semibold">Create new organization</span>
<span className="text-sm text-gray-400">Collaborate with others</span>
</div>
{teamsToRender.length > 0 && (
Expand Down Expand Up @@ -624,7 +612,7 @@ export default function NewProject() {
) : (
<>
{" "}
in team{" "}
in organization{" "}
<a className="gp-link" href={`/t/${selectedTeamOrUser?.slug}/projects`}>
{selectedTeamOrUser?.name}
</a>
Expand Down
4 changes: 2 additions & 2 deletions components/dashboard/src/projects/ProjectSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export default function () {
, first cancel your existing plan.
</span>
<Link className="mt-2" to={project.teamId ? "../billing" : "/plans"}>
<button>Go to {project.teamId ? "Team" : "Personal"} Billing</button>
<button>Go to {project.teamId ? "Organization" : "Personal"} Billing</button>
</Link>
</div>
</Alert>
Expand Down Expand Up @@ -254,7 +254,7 @@ export default function () {
, first cancel your existing plan.
</span>
<Link className="mt-2" to={project.teamId ? "../billing" : "/plans"}>
<button>Go to {project.teamId ? "Team" : "Personal"} Billing</button>
<button>Go to {project.teamId ? "Organization" : "Personal"} Billing</button>
</Link>
</div>
</Alert>
Expand Down
2 changes: 1 addition & 1 deletion components/dashboard/src/projects/RemoveProjectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const RemoveProjectModal: FunctionComponent<RemoveProjectModalProps> = ({
return (
<ConfirmationModal
title="Remove Project"
areYouSureText="Are you sure you want to remove this project from this team? Team members will also lose access to this project."
areYouSureText="Are you sure you want to remove this project from this organization? Organization members will also lose access to this project."
children={{
name: project?.name ?? "",
description: project?.cloneUrl ?? "",
Expand Down
10 changes: 5 additions & 5 deletions components/dashboard/src/settings/Plans.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ export default function () {
if (!freeSlot) {
setTeamClaimModal({
mode: "error",
errorText: "This invitation is no longer valid. Please contact the team owner.",
errorText: "This invitation is no longer valid. Please contact the organization owner.",
});
} else {
setTeamClaimModal({
mode: "confirmation",
teamId: claimedTeamSubscriptionId,
slotId: freeSlot.id,
text: "You are about to claim a seat in a team.",
text: "You are about to claim a seat in an organization.",
});
}
});
Expand Down Expand Up @@ -722,7 +722,7 @@ export default function () {
<div className="mt-4 flex justify-center space-x-3 2xl:space-x-7">{planCards}</div>
{assignedTs && userBillingMode?.mode === "chargebee" && !!userBillingMode.teamNames && (
<Alert type="info" className="mt-10 mx-auto">
<p>Assigned Team Seats</p>
<p>Assigned Organization Seats</p>
<ul>{userBillingMode.teamNames.join(", ")}</ul>
</Alert>
)}
Expand Down Expand Up @@ -805,7 +805,7 @@ export default function () {
{!!teamClaimModal && (
// TODO: Use title and buttons props
<Modal visible={true} onClose={() => setTeamClaimModal(undefined)}>
<h3 className="pb-2">Team Invitation</h3>
<h3 className="pb-2">Organization Invitation</h3>
<div className="border-t border-b border-gray-200 dark:border-gray-800 mt-2 -mx-6 px-6 py-4">
<p className="pb-4 text-gray-500 text-base">
{teamClaimModal.mode === "error" ? teamClaimModal.errorText : teamClaimModal.text}
Expand Down Expand Up @@ -925,7 +925,7 @@ function PlanCard(p: PlanCardProps) {
<div className="relative w-full">
{p.isTsAssigned && (
<div className="absolute w-full mt-5 text-center font-semibold cursor-default">
Team seat assigned
Organization seat assigned
</div>
)}
<div className="absolute w-full mt-5 text-center font-semibold cursor-default">{p.bottomLabel}</div>
Expand Down
Loading