Skip to content

Commit

Permalink
Look&Feel for Dashboards
Browse files Browse the repository at this point in the history 
Signed-off-by: Dan Dong <[email protected]>
  • Loading branch information
@danieldong51
danieldong51 committed Aug 20, 2024
1 parent 69d12ce commit 6e7d30e
Show file tree
Hide file tree
Showing 14 changed files with 360 additions and 222 deletions.
30 changes: 18 additions & 12 deletions public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,13 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
Observability dashboards
</h1>
<h1>
Observability dashboards
</h1>
</div>
</div>
</header>
<div
Expand Down Expand Up @@ -859,11 +861,13 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
Observability dashboards
</h1>
<h1>
Observability dashboards
</h1>
</div>
</div>
</header>
<div
Expand Down Expand Up @@ -1099,11 +1103,13 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
Observability dashboards
</h1>
<h1>
Observability dashboards
</h1>
</div>
</div>
</header>
<div
Expand Down
56 changes: 34 additions & 22 deletions public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,13 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
<div
class="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
<div
class="euiFlexItem"
>
Expand Down Expand Up @@ -446,10 +449,13 @@ exports[`Panels View Component render panel view so container and reload dashboa
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
<div
class="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
<div
class="euiFlexItem"
>
Expand Down Expand Up @@ -1354,14 +1360,17 @@ exports[`Panels View Component renders panel view container with visualizations
<div
className="euiPageHeaderSection"
>
<EuiTitle
size="l"
<EuiText
size="s"
>
<h1
className="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
</EuiTitle>
<div
className="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
</EuiText>
<EuiFlexItem>
<div
className="euiFlexItem"
Expand Down Expand Up @@ -3705,14 +3714,17 @@ exports[`Panels View Component renders panel view container without visualizatio
<div
className="euiPageHeaderSection"
>
<EuiTitle
size="l"
<EuiText
size="s"
>
<h1
className="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
</EuiTitle>
<div
className="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
</EuiText>
<EuiFlexItem>
<div
className="euiFlexItem"
Expand Down
33 changes: 21 additions & 12 deletions public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,13 @@ exports[`Panels View SO Component render panel view container and refresh panel
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
<div
class="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
<div
class="euiFlexItem"
>
Expand Down Expand Up @@ -446,10 +449,13 @@ exports[`Panels View SO Component render panel view so container and reload dash
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
<div
class="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
<div
class="euiFlexItem"
>
Expand Down Expand Up @@ -879,10 +885,13 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
<div
class="euiPageHeaderSection"
>
<h1
class="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
<div
class="euiText euiText--small"
>
<h1
data-test-subj="panelNameHeader"
/>
</div>
<div
class="euiFlexItem"
>
Expand Down
12 changes: 8 additions & 4 deletions public/components/custom_panels/custom_panel_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,9 +342,9 @@ export const CustomPanelTable = ({
<EuiPageBody component="div">
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<EuiText size="s">
<h1>Observability dashboards</h1>
</EuiTitle>
</EuiText>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent id="customPanelArea">
Expand Down Expand Up @@ -374,11 +374,15 @@ export const CustomPanelTable = ({
isOpen={isActionsPopoverOpen}
closePopover={() => setIsActionsPopoverOpen(false)}
>
<EuiContextMenuPanel items={popoverItems()} />
<EuiContextMenuPanel items={popoverItems()} size="s" />
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem>
<EuiSmallButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
<EuiSmallButton
fill
href="#/create"
data-test-subj="customPanels__createNewPanels"
>
Create Dashboard
</EuiSmallButton>
</EuiFlexItem>
Expand Down
14 changes: 9 additions & 5 deletions public/components/custom_panels/custom_panel_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
EuiPopover,
EuiSpacer,
EuiCompressedSuperDatePicker,
EuiTitle,
EuiText,
OnTimeChangeProps,
ShortDate,
} from '@elastic/eui';
Expand Down Expand Up @@ -465,7 +465,11 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
);

const saveButton = (
<EuiSmallButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
<EuiSmallButton
data-test-subj="savePanelButton"
iconType="save"
onClick={() => editPanel('save')}
>
Save
</EuiSmallButton>
);
Expand Down Expand Up @@ -612,9 +616,9 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
{appPanel || (
<>
<EuiPageHeaderSection>
<EuiTitle size="l">
<EuiText size="s">
<h1 data-test-subj="panelNameHeader">{openPanelName}</h1>
</EuiTitle>
</EuiText>
<EuiFlexItem>
<EuiSpacer size="s" />
</EuiFlexItem>
Expand All @@ -638,7 +642,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
isOpen={panelsMenuPopover}
closePopover={() => setPanelsMenuPopover(false)}
>
<EuiContextMenu initialPanelId={0} panels={panelActionsMenu} />
<EuiContextMenu initialPanelId={0} panels={panelActionsMenu} size="s" />
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
14 changes: 9 additions & 5 deletions public/components/custom_panels/custom_panel_view_so.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
EuiPopover,
EuiSpacer,
EuiCompressedSuperDatePicker,
EuiTitle,
EuiText,
OnTimeChangeProps,
ShortDate,
} from '@elastic/eui';
Expand Down Expand Up @@ -375,7 +375,11 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
);

const saveButton = (
<EuiSmallButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
<EuiSmallButton
data-test-subj="savePanelButton"
iconType="save"
onClick={() => editPanel('save')}
>
Save
</EuiSmallButton>
);
Expand Down Expand Up @@ -562,9 +566,9 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
{appPanel || (
<>
<EuiPageHeaderSection>
<EuiTitle size="l">
<EuiText size="s">
<h1 data-test-subj="panelNameHeader">{panel?.title}</h1>
</EuiTitle>
</EuiText>
<EuiFlexItem>
<EuiSpacer size="s" />
</EuiFlexItem>
Expand All @@ -587,7 +591,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
isOpen={panelsMenuPopover}
closePopover={() => setPanelsMenuPopover(false)}
>
<EuiContextMenu initialPanelId={0} panels={panelActionsMenu} />
<EuiContextMenu initialPanelId={0} panels={panelActionsMenu} size="s" />
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
16 changes: 14 additions & 2 deletions ...components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@ exports[`Custom Input Model component renders custom input modal with multiple a
>
<EuiModalHeader>
<EuiModalHeaderTitle>
Input test
<EuiText
size="s"
>
<h2>
Input test
</h2>
</EuiText>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
Expand Down Expand Up @@ -58,7 +64,13 @@ exports[`Custom Input Model component renders custom input modal with single arg
>
<EuiModalHeader>
<EuiModalHeaderTitle>
Input test
<EuiText
size="s"
>
<h2>
Input test
</h2>
</EuiText>
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
Expand Down
2 changes: 1 addition & 1 deletion public/components/custom_panels/helpers/add_visualization_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const AddVisualizationPopover = ({
panelPaddingSize="none"
anchorPosition="downLeft"
>
<EuiContextMenu initialPanelId={0} panels={getVizContextPanels()} />
<EuiContextMenu initialPanelId={0} panels={getVizContextPanels()} size="s" />
</EuiPopover>
);
};
7 changes: 6 additions & 1 deletion public/components/custom_panels/helpers/custom_input_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
EuiCompressedFormRow,
EuiCompressedFieldText,
EuiSmallButton,
EuiText,
} from '@elastic/eui';

/*
Expand Down Expand Up @@ -71,7 +72,11 @@ export const CustomInputModal = (props: CustomInputModalProps) => {
<EuiOverlayMask>
<EuiModal onClose={closeModal} initialFocus="[name=input]">
<EuiModalHeader>
<EuiModalHeaderTitle>{titletxt}</EuiModalHeaderTitle>
<EuiModalHeaderTitle>
<EuiText size="s">
<h2>{titletxt}</h2>
</EuiText>
</EuiModalHeaderTitle>
</EuiModalHeader>

<EuiModalBody>
Expand Down
Loading

0 comments on commit 6e7d30e

Please sign in to comment.