Skip to content

Commit

Permalink
minor changes to match mocks
Browse files Browse the repository at this point in the history 
Signed-off-by: Shenoy Pratik <[email protected]>
  • Loading branch information
@ps48
ps48 committed Aug 14, 2024
1 parent eb087fb commit bee60d7
Show file tree
Hide file tree
Showing 11 changed files with 681 additions and 635 deletions.
10 changes: 8 additions & 2 deletions public/components/metrics/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiPage, EuiPageBody, EuiResizableContainer } from '@elastic/eui';
import { EuiPage, EuiPageBody, EuiResizableContainer, EuiSpacer } from '@elastic/eui';
import debounce from 'lodash/debounce';
import React, { useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
Expand Down Expand Up @@ -115,11 +115,17 @@ export const Home = ({
<EuiPage>
<EuiPageBody component="div">
<TopMenu />
<EuiSpacer size="m" />
<div className="metricsContainer">
<EuiResizableContainer>
{(EuiResizablePanel, EuiResizableButton) => (
<>
<EuiResizablePanel mode="collapsible" initialSize={20} minSize="10%">
<EuiResizablePanel
mode="collapsible"
initialSize={20}
minSize="10%"
paddingSize="none"
>
<Sidebar
additionalSelectedMetricId={routerProps.match.params.id}
selectedDataSource={selectedDataSource}
Expand Down
22 changes: 11 additions & 11 deletions public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
</EuiTitle>
<EuiComboBox
async={false}
compressed={false}
compressed={true}
data-test-subj="metricsDataSourcePicker"
fullWidth={false}
isClearable={true}
Expand Down Expand Up @@ -196,14 +196,14 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
<div
aria-expanded={false}
aria-haspopup="listbox"
className="euiComboBox"
className="euiComboBox euiComboBox--compressed"
data-test-subj="metricsDataSourcePicker"
onKeyDown={[Function]}
role="combobox"
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
compressed={false}
compressed={true}
fullWidth={false}
hasSelectedOptions={false}
inputRef={[Function]}
Expand All @@ -230,7 +230,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
value=""
>
<EuiFormControlLayout
compressed={false}
compressed={true}
fullWidth={false}
icon={
Object {
Expand All @@ -245,13 +245,13 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
}
>
<div
className="euiFormControlLayout"
className="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
data-test-subj="comboBoxInput"
onClick={[Function]}
tabIndex={-1}
Expand Down Expand Up @@ -320,7 +320,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
</AutosizeInput>
</div>
<EuiFormControlLayoutIcons
compressed={false}
compressed={true}
icon={
Object {
"aria-label": "Open list of options",
Expand All @@ -341,7 +341,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
data-test-subj="comboBoxToggleListButton"
iconRef={[Function]}
onClick={[Function]}
size="m"
size="s"
type="arrowDown"
>
<button
Expand All @@ -354,19 +354,19 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
<EuiIcon
aria-hidden="true"
className="euiFormControlLayoutCustomIcon__icon"
size="m"
size="s"
type="arrowDown"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height={16}
role="img"
Expand Down
1 change: 1 addition & 0 deletions public/components/metrics/sidebar/data_source_picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const DataSourcePicker = ({
<h5>Metrics source</h5>
</EuiTitle>
<EuiComboBox
compressed
placeholder="Select a metric source"
singleSelection={{ asPlainText: true }}
options={DATASOURCE_OPTIONS}
Expand Down
13 changes: 11 additions & 2 deletions public/components/metrics/sidebar/search_bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
*/

import { EuiSearchBar } from '@elastic/eui';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import debounce from 'lodash/debounce';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { searchSelector, setSearch } from '../redux/slices/metrics_slice';

export const SearchBar = () => {
Expand All @@ -17,6 +17,15 @@ export const SearchBar = () => {
dispatch(setSearch(query.text));
}, 300);

// OUI doesn't pass down the prop
// Work around for OUI bug: https://github.com/opensearch-project/oui/issues/1343
useEffect(() => {
const element = document.querySelector('.euiFieldSearch');
if (element) {
element.classList.add('euiFieldSearch--compressed');
}
}, []);

return (
<div className="metrics-search-bar-input" data-test-subj="metricsSearch">
<EuiSearchBar
Expand Down
16 changes: 9 additions & 7 deletions public/components/metrics/sidebar/sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ section.sidebar {
}

#metrics__mainContent {
.dscAppContainer{
.metricsSideBar {
padding: $euiSizeS;
.dscAppContainer {
.metricsSideBar {
padding: $euiSizeS;
overflow: auto;

&__fieldGroups {
Expand All @@ -44,8 +44,10 @@ section.sidebar {
}
}
.metricsSideBar {
@include euiYScrollWithShadows;
.sidebar-list {
height: 100%;
@include euiYScrollWithShadows;
.sidebar-list {
height: 100%;
}
}
}
}}}
}
8 changes: 4 additions & 4 deletions ...ic/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
fullWidth={false}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Metric Name #1"
label="Metric 1"
labelType="label"
>
<div
Expand All @@ -136,7 +136,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
className="euiFormLabel euiFormRow__label"
htmlFor="random_html_id"
>
Metric Name #1
Metric 1
</label>
</EuiFormLabel>
</div>
Expand Down Expand Up @@ -209,7 +209,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
fullWidth={false}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Metric Name #2"
label="Metric 2"
labelType="label"
>
<div
Expand All @@ -229,7 +229,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
className="euiFormLabel euiFormRow__label"
htmlFor="random_html_id"
>
Metric Name #2
Metric 2
</label>
</EuiFormLabel>
</div>
Expand Down
Loading

0 comments on commit bee60d7

Please sign in to comment.