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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
							import {Fragment, useMemo, useState} from 'react';
import {css} from '@emotion/react';
import {
  BrowserClient,
  defaultIntegrations,
  defaultStackParser,
  makeFetchTransport,
} from '@sentry/react';

import {addSuccessMessage} from 'sentry/actionCreators/indicator';
import {ModalRenderProps} from 'sentry/actionCreators/modal';
import Button from 'sentry/components/button';
import Textarea from 'sentry/components/forms/controls/textarea';
import SelectField from 'sentry/components/forms/selectField';
import {t, tct} from 'sentry/locale';
import ConfigStore from 'sentry/stores/configStore';
import OrganizationStore from 'sentry/stores/organizationStore';
import {useLegacyStore} from 'sentry/stores/useLegacyStore';
import {defined} from 'sentry/utils';
import {useLocation} from 'sentry/utils/useLocation';
import useProjects from 'sentry/utils/useProjects';

import ButtonBar from '../buttonBar';
import Field from '../forms/field';
import ExternalLink from '../links/externalLink';

const feedbackClient = new BrowserClient({
  // feedback project under Sentry organization
  dsn: 'https://3c5ef4e344a04a0694d187a1272e96de@o1.ingest.sentry.io/6356259',
  transport: makeFetchTransport,
  stackParser: defaultStackParser,
  integrations: defaultIntegrations,
});

export interface FeedBackModalProps {
  featureName: string;
  feedbackTypes: string[];
}

interface Props
  extends FeedBackModalProps,
    Pick<ModalRenderProps, 'Header' | 'Body' | 'Footer' | 'closeModal'> {}

type State = {additionalInfo?: string; subject?: number};

export function FeedbackModal({
  Header,
  Body,
  Footer,
  closeModal,
  feedbackTypes,
  featureName,
}: Props) {
  const {organization} = useLegacyStore(OrganizationStore);
  const {projects, initiallyLoaded: projectsLoaded} = useProjects();
  const location = useLocation();
  const {user, isSelfHosted} = ConfigStore.getConfig();

  const [state, setState] = useState<State>({
    subject: undefined,
    additionalInfo: undefined,
  });

  const project = useMemo(() => {
    if (projectsLoaded && location.query.project) {
      return projects.find(p => p.id === location.query.project);
    }
    return undefined;
  }, [projectsLoaded, projects, location.query.project]);

  function handleSubmit() {
    const {subject, additionalInfo} = state;

    if (!defined(subject)) {
      return;
    }

    feedbackClient.captureEvent({
      message: additionalInfo?.trim()
        ? `Feedback: ${feedbackTypes[subject]} - ${additionalInfo}`
        : `Feedback: ${feedbackTypes[subject]}`,
      request: {
        url: location.pathname,
      },
      extra: {
        orgFeatures: organization?.features ?? [],
        orgAccess: organization?.access ?? [],
        projectFeatures: project?.features ?? [],
      },
      tags: {
        featureName,
      },
      user,
      level: 'info',
    });

    addSuccessMessage(t('Thanks for taking the time to provide us feedback!'));

    closeModal();
  }

  return (
    <Fragment>
      <Header closeButton>
        <h3>{t('Submit Feedback')}</h3>
      </Header>
      <Body>
        <SelectField
          label={t('Type of feedback')}
          name="subject"
          inline={false}
          options={feedbackTypes.map((feedbackType, index) => ({
            value: index,
            label: feedbackType,
          }))}
          placeholder={t('Select type of feedback')}
          value={state.subject}
          onChange={value => setState({...state, subject: value})}
          flexibleControlStateSize
          stacked
          required
        />
        <Field
          label={t('Additional feedback')}
          inline={false}
          required={false}
          flexibleControlStateSize
          stacked
        >
          <Textarea
            name="additional-feedback"
            value={state.additionalInfo}
            rows={5}
            autosize
            placeholder={t('What did you expect?')}
            onChange={event =>
              setState({
                ...state,
                additionalInfo: event.target.value,
              })
            }
          />
        </Field>
        {isSelfHosted && (
          <p>
            {tct(
              "You agree that any feedback you submit is subject to Sentry's [privacyPolicy:Privacy Policy] and Sentry may use such feedback without restriction or obligation.",
              {
                privacyPolicy: <ExternalLink href="https://sentry.io/privacy/" />,
              }
            )}
          </p>
        )}
      </Body>
      <Footer>
        <ButtonBar gap={1}>
          <Button onClick={closeModal}>{t('Cancel')}</Button>
          <Button
            priority="primary"
            onClick={handleSubmit}
            disabled={!defined(state.subject)}
          >
            {t('Submit Feedback')}
          </Button>
        </ButtonBar>
      </Footer>
    </Fragment>
  );
}

export const modalCss = css`
  width: 100%;
  max-width: 680px;
`;