Disable "select organization" dropdown for OIDC accounts (#6399)

.changeset/spotty-pots-confess.md

@@ -0,0 +1,5 @@
+---
+'hive': patch
+---
+
+Disable "select organization" dropdown for OIDC accounts

cypress/e2e/app.cy.ts

@@ -63,7 +63,9 @@ describe('oidc', () => {
       cy.get('input[id="Input_Password"]').type('password');
       cy.get('button[value="login"]').click();
 
-      cy.get('[data-cy="organization-picker-current"]').contains(slug);
+      cy.get(`a[href="/${slug}"]`).should('exist');
+      // Organization picker should not be visible
+      cy.get('[data-cy="organization-picker-current"]').should('not.exist');
     });
   });
 
@@ -89,7 +91,7 @@ describe('oidc', () => {
       cy.get('input[id="Input_Password"]').type('password');
       cy.get('button[value="login"]').click();
 
-      cy.get('[data-cy="organization-picker-current"]').contains(slug);
+      cy.get(`a[href="/${slug}"]`).should('exist');
     });
   });
 
@@ -115,7 +117,7 @@ describe('oidc', () => {
       cy.get('input[id="Input_Password"]').type('password');
       cy.get('button[value="login"]').click();
 
-      cy.get('[data-cy="organization-picker-current"]').contains(slug);
+      cy.get(`a[href="/${slug}"]`).should('exist');
     });
   });
 
@@ -144,7 +146,7 @@ describe('oidc', () => {
     cy.get('input[id="Input_Password"]').type('password');
     cy.get('button[value="login"]').click();
 
-    cy.get('[data-cy="organization-picker-current"]').contains(slug);
+    cy.get(`a[href="/${slug}"]`).should('exist');
     // Check if the user has the Admin role by checking if the Members tab is visible
     cy.get(`a[href^="/${slug}/view/members"]`).should('exist');
   });

packages/web/app/src/components/layouts/organization-selectors.tsx

@@ -1,6 +1,6 @@
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 import { FragmentType, graphql, useFragment } from '@/gql';
-import { useRouter } from '@tanstack/react-router';
+import { Link, useRouter } from '@tanstack/react-router';
 
 const OrganizationSelector_OrganizationConnectionFragment = graphql(`
   fragment OrganizationSelector_OrganizationConnectionFragment on OrganizationConnection {
@@ -14,6 +14,7 @@ const OrganizationSelector_OrganizationConnectionFragment = graphql(`
 export function OrganizationSelector(props: {
   currentOrganizationSlug: string;
   organizations: FragmentType<typeof OrganizationSelector_OrganizationConnectionFragment> | null;
+  isOIDCUser: boolean;
 }) {
   const router = useRouter();
   const organizations = useFragment(
@@ -25,7 +26,23 @@ export function OrganizationSelector(props: {
     node => node.slug === props.currentOrganizationSlug,
   );
 
-  return organizations ? (
+  if (!organizations) {
+    return <div className="h-5 w-48 animate-pulse rounded-full bg-gray-800" />;
+  }
+
+  if (props.isOIDCUser) {
+    return (
+      <Link
+        to="/$organizationSlug"
+        params={{ organizationSlug: props.currentOrganizationSlug }}
+        className="max-w-[200px] shrink-0 truncate font-medium"
+      >
+        {props.currentOrganizationSlug}
+      </Link>
+    );
+  }
+
+  return (
     <Select
       value={props.currentOrganizationSlug}
       onValueChange={id => {
@@ -54,7 +71,5 @@ export function OrganizationSelector(props: {
         ))}
       </SelectContent>
     </Select>
-  ) : (
-    <div className="h-5 w-48 animate-pulse rounded-full bg-gray-800" />
   );
 }

packages/web/app/src/components/layouts/organization.tsx

@@ -25,7 +25,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useToast } from '@/components/ui/use-toast';
 import { UserMenu } from '@/components/ui/user-menu';
 import { graphql, useFragment } from '@/gql';
-import { ProjectType } from '@/gql/graphql';
+import { AuthProvider, ProjectType } from '@/gql/graphql';
 import { getIsStripeEnabled } from '@/lib/billing/stripe-public-key';
 import { useToggle } from '@/lib/hooks';
 import { useLastVisitedOrganizationWriter } from '@/lib/last-visited-org';
@@ -72,6 +72,7 @@ const OrganizationLayoutQuery = graphql(`
   query OrganizationLayoutQuery {
     me {
       id
+      provider
       ...UserMenu_MeFragment
     }
     organizations {
@@ -120,6 +121,7 @@ export function OrganizationLayout({
           <div className="flex flex-row items-center gap-4">
             <HiveLink className="size-8" />
             <OrganizationSelector
+              isOIDCUser={query.data?.me.provider === AuthProvider.Oidc}
               currentOrganizationSlug={props.organizationSlug}
               organizations={query.data?.organizations ?? null}
             />