[HOLD for payment 2024-06-11] MEDIUM: [$500] Add button to console log to four finger tap menu

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Problem:

No option in the the four-finger tap menu, which allows you to enable client side logging, to also access the realtime console logs.

Solution:

Please add a button on the four-finger tap menu, which allows you to enable client side logging, to also access the realtime console logs. I find when I want to enable it, I'm often deep in some specific context that I don't want to leave.

Context/Examples/Screenshots/Notes:

Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1712979436331499

Add any screenshot/video evidence

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01bb0c76728a550068
• Upwork Job ID: 1780036099620753408
• Last Price Increase: 2024-05-17
• Automatic offers:
• ShridharGoel | Contributor | 0

Issue Owner

Current Issue Owner: @ShridharGoel

[melvin-bot]

Triggered auto assignment to @adelekennedy (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[ShridharGoel]

Proposal

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

We need to add a button to view debug console logs via the four finger tap menu.

What is the root cause of that problem?

New feature.

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

In the test tools modal (four finger tap menu), when client side logging is enabled, we can show an extra option to "View debug console". Clicking on this option would open another modal where we can display the existing ConsolePage.

Add the option after this:

App/src/components/ClientSideLoggingToolMenu/BaseClientSideLoggingToolMenu.tsx

Lines 64 to 70 in db9e01c

	<TestToolRow title={translate('initialSettingsPage.troubleshoot.clientSideLogging')}>
	<Switch
	accessibilityLabel={translate('initialSettingsPage.troubleshoot.clientSideLogging')}
	isOn={!!shouldStoreLogs}
	onToggle={onToggle}
	/>
	</TestToolRow>

This new option will be visible only if SHOULD_STORE_LOGS in Onyx has true value.

Sample code for the new option:

{!!shouldStoreLogs &&
  <TestToolRow title={translate('initialSettingsPage.troubleshoot.debugLogs')}>
        <Button
            small
            text={translate('common.viewConsole')}
            onPress={() => setIsConsoleModalVisible(true)}
        />
    </TestToolRow>
}

Create a new ConsoleModal. We will extract the components of ConsolePage at a common place (called ConsoleComponents), and use them in both ConsoleModal and ConsolePage (so no duplication of code).

I can share the test branch or detailed code which I have already tested.

Debug.console.logs.modal.mov

If we don't want options like save logs, share logs and command then we can skip them and simplify the UI to have just the logs.

Bonus functionality (A suggestion)

We can also add a new functionality of 5-finger tap. If 5-finger tap is done, we can:

• Open the debug console logs directly if client side logging is enabled.
• Open the test tools modal if client side logging is not enabled.

[nkdengineer]

Proposal

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

• New feature: Add button to console log to four finger tap menu

What is the root cause of that problem?

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

• In this, we can navigate user to settings/troubleshoot/console if the client side logging is toggled "on" and it is four tap menu.

    const onToggle = () => {
        if (!shouldStoreLogs) {
            Console.setShouldStoreLogs(true);

            if (onEnableLogging) {
                onEnableLogging();
            }
+          if (isInTestToolModal) {
+              toggleTestToolsModal();
+              Navigation.navigate(ROUTES.SETTINGS_CONSOLE);
+          }
            return;
        }
        ...
    };

• In the above, isInTestToolModal is the prop we use to check if it is in test tool modal or not and we can pass it down to ClientSideLoggingToolMenu in TestToolsModal

What alternative solutions did you explore? (Optional)

• In the main solution, after we open settings/troubleshoot/console, and then press on "back" button, we can display the test tool modal again rather than the settings/troubleshoot. We can do it by using isTestToolModal param in url, similar to the backTo param - that is used in a lot of logic in our app. For example, after we toggle "on" the client-side logging, we will navigate the user to settings/troubleshoot/console?isTestToolModal=true.
• Then update update this to:

              onBackButtonPress={() => {
+                  if (isTestToolModal) {
+                      Navigation.goBack();
+                      toggleTestToolsModal();
+                      return;
+                  }
                    Navigation.goBack(ROUTES.SETTINGS_TROUBLESHOOT);
                }}

Result

Screen.Recording.2024-04-14.at.11.10.34.mov

[ShridharGoel]

Proposal

Updated with video and bonus functionality.

[quinthar]

What are the next steps here; who is this waiting on, and what will they do? Is this waiting on @adelekennedy ?

[melvin-bot]

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

[melvin-bot]

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

[adelekennedy]

External label added for proposal reviews

[adelekennedy]

@eVoloshchak will you review the proposals above?

[eVoloshchak]

@ShridharGoel's proposal looks good to me!
I think we can skip the bonus functionality (5-finger tap), a button in the menu would be sufficient

🎀👀🎀 C+ reviewed!

[melvin-bot]

Triggered auto assignment to @Beamanator, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[nkdengineer]

@eVoloshchak @Beamanator The issue's requirement mentioned that:

add a button on the four-finger tap menu, which allows you to enable client side logging, to also access the realtime console logs

Can you help confirm the expected behavior once we enable "client side logging"? Should we navigate user to "console" screen right after that? If yes, the selected proposal does not cover it. cc @quinthar as you are the reporter

[ShridharGoel]

Please add a button on the four-finger tap menu, which allows you to enable client side logging, to also access the realtime console logs.

This clearly mentions that a button has to be added. Which means the console will show on clicking this new button (and the old button to enable logging would be as it is).

[melvin-bot]

Upwork job price has been updated to $500

[adelekennedy]

looks like this will be merged soon

[eVoloshchak]

PR is ready, will be merged after the merge freeze is over

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.78-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Show console debug logs via test tools menu #40656

If no regressions arise, payment will be issued on 2024-06-11. 🎊

For reference, here are some details about the assignees on this issue:

• @eVoloshchak requires payment through NewDot Manual Requests
• @ShridharGoel requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eVoloshchak] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[eVoloshchak]

Regression Test Proposal

1. Open test tools menu via a four-finger tap
2. Turn on Client side logging
3. A new Debug Console menu item should appear
4. Press View console button
5. Verify you're navigated to the Debug Console page
6. Go back -> Settings -> Troubleshoot
7. Perform steps 2-5

Do we agree 👍 or 👎

[adelekennedy]

Payouts due:

• Contributor: $500 @ShridharGoel (Upwork)
• Contributor+: $500 @eVoloshchak (newdot)

Upwork job is here.

[adelekennedy]

@ShridharGoel it looks like the automatic offer failed - i've just sent you an offer through Upwork!

[adelekennedy]

@ShridharGoel bumped you in Slack I'd like to pay out and close this issue

[melvin-bot]

@Beamanator, @eVoloshchak, @ShridharGoel, @adelekennedy Eep! 4 days overdue now. Issues have feelings too...

[JmillsExpensify]

$500 approved for @eVoloshchak

[adelekennedy]

payment made to @ShridharGoel - closing!