[Temp]: Rework how to add new Entities to the canvas

fix: KaotoIO#1030

packages/ui/src/components/Visualization/ContextToolbar/ContextToolbar.tsx

@@ -3,29 +3,39 @@ import { FunctionComponent, useContext } from 'react';
 import { sourceSchemaConfig } from '../../../models/camel';
 import { EntitiesContext } from '../../../providers/entities.provider';
 import './ContextToolbar.scss';
+import { DSLSelector } from './DSLSelector/DSLSelector';
 import { FlowClipboard } from './FlowClipboard/FlowClipboard';
 import { FlowExportImage } from './FlowExportImage/FlowExportImage';
-import { NewFlow } from '../EmptyState/FlowType/NewFlow';
 import { FlowsMenu } from './Flows/FlowsMenu';
+import { NewEntity } from './NewEntity/NewEntity';
 
 export const ContextToolbar: FunctionComponent = () => {
   const { currentSchemaType } = useContext(EntitiesContext)!;
+  const isMultipleRoutes = sourceSchemaConfig.config[currentSchemaType].multipleRoute;
 
-  return [
-    <ToolbarItem className="current-dsl-tag" key="toolbar-current-dsl">
-      <span data-testid="toolbar-current-dsl">{sourceSchemaConfig.config[currentSchemaType].name || 'None'}</span>
+  const toolbarItems: JSX.Element[] = [
+    <ToolbarItem key="toolbar-dsl-selector">
+      <DSLSelector />
     </ToolbarItem>,
     <ToolbarItem key="toolbar-flows-list">
       <FlowsMenu />
     </ToolbarItem>,
-    <ToolbarItem key="toolbar-new-route">
-      <NewFlow />
-    </ToolbarItem>,
+  ];
+
+  if (isMultipleRoutes) {
+    toolbarItems.push(
+      <ToolbarItem key="toolbar-new-route">
+        <NewEntity />
+      </ToolbarItem>,
+    );
+  }
+
+  return toolbarItems.concat([
     <ToolbarItem key="toolbar-clipboard">
       <FlowClipboard />
     </ToolbarItem>,
     <ToolbarItem key={'toolbar-export-image'}>
       <FlowExportImage />
     </ToolbarItem>,
-  ];
+  ]);
 };

packages/ui/src/components/Visualization/ContextToolbar/NewEntity/NewEntity.test.tsx

