Home Explore Help
Sign In
SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry
1
0
Fork 0
Files
Browse Source

ref(forms): Consistently use {Text,Number,Secret}Field (#40017)

Co-authored-by: Priscila Oliveira <priscila.oliveira@sentry.io>
Evan Purkhiser 2 years ago
parent
71e5a84924
commit
12b41ade8d
10 changed files with 44 additions and 23 deletions
Split View Show Diff Stats
  1. 2 3
      static/app/components/customIgnoreCountModal.tsx
  2. 3 4
      static/app/components/events/interfaces/frame/stacktraceLinkModal.tsx
  3. 10 10
      static/app/components/forms/fieldFromConfig.tsx
  4. 3 1
      static/app/components/forms/fields/dateTimeField.tsx
  5. 3 1
      static/app/components/forms/fields/emailField.tsx
  6. 3 1
      static/app/components/forms/fields/hiddenField.tsx
  7. 4 0
      static/app/components/forms/fields/inputField.tsx
  8. 3 1
      static/app/components/forms/fields/numberField.tsx
  9. 4 2
      static/app/components/forms/fields/projectMapperField.tsx
  10. 9 0
      static/app/components/forms/fields/secretField.tsx

+ 2 - 3
static/app/components/customIgnoreCountModal.tsx
View File 

@@ -3,7 +3,7 @@ import {Component, Fragment} from 'react';
 
 import {ModalRenderProps} from 'sentry/actionCreators/modal';
 
 import Button from 'sentry/components/button';
 
 import ButtonBar from 'sentry/components/buttonBar';
 
-import InputField from 'sentry/components/forms/fields/inputField';
 
+import NumberField from 'sentry/components/forms/fields/numberField';
 
 import SelectField from 'sentry/components/forms/fields/selectField';
 
 import {t} from 'sentry/locale';
 
 import {ResolutionStatusDetails, SelectValue} from 'sentry/types';
 
@@ -58,13 +58,12 @@ class CustomIgnoreCountModal extends Component<Props, State> {
 
           <h4>{label}</h4>
 
         </Header>
 
         <Body>
 
-          <InputField
 
+          <NumberField
 
             inline={false}
 
             flexibleControlStateSize
 
             stacked
 
             label={countLabel}
 
             name="count"
 
-            type="number"
 
             value={count}
 
             onChange={val => this.handleChange('count' as 'count', Number(val))}
 
             required

+ 3 - 4
static/app/components/events/interfaces/frame/stacktraceLinkModal.tsx
View File 

@@ -5,7 +5,7 @@ import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicato
 
 import {ModalRenderProps} from 'sentry/actionCreators/modal';
 
 import Alert from 'sentry/components/alert';
 
 import Button from 'sentry/components/button';
 
-import InputField from 'sentry/components/forms/fields/inputField';
 
+import TextField from 'sentry/components/forms/fields/textField';
 
 import {t, tct} from 'sentry/locale';
 
 import space from 'sentry/styles/space';
 
 import type {Integration, Organization, Project} from 'sentry/types';
 
@@ -113,12 +113,11 @@ function StacktraceLinkModal({
 
             )}
 
           </div>
 
           <SourceCodeInput>
 
-            <StyledInputField
 
+            <StyledTextField
 
               inline={false}
 
               flexibleControlStateSize
 
               stacked
 
               name="source-code-input"
 
-              type="text"
 
               value={sourceCodeInput}
 
               onChange={onHandleChange}
 
               placeholder={`https://github.com/helloworld/Hello-World/blob/master/${filename}`}
 
@@ -181,7 +180,7 @@ const ManualSetup = styled('div')`
 
   align-items: center;
 
 `;
 
 
-const StyledInputField = styled(InputField)`
 
+const StyledTextField = styled(TextField)`
 
   padding: 0px;
 
   flex-grow: 1;
 
 `;

+ 10 - 10
static/app/components/forms/fieldFromConfig.tsx
View File 

@@ -10,19 +10,19 @@ import DateTimeField, {DateTimeFieldProps} from './fields/dateTimeField';
 
 import EmailField, {EmailFieldProps} from './fields/emailField';
 
 import FileField, {FileFieldProps} from './fields/fileField';
 
 import HiddenField, {HiddenFieldProps} from './fields/hiddenField';
 
-import InputField, {InputFieldProps} from './fields/inputField';
 
-import NumberField from './fields/numberField';
 
-import ProjectMapperField from './fields/projectMapperField';
 
+import NumberField, {NumberFieldProps} from './fields/numberField';
 
+import ProjectMapperField, {ProjectMapperProps} from './fields/projectMapperField';
 
 import RadioField, {RadioFieldProps} from './fields/radioField';
 
 import RangeField, {RangeFieldProps} from './fields/rangeField';
 
+import SecretField, {SecretFieldProps} from './fields/secretField';
 
 import SelectAsyncField, {SelectAsyncFieldProps} from './fields/selectAsyncField';
 
 import SelectField, {SelectFieldProps} from './fields/selectField';
 
 import SentryProjectSelectorField, {
 
   RenderFieldProps,
 
 } from './fields/sentryProjectSelectorField';
 
-import TableField from './fields/tableField';
 
+import TableField, {TableFieldProps} from './fields/tableField';
 
 import TextareaField, {TextareaFieldProps} from './fields/textareaField';
 
-import TextField from './fields/textField';
 
+import TextField, {TextFieldProps} from './fields/textField';
 
 
 interface FieldFromConfigProps {
 
   field: Field;
 
@@ -50,7 +50,7 @@ function FieldFromConfig(props: FieldFromConfigProps): React.ReactElement | null
 
     case 'separator':
 
       return <SeparatorField />;
 
     case 'secret':
 
-      return <InputField {...(componentProps as InputFieldProps)} type="password" />;
 
+      return <SecretField {...(componentProps as SecretFieldProps)} />;
 
     case 'range':
 
       return <RangeField {...(componentProps as RangeFieldProps)} />;
 
     case 'blank':
 
@@ -68,9 +68,9 @@ function FieldFromConfig(props: FieldFromConfigProps): React.ReactElement | null
 
       if (componentProps.multiline) {
 
         return <TextareaField {...(componentProps as TextareaFieldProps)} />;
 
       }
 
-      return <TextField {...componentProps} />;
 
+      return <TextField {...(componentProps as TextFieldProps)} />;
 
     case 'number':
 
-      return <NumberField {...componentProps} />;
 
+      return <NumberField {...(componentProps as NumberFieldProps)} />;
 
     case 'textarea':
 
       return <TextareaField {...(componentProps as TextareaFieldProps)} />;
 
     case 'choice':
 
@@ -85,9 +85,9 @@ function FieldFromConfig(props: FieldFromConfigProps): React.ReactElement | null
 
       }
 
       throw new Error('Invalid `choices` type. Use an array of options');
 
     case 'table':
 
-      return <TableField {...(componentProps as InputFieldProps)} />;
 
+      return <TableField {...(componentProps as TableFieldProps)} />;
 
     case 'project_mapper':
 
-      return <ProjectMapperField {...(componentProps as InputFieldProps)} />;
 
+      return <ProjectMapperField {...(componentProps as ProjectMapperProps)} />;
 
     case 'sentry_project_selector':
 
       return <SentryProjectSelectorField {...(componentProps as RenderFieldProps)} />;
 
     case 'select_async':

+ 3 - 1
static/app/components/forms/fields/dateTimeField.tsx
View File 

@@ -2,6 +2,8 @@ import InputField, {InputFieldProps} from './inputField';
 
 
 export type DateTimeFieldProps = Omit<InputFieldProps, 'type'>;
 
 
-export default function DateTimeField(props: DateTimeFieldProps) {
 
+function DateTimeField(props: DateTimeFieldProps) {
 
   return <InputField {...props} type="datetime-local" />;
 
 }
 
+
 
+export default DateTimeField;

+ 3 - 1
static/app/components/forms/fields/emailField.tsx
View File 

@@ -2,6 +2,8 @@ import InputField, {InputFieldProps} from './inputField';
 
 
 export interface EmailFieldProps extends Omit<InputFieldProps, 'type'> {}
 
 
-export default function EmailField(props: EmailFieldProps) {
 
+function EmailField(props: EmailFieldProps) {
 
   return <InputField {...props} type="email" />;
 
 }
 
+
 
+export default EmailField;

+ 3 - 1
static/app/components/forms/fields/hiddenField.tsx
View File 

@@ -4,10 +4,12 @@ import InputField, {InputFieldProps} from './inputField';
 
 
 export interface HiddenFieldProps extends Omit<InputFieldProps, 'type'> {}
 
 
-export default function HiddenField(props: HiddenFieldProps) {
 
+function HiddenField(props: HiddenFieldProps) {
 
   return <HiddenInputField {...props} type="hidden" />;
 
 }
 
 
 const HiddenInputField = styled(InputField)`
 
   display: none;
 
 `;
 
+
 
+export default HiddenField;

+ 4 - 0
static/app/components/forms/fields/inputField.tsx
View File 

@@ -44,6 +44,10 @@ function defaultField({
 
   );
 
 }
 
 
+/**
 
+ * InputField should be thought of as a "base" field, and generally not used
 
+ * within the Form itself.
 
+ */
 
 function InputField(props: InputFieldProps) {
 
   return (
 
     <FormField className={props.className} {...props}>

+ 3 - 1
static/app/components/forms/fields/numberField.tsx
View File 

@@ -2,6 +2,8 @@ import InputField, {InputFieldProps} from './inputField';
 
 
 export interface NumberFieldProps extends Omit<InputFieldProps, 'type'> {}
 
 
-export default function NumberField(props) {
 
+function NumberField(props: NumberFieldProps) {
 
   return <InputField {...props} type="number" />;
 
 }
 
+
 
+export default NumberField;

+ 4 - 2
static/app/components/forms/fields/projectMapperField.tsx
View File 

@@ -26,12 +26,14 @@ import {removeAtArrayIndex} from 'sentry/utils/removeAtArrayIndex';
 
 
 import InputField, {InputFieldProps} from './inputField';
 
 
-type MappedValue = string | number;
 
+export interface ProjectMapperProps extends Omit<InputFieldProps, 'type'> {}
 
 
-interface RenderProps extends Omit<InputFieldProps, 'type'>, ProjectMapperType {
 
+interface RenderProps extends ProjectMapperProps, ProjectMapperType {
 
   model: FormModel;
 
 }
 
 
+type MappedValue = string | number;
 
+
 
 type State = {
 
   selectedMappedValue: MappedValue | null;
 
   selectedSentryProjectId: number | null;

+ 9 - 0
static/app/components/forms/fields/secretField.tsx
View File 

@@ -0,0 +1,9 @@
 
+import InputField, {InputFieldProps} from './inputField';
 
+
 
+export interface SecretFieldProps extends Omit<InputFieldProps, 'type'> {}
 
+
 
+function SecretField(props: SecretFieldProps) {
 
+  return <InputField {...props} type="password" />;
 
+}
 
+
 
+export default SecretField;

Some files were not shown because too many files changed in this diff