ui: fix team settings form (using legacy fields attributes)

Fixes JAVASCRIPT-26T

src/sentry/static/sentry/app/views/teamSettings.jsx

@@ -15,40 +15,34 @@ export default class TeamSettings extends AsyncView {
     return 'Team Settings';
   }
 
-  render() {
+  renderBody() {
     let {orgId, teamId} = this.props.params;
     let team = this.props.team;
 
     return (
-      <div>
-        <div className="box">
-          <div className="box-content with-padding">
-            <ApiForm
-              apiMethod="PUT"
-              apiEndpoint={`/teams/${orgId}/${teamId}/`}
-              initialData={{
-                name: team.name,
-                slug: team.slug
-              }}
-              onSubmitSuccess={this.props.onTeamChange}
-              fields={[
-                {
-                  name: 'name',
-                  label: t('Name'),
-                  placeholder: t('e.g. API Team'),
-                  required: true,
-                  component: TextField
-                },
-                {
-                  name: 'slug',
-                  label: t('Short name'),
-                  placeholder: t('e.g. api-team'),
-                  required: true,
-                  component: TextField
-                }
-              ]}
+      <div className="box">
+        <div className="box-content with-padding">
+          <ApiForm
+            apiMethod="PUT"
+            apiEndpoint={`/teams/${orgId}/${teamId}/`}
+            initialData={{
+              name: team.name,
+              slug: team.slug
+            }}
+            onSubmitSuccess={this.props.onTeamChange}>
+            <TextField
+              name="name"
+              label={t('Name')}
+              placeholder={t('e.g. API Team')}
+              required={true}
             />
-          </div>
+            <TextField
+              name="slug"
+              label={t('Short name')}
+              placeholder={t('e.g. api-team')}
+              required={true}
+            />
+          </ApiForm>
         </div>
       </div>
     );

tests/js/setup.js

@@ -16,5 +16,12 @@ window.TestStubs = {
     goForward: sinon.spy(),
     setRouteLeaveHook: sinon.spy(),
     isActive: sinon.spy()
-  })
+  }),
+  Team: (...params) => {
+    return {
+      slug: 'team-slug',
+      name: 'Team Name',
+      ...params
+    };
+  }
 };

tests/js/spec/views/__snapshots__/teamSettings.spec.jsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TeamSettings render() renders 1`] = `
+<DocumentTitle
+  title="Team Settings"
+>
+  <div
+    className="box"
+  >
+    <div
+      className="box-content with-padding"
+    >
+      <ApiForm
+        apiEndpoint="/teams/org/team-slug/"
+        apiMethod="PUT"
+        cancelLabel="Cancel"
+        className="form-stacked"
+        footerClass="form-actions align-right"
+        initialData={
+          Object {
+            "name": "Team Name",
+            "slug": "team-slug",
+          }
+        }
+        onSubmitSuccess={[Function]}
+        requireChanges={false}
+        submitDisabled={false}
+        submitLabel="Save Changes"
+      >
+        <TextField
+          disabled={false}
+          label="Name"
+          name="name"
+          placeholder="e.g. API Team"
+          required={true}
+        />
+        <TextField
+          disabled={false}
+          label="Short name"
+          name="slug"
+          placeholder="e.g. api-team"
+          required={true}
+        />
+      </ApiForm>
+    </div>
+  </div>
+</DocumentTitle>
+`;

tests/js/spec/views/teamSettings.spec.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import toJson from 'enzyme-to-json';
+
+import TeamSettings from 'app/views/teamSettings';
+
+describe('TeamSettings', function() {
+  describe('render()', function() {
+    it('renders', function() {
+      let team = TestStubs.Team();
+      let wrapper = shallow(
+        <TeamSettings
+          params={{orgId: 'org', teamId: team.slug}}
+          team={team}
+          onTeamChange={() => {}}
+        />,
+        {
+          context: {
+            router: TestStubs.router()
+          }
+        }
+      );
+      expect(toJson(wrapper)).toMatchSnapshot();
+    });
+  });
+});