[dashboard] user visible rename team->organization

Author: svenefftinge

components/dashboard/src/Menu.tsx

@@ -82,6 +82,7 @@ export default function Menu() {
                 "users",
                 "workspaces",
                 "teams",
+                "orgs",
             ].includes(resource)
         ) {
             return resource;
@@ -118,6 +119,7 @@ export default function Menu() {
         "usage",
         "plans",
         "teams",
+        "orgs",
         "variables",
         "keys",
         "integrations",
@@ -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>
             );
@@ -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"
@@ -344,7 +346,7 @@ export default function Menu() {
                         </svg>
                     </div>
                 ),
-                link: "/teams/new",
+                link: "/orgs/new",
             },
         ];
         const classes =
@@ -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>

components/dashboard/src/admin/TeamsSearch.tsx

@@ -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>
     );
@@ -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());
@@ -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">

components/dashboard/src/admin/admin-menu.ts

@@ -19,8 +19,8 @@ export function getAdminMenu() {
             link: ["/admin/projects"],
         },
         {
-            title: "Teams",
-            link: ["/admin/teams"],
+            title: "Organizationss",
+            link: ["/admin/orgs"],
         },
         {
             title: "Blocked Repositories",

components/dashboard/src/app/AppRoutes.tsx

@@ -26,7 +26,9 @@ import {
     settingsPathPreferences,
     settingsPathTeams,
     settingsPathTeamsJoin,
-    settingsPathTeamsNew,
+    settingsPathOrgs,
+    settingsPathOrgsJoin,
+    settingsPathOrgsNew,
     settingsPathVariables,
     settingsPathSSHKeys,
     usagePathMain,
@@ -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} />
@@ -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}`}>

components/dashboard/src/components/BillingAccountSelector.tsx

@@ -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) => {
@@ -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));

components/dashboard/src/components/UsageBasedBillingConfig.tsx

@@ -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 && (

components/dashboard/src/components/UsageLimitReachedModal.tsx

@@ -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>

components/dashboard/src/components/UsageView.tsx

@@ -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"
@@ -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>
                 }
@@ -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>
                             )}

components/dashboard/src/contexts/FeatureFlagContext.tsx

@@ -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,

components/dashboard/src/hooks/use-user-and-teams-loader.ts

@@ -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;

components/dashboard/src/projects/NewProject.tsx

@@ -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"
@@ -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}`}
@@ -558,7 +546,7 @@ export default function NewProject() {
                                         ? `${teamMembers[t.id].length} member${
                                               teamMembers[t.id].length === 1 ? "" : "s"
                                           }`
-                                        : "Team"}
+                                        : "Organization"}
                                 </span>
                             </div>
                         </label>
@@ -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 && (
@@ -624,7 +612,7 @@ export default function NewProject() {
         ) : (
             <>
                 {" "}
-                in team{" "}
+                in organization{" "}
                 <a className="gp-link" href={`/t/${selectedTeamOrUser?.slug}/projects`}>
                     {selectedTeamOrUser?.name}
                 </a>

components/dashboard/src/projects/ProjectSettings.tsx

@@ -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>
@@ -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>

components/dashboard/src/projects/RemoveProjectModal.tsx

@@ -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 ?? "",

components/dashboard/src/settings/Plans.tsx

@@ -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.",
                     });
                 }
             });
@@ -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>
                 )}
@@ -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}
@@ -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>