Merge branch 'main' into ism

opensearch-project · Aug 19, 2024 · ac2c4ce · ac2c4ce
2 parents cc39245 + e3da9b4
commit ac2c4ce
Show file tree

Hide file tree

Showing 75 changed files with 797 additions and 710 deletions.
diff --git a/public/apps/account/account-app.tsx b/public/apps/account/account-app.tsx
@@ -107,9 +107,10 @@ export async function setupTopNavButton(coreStart: CoreStart, config: ClientConf
 
     setShouldShowTenantPopup(shouldShowTenantPopup);
 
-    coreStart.chrome.navControls.registerRight({
-      // Pin to rightmost, since newsfeed plugin is using 1000, here needs a number > 1000
-      order: 2000,
+    const isPlacedInLeftNav = coreStart.uiSettings.get('home:useNewHomePage');
+
+    coreStart.chrome.navControls[isPlacedInLeftNav ? 'registerLeftBottom' : 'registerRight']({
+      order: isPlacedInLeftNav ? 10000 : 2000,
       mount: (element: HTMLElement) => {
         ReactDOM.render(
           <AccountNavButton

diff --git a/public/apps/account/account-nav-button.scss b/public/apps/account/account-nav-button.scss
@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors
+.euiButtonEmpty.accountNavButton {
+  border: 0;
+}
diff --git a/public/apps/account/account-nav-button.tsx b/public/apps/account/account-nav-button.tsx
@@ -36,6 +36,7 @@ import { LogoutButton } from './log-out-button';
 import { resolveTenantName } from '../configuration/utils/tenant-utils';
 import { getShouldShowTenantPopup, setShouldShowTenantPopup } from '../../utils/storage-utils';
 import { getDashboardsInfo } from '../../utils/dashboards-info-utils';
+import './account-nav-button.scss';
 
 export function AccountNavButton(props: {
   coreStart: CoreStart;
@@ -73,7 +74,7 @@ export function AccountNavButton(props: {
     const fetchData = async () => {
       try {
         setIsMultiTenancyEnabled(
-          (await getDashboardsInfo(props.coreStart.http)).multitenancy_enabled
+          Boolean((await getDashboardsInfo(props.coreStart.http)).multitenancy_enabled)
         );
       } catch (e) {
         // TODO: switch to better error display.
@@ -167,12 +168,31 @@ export function AccountNavButton(props: {
       />
     </div>
   );
-  return (
-    <EuiHeaderSectionItemButton id="user-icon-btn">
+
+  const isPlacedInLeftNav = props.coreStart.uiSettings.get('home:useNewHomePage');
+
+  // ToDo: Add aria-label and tooltip when isPlacedInLeftNav is true
+  const innerElement = isPlacedInLeftNav ? (
+    <EuiButtonEmpty
+      size="xs"
+      flush="both"
+      className="accountNavButton"
+      aria-expanded={isPopoverOpen}
+      aria-haspopup="true"
+    >
+      <EuiAvatar name={username} size="s" />
+    </EuiButtonEmpty>
+  ) : (
+    <EuiAvatar name={username} size="m" />
+  );
+
+  const popover = (
+    <>
       <EuiPopover
         data-test-subj="account-popover"
         id="actionsMenu"
-        button={<EuiAvatar name={username} />}
+        anchorPosition={isPlacedInLeftNav ? 'rightDown' : undefined}
+        button={innerElement}
         isOpen={isPopoverOpen}
         closePopover={() => {
           setPopoverOpen(false);
@@ -185,6 +205,14 @@ export function AccountNavButton(props: {
         <EuiContextMenuPanel>{contextMenuPanel}</EuiContextMenuPanel>
       </EuiPopover>
       {modal}
+    </>
+  );
+
+  return isPlacedInLeftNav ? (
+    popover
+  ) : (
+    <EuiHeaderSectionItemButton id="user-icon-btn" size="l">
+      {popover}
     </EuiHeaderSectionItemButton>
   );
 }

diff --git a/public/apps/account/password-reset-panel.tsx b/public/apps/account/password-reset-panel.tsx
@@ -15,13 +15,13 @@
 
 import React from 'react';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiFieldPassword,
+  EuiCompressedFieldPassword,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -116,7 +116,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
             isInvalid={isCurrentPasswordInvalid}
             error={currentPasswordError}
           >
-            <EuiFieldPassword
+            <EuiCompressedFieldPassword
               data-test-subj="current-password"
               onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
                 setCurrentPassword(e.target.value);
@@ -135,7 +135,7 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
                 helpText={passwordHelpText}
                 isInvalid={isNewPasswordInvalid}
               >
-                <EuiFieldPassword
+                <EuiCompressedFieldPassword
                   data-test-subj="new-password"
                   onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
                     setNewPassword(e.target.value);
@@ -146,17 +146,17 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
                   isInvalid={isNewPasswordInvalid}
                 />
               </FormRow>
-              <EuiFormRow>
+              <EuiCompressedFormRow>
                 <PasswordStrengthBar password={newPassword} />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           </EuiFlexGroup>
 
           <FormRow
             headerText="Re-enter new password"
             helpText="The password must be identical to what you entered above."
           >
-            <EuiFieldPassword
+            <EuiCompressedFieldPassword
               data-test-subj="reenter-new-password"
               isInvalid={isRepeatNewPasswordInvalid}
               onChange={function (e: React.ChangeEvent<HTMLInputElement>) {
@@ -177,18 +177,18 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
           )}
         </EuiModalBody>
         <EuiModalFooter>
-          <EuiButtonEmpty data-test-subj="cancel" onClick={props.handleClose}>
+          <EuiSmallButtonEmpty data-test-subj="cancel" onClick={props.handleClose}>
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
 
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="reset"
             fill
             disabled={isRepeatNewPasswordInvalid}
             onClick={handleReset}
           >
             Reset
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>

diff --git a/public/apps/account/tenant-switch-panel.tsx b/public/apps/account/tenant-switch-panel.tsx
@@ -14,16 +14,16 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiOverlayMask,
-  EuiRadioGroup,
+  EuiCompressedRadioGroup,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -247,7 +247,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
   if (isMultiTenancyEnabled) {
     content = (
       <>
-        <EuiRadioGroup
+        <EuiCompressedRadioGroup
           data-test-subj="tenant-switch-radios"
           options={tenantSwitchRadios}
           idSelected={tenantSwitchRadioIdSelected}
@@ -258,7 +258,7 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
         {/* This combo box has to be outside the radio group.
           In current EUI if put into the child of radio option, clicking in the combo box will not
           show the drop down list since the radio option consumes the click event. */}
-        <EuiComboBox
+        <EuiCompressedComboBox
           placeholder="Select a custom tenant"
           options={customTenantOptions}
           singleSelection={{ asPlainText: true }}
@@ -304,16 +304,16 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
           <EuiSpacer />
         </EuiModalBody>
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={props.handleClose}>Cancel</EuiButtonEmpty>
+          <EuiSmallButtonEmpty onClick={props.handleClose}>Cancel</EuiSmallButtonEmpty>
 
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="confirm"
             fill={isMultiTenancyEnabled && !invalidCustomTenant}
             disabled={!isMultiTenancyEnabled || invalidCustomTenant}
             onClick={handleTenantConfirmation}
           >
             Confirm
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>

diff --git a/public/apps/account/test/__snapshots__/account-nav-button.test.tsx.snap b/public/apps/account/test/__snapshots__/account-nav-button.test.tsx.snap
@@ -3,12 +3,14 @@
 exports[`Account navigation button renders 1`] = `
 <EuiHeaderSectionItemButton
   id="user-icon-btn"
+  size="l"
 >
   <EuiPopover
     anchorPosition="downCenter"
     button={
       <EuiAvatar
         name="user1"
+        size="m"
       />
     }
     closePopover={[Function]}
@@ -111,7 +113,34 @@ exports[`Account navigation button renders 1`] = `
               margin="xs"
             />
           }
-          http={1}
+          http={
+            Object {
+              "addLoadingCountSource": [MockFunction],
+              "anonymousPaths": Object {
+                "isAnonymous": [MockFunction],
+                "register": [MockFunction],
+              },
+              "basePath": BasePath {
+                "basePath": "",
+                "clientBasePath": "",
+                "get": [Function],
+                "getBasePath": [Function],
+                "prepend": [Function],
+                "remove": [Function],
+                "serverBasePath": "",
+              },
+              "delete": [MockFunction],
+              "fetch": [MockFunction],
+              "get": [MockFunction],
+              "getLoadingCount$": [MockFunction],
+              "head": [MockFunction],
+              "intercept": [MockFunction],
+              "options": [MockFunction],
+              "patch": [MockFunction],
+              "post": [MockFunction],
+              "put": [MockFunction],
+            }
+          }
         />
       </div>
     </EuiContextMenuPanel>