Operational panels cypress fix (#244)

* cypress fix for panels Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * removed redundant useEffect Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> * updating snapshots Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> --------- Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
opensearch-project · Feb 14, 2023 · ad44980 · ad44980
1 parent 7daf880
commit ad44980
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 232 deletions.
diff --git a/.cypress/integration/3_panels.spec.js b/.cypress/integration/3_panels.spec.js
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -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

diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -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>
@@ -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"
@@ -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={
@@ -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"
@@ -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"
@@ -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={
@@ -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>
@@ -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"
@@ -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={
@@ -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"
@@ -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"
@@ -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={

diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
@@ -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);
@@ -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);
@@ -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

diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
@@ -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>
  );
@@ -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)}
@@ -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();
@@ -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" />

diff --git a/public/components/custom_panels/helpers/add_visualization_popover.tsx b/public/components/custom_panels/helpers/add_visualization_popover.tsx
@@ -38,6 +38,7 @@ export const AddVisualizationPopover = ({
  items: [
  {
  name: 'Select existing visualization',
+ 'data-test-subj': 'selectExistingVizContextMenuItem',
  onClick: () => {
  if (closeVizPopover != null) {
  closeVizPopover();
@@ -47,6 +48,7 @@ export const AddVisualizationPopover = ({
  },
  {
  name: 'Create new visualization',
+ 'data-test-subj': 'createNewVizContextMenuItem',
  onClick: () => {
  advancedVisualization();
  },

diff --git a/...les/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/...les/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`Visualization Container Component renders add visualization container 1
  onMouseOver={[Function]}
  >
  <h5
+ data-test-subj="visualizationHeader"
  onBlur={[Function]}
  onFocus={[Function]}
  />
@@ -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"
@@ -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]}

diff --git a/...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/...omponents/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -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();
@@ -166,7 +165,7 @@ export const VisualizationContainer = ({
  <EuiContextMenuItem
  data-test-subj="editVizContextMenuItem"
  key="Edit"
- disabled={disablePopover}
+ disabled={editMode}
  onClick={() => {
  closeActionsMenu();
  onEditClick(savedVisualizationId);
@@ -176,7 +175,8 @@ export const VisualizationContainer = ({
  </EuiContextMenuItem>,
  <EuiContextMenuItem
  key="Replace"
- disabled={disablePopover}
+ data-test-subj="replaceVizContextMenuItem"
+ disabled={editMode}
  onClick={() => {
  closeActionsMenu();
  showFlyout(true, visualizationId);
@@ -186,7 +186,8 @@ export const VisualizationContainer = ({
  </EuiContextMenuItem>,
  <EuiContextMenuItem
  key="Duplicate"
- disabled={disablePopover}
+ data-test-subj="duplicateVizContextMenuItem"
+ disabled={editMode}
  onClick={() => {
  closeActionsMenu();
  cloneVisualization(visualizationTitle, savedVisualizationId);
@@ -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');
@@ -286,10 +287,6 @@ export const VisualizationContainer = ({
  loadVisaulization();
  }, [onRefresh]);
 
- useEffect(() => {
- editMode ? setDisablePopover(true) : setDisablePopover(false);
- }, [editMode]);
-
  return (
  <>
  <EuiPanel
@@ -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);