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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
							import {Fragment} from 'react';
import {css} from '@emotion/react';

import type {ModalRenderProps} from 'sentry/actionCreators/modal';
import FieldFromConfig from 'sentry/components/forms/fieldFromConfig';
import Form from 'sentry/components/forms/form';
import type {Field} from 'sentry/components/forms/types';
import {t} from 'sentry/locale';
import theme from 'sentry/utils/theme';

interface RemoteConfigCreateFeatureModal extends ModalRenderProps {
  createFeature: (key: string, value: string) => void;
  isValid: (key: string) => boolean;
}

const formFields: Field[] = [
  {
    name: 'key',
    type: 'string',
    required: true,
    label: t('Feature Key'),
  },
  {
    name: 'value',
    type: 'string',
    required: true,
    label: t('Feature Value'),
  },
];

export default function RemoteConfigCreateFeatureModal({
  Body,
  Header,
  Footer: _Footer,
  closeModal,
  createFeature,
  isValid,
}: RemoteConfigCreateFeatureModal) {
  return (
    <Fragment>
      <Header closeButton>
        <h4>{t('Add Remote Config Feature')}</h4>
      </Header>
      <Body>
        <Form
          submitLabel={t('Add')}
          cancelLabel={t('Cancel')}
          onCancel={closeModal}
          onSubmit={(data, onSubmitSuccess, onSubmitError) => {
            if (isValid(data.key)) {
              closeModal();
              onSubmitSuccess(data);
              createFeature(data.key, data.value);
            } else {
              onSubmitError('Invalid key');
            }
          }}
        >
          {formFields.map(field => (
            <FieldFromConfig
              key={field.name}
              field={field}
              inline={false}
              stacked
              flexibleControlStateSize
            />
          ))}
        </Form>
      </Body>
    </Fragment>
  );
}

export const modalCss = css`
  @media (min-width: ${theme.breakpoints.small}) {
    width: 80%;
  }
`;