SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							import {Fragment} from 'react';
import {withRouter, WithRouterProps} from 'react-router';

import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
import {openModal} from 'sentry/actionCreators/modal';
import AsyncComponent from 'sentry/components/asyncComponent';
import IntegrationExternalMappingForm from 'sentry/components/integrationExternalMappingForm';
import IntegrationExternalMappings from 'sentry/components/integrationExternalMappings';
import {t} from 'sentry/locale';
import {
  ExternalActorMapping,
  ExternalUser,
  Integration,
  Member,
  Organization,
} from 'sentry/types';
import {sentryNameToOption} from 'sentry/utils/integrationUtil';
import withOrganization from 'sentry/utils/withOrganization';

type Props = AsyncComponent['props'] &
  WithRouterProps & {
    integration: Integration;
    organization: Organization;
  };

type State = AsyncComponent['state'] & {
  members: (Member & {externalUsers: ExternalUser[]})[];
  initialResults: Member[];
};

class IntegrationExternalUserMappings extends AsyncComponent<Props, State> {
  getEndpoints(): ReturnType<AsyncComponent['getEndpoints']> {
    const {organization} = this.props;
    return [
      // We paginate on this query, since we're filtering by hasExternalUsers:true
      [
        'members',
        `/organizations/${organization.slug}/members/`,
        {query: {query: 'hasExternalUsers:true', expand: 'externalUsers'}},
      ],
      // We use this query as defaultOptions to reduce identical API calls
      ['initialResults', `/organizations/${organization.slug}/members/`],
    ];
  }

  handleDelete = async (mapping: ExternalActorMapping) => {
    const {organization} = this.props;
    try {
      await this.api.requestPromise(
        `/organizations/${organization.slug}/external-users/${mapping.id}/`,
        {
          method: 'DELETE',
        }
      );
      // remove config and update state
      addSuccessMessage(t('Deletion successful'));
      this.fetchData();
    } catch {
      // no 4xx errors should happen on delete
      addErrorMessage(t('An error occurred'));
    }
  };

  handleSubmitSuccess = () => {
    // Don't bother updating state. The info is in array of objects for each object in another array of objects.
    // Easier and less error-prone to re-fetch the data and re-calculate state.
    this.fetchData();
  };

  get mappings() {
    const {integration} = this.props;
    const {members} = this.state;
    const externalUserMappings = members.reduce((acc, member) => {
      const {externalUsers, user} = member;

      acc.push(
        ...externalUsers
          .filter(externalUser => externalUser.provider === integration.provider.key)
          .map(externalUser => ({...externalUser, sentryName: user.name}))
      );
      return acc;
    }, [] as ExternalActorMapping[]);
    return externalUserMappings.sort((a, b) => parseInt(a.id, 10) - parseInt(b.id, 10));
  }

  get dataEndpoint() {
    const {organization} = this.props;
    return `/organizations/${organization.slug}/members/`;
  }

  get baseFormEndpoint() {
    const {organization} = this.props;
    return `/organizations/${organization.slug}/external-users/`;
  }

  get defaultUserOptions() {
    const {initialResults} = this.state;
    return this.sentryNamesMapper(initialResults).map(sentryNameToOption);
  }

  sentryNamesMapper(members: Member[]) {
    return members
      .filter(member => member.user)
      .map(({user: {id}, email, name}) => {
        const label = email !== name ? `${name} - ${email}` : `${email}`;
        return {id, name: label};
      });
  }

  openModal = (mapping?: ExternalActorMapping) => {
    const {integration} = this.props;
    openModal(({Body, Header, closeModal}) => (
      <Fragment>

        <Header closeButton>{t('Configure External User Mapping')}</Header>

        <Body>

          <IntegrationExternalMappingForm

            type="user"

            integration={integration}

            dataEndpoint={this.dataEndpoint}

            getBaseFormEndpoint={() => this.baseFormEndpoint}

            defaultOptions={this.defaultUserOptions}

            mapping={mapping}

            sentryNamesMapper={this.sentryNamesMapper}

            onCancel={closeModal}

            onSubmitSuccess={() => {

              this.handleSubmitSuccess();

              closeModal();

            }}

          />

        </Body>

      </Fragment>
    ));
  };

  renderBody() {
    const {integration, organization} = this.props;
    const {membersPageLinks} = this.state;
    return (
      <Fragment>

        <IntegrationExternalMappings

          type="user"

          integration={integration}

          organization={organization}

          mappings={this.mappings}

          dataEndpoint={this.dataEndpoint}

          getBaseFormEndpoint={() => this.baseFormEndpoint}

          defaultOptions={this.defaultUserOptions}

          sentryNamesMapper={this.sentryNamesMapper}

          onCreate={this.openModal}

          onDelete={this.handleDelete}

          pageLinks={membersPageLinks}

        />

      </Fragment>
    );
  }
}

export default withRouter(withOrganization(IntegrationExternalUserMappings));