Add a learn more flyout to the collaborators page

changelogs/fragments/9145.yml

@@ -0,0 +1,2 @@
+feat:
+- Add a "Learn More" flyout providing additional information to the collaborators page. ([#9145](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9145))

src/core/public/doc_links/doc_links_service.ts

@@ -437,8 +437,10 @@ export class DocLinksService {
             advancedSettings: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}management/advanced-settings/`,
           },
           workspace: {
-            // https://opensearch.org/docs/latest/dashboards/workspace/workspace-acl/
-            acl: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}workspace/workspace-acl/`,
+            // https://opensearch.org/docs/latest/dashboards/workspace/workspace-acl/#defining-workspace-collaborators
+            collaborators: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}workspace/workspace-acl/#defining-workspace-collaborators`,
+            // https://opensearch.org/docs/latest/dashboards/workspace/workspace-acl/#workspace-privacy
+            privacy: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}workspace/workspace-acl/#workspace-privacy`,
           },
         },
         noDocumentation: {
@@ -854,6 +856,7 @@ export interface DocLinksStart {
       readonly visualize: Record<string, string>;
       readonly dashboards: Record<string, string>;
       readonly management: Record<string, string>;
+      readonly workspace: Record<string, string>;
     };
     readonly noDocumentation: {
       readonly auditbeat: string;

src/plugins/workspace/public/components/workspace_collaborators/workspace_collaborators.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiPage, EuiPanel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 
@@ -14,6 +14,7 @@
 import {
   NavigationPublicPluginStart,
   TopNavControlDescriptionData,
+  TopNavControlLinkData,
 } from '../../../../navigation/public';
 import { WorkspacePermissionSetting } from '../workspace_form/types';
 import { WorkspaceCollaboratorTable } from '../workspace_form/workspace_collaborator_table';
@@ -25,6 +26,7 @@
 } from '../workspace_form';
 import { WorkspaceAttributeWithPermission } from '../../../../../core/types';
 import { WorkspaceClient } from '../../workspace_client';
+import { WorkspacePrivacyFlyout } from '../workspace_form/workspace_privacy_flyout';
 import { WorkspaceCollaboratorPrivacySettingPanel } from '../workspace_form/workspace_collaborator_privacy_setting_panel';
 
 export const WorkspaceCollaborators = () => {
@@ -43,6 +45,8 @@
     collaboratorTypes: WorkspaceCollaboratorTypesService;
     workspaceClient: WorkspaceClient;
   }>();
+
+  const [isPrivacyFlyoutVisible, setIsPrivacyFlyoutVisible] = useState(false);
   const displayedCollaboratorTypes = useObservable(collaboratorTypes.getTypes$()) ?? [];
 
   const currentWorkspace = useObservable(
@@ -90,6 +94,10 @@
   if (!currentWorkspace || !isPermissionEnabled) {
     return null;
   }
+
+  const handleLearnMoreClick = (targetElement: HTMLElement) => {
+    setIsPrivacyFlyoutVisible((value) => !value);
+  };
   return (
     <EuiPage data-test-subj="workspace-collaborators-panel">
       <HeaderControl
@@ -98,6 +106,13 @@
             description: i18n.translate('workspace.collaborators.description', {
               defaultMessage: 'Manage workspace access and permissions.',
             }),
+            links: {
+              label: i18n.translate('workspace.form.panels.collaborator.learnMore', {
+                defaultMessage: 'Learn more',
+              }),
+              controlType: 'link',
+              run: handleLearnMoreClick,
+            } as TopNavControlLinkData,
           } as TopNavControlDescriptionData,
         ]}
         setMountPoint={application.setAppDescriptionControls}
@@ -130,6 +145,9 @@
           />
         </EuiPanel>
       </div>
+      {isPrivacyFlyoutVisible && (
+        <WorkspacePrivacyFlyout onClose={() => setIsPrivacyFlyoutVisible(false)} />
+      )}
     </EuiPage>
   );
 };