Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[discover] query editor and language selector state fixes #8712

Merged
merged 7 commits into from
Oct 29, 2024

Conversation

kavilla
Copy link
Member

@kavilla kavilla commented Oct 26, 2024

Description

  • Makes the query editor a React functional component which helps with state
  • Update language selector to not rely on a props.query to force re-render relying on observers
  • Update dataset selector to update the language and dataset instead of just updating the dataset and then the dataset eventually triggering the now removed props.query for the language selector to update intime.
  • update recent dataset on query update

Issues Resolved

n/a

Screenshot

Testing the changes

Changelog

  • refactor: [discover] query editor and language selector state fixes

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

Copy link
Contributor

❌ 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.

Copy link

codecov bot commented Oct 26, 2024

Codecov Report

Attention: Patch coverage is 69.49153% with 18 lines in your changes missing coverage. Please review.

Project coverage is 60.75%. Comparing base (463a6c0) to head (1a59213).
Report is 11 commits behind head on main.

Files with missing lines Patch % Lines
.../data/public/ui/query_editor/language_selector.tsx 59.25% 5 Missing and 6 partials ⚠️
...ta/public/ui/dataset_selector/dataset_selector.tsx 0.00% 4 Missing ⚠️
.../public/query/query_string/query_string_manager.ts 90.90% 1 Missing and 1 partial ⚠️
...s/data/public/ui/dataset_selector/configurator.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #8712      +/-   ##
==========================================
- Coverage   60.75%   60.75%   -0.01%     
==========================================
  Files        3798     3798              
  Lines       90650    90677      +27     
  Branches    14254    14269      +15     
==========================================
+ Hits        55076    55089      +13     
- Misses      32079    32091      +12     
- Partials     3495     3497       +2     
Flag Coverage Δ
Linux_1 29.06% <0.00%> (-0.01%) ⬇️
Linux_2 56.39% <ø> (-0.01%) ⬇️
Linux_3 37.60% <69.49%> (+0.02%) ⬆️
Linux_4 29.82% <0.00%> (-0.01%) ⬇️
Windows_1 29.07% <0.00%> (-0.03%) ⬇️
Windows_2 56.34% <ø> (-0.01%) ⬇️
Windows_3 37.60% <69.49%> (+0.02%) ⬆️
Windows_4 29.82% <0.00%> (-0.02%) ⬇️

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.

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
@kavilla kavilla force-pushed the kavilla/queryeditoropts branch from 156b1d5 to 126f51b Compare October 28, 2024 02:16
Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
@kavilla kavilla changed the title [DO NOT MERGE][WIP] react functional component [discover] query editor and language selector state fixes Oct 28, 2024
Copy link
Contributor

❌ 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.

1 similar comment
Copy link
Contributor

❌ 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.

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
@ananzh
Copy link
Member

ananzh commented Oct 28, 2024

test it with new cypress tests. It can pass the two tests I created.

Copy link
Collaborator

@virajsanghvi virajsanghvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How have we tested this? Is there an endpoint I can try this out on?

@@ -66,7 +66,7 @@ export class LanguageService {
return Array.from(this.languages.values());
}

