Add create run (#9203)

* Add playbook start a run

* UI fixes

* Add i18n

* Address feedback

* Fix typo

Author: larkox

app/components/floating_input/floating_autocomplete_selector/floating_autocomplete_selector.tsx

@@ -172,7 +172,11 @@ function AutoCompleteSelector({
         Promise.all(namePromises).then((names) => {
             setItemText(names.join(', '));
         });
-    }, [dataSource, teammateNameDisplay, intl, options, selected, serverUrl]);
+
+        // We want to run this only in the first render, since it is only for the default value.
+        // Future changes in the selected value will update the itemText accordingly.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     const inputStyle = useMemo(() => {
         const res: StyleProp<ViewStyle> = [style.input];

app/products/playbooks/actions/remote/playbooks.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {forceLogoutIfNecessary} from '@actions/remote/session';
+import NetworkManager from '@managers/network_manager';
+import {getFullErrorMessage} from '@utils/errors';
+import {logDebug} from '@utils/log';
+
+export async function fetchPlaybooks(serverUrl: string, params: FetchPlaybooksParams) {
+    try {
+        const client = NetworkManager.getClient(serverUrl);
+        const playbooks = await client.fetchPlaybooks(params);
+        return {data: playbooks};
+    } catch (error) {
+        logDebug('error on fetchPlaybooks', getFullErrorMessage(error));
+        forceLogoutIfNecessary(serverUrl, error);
+        return {error};
+    }
+}

app/products/playbooks/actions/remote/runs.ts

@@ -136,6 +136,27 @@ export const setOwner = async (serverUrl: string, playbookRunId: string, ownerId
     }
 };
 
