Fix some state issues and try to use electron browser

Signed-off-by: Derek Ho <[email protected]>

.github/workflows/cypress-test-multidatasources-enabled-e2e.yml

@@ -123,4 +123,4 @@ jobs:
         uses: ./.github/actions/run-cypress-tests
         with:
           dashboards_config_file: opensearch_dashboards_multidatasources.yml
-          yarn_command: 'yarn cypress:run --browser chrome --headless --env LOGIN_AS_ADMIN=true --spec "test/cypress/e2e/multi-datasources/multi_datasources_enabled.spec.js"'
+          yarn_command: 'yarn cypress:run --browser electron --headless --env LOGIN_AS_ADMIN=true --spec "test/cypress/e2e/multi-datasources/multi_datasources_enabled.spec.js"'

public/apps/configuration/panels/role-edit/index-permission-panel.tsx

@@ -23,7 +23,7 @@ import {
   EuiSuperSelect,
   EuiTextArea,
 } from '@elastic/eui';
-import React, { Dispatch, Fragment, SetStateAction } from 'react';
+import React, { Dispatch, Fragment, SetStateAction, useEffect } from 'react';
 import { isEmpty } from 'lodash';
 import { RoleIndexPermission } from '../../types';
 import { ResourceType } from '../../../../../common';
@@ -320,9 +320,11 @@ export function IndexPermissionPanel(props: {
 }) {
   const { state, optionUniverse, setState } = props;
   // Show one empty row if there is no data.
-  if (isEmpty(state)) {
-    setState([getEmptyIndexPermission()]);
-  }
+  useEffect(() => {
+    if (isEmpty(state)) {
+      setState([getEmptyIndexPermission()]);
+    }
+  }, [state, setState]);
   return (
     <PanelWithHeader
       headerText="Index permissions"

public/apps/configuration/panels/role-edit/tenant-panel.tsx

@@ -14,7 +14,7 @@
  */
 
 import { EuiButton, EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiSuperSelect } from '@elastic/eui';
-import React, { Dispatch, Fragment, SetStateAction } from 'react';
+import React, { Dispatch, Fragment, SetStateAction, useEffect } from 'react';
 import { isEmpty } from 'lodash';
 import { RoleTenantPermission, TenantPermissionType, ComboBoxOptions } from '../../types';
 import {
@@ -129,9 +129,12 @@ export function TenantPanel(props: {
 }) {
   const { state, optionUniverse, setState } = props;
   // Show one empty row if there is no data.
-  if (isEmpty(state)) {
-    setState([getEmptyTenantPermission()]);
-  }
+
+  useEffect(() => {
+    if (isEmpty(state)) {
+      setState([getEmptyTenantPermission()]);
+    }
+  }, [state, setState]);
   return (
     <PanelWithHeader
       headerText="Tenant permissions"

public/apps/configuration/panels/role-edit/test/index-permission-panel.test.tsx

@@ -14,6 +14,7 @@
  */
 
 import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { RoleIndexPermission, ComboBoxOptions, FieldLevelSecurityMethod } from '../../../types';
 import { stringToComboBoxOption } from '../../../utils/combo-box-utils';
@@ -180,7 +181,7 @@ describe('Role edit - index permission panel', () => {
       const state: RoleIndexPermissionStateClass[] = [];
       const optionUniverse: ComboBoxOptions = [];
 
-      shallow(<IndexPermissionPanel {...{ state, optionUniverse, setState }} />);
+      render(<IndexPermissionPanel {...{ state, optionUniverse, setState }} />);
 
       expect(setState).toHaveBeenCalledTimes(1);
     });

public/apps/configuration/panels/role-edit/test/tenant-panel.test.tsx

@@ -24,6 +24,7 @@ import {
 import { shallow } from 'enzyme';
 import React from 'react';
 import { EuiComboBox, EuiButton, EuiSuperSelect } from '@elastic/eui';
+import { render } from '@testing-library/react';
 
 jest.mock('../../../utils/array-state-utils');
 // eslint-disable-next-line
@@ -76,7 +77,7 @@ describe('Role edit - tenant panel', () => {
     const setState = jest.fn();
 
     it('render an empty row if data is empty', () => {
-      shallow(<TenantPanel state={[]} optionUniverse={optionUniverse} setState={setState} />);
+      render(<TenantPanel state={[]} optionUniverse={optionUniverse} setState={setState} />);
 
       expect(setState).toHaveBeenCalledWith([
         {