fix(workspace ui): stop re-rendering user bar and compositions on route change

scopes/cloud/cloud/cloud.graphql.ts

@@ -20,12 +20,13 @@ export function cloudSchema(cloud: CloudMain): Schema {
       }
       type Query {
         getCurrentUser: CloudUser
-        loginUrl(redirectUrl: String!): String!
+        loginUrl: String!
         getCloudScopes(ids: [String!]): [CloudScope!]
         isLoggedIn: Boolean
       }
       type Mutation {
         logout: Boolean
+        setRedirectUrl(redirectUrl: String!): Boolean
       }
     `,
     resolvers: {
@@ -38,8 +39,8 @@ export function cloudSchema(cloud: CloudMain): Schema {
         isLoggedIn: () => {
           return cloud.isLoggedIn();
         },
-        loginUrl: (_, { redirectUrl }: { redirectUrl?: string }) => {
-          return cloud.getLoginUrl({ redirectUrl });
+        loginUrl: () => {
+          return cloud.getLoginUrl();
         },
         getCurrentUser: async () => {
           const user = await cloud.getCurrentUser();
@@ -57,6 +58,10 @@ export function cloudSchema(cloud: CloudMain): Schema {
           cloud.logout();
           return true;
         },
+        setRedirectUrl: async (_, { redirectUrl }: { redirectUrl: string }) => {
+          cloud.setRedirectUrl(redirectUrl);
+          return true;
+        },
       },
     },
   };

scopes/cloud/cloud/cloud.main.runtime.ts

@@ -428,6 +428,10 @@ export class CloudMain {
     this.globalConfig.delSync(CFG_USER_NAME_KEY);
   }
 
+  setRedirectUrl(redirectUrl: string) {
+    this.REDIRECT_URL = redirectUrl;
+  }
+
   async whoami(): Promise<string | undefined> {
     const currentUser = await this.getCurrentUser();
     if (!currentUser?.username) {

scopes/cloud/cloud/cloud.ui.runtime.tsx

@@ -42,6 +42,10 @@ export class CloudUI {
     return flatten(this.userBarSectionSlot.values());
   }
 
+  CloudUserBar = () => {
+    return <UserBar sections={this.listUserBarSections()} items={this.listUserBarItems()} />;
+  };
+
   static runtime = UIRuntime;
 
   static dependencies = [WorkspaceAspect, LanesAspect, ComponentAspect];
@@ -150,13 +154,13 @@ export class CloudUI {
       //   },
       // },
     ]);
-    const userBarItems = cloudUI.listUserBarItems();
-    const userBarSections = cloudUI.listUserBarSections();
-    const CloudUserBar = () => <UserBar sections={userBarSections} items={userBarItems} />;
-    workspace.registerMenuWidget([CloudUserBar]);
+    workspace.registerMenuWidget([cloudUI.CloudUserBar]);
     if (workspace) {
-      lanes.registerMenuWidget(CloudUserBar);
-      component.registerRightSideMenuItem({ item: <CloudUserBar key={'cloud-user-bar-comp-menu'} />, order: 100 });
+      lanes.registerMenuWidget(cloudUI.CloudUserBar);
+      component.registerRightSideMenuItem({
+        item: <cloudUI.CloudUserBar key={'cloud-user-bar-comp-menu'} />,
+        order: 100,
+      });
     }
     return cloudUI;
   }

scopes/cloud/hooks/use-current-user/use-current-user.ts

@@ -1,15 +1,22 @@
+import React from 'react';
 import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useMutation, gql } from '@apollo/client';
 import { CloudUser } from '@teambit/cloud.models.cloud-user';
 
+export const SET_REDIRECT_URL_MUTATION = gql`
+  mutation SetRedirectUrl($redirectUrl: String!) {
+    setRedirectUrl(redirectUrl: $redirectUrl)
+  }
+`;
+
 export const CURRENT_USER_QUERY = gql`
-  query CurrentUser($redirectUrl: String!) {
+  query CurrentUser {
     getCurrentUser {
       username
       displayName
       profileImage
     }
-    loginUrl(redirectUrl: $redirectUrl)
+    loginUrl
     isLoggedIn
   }
 `;
@@ -20,11 +27,20 @@ export function useCurrentUser(): {
   isLoggedIn?: boolean;
   loading?: boolean;
 } {
+  const [setRedirectUrl] = useMutation(SET_REDIRECT_URL_MUTATION);
+
+  React.useEffect(() => {
+    const redirectUrl = window.location.href;
+    setRedirectUrl({ variables: { redirectUrl } }).catch((error) => {
+      // eslint-disable-next-line no-console
+      console.error('Error setting redirect URL:', error);
+    });
+  }, [window.location.href]);
+
   const { data, loading } = useDataQuery(CURRENT_USER_QUERY, {
-    variables: {
-      redirectUrl: window.location.href,
-    },
+    fetchPolicy: 'cache-first',
   });
+
   return {
     currentUser: {
       username: data?.getCurrentUser?.username ?? undefined,

scopes/cloud/ui/login/login.tsx

@@ -15,7 +15,7 @@ export function Login({ loginText = 'Login', loginUrl }: LoginProps) {
 
   return (
     <div className={styles.login}>
-      <Link className={styles.text} href={loginUrl}>
+      <Link external className={styles.text} href={loginUrl}>
         {loginText}
       </Link>
     </div>

scopes/compositions/compositions/compositions.tsx

@@ -135,7 +135,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
                       pathSegments[pathSegments.length - 1] = composition.identifier.toLowerCase();
                     }
 
-                    const urlParams = new URLSearchParams();
+                    const urlParams = new URLSearchParams(searchParams);
                     if (versionFromQueryParams) {
                       urlParams.set('version', versionFromQueryParams);
                     }