-
Notifications
You must be signed in to change notification settings - Fork 917
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
[Multiple DataSource]Add datasource query for DataSourceView component to add label when only pass id #6315
Changes from 2 commits
857b926
e0611bb
11f4800
1e5d17d
e4e4230
e06b312
8050d63
7e0eee1
42204b2
c09bd5e
dc35342
1e95428
43989a3
13c0b45
57206d8
ef5066d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -22,11 +22,13 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | | |
const { componentType, componentConfig } = props; | ||
|
||
function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null { | ||
const { activeOption, fullWidth } = config; | ||
const { activeOption, fullWidth, savedObjects, notifications } = config; | ||
return ( | ||
<DataSourceView | ||
selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined} | ||
savedObjectsClient={savedObjects!} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. saved object client is not required |
||
notifications={notifications!.toasts} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. notification service is not required |
||
fullWidth={fullWidth} | ||
selectedOption={activeOption && activeOption.length > 0 ? activeOption : undefined} | ||
/> | ||
); | ||
} | ||
|
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,9 +6,13 @@ | |
import React from 'react'; | ||
import { i18n } from '@osd/i18n'; | ||
import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui'; | ||
import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public'; | ||
import { DataSourceOption } from '../data_source_menu/types'; | ||
import { getDataSourceById } from '../utils'; | ||
|
||
interface DataSourceViewProps { | ||
savedObjectsClient: SavedObjectsClientContract; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. savedobjects and notifications should be optional config |
||
notifications: ToastsStart; | ||
fullWidth: boolean; | ||
selectedOption?: DataSourceOption[]; | ||
} | ||
|
@@ -19,6 +23,8 @@ | |
} | ||
|
||
export class DataSourceView extends React.Component<DataSourceViewProps, DataSourceViewState> { | ||
private _isMounted: boolean = false; | ||
|
||
constructor(props: DataSourceViewProps) { | ||
super(props); | ||
|
||
|
@@ -28,6 +34,32 @@ | |
}; | ||
} | ||
|
||
componentWillUnmount() { | ||
this._isMounted = false; | ||
} | ||
async componentDidMount() { | ||
Comment on lines
+38
to
+41
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. just curious: why do we need componentDidMount and componentWillUnmount for this change? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We need to check the props.selectedOption.label exist, if not, need to call getDataSourceById to get the title back and set this value, since we only have one option, we only need to call at most once before rendering, this is the reason why put a componentDidMount here. As for |
||
this._isMounted = true; | ||
const selectedOption = this.props.selectedOption; | ||
if (selectedOption && selectedOption.length === 1) { | ||
if (selectedOption[0].id && !selectedOption[0].label) { | ||
yujin-emma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const title = (await getDataSourceById(selectedOption[0].id, this.props.savedObjectsClient)) | ||
.title; | ||
if (!title) { | ||
this.props.notifications.addWarning( | ||
i18n.translate('dataSource.fetchDataSourceError', { | ||
defaultMessage: `Invalid selectedOption: ${selectedOption[0].id}`, | ||
yujin-emma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}) | ||
); | ||
} else { | ||
if (!this._isMounted) return; | ||
this.setState({ | ||
Check warning on line 55 in src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx Codecov / codecov/patchsrc/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx#L55
|
||
selectedOption: [{ id: selectedOption[0].id, label: title }], | ||
yujin-emma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
}); | ||
} | ||
} | ||
} | ||
} | ||
|
||
onClick() { | ||
this.setState({ ...this.state, isPopoverOpen: !this.state.isPopoverOpen }); | ||
} | ||
|
@@ -46,10 +78,10 @@ | |
/> | ||
); | ||
|
||
let items = []; | ||
let items: Array<{ name: string | undefined; disabled: boolean }> = []; | ||
yujin-emma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
if (this.props.selectedOption) { | ||
items = this.props.selectedOption.map((option) => { | ||
if (this.state.selectedOption) { | ||
items = this.state.selectedOption.map((option) => { | ||
Comment on lines
+83
to
+84
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you please explain me this - why are we using this.state for selectedOption now instead of this.props? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. we pass the selectedOption from props, there can be some empty field, e.g. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +1, props should be enough. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We do not only copy the value from props, but also add missing label in the state, therefore, only state.selectedOption contains sufficient information to render, props.selectedOption can miss the label for some plugins |
||
return { | ||
name: option.label, | ||
disabled: true, | ||
|
@@ -78,8 +110,8 @@ | |
size="s" | ||
disabled={true} | ||
> | ||
{this.props.selectedOption && this.props.selectedOption.length > 0 | ||
? this.props.selectedOption[0].label | ||
{this.state.selectedOption && this.state.selectedOption.length > 0 | ||
? this.state.selectedOption[0].label | ||
: ''} | ||
</EuiButtonEmpty> | ||
<EuiPopover | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it a bug or a new feature/enhancement?