From 2b2e7e48b140fd7f2e831a51c144b02f3c5187c8 Mon Sep 17 00:00:00 2001
From: Surbhi <surbhi@posthog.com>
Date: Fri, 15 Nov 2024 14:44:21 -0400
Subject: [PATCH] feat: making role in organization as a required field
 (#26205)

Co-authored-by: Your Name (aider) <you@example.com>
---
 cypress/e2e/signup.cy.ts                                 | 9 +++++++++
 frontend/src/lib/components/SignupRoleSelect.tsx         | 2 +-
 .../authentication/signup/signupForm/signupLogic.ts      | 3 ++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/signup.cy.ts b/cypress/e2e/signup.cy.ts
index bb1a4cf0468..9774236ef81 100644
--- a/cypress/e2e/signup.cy.ts
+++ b/cypress/e2e/signup.cy.ts
@@ -77,6 +77,9 @@ describe('Signup', () => {
         cy.get('[data-attr=password]').type(VALID_PASSWORD).should('have.value', VALID_PASSWORD)
         cy.get('[data-attr=signup-start]').click()
         cy.get('[data-attr=signup-name]').type('Alice Bob').should('have.value', 'Alice Bob')
+        cy.get('[data-attr=signup-role-at-organization]').click()
+        cy.get('.Popover li:first-child').click()
+        cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
         cy.get('[data-attr=signup-submit]').click()
 
         cy.wait('@signupRequest').then((interception) => {
@@ -93,6 +96,9 @@ describe('Signup', () => {
         cy.get('[data-attr=password]').type(VALID_PASSWORD).should('have.value', VALID_PASSWORD)
         cy.get('[data-attr=signup-start]').click()
         cy.get('[data-attr=signup-name]').type('Alice Bob').should('have.value', 'Alice Bob')
+        cy.get('[data-attr=signup-role-at-organization]').click()
+        cy.get('.Popover li:first-child').click()
+        cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
         cy.get('[data-attr=signup-submit]').click()
 
         cy.wait('@signupRequest').then(() => {
@@ -105,6 +111,9 @@ describe('Signup', () => {
         const newEmail = `new_user+${Math.floor(Math.random() * 10000)}@posthog.com`
         cy.get('[data-attr=signup-email]').clear().type(newEmail).should('have.value', newEmail)
         cy.get('[data-attr=signup-start]').click()
+        cy.get('[data-attr=signup-role-at-organization]').click()
+        cy.get('.Popover li:first-child').click()
+        cy.get('[data-attr=signup-role-at-organization]').contains('Engineering')
         cy.get('[data-attr=signup-submit]').click()
 
         cy.wait('@signupRequest').then((interception) => {
diff --git a/frontend/src/lib/components/SignupRoleSelect.tsx b/frontend/src/lib/components/SignupRoleSelect.tsx
index f99d00f1f47..0272145cbcc 100644
--- a/frontend/src/lib/components/SignupRoleSelect.tsx
+++ b/frontend/src/lib/components/SignupRoleSelect.tsx
@@ -3,7 +3,7 @@ import { LemonSelect } from 'lib/lemon-ui/LemonSelect'
 
 export default function SignupRoleSelect({ className }: { className?: string }): JSX.Element {
     return (
-        <LemonField name="role_at_organization" label="What is your role?" className={className} showOptional>
+        <LemonField name="role_at_organization" label="What is your role?" className={className}>
             <LemonSelect
                 fullWidth
                 data-attr="signup-role-at-organization"
diff --git a/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts b/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
index 1683fdeae13..1b458e909e0 100644
--- a/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
+++ b/frontend/src/scenes/authentication/signup/signupForm/signupLogic.ts
@@ -83,8 +83,9 @@ export const signupLogic = kea<signupLogicType>([
                 role_at_organization: '',
                 referral_source: '',
             } as SignupForm,
-            errors: ({ name }) => ({
+            errors: ({ name, role_at_organization }) => ({
                 name: !name ? 'Please enter your name' : undefined,
+                role_at_organization: !role_at_organization ? 'Please select your role in the organization' : undefined,
             }),
             submit: async (payload, breakpoint) => {
                 breakpoint()