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


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							import React, {useState} from 'react';

import {ModalRenderProps} from 'sentry/actionCreators/modal';
import Button from 'sentry/components/button';
import {SelectAsyncField} from 'sentry/components/deprecatedforms';
import TimeSince from 'sentry/components/timeSince';
import Version from 'sentry/components/version';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';
import {Commit} from 'sentry/types';

type Props = ModalRenderProps & {
  onSelected: ({inCommit: string}) => void;
  orgSlug: string;
  projectSlug?: string;
};

function CustomCommitsResolutionModal({
  onSelected,
  orgSlug,
  projectSlug,
  closeModal,
  Header,
  Body,
  Footer,
}: Props) {
  const [commit, setCommit] = useState<{commit: Commit | undefined}>({commit: undefined});
  const [commits, setCommits] = useState<{commits: Commit[] | undefined}>({
    commits: undefined,
  });

  const onChange = (value: string | number | boolean) => {
    if (commits === undefined) {
      return;
    }
    setCommit({
      commit: commits.commits?.find(result => result.id === value),
    });
  };

  const onAsyncFieldResults = (results: Commit[]) => {
    setCommits({
      commits: results,
    });
    return results.map(c => ({
      value: c.id,
      label: <Version version={c.id} anchor={false} />,
      details: (
        <span>
          {t('Created')} <TimeSince date={c.dateCreated} />
        </span>
      ),
      c,
    }));
  };

  const url = `/projects/${orgSlug}/${projectSlug}/commits/`;

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSelected({
      inCommit: {
        commit: commit.commit?.id,
        repository: commit.commit?.repository?.name,
      },
    });
    closeModal();
  };

  return (
    <form onSubmit={onSubmit}>
      <Header>{t('Resolved In')}</Header>
      <Body>
        <SelectAsyncField
          label={t('Commit')}
          id="commit"
          name="commit"
          onChange={onChange}
          placeholder={t('e.g. 1.0.4')}
          url={url}
          onResults={onAsyncFieldResults}
          onQuery={query => ({query})}
        />
      </Body>
      <Footer>
        <Button type="button" css={{marginRight: space(1.5)}} onClick={closeModal}>
          {t('Cancel')}
        </Button>
        <Button type="submit" priority="primary">
          {t('Save Changes')}
        </Button>
      </Footer>
    </form>
  );
}

export default CustomCommitsResolutionModal;