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 { ConfigurablePath, InstancePath } from "../../shared/onshape-path";
 import { openCannotDeriveAssemblyAlert } from "../app/alerts";
 import {
     useInsertMutation,
@@ -30,9 +29,8 @@ import { RequireAccessLevel } from "../api-utils/access-level";
 import { useReloadThumbnailMutation } from "./card-hooks";
 
 interface OpenDocumentItemsProps {
-    path: DocumentPath;
+    path: InstancePath | ConfigurablePath;
 }
-
 /**
  * Menu items which can be used to open or copy a link to a document.
  */
@@ -224,25 +222,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,32 @@ 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 }} />
             <AdminOptionsSubmenu>
                 <InsertableAdminContextMenu
                     insertableId={insertable.id}

src/frontend/common/url.tsx

@@ -4,60 +4,49 @@ 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: DocumentPath,
-    configuration?: Record<string, string>
-): string {
+export function makeUrl(path: InstancePath): string;
+export function makeUrl(path: DocumentPath): string {
     let url = `https://cad.onshape.com/documents/${path.documentId}`;
     if (isInstancePath(path)) {
         url += `/${path.instanceType}/${path.instanceId}`;
     }
     if (isElementPath(path)) {
         url += `/e/${path.elementId}`;
     }
-    if (configuration) {
-        url += "?configuration=" + encodeConfigurationForQuery(configuration);
+    if (isConfigurablePath(path)) {
+        url +=
+            "?configuration=" + encodeConfigurationForQuery(path.configuration);
     }
     return url;
 }
 
-export interface ConfigurationPath {
-    configuration?: string;
-}
-
 /**
  * Parses an Onshape document URL into an ElementPath.
  * Returns `undefined` if the URL could not be parsed successfully.
  */
-export function parseUrl(
-    urlString: string
-): (ElementPath & ConfigurationPath) | undefined {
+export function parseUrl(urlString: string): ElementPath | undefined {
     try {
         // Example pathname: /documents/769b556baf61d32b18813fd0/w/e6d6c2b3a472b97a7e352949/e/8a0c13d3b2b68a99502dc436
         const url = new URL(urlString);
         const parts = url.pathname.split("/");
-        const configuration =
-            url.searchParams.get("configuration") ?? undefined;
+        // const configuration =
+        //     url.searchParams.get("configuration") ?? undefined;
         return {
             documentId: parts[2],
             instanceId: parts[4],
             instanceType: parts[3] as InstanceType,
-            elementId: parts[6],
-            configuration
+            elementId: parts[6]
         };
     } catch {
         return undefined;

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

@@ -1,3 +1,5 @@
+import { Configuration } from "./configuration-models";
+
 export type InstanceType = "w" | "v" | "m";
 
 export interface DocumentPath {
@@ -18,6 +20,10 @@ export interface PartPath extends ElementPath {
     partId: string;
 }
 
+export interface ConfigurablePath extends ElementPath {
+    configuration: Configuration;
+}
+
 export function isDocumentPath(path: any): path is DocumentPath {
     return (
         typeof path === "object" &&
@@ -44,6 +50,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}`;
 }