Skip to content
This repository has been archived by the owner on Mar 25, 2024. It is now read-only.

Commit

Permalink
[Console][Multiple Datasource]Fine tuned dev tool datasource selector…
Browse files Browse the repository at this point in the history
… UI (opensearch-project#3806)

* Fine tuned dev tool datasource selector UI
* Refactor DevToolsWrapper to conditionally render the EuiComboBox based on the dataSourceEnabled prop

Signed-off-by: Su <szhongna@amazon.com>

---------

Signed-off-by: Su <szhongna@amazon.com>
Signed-off-by: David Sinclair <david@sinclair.tech>
  • Loading branch information
zhongnansu authored and sikhote committed Apr 24, 2023
1 parent ee30ced commit 20bd5e2
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 47 deletions.
81 changes: 36 additions & 45 deletions src/plugins/dev_tools/public/application.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,51 +154,42 @@ function DevToolsWrapper({

return (
<main className="devApp">
<div>
<EuiFlexGroup gutterSize="none">
<EuiFlexItem>
<EuiTabs>
{devTools.map((currentDevTool) => (
<EuiToolTip content={currentDevTool.tooltipContent} key={currentDevTool.id}>
<EuiTab
disabled={currentDevTool.isDisabled()}
isSelected={currentDevTool === activeDevTool}
onClick={() => {
if (!currentDevTool.isDisabled()) {
updateRoute(`/${currentDevTool.id}`);
}
}}
>
{currentDevTool.title}
</EuiTab>
</EuiToolTip>
))}
</EuiTabs>
</EuiFlexItem>
{dataSourceEnabled ? (
<EuiFlexItem grow={false} className="dataSourceSelector">
<EuiComboBox
aria-label={i18n.translate('devTool.devToolWrapper.DataSourceComboBoxAriaLabel', {
defaultMessage: 'Select a Data Source',
})}
placeholder={i18n.translate(
'devTool.devToolWrapper.DataSourceComboBoxPlaceholder',
{
defaultMessage: 'Select a Data Source',
}
)}
singleSelection={{ asPlainText: true }}
options={dataSources}
selectedOptions={selectedOptions}
onChange={onChange}
prepend="DataSource"
compressed
isDisabled={!dataSourceEnabled}
/>
</EuiFlexItem>
) : null}
</EuiFlexGroup>
</div>
<EuiTabs className="devAppTabs">
{devTools.map((currentDevTool) => (
<EuiToolTip content={currentDevTool.tooltipContent} key={currentDevTool.id}>
<EuiTab
disabled={currentDevTool.isDisabled()}
isSelected={currentDevTool === activeDevTool}
onClick={() => {
if (!currentDevTool.isDisabled()) {
updateRoute(`/${currentDevTool.id}`);
}
}}
>
{currentDevTool.title}
</EuiTab>
</EuiToolTip>
))}
{dataSourceEnabled ? (
<div className="devAppDataSourcePicker">
<EuiComboBox
aria-label={i18n.translate('devTool.devToolWrapper.DataSourceComboBoxAriaLabel', {
defaultMessage: 'Select a Data Source',
})}
placeholder={i18n.translate('devTool.devToolWrapper.DataSourceComboBoxPlaceholder', {
defaultMessage: 'Select a Data Source',
})}
singleSelection={{ asPlainText: true }}
options={dataSources}
selectedOptions={selectedOptions}
onChange={onChange}
prepend="DataSource"
compressed
isDisabled={!dataSourceEnabled}
/>
</div>
) : null}
</EuiTabs>

<div
className="devApp__container"
Expand Down
10 changes: 8 additions & 2 deletions src/plugins/dev_tools/public/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@
flex-grow: 1;
}

.dataSourceSelector {
margin: 5px 10px 5px 5px;
.devAppDataSourcePicker {
margin: 7px 8px 0 0;
min-width: 400px;
}

.devAppTabs {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

0 comments on commit 20bd5e2

Please sign in to comment.