-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
DebugDetails.tsx
243 lines (229 loc) · 11.1 KB
/
DebugDetails.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
import React, {useCallback, useEffect, useMemo} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import CheckboxWithLabel from '@components/CheckboxWithLabel';
import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
import ScrollView from '@components/ScrollView';
import Text from '@components/Text';
import TextInput from '@components/TextInput';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import type {OnyxDataType} from '@libs/DebugUtils';
import DebugUtils from '@libs/DebugUtils';
import Navigation from '@libs/Navigation/Navigation';
import Debug from '@userActions/Debug';
import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import type {Report, ReportAction} from '@src/types/onyx';
import type {DetailsConstantFieldsKeys, DetailsDatetimeFieldsKeys, DetailsDisabledKeys} from './const';
import {DETAILS_CONSTANT_FIELDS, DETAILS_DATETIME_FIELDS, DETAILS_DISABLED_KEYS} from './const';
import ConstantSelector from './ConstantSelector';
import DateTimeSelector from './DateTimeSelector';
type DebugDetailsProps = {
/** The report or report action data to be displayed and editted. */
data: OnyxEntry<Report> | OnyxEntry<ReportAction>;
/** Callback to be called when user saves the debug data. */
onSave: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.DEBUG_DETAILS_FORM>) => void;
/** Callback to be called when user deletes the debug data. */
onDelete: () => void;
/** Callback to be called every time the debug data form is validated. */
validate: (key: never, value: string) => void;
};
function DebugDetails({data, onSave, onDelete, validate}: DebugDetailsProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const [formDraftData] = useOnyx(ONYXKEYS.FORMS.DEBUG_DETAILS_FORM_DRAFT);
const booleanFields = useMemo(
() =>
Object.entries(data ?? {})
.filter(([, value]) => typeof value === 'boolean')
.sort((a, b) => a[0].localeCompare(b[0])) as Array<[string, boolean]>,
[data],
);
const constantFields = useMemo(
() =>
Object.entries(data ?? {})
.filter(([key]) => DETAILS_CONSTANT_FIELDS.includes(key as DetailsConstantFieldsKeys))
.sort((a, b) => a[0].localeCompare(b[0])) as Array<[string, string]>,
[data],
);
const numberFields = useMemo(
() =>
Object.entries(data ?? {})
.filter(([, value]) => typeof value === 'number')
.sort((a, b) => a[0].localeCompare(b[0])) as Array<[string, number]>,
[data],
);
const textFields = useMemo(
() =>
Object.entries(data ?? {})
.filter(
([key, value]) =>
(typeof value === 'string' || typeof value === 'object') &&
!DETAILS_CONSTANT_FIELDS.includes(key as DetailsConstantFieldsKeys) &&
!DETAILS_DATETIME_FIELDS.includes(key as DetailsDatetimeFieldsKeys),
)
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
.map(([key, value]) => [key, DebugUtils.onyxDataToString(value)])
.sort((a, b) => a[0].localeCompare(b[0])),
[data],
);
const dateTimeFields = useMemo(() => Object.entries(data ?? {}).filter(([key]) => DETAILS_DATETIME_FIELDS.includes(key as DetailsDatetimeFieldsKeys)) as Array<[string, string]>, [data]);
const validator = useCallback(
(values: FormOnyxValues<typeof ONYXKEYS.FORMS.DEBUG_DETAILS_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.DEBUG_DETAILS_FORM> => {
const newErrors: Record<string, string | undefined> = {};
Object.entries(values).forEach(([key, value]) => {
try {
validate(key as never, DebugUtils.onyxDataToString(value));
} catch (e) {
const {cause, message} = e as SyntaxError;
newErrors[key] = cause || message === 'debug.missingValue' ? translate(message as TranslationPaths, cause as never) : message;
}
});
return newErrors;
},
[translate, validate],
);
useEffect(() => {
Debug.resetDebugDetailsDraftForm();
}, []);
const handleSubmit = useCallback(
(values: FormOnyxValues<typeof ONYXKEYS.FORMS.DEBUG_DETAILS_FORM>) => {
const dataPreparedToSave = Object.entries(values).reduce((acc: FormOnyxValues<typeof ONYXKEYS.FORMS.DEBUG_DETAILS_FORM>, [key, value]) => {
if (typeof value === 'boolean') {
acc[key] = value;
} else {
acc[key] = DebugUtils.stringToOnyxData(value as string, typeof data?.[key as keyof Report & keyof ReportAction] as OnyxDataType);
}
return acc;
}, {});
onSave(dataPreparedToSave);
},
[data, onSave],
);
const isSubmitDisabled = useMemo(
() =>
!Object.entries(formDraftData ?? {}).some(([key, value]) => {
const onyxData = data?.[key as keyof typeof data];
if (typeof value === 'string') {
return !DebugUtils.compareStringWithOnyxData(value, onyxData);
}
return onyxData !== value;
}),
[formDraftData, data],
);
return (
<ScrollView style={styles.mv5}>
<FormProvider
style={styles.flexGrow1}
formID={ONYXKEYS.FORMS.DEBUG_DETAILS_FORM}
validate={validator}
shouldValidateOnChange
onSubmit={handleSubmit}
isSubmitDisabled={isSubmitDisabled}
submitButtonText={translate('common.save')}
submitButtonStyles={[styles.ph5, styles.mt0]}
enabledWhenOffline
allowHTML
>
<Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.textFields')}</Text>
<View style={[styles.mb5, styles.ph5, styles.gap5]}>
{textFields.map(([key, value]) => {
const numberOfLines = DebugUtils.getNumberOfLinesFromString((formDraftData?.[key] as string) ?? value);
return (
<InputWrapper
InputComponent={TextInput}
inputID={key}
accessibilityLabel={key}
shouldSaveDraft
forceActiveLabel
label={key}
numberOfLines={numberOfLines}
multiline={numberOfLines > 1}
defaultValue={value}
disabled={DETAILS_DISABLED_KEYS.includes(key as DetailsDisabledKeys)}
/>
);
})}
{textFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>}
</View>
<Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.numberFields')}</Text>
<View style={[styles.mb5, styles.ph5, styles.gap5]}>
{numberFields.map(([key, value]) => (
<InputWrapper
InputComponent={TextInput}
inputID={key}
accessibilityLabel={key}
shouldSaveDraft
forceActiveLabel
label={key}
defaultValue={String(value)}
disabled={DETAILS_DISABLED_KEYS.includes(key as DetailsDisabledKeys)}
/>
))}
{numberFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>}
</View>
<Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.constantFields')}</Text>
<View style={styles.mb5}>
{constantFields.map(([key, value]) => (
<InputWrapper
key={key}
InputComponent={ConstantSelector}
inputID={key}
name={key}
shouldSaveDraft
defaultValue={String(value)}
/>
))}
{constantFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>}
</View>
<Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.dateTimeFields')}</Text>
<View style={styles.mb5}>
{dateTimeFields.map(([key, value]) => (
<InputWrapper
key={key}
InputComponent={DateTimeSelector}
inputID={key}
name={key}
shouldSaveDraft
defaultValue={String(value)}
/>
))}
{dateTimeFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>}
</View>
<Text style={[styles.headerText, styles.ph5, styles.mb3]}>{translate('debug.booleanFields')}</Text>
<View style={[styles.mb5, styles.ph5, styles.gap5]}>
{booleanFields.map(([key, value]) => (
<InputWrapper
InputComponent={CheckboxWithLabel}
label={key}
inputID={key}
shouldSaveDraft
accessibilityLabel={key}
defaultValue={value}
/>
))}
{booleanFields.length === 0 && <Text style={[styles.textNormalThemeText, styles.ph5]}>None</Text>}
</View>
<Text style={[styles.headerText, styles.textAlignCenter]}>{translate('debug.hint')}</Text>
<View style={[styles.ph5, styles.mb3, styles.mt5]}>
<Button
danger
large
text={translate('common.delete')}
onPress={() => {
onDelete();
Navigation.goBack();
}}
/>
</View>
</FormProvider>
</ScrollView>
);
}
DebugDetails.displayName = 'DebugDetails';
export default DebugDetails;