Merge branch 'main' into add-features-in-use-case-card

Signed-off-by: Lin Wang <[email protected]>
opensearch-project · Aug 22, 2024 · 601c344 · 601c344
2 parents 955d1d6 + ba5fe50
commit 601c344
Show file tree

Hide file tree

Showing 14 changed files with 453 additions and 257 deletions.
diff --git a/changelogs/fragments/7652.yml b/changelogs/fragments/7652.yml
@@ -0,0 +1,2 @@
+feat:
+- Update permission settings appearance ([#7652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7652))
diff --git a/src/plugins/advanced_settings/public/header_user_theme_menu.tsx b/src/plugins/advanced_settings/public/header_user_theme_menu.tsx
@@ -66,7 +66,7 @@ export const HeaderUserThemeMenu = () => {
       : screenModeOptions[0].value
   );
 
-  const legacyAppearance = !uiSettings.get('home:useNewHomePage');
+  const useLegacyAppearance = !uiSettings.get('home:useNewHomePage');
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -105,7 +105,7 @@ export const HeaderUserThemeMenu = () => {
     setPopover(false);
   };
 
-  const innerButton = legacyAppearance ? (
+  const innerButton = useLegacyAppearance ? (
     <EuiHeaderSectionItemButton
       aria-expanded="false"
       aria-haspopup="true"
@@ -193,7 +193,7 @@ export const HeaderUserThemeMenu = () => {
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      anchorPosition={legacyAppearance ? 'downLeft' : 'rightDown'}
+      anchorPosition={useLegacyAppearance ? 'downLeft' : 'rightDown'}
       panelPaddingSize="s"
     >
       <EuiPopoverTitle>

diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.test.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.test.tsx
@@ -92,14 +92,12 @@ describe('Filter options menu', () => {
     expect(wrapper.find('[data-test-subj="add-filter-panel"]').exists()).toBeTruthy();
   });
 
-  it("render filter options with 'Save Query' button", () => {
+  it("render saved query panel with 'saved queries' button", () => {
     const wrapper = mountWithIntl(<FilterOptions {...mockProps()} />);
     const button = wrapper.find('[data-test-subj="showFilterActions"]').at(0);
     button.simulate('click');
     wrapper.update();
-    const saveQueryButton = wrapper
-      .find('[data-test-subj="saved-query-management-save-button"]')
-      .at(0);
+    const saveQueryButton = wrapper.find('[data-test-subj="savedQueries"]').at(0);
     expect(saveQueryButton.exists()).toBeTruthy();
     saveQueryButton.simulate('click');
     expect(wrapper.find('[data-test-subj="save-query-panel"]').exists()).toBeTruthy();

diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -32,14 +32,13 @@ import {
   EuiContextMenu,
   EuiPopover,
   EuiToolTip,
-  EuiButton,
-  EuiPopoverFooter,
-  EuiFlexGroup,
   EuiFlexItem,
   EuiSmallButtonEmpty,
   EuiIcon,
   EuiResizeObserver,
+  EuiContextMenuPanelItemDescriptor,
   EuiContextMenuPanel,
+  EuiContextMenuPanelDescriptor,
 } from '@elastic/eui';
 import { stringify } from '@osd/std';
 import { InjectedIntl, injectI18n } from '@osd/i18n/react';
@@ -83,7 +82,6 @@ const FilterOptionsUI = (props: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   const [renderedComponent, setRenderedComponent] = React.useState('menu');
   const [filterWidth, setFilterWidth] = React.useState(maxFilterWidth);
-  const [showSaveQueryButton, setShowSaveQueryButton] = React.useState(true);
   const opensearchDashboards = useOpenSearchDashboards();
   const uiSettings = opensearchDashboards.services.uiSettings;
   const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
@@ -94,7 +92,6 @@ const FilterOptionsUI = (props: Props) => {
 
   const togglePopover = () => {
     setRenderedComponent('menu');
-    setShowSaveQueryButton(true);
     setIsPopoverOpen((prevState) => !prevState);
   };
 
@@ -152,23 +149,40 @@ const FilterOptionsUI = (props: Props) => {
     setFilterWidth(dimensions.width);
   }
 
-  const addFilterPanelItem = {
+  const addFilterPanelItem: EuiContextMenuPanelItemDescriptor = {
     name: props.intl.formatMessage({
       id: 'data.filter.options.addFiltersButtonLabel',
       defaultMessage: 'Add filters',
     }),
     icon: 'plusInCircle',
     onClick: () => {
       setRenderedComponent('addFilter');
-      setShowSaveQueryButton(false);
     },
     'data-test-subj': 'addFilters',
     disabled: false,
   };
 
+  const savedQueriesPanelItem: EuiContextMenuPanelItemDescriptor = {
+    name: props.intl.formatMessage({
+      id: 'data.filter.options.savedQueriesButtonLabel',
+      defaultMessage: 'Saved queries',
+    }),
+    icon: 'folderOpen',
+    onClick: () => {
+      setRenderedComponent('saveQuery');
+    },
+    'data-test-subj': 'savedQueries',
+    disabled: false,
+  };
+
+  const menuOptionsSeparator: EuiContextMenuPanelItemDescriptor = {
+    isSeparator: true,
+    key: 'sep',
+  };
+
   const disableMenuOption = props.filters.length === 0 && useNewHeader;
 
-  const panelTree = [
+  const panelTree: EuiContextMenuPanelDescriptor[] = [
     {
       id: 0,
       title: 'Filters',
@@ -339,7 +353,10 @@ const FilterOptionsUI = (props: Props) => {
   };
 
   if (useNewHeader) {
-    panelTree[0].items.unshift(addFilterPanelItem);
+    panelTree[0].items?.unshift(addFilterPanelItem);
+    panelTree[0].items?.push(menuOptionsSeparator);
+    panelTree[0].items?.push(savedQueriesPanelItem);
+    panelTree[0].title = '';
   }
 
   const label = i18n.translate('data.search.searchBar.savedQueryPopoverButtonText', {
@@ -395,33 +412,6 @@ const FilterOptionsUI = (props: Props) => {
       repositionOnScroll
     >
       {useNewHeader ? renderComponent() : props.useSaveQueryMenu ? saveQueryPanel : menuPanel}
-      {useNewHeader && showSaveQueryButton && (
-        <EuiPopoverFooter>
-          <EuiFlexGroup justifyContent="spaceAround">
-            <EuiFlexItem>
-              <EuiButton
-                size="s"
-                fill={false}
-                aria-label={i18n.translate(
-                  'data.search.searchBar.savedQueryPopoverSaveButtonAriaLabel',
-                  {
-                    defaultMessage: 'Save a new saved query',
-                  }
-                )}
-                data-test-subj="saved-query-management-save-button"
-                onClick={() => {
-                  setRenderedComponent('saveQuery');
-                  setShowSaveQueryButton(false);
-                }}
-              >
-                {i18n.translate('data.search.searchBar.savedQueryPopoverSaveButtonText', {
-                  defaultMessage: 'Save query',
-                })}
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPopoverFooter>
-      )}
     </EuiPopover>
   );
 };

diff --git a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.scss b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.scss
@@ -0,0 +1,14 @@
+/*
+* Copyright OpenSearch Contributors
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+.osdNewsfeedButtonWrapper {
+  position: relative;
+
+  &--dot {
+    position: absolute;
+    right: -1 * $euiSizeXS;
+    top: -1 * $euiSizeXS;
+  }
+}
diff --git a/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx b/src/plugins/newsfeed/public/components/newsfeed_header_nav_button.tsx
@@ -30,10 +30,12 @@
 
 import React, { useState, Fragment, useEffect } from 'react';
 import * as Rx from 'rxjs';
-import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiHeaderSectionItemButton, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { NewsfeedFlyout } from './flyout_list';
 import { FetchResult } from '../types';
+import { CoreStart } from '../../../../core/public';
+import './newsfeed_header_nav_button.scss';
 
 export interface INewsfeedContext {
   setFlyoutVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -44,10 +46,11 @@ export const NewsfeedContext = React.createContext({} as INewsfeedContext);
 export type NewsfeedApiFetchResult = Rx.Observable<void | FetchResult | null>;
 
 export interface Props {
+  coreStart: CoreStart;
   apiFetchResult: NewsfeedApiFetchResult;
 }
 
-export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
+export const NewsfeedNavButton = ({ coreStart, apiFetchResult }: Props) => {
   const [showBadge, setShowBadge] = useState<boolean>(false);
   const [flyoutVisible, setFlyoutVisible] = useState<boolean>(false);
   const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
@@ -69,11 +72,40 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
     setFlyoutVisible(!flyoutVisible);
   }
 
-  return (
-    <NewsfeedContext.Provider value={{ setFlyoutVisible, newsFetchResult }}>
-      <Fragment>
-        <EuiHeaderSectionItemButton
-          data-test-subj="newsfeed"
+  const useLegacyAppearance = !coreStart.uiSettings.get('home:useNewHomePage');
+  const innerElement = useLegacyAppearance ? (
+    <EuiHeaderSectionItemButton
+      data-test-subj="newsfeed"
+      aria-controls="keyPadMenu"
+      aria-expanded={flyoutVisible}
+      aria-haspopup="true"
+      aria-label={
+        showBadge
+          ? i18n.translate('newsfeed.headerButton.unreadAriaLabel', {
+              defaultMessage: 'Newsfeed menu - unread items available',
+            })
+          : i18n.translate('newsfeed.headerButton.readAriaLabel', {
+              defaultMessage: 'Newsfeed menu - all items read',
+            })
+      }
+      notification={showBadge ? true : null}
+      onClick={showFlyout}
+    >
+      <EuiIcon type="cheer" size="m" />
+    </EuiHeaderSectionItemButton>
+  ) : (
+    <EuiToolTip
+      content={i18n.translate('newsfeed.headerButton.menuButtonTooltip', {
+        defaultMessage: 'Newsfeed',
+      })}
+      delay="long"
+      position="bottom"
+    >
+      <div className="osdNewsfeedButtonWrapper">
+        <EuiButtonIcon
+          iconType="cheer"
+          color="primary"
+          size="xs"
           aria-controls="keyPadMenu"
           aria-expanded={flyoutVisible}
           aria-haspopup="true"
@@ -86,11 +118,17 @@ export const NewsfeedNavButton = ({ apiFetchResult }: Props) => {
                   defaultMessage: 'Newsfeed menu - all items read',
                 })
           }
-          notification={showBadge ? true : null}
           onClick={showFlyout}
-        >
-          <EuiIcon type="cheer" size="m" />
-        </EuiHeaderSectionItemButton>
+        />
+        <EuiIcon className="osdNewsfeedButtonWrapper--dot" color="accent" type="dot" size="s" />
+      </div>
+    </EuiToolTip>
+  );
+
+  return (
+    <NewsfeedContext.Provider value={{ setFlyoutVisible, newsFetchResult }}>
+      <Fragment>
+        {innerElement}
         {flyoutVisible ? <NewsfeedFlyout /> : null}
       </Fragment>
     </NewsfeedContext.Provider>

diff --git a/src/plugins/newsfeed/public/plugin.tsx b/src/plugins/newsfeed/public/plugin.tsx
@@ -64,10 +64,11 @@ export class NewsfeedPublicPlugin
   }
 
   public start(core: CoreStart) {
+    const useLegacyAppearance = !core.uiSettings.get('home:useNewHomePage');
     const api$ = this.fetchNewsfeed(core, this.config).pipe(share());
-    core.chrome.navControls.registerRight({
+    core.chrome.navControls[useLegacyAppearance ? 'registerRight' : 'registerLeftBottom']({
       order: 1000,
-      mount: (target) => this.mount(api$, target),
+      mount: (target) => this.mount(core, api$, target),
     });
 
     return {
@@ -95,10 +96,10 @@ export class NewsfeedPublicPlugin
     );
   }
 
-  private mount(api$: NewsfeedApiFetchResult, targetDomElement: HTMLElement) {
+  private mount(coreStart: CoreStart, api$: NewsfeedApiFetchResult, targetDomElement: HTMLElement) {
     ReactDOM.render(
       <I18nProvider>
-        <NewsfeedNavButton apiFetchResult={api$} />
+        <NewsfeedNavButton coreStart={coreStart} apiFetchResult={api$} />
       </I18nProvider>,
       targetDomElement
     );

diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -279,7 +279,7 @@ describe('WorkspaceCreator', () => {
       target: { value: 'test workspace name' },
     });
     fireEvent.click(getByTestId('workspaceUseCase-observability'));
-    fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-user-addNew'));
+    fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-addNew'));
     fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
     expect(workspaceClientCreate).toHaveBeenCalledWith(
       expect.objectContaining({

diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/src/plugins/workspace/public/components/workspace_form/constants.ts
@@ -49,6 +49,11 @@ export const usersAndPermissionsTitle = i18n.translate('workspace.form.usersAndP
   defaultMessage: 'Workspaces access',
 });
 
+export const usersAndPermissionsCreatePageTitle = i18n.translate(
+  'workspace.form.usersAndPermissions.createPage.title',
+  { defaultMessage: 'Add collaborators' }
+);
+
 export const detailsName = i18n.translate('workspace.form.workspaceDetails.name.label', {
   defaultMessage: 'Name',
 });

diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { useCallback, useRef } from 'react';
-import { EuiPanel, EuiSpacer, EuiTitle, EuiForm } from '@elastic/eui';
-
+import { EuiPanel, EuiSpacer, EuiTitle, EuiForm, EuiText } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import { WorkspaceFormProps } from './types';
 import { useWorkspaceForm } from './use_workspace_form';
 import { WorkspacePermissionSettingPanel } from './workspace_permission_setting_panel';
@@ -16,7 +16,7 @@ import { SelectDataSourcePanel } from './select_data_source_panel';
 import { EnterDetailsPanel } from './workspace_enter_details_panel';
 import {
   selectDataSourceTitle,
-  usersAndPermissionsTitle,
+  usersAndPermissionsCreatePageTitle,
   workspaceDetailsTitle,
   workspaceUseCaseTitle,
 } from './constants';
@@ -109,8 +109,15 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
       {permissionEnabled && (
         <EuiPanel>
           <EuiTitle size="s">
-            <h2>{usersAndPermissionsTitle}</h2>
+            <h2>{usersAndPermissionsCreatePageTitle}</h2>
           </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="xs" color="default">
+            {i18n.translate('workspace.form.usersAndPermissions.description', {
+              defaultMessage:
+                'You will be added as an owner to the workspace. Select additional users and user groups as workspace collaborators with different access levels.',
+            })}
+          </EuiText>
           <EuiSpacer size="m" />
           <WorkspacePermissionSettingPanel
             errors={formErrors.permissionSettings?.fields}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		feat:
		- Update permission settings appearance ([#7652](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7652))