[$500] PDF - The unlocked PDF file becomes blocked after scrolling right and left

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.5-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log in with any Gmail account.
3. On a conversation, click on the + button in the compose box
4. Click on add attachment
5. Send 2 PDF or images attachments
6. Send a password protected PDF
7. Open the PDF
8. Click on enter password
9. Enter the password (Test12345)
10. Click on the left nav (3 times) arrow to navigate to the previous PDF
11. Click on the right nav arrow to navigate back to the password protected PDF

Expected Result:

Password protected PDF file is not locked

Actual Result:

I can see the password protected PDF file when Enter the password, Click on the left nav arrow and Click on the right nav arrow. But when I click on the nav arrow 3 times (you need to have 3 attachments before that PDF file) and go back to the previous PDF - it is locked

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• Windows: Chrome
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6294945_1701280606899.I_can_see_the_password_protected_PDF_file.mp4

Password_protected Test12345 (1).pdf

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ddb14a6e24811e4d
• Upwork Job ID: 1729933932008587264
• Last Price Increase: 2023-12-06

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (External)

[ZhenjaHorbach]

Proposal

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

PDF - The unlocked PDF file becomes blocked after scrolling right and left

What is the root cause of that problem?

The main problem related to windowSize which we use for Carousel

We are currently using 5
This means that on the left and right we will store only 2 elements
2+1+2 = 5

If we click on a protected PDF more than 2 or left or right
That protected PDF is deleted from memory

App/src/components/Attachments/AttachmentCarousel/index.js

Lines 187 to 215 in 089ddf4

	<FlatList
	keyboardShouldPersistTaps="handled"
	listKey="AttachmentCarousel"
	horizontal
	decelerationRate="fast"
	showsHorizontalScrollIndicator={false}
	bounces={false}
	// Scroll only one image at a time no matter how fast the user swipes
	disableIntervalMomentum
	pagingEnabled
	snapToAlignment="start"
	snapToInterval={containerWidth}
	// Enable scrolling by swiping on mobile (touch) devices only
	// disable scroll for desktop/browsers because they add their scrollbars
	// Enable scrolling FlatList only when PDF is not in a zoomed state
	scrollEnabled={canUseTouchScreen}
	ref={scrollRef}
	initialScrollIndex={page}
	initialNumToRender={3}
	windowSize={5}
	maxToRenderPerBatch={CONST.MAX_TO_RENDER_PER_BATCH.CAROUSEL}
	data={attachments}
	CellRendererComponent={AttachmentCarouselCellRenderer}
	renderItem={renderItem}
	getItemLayout={getItemLayout}
	keyExtractor={(item) => item.source}
	viewabilityConfig={viewabilityConfig}
	onViewableItemsChanged={updatePage}
	/>

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

We can update windowSize value and make it bigger
Or use a dynamic value equal to (a count of elements / 2)

App/src/components/Attachments/AttachmentCarousel/index.js

Line 208 in 089ddf4

data={attachments}

What alternative solutions did you explore? (Optional)

As an alternative
We can create a new state inAttachmentCarousel
Which will store password states
Which will be automatically entered if we get to already opened protected PDF

1. AttachmentCarousel

We need to create a new state and create new function

    const [passwordsList, setPasswordsList] = useState({});

    const savePassword = (key) => (password) => {
        setPasswordsList({...passwordsList, [key]: password});
    };

App/src/components/Attachments/AttachmentCarousel/index.js

Line 31 in d9bfb27

