feat: Fetch Appsmith version when browser tab comes on focus

[hetunandu]

Description

Problem:

• When Appsmith upgrades, the older version JS files are no longer hosted on the server.
• When a browser tab with Appsmith is left open for a long time and not in focus, and Appsmith has upgraded in the mean time, the client will request for the older JS files. In this case, an html file is returned by Nginx while the browser expected JS

Solution:

• Ping the RTS server about the tab being back in focus, which will then respond with the current version of Appsmith.
• Version match will kick in on the client and if they don't match, it will ask the user to refresh the page

Fixes #9740
Fixes #16235

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Manual Test plan:
Run RTS and Appsmith client locally
Switch to another tab on the browser
Update the version number on the RTS code (version.js)
Come back to the Appsmith tab

Assert: A toast is shown to indicate a refresh is needed to update the client

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	Aug 29, 2022 at 5:13AM (UTC)

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[hetunandu]

/ok-to-test sha=04d43f9

[github-actions]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2901315938.
Workflow: Appsmith External Integration Test Workflow.
Commit: 04d43f9.
PR: 16153.

[github-actions]

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2901315938.
Commit: 04d43f9.
Results:

Click to view performance test results

	Run 1 (ms)	Run 2 (ms)	Run 3 (ms)	Run 4 (ms)	Run 5 (ms)	Median (ms)	Mean (ms)	Range (%)	SD.Sample (%)	SD.Population (%)
SELECT_CATEGORY
scripting	309.38	291.3	305.52	286.19	308.95	305.52	300.27	7.72	3.59	3.21
painting	3.42	4.99	6.32	5.01	3.87	4.99	4.72	61.44	23.94	21.40
rendering	105.6	105.84	105.28	103.92	105.08	105.28	105.14	1.83	0.70	0.64
BIND_TABLE_DATA
scripting	1169.32	1145.44	1133.9	1230.91	1186.74	1169.32	1173.26	8.27	3.26	2.91
painting	14.34	18.19	11.22	10.38	16.34	14.34	14.09	55.43	23.49	21.01
rendering	768.63	776.33	747.04	759.88	784.14	768.63	767.2	4.84	1.88	1.68
CLICK_ON_TABLE_ROW
scripting	777.91	840.68	830.97	825.69	869.16	830.97	828.88	11.01	3.99	3.57
painting	9.45	9.84	9.25	9.7	9.28	9.45	9.5	6.21	2.74	2.42
rendering	289.89	294.15	302.08	293.4	296.51	294.15	295.21	4.13	1.53	1.37
UPDATE_POST_TITLE
scripting	1330.97	1232.48	1299.89	1248.46	1324.88	1299.89	1287.34	7.65	3.47	3.11
painting	13.37	13.87	16.26	14.11	15.39	14.11	14.6	19.79	8.15	7.26
rendering	440.27	426.54	451.22	430.01	444.39	440.27	438.49	5.63	2.32	2.08
OPEN_MODAL
scripting	504.56	501.85	542.38	530.48	556.75	530.48	527.2	10.41	4.52	4.04
painting	17.13	8.65	17.32	9.17	9.39	9.39	12.33	70.32	36.33	32.44
rendering	372.34	368.02	372.32	369.49	378.1	372.32	372.05	2.71	1.04	0.93
CLOSE_MODAL
scripting	321.41	319.82	301.35	319.17	317.67	319.17	315.88	6.35	2.61	2.33
painting	10.59	4.72	4.56	7.79	5.07	5.07	6.55	92.06	40.00	35.73
rendering	611.39	611.25	604.51	608.84	611.71	611.25	609.54	1.18	0.50	0.44
SELECT_WIDGET_MENU_OPEN
scripting	1147.32	1034.75	1157.99	1108.85	1126.3	1126.3	1115.04	11.05	4.37	3.91
painting	6.56	6.02	12.75	6.61	6.77	6.61	7.74	86.95	36.30	32.56
rendering	573.45	568.52	607.86	588.85	575.81	575.81	582.9	6.75	2.72	2.43
SELECT_WIDGET_SELECT_OPTION
scripting	141.03	140.29	169.07	149.33	135.45	141.03	147.03	22.87	9.04	8.09
painting	3.82	3.75	5.95	15.75	2.34	3.82	6.32	212.18	85.92	76.74
rendering	319.65	305.91	321.48	316.66	305.1	316.66	313.76	5.22	2.46	2.21