public getDefaultLanguage(): LanguageConfig {
public getDefaultLanguage(): LanguageConfig | undefined {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was this response type just incorrect before or did it change?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

Copy link
Member Author

@kavilla kavilla Oct 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

response type was incorrect. in current state there should never not be a default language. but since it's stored as a map, the linter is saying DQL technically can't exist.

probaby need to bucket in having a more thorough default language usage and what that default language is. or did we want to lean in on perhaps there is no language state.

* If only language is provided, uses current dataset
* If only dataset is provided, uses current or dataset's preferred language
*/
public getInitialQuery = (partialQuery?: Partial<Query>) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we have a plan to address test coverage of this method?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

*/
public getInitialQuery = (partialQuery?: Partial<Query>) => {
if (!partialQuery) {
return this.getInitialQueryByLanguage(this.query$.getValue().language);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this.query$.getValue().language always defined?

language: languageId,
};
const queryString = language?.getQueryString(newQuery) || '';
this.languageService.setUserQueryString(queryString);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

q: this updates the query in the query box?

@abbyhu2000
Copy link
Member

passed the two cypress tests i wrote for discover 2.0
Screenshot 2024-10-28 at 3 52 16 PM
Screenshot 2024-10-28 at 3 09 54 PM

ananzh
ananzh previously approved these changes Oct 28, 2024
Copy link
Member

@ananzh ananzh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pull it down and verified using new tests. Changes look good to me. Approve for unblocking. I am also curious about @virajsanghvi 's questions. It would be better if you can add more tests.

virajsanghvi
virajsanghvi previously approved these changes Oct 29, 2024
Copy link
Collaborator

@virajsanghvi virajsanghvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving to unblock

Copy link
Member

@ashwin-pc ashwin-pc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the added comments in the flow. IT helped the review. No real blockers for the PR, had some questions before approving though

* If only language is provided, uses current dataset
* If only dataset is provided, uses current or dataset's preferred language
*/
public getInitialQuery = (partialQuery?: Partial<Query>) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

return datasetType?.supportedLanguages(dataset);
}, [props.query.dataset, queryString]);
const [isPopoverOpen, setPopover] = useState(false);
const [currentLanguage, setCurrentLanguage] = useState<string>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works for now, but i dont like keeping track of another state here. This component should simply use the current state of the query service. Two issues can arise from this:

  1. If the query state does not update, but the setCurrentLanguage does. They ar no out of sync again
  2. If someone in fututre accidentally updates the query state based on the currentLanguage, we have a race condition again

Not a blocker, but we need to be figure out a nicer pattern for components that want to simply reflect the current state of the query and update it without causing update loops

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah i think we discussed offline, but ui actions would help. originally i wanted to just rely on the query manager solely but then when modifying the code it was historically split because they wanted different states and actions for when the user selected the language vs like saved queries/saved searches modifying the language.

for example they will count an opt in/opt out of DQL based on the user selecting the language. but they would not increment an opt out count of DQL if the user selected a saved query that had a language of Lucene.

but we should revisit this and rely on modern services in OSD instead of handling the logic too specifically in a single component and passing around that prop.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to update the tests here. These snapshots are not useful

@@ -57,7 +54,7 @@ const ConnectedDatasetSelector = ({
<DatasetSelector
{...datasetSelectorProps}
selectedDataset={selectedDataset}
setSelectedDataset={handleDatasetChange}
onSelect={onSelect}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit:

Suggested change
onSelect={onSelect}
onChance={handleChange}

This is a more common pattern

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can make it a fast follow?

Comment on lines +46 to +47
setSelectedDataset(query.dataset);
queryString.setQuery(query);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not a good pattern. We are effectively trying to keep two separate states in sync. That means we have 2 sources of truth, which is risky

@@ -69,224 +65,171 @@ interface Props extends QueryEditorProps {
opensearchDashboards: OpenSearchDashboardsReactContextValue<IDataPluginServices>;
}

interface State {
isSuggestionsVisible: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dont we need this anymore?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I dont see it being used. autocomplete appear to be working

Comment on lines +181 to 183
services.http.post('/api/opensearch-dashboards/dql_opt_in_stats', {
body: JSON.stringify({ opt_in: languageId === 'kuery' }),
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should remove this as a whole

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i agree

!languageEditor.TopBar.Expanded && 'emptyExpanded'
)}
>
<div
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did we move the location of the banner?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whoops seems to have duplicated

language: query.language,
dataset: query.dataset,
},
dateRange
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We were missing this? How did it work before?

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
@kavilla kavilla dismissed stale reviews from virajsanghvi and ananzh via 1a59213 October 29, 2024 01:15
@ashwin-pc ashwin-pc merged commit 56eeab2 into opensearch-project:main Oct 29, 2024
68 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Oct 29, 2024
* Query editor functional component and cleanup language selector

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* pass language and dataset when the configurator sets it

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* clean up some dup and update language selector tests

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* fix tests

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* Changeset file for PR #8712 created/updated

* update recent dataset on query update

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* add tests and remove extra div wrapper

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

---------

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 56eeab2)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Qxisylolo pushed a commit to Qxisylolo/OpenSearch-Dashboards that referenced this pull request Oct 30, 2024
…-project#8712)

* Query editor functional component and cleanup language selector

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* pass language and dataset when the configurator sets it

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* clean up some dup and update language selector tests

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* fix tests

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* Changeset file for PR opensearch-project#8712 created/updated

* update recent dataset on query update

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

* add tests and remove extra div wrapper

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>

---------

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
ananzh pushed a commit that referenced this pull request Oct 30, 2024
)

* Query editor functional component and cleanup language selector



* pass language and dataset when the configurator sets it



* clean up some dup and update language selector tests



* fix tests



* Changeset file for PR #8712 created/updated

* update recent dataset on query update



* add tests and remove extra div wrapper



---------



(cherry picked from commit 56eeab2)

Signed-off-by: Kawika Avilla <kavilla414@gmail.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants