fix(ui): Consistently handle team renames (#34092)

static/app/actionCreators/teams.tsx

@@ -25,8 +25,6 @@ const doCallback = (
 type OrgSlug = {orgId: string};
 type OrgAndTeamSlug = OrgSlug & {teamId: string};
 
-type TeamData = {data: Team};
-
 /**
  * This is the actual internal id, not username or email
  */
@@ -75,28 +73,6 @@ export function updateTeamSuccess(teamId: OrgAndTeamSlug['teamId'], data: Team)
   TeamActions.updateSuccess(teamId, data);
 }
 
-export function updateTeam(
-  api: Client,
-  params: OrgAndTeamSlug & TeamData,
-  options: CallbackOptions
-) {
-  const endpoint = `/teams/${params.orgId}/${params.teamId}/`;
-  TeamActions.update(params.teamId, params.data);
-
-  return api.request(endpoint, {
-    method: 'PUT',
-    data: params.data,
-    success: data => {
-      updateTeamSuccess(params.teamId, data);
-      doCallback(options, 'success', data);
-    },
-    error: error => {
-      TeamActions.updateError(params.teamId, error);
-      doCallback(options, 'error', error);
-    },
-  });
-}
-
 export function joinTeam(
   api: Client,
   params: OrgAndTeamSlug & Partial<MemberId>,

static/app/utils/useTeams.tsx

@@ -234,7 +234,8 @@ function useTeams({limit, slugs, ids, provideUserTeams}: Options = {}) {
         limit,
       });
 
-      const fetchedTeams = uniqBy([...store.teams, ...results], ({slug}) => slug);
+      // Unique by `id` to avoid duplicates due to renames and state store data
+      const fetchedTeams = uniqBy([...results, ...store.teams], ({id}) => id);
       TeamActions.loadTeams(fetchedTeams);
 
       setState({

static/app/views/settings/organizationTeams/teamSettings/index.tsx

@@ -8,7 +8,6 @@ import Confirm from 'sentry/components/confirm';
 import Field from 'sentry/components/forms/field';
 import Form from 'sentry/components/forms/form';
 import JsonForm from 'sentry/components/forms/jsonForm';
-import FormModel from 'sentry/components/forms/model';
 import {Panel, PanelHeader} from 'sentry/components/panels';
 import teamSettingsFields from 'sentry/data/forms/teamSettingsFields';
 import {IconDelete} from 'sentry/icons';
@@ -17,8 +16,6 @@ import {Organization, Scope, Team} from 'sentry/types';
 import withOrganization from 'sentry/utils/withOrganization';
 import AsyncView from 'sentry/views/asyncView';
 
-import TeamModel from './model';
-
 type Props = RouteComponentProps<{orgId: string; teamId: string}, {}> & {
   organization: Organization;
   team: Team;
@@ -27,8 +24,6 @@ type Props = RouteComponentProps<{orgId: string; teamId: string}, {}> & {
 type State = AsyncView['state'];
 
 class TeamSettings extends AsyncView<Props, State> {
-  model = new TeamModel(this.props.params.orgId, this.props.params.teamId);
-
   getTitle() {
     return 'Team Settings';
   }
@@ -37,8 +32,10 @@ class TeamSettings extends AsyncView<Props, State> {
     return [];
   }
 
-  handleSubmitSuccess = (resp: any, model: FormModel, id?: string) => {
-    updateTeamSuccess(resp.slug, resp);
+  handleSubmitSuccess: Form['props']['onSubmitSuccess'] = (resp, model, id) => {
+    // Use the old slug when triggering the update so we correctly replace the
+    // previous team in the store
+    updateTeamSuccess(this.props.team.slug, resp);
     if (id === 'slug') {
       addSuccessMessage(t('Team name changed'));
       browserHistory.replace(
@@ -54,15 +51,15 @@ class TeamSettings extends AsyncView<Props, State> {
   };
 
   renderBody() {
-    const {organization, team} = this.props;
+    const {organization, team, params} = this.props;
 
     const access = new Set<Scope>(organization.access);
 
     return (
       <Fragment>
         <Form
-          model={this.model}
           apiMethod="PUT"
+          apiEndpoint={`/teams/${params.orgId}/${team.slug}/`}
           saveOnBlur
           allowUndo
           onSubmitSuccess={this.handleSubmitSuccess}

static/app/views/settings/organizationTeams/teamSettings/model.tsx

@@ -1,32 +0,0 @@
-import {updateTeam} from 'sentry/actionCreators/teams';
-import FormModel from 'sentry/components/forms/model';
-
-class TeamFormModel extends FormModel {
-  public orgId: string;
-  public teamId: string;
-
-  constructor(orgId: string, teamId: string) {
-    super();
-    this.orgId = orgId;
-    this.teamId = teamId;
-  }
-
-  doApiRequest({data}) {
-    return new Promise((resolve, reject) =>
-      updateTeam(
-        this.api,
-        {
-          orgId: this.orgId,
-          teamId: this.teamId,
-          data,
-        },
-        {
-          success: resolve,
-          error: reject,
-        }
-      )
-    );
-  }
-}
-
-export default TeamFormModel;