[ramsaptami]

• The refresh prompt is persistent no matter how many times user hits 'REFRESH'
• The refresh prompt appears after every page refresh even after version has been updated
• Refresh prompt appears on the login window after user has logged out (which includes a page refresh action)
  cc: @hetunandu @btsgh

[github-actions]

Unable to find test scripts. Please add necessary tests to the PR.

[hetunandu]

/ok-to-test sha=6763ecc

[github-actions]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/2932997209.
Workflow: Appsmith External Integration Test Workflow.
Commit: 6763ecc.
PR: 16153.

[github-actions]

UI Performance test run logs and artifacts: https://github.com/appsmithorg/appsmith/actions/runs/2932997209.
Commit: 6763ecc.
Results:

Click to view performance test results

	Run 1 (ms)	Run 2 (ms)	Run 3 (ms)	Run 4 (ms)	Run 5 (ms)	Median (ms)	Mean (ms)	Range (%)	SD.Sample (%)	SD.Population (%)
SELECT_CATEGORY
scripting	277.48	301.7	310.61	275.32	285.6	285.6	290.14	12.16	5.32	4.76
painting	5.14	5.47	3.07	2.98	5.78	5.14	4.49	62.36	30.07	26.95
rendering	106.13	106.19	110.05	104.87	102.54	106.13	105.96	7.09	2.57	2.30
BIND_TABLE_DATA
scripting	1153.96	1202.6	1239.98	1229.03	1149.15	1202.6	1194.94	7.60	3.51	3.14
painting	13.21	14.1	13.89	16.94	12.82	13.89	14.19	29.03	11.42	10.22
rendering	428.93	417.2	450.29	410.61	395.5	417.2	420.51	13.03	4.89	4.38
CLICK_ON_TABLE_ROW
scripting	847.95	877.16	825.61	839.98	822.07	839.98	842.55	6.54	2.61	2.34
painting	12.61	11.66	9.69	12.14	16.16	12.14	12.45	51.97	18.88	16.87
rendering	295.39	299.35	293.56	282.58	285.68	293.56	291.31	5.76	2.39	2.14
UPDATE_POST_TITLE
scripting	1288.43	1963.71	1481.35	1222.35	1235.17	1288.43	1438.2	51.55	21.66	19.38
painting	13.69	17.84	16.55	13.42	24.09	16.55	17.12	62.32	25.29	22.61
rendering	440.14	465.07	464.77	418.6	430.53	440.14	443.82	10.47	4.67	4.18
OPEN_MODAL
scripting	455.22	495.03	532	469.45	530.86	495.03	496.51	15.46	7.03	6.29
painting	18.08	13.71	18.77	16.28	9.59	16.28	15.29	60.04	24.46	21.84
rendering	360.51	366.55	382.57	353.92	398.28	366.55	372.37	11.91	4.82	4.31
CLOSE_MODAL
scripting	303.03	273.5	765.05	247.59	332.06	303.03	384.25	134.67	56.01	50.09
painting	4.34	7.69	13.98	3.96	9.98	7.69	7.99	125.41	52.19	46.68
rendering	619.16	613.77	619.26	584.84	637.46	619.16	614.9	8.56	3.10	2.77
SELECT_WIDGET_MENU_OPEN
scripting	1103.54	1250.44	1066.05	1032.75	1142.35	1103.54	1119.03	19.45	7.52	6.72
painting	6.23	12.41	9.19	5.17	5.88	6.23	7.78	93.06	38.69	34.58
rendering	631.87	686.88	593.35	585.5	625.43	625.43	624.61	16.23	6.42	5.74
SELECT_WIDGET_SELECT_OPTION
scripting	146.59	148.04	141.61	134.9	144.62	144.62	143.15	9.18	3.63	3.25
painting	4.1	5.74	1.85	2.05	3.71	3.71	3.49	111.46	45.85	40.97
rendering	314.39	313.3	304.53	304.86	316.68	313.3	310.75	3.91	1.82	1.63

[btsgh]

After trying steps to test provided by @hetunandu -

