Operational panels cypress fix (opensearch-project#244) (opensearch-p…

…roject#274) * 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]> (cherry picked from commit ad44980) Co-authored-by: Shenoy Pratik <[email protected]> (cherry picked from commit ce4e742)
amsiglan · Mar 18, 2023 · 9e62a5c · 9e62a5c
1 parent 2fe65cc
commit 9e62a5c
Show file tree

Hide file tree

Showing 12 changed files with 253 additions and 234 deletions.
diff --git a/.cypress/integration/3_panels.spec.js b/.cypress/integration/3_panels.spec.js
diff --git a/auto_sync_commit_metadata.json b/auto_sync_commit_metadata.json
@@ -1,4 +1,4 @@
 {
-    "last_github_commit": "b0037cd70d8561c93bb642708229737f51dd818b",
-    "last_gitfarm_commit": "7916bfd1b7d173297d03b5cac7fa46e3c4eadf5b"
+    "last_github_commit": "ce4e742b235e225804cac0941a3450a5f8b15116",
+    "last_gitfarm_commit": "31f6b812d3e4cd58cccd76ac68efc8d054b0a9ab"
 }
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);