Skip to content

Commit

Permalink
Operational panels cypress fix (#244)
Browse files Browse the repository at this point in the history 
* cypress fix for panels

Signed-off-by: Shenoy Pratik <[email protected]>

* removed redundant useEffect

Signed-off-by: Shenoy Pratik <[email protected]>

* updating snapshots

Signed-off-by: Shenoy Pratik <[email protected]>

---------

Signed-off-by: Shenoy Pratik <[email protected]>
  • Loading branch information
@ps48
ps48 authored Feb 14, 2023
1 parent 7daf880 commit ad44980
Show file tree
Hide file tree
Showing 11 changed files with 251 additions and 232 deletions.
363 changes: 151 additions & 212 deletions .cypress/integration/3_panels.spec.js
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion 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 @@ -417,7 +417,9 @@ exports[`Panels Table Component renders empty panel table container 1`] = `
<div
className="euiTextAlign euiTextAlign--center"
>
<h2>
<h2
data-test-subj="customPanels__noPanelsHome"
>
No Operational Panels
</h2>
<EuiSpacer
Expand Down
16 changes: 16 additions & 0 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 @@ -136,6 +136,7 @@ exports[`Panels View Component renders panel view container with visualizations
>
<h1
className="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
</EuiTitle>
<EuiFlexItem>
Expand Down Expand Up @@ -170,12 +171,14 @@ exports[`Panels View Component renders panel view container with visualizations
className="euiFlexItem"
>
<EuiButton
data-test-subj="editPanelButton"
disabled={true}
iconType="pencil"
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="editPanelButton"
disabled={true}
element="button"
iconType="pencil"
Expand All @@ -185,6 +188,7 @@ exports[`Panels View Component renders panel view container with visualizations
>
<button
className="euiButton euiButton--primary euiButton-isDisabled"
data-test-subj="editPanelButton"
disabled={true}
onClick={[Function]}
style={
Expand Down Expand Up @@ -259,6 +263,7 @@ exports[`Panels View Component renders panel view container with visualizations
anchorPosition="downCenter"
button={
<EuiButton
data-test-subj="panelActionContextMenu"
disabled={false}
iconSide="right"
iconType="arrowDown"
Expand All @@ -283,13 +288,15 @@ exports[`Panels View Component renders panel view container with visualizations
className="euiPopover__anchor"
>
<EuiButton
data-test-subj="panelActionContextMenu"
disabled={false}
iconSide="right"
iconType="arrowDown"
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="panelActionContextMenu"
disabled={false}
element="button"
iconSide="right"
Expand All @@ -300,6 +307,7 @@ exports[`Panels View Component renders panel view container with visualizations
>
<button
className="euiButton euiButton--primary"
data-test-subj="panelActionContextMenu"
disabled={false}
onClick={[Function]}
style={
Expand Down Expand Up @@ -1770,6 +1778,7 @@ exports[`Panels View Component renders panel view container without visualizatio
>
<h1
className="euiTitle euiTitle--large"
data-test-subj="panelNameHeader"
/>
</EuiTitle>
<EuiFlexItem>
Expand Down Expand Up @@ -1804,12 +1813,14 @@ exports[`Panels View Component renders panel view container without visualizatio
className="euiFlexItem"
>
<EuiButton
data-test-subj="editPanelButton"
disabled={true}
iconType="pencil"
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="editPanelButton"
disabled={true}
element="button"
iconType="pencil"
Expand All @@ -1819,6 +1830,7 @@ exports[`Panels View Component renders panel view container without visualizatio
>
<button
className="euiButton euiButton--primary euiButton-isDisabled"
data-test-subj="editPanelButton"
disabled={true}
onClick={[Function]}
style={
Expand Down Expand Up @@ -1889,6 +1901,7 @@ exports[`Panels View Component renders panel view container without visualizatio
anchorPosition="downCenter"
button={
<EuiButton
data-test-subj="panelActionContextMenu"
disabled={false}
iconSide="right"
iconType="arrowDown"
Expand All @@ -1913,13 +1926,15 @@ exports[`Panels View Component renders panel view container without visualizatio
className="euiPopover__anchor"
>
<EuiButton
data-test-subj="panelActionContextMenu"
disabled={false}
iconSide="right"
iconType="arrowDown"
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="panelActionContextMenu"
disabled={false}
element="button"
iconSide="right"
Expand All @@ -1930,6 +1945,7 @@ exports[`Panels View Component renders panel view container without visualizatio
>
<button
className="euiButton euiButton--primary"
data-test-subj="panelActionContextMenu"
disabled={false}
onClick={[Function]}
style={
Expand Down
4 changes: 3 additions & 1 deletion public/components/custom_panels/custom_panel_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,7 @@ export const CustomPanelTable = ({
const popoverItems: ReactElement[] = [
<EuiContextMenuItem
key="rename"
data-test-subj="renameContextMenuItem"
disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
onClick={() => {
setIsActionsPopoverOpen(false);
Expand All @@ -222,6 +223,7 @@ export const CustomPanelTable = ({
</EuiContextMenuItem>,
<EuiContextMenuItem
key="duplicate"
data-test-subj="duplicateContextMenuItem"
disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
onClick={() => {
setIsActionsPopoverOpen(false);
Expand Down Expand Up @@ -376,7 +378,7 @@ export const CustomPanelTable = ({
<>
<EuiSpacer size="xxl" />
<EuiText textAlign="center">
<h2>No Operational Panels</h2>
<h2 data-test-subj="customPanels__noPanelsHome">No Operational Panels</h2>
<EuiSpacer size="m" />
<EuiText color="subdued">
Use operational panels to dive deeper into observability
Expand Down
23 changes: 19 additions & 4 deletions public/components/custom_panels/custom_panel_view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -406,19 +406,29 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
};

const cancelButton = (
<EuiButton iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
<EuiButton
data-test-subj="cancelPanelButton"
iconType="cross"
color="danger"
onClick={() => editPanel('cancel')}
>
Cancel
</EuiButton>
);

const saveButton = (
<EuiButton iconType="save" onClick={() => editPanel('save')}>
<EuiButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
Save
</EuiButton>
);

const editButton = (
<EuiButton iconType="pencil" onClick={() => editPanel('edit')} disabled={editDisabled}>
<EuiButton
data-test-subj="editPanelButton"
iconType="pencil"
onClick={() => editPanel('edit')}
disabled={editDisabled}
>
Edit
</EuiButton>
);
Expand All @@ -437,6 +447,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
// Panel Actions Button
const panelActionsButton = (
<EuiButton
data-test-subj="panelActionContextMenu"
iconType="arrowDown"
iconSide="right"
onClick={() => setPanelsMenuPopover(true)}
Expand Down Expand Up @@ -478,27 +489,31 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
items: [
{
name: 'Reload panel',
'data-test-subj': 'reloadPanelContextMenuItem',
onClick: () => {
setPanelsMenuPopover(false);
fetchCustomPanel();
},
},
{
name: 'Rename panel',
'data-test-subj': 'renamePanelContextMenuItem',
onClick: () => {
setPanelsMenuPopover(false);
renamePanel();
},
},
{
name: 'Duplicate panel',
'data-test-subj': 'duplicatePanelContextMenuItem',
onClick: () => {
setPanelsMenuPopover(false);
clonePanel();
},
},
{
name: 'Delete panel',
'data-test-subj': 'deletePanelContextMenuItem',
onClick: () => {
setPanelsMenuPopover(false);
deletePanel();
Expand Down Expand Up @@ -550,7 +565,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
<>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>{openPanelName}</h1>
<h1 data-test-subj="panelNameHeader">{openPanelName}</h1>
</EuiTitle>
<EuiFlexItem>
<EuiSpacer size="s" />
Expand Down
2 changes: 2 additions & 0 deletions public/components/custom_panels/helpers/add_visualization_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export const AddVisualizationPopover = ({
items: [
{
name: 'Select existing visualization',
'data-test-subj': 'selectExistingVizContextMenuItem',
onClick: () => {
if (closeVizPopover != null) {
closeVizPopover();
Expand All @@ -47,6 +48,7 @@ export const AddVisualizationPopover = ({
},
{
name: 'Create new visualization',
'data-test-subj': 'createNewVizContextMenuItem',
onClick: () => {
advancedVisualization();
},
Expand Down
4 changes: 4 additions & 0 deletions ...les/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ exports[`Visualization Container Component renders add visualization container 1
onMouseOver={[Function]}
>
<h5
data-test-subj="visualizationHeader"
onBlur={[Function]}
onFocus={[Function]}
/>
Expand All @@ -90,12 +91,14 @@ exports[`Visualization Container Component renders add visualization container 1
className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
>
<EuiIcon
data-test-subj="removeVisualizationButton"
onClick={[Function]}
type="crossInACircleFilled"
>
<EuiIconEmpty
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading"
data-test-subj="removeVisualizationButton"
focusable="false"
onClick={[Function]}
role="img"
Expand All @@ -104,6 +107,7 @@ exports[`Visualization Container Component renders add visualization container 1
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading"
data-test-subj="removeVisualizationButton"
focusable="false"
height={16}
onClick={[Function]}
Expand Down
22 changes: 10 additions & 12 deletions ...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ export const VisualizationContainer = ({
spanParam,
}: Props) => {
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [disablePopover, setDisablePopover] = useState(false);
const [visualizationTitle, setVisualizationTitle] = useState('');
const [visualizationType, setVisualizationType] = useState('');
const [visualizationMetaData, setVisualizationMetaData] = useState();
Expand Down Expand Up @@ -166,7 +165,7 @@ export const VisualizationContainer = ({
<EuiContextMenuItem
data-test-subj="editVizContextMenuItem"
key="Edit"
disabled={disablePopover}
disabled={editMode}
onClick={() => {
closeActionsMenu();
onEditClick(savedVisualizationId);
Expand All @@ -176,7 +175,8 @@ export const VisualizationContainer = ({
</EuiContextMenuItem>,
<EuiContextMenuItem
key="Replace"
disabled={disablePopover}
data-test-subj="replaceVizContextMenuItem"
disabled={editMode}
onClick={() => {
closeActionsMenu();
showFlyout(true, visualizationId);
Expand All @@ -186,7 +186,8 @@ export const VisualizationContainer = ({
</EuiContextMenuItem>,
<EuiContextMenuItem
key="Duplicate"
disabled={disablePopover}
data-test-subj="duplicateVizContextMenuItem"
disabled={editMode}
onClick={() => {
closeActionsMenu();
cloneVisualization(visualizationTitle, savedVisualizationId);
Expand All @@ -196,11 +197,11 @@ export const VisualizationContainer = ({
</EuiContextMenuItem>,
];

let showModelPanel = [
const showModelPanel = [
<EuiContextMenuItem
data-test-subj="showCatalogPPLQuery"
key="view_query"
disabled={disablePopover}
disabled={editMode}
onClick={() => {
closeActionsMenu();
showModal('catalogModal');
Expand Down Expand Up @@ -286,10 +287,6 @@ export const VisualizationContainer = ({
loadVisaulization();
}, [onRefresh]);

useEffect(() => {
editMode ? setDisablePopover(true) : setDisablePopover(false);
}, [editMode]);

return (
<>
<EuiPanel
Expand All @@ -306,13 +303,14 @@ export const VisualizationContainer = ({
>
<EuiText grow={false} className="panels-title-text">
<EuiToolTip delay="long" position="top" content={visualizationTitle}>
<h5>{visualizationTitle}</h5>
<h5 data-test-subj="visualizationHeader">{visualizationTitle}</h5>
</EuiToolTip>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false} className="visualization-action-button">
{disablePopover ? (
{editMode ? (
<EuiIcon
data-test-subj="removeVisualizationButton"
type="crossInACircleFilled"
onClick={() => {
removeVisualization(visualizationId);
Expand Down
Loading

0 comments on commit ad44980

Please sign in to comment.