Insert menu context menu

src/frontend/app-common/app-menu.tsx

@@ -1,5 +1,7 @@
-import { ReactNode } from "react";
-import { FloatingPosition, Menu } from "@mantine/core";
+import { PropsWithChildren, ReactNode } from "react";
+import { FloatingPosition, Menu, ActionIcon } from "@mantine/core";
+import { IconDots } from "@tabler/icons-react";
+import { IconSize } from "../common/style-constants";
 
 interface AppContextMenuProps {
     menuItems: ReactNode;
@@ -56,3 +58,22 @@ export function AppContextMenu(props: AppContextMenuProps): ReactNode {
         </Menu>
     );
 }
+
+/**
+ * An explicit button which opens a menu with the given items. Used alongside
+ * the right-click context menu so the menu is reachable without a right-click.
+ */
+export function MenuButton(props: PropsWithChildren): ReactNode {
+    return (
+        <AppContextMenu controlledByButton menuItems={props.children}>
+            <ActionIcon
+                variant="subtle"
+                color="gray"
+                title="View options"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <IconDots size={IconSize.MEDIUM} />
+            </ActionIcon>
+        </AppContextMenu>
+    );
+}

src/frontend/cards/card-components.tsx

@@ -1,6 +1,5 @@
-import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
+import { Group, Menu, Table, Text } from "@mantine/core";
 import {
-    IconDots,
     IconExternalLink,
     IconEyeOff,
     IconLink,
@@ -11,11 +10,11 @@ import {
 import { IconColor, IconSize } from "../common/style-constants";
 import { copyUrlToClipboard, makeUrl, openUrlInNewTab } from "../common/url";
 import { PropsWithChildren, ReactNode, useCallback } from "react";
-import { AppContextMenu } from "../app-common/app-menu";
+import { AppContextMenu, MenuButton } from "../app-common/app-menu";
 import { SearchHit } from "../search/search";
 import { SearchHitTitle } from "../search/search-results";
 import { CardThumbnail } from "../insert/thumbnail";
-import { DocumentPath } from "../../shared/onshape-path";
+import { InstancePath, isElementPath } from "../../shared/onshape-path";
 import { openCannotDeriveAssemblyAlert } from "../app/alerts";
 import {
     useInsertMutation,
@@ -30,14 +29,16 @@ import { RequireAccessLevel } from "../api-utils/access-level";
 import { useReloadThumbnailMutation } from "./card-hooks";
 
 interface OpenDocumentItemsProps {
-    path: DocumentPath;
+    path: InstancePath;
+    configuration?: Configuration;
 }
-
 /**
  * Menu items which can be used to open or copy a link to a document.
  */
 export function OpenDocumentItems(props: OpenDocumentItemsProps) {
-    const url = makeUrl(props.path);
+    const url = isElementPath(props.path)
+        ? makeUrl({ ...props.path, configuration: props.configuration })
+        : makeUrl(props.path);
     return (
         <>
             <Menu.Item
@@ -224,25 +225,6 @@ export function ItemRow(props: ItemRowProps): ReactNode {
     );
 }
 
-/**
- * An explicit button which opens a menu with the given items. Used alongside
- * the right-click context menu so the menu is reachable without a right-click.
- */
-export function MenuButton(props: PropsWithChildren): ReactNode {
-    return (
-        <AppContextMenu controlledByButton menuItems={props.children}>
-            <ActionIcon
-                variant="subtle"
-                color="gray"
-                title="View options"
-                onClick={(e) => e.stopPropagation()}
-            >
-                <IconDots size={IconSize.MEDIUM} />
-            </ActionIcon>
-        </AppContextMenu>
-    );
-}
-
 /**
  * Wraps one or more admin-only menu items into an Admin submenu.
  */

src/frontend/cards/insertable-card.tsx

@@ -14,6 +14,7 @@ import {
     getFavoriteForInsertable,
     InsertableOut
 } from "../../shared/api-models";
+import { Configuration } from "../../shared/configuration-models";
 import { ElementType } from "../../shared/types";
 import { SearchHit } from "../search/search";
 import {
@@ -114,26 +115,35 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
 interface InsertableMenuItemsProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
+    inInsertMenu?: boolean;
+    configuration?: Configuration;
 }
 
 export function InsertableMenuItems(
     props: InsertableMenuItemsProps
 ): ReactNode {
-    const { favorite, insertable } = props;
+    const { favorite, insertable, inInsertMenu, configuration } = props;
 
     return (
         <>
-            <QuickInsertItems
-                insertable={insertable}
-                isFavorite={favorite !== undefined}
-            />
-            <Menu.Divider />
+            {!inInsertMenu && (
+                <>
+                    <QuickInsertItems
+                        insertable={insertable}
+                        isFavorite={favorite !== undefined}
+                    />
+                    <Menu.Divider />
+                </>
+            )}
             <FavoriteInsertableItem
                 favorite={favorite}
                 insertable={insertable}
             />
             <Menu.Divider />
-            <OpenDocumentItems path={insertable.path} />
+            <OpenDocumentItems
+                path={insertable.path}
+                configuration={configuration}
+            />
             <AdminOptionsSubmenu>
                 <InsertableAdminContextMenu
                     insertableId={insertable.id}

src/frontend/common/url.tsx

@@ -4,20 +4,19 @@ import {
     ElementPath,
     isInstancePath,
     isElementPath,
-    InstanceType
+    InstanceType,
+    ConfigurablePath,
+    isConfigurablePath
 } from "../../shared/onshape-path";
 import { encodeConfigurationForQuery } from "../../shared/configuration-utils";
 import { notifications } from "@mantine/notifications";
 import { IconLink } from "@tabler/icons-react";
 import { IconSize } from "./style-constants";
 
-export function makeUrl(path: DocumentPath): string;
-export function makeUrl(path: InstancePath): string;
+export function makeUrl(path: ConfigurablePath): string;
 export function makeUrl(path: ElementPath): string;
-export function makeUrl(
-    path: ElementPath,
-    configuration?: Record<string, string>
-): string;
+export function makeUrl(path: InstancePath): string;
+export function makeUrl(path: DocumentPath): string;
 export function makeUrl(
     path: DocumentPath,
     configuration?: Record<string, string>
@@ -29,12 +28,14 @@ export function makeUrl(
     if (isElementPath(path)) {
         url += `/e/${path.elementId}`;
     }
-    if (configuration) {
-        url += "?configuration=" + encodeConfigurationForQuery(configuration);
+    const config =
+        configuration ??
+        (isConfigurablePath(path) ? path.configuration : undefined);
+    if (config) {
+        url += "?configuration=" + encodeConfigurationForQuery(config);
     }
     return url;
 }
-
 export interface ConfigurationPath {
     configuration?: string;
 }

src/frontend/insert/insert-menu.tsx

@@ -16,6 +16,8 @@ import {
     NotificationAction,
     renderNotification
 } from "../common/notifications";
+import { MenuButton } from "../app-common/app-menu";
+import { InsertableMenuItems } from "../cards/insertable-card";
 import { ConfigurationWrapper } from "./configurations";
 import { useInsertMutation } from "./insert-hooks";
 import { Configuration } from "../../shared/configuration-models";
@@ -94,6 +96,14 @@ function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
             {parameters}
             <Group justify="space-between" mt="md" wrap="nowrap">
                 <FavoriteButton favorite={favorite} insertable={insertable} />
+                <MenuButton>
+                    <InsertableMenuItems
+                        favorite={favorite}
+                        insertable={insertable}
+                        inInsertMenu
+                        configuration={configuration}
+                    />
+                </MenuButton>
                 <InsertButtons
                     insertable={insertable}
                     configuration={configuration}

src/frontend/routes/app/groups/$groupId.tsx

@@ -24,8 +24,8 @@ import { hasEditorAccess } from "../../../../shared/types";
 import { filterInsertables } from "../../../search/filter";
 import { GroupMenuItems } from "../../../groups/group-card";
 import { InsertableCard } from "../../../cards/insertable-card";
-import { MenuButton, ItemTable } from "../../../cards/card-components";
-import { AppContextMenu } from "../../../app-common/app-menu";
+import { ItemTable } from "../../../cards/card-components";
+import { AppContextMenu, MenuButton } from "../../../app-common/app-menu";
 import { SearchCallout } from "../../../search/search-errors";
 import {
     PageError,

src/shared/onshape-path.ts

@@ -18,6 +18,10 @@ export interface PartPath extends ElementPath {
     partId: string;
 }
 
+export interface ConfigurablePath extends ElementPath {
+    configuration?: Record<string, string>;
+}
+
 export function isDocumentPath(path: any): path is DocumentPath {
     return (
         typeof path === "object" &&
@@ -44,6 +48,15 @@ export function isPartPath(path: DocumentPath): path is PartPath {
     return isElementPath(path) && (path as PartPath).partId !== undefined;
 }
 
+export function isConfigurablePath(
+    path: DocumentPath
+): path is ConfigurablePath {
+    return (
+        isElementPath(path) &&
+        (path as ConfigurablePath).configuration !== undefined
+    );
+}
+
 export function toDocumentApiPath(path: DocumentPath): string {
     return `/d/${path.documentId}`;
 }