Make role picker nicer (keybase#23618)

* fancy role picker

* stories

* danny feedback

* stories ???\

* stories

shared/__mocks__/react-spring.tsx

@@ -1 +1,6 @@
 export const Spring = () => null
+export const useSpring = <T extends {}>(c: {config?: any} & T) => {
+  const {config, ...rest} = c
+  return rest
+}
+export const animated = x => x

shared/actions/json/teams.json

@@ -366,12 +366,12 @@
     },
     "setAddMembersWizardRole": {
       "_description": "Set the role for the add members wizard.",
-      "role": ["Types.TeamRoleType", "undefined"]
+      "role": ["Types.AddingMemberTeamRoleType", "'setIndividually'"]
     },
     "setAddMembersWizardIndividualRole": {
       "_description": "Set the role for a pending member in the add member wizard.",
       "assertion": "string",
-      "role": "Types.TeamRoleType"
+      "role": "Types.AddingMemberTeamRoleType"
     },
     "addMembersWizardPushMembers": {
       "_description": "Add pending members to the add members wizard and show the confirm screen.",

shared/constants/types/teams.tsx

@@ -181,16 +181,18 @@ export type NewTeamWizardState = {
   error?: string
 }
 
+export type AddingMemberTeamRoleType = 'owner' | 'admin' | 'reader' | 'writer'
+
 export type AddingMember = {
   assertion: string
-  role: TeamRoleType
+  role: AddingMemberTeamRoleType
   note?: string // note is for imp tofu assertions that got turned into usernames. It doesn't go to the server but it displays to the user in the confirm screen.
 }
 export type AddMembersWizardState = {
   addingMembers: Array<AddingMember>
   defaultChannels: Array<ChannelNameID> | undefined // undefined -> unchanged from default
   justFinished: boolean
-  role: TeamRoleType | undefined // undefined -> role set individually
+  role: AddingMemberTeamRoleType | 'setIndividually'
   teamID: TeamID
 }
 

shared/reducers/teams.tsx

@@ -325,7 +325,7 @@ export default Container.makeReducer<Actions, Types.State>(initialState, {
   [TeamsGen.setAddMembersWizardRole]: (draftState, action) => {
     const {role} = action.payload
     draftState.addMembersWizard.role = role
-    if (role) {
+    if (role !== 'setIndividually') {
       // keep roles stored with indiv members in sync with top level one
       draftState.addMembersWizard.addingMembers.forEach(member => {
         member.role = role