feat: Import onyx state

src/ONYXKEYS.ts

@@ -427,6 +427,9 @@ const ONYXKEYS = {
     /** Stores the route to open after changing app permission from settings */
     LAST_ROUTE: 'lastRoute',
 
+    /** Stores the information if user loaded the Onyx state through Import feature  */
+    IS_USING_IMPORTED_STATE: 'isUsingImportedState',
+
     /** Stores the information about the saved searches */
     SAVED_SEARCHES: 'nvp_savedSearches',
 
@@ -986,9 +989,9 @@ type OnyxValuesMapping = {
     [ONYXKEYS.APPROVAL_WORKFLOW]: OnyxTypes.ApprovalWorkflowOnyx;
     [ONYXKEYS.IMPORTED_SPREADSHEET]: OnyxTypes.ImportedSpreadsheet;
     [ONYXKEYS.LAST_ROUTE]: string;
+    [ONYXKEYS.IS_USING_IMPORTED_STATE]: boolean;
     [ONYXKEYS.NVP_SHOULD_HIDE_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
 };
-
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;
 
 type OnyxCollectionKey = keyof OnyxCollectionValuesMapping;

src/components/AttachmentPicker/index.native.tsx

@@ -22,12 +22,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type IconAsset from '@src/types/utils/IconAsset';
 import launchCamera from './launchCamera/launchCamera';
-import type BaseAttachmentPickerProps from './types';
-
-type AttachmentPickerProps = BaseAttachmentPickerProps & {
-    /** If this value is true, then we exclude Camera option. */
-    shouldHideCameraOption?: boolean;
-};
+import type AttachmentPickerProps from './types';
 
 type Item = {
     /** The icon associated with the item. */
@@ -112,7 +107,7 @@ const getDataForUpload = (fileData: FileResponse): Promise<FileObject> => {
  * a callback. This is the ios/android implementation
  * opening a modal with attachment options
  */
-function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, shouldHideCameraOption = false}: AttachmentPickerProps) {
+function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, shouldHideCameraOption = false, shouldHideGalleryOption = false}: AttachmentPickerProps) {
     const styles = useThemeStyles();
     const [isVisible, setIsVisible] = useState(false);
 
@@ -218,17 +213,19 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
 
     const menuItemData: Item[] = useMemo(() => {
         const data: Item[] = [
-            {
-                icon: Expensicons.Gallery,
-                textTranslationKey: 'attachmentPicker.chooseFromGallery',
-                pickAttachment: () => showImagePicker(launchImageLibrary),
-            },
             {
                 icon: Expensicons.Paperclip,
                 textTranslationKey: 'attachmentPicker.chooseDocument',
                 pickAttachment: showDocumentPicker,
             },
         ];
+        if (!shouldHideGalleryOption) {
+            data.unshift({
+                icon: Expensicons.Gallery,
+                textTranslationKey: 'attachmentPicker.chooseFromGallery',
+                pickAttachment: () => showImagePicker(launchImageLibrary),
+            });
+        }
         if (!shouldHideCameraOption) {
             data.unshift({
                 icon: Expensicons.Camera,
@@ -238,7 +235,7 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
         }
 
         return data;
-    }, [showDocumentPicker, showImagePicker, shouldHideCameraOption]);
+    }, [showDocumentPicker, shouldHideGalleryOption, shouldHideCameraOption, showImagePicker]);
 
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: menuItemData.length - 1, isActive: isVisible});
 

src/components/AttachmentPicker/types.ts

@@ -42,6 +42,10 @@ type AttachmentPickerProps = {
     type?: ValueOf<typeof CONST.ATTACHMENT_PICKER_TYPE>;
 
     acceptedFileTypes?: Array<ValueOf<typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS>>;
+
+    shouldHideCameraOption?: boolean;
+
+    shouldHideGalleryOption?: boolean;
 };
 
 export default AttachmentPickerProps;

