[navigation] feat: Render dev tools inside a modal (#7938)

* feat: render the content inside a modal

Signed-off-by: SuZhou-Joe <[email protected]>

* Changeset file for PR #7938 created/updated

* feat: use memory router when opened in modal

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update buttons

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: optimize layout

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: optimize layout

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: vertical scrollbar issue

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update test

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update

Signed-off-by: SuZhou-Joe <[email protected]>

* feat: update order

Signed-off-by: SuZhou-Joe <[email protected]>

* fix: update snapshot

Signed-off-by: SuZhou-Joe <[email protected]>

---------

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

changelogs/fragments/7938.yml

@@ -0,0 +1,2 @@
+feat:
+- Change dev tools to a modal ([#7938](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7938))

src/plugins/console/public/application/components/top_nav_menu.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { MenuItemPosition, TopNavMenu, TopNavMenuItem } from './top_nav_menu';
+import { render } from '@testing-library/react';
+
+describe('TopNavMenu Component', () => {
+  const mockedItems: TopNavMenuItem[] = [
+    {
+      id: 'foo',
+      label: 'foo',
+      description: 'foo',
+      onClick: jest.fn(),
+      testId: 'foo',
+      position: MenuItemPosition.LEFT,
+    },
+    {
+      id: 'bar',
+      label: 'bar',
+      description: 'bar',
+      onClick: jest.fn(),
+      testId: 'bar',
+      position: MenuItemPosition.RIGHT,
+    },
+  ];
+  it('should render correctly when not use updatedUX', () => {
+    const { container } = render(<TopNavMenu items={mockedItems} useUpdatedUX={false} />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should render correctly when use updatedUX', () => {
+    const { container } = render(<TopNavMenu items={mockedItems} useUpdatedUX />);
+    expect(container).toMatchSnapshot();
+  });
+});

src/plugins/console/public/application/components/top_nav_menu.tsx

@@ -29,22 +29,79 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiTabs, EuiTab } from '@elastic/eui';
+import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+
+interface CommonProps {
+  disabled: boolean;
+  onClick: () => void;
+  ['data-test-subj']: string;
+}
+
+export enum MenuItemPosition {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
 
 export interface TopNavMenuItem {
   id: string;
   label: string;
   description: string;
   onClick: () => void;
   testId: string;
+  render?: (commonProps: CommonProps) => React.JSX.Element;
+  position: MenuItemPosition;
 }
 
 interface Props {
   disabled?: boolean;
   items: TopNavMenuItem[];
+  useUpdatedUX?: boolean;
+  rightContainerChildren?: React.ReactNode;
 }
 
-export const TopNavMenu: FunctionComponent<Props> = ({ items, disabled }) => {
+export const TopNavMenu: FunctionComponent<Props> = ({
+  items,
+  disabled,
+  useUpdatedUX,
+  rightContainerChildren,
+}) => {
+  if (useUpdatedUX) {
+    const leftMenus = items.filter((item) => item.position === MenuItemPosition.LEFT);
+    const rightMenus = items.filter((item) => item.position === MenuItemPosition.RIGHT);
+    const renderMenus = (item: TopNavMenuItem, idx: number) => {
+      const commonProps: CommonProps = {
+        disabled: !!disabled,
+        onClick: item.onClick,
+        ['data-test-subj']: item.testId,
+      };
+
+      return (
+        <EuiFlexItem grow={false} key={idx}>
+          {item.render?.(commonProps) || null}
+        </EuiFlexItem>
+      );
+    };
+    return (
+      <>
+        <EuiSpacer size="s" />
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="m">
+              {leftMenus.map((item, index) => renderMenus(item, index))}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="m">
+              {rightContainerChildren}
+              {rightMenus.map((item, index) => renderMenus(item, index))}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </>
+    );
+  }
+
   return (
     <EuiTabs size="s">
       {items.map((item, idx) => {

src/plugins/console/public/application/containers/editor/editor.tsx

@@ -49,9 +49,10 @@ const PANEL_MIN_WIDTH = '100px';
 interface Props {
   loading: boolean;
   dataSourceId?: string;
+  useUpdatedUX?: boolean;
 }
 
-export const Editor = memo(({ loading, dataSourceId }: Props) => {
+export const Editor = memo(({ loading, dataSourceId, useUpdatedUX }: Props) => {
   const {
     services: { storage },
   } = useServicesContext();
@@ -101,7 +102,12 @@ export const Editor = memo(({ loading, dataSourceId }: Props) => {
           )}
         </Panel>
         <Panel
-          style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
+          style={{
+            height: '100%',
+            position: 'relative',
+            minWidth: PANEL_MIN_WIDTH,
+            flexGrow: useUpdatedUX ? 1 : 0,
+          }}
           initialWidth={secondPanelWidth}
         >
           {loading ? <EditorContentSpinner /> : <EditorOutput />}