added command with interactive dialog

webapp/src/actions.tsx

@@ -0,0 +1,45 @@
+import {AnyAction, Dispatch} from 'redux';
+import {getCurrentChannel} from 'mattermost-redux/selectors/entities/channels';
+import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {GetStateFunc} from 'mattermost-redux/types/actions';
+import {Client4} from 'mattermost-redux/client';
+import {IntegrationTypes} from 'mattermost-redux/action_types';
+
+export function setTriggerId(triggerId: string) {
+    return {
+        type: IntegrationTypes.RECEIVED_DIALOG_TRIGGER_ID,
+        data: triggerId,
+    };
+}
+
+export function triggerRemoveAttachmentsCommand(postID: string) {
+    return (dispatch: Dispatch<AnyAction>, getState: GetStateFunc) => {
+        const command = '/removeattachments ' + postID;
+        clientExecuteCommand(dispatch, getState, command);
+
+        return {data: true};
+    };
+}
+
+export async function clientExecuteCommand(dispatch: Dispatch<AnyAction>, getState: GetStateFunc, command: string) {
+    let currentChannel = getCurrentChannel(getState());
+    const currentTeamId = getCurrentTeamId(getState());
+
+    // Default to town square if there is no current channel (i.e., if Mattermost has not yet loaded)
+    if (!currentChannel) {
+        currentChannel = await Client4.getChannelByName(currentTeamId, 'town-square');
+    }
+
+    const args = {
+        channel_id: currentChannel?.id,
+        team_id: currentTeamId,
+    };
+
+    try {
+        //@ts-ignore Typing in mattermost-redux is wrong
+        const data = await Client4.executeCommand(command, args);
+        dispatch(setTriggerId(data?.trigger_id));
+    } catch (error) {
+        console.error(error); //eslint-disable-line no-console
+    }
+}

webapp/src/index.tsx

@@ -1,15 +1,31 @@
 import {Store, Action} from 'redux';
 
-import {GlobalState} from '@mattermost/types/lib/store';
+import {GlobalState} from 'mattermost-redux/types/store';
+import {getPost} from 'mattermost-redux/selectors/entities/posts';
 
 import manifest from '@/manifest';
 
 import {PluginRegistry} from '@/types/mattermost-webapp';
 
+import {triggerRemoveAttachmentsCommand} from './actions';
+
 export default class Plugin {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
     public async initialize(registry: PluginRegistry, store: Store<GlobalState, Action<Record<string, unknown>>>) {
         // @see https://developers.mattermost.com/extend/plugins/webapp/reference/
+        registry.registerPostDropdownMenuAction(
+            'Remove attachments',
+            async (postID) => {
+                store.dispatch(triggerRemoveAttachmentsCommand(postID) as any);
+            },
+            (postID) => {
+                const state = store.getState();
+                const post = getPost(state, postID);
+
+                // Don't show up if the post has no attachments. Permissions are checked server-side.
+                return typeof post.file_ids?.length !== 'undefined' && post.file_ids?.length > 0;
+            },
+        );
     }
 }
 

webapp/src/types/mattermost-webapp/index.d.ts

@@ -1,5 +1,9 @@
+type PostMenuAction = (postID: string) => void;
+type PostMenuFilter = (postID: string) => boolean;
+
 export interface PluginRegistry {
     registerPostTypeComponent(typeName: string, component: React.ElementType)
+    registerPostDropdownMenuAction(text: string, action?: PostMenuAction, filter?: PostMenuFilter)
 
     // Add more if needed from https://developers.mattermost.com/extend/plugins/webapp/reference
 }