Skip to content

Commit

Permalink
refactor: move the render of query extension control buttons to exten…
Browse files Browse the repository at this point in the history
…sion component (#8334)

* refactor: move the render of query extension fragments to extension component

Signed-off-by: Yulong Ruan <[email protected]>

* Changeset file for PR #8334 created/updated

* fix failed unit tests

Signed-off-by: Yulong Ruan <[email protected]>

---------

Signed-off-by: Yulong Ruan <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 1db585d)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
  • Loading branch information
1 parent 97a792f commit e0047f9
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 31 deletions.
2 changes: 2 additions & 0 deletions changelogs/fragments/8334.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
refactor:
- Move the render of query extension control buttons to extension component ([#8334](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8334))
6 changes: 6 additions & 0 deletions src/plugins/data/public/ui/query_editor/_query_editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,12 @@
.osdQueryEditor__querycontrols {
float: right;
margin: $euiSizeS $euiSizeS;

.osdQueryEditor__extensionQueryControls {
display: flex;
padding: 0 $euiSizeS 0 $euiSizeXS;
border-right: $euiBorderThin;
}
}

.osdQueryEditor__dataSetPicker {
Expand Down
27 changes: 7 additions & 20 deletions src/plugins/data/public/ui/query_editor/query_editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export default class QueryEditorUI extends Component<Props, State> {
private services = this.props.opensearchDashboards.services;
private headerRef: RefObject<HTMLDivElement> = createRef();
private bannerRef: RefObject<HTMLDivElement> = createRef();
private queryControlsContainer: RefObject<HTMLDivElement> = createRef();
private extensionMap = this.languageManager.getQueryEditorExtensionMap();

private getQueryString = () => {
Expand All @@ -121,6 +122,7 @@ export default class QueryEditorUI extends Component<Props, State> {
!(
this.headerRef.current &&
this.bannerRef.current &&
this.queryControlsContainer.current &&
this.props.query.language &&
this.extensionMap &&
Object.keys(this.extensionMap).length > 0
Expand All @@ -137,6 +139,7 @@ export default class QueryEditorUI extends Component<Props, State> {
configMap={this.extensionMap}
componentContainer={this.headerRef.current}
bannerContainer={this.bannerRef.current}
queryControlsContainer={this.queryControlsContainer.current}
/>
);
}
Expand Down Expand Up @@ -336,25 +339,6 @@ export default class QueryEditorUI extends Component<Props, State> {
return <QueryControls queryControls={queryControls} />;
};

private renderExtensionSearchBarButton = () => {
if (!this.extensionMap || Object.keys(this.extensionMap).length === 0) return null;
const sortedConfigs = Object.values(this.extensionMap).sort((a, b) => a.order - b.order);
return (
<>
{sortedConfigs.map((config) => {
return config.getSearchBarButton
? config.getSearchBarButton({
language: this.props.query.language,
onSelectLanguage: this.onSelectLanguage,
isCollapsed: this.state.isCollapsed,
setIsCollapsed: this.setIsCollapsed,
})
: null;
})}
</>
);
};

public render() {
const className = classNames(this.props.className);

Expand Down Expand Up @@ -471,9 +455,12 @@ export default class QueryEditorUI extends Component<Props, State> {
{languageSelector}
<div className="osdQueryEditor__querycontrols">
<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
<div
ref={this.queryControlsContainer}
className="osdQueryEditor__extensionQueryControls"
/>
{this.renderQueryControls(languageEditor.TopBar.Controls)}
{!languageEditor.TopBar.Expanded && this.renderToggleIcon()}
{!languageEditor.TopBar.Expanded && this.renderExtensionSearchBarButton()}
{this.props.savedQueryManagement}
</EuiFlexGroup>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface QueryEditorExtensionProps {
dependencies: QueryEditorExtensionDependencies;
componentContainer: Element;
bannerContainer: Element;
queryControlsContainer: Element;
}

export interface QueryEditorExtensionDependencies {
Expand Down Expand Up @@ -97,6 +98,11 @@ export const QueryEditorExtension: React.FC<QueryEditorExtensionProps> = (props)
props.dependencies,
]);

const queryControlButtons = useMemo(() => props.config.getSearchBarButton?.(props.dependencies), [

Check warning on line 101 in src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx

View check run for this annotation

Codecov / codecov/patch

src/plugins/data/public/ui/query_editor/query_editor_extensions/query_editor_extension.tsx#L101

Added line #L101 was not covered by tests
props.config,
props.dependencies,
]);

useEffect(() => {
isMounted.current = true;
return () => {
Expand All @@ -121,6 +127,9 @@ export const QueryEditorExtension: React.FC<QueryEditorExtensionProps> = (props)
<QueryEditorExtensionPortal container={props.componentContainer}>
{component}
</QueryEditorExtensionPortal>
<QueryEditorExtensionPortal container={props.queryControlsContainer}>
{queryControlButtons}
</QueryEditorExtensionPortal>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ describe('QueryEditorExtensions', () => {
const defaultProps: QueryEditorExtensionsProps = {
componentContainer: document.createElement('div'),
bannerContainer: document.createElement('div'),
queryControlsContainer: document.createElement('div'),
language: 'Test-lang',
onSelectLanguage: jest.fn(),
isCollapsed: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,17 @@ interface QueryEditorExtensionsProps extends QueryEditorExtensionDependencies {
configMap?: Record<string, QueryEditorExtensionConfig>;
componentContainer: Element;
bannerContainer: Element;
queryControlsContainer: Element;
}

const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((props) => {
const { configMap, componentContainer, bannerContainer, ...dependencies } = props;
const {
configMap,
componentContainer,
bannerContainer,
queryControlsContainer,
...dependencies
} = props;

const sortedConfigs = useMemo(() => {
if (!configMap || Object.keys(configMap).length === 0) return [];
Expand All @@ -27,23 +34,35 @@ const QueryEditorExtensions: React.FC<QueryEditorExtensionsProps> = React.memo((
return (
<>
{sortedConfigs.map((config) => {
const id = `osdQueryEditorExtensionComponent-${config.id}`;

let container = document.getElementById(id);
if (!container) {
container = document.createElement('div');
container.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
container.id = id;
componentContainer.appendChild(container);
const extensionComponentId = `osdQueryEditorExtensionComponent-${config.id}`;
const extensionQueryControlsId = `osdQueryEditorExtensionQueryControls-${config.id}`;

// Make sure extension components are rendered in order
let extensionComponentContainer = document.getElementById(extensionComponentId);
if (!extensionComponentContainer) {
extensionComponentContainer = document.createElement('div');
extensionComponentContainer.className = `osdQueryEditorExtensionComponent osdQueryEditorExtensionComponent__${config.id}`;
extensionComponentContainer.id = extensionComponentId;
componentContainer.appendChild(extensionComponentContainer);
}

// Make sure extension query controls are rendered in order
let extensionQueryControlsContainer = document.getElementById(extensionQueryControlsId);
if (!extensionQueryControlsContainer) {
extensionQueryControlsContainer = document.createElement('div');
extensionQueryControlsContainer.className = `osdQueryEditorExtensionQueryControls osdQueryEditorExtensionQueryControls__${config.id}`;
extensionQueryControlsContainer.id = extensionQueryControlsId;
queryControlsContainer.appendChild(extensionQueryControlsContainer);
}

return (
<QueryEditorExtension
key={config.id}
config={config}
dependencies={dependencies}
componentContainer={container}
componentContainer={extensionComponentContainer}
bannerContainer={bannerContainer}
queryControlsContainer={extensionQueryControlsContainer}
/>
);
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const QueryAssistButton: React.FC<QueryAssistButtonProps> = (props) => {
iconType={
!props.dependencies.isCollapsed && !isQueryAssistCollapsed ? expandIcon : collapsedIcon
}
aria-label={i18n.translate('queryEnhancements.queryAssist.button.ariaLable', {
aria-label={i18n.translate('queryEnhancements.queryAssist.button.ariaLabel', {
defaultMessage: `Query Assist Toggle`,
})}
onClick={onClick}
Expand Down

0 comments on commit e0047f9

Please sign in to comment.