Angular/React: Migrates team creation form to react (#21058)

public/app/features/all.ts

@@ -9,7 +9,6 @@ import './admin';
 import './alerting/NotificationsEditCtrl';
 import './alerting/NotificationsListCtrl';
 import './manage-dashboards';
-import './teams/CreateTeamCtrl';
 import './profile/all';
 import './datasources/settings/HttpSettingsCtrl';
 import './datasources/settings/TlsAuthSettingsCtrl';

public/app/features/teams/CreateTeam.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CreateTeam, Props } from './CreateTeam';
+import { mockActionCreator } from 'app/core/redux';
+import { updateLocation } from 'app/core/actions';
+
+describe('Render', () => {
+  it('should render component', () => {
+    const props: Props = {
+      updateLocation: mockActionCreator(updateLocation),
+      navModel: {} as any,
+    };
+    const wrapper = shallow(<CreateTeam {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

public/app/features/teams/CreateTeam.tsx

@@ -0,0 +1,105 @@
+import React, { PureComponent } from 'react';
+import Page from 'app/core/components/Page/Page';
+import { hot } from 'react-hot-loader';
+import { FormField, Button } from '@grafana/ui';
+import { NavModel } from '@grafana/data';
+import { getBackendSrv } from '@grafana/runtime';
+import { updateLocation } from '../../core/actions';
+import { connect } from 'react-redux';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { StoreState } from 'app/types';
+
+export interface Props {
+  navModel: NavModel;
+  updateLocation: typeof updateLocation;
+}
+
+interface State {
+  name: string;
+  email: string;
+}
+
+export class CreateTeam extends PureComponent<Props, State> {
+  state: State = {
+    name: '',
+    email: '',
+  };
+
+  create = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const { name, email } = this.state;
+
+    const result = await getBackendSrv().post('/api/teams', { name, email });
+    if (result.teamId) {
+      this.props.updateLocation({ path: `/org/teams/edit/${result.teamId}` });
+    }
+  };
+
+  onEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({
+      email: event.target.value,
+    });
+  };
+
+  onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({
+      name: event.target.value,
+    });
+  };
+
+  render() {
+    const { navModel } = this.props;
+    const { name, email } = this.state;
+
+    return (
+      <Page navModel={navModel}>
+        <Page.Contents>
+          <>
+            <h3 className="page-sub-heading">New Team</h3>
+
+            <form className="gf-form-group" onSubmit={this.create}>
+              <FormField
+                className="gf-form"
+                label="Name"
+                value={name}
+                onChange={this.onNameChange}
+                inputWidth={30}
+                labelWidth={10}
+                required
+              />
+              <FormField
+                type="email"
+                className="gf-form"
+                label="Email"
+                value={email}
+                onChange={this.onEmailChange}
+                inputWidth={30}
+                labelWidth={10}
+                placeholder="email@test.com"
+                tooltip="This is optional and is primarily used for allowing custom team avatars."
+              />
+              <div className="gf-form-button-row">
+                <Button type="submit" variant="primary">
+                  Create
+                </Button>
+              </div>
+            </form>
+          </>
+        </Page.Contents>
+      </Page>
+    );
+  }
+}
+
+function mapStateToProps(state: StoreState) {
+  return {
+    navModel: getNavModel(state.navIndex, 'teams'),
+  };
+}
+
+const mapDispatchToProps = {
+  updateLocation,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(CreateTeam));

public/app/features/teams/CreateTeamCtrl.ts

@@ -1,29 +0,0 @@
-import coreModule from 'app/core/core_module';
-import { BackendSrv } from 'app/core/services/backend_srv';
-import { ILocationService } from 'angular';
-import { NavModelSrv } from 'app/core/core';
-
-export class CreateTeamCtrl {
-  name: string;
-  email: string;
-  navModel: any;
-
-  /** @ngInject */
-  constructor(private backendSrv: BackendSrv, private $location: ILocationService, navModelSrv: NavModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
-  }
-
-  create() {
-    const payload = {
-      name: this.name,
-      email: this.email,
-    };
-    this.backendSrv.post('/api/teams', payload).then((result: any) => {
-      if (result.teamId) {
-        this.$location.path('/org/teams/edit/' + result.teamId);
-      }
-    });
-  }
-}
-
-coreModule.controller('CreateTeamCtrl', CreateTeamCtrl);

public/app/features/teams/__snapshots__/CreateTeam.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render component 1`] = `
+<Page
+  navModel={Object {}}
+>
+  <PageContents>
+    <h3
+      className="page-sub-heading"
+    >
+      New Team
+    </h3>
+    <form
+      className="gf-form-group"
+      onSubmit={[Function]}
+    >
+      <FormField
+        className="gf-form"
+        inputWidth={30}
+        label="Name"
+        labelWidth={10}
+        onChange={[Function]}
+        required={true}
+        value=""
+      />
+      <FormField
+        className="gf-form"
+        inputWidth={30}
+        label="Email"
+        labelWidth={10}
+        onChange={[Function]}
+        placeholder="email@test.com"
+        tooltip="This is optional and is primarily used for allowing custom team avatars."
+        type="email"
+        value=""
+      />
+      <div
+        className="gf-form-button-row"
+      >
+        <Button
+          type="submit"
+          variant="primary"
+        >
+          Create
+        </Button>
+      </div>
+    </form>
+  </PageContents>
+</Page>
+`;

public/app/features/teams/partials/create_team.html

@@ -1,26 +0,0 @@
-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body" ng-cloak>
-	<h3 class="page-sub-heading">New Team</h3>
-
-	<form name="ctrl.saveForm" class="gf-form-group" ng-submit="ctrl.create()">
-		<div class="gf-form max-width-30">
-			<span class="gf-form-label width-10">Name</span>
-			<input type="text" required ng-model="ctrl.name" class="gf-form-input max-width-22" give-focus="true">
-		</div>
-		<div class="gf-form max-width-30">
-			<span class="gf-form-label width-10">
-				Email
-				<info-popover mode="right-normal">
-					This is optional and is primarily used for allowing custom team avatars.
-				</info-popover>
-			</span>
-			<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com">
-		</div>
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-primary">
-				Create
-			</button>
-		</div>
-	</form>
-</div>

public/app/routes/routes.ts

@@ -244,9 +244,12 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
       },
     })
     .when('/org/teams/new', {
-      templateUrl: 'public/app/features/teams/partials/create_team.html',
-      controller: 'CreateTeamCtrl',
-      controllerAs: 'ctrl',
+      template: '<react-container />',
+      resolve: {
+        roles: () => (config.editorsCanAdmin ? [] : ['Admin']),
+        component: () =>
+          SafeDynamicImport(import(/* webpackChunkName: "CreateTeam" */ 'app/features/teams/CreateTeam')),
+      },
     })
     .when('/org/teams/edit/:id/:page?', {
       template: '<react-container />',