@@ -0,0 +1,203 @@
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { FunctionComponent } from 'react';
+import { EntitiesContextResult } from '../../../../hooks';
+import { KaotoSchemaDefinition } from '../../../../models';
+import { CamelRouteResource, SourceSchemaType, sourceSchemaConfig } from '../../../../models/camel';
+import { EntitiesContext } from '../../../../providers/entities.provider';
+import { VisibleFLowsContextResult, VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
+import { camelRouteJson } from '../../../../stubs';
+import { NewEntity } from './NewEntity';
+
+const config = sourceSchemaConfig;
+config.config[SourceSchemaType.Pipe].schema = {
+  name: 'Pipe',
+  schema: { name: 'Pipe', description: 'desc' } as KaotoSchemaDefinition['schema'],
+} as KaotoSchemaDefinition;
+config.config[SourceSchemaType.Kamelet].schema = {
+  name: 'Kamelet',
+  schema: { name: 'Kamelet', description: 'desc' } as KaotoSchemaDefinition['schema'],
+} as KaotoSchemaDefinition;
+config.config[SourceSchemaType.Route].schema = {
+  name: 'route',
+  schema: { name: 'route', description: 'desc' } as KaotoSchemaDefinition['schema'],
+} as KaotoSchemaDefinition;
+
+describe('FlowTypeSelector.tsx', () => {
+  let setCurrentSchemaTypeSpy: jest.Mock;
+  let updateEntitiesFromCamelResourceSpy: jest.Mock;
+  let updateSourceCodeFromEntitiesSpy: jest.Mock;
+
+  beforeEach(() => {
+    setCurrentSchemaTypeSpy = jest.fn();
+    updateEntitiesFromCamelResourceSpy = jest.fn();
+    updateSourceCodeFromEntitiesSpy = jest.fn();
+  });
+
+  const FlowTypeSelectorWithContext: FunctionComponent<{ currentSchemaType?: SourceSchemaType }> = (props) => {
+    const camelResource = new CamelRouteResource(camelRouteJson);
+    const currentSchemaType = props.currentSchemaType ?? camelResource.getType();
+
+    return (
+      <EntitiesContext.Provider
+        key={Date.now()}
+        value={
+          {
+            camelResource,
+            entities: camelResource.getEntities(),
+            visualEntities: camelResource.getVisualEntities(),
+            currentSchemaType,
+            setCurrentSchemaType: setCurrentSchemaTypeSpy,
+            updateEntitiesFromCamelResource: updateEntitiesFromCamelResourceSpy,
+            updateSourceCodeFromEntities: updateSourceCodeFromEntitiesSpy,
+          } as unknown as EntitiesContextResult
+        }
+      >
+        <VisibleFlowsContext.Provider
+          value={{ visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult}
+        >
+          <NewEntity />
+        </VisibleFlowsContext.Provider>
+      </EntitiesContext.Provider>
+    );
+  };
+
+  it('component renders', () => {
+    const wrapper = render(<FlowTypeSelectorWithContext />);
+    const toggle = wrapper.queryByTestId('dsl-list-dropdown');
+    expect(toggle).toBeInTheDocument();
+  });
+
+  it('should call `updateEntitiesFromCamelResource` when selecting an item', async () => {
+    const wrapper = render(<FlowTypeSelectorWithContext />);
+
+    /** Click on toggle */
+    const toggle = await wrapper.findByTestId('dsl-list-dropdown');
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    /** Click on first element */
+    const element = await wrapper.findByText('Pipe');
+    act(() => {
+      fireEvent.click(element);
+    });
+
+    await waitFor(() => {
+      expect(updateEntitiesFromCamelResourceSpy).toHaveBeenCalled();
+    });
+  });
+
+  it('should disable the MenuToggleAction if the DSL is already selected', async () => {
+    const wrapper = render(<FlowTypeSelectorWithContext currentSchemaType={SourceSchemaType.Route} />);
+
+    /** Click on toggle */
+    const toggle = await wrapper.findByTestId('dsl-list-dropdown');
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    /** Click on first element */
+    const element = await wrapper.findByText('Camel Route');
+    // act(() => {
+    //   fireEvent.click(element);
+    // });
+
+    waitFor(() => {
+      expect(element).toBeDisabled();
+    });
+  });
+
+  it('should toggle list of DSLs', async () => {
+    const wrapper = render(<FlowTypeSelectorWithContext />);
+    const toggle = await wrapper.findByTestId('dsl-list-dropdown');
+
+    /** Click on toggle */
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    const element = await wrapper.findByText('Pipe');
+    expect(element).toBeInTheDocument();
+
+    /** Close Select */
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    waitFor(() => {
+      expect(element).not.toBeInTheDocument();
+    });
+  });
+
+  it('should show selected value', async () => {
+    const wrapper = render(<FlowTypeSelectorWithContext />);
+    const toggle = await wrapper.findByTestId('dsl-list-dropdown');
+
+    /** Open Select */
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    /** Click on first element */
+    act(() => {
+      const element = wrapper.getByText('Camel Route');
+      fireEvent.click(element);
+    });
+
+    /** Open Select again */
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    const element = await wrapper.findByRole('option', { selected: true });
+    expect(element).toBeInTheDocument();
+    expect(element).toHaveTextContent('Camel Route');
+  });
+
+  it('should have selected DSL if provided', async () => {
+    const wrapper = render(<FlowTypeSelectorWithContext />);
+    const toggle = await wrapper.findByTestId('dsl-list-dropdown');
+
+    /** Open Select */
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    waitFor(() => {
+      const element = wrapper.queryByRole('option', { selected: true });
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveTextContent('Pipe');
+    });
+  });
+
+  it('should close Select when pressing ESC', async () => {
+    const wrapper = render(<FlowTypeSelectorWithContext />);
+    const toggle = await wrapper.findByTestId('dsl-list-dropdown');
+
+    /** Open Select */
+    act(() => {
+      fireEvent.click(toggle);
+    });
+
+    const menu = await wrapper.findByRole('listbox');
+
+    expect(menu).toBeInTheDocument();
+
+    /** Press Escape key to close the menu */
+    act(() => {
+      fireEvent.focus(menu);
+      fireEvent.keyDown(menu, { key: 'Escape', code: 'Escape', charCode: 27 });
+    });
+
+    waitFor(() => {
+      /** The close panel is an async process */
+      expect(menu).not.toBeInTheDocument();
+    });
+
+    waitFor(() => {
+      const element = wrapper.queryByRole('option', { selected: true });
+      expect(element).toBeInTheDocument();
+      expect(element).toHaveTextContent('Camel Route');
+    });
+  });
+});

packages/ui/src/components/Visualization/ContextToolbar/NewEntity/NewEntity.tsx

@@ -0,0 +1,101 @@
+import { Menu, MenuContainer, MenuContent, MenuItem, MenuList, MenuToggle } from '@patternfly/react-core';
+import { PlusIcon } from '@patternfly/react-icons';
+import { FunctionComponent, ReactElement, useCallback, useContext, useRef, useState } from 'react';
+import { BaseVisualCamelEntityDefinition } from '../../../../models/camel/camel-resource';
+import { EntityType } from '../../../../models/camel/entities';
+import { EntitiesContext } from '../../../../providers/entities.provider';
+import { VisibleFlowsContext } from '../../../../providers/visible-flows.provider';
+
+export const NewEntity: FunctionComponent = () => {
+  const { camelResource, updateEntitiesFromCamelResource } = useContext(EntitiesContext)!;
+  const visibleFlowsContext = useContext(VisibleFlowsContext)!;
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const groupedEntities = useRef<BaseVisualCamelEntityDefinition>(camelResource.getCanvasEntityList());
+
+  const onSelect = useCallback(
+    (_event: unknown, entityType: string | number | undefined) => {
+      if (!entityType) {
+        return;
+      }
+
+      /**
+       * If it's the same DSL as we have in the existing Flows list,
+       * we don't need to do anything special, just add a new flow if
+       * supported
+       */
+      const newId = camelResource.addNewEntity(entityType as EntityType);
+      visibleFlowsContext.visualFlowsApi.hideAllFlows();
+      visibleFlowsContext.visualFlowsApi.setVisibleFlows([newId]);
+      updateEntitiesFromCamelResource();
+      setIsOpen(false);
+    },
+    [camelResource, updateEntitiesFromCamelResource, visibleFlowsContext.visualFlowsApi],
+  );
+
+  const getMenuItem = useCallback(
+    (entity: { name?: EntityType; title: string; description: string }, flyoutMenu?: ReactElement) => {
+      return (
+        <MenuItem
+          key={`new-entity-${entity.name}`}
+          data-testid={`new-entity-${entity.name}`}
+          itemId={entity.name}
+          description={
+            <span className="pf-v5-u-text-break-word" style={{ wordBreak: 'keep-all' }}>
+              {entity.description}
+            </span>
+          }
+          flyoutMenu={flyoutMenu}
+        >
+          {entity.title}
+        </MenuItem>
+      );
+    },
+    [],
+  );
+
+  return (
+    <MenuContainer
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      menu={
+        // TODO: Workaround for flyout menu being scrollable and packed within the toolbar
+        <Menu ref={menuRef} style={{ overflowY: 'unset' }} containsFlyout onSelect={onSelect}>
+          <MenuContent>
+            <MenuList>
+              {groupedEntities.current.common.map((entityDef) => getMenuItem(entityDef))}
+
+              {Object.entries(groupedEntities.current.groups).map(([group, entities]) => {
+                const flyoutMenu = (
+                  <Menu onSelect={onSelect}>
+                    <MenuContent>
+                      <MenuList>{entities.map((entityDef) => getMenuItem(entityDef))}</MenuList>
+                    </MenuContent>
+                  </Menu>
+                );
+
+                return getMenuItem({ name: undefined, title: group, description: '' }, flyoutMenu);
+              })}
+            </MenuList>
+          </MenuContent>
+        </Menu>
+      }
+      menuRef={menuRef}
+      toggle={
+        <MenuToggle
+          data-testid="new-entity-list-dropdown"
+          ref={toggleRef}
+          onClick={() => {
+            setIsOpen(!isOpen);
+          }}
+          isExpanded={isOpen}
+        >
+          <PlusIcon />
+          <span className="pf-v5-u-m-sm">New</span>
+        </MenuToggle>
+      }
+      toggleRef={toggleRef}
+    />
+  );
+};