[Due for payment 2025-07-22] [$250] Copy Change: Multi Tags Drag and Drop Indicates Other Filetypes than CSV and TSV are supported

[yuwenmemon]

Problem

The drag and drop panel for the tags importer currently shows that we support file types other than CSV or TSV. This is incorrect. We only support CSV and TSV for multi-tag import.

Solution

When importing multi-tags, we should link to a help page talking about the supported file types. This was specified in the design doc here:

Note that when we upload for a single level of tags, we should still show the copy as it exists right now.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021943104756131007989
• Upwork Job ID: 1943104756131007989
• Last Price Increase: 2025-07-10

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021943104756131007989

[melvin-bot]

Current assignee @allgandalf is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Copy Change: Multi Tags Drag and Drop Indicates Other Filetypes than CSV and TSV are supported

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

We can update the copy change here

App/src/components/ImportSpreadsheet.tsx

Line 144 in d40d0af

{isSmallScreenWidth ? translate('spreadsheet.chooseSpreadsheet') : translate('spreadsheet.dragAndDrop')}

• const importTagsRoute = CONST.IMPORT_TAGS_EXPENSIFY_URL;

 <Text style={[styles.subTextFileUpload, styles.textSupporting]}>
      {isSmallScreenWidth ? (
          translate('spreadsheet.chooseSpreadsheet')
      ) : (
          <RenderHTML html={`<comment><muted-text-label>${translate('spreadsheet.dragAndDrop', {importTagsRoute})}</muted-text-label></comment>`} />
      )}
  </Text>

• Add ImportTagsRouteParams in params.ts

type ImportTagsRouteParams = {
    importTagsRoute: string;
};

• Pass that importTagsRoute prop as a link in translations

 dragAndDrop: ({importTagsRoute}: ImportTagsRouteParams) =>
        `Drag and drop your spreadsheet here, or choose a file below. <a href=${importTagsRoute}>Learn more</a> about supported file formats.`,

We can add a link here in translation file > learn more > it will redirect to help page talking about the supported file type that is CSV and TSV format

App/src/languages/en.ts

Line 915 in d40d0af

dragAndDrop: 'Drag and drop your spreadsheet here, or choose a file below. Supported formats: .csv, .txt, .xls, and .xlsx.',

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

Note: Also edit this line, supported formats: .csv , .tsv > when we resize the window/isSmallScreenWidth

Result

multi-tag-recording.mov

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Burhan-Rashid]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Copy Change: Multi Tags Drag and Drop Indicates Other Filetypes than CSV and TSV are supported

What is the root cause of that problem?

Currently we are showing the ImportSpreadsheet modal for both multilevel tags and independent tags. And inside the ImportSpreadsheet we don't check if we are importing multi level tags or not. We are showing the same message for both multi-level tags and other tags.

App/src/components/ImportSpreadsheet.tsx

Line 144 in d40d0af

{isSmallScreenWidth ? translate('spreadsheet.chooseSpreadsheet') : translate('spreadsheet.dragAndDrop')}

App/src/languages/en.ts

Lines 915 to 916 in d40d0af

	dragAndDrop: 'Drag and drop your spreadsheet here, or choose a file below. Supported formats: .csv, .txt, .xls, and .xlsx.',
	chooseSpreadsheet: 'Select a spreadsheet file to import. Supported formats: .csv, .txt, .xls, and .xlsx.',

What changes do you think we should make in order to solve the problem?

Inside the importSpreadSheet modal, we need to check if we are importing multi level tags and based on that change the text message that is shown in the modal.
We can add the following changes here:

    const getTextForImportModal = () => {
        let text = '';
        if (spreadsheet?.isImportingMultiLevelTags) {
            text = isSmallScreenWidth ? translate('spreadsheet.chooseSpreadsheetMultiLevelTag') : translate('spreadsheet.dragAndDropMultiLevelTag');
        } else {
            text = isSmallScreenWidth ? translate('spreadsheet.chooseSpreadsheet') : translate('spreadsheet.dragAndDrop');
        }
        return text;
    };

    const acceptableFileTypes = spreadsheet?.isImportingMultiLevelTags
        ? CONST.MULTILEVEL_TAG_SPREADSHEET_EXTENSIONS.map((extension) => `.${extension}`).join(',')
        : CONST.ALLOWED_SPREADSHEET_EXTENSIONS.map((extension) => `.${extension}`).join(',');

and change this line here with:

App/src/components/ImportSpreadsheet.tsx

Line 144 in d40d0af

{isSmallScreenWidth ? translate('spreadsheet.chooseSpreadsheet') : translate('spreadsheet.dragAndDrop')}

{getTextForImportModal()}

and this line here with:

App/src/components/ImportSpreadsheet.tsx

Line 147 in d40d0af

<FilePicker acceptableFileTypes={CONST.ALLOWED_SPREADSHEET_EXTENSIONS.map((extension) => `.${extension}`).join(',')}>

            <FilePicker acceptableFileTypes={acceptableFileTypes}>

we can add a const for multilevel tag files types here:

    MULTILEVEL_TAG_SPREADSHEET_EXTENSIONS: ['csv', 'tsv'],

Also we need to add new translations, where we will also have the link to the learn more about supported extensions. e.g.

 chooseSpreadsheetMultiLevelTag: 'Drag and drop your spreadsheet here, or choose a file below. ${Learn More Link} about supported file formats.',
        dragAndDropMultiLevelTag: 'Select a spreadsheet file to import. ${Learn More Link} about supported file formats.',

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.