implement RequiresClient capability Fix #15744

On request, Element disables the Popout button, this guarantees that the widgetApi is available.

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -106,6 +106,7 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
 
             return 0;
         });
+        // const filteredCapabilites = //TODO this would be where the NoPopout capability text can be hidden and approved by default
         const checkboxRows = orderedCapabilities.map(([cap, isChecked], i) => {
             const text = CapabilityText.for(cap, this.props.widgetKind);
             const byline = text.byline

src/components/views/elements/AppTile.tsx

@@ -84,6 +84,7 @@ interface IState {
     error: Error;
     menuDisplayed: boolean;
     widgetPageTitle: string;
+    noPopout: boolean;
 }
 
 import { logger } from "matrix-js-sdk/src/logger";
@@ -155,6 +156,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             error: null,
             menuDisplayed: false,
             widgetPageTitle: this.props.widgetPageTitle,
+            noPopout: true,
         };
     }
 
@@ -295,6 +297,9 @@ export default class AppTile extends React.Component<IProps, IState> {
         if (WidgetType.JITSI.matches(this.props.app.type)) {
             this.sgWidget.widgetApi.transport.send(ElementWidgetActions.ClientReady, {});
         }
+        this.setState({
+            noPopout: this.sgWidget.widgetApi.hasCapability(MatrixCapabilities.RequiresClient)
+        });
     };
 
     private onAction = (payload): void => {
@@ -512,7 +517,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                             { this.props.showTitle && this.getTileTitle() }
                         </span>
                         <span className="mx_AppTileMenuBarWidgets">
-                            { this.props.showPopout && <AccessibleButton
+                            {(this.props.showPopout && !this.state.noPopout) && <AccessibleButton
                                 className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
                                 title={_t('Popout widget')}
                                 onClick={this.onPopoutWidgetClick}

src/stores/widgets/StopGapWidgetDriver.ts

@@ -73,7 +73,7 @@ export class StopGapWidgetDriver extends WidgetDriver {
         // Always allow screenshots to be taken because it's a client-induced flow. The widget can't
         // spew screenshots at us and can't request screenshots of us, so it's up to us to provide the
         // button if the widget says it supports screenshots.
-        this.allowedCapabilities = new Set([...allowedCapabilities, MatrixCapabilities.Screenshots]);
+        this.allowedCapabilities = new Set([...allowedCapabilities, MatrixCapabilities.Screenshots, MatrixCapabilities.RequiresClient]);
 
         // Grant the permissions that are specific to given widget types
         if (WidgetType.JITSI.matches(this.forWidget.type) && forWidgetKind === WidgetKind.Room) {

src/widgets/CapabilityText.tsx

@@ -74,6 +74,9 @@ export class CapabilityText {
         [MatrixCapabilities.MSC2931Navigate]: {
             [GENERIC_WIDGET_KIND]: _td("Change which room, message, or user you're viewing"),
         },
+        [MatrixCapabilities.RequiresClient]: {
+            [GENERIC_WIDGET_KIND]: _td("Prohibits Element from showing the widget popout button."),
+        },
     };
 
     private static stateSendRecvCaps: ISendRecvStaticCapText = {