[Discover] Modify the search bar info box content for sql/ppl

[RyanL1997]

Description

• Modify the search bar info box content for sql/ppl
• The info box will only show up when it is user's first time to select SQL/PPL
• Change the language picker's title from "SQL" into "OpenSearch SQL"

Issues Resolved

• Relate [Discover] notify user about field_type_tolerance for SQL/PPL in query footer #8702
• we can close the above since this PR reflects the new design from UIUX

Screenshot

Screen.Recording.2024-10-26.at.2.32.25.AM.mov

Testing the changes

Changelog

Check List

• All tests pass
  • yarn test:jest
  • yarn test:jest_integration
• New functionality includes testing.
• New functionality has been documented.
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[codecov]

Codecov Report

Attention: Patch coverage is 9.09091% with 10 lines in your changes missing coverage. Please review.

Project coverage is 60.73%. Comparing base (463a6c0) to head (f332b91).

Files with missing lines	Patch %	Lines
...string/language_service/lib/language_reference.tsx	9.09%	10 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8708      +/-   ##
==========================================
- Coverage   60.75%   60.73%   -0.03%     
==========================================
  Files        3798     3798              
  Lines       90650    90659       +9     
  Branches    14254    14259       +5     
==========================================
- Hits        55076    55062      -14     
- Misses      32079    32102      +23     
  Partials     3495     3495              

Flag	Coverage Δ
Linux_1	29.06% <9.09%> (-0.01%)	⬇️
Linux_2	56.39% <ø> (ø)
Linux_3	37.57% <9.09%> (-0.01%)	⬇️
Linux_4	29.83% <9.09%> (-0.01%)	⬇️
Windows_1	29.08% <9.09%> (-0.03%)	⬇️
Windows_2	56.35% <ø> (ø)
Windows_3	37.57% <9.09%> (-0.01%)	⬇️
Windows_4	29.83% <9.09%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

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

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[RyanL1997]

Unit testing is WIP. I'd gather some feedback first

[github-actions]

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

[ashwin-pc]

Why do we need to specify this here? can we make it generic. Something like this?

Suggested change

	useEffect(() => {
	if (
	props.selectedLanguage === 'SQL' &&
	window.localStorage.getItem('hasSeenSQLInfoBox') === 'false'
	) {
	setIsLanguageReferenceOpen(true);
	window.localStorage.setItem('hasSeenSQLInfoBox', 'true');
	} else if (
	props.selectedLanguage === 'PPL' &&
	window.localStorage.getItem('hasSeenPPLInfoBox') === 'false'
	) {
	setIsLanguageReferenceOpen(true);
	window.localStorage.setItem('hasSeenPPLInfoBox', 'true');
	}
	}, [props.selectedLanguage]);
	useEffect(() => {
	if (autoShow) {
	const storageKey = `hasSeenInfoBox_${selectedLanguage}`;
	const hasSeenInfoBox = window.localStorage.getItem(storageKey);
	if (hasSeenInfoBox === 'false') {
	setIsLanguageReferenceOpen(true);
	window.localStorage.setItem(storageKey, 'true');
	}
	}
	}, [props.selectedLanguage]);

[ashwin-pc]

Why do we ned this? why not just use undefined as the intiial state. If the key does not exist, its false by default