feat: enable code fence capabilities on mobile app.

[Jonathansoufer]

Description

This PR implements code fence feature to allow flask and main code co-live in the same branch yet delivered accordantly with build type, meaning flask code will only be included in flask build and not main.

Here is the version of code fencing implemented on extension.

Related issues

Fixes: https://github.com/MetaMask/accounts-planning/issues/112

Manual testing steps

Add code fence directive (BEGIN and END) on any code block and run the build.

              {
               ///: BEGIN:ONLY_INCLUDE_IN(flask)
              }

              <View style={styles.foxWrapper}>
                {Device.isAndroid() ? (
                  <Image
                    source={require('../../../images/fox.png')}
                    style={styles.image}
                    resizeMethod={'auto'}
                  />
                ) : (
                  <AnimatedFox bgColor={colors.background.default} />
                )}
              </View>
              {
                ///: END:ONLY_INCLUDE_IN
              }

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Next Steps

• Adjust android/app/build.gradle and add new iOS configurations/schemas for FLASK build.
• Add env variable to distinguish builds.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[owencraston]

we also need to ensure that we run a lint step after we build both main and flask to ensure that there are no unused variables and that each ///: END:ONLY_INCLUDE_IN has a corresponding ///: END:ONLY_INCLUDE_IN

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ad77009b-f443-4b42-a895-4d366242bf26
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[sethkfman]

@Jonathansoufer The only thing I would add is a bit of documentation in the README.md with a short description of code fencing and how to use it. If you wrote something up in notion bring it into the project.

[owencraston]

@Jonathansoufer we can probably add a similar readme to this one

[Cal-L]

Left some comments

[codecov-commenter]

Codecov Report

Attention: 23 lines in your changes are missing coverage. Please review.

Comparison is base (eeb99d8) 35.17% compared to head (428e94f) 35.32%.

Files	Patch %	Lines
app/transforms/remove-fenced-code.js	77.00%	23 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7734      +/-   ##
==========================================
+ Coverage   35.17%   35.32%   +0.15%     
==========================================
  Files        1039     1040       +1     
  Lines       27614    27714     +100     
  Branches     2340     2340              
==========================================
+ Hits         9712     9789      +77     
- Misses      17377    17400      +23     
  Partials      525      525              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[owencraston]

I added a few more specific tests so that the expected results were more clear and they are all passing.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/bc01b80b-4ace-4f58-a81e-aebf855ad731
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[owencraston]

I re ran the e2e: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/883c5038-5267-461a-9a4b-749e939c56a4

[Cal-L]

LGTM

[owencraston]

the pr regression e2e also passed: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4967eb2b-de95-42d7-af15-7041d7f07647

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
3 Code Smells

61.6% Coverage
0.0% Duplication