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

@@ -436,6 +436,12 @@ export class DocLinksService {
             // https://opensearch.org/docs/latest/dashboards/management/advanced-settings/
             advancedSettings: `${OPENSEARCH_DASHBOARDS_VERSIONED_DOCS}management/advanced-settings/`,
           },
+          workspace: {
+            // 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: {
           auditbeat: `${OPENSEARCH_WEBSITE_DOCS}tools/index/#downloads`,
@@ -850,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 } 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';
 
 export const WorkspaceCollaborators = () => {
   const {
@@ -43,6 +45,7 @@
     workspaceClient: WorkspaceClient;
   }>();
 
+  const [isPrivacyFlyoutVisible, setIsPrivacyFlyoutVisible] = useState(false);
   const displayedCollaboratorTypes = useObservable(collaboratorTypes.getTypes$()) ?? [];
 
   const currentWorkspace = useObservable(
@@ -90,6 +93,10 @@
   if (!currentWorkspace || !isPermissionEnabled) {
     return null;
   }
+
+  const handleLearnMoreClick = (targetElement: HTMLElement) => {
+    setIsPrivacyFlyoutVisible((value) => !value);
+  };
   return (
     <EuiPage data-test-subj="workspace-collaborators-panel">
       <HeaderControl
@@ -99,6 +106,13 @@
               defaultMessage: 'Manage workspace access and permissions.',
             }),
           } as TopNavControlDescriptionData,
+          {
+            label: i18n.translate('workspace.form.panels.collaborator.learnMore', {
+              defaultMessage: 'Learn more',
+            }),
+            controlType: 'link',
+            run: handleLearnMoreClick,
+          } as TopNavControlLinkData,
         ]}
         setMountPoint={application.setAppDescriptionControls}
       />
@@ -123,6 +137,9 @@
           handleSubmitPermissionSettings={handleSubmitPermissionSettings}
         />
       </EuiPanel>
+      {isPrivacyFlyoutVisible && (
+        <WorkspacePrivacyFlyout onClose={() => setIsPrivacyFlyoutVisible(false)} />
+      )}
     </EuiPage>
   );
 };