src/components/ImportOnyxState/index.native.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import RNFS from 'react-native-fs';
+import Onyx from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
+import AttachmentPicker from '@components/AttachmentPicker';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
+import {setShouldForceOffline} from '@libs/actions/Network';
+import Navigation from '@libs/Navigation/Navigation';
+import type {OnyxValues} from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type ImportOnyxStateProps from './types';
+import {cleanAndTransformState} from './utils';
+
+const CHUNK_SIZE = 100;
+
+function readFileInChunks(fileUri: string, chunkSize = 1024 * 1024) {
+    const filePath = decodeURIComponent(fileUri.replace('file://', ''));
+
+    return RNFS.exists(filePath)
+        .then((exists) => {
+            if (!exists) {
+                throw new Error('File does not exist');
+            }
+            return RNFS.stat(filePath);
+        })
+        .then((fileStats) => {
+            const fileSize = fileStats.size;
+            let fileContent = '';
+            const promises = [];
+
+            // Chunk the file into smaller parts to avoid memory issues
+            for (let i = 0; i < fileSize; i += chunkSize) {
+                promises.push(RNFS.read(filePath, chunkSize, i, 'utf8').then((chunk) => chunk));
+            }
+
+            // After all chunks have been read, join them together
+            return Promise.all(promises).then((chunks) => {
+                fileContent = chunks.join('');
+
+                return fileContent;
+            });
+        })
+        .catch((error) => {
+            throw error;
+        });
+}
+
+function chunkArray<T>(array: T[], size: number): T[][] {
+    const result = [];
+    for (let i = 0; i < array.length; i += size) {
+        result.push(array.slice(i, i + size));
+    }
+    return result;
+}
+
+function applyStateInChunks(state: OnyxValues) {
+    const entries = Object.entries(state);
+    const chunks = chunkArray(entries, CHUNK_SIZE);
+
+    let promise = Promise.resolve();
+    chunks.forEach((chunk) => {
+        const partialOnyxState = Object.fromEntries(chunk) as Partial<OnyxValues>;
+        promise = promise.then(() => Onyx.multiSet(partialOnyxState));
+    });
+
+    return promise;
+}
+
+export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const handleFileRead = (file: FileObject) => {
+        if (!file.uri) {
+            return;
+        }
+
+        setIsLoading(true);
+        readFileInChunks(file.uri)
+            .then((fileContent) => {
+                const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
+                setShouldForceOffline(true);
+                Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                    applyStateInChunks(transformedState).then(() => {
+                        setIsUsingImportedState(true);
+                        Navigation.navigate(ROUTES.HOME);
+                    });
+                });
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+
+        if (isLoading) {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <AttachmentPicker
+            acceptedFileTypes={['text']}
+            shouldHideCameraOption
+            shouldHideGalleryOption
+        >
+            {({openPicker}) => {
+                return (
+                    <MenuItem
+                        icon={Expensicons.Upload}
+                        title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                        wrapperStyle={[styles.sectionMenuItemTopDescription]}
+                        onPress={() => {
+                            openPicker({
+                                onPicked: handleFileRead,
+                            });
+                        }}
+                    />
+                );
+            }}
+        </AttachmentPicker>
+    );
+}

