@finos/legend-application-studio 18.1.0 → 19.0.0

package/src/components/editor/ActivityBar.tsx

@@ -15,16 +15,14 @@
  */
 
 import { observer } from 'mobx-react-lite';
-import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
+import { ACTIVITY_MODE, AUX_PANEL_MODE } from '../../stores/EditorConfig.js';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import {
-  CheckIcon,
   clsx,
   DropdownMenu,
   RepoIcon,
   MenuContent,
   MenuContentItem,
-  MenuContentItemIcon,
   MenuContentItemLabel,
   GitPullRequestIcon,
   GitMergeIcon,
@@ -48,16 +46,14 @@ import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvide
 const SettingsMenu = observer(
   forwardRef<HTMLDivElement, unknown>(function SettingsMenu(props, ref) {
     const editorStore = useEditorStore();
-    const toggleDevTool = (): void => {
-      editorStore.setDevTool(!editorStore.isDevToolEnabled);
+    const showDeveloperTool = (): void => {
+      editorStore.auxPanelDisplayState.open();
+      editorStore.setActiveAuxPanelMode(AUX_PANEL_MODE.DEV_TOOL);
     };
 
     return (
       <MenuContent ref={ref} className="activity-bar__setting__menu">
-        <MenuContentItem onClick={toggleDevTool}>
-          <MenuContentItemIcon>
-            {editorStore.isDevToolEnabled ? <CheckIcon /> : null}
-          </MenuContentItemIcon>
+        <MenuContentItem onClick={showDeveloperTool}>
           <MenuContentItemLabel>Show Developer Tool</MenuContentItemLabel>
         </MenuContentItem>
       </MenuContent>
@@ -76,10 +72,6 @@ export const ActivityBarMenu: React.FC = () => {
   const applicationStore = useLegendStudioApplicationStore();
   const appDocUrl = applicationStore.documentationService.url;
 
-  // menu
-  const [openMenuDropdown, setOpenMenuDropdown] = useState(false);
-  const showMenuDropdown = (): void => setOpenMenuDropdown(true);
-  const hideMenuDropdown = (): void => setOpenMenuDropdown(false);
   // about modal
   const [openAppInfo, setOpenAppInfo] = useState(false);
   const showAppInfo = (): void => setOpenAppInfo(true);
@@ -106,58 +98,34 @@ export const ActivityBarMenu: React.FC = () => {
 
   return (
     <>
-      <DropdownMenu
-        className={clsx('app__header__action', {
-          'menu__trigger--on-menu-open': openMenuDropdown,
-        })}
-        onClose={hideMenuDropdown}
-        menuProps={{
-          anchorOrigin: { vertical: 'top', horizontal: 'right' },
-          transformOrigin: { vertical: 'top', horizontal: 'left' },
-          elevation: 7,
-        }}
-        content={
-          <MenuContent className="app__header__menu">
-            <MenuContentItem
-              className="app__header__menu__item"
-              onClick={showAppInfo}
-            >
-              About
-            </MenuContentItem>
-            <MenuContentItem
-              className="app__header__menu__item"
-              onClick={openHelp}
-            >
-              Help...
-            </MenuContentItem>
-            <MenuContentItem
-              className="app__header__menu__item"
-              disabled={!appDocUrl}
-              onClick={goToDocumentation}
-            >
-              See Documentation
-            </MenuContentItem>
-            <MenuContentDivider />
-            <MenuContentItem
-              className="app__header__menu__item"
-              onClick={goToWorkspaceSetup}
-            >
-              Back to workspace setup
-            </MenuContentItem>
-          </MenuContent>
-        }
-      >
-        <div className="activity-bar__menu">
-          <button
-            className="activity-bar__menu-item"
-            tabIndex={-1}
-            onClick={showMenuDropdown}
-            title="Menu"
-          >
-            <MenuIcon />
-          </button>
-        </div>
-      </DropdownMenu>
+      <div className="activity-bar__menu">
+        <DropdownMenu
+          className="activity-bar__menu-item"
+          menuProps={{
+            anchorOrigin: { vertical: 'top', horizontal: 'right' },
+            transformOrigin: { vertical: 'top', horizontal: 'left' },
+            elevation: 7,
+          }}
+          content={
+            <MenuContent>
+              <MenuContentItem onClick={showAppInfo}>About</MenuContentItem>
+              <MenuContentItem onClick={openHelp}>Help...</MenuContentItem>
+              <MenuContentItem
+                disabled={!appDocUrl}
+                onClick={goToDocumentation}
+              >
+                See Documentation
+              </MenuContentItem>
+              <MenuContentDivider />
+              <MenuContentItem onClick={goToWorkspaceSetup}>
+                Back to workspace setup
+              </MenuContentItem>
+            </MenuContent>
+          }
+        >
+          <MenuIcon />
+        </DropdownMenu>
+      </div>
       <LegendStudioAppInfo open={openAppInfo} closeModal={hideAppInfo} />
     </>
   );
@@ -373,7 +341,7 @@ export const ActivityBar = observer(() => {
         ))}
       </div>
       <DropdownMenu
-        className="activity-bar__setting"
+        className="activity-bar__item"
         content={<SettingsMenu />}
         menuProps={{
           anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
@@ -381,13 +349,7 @@ export const ActivityBar = observer(() => {
           elevation: 7,
         }}
       >
-        <button
-          className="activity-bar__item"
-          tabIndex={-1}
-          title="Settings..."
-        >
-          <CogIcon />
-        </button>
+        <CogIcon />
       </DropdownMenu>
     </div>
   );

package/src/components/editor/Editor.tsx

@@ -18,8 +18,7 @@ import { Fragment, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type ResizablePanelHandlerProps,
-  buildReactHotkeysConfiguration,
-  getControlledResizablePanelProps,
+  getCollapsiblePanelGroupProps,
   ResizablePanel,
   ResizablePanelGroup,
   ResizablePanelSplitter,
@@ -29,22 +28,21 @@ import {
 import { AuxiliaryPanel } from './aux-panel/AuxiliaryPanel.js';
 import { SideBar } from './side-bar/SideBar.js';
 import { EditPanel, EditPanelSplashScreen } from './edit-panel/EditPanel.js';
-import { GlobalHotKeys } from 'react-hotkeys';
 import { GrammarTextEditor } from './edit-panel/GrammarTextEditor.js';
 import { StatusBar } from './StatusBar.js';
 import { ActivityBar } from './ActivityBar.js';
-import type {
-  EditorPathParams,
-  GroupEditorPathParams,
-} from '../../stores/LegendStudioRouter.js';
+import type { WorkspaceEditorPathParams } from '../../stores/LegendStudioRouter.js';
 import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
-import { isNonNullable } from '@finos/legend-shared';
+import { guaranteeNonNullable, isNonNullable } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import { useEditorStore, withEditorStore } from './EditorStoreProvider.js';
 import {
   useApplicationStore,
   useApplicationNavigationContext,
   useParams,
+  ActionAlertType,
+  ActionAlertActionType,
+  useCommands,
 } from '@finos/legend-application';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { WorkspaceSyncConflictResolver } from './side-bar/WorkspaceSyncConflictResolver.js';
@@ -53,18 +51,23 @@ import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
 
 export const Editor = withEditorStore(
   observer(() => {
-    const params = useParams<EditorPathParams | GroupEditorPathParams>();
+    const params = useParams<WorkspaceEditorPathParams>();
     const projectId = params.projectId;
-    const workspaceType = (params as { groupWorkspaceId: string | undefined })
-      .groupWorkspaceId
+    const workspaceType = params.groupWorkspaceId
       ? WorkspaceType.GROUP
       : WorkspaceType.USER;
-    const workspaceId =
-      workspaceType === WorkspaceType.GROUP
-        ? (params as GroupEditorPathParams).groupWorkspaceId
-        : (params as EditorPathParams).workspaceId;
+    const workspaceId = guaranteeNonNullable(
+      params.groupWorkspaceId ?? params.workspaceId,
+      `Workspace/group workspace ID is not provided`,
+    );
     const editorStore = useEditorStore();
     const applicationStore = useApplicationStore();
+    const editable =
+      editorStore.graphManagerState.graphBuildState.hasCompleted &&
+      editorStore.isInitialized;
+    const isResolvingConflicts =
+      editorStore.isInConflictResolutionMode &&
+      !editorStore.conflictResolutionState.hasResolvedAllConflicts;
 
     // Extensions
     const extraEditorExtensionComponents = editorStore.pluginManager
@@ -79,7 +82,7 @@ export const Editor = withEditorStore(
         <Fragment key={config.key}>{config.renderer(editorStore)}</Fragment>
       ));
 
-    // Resize
+    // layout
     const { ref, width, height } = useResizeDetector<HTMLDivElement>();
     // These create snapping effect on panel resizing
     const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
@@ -87,12 +90,29 @@ export const Editor = withEditorStore(
         (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
           .width,
       );
-
     const resizeAuxPanel = (handleProps: ResizablePanelHandlerProps): void =>
       editorStore.auxPanelDisplayState.setSize(
         (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
           .height,
       );
+    const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      editorStore.sideBarDisplayState.size === 0,
+      {
+        onStopResize: resizeSideBar,
+        size: editorStore.sideBarDisplayState.size,
+      },
+    );
+    const auxCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+      editorStore.auxPanelDisplayState.size === 0,
+      {
+        onStopResize: resizeAuxPanel,
+        size: editorStore.auxPanelDisplayState.size,
+      },
+    );
+    const maximizedAuxCollapsiblePanelGroupProps =
+      getCollapsiblePanelGroupProps(
+        editorStore.auxPanelDisplayState.isMaximized,
+      );
 
     useEffect(() => {
       if (ref.current) {
@@ -100,15 +120,10 @@ export const Editor = withEditorStore(
       }
     }, [editorStore, ref, height, width]);
 
-    // Hotkeys
-    const [hotkeyMapping, hotkeyHandlers] = buildReactHotkeysConfiguration(
-      editorStore.hotkeys,
-    );
-
-    // Cleanup the editor
-    useEffect(() => (): void => editorStore.cleanUp(), [editorStore]);
-
-    // Initialize the app
+    // initialize
+    useEffect(() => {
+      editorStore.internalizeEntityPath(params);
+    }, [editorStore, params]);
     useEffect(() => {
       flowResult(
         editorStore.initialize(projectId, workspaceId, workspaceType),
@@ -116,165 +131,113 @@ export const Editor = withEditorStore(
     }, [editorStore, applicationStore, projectId, workspaceId, workspaceType]);
 
     useEffect(() => {
-      applicationStore.navigator.blockPlatformNavigation([
-        (): boolean =>
-          editorStore.isInConflictResolutionMode ||
-          editorStore.localChangesState.hasUnpushedChanges,
-      ]);
+      applicationStore.navigator.blockNavigation(
+        [
+          (): boolean =>
+            editorStore.isInConflictResolutionMode ||
+            editorStore.localChangesState.hasUnpushedChanges,
+        ],
+        (onProceed: () => void): void => {
+          applicationStore.setActionAlertInfo({
+            // TODO?: should we make this message generic like the `BeforeUnloadEvent` message?
+            message: editorStore.isInConflictResolutionMode
+              ? 'You have not accepted the conflict resolution, the current resolution will be discarded. Leave anyway?'
+              : 'You have unpushed changes. Leave anyway?',
+            type: ActionAlertType.CAUTION,
+            actions: [
+              {
+                label: 'Leave this page',
+                type: ActionAlertActionType.PROCEED_WITH_CAUTION,
+                handler: (): void => onProceed(),
+              },
+              {
+                label: 'Stay on this page',
+                type: ActionAlertActionType.PROCEED,
+                default: true,
+              },
+            ],
+          });
+        },
+      );
       return (): void => {
-        applicationStore.navigator.unblockPlatformNavigation();
+        applicationStore.navigator.unblockNavigation();
       };
     }, [editorStore, applicationStore]);
 
-    // Route Navigation Blocking
-    // See https://medium.com/@michaelchan_13570/using-react-router-v4-prompt-with-custom-modal-component-ca839f5faf39
-    // const [blockedLocation, setBlockedLocation] = useState<
-    //   Location | undefined
-    // >();
-    // const retryBlockedLocation = useCallback(
-    //   (allowedNavigation: boolean): void => {
-    //     if (allowedNavigation && blockedLocation) {
-    //       applicationStore.navigator.goToLocation(blockedLocation.pathname);
-    //     }
-    //   },
-    //   [blockedLocation, applicationStore],
-    // );
-    // // NOTE: we have to use `useStateWithCallback` here because we want to guarantee that we call `history.push(blockedLocation.pathname)`
-    // // after confirmedAllowNavigation is flipped, otherwise we would end up in the `false` case of handleBlockedNavigation again!
-    // // Another way to go about this is to use `setTimeout(() => history.push(...), 0)` but it can potentially be more error-prone
-    // // See https://www.robinwieruch.de/react-usestate-callback
-    // const [confirmedAllowNavigation, setConfirmedAllowNavigation] =
-    //   useStateWithCallback<boolean>(false, retryBlockedLocation);
-    // const onNavigationChangeIndicator = Boolean(
-    //   editorStore.changeDetectionState.workspaceLocalLatestRevisionState.changes
-    //     .length,
-    // );
-    // const handleRouteNavigationBlocking = (nextLocation: Location): boolean => {
-    //   // NOTE: as long as we're in conflict resolution, we want this block to be present
-    //   const showAlert =
-    //     editorStore.isInConflictResolutionMode ||
-    //     editorStore.hasUnpushedChanges;
-    //   if (
-    //     !editorStore.ignoreNavigationBlocking &&
-    //     !confirmedAllowNavigation &&
-    //     showAlert
-    //   ) {
-    //     editorStore.setActionAlertInfo({
-    //       message: editorStore.isInConflictResolutionMode
-    //         ? 'You have not accepted the conflict resolution, the current resolution will be discarded. Leave anyway?'
-    //         : 'You have unpushed changes. Leave anyway?',
-    //       type: ActionAlertType.CAUTION,
-    //       onEnter: (): void => editorStore.setBlockGlobalHotkeys(true),
-    //       onClose: (): void => editorStore.setBlockGlobalHotkeys(false),
-    //       actions: [
-    //         {
-    //           label: 'Leave this page',
-    //           type: ActionAlertActionType.PROCEED_WITH_CAUTION,
-    //           handler: (): void => setConfirmedAllowNavigation(true),
-    //         },
-    //         {
-    //           label: 'Stay on this page',
-    //           type: ActionAlertActionType.PROCEED,
-    //           default: true,
-    //           handler: (): void => setBlockedLocation(undefined),
-    //         },
-    //       ],
-    //     });
-    //     setBlockedLocation(nextLocation);
-    //     return false;
-    //   }
-    //   // Reset the confirm flag and the blocked location here
-    //   setBlockedLocation(undefined);
-    //   setConfirmedAllowNavigation(false);
-    //   return true;
-    // };
-    const editable =
-      editorStore.graphManagerState.graphBuildState.hasCompleted &&
-      editorStore.isInitialized;
-    const isResolvingConflicts =
-      editorStore.isInConflictResolutionMode &&
-      !editorStore.conflictResolutionState.hasResolvedAllConflicts;
-
     useApplicationNavigationContext(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EDITOR,
     );
 
+    useCommands(editorStore);
+
+    // Cleanup the editor
+    useEffect(() => (): void => editorStore.cleanUp(), [editorStore]);
+
     return (
       <div className="app__page">
         <div className="editor">
-          <GlobalHotKeys
-            keyMap={hotkeyMapping}
-            handlers={hotkeyHandlers}
-            allowChanges={true}
-          >
-            <div className="editor__body">
-              <ActivityBar />
-              <div ref={ref} className="editor__content-container">
-                <div className="editor__content">
-                  <ResizablePanelGroup orientation="vertical">
-                    <ResizablePanel
-                      {...getControlledResizablePanelProps(
-                        editorStore.sideBarDisplayState.size === 0,
-                        {
-                          onStopResize: resizeSideBar,
-                          size: editorStore.sideBarDisplayState.size,
-                        },
-                      )}
-                      direction={1}
-                    >
-                      <SideBar />
-                    </ResizablePanel>
-                    <ResizablePanelSplitter />
-                    <ResizablePanel minSize={300}>
-                      <ResizablePanelGroup orientation="horizontal">
-                        <ResizablePanel
-                          {...getControlledResizablePanelProps(
-                            editorStore.auxPanelDisplayState.isMaximized,
-                          )}
-                        >
-                          {(isResolvingConflicts || editable) &&
-                            editorStore.isInFormMode && <EditPanel />}
-                          {editable && editorStore.isInGrammarTextMode && (
-                            <GrammarTextEditor />
-                          )}
-                          {!editable && <EditPanelSplashScreen />}
-                        </ResizablePanel>
-                        <ResizablePanelSplitter>
-                          <ResizablePanelSplitterLine
-                            color={
-                              editorStore.auxPanelDisplayState.isMaximized
-                                ? 'transparent'
-                                : 'var(--color-dark-grey-250)'
-                            }
-                          />
-                        </ResizablePanelSplitter>
-                        <ResizablePanel
-                          {...getControlledResizablePanelProps(
-                            editorStore.auxPanelDisplayState.size === 0,
-                            {
-                              onStopResize: resizeAuxPanel,
-                              size: editorStore.auxPanelDisplayState.size,
-                            },
-                          )}
-                          direction={-1}
-                        >
-                          <AuxiliaryPanel />
-                        </ResizablePanel>
-                      </ResizablePanelGroup>
-                    </ResizablePanel>
-                  </ResizablePanelGroup>
-                </div>
+          <div className="editor__body">
+            <ActivityBar />
+            <div ref={ref} className="editor__content-container">
+              <div className="editor__content">
+                <ResizablePanelGroup orientation="vertical">
+                  <ResizablePanel
+                    {...sideBarCollapsiblePanelGroupProps.collapsiblePanel}
+                    direction={1}
+                  >
+                    <SideBar />
+                  </ResizablePanel>
+                  <ResizablePanelSplitter />
+                  <ResizablePanel
+                    {...sideBarCollapsiblePanelGroupProps.remainingPanel}
+                    minSize={300}
+                  >
+                    <ResizablePanelGroup orientation="horizontal">
+                      <ResizablePanel
+                        {...maximizedAuxCollapsiblePanelGroupProps.collapsiblePanel}
+                        {...(editorStore.auxPanelDisplayState.size === 0
+                          ? auxCollapsiblePanelGroupProps.remainingPanel
+                          : {})}
+                      >
+                        {(isResolvingConflicts || editable) &&
+                          editorStore.isInFormMode && <EditPanel />}
+                        {editable && editorStore.isInGrammarTextMode && (
+                          <GrammarTextEditor />
+                        )}
+                        {!editable && <EditPanelSplashScreen />}
+                      </ResizablePanel>
+                      <ResizablePanelSplitter>
+                        <ResizablePanelSplitterLine
+                          color={
+                            editorStore.auxPanelDisplayState.isMaximized
+                              ? 'transparent'
+                              : 'var(--color-dark-grey-250)'
+                          }
+                        />
+                      </ResizablePanelSplitter>
+                      <ResizablePanel
+                        {...auxCollapsiblePanelGroupProps.collapsiblePanel}
+                        {...(editorStore.auxPanelDisplayState.isMaximized
+                          ? maximizedAuxCollapsiblePanelGroupProps.remainingPanel
+                          : {})}
+                        direction={-1}
+                      >
+                        <AuxiliaryPanel />
+                      </ResizablePanel>
+                    </ResizablePanelGroup>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
               </div>
             </div>
-            <StatusBar actionsDisabled={!editable} />
-            {editable && <ProjectSearchCommand />}
-            {editorStore.localChangesState.workspaceSyncState
-              .workspaceSyncConflictResolutionState.showModal && (
-              <WorkspaceSyncConflictResolver />
-            )}
-            <EmbeddedQueryBuilder />
-            {extraEditorExtensionComponents}
-          </GlobalHotKeys>
+          </div>
+          <StatusBar actionsDisabled={!editable} />
+          {editable && <ProjectSearchCommand />}
+          {editorStore.localChangesState.workspaceSyncState
+            .workspaceSyncConflictResolutionState.showModal && (
+            <WorkspaceSyncConflictResolver />
+          )}
+          <EmbeddedQueryBuilder />
+          {extraEditorExtensionComponents}
         </div>
       </div>
     );

package/src/components/editor/StatusBar.tsx

@@ -31,31 +31,30 @@ import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
 import {
   generateSetupRoute,
-  type EditorPathParams,
-  type GroupEditorPathParams,
+  type WorkspaceEditorPathParams,
 } from '../../stores/LegendStudioRouter.js';
 import { flowResult } from 'mobx';
 import { useEditorStore } from './EditorStoreProvider.js';
 import { WorkspaceType } from '@finos/legend-server-sdlc';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 import { useParams } from '@finos/legend-application';
+import { guaranteeNonNullable } from '@finos/legend-shared';
 
 export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
   const { actionsDisabled } = props;
-  const params = useParams<EditorPathParams | GroupEditorPathParams>();
+  const params = useParams<WorkspaceEditorPathParams>();
   const editorStore = useEditorStore();
   const applicationStore = useLegendStudioApplicationStore();
   const isInConflictResolutionMode = editorStore.isInConflictResolutionMode;
   // SDLC
   const projectId = params.projectId;
-  const workspaceType = (params as { groupWorkspaceId: string | undefined })
-    .groupWorkspaceId
+  const workspaceType = params.groupWorkspaceId
     ? WorkspaceType.GROUP
     : WorkspaceType.USER;
-  const workspaceId =
-    workspaceType === WorkspaceType.GROUP
-      ? (params as GroupEditorPathParams).groupWorkspaceId
-      : (params as EditorPathParams).workspaceId;
+  const workspaceId = guaranteeNonNullable(
+    params.groupWorkspaceId ?? params.workspaceId,
+    `Workspace/group workspace ID is not provided`,
+  );
   const currentProject = editorStore.sdlcState.currentProject;
   const goToWorkspaceUpdater = (): void =>
     editorStore.setActiveActivity(
@@ -155,8 +154,10 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             title="Go back to workspace setup using the specified project"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(projectId),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(projectId),
+                ),
               )
             }
           >
@@ -168,8 +169,10 @@ export const StatusBar = observer((props: { actionsDisabled: boolean }) => {
             title="Go back to workspace setup using the specified workspace"
             tabIndex={-1}
             onClick={(): void =>
-              applicationStore.navigator.goToLocation(
-                generateSetupRoute(projectId, workspaceId, workspaceType),
+              applicationStore.navigator.visitAddress(
+                applicationStore.navigator.generateAddress(
+                  generateSetupRoute(projectId, workspaceId, workspaceType),
+                ),
               )
             }
           >

package/src/components/editor/aux-panel/AuxiliaryPanel.tsx

@@ -57,7 +57,7 @@ export const AuxiliaryPanel = observer(() => {
       mode: AUX_PANEL_MODE.DEV_TOOL,
       name: 'DEVELOPER TOOLS',
       icon: undefined,
-      isVisible: editorStore.isDevToolEnabled,
+      isVisible: true,
     },
   };
 

package/src/components/editor/command-center/ProjectSearchCommand.tsx

@@ -98,6 +98,8 @@ export const ProjectSearchCommand = observer(() => {
       <div className="modal search-modal modal--dark">
         <div className="project-search-command">
           <DropdownMenu
+            className="project-search-command__type"
+            title="Choose Element Type..."
             content={
               <div className="project-search-command__options">
                 <div
@@ -118,22 +120,16 @@ export const ProjectSearchCommand = observer(() => {
               </div>
             }
           >
-            <button
-              className="project-search-command__type"
-              tabIndex={-1}
-              title="Choose Element Type..."
-            >
-              <div className="project-search-command__type__label">
-                {elementType ? (
-                  getElementTypeIcon(editorStore, elementType)
-                ) : (
-                  <MoreHorizontalIcon />
-                )}
-              </div>
-              <div className="project-search-command__type__selector">
-                <CaretDownIcon />
-              </div>
-            </button>
+            <div className="project-search-command__type__label">
+              {elementType ? (
+                getElementTypeIcon(editorStore, elementType)
+              ) : (
+                <MoreHorizontalIcon />
+              )}
+            </div>
+            <div className="project-search-command__type__selector">
+              <CaretDownIcon />
+            </div>
           </DropdownMenu>
           <CustomSelectorInput
             ref={selectorRef}