feat: Basic context menu

automation/webpack.common.ts

@@ -71,6 +71,10 @@ export default <Webpack.Configuration>{
         }, {
             test: /\.(woff2|ttf|png|svg)$/,
             loader: 'file-loader'
+        }, {
+            test: /\.mjs$/,
+            include: /node_modules/,
+            type: "javascript/auto"
         }, {
             test: /\.css$/,
             use: ['style-loader', 'css-loader']

package.json

@@ -121,6 +121,7 @@
     "react": "^16.14.0",
     "react-autosuggest": "^10.0.4",
     "react-beautiful-dnd": "^12.2.0",
+    "react-contexify": "^6.0.0",
     "react-dom": "^16.14.0",
     "react-hotkeys-hook": "^2.1.3",
     "react-monaco-editor": "^0.45.0",

src/components/account/pro-placeholders.tsx

@@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react";
 import { styled } from "../../styles";
 import { Icon } from "../../icons";
 
-import { UiStore } from "../../model/ui-store";
+import { UiStore } from "../../model/ui/ui-store";
 
 import { Pill } from "../common/pill";
 import { UnstyledButton } from "../common/inputs";

src/components/app.tsx

@@ -16,6 +16,7 @@ import { appHistory } from '../routing';
 import { useHotkeys, Ctrl } from '../util/ui';
 
 import { AccountStore } from '../model/account/account-store';
+import { UiStore } from '../model/ui/ui-store';
 import {
     serverVersion,
     versionSatisfies,
@@ -33,6 +34,7 @@ import { SettingsPage } from './settings/settings-page';
 import { PlanPicker } from './account/plan-picker';
 import { ModalOverlay } from './account/modal-overlay';
 import { CheckoutSpinner } from './account/checkout-spinner';
+import { HtmlContextMenu } from './html-context-menu';
 
 const AppContainer = styled.div<{ inert?: boolean }>`
     display: flex;
@@ -82,8 +84,12 @@ const AppKeyboardShortcuts = (props: {
 };
 
 @inject('accountStore')
+@inject('uiStore')
 @observer
-class App extends React.Component<{ accountStore: AccountStore }> {
+class App extends React.Component<{
+    accountStore: AccountStore,
+    uiStore: UiStore
+}> {
 
     @computed
     get canVisitSettings() {
@@ -198,6 +204,11 @@ class App extends React.Component<{ accountStore: AccountStore }> {
             cancelCheckout
         } = this.props.accountStore;
 
+        const {
+            contextMenuState,
+            clearHtmlContextMenu
+        } = this.props.uiStore;
+
         return <LocationProvider history={appHistory}>
             <AppKeyboardShortcuts
                 navigate={appHistory.navigate}
@@ -242,13 +253,21 @@ class App extends React.Component<{ accountStore: AccountStore }> {
                     onCancel={cancelCheckout}
                 />
             }
+
+            {
+                contextMenuState &&
+                    <HtmlContextMenu
+                        menuState={contextMenuState}
+                        onHidden={clearHtmlContextMenu}
+                    />
+            }
         </LocationProvider>;
     }
 }
 
 // Annoying cast required to handle the store prop nicely in our types
 const AppWithStoreInjected = (
-    App as unknown as WithInjected<typeof App, 'accountStore'>
+    App as unknown as WithInjected<typeof App, 'accountStore' | 'uiStore'>
 );
 
 export { AppWithStoreInjected as App };

src/components/common/copy-button.tsx

@@ -2,13 +2,11 @@ import * as React from 'react';
 
 import { Icon } from "../../icons";
 import { styled } from '../../styles';
-import { logError } from '../../errors';
 
 import { clickOnEnter } from '../component-utils';
 import { PillButton } from './pill';
 import { IconButton } from './icon-button';
-
-const clipboardSupported = !!navigator.clipboard;
+import { copyToClipboard } from '../../util/ui';
 
 const CopyIconButton = styled(IconButton)`
     color: ${p => p.theme.mainColor};
@@ -49,8 +47,6 @@ export const CopyButtonIcon = (p: {
     content: string,
     onClick: () => void
 }) => {
-    if (!clipboardSupported) return null;
-
     const [success, showSuccess] = useTemporaryFlag();
 
     return <CopyIconButton
@@ -67,8 +63,6 @@ export const CopyButtonIcon = (p: {
 }
 
 export const CopyButtonPill = (p: { content: string, children?: React.ReactNode }) => {
-    if (!clipboardSupported) return null;
-
     const [success, showSuccess] = useTemporaryFlag();
 
     return <PillButton
@@ -85,13 +79,4 @@ export const CopyButtonPill = (p: { content: string, children?: React.ReactNode
         />
         { p.children }
     </PillButton>;
-}
-
-async function copyToClipboard(content: string) {
-    try {
-        await navigator.clipboard!.writeText(content);
-    } catch (e) {
-        console.log('Failed to copy to the clipboard');
-        logError(e);
-    }
 }

src/components/common/text-content.tsx

@@ -5,7 +5,7 @@ import { styled } from "../../styles";
 import { Html } from '../../types';
 import { suggestionIconHtml, warningIconHtml } from '../../icons';
 
-import { fromMarkdown } from '../../model/markdown';
+import { fromMarkdown } from '../../model/ui/markdown';
 
 export const ContentLabel = styled.h2`
     text-transform: uppercase;

src/components/html-context-menu.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { autorun } from 'mobx';
+import { disposeOnUnmount, observer } from 'mobx-react';
+
+import {
+    Menu,
+    Submenu,
+    Separator,
+    Item,
+    contextMenu
+} from 'react-contexify';
+
+import { styled } from '../styles';
+
+import { UnreachableCheck } from '../util/error';
+
+import { ContextMenuItem, ContextMenuState } from '../model/ui/context-menu';
+
+@observer
+export class HtmlContextMenu<T> extends React.Component<{
+    menuState: ContextMenuState<T>,
+    onHidden: () => void
+}> {
+
+    componentDidMount() {
+        // Automatically show the menu when this is rendered:
+        disposeOnUnmount(this, autorun(() => {
+            const menuState = this.props.menuState;
+
+            // Annoyingly, the menu is not listening immediately after the component
+            // is mounted, so we have to delay this slightly:
+            setTimeout(() => {
+                contextMenu.show({
+                    id: 'menu',
+                    event: menuState.event
+                });
+            }, 10);
+        }));
+    }
+
+    render() {
+        return <ThemedMenu
+            id='menu'
+            onVisibilityChange={this.onVisibilityChange}
+        >
+            { this.props.menuState.items.map(this.renderItem) }
+        </ThemedMenu>
+    }
+
+    renderItem = (item: ContextMenuItem<T>, i: number) => {
+        if (item.type === 'separator') {
+            return <Separator key={i} />;
+        } else if (item.type === 'option') {
+            return <Item
+                key={i}
+                onClick={() => item.callback(this.props.menuState.data)}
+                disabled={item.enabled === false}
+            >
+                { item.label }
+            </Item>
+        } else if (item.type === 'submenu') {
+            return <Submenu
+                key={i}
+                label={item.label}
+                disabled={item.enabled === false}
+            >
+                { item.items.map(this.renderItem) }
+            </Submenu>
+        } else throw new UnreachableCheck(item, i => i.type);
+    }
+
+    onVisibilityChange = (visible: boolean) => {
+        if (!visible) this.props.onHidden();
+    };
+
+}
+
+const ThemedMenu = styled(Menu)`
+    --contexify-menu-bgColor: ${p => p.theme.mainLowlightBackground};
+    --contexify-item-color: ${p => p.theme.mainColor};
+    --contexify-separator-color: ${p => p.theme.containerBorder};
+
+    --contexify-rightSlot-color: ${p => p.theme.containerWatermark};
+    --contexify-activeRightSlot-color: ${p => p.theme.mainColor};
+
+    --contexify-arrow-color: ${p => p.theme.containerWatermark};
+    --contexify-activeArrow-color: ${p => p.theme.mainColor};
+
+    --contexify-activeItem-color: #fff;
+    --contexify-activeItem-bgColor: #3498db;
+`;

src/components/intercept/config/electron-config.tsx

@@ -7,7 +7,8 @@ import { Icon } from '../../../icons';
 import { logError } from '../../../errors';
 
 import { Interceptor } from '../../../model/interception/interceptors';
-import { UiStore } from '../../../model/ui-store';
+import { UiStore } from '../../../model/ui/ui-store';
+import { DesktopApi } from '../../../services/desktop-api';
 
 import { uploadFile } from '../../../util/ui';
 import { Button, SecondaryButton, UnstyledButton } from '../../common/inputs';
@@ -120,12 +121,6 @@ function getReadablePath(path: string) {
     }
 }
 
-declare global {
-    interface Window {
-        desktopApi?: { selectApplication: () => Promise<string | undefined> };
-    }
-}
-
 @inject('uiStore')
 @observer
 class ElectronConfig extends React.Component<{
@@ -147,13 +142,9 @@ class ElectronConfig extends React.Component<{
     }
 
     selectApplication = async () => {
-        const useNativePicker = window.desktopApi?.selectApplication;
+        const appPicker = DesktopApi.selectApplication ?? (() => uploadFile('path'));
 
-        const pathToApplication = await(
-            useNativePicker
-                ? window.desktopApi?.selectApplication()
-                : uploadFile('path')
-        );
+        const pathToApplication = await(appPicker());
 
         if (!pathToApplication) {
             this.props.closeSelf();

src/components/intercept/config/existing-terminal-config.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../../services/service-versions';
 
 import { AccountStore } from '../../../model/account/account-store';
-import { UiStore } from '../../../model/ui-store';
+import { UiStore } from '../../../model/ui/ui-store';
 import { InterceptorStore } from '../../../model/interception/interceptor-store';
 import { Interceptor } from '../../../model/interception/interceptors';
 

src/components/settings/settings-page.tsx

@@ -12,7 +12,7 @@ import { styled, Theme, ThemeName } from '../../styles';
 import { Icon, WarningIcon } from '../../icons';
 
 import { AccountStore } from '../../model/account/account-store';
-import { UiStore } from '../../model/ui-store';
+import { UiStore } from '../../model/ui/ui-store';
 import { serverVersion, versionSatisfies, PORT_RANGE_SERVER_RANGE } from '../../services/service-versions';
 
 import { CollapsibleCard, CollapsibleCardHeading } from '../common/card';

src/components/store-powered-theme-provider.tsx

@@ -4,7 +4,7 @@ import { inject, observer } from 'mobx-react';
 import { ThemeProvider } from '../styles';
 import { WithInjected } from '../types';
 
-import { UiStore } from '../model/ui-store';
+import { UiStore } from '../model/ui/ui-store';
 
 const StorePoweredThemeProvider = inject('uiStore')(observer((p: {
     uiStore: UiStore,