editAdminOptionModal.tsx 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import {Fragment, useMemo} from 'react';
  2. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  3. import {Alert} from 'sentry/components/core/alert';
  4. import BooleanField from 'sentry/components/forms/fields/booleanField';
  5. import RangeField from 'sentry/components/forms/fields/rangeField';
  6. import type {SerializedOption} from 'admin/views/options';
  7. interface EditAdminOptionModalProps extends ModalRenderProps {
  8. allOptions: SerializedOption[];
  9. option: SerializedOption;
  10. path: string;
  11. }
  12. function EditAdminOptionModal({
  13. Body,
  14. Header,
  15. option,
  16. allOptions,
  17. }: EditAdminOptionModalProps) {
  18. const groupedOptions = useMemo(() => {
  19. const options = option.groupingInfo
  20. ? allOptions.filter(o => o.groupingInfo?.name === option.groupingInfo?.name)
  21. : [option];
  22. options.sort((a, b) => (a.groupingInfo?.order || 0) - (b.groupingInfo?.order || 0));
  23. return options;
  24. }, []); // eslint-disable-line react-hooks/exhaustive-deps
  25. return (
  26. <Fragment>
  27. <Header closeButton>Edit Option {option.groupingInfo ? 'Group' : null}</Header>
  28. <Body>
  29. <Alert.Container>
  30. <Alert type="info">
  31. Options setting through _admin is deprecated. Please use the options
  32. automator.
  33. </Alert>
  34. </Alert.Container>
  35. {groupedOptions.map(o => (
  36. <EditOption key={o.name} option={o} />
  37. ))}
  38. </Body>
  39. </Fragment>
  40. );
  41. }
  42. function EditOption({option}: {option: SerializedOption}) {
  43. return option.fieldType === 'bool' ? (
  44. <BooleanField
  45. label={option.name}
  46. name={option.name}
  47. value={option.value}
  48. alignRight
  49. flexibleControlStateSize
  50. size="sm"
  51. />
  52. ) : (
  53. <Fragment>
  54. <RangeField
  55. label={option.name}
  56. name={option.name}
  57. min={0}
  58. max={1}
  59. step={0.01}
  60. value={option.value}
  61. alignRight
  62. flexibleControlStateSize
  63. size="xs"
  64. />
  65. </Fragment>
  66. );
  67. }
  68. // TODO(TS): Type cast added as part of react 18 upgrade, can remove after?
  69. export default EditAdminOptionModal;