function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, transaction}) {

Then we need pass password and savePassword

            <CarouselItem
                item={item}
                isFocused={activeSource === item.source}
                onPress={canUseTouchScreen ? () => setShouldShowArrows(!shouldShowArrows) : undefined}
                savePassword={savePassword(item.source)}
                password={passwordsList[item.source]}
            />

App/src/components/Attachments/AttachmentCarousel/index.js

Lines 151 to 155 in d9bfb27

	<CarouselItem
	item={item}
	isFocused={activeSource === item.source}
	onPress={canUseTouchScreen ? () => setShouldShowArrows(!shouldShowArrows) : undefined}
	/>

2. Other components(To avoid drilling we can use context or onyx )

3. PDFView

We need to create a new state to store an intermediate password

password: '',

App/src/components/PDFView/index.js

Lines 38 to 46 in d9bfb27

	this.state = {
	numPages: null,
	pageViewports: [],
	containerWidth: props.windowWidth,
	containerHeight: props.windowHeight,
	shouldRequestPassword: false,
	isPasswordInvalid: false,
	isKeyboardOpen: false,
	};

When we successfully open a PDF file and at this time we have a non-empty password state and save it

            if (this.state.password) {
                this.props.savePassword(this.state.password);
            }

App/src/components/PDFView/index.js

Lines 87 to 104 in d9bfb27

	onDocumentLoadSuccess(pdf) {
	const {numPages} = pdf;
	Promise.all(
	_.times(numPages, (index) => {
	const pageNumber = index + 1;
	return pdf.getPage(pageNumber).then((page) => page.getViewport({scale: 1}));
	}),
	).then((pageViewports) => {
	this.setState({
	pageViewports,
	numPages,
	shouldRequestPassword: false,
	isPasswordInvalid: false,
	});
	});
	}

If we have a password in the main store, we enter it during initialization

        if (this.props.password) {
            callback(this.props.password);
            return;
        }

App/src/components/PDFView/index.js

Lines 186 to 194 in d9bfb27

	initiatePasswordChallenge(callback, reason) {
	this.onPasswordCallback = callback;
	if (reason === CONST.PDF_PASSWORD_FORM.REACT_PDF_PASSWORD_RESPONSES.NEED_PASSWORD) {
	this.setState({shouldRequestPassword: true});
	} else if (reason === CONST.PDF_PASSWORD_FORM.REACT_PDF_PASSWORD_RESPONSES.INCORRECT_PASSWORD) {
	this.setState({shouldRequestPassword: true, isPasswordInvalid: true});
	}
	}

Here we save the password in an intermediate storage(NOT MAIN)

this.state.password = password;

App/src/components/PDFView/index.js

Lines 202 to 204 in d9bfb27

	attemptPDFLoad(password) {
	this.onPasswordCallback(password);
	}

[unidev727]

I can't reproduce it on dev.

[aimane-chnaif]

windowSize={5} - this is intentional for performance.
I don't think we'll agree with increasing this number.

[ZhenjaHorbach]

@aimane-chnaif

windowSize={5} - this is intentional for performance. I don't think we'll agree with increasing this number.

What about my alternative solution?)
I can write code examples with more details

[anup2230]

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

PDF - The unlocked PDF file becomes blocked after scrolling right and left

What is the root cause of that problem?

In the PDF 'render' function in ~/components/PDFView/index.js will check if the PDF is password protected, and then the method will call initiatePasswordChallenge if it is password protected. The method 'initiatePasswordChallenge' will reset the state 'shouldRequestPassword' and the pdf will be hidden until password is entered. here

onPassword={this.initiatePasswordChallenge}   

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

We can check the state 'shouldRequestPassword' before initiating the password challenge. This would avoid the 'initiatePasswordChallenge' method that will result in the password being needed again.

onPassword={() => this.state.shouldRequestPassword ? this.initiatePasswordChallenge() : null}

What alternative solutions did you explore?

I might have overlooked that the 'shouldRequestPassword' state is set to false initially, and given the PDF is password-protected and it can't be used to check if the password has been verified for the first authentication. In that case, we could also add a new state 'passwordVerified'. We can set this state to true when the password is needed and already verified. We could use this case to skip the password checks if the password has already been verified.

[melvin-bot]

@mallenexpensify, @aimane-chnaif Huh... This is 4 days overdue. Who can take care of this?

[mallenexpensify]

@aimane-chnaif , can you please review the above? Thx

[aimane-chnaif]

Thanks for the proposals
@ZhenjaHorbach your alternative solution looks overengineered.
@anup2230 have you tried to test your solution?

[aimane-chnaif]

@mallenexpensify as user perspective, do you think this is worth fixing?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[mallenexpensify]

This seems like a pretty extreme edge case and, starting next week we're going to be prioritizing fixing bugs on our roadmap, so I have strong feeling we'll want to close this. I'm going to remove Help Wanted for now, the revisit next week

[melvin-bot]

@mallenexpensify, @aimane-chnaif Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@mallenexpensify @aimane-chnaif this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

@mallenexpensify, @aimane-chnaif Eep! 4 days overdue now. Issues have feelings too...

[mallenexpensify]

Closing for now, per our focus on roadmap-related issues