Correctly use new widgetcontextmenu component

Author: MarcWadai

packages/shared-components/jest-sonar.xml

@@ -1,11 +1,9 @@
 /*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 Mikhail Aheichyk
-Copyright 2023 Nordeck IT + Consulting GmbH.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 
 import React from "react";
 import { screen, render } from "jest-matrix-react";
@@ -20,12 +18,10 @@ import TriggerIcon from "@vector-im/compound-design-tokens/assets/web/icons/over
 const { Default, OnlyBasicModification } = composeStories(stories);
 
 describe("<WidgetContextMenuView />", () => {
-
     afterEach(() => {
-        jest.resetAllMocks();
+        jest.clearAllMocks();
     });
 
-
     it("renders widget contextmenu with all options", () => {
         const { container } = render(<Default />);
         expect(container).toMatchSnapshot();
@@ -62,7 +58,7 @@ describe("<WidgetContextMenuView />", () => {
         public onRevokeClick = onRevokeClick;
         public onFinished = onFinished;
         public onMoveButton = onMoveButton;
-    };
+    }
 
     const defaultValue: WidgetContextMenuSnapshot = {
         showStreamAudioStreamButton: true,
@@ -97,10 +93,10 @@ describe("<WidgetContextMenuView />", () => {
 
         await userEvent.click(screen.getByRole("menuitem", { name: "Revoke permissions" }));
         expect(onRevokeClick).toHaveBeenCalled();
-        
+
         await userEvent.click(screen.getByRole("menuitem", { name: "Remove for everyone" }));
         expect(onDeleteClick).toHaveBeenCalled();
-        
+
         await userEvent.click(screen.getByRole("menuitem", { name: "Move left" }));
         expect(onMoveButton).toHaveBeenCalledWith(-1);
 

packages/shared-components/src/right-panel/WidgetContextMenu/WidgetContextMenuView.test.tsx

@@ -38,7 +38,7 @@ import Spinner from "./Spinner";
 import dis from "../../../dispatcher/dispatcher";
 import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import SettingsStore from "../../../settings/SettingsStore";
-import { aboveLeftOf, ContextMenuButton } from "../../structures/ContextMenu";
+import { ContextMenuButton } from "../../structures/ContextMenu";
 import PersistedElement, { getPersistKey } from "./PersistedElement";
 import { WidgetType } from "../../../widgets/WidgetType";
 import { ElementWidget, StopGapWidget } from "../../../stores/widgets/StopGapWidget";
@@ -132,7 +132,6 @@ interface IState {
     error: Error | null;
     menuDisplayed: boolean;
     requiresClient: boolean;
-    hasContextMenuOptions: boolean;
 }
 
 export default class AppTile extends React.Component<IProps, IState> {
@@ -269,15 +268,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             isUserProfileReady: OwnProfileStore.instance.isProfileInfoFetched,
             error: null,
             menuDisplayed: false,
-            requiresClient: this.determineInitialRequiresClientState(),
-            hasContextMenuOptions: showContextMenu(
-                this.context,
-                this.props.room,
-                newProps.app,
-                newProps.userWidget,
-                !newProps.userWidget,
-                newProps.onDeleteClick,
-            ),
+            requiresClient: this.determineInitialRequiresClientState()
         };
     }
 
@@ -801,28 +792,26 @@ export default class AppTile extends React.Component<IProps, IState> {
                                         <PopoutIcon className="mx_Icon mx_Icon_12 mx_Icon--stroke" />
                                     </AccessibleButton>
                                 )}
-                                {this.state.hasContextMenuOptions && (
-                                    <WidgetContextMenu
-                                        trigger={
-                                            <ContextMenuButton
-                                                className="mx_AppTileMenuBar_widgets_button"
-                                                label={_t("common|options")}
-                                                isExpanded={this.state.menuDisplayed}
-                                                ref={this.contextMenuButton}
-                                                onClick={() => {}}
-                                            >
-                                                <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
-                                            </ContextMenuButton>
-                                        }
-                                        app={this.props.app}
-                                        onFinished={() => this.state.menuDisplayed ? this.closeContextMenu() : this.onContextMenuClick()}
-                                        showUnpin={!this.props.userWidget}
-                                        userWidget={this.props.userWidget}
-                                        onEditClick={this.props.onEditClick}
-                                        onDeleteClick={this.props.onDeleteClick}
-                                        menuDisplayed={this.state.menuDisplayed}
-                                    />
-                                )}
+                                <WidgetContextMenu
+                                    trigger={
+                                        <ContextMenuButton
+                                            className="mx_AppTileMenuBar_widgets_button"
+                                            label={_t("common|options")}
+                                            isExpanded={this.state.menuDisplayed}
+                                            ref={this.contextMenuButton}
+                                            onClick={this.onContextMenuClick}
+                                        >
+                                            <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
+                                        </ContextMenuButton>
+                                    }
+                                    app={this.props.app}
+                                    onFinished={this.closeContextMenu}
+                                    showUnpin={!this.props.userWidget}
+                                    userWidget={this.props.userWidget}
+                                    onEditClick={this.props.onEditClick}
+                                    onDeleteClick={this.props.onDeleteClick}
+                                    menuDisplayed={this.state.menuDisplayed}
+                                />
                             </span>
                         </div>
                     )}

src/components/views/elements/AppTile.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, useEffect, useMemo, useRef, useState } from "react";
+import React, { type JSX, useEffect, useMemo, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 import { Button, Link, Separator, Text } from "@vector-im/compound-web";
@@ -16,8 +16,7 @@ import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/e
 import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
 import { _t } from "../../../languageHandler";
-import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
-import UIStore from "../../../stores/UIStore";
+import { useContextMenu } from "../../structures/ContextMenu";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { type IApp } from "../../../stores/WidgetStore";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@@ -107,15 +106,15 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
             {canModifyWidget && (
                 <WidgetContextMenu
                     app={app}
-                    onFinished={() => menuDisplayed ? closeMenu() : openMenu()}
+                    onFinished={closeMenu}
                     menuDisplayed={menuDisplayed}
                     trigger={
                         <AccessibleButton
                             ref={handle}
                             className="mx_ExtensionsCard_app_options"
-                            onClick={() => {}}
+                            onClick={openMenu}
                             title={_t("common|options")}
-                         />
+                        />
                     }
                 />
             )}
@@ -126,8 +125,6 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
                 title={pinTitle}
                 disabled={cannotPin}
             />
-
-            {/* {contextMenu} */}
         </div>
     );
 };

