Add a learn more flyout to the collaborators page (opensearch-project#9145)

* Add a learn more flyout to the collaborators page

Signed-off-by: Kapian1234 <[email protected]>

* Changeset file for PR opensearch-project#9145 created/updated

* Update the link

Signed-off-by: Kapian1234 <[email protected]>

* Update snapshots

Signed-off-by: Kapian1234 <[email protected]>

* Modify flyout size

Signed-off-by: Kapian1234 <[email protected]>

* Update collaborators description

Signed-off-by: Kapian1234 <[email protected]>

* Move learn_more link into the description

Signed-off-by: Kapian1234 <[email protected]>

---------

Signed-off-by: Kapian1234 <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: Kapian1234

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/advanced_settings/public/management_app/__snapshots__/advanced_settings.test.tsx.snap

@@ -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 { CoreStart } from '../../../../../core/public';
 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 @@ import {
 } 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 @@ export const WorkspaceCollaborators = () => {
     collaboratorTypes: WorkspaceCollaboratorTypesService;
     workspaceClient: WorkspaceClient;
   }>();
+
+  const [isPrivacyFlyoutVisible, setIsPrivacyFlyoutVisible] = useState(false);
   const displayedCollaboratorTypes = useObservable(collaboratorTypes.getTypes$()) ?? [];
 
   const currentWorkspace = useObservable(
@@ -90,6 +94,10 @@ export const WorkspaceCollaborators = () => {
   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 @@ export const WorkspaceCollaborators = () => {
             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 @@ export const WorkspaceCollaborators = () => {
           />
         </EuiPanel>
       </div>
+      {isPrivacyFlyoutVisible && (
+        <WorkspacePrivacyFlyout onClose={() => setIsPrivacyFlyoutVisible(false)} />
+      )}
     </EuiPage>
   );
 };