[8.x] [Spaces] Open 'manage roles' link for spaces assign r…

…ole flyout in new tab (#199506) (#200228) # Backport This will backport the following commits from `main` to `8.x`: - [[Spaces] Open 'manage roles' link for spaces assign role flyout in new tab (#199506)](#199506)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) \r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n","sha":"190430b0b2011235963af069a0196cfafb7a5cd5","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Security","release_note:skip","v9.0.0","backport:prev-minor","ci:cloud-deploy"],"title":"[Spaces] Open 'manage roles' link for spaces assign role flyout in new tab","number":199506,"url":"https://github.com/elastic/kibana/pull/199506","mergeCommit":{"message":"[Spaces] Open 'manage roles' link for spaces assign role flyout in new tab (#199506)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana-team/issues/1281\r\n\r\nModify the \"manage role\" link in the assign roles to space tab, so it\r\nopens the roles screen in a new tab, with an improvement so that on\r\ntransitioning back to the assign roles space tab the user is presented\r\nwith an updated list of roles created in the page that was created\r\nopened, if any.\r\n\r\nCaveat:\r\n\r\nThis approach will continually make calls to refresh the role list on\r\nevery page visibility event that matches the conditions provided until\r\nthe flyout gets closed.\r\n\r\n##### Visuals\r\n\r\n\r\nhttps://github.com/user-attachments/assets/64cb296d-246d-4033-a655-7b10d0dafab1\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n","sha":"190430b0b2011235963af069a0196cfafb7a5cd5"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199506","number":199506,"mergeCommit":{"message":"[Spaces] Open 'manage roles' link for spaces assign role flyout in new tab (#199506)\n\n## Summary\r\n\r\nCloses https://github.com/elastic/kibana-team/issues/1281\r\n\r\nModify the \"manage role\" link in the assign roles to space tab, so it\r\nopens the roles screen in a new tab, with an improvement so that on\r\ntransitioning back to the assign roles space tab the user is presented\r\nwith an updated list of roles created in the page that was created\r\nopened, if any.\r\n\r\nCaveat:\r\n\r\nThis approach will continually make calls to refresh the role list on\r\nevery page visibility event that matches the conditions provided until\r\nthe flyout gets closed.\r\n\r\n##### Visuals\r\n\r\n\r\nhttps://github.com/user-attachments/assets/64cb296d-246d-4033-a655-7b10d0dafab1\r\n\r\n\r\n### Checklist\r\n\r\nDelete any items that are not applicable to this PR.\r\n\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n","sha":"190430b0b2011235963af069a0196cfafb7a5cd5"}}]}] BACKPORT--> Co-authored-by: Eyo O. Eyo <[email protected]>
elastic · Nov 14, 2024 · a878dc8 · a878dc8
1 parent 070cbba
commit a878dc8
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/...es/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx b/...es/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import { EuiThemeProvider } from '@elastic/eui';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import crypto from 'crypto';
 import React from 'react';
@@ -142,6 +142,15 @@ describe('PrivilegesRolesForm', () => {
     jest.clearAllMocks();
   });
 
+  it("would open the 'manage roles' link in a new tab", () => {
+    getRolesSpy.mockResolvedValue([]);
+    getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+    renderPrivilegeRolesForm();
+
+    expect(screen.getByText('Manage roles')).toHaveAttribute('target', '_blank');
+  });
+
   it('does not display the privilege selection buttons or customization form when no role is selected', async () => {
     getRolesSpy.mockResolvedValue([]);
     getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
@@ -170,6 +179,23 @@ describe('PrivilegesRolesForm', () => {
     expect(screen.getByTestId('space-assign-role-create-roles-privilege-button')).toBeDisabled();
   });
 
+  it('makes a request to refetch available roles if page transitions back from a user interaction page visibility change', () => {
+    getRolesSpy.mockResolvedValue([]);
+    getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+    renderPrivilegeRolesForm();
+
+    expect(getRolesSpy).toHaveBeenCalledTimes(1);
+
+    // trigger click on manage roles link, which is perquisite for page visibility handler to trigger role refetch
+    fireEvent.click(screen.getByText(/manage roles/i));
+
+    // trigger page visibility change
+    fireEvent(document, new Event('visibilitychange'));
+
+    expect(getRolesSpy).toHaveBeenCalledTimes(2);
+  });
+
   it('renders with the assign roles button disabled when no base privileges or feature privileges are selected', async () => {
     getRolesSpy.mockResolvedValue([]);
     getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));

diff --git a/.../spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.tsx b/.../spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.tsx
@@ -23,6 +23,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import type { FC } from 'react';
@@ -81,10 +82,13 @@ export const PrivilegesRolesForm: FC<PrivilegesRolesFormProps> = (props) => {
   const [selectedRoles, setSelectedRoles] = useState<ReturnType<typeof createRolesComboBoxOptions>>(
     createRolesComboBoxOptions(defaultSelected)
   );
+  const manageRoleLinkId = useGeneratedHtmlId();
   const isEditOperation = useRef(Boolean(defaultSelected.length));
 
-  useEffect(() => {
-    async function fetchRequiredData(spaceId: string) {
+  const userInvokedPageVisibilityChange = useRef<boolean | null>(null);
+
+  const fetchRequiredData = useCallback(
+    async (spaceId: string) => {
       setFetchingDataDeps(true);
 
       const [systemRoles, _kibanaPrivileges] = await invokeClient((clients) =>
@@ -109,10 +113,28 @@ export const PrivilegesRolesForm: FC<PrivilegesRolesFormProps> = (props) => {
       );
 
       setKibanaPrivileges(_kibanaPrivileges);
-    }
+    },
+    [invokeClient]
+  );
 
+  useEffect(() => {
     fetchRequiredData(space.id!).finally(() => setFetchingDataDeps(false));
-  }, [invokeClient, space.id]);
+  }, [fetchRequiredData, invokeClient, space.id]);
+
+  useEffect(() => {
+    async function visibilityChangeHandler() {
+      // page just transitioned back to visible state from hidden state caused by user interaction
+      if (userInvokedPageVisibilityChange.current && !document.hidden) {
+        await fetchRequiredData(space.id!).finally(() => setFetchingDataDeps(false));
+      }
+    }
+
+    document.addEventListener('visibilitychange', visibilityChangeHandler);
+
+    return () => {
+      document.removeEventListener('visibilitychange', visibilityChangeHandler);
+    };
+  }, [fetchRequiredData, invokeClient, space.id]);
 
   const selectedRolesCombinedPrivileges = useMemo(() => {
     const combinedPrivilege = new Set(
@@ -345,12 +367,23 @@ export const PrivilegesRolesForm: FC<PrivilegesRolesFormProps> = (props) => {
         <React.Fragment>
           {!isEditOperation.current && (
             <EuiFormRow
+              onClick={(event: React.MouseEvent<HTMLFieldSetElement>) => {
+                // leverage event propagation, check if manage role link element was clicked
+                if ((event.target as HTMLFieldSetElement).id === manageRoleLinkId) {
+                  userInvokedPageVisibilityChange.current = true;
+                }
+              }}
               label={i18n.translate(
                 'xpack.spaces.management.spaceDetails.roles.selectRolesFormRowLabel',
                 { defaultMessage: 'Select roles' }
               )}
               labelAppend={
-                <EuiLink href={getUrlForApp('management', { deepLinkId: 'roles' })}>
+                <EuiLink
+                  id={manageRoleLinkId}
+                  href={getUrlForApp('management', { deepLinkId: 'roles' })}
+                  external={false}
+                  target="_blank"
+                >
                   {i18n.translate(
                     'xpack.spaces.management.spaceDetails.roles.selectRolesFormRowLabelAnchor',
                     { defaultMessage: 'Manage roles' }