src/components/ImportOnyxState/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import type {FileObject} from '@components/AttachmentModal';
+import AttachmentPicker from '@components/AttachmentPicker';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItem from '@components/MenuItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {KEYS_TO_PRESERVE, setIsUsingImportedState} from '@libs/actions/App';
+import {setShouldForceOffline} from '@libs/actions/Network';
+import Navigation from '@libs/Navigation/Navigation';
+import type {OnyxValues} from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type ImportOnyxStateProps from './types';
+import {cleanAndTransformState} from './utils';
+
+export default function ImportOnyxState({setIsLoading, isLoading}: ImportOnyxStateProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const handleFileRead = (file: FileObject) => {
+        if (!file.uri) {
+            return;
+        }
+
+        setIsLoading(true);
+        const blob = new Blob([file as BlobPart]);
+        const response = new Response(blob);
+
+        response.text().then((text) => {
+            const fileContent = text;
+            const transformedState = cleanAndTransformState<OnyxValues>(fileContent);
+            setShouldForceOffline(true);
+            Onyx.clear(KEYS_TO_PRESERVE).then(() => {
+                Onyx.multiSet(transformedState)
+                    .then(() => {
+                        setIsUsingImportedState(true);
+                        Navigation.navigate(ROUTES.HOME);
+                    })
+                    .finally(() => {
+                        setIsLoading(false);
+                    });
+            });
+        });
+
+        if (isLoading) {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <AttachmentPicker acceptedFileTypes={['text']}>
+            {({openPicker}) => {
+                return (
+                    <MenuItem
+                        icon={Expensicons.Upload}
+                        title={translate('initialSettingsPage.troubleshoot.importOnyxState')}
+                        wrapperStyle={[styles.sectionMenuItemTopDescription]}
+                        onPress={() => {
+                            openPicker({
+                                onPicked: handleFileRead,
+                            });
+                        }}
+                    />
+                );
+            }}
+        </AttachmentPicker>
+    );
+}

src/components/ImportOnyxState/types.ts

@@ -0,0 +1,6 @@
+type ImportOnyxStateProps = {
+    isLoading: boolean;
+    setIsLoading: (isLoading: boolean) => void;
+};
+
+export default ImportOnyxStateProps;

src/components/ImportOnyxState/utils.ts

@@ -0,0 +1,57 @@
+import type {UnknownRecord} from 'type-fest';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+// List of Onyx keys from the .txt file we want to keep for the local override
+const keysToOmit = [ONYXKEYS.ACTIVE_CLIENTS, ONYXKEYS.BETAS, ONYXKEYS.FREQUENTLY_USED_EMOJIS, ONYXKEYS.NETWORK, ONYXKEYS.CREDENTIALS, ONYXKEYS.SESSION];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && !Array.isArray(value) && value !== null;
+}
+
+function transformNumericKeysToArray(data: UnknownRecord): UnknownRecord | unknown[] {
+    const dataCopy = data;
+    if (typeof dataCopy !== 'object' || dataCopy === null) {
+        return dataCopy;
+    }
+
+    const keys = Object.keys(dataCopy);
+    const allKeysAreNumeric = keys.every((key) => !Number.isNaN(key));
+    const keysAreSequential = keys.every((key, index) => parseInt(key, 10) === index);
+
+    if (allKeysAreNumeric && keysAreSequential) {
+        return keys.map((key) => {
+            if (isRecord(dataCopy)) {
+                return transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
+            }
+            return dataCopy;
+        });
+    }
+
+    if (isRecord(dataCopy)) {
+        for (const key in dataCopy) {
+            if (key in dataCopy) {
+                dataCopy[key] = transformNumericKeysToArray(dataCopy[key] as UnknownRecord);
+            }
+        }
+    }
+
+    return dataCopy;
+}
+
+function cleanAndTransformState<T>(state: string): T {
+    const parsedState = JSON.parse(state) as UnknownRecord;
+
+    Object.keys(parsedState).forEach((key) => {
+        const shouldOmit = keysToOmit.some((onyxKey) => key.startsWith(onyxKey));
+
+        if (shouldOmit) {
+            delete parsedState[key];
+        }
+    });
+
+    const transformedState = transformNumericKeysToArray(parsedState) as T;
+
+    return transformedState;
+}
+
+export {transformNumericKeysToArray, cleanAndTransformState};

src/components/ImportedStateIndicator.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {clearOnyxAndResetApp} from '@libs/actions/App';
+import ONYXKEYS from '@src/ONYXKEYS';
+import Button from './Button';
+
+function ImportedStateIndicator() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [isUsingImportedState] = useOnyx(ONYXKEYS.IS_USING_IMPORTED_STATE);
+
+    if (!isUsingImportedState) {
+        return null;
+    }
+
+    return (
+        <View style={[styles.buttonDanger]}>
+            <Button
+                danger
+                small
+                shouldRemoveLeftBorderRadius
+                shouldRemoveRightBorderRadius
+                text={translate('initialSettingsPage.troubleshoot.usingImportedState')}
+                onPress={clearOnyxAndResetApp}
+                textStyles={[styles.fontWeightNormal]}
+            />
+        </View>
+    );
+}
+
+export default ImportedStateIndicator;