wip useAuthenticatedUser

Author: AlexTugarev

components/dashboard/src/AppNotifications.tsx

@@ -5,13 +5,14 @@
  */
 
 import dayjs from "dayjs";
-import deepMerge from "deepmerge";
 import { useCallback, useEffect, useState } from "react";
 import Alert, { AlertType } from "./components/Alert";
 import { useUserLoader } from "./hooks/use-user-loader";
-import { getGitpodService } from "./service/service";
 import { isGitpodIo } from "./utils";
 import { trackEvent } from "./Analytics";
+import { useUpdateCurrentUserMutation } from "./data/current-user/update-mutation";
+import { User as UserProtocol } from "@gitpod/gitpod-protocol";
+import { User } from "@gitpod/public-api/lib/gitpod/v1/user_pb";
 
 const KEY_APP_DISMISSED_NOTIFICATIONS = "gitpod-app-notifications-dismissed";
 const PRIVACY_POLICY_LAST_UPDATED = "2023-10-17";
@@ -24,59 +25,60 @@ interface Notification {
     onClose?: () => void;
 }
 
-const UPDATED_PRIVACY_POLICY: Notification = {
-    id: "privacy-policy-update",
-    type: "info",
-    preventDismiss: true,
-    onClose: async () => {
-        let dismissSuccess = false;
-        try {
-            const userUpdates = { additionalData: { profile: { acceptedPrivacyPolicyDate: dayjs().toISOString() } } };
-            const previousUser = await getGitpodService().server.getLoggedInUser();
-            const updatedUser = await getGitpodService().server.updateLoggedInUser(
-                deepMerge(previousUser, userUpdates),
-            );
-            dismissSuccess = !!updatedUser;
-        } catch (err) {
-            console.error("Failed to update user's privacy policy acceptance date", err);
-            dismissSuccess = false;
-        } finally {
-            trackEvent("privacy_policy_update_accepted", {
-                path: window.location.pathname,
-                success: dismissSuccess,
-            });
-        }
-    },
-    message: (
-        <span className="text-md">
-            We've updated our Privacy Policy. You can review it{" "}
-            <a className="gp-link" href="https://www.gitpod.io/privacy" target="_blank" rel="noreferrer">
-                here
-            </a>
-            .
-        </span>
-    ),
+const UPDATED_PRIVACY_POLICY = (updateUser: (user: Partial<UserProtocol>) => Promise<User>) => {
+    return {
+        id: "privacy-policy-update",
+        type: "info",
+        preventDismiss: true,
+        onClose: async () => {
+            let dismissSuccess = false;
+            try {
+                const updatedUser = await updateUser({
+                    additionalData: { profile: { acceptedPrivacyPolicyDate: dayjs().toISOString() } },
+                });
+                dismissSuccess = !!updatedUser;
+            } catch (err) {
+                console.error("Failed to update user's privacy policy acceptance date", err);
+                dismissSuccess = false;
+            } finally {
+                trackEvent("privacy_policy_update_accepted", {
+                    path: window.location.pathname,
+                    success: dismissSuccess,
+                });
+            }
+        },
+        message: (
+            <span className="text-md">
+                We've updated our Privacy Policy. You can review it{" "}
+                <a className="gp-link" href="https://www.gitpod.io/privacy" target="_blank" rel="noreferrer">
+                    here
+                </a>
+                .
+            </span>
+        ),
+    } as Notification;
 };
 
 export function AppNotifications() {
     const [topNotification, setTopNotification] = useState<Notification | undefined>(undefined);
     const { user, loading } = useUserLoader();
+    const updateUser = useUpdateCurrentUserMutation();
 
     useEffect(() => {
         const notifications = [];
         if (!loading && isGitpodIo()) {
             if (
-                !user?.additionalData?.profile?.acceptedPrivacyPolicyDate ||
-                new Date(PRIVACY_POLICY_LAST_UPDATED) > new Date(user.additionalData.profile.acceptedPrivacyPolicyDate)
+                !user?.profile?.acceptedPrivacyPolicyDate ||
+                new Date(PRIVACY_POLICY_LAST_UPDATED) > new Date(user.profile.acceptedPrivacyPolicyDate)
             ) {
-                notifications.push(UPDATED_PRIVACY_POLICY);
+                notifications.push(UPDATED_PRIVACY_POLICY((u: Partial<UserProtocol>) => updateUser.mutateAsync(u)));
             }
         }
 
         const dismissedNotifications = getDismissedNotifications();
         const topNotification = notifications.find((n) => !dismissedNotifications.includes(n.id));
         setTopNotification(topNotification);
-    }, [loading, setTopNotification, user]);
+    }, [loading, updateUser, setTopNotification, user]);
 
     const dismissNotification = useCallback(() => {
         if (!topNotification) {

components/dashboard/src/Login.tsx

@@ -5,8 +5,7 @@
  */
 
 import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie";
-import { useContext, useEffect, useState, useMemo, useCallback, FC } from "react";
-import { UserContext } from "./user-context";
+import { useEffect, useState, useMemo, useCallback, FC } from "react";
 import { getGitpodService } from "./service/service";
 import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName } from "./provider-utils";
 import gitpod from "./images/gitpod.svg";
@@ -23,6 +22,7 @@ import { useNeedsSetup } from "./dedicated-setup/use-needs-setup";
 import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 import { Button, ButtonProps } from "@podkit/buttons/Button";
 import { cn } from "@podkit/lib/cn";
+import { useAuthenticatedUser } from "./data/current-user/authenticated-user-query";
 
 export function markLoggedIn() {
     document.cookie = GitpodCookie.generateCookie(window.location.hostname);
@@ -36,7 +36,7 @@ type LoginProps = {
     onLoggedIn?: () => void;
 };
 export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
-    const { setUser } = useContext(UserContext);
+    const { refetch: reloadUser } = useAuthenticatedUser();
 
     const urlHash = useMemo(() => getURLHash(), []);
 
@@ -67,10 +67,9 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
 
     const updateUser = useCallback(async () => {
         await getGitpodService().reconnect();
-        const user = await getGitpodService().server.getLoggedInUser();
-        setUser(user);
+        reloadUser();
         markLoggedIn();
-    }, [setUser]);
+    }, [reloadUser]);
 
     const authorizeSuccessful = useCallback(async () => {
         updateUser().catch(console.error);

components/dashboard/src/app/AdminRoute.tsx

@@ -4,18 +4,18 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useContext } from "react";
 import { Redirect, Route } from "react-router";
-import { UserContext } from "../user-context";
+import { useAuthenticatedUser } from "../data/current-user/authenticated-user-query";
+import { User_RoleOrPermission } from "@gitpod/public-api/lib/gitpod/v1/user_pb";
 
 // A wrapper for <Route> that redirects to the workspaces screen if the user isn't a admin.
 // This wrapper only accepts the component property
 export function AdminRoute({ component }: any) {
-    const { user } = useContext(UserContext);
+    const { data: user } = useAuthenticatedUser();
     return (
         <Route
             render={({ location }: any) =>
-                user?.rolesOrPermissions?.includes("admin") ? (
+                user?.rolesOrPermissions?.includes(User_RoleOrPermission.ADMIN) ? (
                     <Route component={component}></Route>
                 ) : (
                     <Redirect

components/dashboard/src/app/AppBlockingFlows.tsx

@@ -6,12 +6,11 @@
 
 import { FC, lazy } from "react";
 import { useShowDedicatedSetup } from "../dedicated-setup/use-show-dedicated-setup";
-import { useCurrentUser } from "../user-context";
-import { MigrationPage, useShouldSeeMigrationPage } from "../whatsnew/MigrationPage";
 import { useShowUserOnboarding } from "../onboarding/use-show-user-onboarding";
 import { useHistory } from "react-router";
 import { useCurrentOrg } from "../data/organizations/orgs-query";
 import { OrgNamingStep } from "../dedicated-setup/OrgNamingStep";
+import { useAuthenticatedUser } from "../data/current-user/authenticated-user-query";
 
 const UserOnboarding = lazy(() => import(/* webpackPrefetch: true */ "../onboarding/UserOnboarding"));
 const DedicatedSetup = lazy(() => import(/* webpackPrefetch: true */ "../dedicated-setup/DedicatedSetup"));
@@ -20,9 +19,8 @@ const DedicatedSetup = lazy(() => import(/* webpackPrefetch: true */ "../dedicat
 // Since this runs before the app is rendered, we should avoid adding any lengthy async calls that would delay the app from loading.
 export const AppBlockingFlows: FC = ({ children }) => {
     const history = useHistory();
-    const user = useCurrentUser();
+    const { data: user } = useAuthenticatedUser();
     const org = useCurrentOrg();
-    const shouldSeeMigrationPage = useShouldSeeMigrationPage();
     const showDedicatedSetup = useShowDedicatedSetup();
     const showUserOnboarding = useShowUserOnboarding();
 
@@ -31,11 +29,6 @@ export const AppBlockingFlows: FC = ({ children }) => {
         return <></>;
     }
 
-    // If orgOnlyAttribution is enabled and the user hasn't been migrated, yet, we need to show the migration page
-    if (shouldSeeMigrationPage) {
-        return <MigrationPage />;
-    }
-
     // Handle dedicated setup if necessary
     if (showDedicatedSetup.showSetup) {
         return (
@@ -52,7 +45,7 @@ export const AppBlockingFlows: FC = ({ children }) => {
     }
 
     // New user onboarding flow
-    if (showUserOnboarding) {
+    if (showUserOnboarding && user) {
         return <UserOnboarding user={user} />;
     }
 

components/dashboard/src/app/AppRoutes.tsx

@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import React, { useState } from "react";
+import React from "react";
 import { Redirect, Route, Switch, useLocation } from "react-router";
 import OAuthClientApproval from "../OauthClientApproval";
 import Menu from "../menu/Menu";
@@ -25,15 +25,13 @@ import {
     usagePathMain,
 } from "../user-settings/settings.routes";
 import { getURLHash, isGitpodIo } from "../utils";
-import { WhatsNew, shouldSeeWhatsNew } from "../whatsnew/WhatsNew";
 import { workspacesPathMain } from "../workspaces/workspaces.routes";
 import { AdminRoute } from "./AdminRoute";
 import { Blocked } from "./Blocked";
 
 // TODO: Can we bundle-split/lazy load these like other pages?
 import { BlockedRepositories } from "../admin/BlockedRepositories";
 import { Heading1, Subheading } from "../components/typography/headings";
-import { useCurrentUser } from "../user-context";
 import PersonalAccessTokenCreateView from "../user-settings/PersonalAccessTokensCreateView";
 import { CreateWorkspacePage } from "../workspaces/CreateWorkspacePage";
 import { WebsocketClients } from "./WebsocketClients";
@@ -88,8 +86,6 @@ const ConfigurationWorkspaces = React.lazy(
 
 export const AppRoutes = () => {
     const hash = getURLHash();
-    const user = useCurrentUser();
-    const [isWhatsNewShown, setWhatsNewShown] = useState(user && shouldSeeWhatsNew(user));
     const location = useLocation();
     const repoConfigListAndDetail = useFeatureFlag("repoConfigListAndDetail");
 
@@ -103,10 +99,6 @@ export const AppRoutes = () => {
         return <OAuthClientApproval />;
     }
 
-    if (isWhatsNewShown) {
-        return <WhatsNew onClose={() => setWhatsNewShown(false)} />;
-    }
-
     // TODO: Try and encapsulate this in a route for "/" (check for hash in route component, render or redirect accordingly)
     const isCreation = location.pathname === "/" && hash !== "";
     if (isCreation) {

components/dashboard/src/components/AuthorizeGit.tsx

@@ -4,35 +4,34 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { FC, useCallback, useContext } from "react";
+import { FC, useCallback } from "react";
 import { Link } from "react-router-dom";
 import { useAuthProviderDescriptions } from "../data/auth-providers/auth-provider-descriptions-query";
 import { openAuthorizeWindow } from "../provider-utils";
-import { getGitpodService } from "../service/service";
-import { UserContext, useCurrentUser } from "../user-context";
 import { Button } from "./Button";
 import { Heading2, Heading3, Subheading } from "./typography/headings";
 import classNames from "classnames";
 import { iconForAuthProvider, simplifyProviderName } from "../provider-utils";
 import { useIsOwner } from "../data/organizations/members-query";
 import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { useAuthenticatedUser } from "../data/current-user/authenticated-user-query";
 
 export function useNeedsGitAuthorization() {
-    const authProviders = useAuthProviderDescriptions();
-    const user = useCurrentUser();
-    if (!user || !authProviders.data) {
+    const { data: user } = useAuthenticatedUser();
+    const { data: authProviders } = useAuthProviderDescriptions();
+    if (!user || !authProviders) {
         return false;
     }
-    return !authProviders.data.some((ap) => user.identities.some((i) => ap.id === i.authProviderId));
+    return !authProviders.some((ap) => user.identities.some((i) => ap.id === i.authProviderId));
 }
 
 export const AuthorizeGit: FC<{ className?: string }> = ({ className }) => {
-    const { setUser } = useContext(UserContext);
+    const { refetch: reloadUser } = useAuthenticatedUser();
     const owner = useIsOwner();
     const { data: authProviders } = useAuthProviderDescriptions();
-    const updateUser = useCallback(() => {
-        getGitpodService().server.getLoggedInUser().then(setUser);
-    }, [setUser]);
+    const updateUser = useCallback(async () => {
+        await reloadUser();
+    }, [reloadUser]);
 
     const connect = useCallback(
         (ap: AuthProviderDescription) => {

components/dashboard/src/data/auth-providers/auth-provider-descriptions-query.ts

@@ -6,14 +6,14 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { authProviderClient } from "../../service/public-api";
-import { useCurrentUser } from "../../user-context";
 import {
     AuthProviderDescription,
     ListAuthProviderDescriptionsRequest,
 } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { useAuthenticatedUser } from "../current-user/authenticated-user-query";
 
 export const useAuthProviderDescriptions = () => {
-    const user = useCurrentUser();
+    const { data: user } = useAuthenticatedUser();
     const query = useQuery<AuthProviderDescription[]>({
         queryKey: getAuthProviderDescriptionsQueryKey(),
         queryFn: async () => {

components/dashboard/src/data/auth-providers/delete-user-auth-provider-mutation.ts

@@ -8,14 +8,14 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { authProviderClient } from "../../service/public-api";
 import { AuthProvider, DeleteAuthProviderRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
 import { getUserAuthProvidersQueryKey } from "./user-auth-providers-query";
-import { useCurrentUser } from "../../user-context";
+import { useAuthenticatedUser } from "../current-user/authenticated-user-query";
 
 type DeleteAuthProviderArgs = {
     providerId: string;
 };
 export const useDeleteUserAuthProviderMutation = () => {
     const queryClient = useQueryClient();
-    const user = useCurrentUser();
+    const { data: user } = useAuthenticatedUser();
 
     return useMutation({
         mutationFn: async ({ providerId }: DeleteAuthProviderArgs) => {

components/dashboard/src/data/auth-providers/user-auth-providers-query.ts

@@ -7,11 +7,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { authProviderClient } from "../../service/public-api";
 import { AuthProvider, ListAuthProvidersRequest } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
-import { useCurrentUser } from "../../user-context";
+import { useAuthenticatedUser } from "../current-user/authenticated-user-query";
 
 export type OrgAuthProvidersQueryResult = AuthProvider[];
 export const useOrgAuthProvidersQuery = () => {
-    const user = useCurrentUser();
+    const { data: user } = useAuthenticatedUser();
 
     return useQuery<OrgAuthProvidersQueryResult>({
         queryKey: getUserAuthProvidersQueryKey(user?.id ?? ""),

components/dashboard/src/data/current-user/authenticated-user-query.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License.AGPL.txt in the project root for license information.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { userClient } from "../../service/public-api";
+import { GetAuthenticatedUserRequest, User } from "@gitpod/public-api/lib/gitpod/v1/user_pb";
+
+export const useAuthenticatedUser = () => {
+    const query = useQuery<User>({
+        queryKey: getAuthenticatedUserQueryKey(),
+        queryFn: async () => {
+            const params = new GetAuthenticatedUserRequest();
+            const response = await userClient.getAuthenticatedUser(params);
+            return response.user!;
+        },
+    });
+    return query;
+};
+
+export const getAuthenticatedUserQueryKey = () => ["authenticated-user", {}];