1. Stop docker (local instance). Check version.js in appsmith/app/rts/src .. It should have the text - export const VERSION = SNAPSHOT;
2. In terminal Run export REACT_APP_VERSION_ID="SNAPSHOT"
3. Build normally (from appsmith folder) with ./scripts/local_testing.sh on this PR branch
4. The toast message should not be visible
5. Now - go to some other tab in your browser.
6. Update the rts/version.js (appsmith/app/rts/src) such that it reads -
   export const VERSION = SNAPSHOT_2;
7. Go to the root of appmith in terminal and then run the following commands.
   a-pushd app/rts > /dev/null && ./build.sh > /dev/null
   b-popd docker build -t appsmith/appsmith-ce:local-testing . > /dev/null
   c-(docker stop appsmith || true) && (docker rm appsmith || true)
   docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce:local-testing

(While doing the above steps, at point 7b I get an error on terminal - popd: too many arguments)

[rishabhrathod01]

Hey, @hetunandu thanks for working on this.

QQ: Did we also verify if the index.html is not being cached?

Concern: If index.html is being cached in the browser then a refresh might result in serving in the cached index.html directly from the browser and that index.html will still have old chunk hash names.

https://raphael-leger.medium.com/react-webpack-chunkloaderror-loading-chunk-x-failed-ac385bd110e0

[hetunandu]

Hey, @hetunandu thanks for working on this.

QQ: Did we also verify if the index.html is not being cached?

Concern: If index.html is being cached in the browser then a refresh might result in serving in the cached index.html directly from the browser and that index.html will still have old chunk hash names.

https://raphael-leger.medium.com/react-webpack-chunkloaderror-loading-chunk-x-failed-ac385bd110e0

In my debugging, I never saw index.html being cached.

[btsgh]

Trying the following on QA localhost environment -

Stop docker (local instance). Check version.js in appsmith/app/rts/src .. It should have the text - export const VERSION = SNAPSHOT;
In terminal Run export REACT_APP_VERSION_ID="SNAPSHOT"
Build normally (from appsmith folder) with ./scripts/local_testing.sh on this PR branch (also tried on release branch)
The toast message should not be visible
So far works well.

Now - go to some other tab in your browser.

Update the rts/version.js (appsmith/app/rts/src) such that it reads -
export const VERSION = SNAPSHOT_2;
Go to the root of appmith in terminal and then run the following commands - .

a-pushd app/rts > /dev/null && ./build.sh > /dev/null

b-popd
docker build -t appsmith/appsmith-ce:local-testing . > /dev/null

c-(docker stop appsmith || true) && (docker rm appsmith || true)

docker run -d --name appsmith -p 80:80 -v "$PWD/stacks:/appsmith-stacks" appsmith/appsmith-ce:local-testing

Now on coming back to the localhost tab, check for toast message.

Observation - no toast message is seen. No toast message either on Refresh.
Discussed and as per @hetunandu - issue with rts as Network tab has no version shown.
The same scenario also being tried by Yatin now on his QA environment.

Update - Yatin tried on his system his server itself did not come up. Attached log -
aparna_tab.pdf

[mohanarpit]

export const VERSION = SNAPSHOT_2;

@btsgh Is this line correct? I'm asking because we have to set export REACT_APP_VERSION_ID="SNAPSHOT_2" when we change the version itself. Could this be the reason that the RTS isn't responding to the client with a new version ID?

[btsgh]

export const VERSION = SNAPSHOT_2;

@btsgh Is this line correct? I'm asking because we have to set export REACT_APP_VERSION_ID="SNAPSHOT_2" when we change the version itself. Could this be the reason that the RTS isn't responding to the client with a new version ID?

Hmm. I tried the steps with this statement added in the version.js - export REACT_APP_VERSION_ID="SNAPSHOT_2" .. as suggested above, that also did not help. :(
Still - no toast message is seen. No toast message either on Refresh.
Rts in Network tab still has no version shown.

cc: @mohanarpit @hetunandu

[btsgh]

Tried once again with @hetunandu - We started from a clean slate (deleting old files / docker container etc) and ran all the scripts mentioned in the above comments again. The test was successful this time. When there was a difference in the client version and the rts version, the toast message correctly came up. Also when the versions were the same, the toast message did not come up.