src/components/views/right_panel/ExtensionsCard.tsx

@@ -45,20 +45,20 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
     // Don't render anything as we are about to transition
     if (!app || !isRight) return null;
 
-    const contextMenu : JSX.Element = (
+    const contextMenu: JSX.Element = (
         <WidgetContextMenu
             trigger={
                 <ContextMenuButton
                     className="mx_BaseCard_header_title_button--option"
                     ref={handle}
-                    onClick={() => {}}
+                    onClick={openMenu}
                     isExpanded={menuDisplayed}
                     label={_t("common|options")}
                 />
             }
-            onFinished={() => (menuDisplayed ? closeMenu : openMenu)}
+            onFinished={closeMenu}
             app={app}
-            menuDisplayed={true}
+            menuDisplayed={menuDisplayed}
         />
     );
 

src/components/views/right_panel/WidgetCard.tsx

@@ -218,6 +218,7 @@ export class WidgetContextMenuViewModel
             } else if (this._room) {
                 WidgetUtils.editWidget(this._room, this._app);
             }
+            console.log("finished edit", this.props.onFinished);
             this.props.onFinished!();
         };
     }
@@ -279,5 +280,22 @@ export function WidgetContextMenu(props: WidgetContextMenuProps): ReactElement {
         };
     }, [vm]);
 
-    return <WidgetContextMenuView vm={vm} />;
+    const {
+        showStreamAudioStreamButton,
+        showEditButton,
+        showRevokeButton,
+        showDeleteButton,
+        showSnapshotButton,
+        showMoveButtons,
+    } = vm.getSnapshot();
+
+    const hasContextMenuOptions = 
+        showStreamAudioStreamButton ||
+        showEditButton ||
+        showRevokeButton ||
+        showDeleteButton ||
+        showSnapshotButton ||
+        showMoveButtons.some(Boolean);
+
+    return hasContextMenuOptions ? <WidgetContextMenuView vm={vm} /> : <></>;
 }