+export const createPlaybookRun = async (
+    serverUrl: string,
+    playbook_id: string,
+    owner_user_id: string,
+    team_id: string,
+    name: string,
+    description: string,
+    channel_id?: string,
+    create_public_run?: boolean,
+) => {
+    try {
+        const client = NetworkManager.getClient(serverUrl);
+        const run = await client.createPlaybookRun(playbook_id, owner_user_id, team_id, name, description, channel_id, create_public_run);
+        return {data: run};
+    } catch (error) {
+        logDebug('error on createPlaybookRun', getFullErrorMessage(error));
+        forceLogoutIfNecessary(serverUrl, error);
+        return {error};
+    }
+};
+
 export const postStatusUpdate = async (serverUrl: string, playbookRunID: string, payload: PostStatusUpdatePayload, ids: PostStatusUpdateIds) => {
     try {
         const client = NetworkManager.getClient(serverUrl);

app/products/playbooks/client/rest.ts

@@ -7,15 +7,18 @@ import type ClientBase from '@client/rest/base';
 
 export interface ClientPlaybooksMix {
 
+    // Playbooks
+    fetchPlaybooks: (params: FetchPlaybooksParams) => Promise<FetchPlaybooksReturn>;
+
     // Playbook Runs
     fetchPlaybookRuns: (params: FetchPlaybookRunsParams, groupLabel?: RequestGroupLabel) => Promise<FetchPlaybookRunsReturn>;
     fetchPlaybookRun: (id: string, groupLabel?: RequestGroupLabel) => Promise<PlaybookRun>;
     fetchPlaybookRunMetadata: (id: string) => Promise<PlaybookRunMetadata>;
     setOwner: (playbookRunId: string, ownerId: string) => Promise<void>;
 
     // Run Management
-    // finishRun: (playbookRunId: string) => Promise<any>;
     finishRun: (playbookRunId: string) => Promise<void>;
+    createPlaybookRun: (playbook_id: string, owner_user_id: string, team_id: string, name: string, description: string, channel_id?: string, create_public_run?: boolean) => Promise<PlaybookRun>;
     postStatusUpdate: (playbookRunID: string, payload: PostStatusUpdatePayload, ids: PostStatusUpdateIds) => Promise<void>;
 
     // Checklist Management
@@ -46,6 +49,17 @@ const ClientPlaybooks = <TBase extends Constructor<ClientBase>>(superclass: TBas
         return `${this.getPlaybookRunsRoute()}/${runId}`;
     };
 
+    // Playbooks
+    fetchPlaybooks(params: FetchPlaybooksParams) {
+        const queryParams = buildQueryString({
+            ...params,
+        });
+        return this.doFetch(
+            `${this.getPlaybooksRoute()}/playbooks${queryParams}`,
+            {method: 'get'},
+        );
+    }
+
     // Playbook Runs
     fetchPlaybookRuns = async (params: FetchPlaybookRunsParams, groupLabel?: RequestGroupLabel) => {
         const queryParams = buildQueryString(params);
@@ -87,6 +101,30 @@ const ClientPlaybooks = <TBase extends Constructor<ClientBase>>(superclass: TBas
         );
     };
 
+    createPlaybookRun = async (
+        playbook_id: string,
+        owner_user_id: string,
+        team_id: string,
+        name: string,
+        description: string,
+        channel_id?: string,
+        create_public_run?: boolean,
+    ) => {
+        const data = await this.doFetch(`${this.getPlaybookRunsRoute()}`, {
+            method: 'post',
+            body: {
+                owner_user_id,
+                team_id,
+                name,
+                description,
+                playbook_id,
+                channel_id,
+                create_public_run,
+            },
+        });
+        return data;
+    };
+
     postStatusUpdate = async (playbookRunID: string, payload: PostStatusUpdatePayload, ids: PostStatusUpdateIds) => {
         const body = {
             type: 'dialog_submission',

app/products/playbooks/constants/screens.ts

@@ -8,6 +8,8 @@ export const PLAYBOOK_EDIT_COMMAND = 'PlaybookEditCommand';
 export const PLAYBOOK_POST_UPDATE = 'PlaybookPostUpdate';
 export const PLAYBOOK_SELECT_USER = 'PlaybookSelectUser';
 export const PLAYBOOKS_SELECT_DATE = 'PlaybooksSelectDate';
+export const PLAYBOOKS_SELECT_PLAYBOOK = 'PlaybooksSelectPlaybook';
+export const PLAYBOOKS_START_A_RUN = 'PlaybooksStartARun';
 
 export default {
     PLAYBOOKS_RUNS,
@@ -17,4 +19,6 @@ export default {
     PLAYBOOK_POST_UPDATE,
     PLAYBOOK_SELECT_USER,
     PLAYBOOKS_SELECT_DATE,
+    PLAYBOOKS_SELECT_PLAYBOOK,
+    PLAYBOOKS_START_A_RUN,
 } as const;

app/products/playbooks/screens/index.test.tsx

@@ -13,7 +13,9 @@ import PlaybookRun from './playbook_run';
 import PlaybookRuns from './playbooks_runs';
 import PostUpdate from './post_update';
 import SelectDate from './select_date';
+import SelectPlaybook from './select_playbook';
 import SelectUser from './select_user';
+import StartARun from './start_a_run';
 
 import {loadPlaybooksScreen} from '.';
 
@@ -54,6 +56,18 @@ jest.mock('@playbooks/screens/select_date', () => ({
 }));
 jest.mocked(SelectDate).mockImplementation((props) => <Text {...props}>{Screens.PLAYBOOKS_SELECT_DATE}</Text>);
 
+jest.mock('@playbooks/screens/start_a_run', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
+jest.mocked(StartARun).mockImplementation((props) => <Text {...props}>{Screens.PLAYBOOKS_START_A_RUN}</Text>);
+
+jest.mock('@playbooks/screens/select_playbook', () => ({
+    __esModule: true,
+    default: jest.fn(),
+}));
+jest.mocked(SelectPlaybook).mockImplementation((props) => <Text {...props}>{Screens.PLAYBOOKS_SELECT_PLAYBOOK}</Text>);
+
 jest.mock('@playbooks/screens/participant_playbooks', () => ({
     __esModule: true,
     default: jest.fn(),

app/products/playbooks/screens/index.tsx

@@ -20,6 +20,10 @@ export function loadPlaybooksScreen(screenName: string | number) {
             return withServerDatabase(require('@playbooks/screens/select_user').default);
         case Screens.PLAYBOOKS_SELECT_DATE:
             return withServerDatabase(require('@playbooks/screens/select_date').default);
+        case Screens.PLAYBOOKS_SELECT_PLAYBOOK:
+            return withServerDatabase(require('@playbooks/screens/select_playbook').default);
+        case Screens.PLAYBOOKS_START_A_RUN:
+            return withServerDatabase(require('@playbooks/screens/start_a_run').default);
         default:
             return undefined;
     }

app/products/playbooks/screens/navigation.ts

@@ -116,3 +116,31 @@ export async function goToSelectDate(
         selectedDate,
     }, options);
 }
+
+export async function goToSelectPlaybook(
+    intl: IntlShape,
+    theme: Theme,
+) {
+    const title = intl.formatMessage({id: 'playbooks.select_playbook.title', defaultMessage: 'Start a run'});
+    goToScreen(Screens.PLAYBOOKS_SELECT_PLAYBOOK, title, {}, {
+        topBar: {
+            subtitle: {
+                text: intl.formatMessage({id: 'playbooks.select_playbook.subtitle', defaultMessage: 'Select a playbook'}),
+                color: changeOpacity(theme.sidebarText, 0.72),
+            },
+        },
+    });
+}
+
+export async function goToStartARun(intl: IntlShape, theme: Theme, playbook: Playbook, onRunCreated: (run: PlaybookRun) => void) {
+    const title = intl.formatMessage({id: 'playbooks.start_a_run.title', defaultMessage: 'Start a run'});
+    const subtitle = playbook.title;
+    goToScreen(Screens.PLAYBOOKS_START_A_RUN, title, {playbook, onRunCreated}, {
+        topBar: {
+            subtitle: {
+                text: subtitle,
+                color: changeOpacity(theme.sidebarText, 0.72),
+            },
+        },
+    });
+}

app/products/playbooks/screens/playbooks_runs/playbook_runs.tsx

@@ -3,9 +3,10 @@
 
 import {FlashList, type ListRenderItem} from '@shopify/flash-list';
 import React, {useCallback, useMemo, useState} from 'react';
-import {defineMessage} from 'react-intl';
+import {defineMessage, useIntl} from 'react-intl';
 import {StyleSheet, View} from 'react-native';
 
+import Button from '@components/button';
 import {Screens} from '@constants';
 import {useTheme} from '@context/theme';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
@@ -15,6 +16,8 @@ import {isRunFinished} from '@playbooks/utils/run';
 import {popTopScreen} from '@screens/navigation';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
+import {goToSelectPlaybook} from '../navigation';
+
 import EmptyState from './empty_state';
 import PlaybookCard, {CARD_HEIGHT} from './playbook_card';
 import ShowMoreButton from './show_more_button';
@@ -43,6 +46,9 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => ({
         borderBottomWidth: 1,
         borderBottomColor: changeOpacity(theme.centerChannelColor, 0.12),
     },
+    startANewRunButtonContainer: {
+        padding: 20,
+    },
 }));
 
 const ItemSeparator = () => {
@@ -71,6 +77,7 @@ const PlaybookRuns = ({
     allRuns,
     componentId,
 }: Props) => {
+    const intl = useIntl();
     const theme = useTheme();
     const styles = getStyleFromTheme(theme);
 
@@ -132,17 +139,32 @@ const PlaybookRuns = ({
         );
     }, []);
 
+    const startANewRun = useCallback(() => {
+        goToSelectPlaybook(intl, theme);
+    }, [intl, theme]);
+
     let content = (<EmptyState tab={activeTab}/>);
     if (!isEmpty) {
         content = (
-            <FlashList
-                data={data}
-                renderItem={renderItem}
-                contentContainerStyle={styles.container}
-                ItemSeparatorComponent={ItemSeparator}
-                estimatedItemSize={CARD_HEIGHT}
-                ListFooterComponent={footerComponent}
-            />
+            <>
+                <FlashList
+                    data={data}
+                    renderItem={renderItem}
+                    contentContainerStyle={styles.container}
+                    ItemSeparatorComponent={ItemSeparator}
+                    estimatedItemSize={CARD_HEIGHT}
+                    ListFooterComponent={footerComponent}
+                />
+                <View style={styles.startANewRunButtonContainer}>
+                    <Button
+                        emphasis='tertiary'
+                        onPress={startANewRun}
+                        text={intl.formatMessage({id: 'playbooks.runs.start_a_new_run', defaultMessage: 'Start a new run'})}
+                        size='lg'
+                        theme={theme}
+                    />
+                </View>
+            </>
         );
     }
 

app/products/playbooks/screens/select_playbook/index.ts

@@ -0,0 +1,35 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {withDatabase, withObservables} from '@nozbe/watermelondb/react';
+import {of as of$} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
+
+import {queryPlaybookRunsPerChannel} from '@playbooks/database/queries/run';
+import {observeCurrentUserId, observeCurrentTeamId, observeCurrentChannelId} from '@queries/servers/system';
+
+import SelectPlaybook from './select_playbook';
+
+import type PlaybookRunModel from '@playbooks/types/database/models/playbook_run';
+import type {WithDatabaseArgs} from '@typings/database/database';
+
+function getPlaybookIdsFromRuns(runs: PlaybookRunModel[]) {
+    return runs.reduce((acc, run) => {
+        acc.add(run.playbookId);
+        return acc;
+    }, new Set<string>());
+}
+
+const enhanced = withObservables([], ({database}: WithDatabaseArgs) => {
+    const playbooksUsedInChannel = observeCurrentChannelId(database).pipe(
+        switchMap((id) => (id ? queryPlaybookRunsPerChannel(database, id).observe() : of$([]))),
+        switchMap((runs) => of$(getPlaybookIdsFromRuns(runs))),
+    );
+    return {
+        currentUserId: observeCurrentUserId(database),
+        currentTeamId: observeCurrentTeamId(database),
+        playbooksUsedInChannel,
+    };
+});
+
+export default withDatabase(enhanced(SelectPlaybook));