((state) => Boolean(state.plugins?.plugins?.['com.mattermost.nps']));
-
- return (
-
-
-
-
-
-
-
-
-
-
- {formatMessage({defaultMessage: 'Runs'})}
-
-
-
- {formatMessage({defaultMessage: 'Playbooks'})}
-
-
- {npsAvailable && (
-
-
- {formatMessage({defaultMessage: 'Give Feedback'})}
-
- )}
-
-
-
-
- );
-};
-
export const BackstageID = 'playbooks-backstageRoot';
export default Backstage;
diff --git a/webapp/src/components/backstage/backstage_navbar.tsx b/webapp/src/components/backstage/backstage_navbar.tsx
deleted file mode 100644
index ca6c24c536..0000000000
--- a/webapp/src/components/backstage/backstage_navbar.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-export const BackstageNavbar = styled.div`
- position: sticky;
- width: 100%;
- top: 0;
- z-index: 2;
-
- display: flex;
- align-items: center;
- padding: 28px 31px;
- background: var(--center-channel-bg);
- color: var(--center-channel-color);
- font-family: 'compass-icons';
- box-shadow: inset 0px -1px 0px rgba(var(--center-channel-color-rgb), 0.16);
-
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 600;
-`;
diff --git a/webapp/src/components/backstage/category_selector.tsx b/webapp/src/components/backstage/category_selector.tsx
index 9eaf69a047..c40a5bb7c9 100644
--- a/webapp/src/components/backstage/category_selector.tsx
+++ b/webapp/src/components/backstage/category_selector.tsx
@@ -59,7 +59,8 @@ const CategorySelector = (props: Props & { className?: string }) => {
components={components}
isDisabled={props.isDisabled}
captureMenuScroll={props.captureMenuScroll}
- menuPlacement={props.menuPlacement ?? 'top'}
+ menuPlacement={props.menuPlacement ?? 'auto'}
+ menuShouldScrollIntoView={false}
/>
);
};
diff --git a/webapp/src/components/backstage/collapsible_section.tsx b/webapp/src/components/backstage/collapsible_section.tsx
deleted file mode 100644
index 0bfe0499f7..0000000000
--- a/webapp/src/components/backstage/collapsible_section.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, {useState} from 'react';
-
-import styled from 'styled-components';
-
-import HorizontalBar from './horizontal_bar';
-import EditableText from './editable_text';
-
-export interface CollapsibleSectionProps {
- title: string
- onTitleChange: (newTitle: string) => void
- children: React.ReactNode
-}
-
-const Container = styled.span`
- font-size: 16px;
- font-weight: 600;
- line-height: 24px;
- color: var(--center-channel-color);
-`;
-
-const ClickableI = styled.i`
- margin: 0 4px 0 0;
- cursor: pointer;
- width: 24px;
- height: 24px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- position: relative;
- color: rgba(var(--center-channel-color-rgb), 0.56);
-
- &:hover {
- color: var(--center-channel-color);
- }
-`;
-
-const CollapsibleSection = (props: CollapsibleSectionProps) => {
- const [expanded, setExpanded] = useState(true);
-
- let icon = 'icon-20 icon-chevron-down';
- if (!expanded) {
- icon = 'icon-20 icon-chevron-right';
- }
-
- return (
-
-
- setExpanded(!expanded)}
- />
-
-
-
-
- {
- expanded ? props.children : null
- }
-
- );
-};
-
-export default CollapsibleSection;
diff --git a/webapp/src/components/backstage/convert_enterprise_notice.tsx b/webapp/src/components/backstage/convert_enterprise_notice.tsx
index 720f5a0fdf..f112daeec4 100644
--- a/webapp/src/components/backstage/convert_enterprise_notice.tsx
+++ b/webapp/src/components/backstage/convert_enterprise_notice.tsx
@@ -5,7 +5,9 @@ import styled from 'styled-components';
const ConvertEnterpriseNotice = () => (
<>
- {'To unlock this feature:'}
+
+
+
diff --git a/webapp/src/components/backstage/default_update_timer.tsx b/webapp/src/components/backstage/default_update_timer.tsx
deleted file mode 100644
index 8fe4d78f4d..0000000000
--- a/webapp/src/components/backstage/default_update_timer.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useMemo} from 'react';
-import {useIntl} from 'react-intl';
-
-import {
- BackstageSubheader,
- BackstageSubheaderDescription,
- InfoLine,
-} from 'src/components/backstage/styles';
-
-import {
- useDateTimeInput,
- useMakeOption,
- ms,
- Mode,
- Option,
-} from 'src/components/datetime_input';
-
-interface Props {
- seconds: number;
- setSeconds: (seconds: number) => void;
- disabled?: boolean;
-}
-
-const DefaultUpdateTimer = (props: Props) => {
- const {formatMessage} = useIntl();
- const makeOption = useMakeOption(Mode.DurationValue);
-
- const defaults = useMemo(() => {
- const options = [
- makeOption({hours: 1}),
- makeOption({days: 1}),
- makeOption({days: 7}),
- ];
-
- let value: Option | undefined;
- if (props.seconds) {
- value = makeOption({seconds: props.seconds});
-
- const matched = options.find((o) => value && ms(o.value) === ms(value.value));
- if (matched) {
- value = matched;
- } else {
- options.push(value);
- }
- options.sort((a, b) => ms(a.value) - ms(b.value));
- }
-
- return {options, value};
- }, [props]);
-
- const {input, value} = useDateTimeInput({
- mode: Mode.DurationValue,
- parsingOptions: {defaultUnit: 'minutes'},
- defaultOptions: defaults.options,
- defaultValue: defaults.value,
- isClearable: false,
- placeholder: formatMessage({defaultMessage: 'Select an option or specify a custom duration'}),
- id: 'update_timer_duration',
- disabled: props.disabled,
- });
-
- if (value?.value) {
- props.setSeconds(Math.floor(ms(value.value) / 1000));
- }
-
- return (
- <>
-
- {formatMessage({defaultMessage: 'Default update timer'})}
-
- {formatMessage({defaultMessage: 'How often should an update be posted?'})}
-
-
- {input}
-
- {formatMessage({defaultMessage: 'You can select an option or specify a custom duration ("2 weeks", "3 days 12 hours", "45 minutes", ...)'})}
-
-
- );
-};
-
-export default DefaultUpdateTimer;
diff --git a/webapp/src/components/backstage/drag_handle.tsx b/webapp/src/components/backstage/drag_handle.tsx
deleted file mode 100644
index 787978a857..0000000000
--- a/webapp/src/components/backstage/drag_handle.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React, {useState} from 'react';
-import styled from 'styled-components';
-import {DraggableProvided} from 'react-beautiful-dnd';
-
-interface HandleProps {
- show: boolean;
-}
-
-const HandleContainer = styled.div`
- display: flex;
- align-items: flex-start;
- margin: 24px 0 0;
-
- &.HandleContainer--Step {
- margin: 16px -32px 0;
- }
-`;
-
-const ClickableI = styled.i`
- cursor: pointer;
-`;
-
-const Handle = styled.div`
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
- color: rgba(var(--center-channel-color-rgb), 0.56);
- margin: 0 8px 0 0;
-
- &:first-child {
- margin: 0 0 0 8px;
- }
-
- &:hover {
- color: var(--center-channel-color);
- }
-`;
-
-const Content = styled.div`
- flex-grow: 1;
-`;
-
-export interface DragHandleProps {
- step: boolean;
- children: React.ReactNode;
- draggableProvided: DraggableProvided;
- onDelete: () => void
-}
-
-const DragHandle = (props: DragHandleProps) => {
- const [hover, setHover] = useState(false);
-
- return (
- setHover(true)}
- onMouseLeave={() => setHover(false)}
- >
-
-
-
-
- {props.children}
-
-
-
-
-
- );
-};
-
-export default DragHandle;
diff --git a/webapp/src/components/backstage/editable_text.tsx b/webapp/src/components/backstage/editable_text.tsx
deleted file mode 100644
index c13378f291..0000000000
--- a/webapp/src/components/backstage/editable_text.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, {useState, useRef} from 'react';
-import styled from 'styled-components';
-
-export interface EditableTextProps {
- id?: string
- text: string
- onChange: (newText: string) => void
- placeholder?: string
-}
-
-const Container = styled.span`
- display: inline-flex;
- flex-shrink: 0;
- flex-direction: row;
- align-items: center;
-
- i {
- padding: 0 8px;
- color: rgba(var(--center-channel-color-rgb), 0.56);
-
- &.icon-check {
- padding: 0 8px;
- }
-
- &:hover {
- color: var(--center-channel-color);
- }
- }
-`;
-
-const Input = styled.input`
- background: none;
- font: inherit;
- padding: 0 0 2px;
- box-shadow: 0 2px 0 var(--button-bg);
- border: none;
- margin-top: -2px;
- max-width: 650px;
- padding: 0 0 2px;
-`;
-
-const Text = styled.span`
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 650px;
- white-space: nowrap;
-`;
-
-const Placeholder = styled.span`
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 650px;
- white-space: nowrap;
- font-style: italic;
-`;
-
-const ClickableI = styled.i`
- cursor: pointer;
-`;
-
-const EditableText = (props: EditableTextProps) => {
- const [editMode, setEditMode] = useState(false);
- const [text, setText] = useState(props.text);
- const textElement = useRef(null);
- const [inputWidth, setInputWidth] = useState(0);
-
- const submit = () => {
- setEditMode(false);
- props.onChange(text);
- };
-
- const enterEditMode = () => {
- // When editing, copy the props value at the instant editing starts.
- setText(props.text);
-
- // Start the input size at least as wide as the span, itself with a max width.
- setInputWidth(textElement.current?.offsetWidth || 0);
- setEditMode(true);
- };
-
- if (editMode) {
- return (
-
- {
- setText(e.target.value);
- }}
- autoFocus={true}
- onBlur={submit}
- onKeyPress={(e) => {
- if (e.key === 'Enter') {
- submit();
- }
- }}
- />
-
-
- );
- }
-
- return (
-
- {props.text && props.text.trim().length > 0 &&
-
- {props.text}
-
- }
- {(!props.text || props.text.length === 0) && props.placeholder && props.placeholder.length > 0 &&
-
- {props.placeholder}
-
- }
-
-
- );
-};
-
-export default EditableText;
diff --git a/webapp/src/components/backstage/horizontal_bar.tsx b/webapp/src/components/backstage/horizontal_bar.tsx
deleted file mode 100644
index 2798e2b9e0..0000000000
--- a/webapp/src/components/backstage/horizontal_bar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export interface HorizontalBarProps {
- children: React.ReactNode;
-}
-
-export const Container = styled.div`
- display: flex;
- flex-direction: row;
- width: 100%;
- line-height: 0.1em;
- margin-bottom: 12px;
-`;
-
-export const Line = styled.hr`
- width: 100%;
- margin: auto 0;
- display: inline-block;
- flex-grow: 1;
-`;
-
-const Children = styled.div`
- flex-shrink: 0;
- display: flex;
- align-items: center;
-`;
-
-const HorizontalBar = (props: HorizontalBarProps) => {
- return (
-
-
- {props.children}
-
-
-
- );
-};
-
-export default HorizontalBar;
diff --git a/webapp/src/components/backstage/import_playbook.tsx b/webapp/src/components/backstage/import_playbook.tsx
new file mode 100644
index 0000000000..906aa80a58
--- /dev/null
+++ b/webapp/src/components/backstage/import_playbook.tsx
@@ -0,0 +1,40 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useRef} from 'react';
+import {useIntl} from 'react-intl';
+
+import {importFile} from 'src/client';
+import {useToaster, ToastType} from 'src/components/backstage/toast_banner';
+
+export const useImportPlaybook = (teamId: string, cb: (id: string) => void) => {
+ const fileInputRef = useRef(null);
+ const {formatMessage} = useIntl();
+ const addToast = useToaster().add;
+
+ const importUpload = (e: React.ChangeEvent) => {
+ if (e.target.files?.[0]) {
+ const file = e.target.files[0];
+
+ const reader = new FileReader();
+ reader.onload = async (ev) => {
+ importFile(ev?.target?.result, teamId)
+ .then(({id}) => cb(id))
+ .catch(() => addToast(formatMessage({defaultMessage: 'The playbook import has failed. Please check that JSON is valid and try again.'}), ToastType.Failure));
+ e.target.value = '';
+ };
+ reader.readAsArrayBuffer(file);
+ }
+ };
+
+ const input = (
+
+ );
+ return [fileInputRef, input] as const;
+};
diff --git a/webapp/src/components/backstage/lhs_navigation.tsx b/webapp/src/components/backstage/lhs_navigation.tsx
index 37a6ec0276..3eb748197c 100644
--- a/webapp/src/components/backstage/lhs_navigation.tsx
+++ b/webapp/src/components/backstage/lhs_navigation.tsx
@@ -1,6 +1,8 @@
+import {useApolloClient} from '@apollo/client';
import React from 'react';
import styled from 'styled-components';
+import {PlaybookLhsDocument} from 'src/graphql/generated_types';
import PlaybooksSidebar from '../sidebar/playbooks_sidebar';
const LHSContainer = styled.div`
@@ -13,10 +15,22 @@ const LHSContainer = styled.div`
const LHSNavigation = () => {
return (
-
-
+
+
);
};
+export const useLHSRefresh = () => {
+ const apolloClient = useApolloClient();
+
+ const refreshLists = () => {
+ apolloClient.refetchQueries({
+ include: [PlaybookLhsDocument],
+ });
+ };
+
+ return refreshLists;
+};
+
export default LHSNavigation;
diff --git a/webapp/src/components/backstage/lhs_playbook_dot_menu.tsx b/webapp/src/components/backstage/lhs_playbook_dot_menu.tsx
new file mode 100644
index 0000000000..6d57a825b4
--- /dev/null
+++ b/webapp/src/components/backstage/lhs_playbook_dot_menu.tsx
@@ -0,0 +1,41 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {DotsVerticalIcon} from '@mattermost/compass-icons/components';
+
+import DotMenu from 'src/components/dot_menu';
+import {Separator} from 'src/components/backstage/playbook_runs/shared';
+
+import {DotMenuButtonStyled} from './shared';
+import {CopyPlaybookLinkMenuItem, FavoritePlaybookMenuItem, LeavePlaybookMenuItem} from './playbook_editor/controls';
+
+interface Props {
+ playbookId: string;
+ isFavorite: boolean;
+}
+
+export const LHSPlaybookDotMenu = ({playbookId, isFavorite}: Props) => {
+ return (
+ <>
+
+ )}
+ dotMenuButton={DotMenuButtonStyled}
+ >
+
+
+
+
+
+
+ );
+};
diff --git a/webapp/src/components/backstage/lhs_run_dot_menu.tsx b/webapp/src/components/backstage/lhs_run_dot_menu.tsx
new file mode 100644
index 0000000000..fba4f01203
--- /dev/null
+++ b/webapp/src/components/backstage/lhs_run_dot_menu.tsx
@@ -0,0 +1,93 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+import {DotsVerticalIcon} from '@mattermost/compass-icons/components';
+import {useSelector} from 'react-redux';
+import {getCurrentUser} from 'mattermost-webapp/packages/mattermost-redux/src/selectors/entities/users';
+
+import {followPlaybookRun, unfollowPlaybookRun} from 'src/client';
+import DotMenu from 'src/components/dot_menu';
+import {ToastType, useToaster} from 'src/components/backstage/toast_banner';
+import {Role, Separator} from 'src/components/backstage/playbook_runs/shared';
+
+import {useUpdateRun} from 'src/graphql/hooks';
+
+import {useLeaveRun} from './playbook_runs/playbook_run/context_menu';
+import {useFollowers} from './playbook_runs/playbook_run/playbook_run';
+import {CopyRunLinkMenuItem, FavoriteRunMenuItem, FollowRunMenuItem, LeaveRunMenuItem} from './playbook_runs/playbook_run/controls';
+import {DotMenuButtonStyled} from './shared';
+
+interface Props {
+ playbookRunId: string;
+ isFavorite: boolean;
+ ownerUserId: string;
+ participantIDs: string[];
+ followerIDs: string[];
+ hasPermanentViewerAccess: boolean;
+}
+
+export const LHSRunDotMenu = ({playbookRunId, isFavorite, ownerUserId, participantIDs, followerIDs, hasPermanentViewerAccess}: Props) => {
+ const {formatMessage} = useIntl();
+ const {add: addToast} = useToaster();
+ const updateRun = useUpdateRun(playbookRunId);
+ const currentUser = useSelector(getCurrentUser);
+
+ const followState = useFollowers(followerIDs);
+ const {isFollowing, followers, setFollowers} = followState;
+
+ const {leaveRunConfirmModal, showLeaveRunConfirm} = useLeaveRun(hasPermanentViewerAccess, playbookRunId, ownerUserId, isFollowing);
+ const role = participantIDs.includes(currentUser.id) ? Role.Participant : Role.Viewer;
+
+ const toggleFavorite = () => {
+ updateRun({isFavorite: !isFavorite});
+ };
+
+ const toggleFollow = () => {
+ const action = isFollowing ? unfollowPlaybookRun : followPlaybookRun;
+ action(playbookRunId)
+ .then(() => {
+ const newFollowers = isFollowing ? followers.filter((userId) => userId !== currentUser.id) : [...followers, currentUser.id];
+ setFollowers(newFollowers);
+ })
+ .catch(() => {
+ addToast(formatMessage({defaultMessage: 'It was not possible to {isFollowing, select, true {unfollow} other {follow}} the run'}, {isFollowing}), ToastType.Failure);
+ });
+ };
+
+ return (
+ <>
+
+ )}
+ dotMenuButton={DotMenuButtonStyled}
+ >
+
+
+
+
+
+
+
+ {leaveRunConfirmModal}
+
+ );
+};
diff --git a/webapp/src/components/backstage/main_body.tsx b/webapp/src/components/backstage/main_body.tsx
index 9b5de9782c..56879f0bc1 100644
--- a/webapp/src/components/backstage/main_body.tsx
+++ b/webapp/src/components/backstage/main_body.tsx
@@ -16,9 +16,7 @@ import PlaybookRun from 'src/components/backstage/playbook_runs/playbook_run/pla
import Playbook from 'src/components/backstage/playbooks/playbook';
import PlaybookList from 'src/components/backstage/playbook_list';
-import PlaybookEdit from 'src/components/backstage/playbook_edit/playbook_edit';
import PlaybookEditor from 'src/components/backstage/playbook_editor/playbook_editor';
-import {NewPlaybook} from 'src/components/backstage/new_playbook';
import {ErrorPageTypes} from 'src/constants';
import {pluginErrorUrl, pluginUrl} from 'src/browser_routing';
import ErrorPage from 'src/components/error_page';
@@ -86,14 +84,6 @@ const MainBody = () => {
return (
-
-
-
-
-
-
diff --git a/webapp/src/components/backstage/new_playbook.tsx b/webapp/src/components/backstage/new_playbook.tsx
deleted file mode 100644
index b2f082e956..0000000000
--- a/webapp/src/components/backstage/new_playbook.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import {Redirect} from 'react-router-dom';
-import {useIntl} from 'react-intl';
-import {useDispatch} from 'react-redux';
-import styled from 'styled-components';
-
-import PlaybookEdit from 'src/components/backstage/playbook_edit/playbook_edit';
-import {pluginUrl} from 'src/browser_routing';
-import {displayPlaybookCreateModal} from 'src/actions';
-import {PrimaryButton} from '../assets/buttons';
-
-export const NewPlaybook = () => {
- const searchParams = Object.fromEntries(new URLSearchParams(location.search));
-
- if (!searchParams.teamId) {
- return ;
- }
-
- return (
-
- );
-};
-
-export const PlaybookModalButton = () => {
- const {formatMessage} = useIntl();
- const dispatch = useDispatch();
-
- return (
- dispatch(displayPlaybookCreateModal({}))}
- >
-
- {formatMessage({defaultMessage: 'Create playbook'})}
-
- );
-};
-
-const CreatePlaybookButton = styled(PrimaryButton)`
- display: flex;
- align-items: center;
-`;
diff --git a/webapp/src/components/backstage/playbook_access_modal.tsx b/webapp/src/components/backstage/playbook_access_modal.tsx
index 24207e64ac..5a1362504c 100644
--- a/webapp/src/components/backstage/playbook_access_modal.tsx
+++ b/webapp/src/components/backstage/playbook_access_modal.tsx
@@ -1,7 +1,7 @@
import {getTeam} from 'mattermost-redux/selectors/entities/teams';
import {getProfilesInTeam, searchProfiles} from 'mattermost-webapp/packages/mattermost-redux/src/actions/users';
-import {GlobalState} from 'mattermost-webapp/packages/mattermost-redux/src/types/store';
-import {Team} from 'mattermost-webapp/packages/mattermost-redux/src/types/teams';
+import {GlobalState} from '@mattermost/types/store';
+import {Team} from '@mattermost/types/teams';
import React, {ComponentProps, useState} from 'react';
import {useIntl} from 'react-intl';
import {useDispatch, useSelector} from 'react-redux';
@@ -23,7 +23,7 @@ const ID = 'playbooks_access';
type Props = {
playbookId: string
- onPlaybookChange?: React.Dispatch>
+ refetch?: () => void
} & Partial>;
export const makePlaybookAccessModalDefinition = (props: Props) => ({
@@ -66,12 +66,12 @@ const BlueArrow = styled.i`
const PlaybookAccessModal = ({
playbookId,
- onPlaybookChange,
+ refetch,
...modalProps
}: Props) => {
const {formatMessage} = useIntl();
const dispatch = useDispatch();
- const [playbook, updatePlaybook] = useEditPlaybook(playbookId);
+ const [playbook, updatePlaybook] = useEditPlaybook(playbookId, refetch);
const team = useSelector((state) => getTeam(state, playbook?.team_id || ''));
const permissionToMakePrivate = useHasPlaybookPermission(PlaybookPermissionGeneral.Convert, playbook);
const licenseToMakePrivate = useAllowMakePlaybookPrivate();
@@ -83,7 +83,6 @@ const PlaybookAccessModal = ({
if (playbook) {
const updatedPlaybook: PlaybookWithChecklist = {...playbook, ...update};
updatePlaybook(updatedPlaybook);
- onPlaybookChange?.(updatedPlaybook);
}
};
diff --git a/webapp/src/components/backstage/playbook_edit/actions_edit.tsx b/webapp/src/components/backstage/playbook_edit/actions_edit.tsx
deleted file mode 100644
index f30f637739..0000000000
--- a/webapp/src/components/backstage/playbook_edit/actions_edit.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-import {ActionFunc} from 'mattermost-redux/types/actions';
-
-import {TabContainer} from 'src/components/backstage/styles';
-import {DraftPlaybookWithChecklist, PlaybookWithChecklist} from 'src/types/playbook';
-import {Section, SectionTitle, Setting} from 'src/components/backstage/playbook_edit/styles';
-import {InviteUsers} from 'src/components/backstage/playbook_edit/automation/invite_users';
-import {AutoAssignOwner} from 'src/components/backstage/playbook_edit/automation/auto_assign_owner';
-import {WebhookSetting} from 'src/components/backstage/playbook_edit/automation/webhook_setting';
-import {MessageOnJoin} from 'src/components/backstage/playbook_edit/automation/message_on_join';
-import {CategorizePlaybookRun} from 'src/components/backstage/playbook_edit/automation/categorize_playbook_run';
-import RunSummary from 'src/components/backstage/playbook_edit/automation/run_summary';
-import {CreateAChannel} from 'src/components/backstage/playbook_edit/automation/channel_access';
-
-interface Props {
- playbook: DraftPlaybookWithChecklist | PlaybookWithChecklist;
- setPlaybook: React.Dispatch>;
- setChangesMade: (b: boolean) => void;
- searchUsers: (term: string) => ActionFunc;
- getUsers: () => ActionFunc;
-}
-
-const ActionsEdit = ({playbook, setPlaybook, setChangesMade, searchUsers, getUsers}: Props) => {
- const {formatMessage} = useIntl();
-
- const handleAddUserInvited = (userId: string) => {
- if (!playbook.invited_user_ids.includes(userId)) {
- setPlaybook({
- ...playbook,
- invited_user_ids: [...playbook.invited_user_ids, userId],
- });
- setChangesMade(true);
- }
- };
-
- const handleRemoveUserInvited = (userId: string) => {
- const idx = playbook.invited_user_ids.indexOf(userId);
- setPlaybook({
- ...playbook,
- invited_user_ids: [...playbook.invited_user_ids.slice(0, idx), ...playbook.invited_user_ids.slice(idx + 1)],
- });
- setChangesMade(true);
- };
-
- const handleAssignDefaultOwner = (userId: string | undefined) => {
- if ((userId || userId === '') && playbook.default_owner_id !== userId) {
- setPlaybook({
- ...playbook,
- default_owner_id: userId,
- });
- setChangesMade(true);
- }
- };
-
- const handleWebhookOnCreationChange = (urls: string) => {
- setPlaybook({
- ...playbook,
- webhook_on_creation_urls: urls.split('\n'),
- });
- setChangesMade(true);
- };
-
- const handleMessageOnJoinChange = (message: string) => {
- if (playbook.message_on_join !== message) {
- setPlaybook({
- ...playbook,
- message_on_join: message,
- });
- setChangesMade(true);
- }
- };
-
- const handleToggleMessageOnJoin = () => {
- setPlaybook({
- ...playbook,
- message_on_join_enabled: !playbook.message_on_join_enabled,
- });
- setChangesMade(true);
- };
-
- const handleToggleInviteUsers = () => {
- setPlaybook({
- ...playbook,
- invite_users_enabled: !playbook.invite_users_enabled,
- });
- setChangesMade(true);
- };
-
- const handleToggleDefaultOwner = () => {
- setPlaybook({
- ...playbook,
- default_owner_enabled: !playbook.default_owner_enabled,
- });
- setChangesMade(true);
- };
-
- const handleToggleRunSummary = () => {
- setPlaybook({
- ...playbook,
- run_summary_template_enabled: !playbook.run_summary_template_enabled,
- });
- setChangesMade(true);
- };
-
- const handleRunSummaryChange = (runSummary: string) => {
- setPlaybook({
- ...playbook,
- run_summary_template: runSummary,
- });
- setChangesMade(true);
- };
-
- const handleToggleWebhookOnCreation = () => {
- setPlaybook({
- ...playbook,
- webhook_on_creation_enabled: !playbook.webhook_on_creation_enabled,
- });
- setChangesMade(true);
- };
-
- const handleToggleCategorizePlaybookRun = () => {
- setPlaybook({
- ...playbook,
- categorize_channel_enabled: !playbook.categorize_channel_enabled,
- });
- setChangesMade(true);
- };
-
- const handleCategoryNameChange = (name: string) => {
- if (playbook.category_name !== name) {
- setPlaybook({
- ...playbook,
- category_name: name,
- });
- setChangesMade(true);
- }
- };
-
- return (
-
-
-
- {formatMessage({defaultMessage: 'When a run starts'})}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {formatMessage({defaultMessage: 'When a new member joins the channel'})}
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ActionsEdit;
diff --git a/webapp/src/components/backstage/playbook_edit/automation/auto_assign_owner.tsx b/webapp/src/components/backstage/playbook_edit/automation/auto_assign_owner.tsx
index 6e0bdba170..d76e811f43 100644
--- a/webapp/src/components/backstage/playbook_edit/automation/auto_assign_owner.tsx
+++ b/webapp/src/components/backstage/playbook_edit/automation/auto_assign_owner.tsx
@@ -3,13 +3,10 @@
import React from 'react';
-import styled from 'styled-components';
-
import {ActionFunc} from 'mattermost-redux/types/actions';
import {FormattedMessage} from 'react-intl';
-import Profile from 'src/components/profile/profile';
import {
AutomationHeader,
AutomationTitle,
@@ -51,94 +48,3 @@ export const AutoAssignOwner = (props: Props) => {
);
};
-
-interface UserRowProps {
- isEnabled: boolean;
-}
-
-const UserRow = styled.div`
- margin: 12px 0 0 auto;
-
- padding: 0;
-
- display: flex;
- flex-direction: row;
-`;
-
-const Cross = styled.i`
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 50%;
-
- color: var(--button-bg);
- // Filling the transparent X in the icon: this sets a background gradient,
- // which is effectively a circle with color --button-color that fills only
- // 50% of the background, transparent outside of it. If we simply add a
- // background color, the icon is misplaced and a weird border appears at the bottom
- background-image: radial-gradient(circle, var(--button-color) 50%, rgba(0, 0, 0, 0) 50%);
-
- visibility: hidden;
-`;
-
-const UserPic = styled.div`
- .PlaybookRunProfile {
- flex-direction: column;
-
- .name {
- display: none;
- position: absolute;
- bottom: -24px;
- margin-left: auto;
- }
- }
-
- :not(:first-child) {
- margin-left: -16px;
- }
-
- position: relative;
- transition: transform .4s;
-
- :hover {
- z-index: 1;
- transform: translateY(-8px);
-
- ${Cross} {
- visibility: visible;
- }
-
- .name {
- display: block;
- }
- }
-
- && img {
- // We need both background-color and border color to imitate the color in the background
- background-color: var(--center-channel-bg);
- border: 2px solid rgba(var(--center-channel-color-rgb), 0.04);
- }
-
-`;
-
-interface UserProps {
- userIds: string[];
- onRemoveUser: (userId: string) => void;
- isEnabled: boolean;
-}
-
-const Users = (props: UserProps) => {
- return (
-
- {props.userIds.map((userId: string) => (
-
-
- props.onRemoveUser(userId)}
- />
-
- ))}
-
- );
-};
diff --git a/webapp/src/components/backstage/playbook_edit/automation/broadcast.tsx b/webapp/src/components/backstage/playbook_edit/automation/broadcast.tsx
deleted file mode 100644
index 1dc8befd06..0000000000
--- a/webapp/src/components/backstage/playbook_edit/automation/broadcast.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useSelector} from 'react-redux';
-
-import {FormattedMessage} from 'react-intl';
-
-import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
-
-import {AutomationHeader, AutomationTitle, SelectorWrapper} from 'src/components/backstage/playbook_edit/automation/styles';
-import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
-import BroadcastChannelSelector from 'src/components/broadcast_channel_selector';
-
-interface Props {
- enabled: boolean;
- onToggle: () => void;
- channelIds: string[];
- onChannelsSelected: (channelIds: string[]) => void;
-}
-
-export const Broadcast = (props: Props) => {
- const teamId = useSelector(getCurrentTeamId);
-
- return (
-
-
-
-
-
-
-
-
-
- );
-};
-
diff --git a/webapp/src/components/backstage/playbook_edit/automation/invite_users_selector.tsx b/webapp/src/components/backstage/playbook_edit/automation/invite_users_selector.tsx
index d84bbdb11e..20259b1f17 100644
--- a/webapp/src/components/backstage/playbook_edit/automation/invite_users_selector.tsx
+++ b/webapp/src/components/backstage/playbook_edit/automation/invite_users_selector.tsx
@@ -12,7 +12,7 @@ import {UserProfile} from '@mattermost/types/users';
import {GlobalState} from '@mattermost/types/store';
import {getUser} from 'mattermost-redux/selectors/entities/users';
-import {useIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
import Profile from 'src/components/profile/profile';
import {useEnsureProfiles} from 'src/hooks';
@@ -139,7 +139,7 @@ interface UserLabelProps {
const UserLabel = (props: UserLabelProps) => {
let icon = ;
if (props.invitedUsers.find((user: UserProfile) => user.id === props.id)) {
- icon = {'Remove'};
+ icon = ;
}
return (
diff --git a/webapp/src/components/backstage/playbook_edit/automation/message_on_join.tsx b/webapp/src/components/backstage/playbook_edit/automation/message_on_join.tsx
deleted file mode 100644
index 0ecd484292..0000000000
--- a/webapp/src/components/backstage/playbook_edit/automation/message_on_join.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import styled from 'styled-components';
-
-import {FormattedMessage} from 'react-intl';
-
-import {StyledMarkdownTextbox} from 'src/components/backstage/styles';
-
-import {
- AutomationHeader,
- AutomationTitle,
-} from 'src/components/backstage/playbook_edit/automation/styles';
-import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
-
-const TextboxWrapper = styled.div`
- margin-top: 2rem;
- width: 100%;
-`;
-
-const StyledAutomationHeader = styled(AutomationHeader)`
- align-items: start;
- flex-direction: column;
-`;
-
-interface Props {
- enabled: boolean;
- onToggle: () => void;
- message: string;
- onChange: (message: string) => void;
-}
-
-export const MessageOnJoin = (props: Props) => {
- return (
-
-
-
-
-
-
-
-
-
- );
-};
diff --git a/webapp/src/components/backstage/playbook_edit/automation/run_summary.tsx b/webapp/src/components/backstage/playbook_edit/automation/run_summary.tsx
deleted file mode 100644
index 52c830a238..0000000000
--- a/webapp/src/components/backstage/playbook_edit/automation/run_summary.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
-import styled from 'styled-components';
-
-import {
- AutomationHeader,
- AutomationTitle,
-} from 'src/components/backstage/playbook_edit/automation/styles';
-import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
-import {StyledMarkdownTextbox} from 'src/components/backstage/styles';
-
-interface Props {
- enabled: boolean;
- onToggle: () => void;
- summary: string;
- onSummaryChanged: (summary: string) => void;
-}
-
-const RunSummary = ({enabled, onToggle, summary, onSummaryChanged}: Props) => {
- const {formatMessage} = useIntl();
-
- return (
-
-
-
-
-
-
-
-
-
- );
-};
-
-const StyledAutomationHeader = styled(AutomationHeader)`
- align-items: start;
- flex-direction: column;
-`;
-
-const TextboxWrapper = styled.div`
- margin-top: 2rem;
- width: 100%;
-`;
-
-export default RunSummary;
diff --git a/webapp/src/components/backstage/playbook_edit/metrics/metric_edit.tsx b/webapp/src/components/backstage/playbook_edit/metrics/metric_edit.tsx
index b4d5761e04..2d823b94ea 100644
--- a/webapp/src/components/backstage/playbook_edit/metrics/metric_edit.tsx
+++ b/webapp/src/components/backstage/playbook_edit/metrics/metric_edit.tsx
@@ -3,14 +3,14 @@
import React, {useState} from 'react';
import styled from 'styled-components';
-import {useIntl} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
import {Metric, MetricType} from 'src/types/playbook';
import {PrimaryButton} from 'src/components/assets/buttons';
import {StyledInput, HelpText, ErrorText} from 'src/components/backstage/playbook_runs/shared';
import {ClockOutline, DollarSign, PoundSign} from 'src/components/backstage/playbook_edit/styles';
import {stringToMetric, metricToString, isMetricValueValid} from 'src/components/backstage/playbook_edit/metrics/shared';
-import MetricInput from 'src/components/backstage/playbook_runs/playbook_run_backstage/metrics/metric_input';
+import MetricInput from 'src/components/backstage/playbook_runs/playbook_run/metrics/metric_input';
import {BaseTextArea} from 'src/components/assets/inputs';
import {VerticalSpacer} from 'src/components/backstage/styles';
@@ -72,21 +72,42 @@ const MetricEdit = ({metric, setMetric, otherTitles, onAdd, deleteClick, saveTog
}
}
- let typeTitle = {' Dollars'};
let inputIcon = ;
+ let typeTitle = (
+
+ );
if (metric.type === MetricType.Integer) {
- typeTitle = {' Integer'};
inputIcon = ;
+ typeTitle = (
+
+ );
} else if (metric.type === MetricType.Duration) {
- typeTitle = {' Duration (in dd:hh:mm)'};
inputIcon = ;
+ typeTitle = (
+
+ );
}
return (
- {'Type: '}
- {typeTitle}
+ {typeTitle}}}
+ tagName={React.Fragment}
+ />
},
- {id: 'actions', name: },
- {id: 'status', name: },
- {id: 'retrospective', name: },
-] as const;
-
-// @ts-ignore
-const WebappUtils = window.WebappUtils;
-
-const PlaybookNavbar = styled(BackstageNavbar)`
-
-`;
-
-export interface EditingMetric {
- index: number;
- metric: Metric;
-}
-
-/** @deprecated will be deprecated in the future. See `playbook_editor/outline.tsx`. */
-const PlaybookEdit = (props: Props) => {
- const dispatch = useDispatch();
-
- const {formatMessage} = useIntl();
-
- const currentUserId = useSelector(getCurrentUserId);
-
- const [playbook, setPlaybook] = useState(() => {
- const initialPlaybook: DraftPlaybookWithChecklist = {
- ...(PresetTemplates.find((t) => t.title === props.template)?.template || emptyPlaybook()),
- reminder_timer_default_seconds: 86400,
- members: [{user_id: currentUserId, roles: [PlaybookRole.Member, PlaybookRole.Admin]}],
- team_id: props.teamId || '',
- };
-
- if (props.name) {
- initialPlaybook.title = props.name;
- }
- if (props.description) {
- initialPlaybook.description = props.description;
- }
-
- initialPlaybook.public = Boolean(props.public);
-
- return initialPlaybook;
- });
- const [changesMade, setChangesMade] = useState(false);
- const [curEditingMetric, setCurEditingMetric] = useState(null);
-
- const [showTitleDescriptionModal, setShowTitleDescriptionModal] = useState(false);
-
- const urlParams = useParams();
-
- const [fetchingState, setFetchingState] = useState(FetchingStateType.loading);
-
- let tab = 0;
- if (urlParams.tabId) {
- for (let i = 0; i < tabInfo.length; i++) {
- if (urlParams.tabId === tabInfo[i].id) {
- tab = i;
- }
- }
- }
-
- const [currentTab, setCurrentTab] = useState(tab);
-
- const retrospectiveAccess = useAllowRetrospectiveAccess();
-
- useEffect(() => {
- const fetchData = async () => {
- if (urlParams.playbookId) {
- try {
- const fetchedPlaybook = await clientFetchPlaybook(urlParams.playbookId);
- if (fetchedPlaybook) {
- fetchedPlaybook.members ??= [{user_id: currentUserId, roles: [PlaybookRole.Member, PlaybookRole.Admin]}];
- fetchedPlaybook.metrics ??= [];
- setPlaybook(fetchedPlaybook);
- }
- setFetchingState(FetchingStateType.fetched);
- } catch {
- setFetchingState(FetchingStateType.notFound);
- }
- }
- };
- fetchData();
- }, [urlParams.playbookId, props.isNew, props.teamId, currentUserId]);
-
- useEffect(() => {
- const teamId = props.teamId || playbook.team_id;
- if (!teamId) {
- return;
- }
-
- dispatch(selectTeam(teamId));
- dispatch(fetchMyChannelsAndMembers(teamId));
- dispatch(fetchMyCategories(teamId));
- }, [dispatch, props.teamId, playbook.team_id]);
-
- const showChecklistsTutorial = useShowTutorialStep(PlaybookEditTutorialSteps.Checklists, TutorialTourCategories.PLAYBOOK_EDIT);
- const showActionsTutorial = useShowTutorialStep(PlaybookEditTutorialSteps.Actions, TutorialTourCategories.PLAYBOOK_EDIT);
- const showStatusUpdatesTutorial = useShowTutorialStep(PlaybookEditTutorialSteps.StatusUpdates, TutorialTourCategories.PLAYBOOK_EDIT);
- const showRetrospectiveTutorial = useShowTutorialStep(PlaybookEditTutorialSteps.Retrospective, TutorialTourCategories.PLAYBOOK_EDIT);
-
- const punchout = useMeasurePunchouts(['tabs-header'], [], {y: -100, height: 100, x: 0, width: 0});
-
- const checklistsTutorial = (showChecklistsTutorial &&
- }
- screen={}
- tutorialCategory={TutorialTourCategories.PLAYBOOK_EDIT}
- step={PlaybookEditTutorialSteps.Checklists}
- placement='bottom'
- pulsatingDotPlacement='bottom'
- pulsatingDotTranslate={{x: 0, y: 2}}
- autoTour={true}
- width={352}
- punchOut={punchout}
- onNextNavigateTo={() => setCurrentTab(1)}
- onFinish={() => setCurrentTab(0)}
- telemetryTag={`tutorial_tip_Playbook_Edit_${PlaybookEditTutorialSteps.Checklists}_Checklists`}
- />
- );
-
- const actionsTutorial = (showActionsTutorial &&
- }
- screen={}
- tutorialCategory={TutorialTourCategories.PLAYBOOK_EDIT}
- step={PlaybookEditTutorialSteps.Actions}
- placement='bottom'
- pulsatingDotPlacement='bottom'
- pulsatingDotTranslate={{x: 0, y: 2}}
- autoTour={true}
- width={352}
- punchOut={punchout}
- onNextNavigateTo={() => setCurrentTab(2)}
- onPrevNavigateTo={() => setCurrentTab(0)}
- onFinish={() => setCurrentTab(0)}
- telemetryTag={`tutorial_tip_Playbook_Edit_${PlaybookEditTutorialSteps.Actions}_Actions`}
- />
- );
-
- const statusUpdatesTutorial = (showStatusUpdatesTutorial &&
- }
- screen={}
- tutorialCategory={TutorialTourCategories.PLAYBOOK_EDIT}
- step={PlaybookEditTutorialSteps.StatusUpdates}
- placement='bottom'
- pulsatingDotPlacement='bottom'
- pulsatingDotTranslate={{x: 0, y: 2}}
- autoTour={true}
- width={352}
- punchOut={punchout}
- onNextNavigateTo={() => setCurrentTab(3)}
- onPrevNavigateTo={() => setCurrentTab(1)}
- onFinish={() => setCurrentTab(0)}
- telemetryTag={`tutorial_tip_Playbook_Edit_${PlaybookEditTutorialSteps.StatusUpdates}_StatusUpdates`}
- />
- );
-
- const retrospectiveTutorial = (showRetrospectiveTutorial &&
- }
- screen={}
- tutorialCategory={TutorialTourCategories.PLAYBOOK_EDIT}
- step={PlaybookEditTutorialSteps.Retrospective}
- placement='bottom'
- pulsatingDotPlacement='bottom'
- pulsatingDotTranslate={{x: 0, y: 2}}
- autoTour={true}
- width={352}
- punchOut={punchout}
- onPrevNavigateTo={() => setCurrentTab(2)}
- onFinish={() => setCurrentTab(0)}
- telemetryTag={`tutorial_tip_Playbook_Edit_${PlaybookEditTutorialSteps.Retrospective}_Retrospective`}
- />
- );
-
- const tutorials = new Map([
- ['checklists', checklistsTutorial],
- ['actions', actionsTutorial],
- ['status', statusUpdatesTutorial],
- ['retrospective', retrospectiveTutorial],
- ]);
-
- const updateChecklist = (newChecklist: Checklist[]) => {
- setPlaybook({
- ...playbook,
- checklists: newChecklist,
- });
- setChangesMade(true);
- };
-
- const handleTitleAndDescriptionChange = (title: string, description: string) => {
- if (title.trim().length === 0) {
- // Keep the original title from the props, only change the description
- setPlaybook({
- ...playbook,
- description,
- });
- return;
- }
-
- setPlaybook({
- ...playbook,
- title,
- description,
- });
- setChangesMade(true);
- };
-
- const onSave = async () => {
- const pb = setPlaybookDefaults(playbook);
-
- pb.webhook_on_creation_urls = pb.webhook_on_creation_urls.filter((url) => url.trim().length > 0);
- pb.webhook_on_status_update_urls = pb.webhook_on_status_update_urls.filter((url) => url.trim().length > 0);
-
- const data = await savePlaybook(pb);
- setChangesMade(false);
- onClose(data?.id);
- };
-
- const onClose = (id?: string) => {
- const playbookId = urlParams.playbookId || id;
- if (playbookId) {
- navigateToPluginUrl(`/playbooks/${playbookId}/outline`);
- } else {
- navigateToPluginUrl('/playbooks');
- }
- };
-
- const searchUsers = (term: string) => {
- return dispatch(searchProfiles(term, {team_id: props.teamId || playbook.team_id}));
- };
-
- const getUsers = () => {
- return dispatch(getProfilesInTeam(props.teamId || playbook.team_id, 0, PROFILE_CHUNK_SIZE, '', {active: true}));
- };
-
- if (!props.isNew) {
- switch (fetchingState) {
- case FetchingStateType.notFound:
- return ;
- case FetchingStateType.loading:
- return null;
- }
- } else if (!props.teamId) {
- return ;
- }
-
- const playbookTitle = playbook.title || formatMessage({defaultMessage: 'Untitled playbook'});
-
- return (
-
-
- setShowTitleDescriptionModal(true)}
- >
-
- {playbookTitle}
- <i className='editable-trigger icon-pencil-outline'/>
-
-
- {playbook.description || formatMessage({defaultMessage: 'Add playbook description...'})}
-
- setShowTitleDescriptionModal(false)}
- playbookTitle={playbookTitle}
- playbookDescription={playbook.description}
- />
-
-
- onClose()}
- >
-
- {formatMessage({defaultMessage: 'Cancel'})}
-
-
-
-
- {formatMessage({defaultMessage: 'Save'})}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- WebappUtils.browserHistory.push(path)}
- shouldBlockNavigation={(newLoc) => location.pathname !== newLoc.pathname && changesMade}
- />
-
- );
-};
-
-const Container = styled.div`
- display: flex;
- flex-direction: row;
- flex-grow: 1;
- align-items: stretch;
- width: 100%;
-`;
-
-const EditView = styled.div`
- display: flex;
- flex-direction: column;
- align-items: stretch;
- flex-grow: 1;
-`;
-
-const TabsHeader = styled.div`
- height: 72px;
- min-height: 72px;
- display: flex;
- padding: 0 32px;
- border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
- white-space: nowrap;
-`;
-
-const EditContent = styled.div`
- background: rgba(var(--center-channel-color-rgb), 0.04);
- flex-grow: 1;
-`;
-
-const NavbarPadding = styled.div`
- flex-grow: 1;
-`;
-
-const SecondaryButtonLarger = styled(SecondaryButtonSmaller)`
- height: 40px;
- font-weight: 600;
- font-size: 14px;
- padding: 0 20px;
-`;
-
-const TitleAndDescription = styled.div`
- ${RegularHeading} {
- }
-
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding: 0 15px;
- font-weight: normal;
-
- cursor: pointer;
-
- i {
- color: rgba(var(--center-channel-color-rgb), 0.56);
- }
-
- :hover {
- i {
- color: var(--center-channel-color);
- }
- }
-`;
-
-const Title = styled.div`
- font-size: 20px;
- line-height: 28px;
-
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 650px;
- white-space: nowrap;
-`;
-
-const Description = styled.div`
- font-size: 11px;
- line-height: 16px;
-
- color: rgba(var(--center-channel-color-rgb), 0.64);
-
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 530px;
- white-space: nowrap;
-`;
-
-const OuterContainer = styled.div`
- background: var(center-channel-bg);
- display: flex;
- flex-direction: column;
- min-height: 100vh;
-`;
-
-export default PlaybookEdit;
diff --git a/webapp/src/components/backstage/playbook_edit/retrospective_edit.tsx b/webapp/src/components/backstage/playbook_edit/retrospective_edit.tsx
deleted file mode 100644
index 1eef117816..0000000000
--- a/webapp/src/components/backstage/playbook_edit/retrospective_edit.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-import {BackstageGroupToggleHeader, SidebarBlock} from 'src/components/backstage/playbook_edit/styles';
-import {
- BackstageSubheader,
- BackstageSubheaderDescription,
- StyledMarkdownTextbox,
- StyledSelect,
- TabContainer,
-} from 'src/components/backstage/styles';
-import {DraftPlaybookWithChecklist, PlaybookWithChecklist} from 'src/types/playbook';
-import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
-import Metrics from 'src/components/backstage/playbook_edit/metrics/metrics';
-import {EditingMetric} from 'src/components/backstage/playbook_edit/playbook_edit';
-
-const retrospectiveReminderOptions = [
- {value: 0, label: 'Once'},
- {value: 3600, label: '1hr'},
- {value: 14400, label: '4hr'},
- {value: 86400, label: '24hr'},
- {value: 604800, label: '7days'},
-] as const;
-
-interface Props {
- playbook: DraftPlaybookWithChecklist | PlaybookWithChecklist;
- retrospectiveAccess: boolean;
- setPlaybook: React.Dispatch>;
- setChangesMade: (b: boolean) => void;
- curEditingMetric: EditingMetric | null;
- setCurEditingMetric: React.Dispatch>;
-}
-
-const RetrospectiveEdit = ({
- playbook,
- retrospectiveAccess,
- setPlaybook,
- setChangesMade,
- curEditingMetric,
- setCurEditingMetric,
-}: Props) => {
- const {formatMessage} = useIntl();
-
- if (!retrospectiveAccess) {
- return (
-
- {'Upgrade required for access to retrospective features.'}
-
- );
- }
-
- return (
-
-
-
- {
- setPlaybook({
- ...playbook,
- retrospective_enabled: !playbook.retrospective_enabled,
- });
- setChangesMade(true);
- }}
- />
- {formatMessage({defaultMessage: 'Enable retrospective'})}
-
-
-
-
- {formatMessage({defaultMessage: 'Retrospective reminder interval'})}
-
- {formatMessage({defaultMessage: 'Reminds the channel at a specified interval to fill out the retrospective.'})}
-
-
- option.value === playbook.retrospective_reminder_interval_seconds)}
- onChange={(option: { label: string, value: number }) => {
- setPlaybook({
- ...playbook,
- retrospective_reminder_interval_seconds: option ? option.value : option,
- });
- setChangesMade(true);
- }}
- options={retrospectiveReminderOptions}
- isClearable={false}
- isDisabled={!playbook.retrospective_enabled}
- />
-
-
-
- {formatMessage({defaultMessage: 'Key metrics'})}
-
- {formatMessage({defaultMessage: 'Configure custom metrics to fill out with the retrospective report.'})}
-
-
-
-
-
-
- {formatMessage({defaultMessage: 'Retrospective template'})}
-
- {formatMessage({defaultMessage: 'Default text for the retrospective.'})}
-
-
- {
- setPlaybook({
- ...playbook,
- retrospective_template: value,
- });
- setChangesMade(true);
- }}
- disabled={!playbook.retrospective_enabled}
- />
-
-
- );
-};
-
-export default RetrospectiveEdit;
diff --git a/webapp/src/components/backstage/playbook_edit/stages_and_steps_edit.tsx b/webapp/src/components/backstage/playbook_edit/stages_and_steps_edit.tsx
deleted file mode 100644
index c52ef502be..0000000000
--- a/webapp/src/components/backstage/playbook_edit/stages_and_steps_edit.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useState} from 'react';
-import {
- DragDropContext,
- Droppable,
- DropResult,
- DroppableProvided,
- Draggable,
- DraggableProvided,
-} from 'react-beautiful-dnd';
-
-import styled from 'styled-components';
-
-import {FormattedMessage, useIntl} from 'react-intl';
-
-import {Checklist, emptyChecklist} from 'src/types/playbook';
-
-import HorizontalBar from 'src/components/backstage/horizontal_bar';
-
-import ConfirmModal from 'src/components/widgets/confirmation_modal';
-
-import {StageEditor} from 'src/components/backstage/stage_edit';
-import DragHandle from 'src/components/backstage/drag_handle';
-
-const NewStage = styled.button`
- border: none;
- background: none;
- color: rgba(var(--center-channel-color-rgb), 0.56);
- padding: 12px 20px;
- margin: 0 0 0 20px;
-
- &:hover {
- color: var(--center-channel-color);
- }
-`;
-
-const NewStageContainer = styled.div`
- margin: 12px 32px 0 0;
-`;
-
-interface Props {
- checklists: Checklist[];
- onChange: (checklist: Checklist[]) => void;
-}
-
-export const StagesAndStepsEdit = (props: Props): React.ReactElement => {
- const {formatMessage} = useIntl();
- const [confirmRemoveChecklistNum, setConfirmRemoveChecklistNum] = useState(-1);
-
- const onDragEnd = (result: DropResult) => {
- if (!result.destination) {
- return;
- }
-
- if (result.destination.droppableId === result.source.droppableId &&
- result.destination.index === result.source.index) {
- return;
- }
-
- if (result.type === 'checklist') {
- onReorderChecklist(result.source.index, result.destination.index);
- return;
- }
-
- if (result.type === 'checklist_item') {
- const sourceChecklistIndex = result.source.droppableId;
- const destinationChecklistIndex = result.destination.droppableId;
- onReorderChecklistItem(Number(sourceChecklistIndex), Number(destinationChecklistIndex), result.source.index, result.destination.index);
- }
- };
-
- const onReorderChecklist = (sourceIndex: number, destinationIndex: number) => {
- const newChecklist = [...props.checklists];
- const [removed] = newChecklist.splice(sourceIndex, 1);
- newChecklist.splice(destinationIndex, 0, removed);
-
- props.onChange(newChecklist);
- };
-
- const onReorderChecklistItem = (checklistIndex: number, newChecklistIndex: number, checklistItemIndex: number, newChecklistItemIndex: number): void => {
- const newChecklist = [...props.checklists];
-
- if (checklistIndex === newChecklistIndex) {
- // items moved within stage
- const changedChecklist = {...newChecklist[checklistIndex]} as Checklist;
- const changedChecklistItems = [...changedChecklist.items];
- const [removed] = changedChecklistItems.splice(checklistItemIndex, 1);
- changedChecklistItems.splice(newChecklistItemIndex, 0, removed);
- changedChecklist.items = changedChecklistItems;
-
- newChecklist[checklistIndex] = changedChecklist;
- props.onChange(newChecklist);
- return;
- }
-
- // items moved between stages
- const sourceChangedChecklist = {...newChecklist[checklistIndex]} as Checklist;
- const destinationChangedChecklist = {...newChecklist[newChecklistIndex]} as Checklist;
- const itemToMove = sourceChangedChecklist.items[checklistItemIndex];
-
- // Remove from current index
- const sourceChangedChecklistItems = Array.from(sourceChangedChecklist.items);
- sourceChangedChecklistItems.splice(checklistItemIndex, 1);
-
- // Add in new index
- const destinationChangedChecklistItems = Array.from(destinationChangedChecklist.items);
- destinationChangedChecklistItems.splice(newChecklistItemIndex, 0, itemToMove);
-
- sourceChangedChecklist.items = sourceChangedChecklistItems;
- destinationChangedChecklist.items = destinationChangedChecklistItems;
-
- newChecklist[checklistIndex] = sourceChangedChecklist;
- newChecklist[newChecklistIndex] = destinationChangedChecklist;
-
- props.onChange(newChecklist);
- };
-
- const onAddChecklist = () => {
- const checklist = emptyChecklist();
- checklist.title = 'New stage';
- const newChecklist = [...props.checklists, checklist];
-
- props.onChange(newChecklist);
- };
-
- const onChangeChecklist = (checklistIndex: number, checklist: Checklist) => {
- const newChecklist = [...props.checklists];
- newChecklist[checklistIndex] = checklist;
-
- props.onChange(newChecklist);
- };
- const onRemoveChecklist = (checklistIndex: number) => {
- const newChecklist = [...props.checklists];
- newChecklist.splice(checklistIndex, 1);
-
- props.onChange(newChecklist);
- };
-
- const handleDeletePressed = (checklistIndex: number) => {
- const filteredChecklistItems = props.checklists[checklistIndex].items.filter((item) => item.title || item.command);
- if (filteredChecklistItems.length === 0) {
- onRemoveChecklist(checklistIndex);
- } else {
- setConfirmRemoveChecklistNum(checklistIndex);
- }
- };
-
- return (
- <>
-
-
- {(droppableProvided: DroppableProvided) => (
-
- {props.checklists?.map((checklist: Checklist, checklistIndex: number) => (
-
- {(draggableProvided: DraggableProvided) => (
- handleDeletePressed(checklistIndex)}
- >
- {
- onChangeChecklist(checklistIndex, newChecklist);
- }}
- />
-
- )}
-
- ))}
- {droppableProvided.placeholder}
-
- )}
-
-
-
-
-
-
-
-
-
- = 0}
- title={formatMessage({defaultMessage: 'Remove checklist'})}
- message={formatMessage({defaultMessage: 'Are you sure you want to remove the checklist? All tasks will be removed.'})}
- confirmButtonText={formatMessage({defaultMessage: 'Remove'})}
- onConfirm={() => {
- onRemoveChecklist(confirmRemoveChecklistNum);
- setConfirmRemoveChecklistNum(-1);
- }}
- onCancel={() => setConfirmRemoveChecklistNum(-1)}
- />
-
-
- );
-};
diff --git a/webapp/src/components/backstage/playbook_edit/status_updates_edit.tsx b/webapp/src/components/backstage/playbook_edit/status_updates_edit.tsx
deleted file mode 100644
index 4dd514b92a..0000000000
--- a/webapp/src/components/backstage/playbook_edit/status_updates_edit.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React from 'react';
-import {useIntl} from 'react-intl';
-
-import {
- BackstageSubheader,
- BackstageSubheaderDescription,
- StyledMarkdownTextbox,
- TabContainer,
-} from 'src/components/backstage/styles';
-import {Toggle} from 'src/components/backstage/playbook_edit/automation/toggle';
-import DefaultUpdateTimer from 'src/components/backstage/default_update_timer';
-import {
- BackstageGroupToggleHeader,
- Section,
- SectionTitle,
- Setting,
- SidebarBlock,
-} from 'src/components/backstage/playbook_edit/styles';
-import {DraftPlaybookWithChecklist, PlaybookWithChecklist} from 'src/types/playbook';
-import {Broadcast} from 'src/components/backstage/playbook_edit/automation/broadcast';
-import {WebhookSetting} from 'src/components/backstage/playbook_edit/automation/webhook_setting';
-
-interface Props {
- playbook: DraftPlaybookWithChecklist | PlaybookWithChecklist;
- setPlaybook: React.Dispatch>;
- setChangesMade: (b: boolean) => void;
-}
-
-const StatusUpdatesEdit = ({playbook, setPlaybook, setChangesMade}: Props) => {
- const {formatMessage} = useIntl();
-
- const handleToggleBroadcastChannels = () => {
- setPlaybook({
- ...playbook,
- broadcast_enabled: !playbook.broadcast_enabled && playbook.status_update_enabled,
- });
- setChangesMade(true);
- };
-
- const handleBroadcastChannelSelected = (channelIds: string[]) => {
- // assumes no repeated elements on any of the arrays
- if (channelIds.length !== playbook.broadcast_channel_ids.length || channelIds.some((id) => !playbook.broadcast_channel_ids.includes(id))) {
- setPlaybook({
- ...playbook,
- broadcast_channel_ids: channelIds,
- });
- setChangesMade(true);
- }
- };
-
- const handleToggleWebhookOnStatusUpdate = () => {
- setPlaybook({
- ...playbook,
- webhook_on_status_update_enabled: !playbook.webhook_on_status_update_enabled && playbook.status_update_enabled,
- });
- setChangesMade(true);
- };
-
- const handleWebhookOnStatusUpdateChange = (urls: string) => {
- setPlaybook({
- ...playbook,
- webhook_on_status_update_urls: urls.split('\n'),
- });
- setChangesMade(true);
- };
-
- return (
-
-
-
- {
- setPlaybook({
- ...playbook,
- status_update_enabled: !playbook.status_update_enabled,
- webhook_on_status_update_enabled: playbook.webhook_on_status_update_enabled && !playbook.status_update_enabled,
- broadcast_enabled: playbook.broadcast_enabled && !playbook.status_update_enabled,
- });
- setChangesMade(true);
- }}
- />
- {formatMessage({defaultMessage: 'Enable status updates'})}
-
-
-
- {
- if (seconds !== playbook.reminder_timer_default_seconds &&
- seconds > 0) {
- setPlaybook({
- ...playbook,
- reminder_timer_default_seconds: seconds,
- });
- }
- }}
- disabled={!playbook.status_update_enabled}
- />
-
-
-
- {formatMessage({defaultMessage: 'Status updates'})}
-
- {formatMessage({defaultMessage: 'This template helps to standardize the format for recurring updates that take place throughout each run to keep.'})}
-
-
- {
- setPlaybook({
- ...playbook,
- reminder_message_template: value,
- });
- setChangesMade(true);
- }}
- disabled={!playbook.status_update_enabled}
- />
-
-
-
- {formatMessage({defaultMessage: 'When an update is posted'})}
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default StatusUpdatesEdit;
diff --git a/webapp/src/components/backstage/playbook_edit/styles.tsx b/webapp/src/components/backstage/playbook_edit/styles.tsx
index e40beffc6f..ea40b60d10 100644
--- a/webapp/src/components/backstage/playbook_edit/styles.tsx
+++ b/webapp/src/components/backstage/playbook_edit/styles.tsx
@@ -19,25 +19,6 @@ export const SidebarBlock = styled.div`
margin: 0 0 40px;
`;
-export const Setting = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
-
- margin-bottom: 24px;
-`;
-
-export const BackstageGroupToggleHeader = styled.div`
- font-weight: 600;
- font-size: 16px;
- line-height: 24px;
- color: var(--center-channel-color);
- display: flex;
- flex-direction: row;
- align-items: center;
- column-gap: 12px;
-`;
-
export const ClockOutline = ({sizePx, color}: {sizePx: number, color?: string}) => (
void;
- show: boolean;
- onHide: () => void;
- playbookTitle: string;
- playbookDescription: string;
-}
-
-const EditTitleDescriptionModal = (props: Props) => {
- const {formatMessage} = useIntl();
-
- const [showConfirm, setShowConfirm] = useState(false);
- const [title, setTitle] = useState(props.playbookTitle);
- const [description, setDescription] = useState(props.playbookDescription);
-
- useEffect(() => {
- setTitle(props.playbookTitle);
- setDescription(props.playbookDescription);
- }, [props.playbookTitle, props.playbookDescription]);
-
- const handleConfirmNameDescriptionModal = () => {
- props.onChange(title, description);
- };
-
- const onTentativeHide = () => {
- if (props.playbookDescription !== description || props.playbookTitle !== title) {
- setShowConfirm(true);
- } else {
- onActualHide();
- }
- };
-
- const onActualHide = () => {
- setTimeout(() => {
- props.onHide();
- setShowConfirm(false);
- setDescription(props.playbookDescription);
- setTitle(props.playbookTitle);
- }, 300);
- };
-
- return (
- <>
-
-
-
- {formatMessage({defaultMessage: 'Playbook name'})}
-
- setTitle(e.target.value)}
- />
-
-
-
- setShowConfirm(false)}
- />
-
- );
-};
-
-const EditTitle = styled.div`
- display: flex;
- flex-direction: column;
-
- margin-bottom: 24px;
- padding-top: 8px;
-`;
-
-const EditTitleInput = styled(BaseInput)`
- margin: 0;
-
- height: 48px;
- font-size: 16px;
- color: var(--center-channel-color);
-`;
-
-export default EditTitleDescriptionModal;
diff --git a/webapp/src/components/backstage/playbook_editor/controls.tsx b/webapp/src/components/backstage/playbook_editor/controls.tsx
index efb9fc29a1..035909265b 100644
--- a/webapp/src/components/backstage/playbook_editor/controls.tsx
+++ b/webapp/src/components/backstage/playbook_editor/controls.tsx
@@ -2,26 +2,37 @@
// See LICENSE.txt for license information.
import styled, {css} from 'styled-components';
-import React, {PropsWithChildren, useEffect} from 'react';
+import React, {PropsWithChildren, useEffect, useMemo} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {Link} from 'react-router-dom';
-import Icon from '@mdi/react';
-import {mdiClipboardPlayOutline} from '@mdi/js';
+import {
+ PlusIcon,
+ CloseIcon,
+ ArchiveOutlineIcon,
+ ExportVariantIcon,
+ ContentCopyIcon,
+ PencilOutlineIcon,
+ AccountMultipleOutlineIcon,
+ StarOutlineIcon,
+ StarIcon,
+ LinkVariantIcon,
+ RestoreIcon,
+ PlayOutlineIcon,
+} from '@mattermost/compass-icons/components';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
-import {Client4} from 'mattermost-redux/client';
import {getTeam} from 'mattermost-redux/selectors/entities/teams';
import {Team} from '@mattermost/types/teams';
import {GlobalState} from '@mattermost/types/store';
-import {getCurrentUserId, getCurrentUser} from 'mattermost-redux/selectors/entities/users';
+import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl';
import {createGlobalState} from 'react-use';
-import {pluginUrl, navigateToPluginUrl, navigateToUrl} from 'src/browser_routing';
+import {pluginUrl, navigateToPluginUrl} from 'src/browser_routing';
import {PlaybookPermissionsMember, useHasPlaybookPermission, useHasTeamPermission} from 'src/hooks';
import {useToaster} from '../toast_banner';
@@ -32,32 +43,40 @@ import {
telemetryEventForPlaybook,
playbookExportProps,
archivePlaybook,
- createPlaybookRun,
clientFetchPlaybookFollowers,
getSiteUrl,
+ restorePlaybook,
} from 'src/client';
import {OVERLAY_DELAY} from 'src/constants';
import {ButtonIcon, PrimaryButton, SecondaryButton, TertiaryButton} from 'src/components/assets/buttons';
import CheckboxInput from '../runs_list/checkbox_input';
-import StatusBadge, {BadgeType} from 'src/components/backstage/status_badge';
-import {displayEditPlaybookAccessModal} from 'src/actions';
+import {displayEditPlaybookAccessModal, openPlaybookRunModal} from 'src/actions';
import {PlaybookPermissionGeneral} from 'src/types/permissions';
-import DotMenu, {DropdownMenuItem, DropdownMenuItemStyled} from 'src/components/dot_menu';
+import DotMenu, {DropdownMenuItem as DropdownMenuItemBase, DropdownMenuItemStyled, iconSplitStyling} from 'src/components/dot_menu';
import useConfirmPlaybookArchiveModal from '../archive_playbook_modal';
import CopyLink from 'src/components/widgets/copy_link';
import useConfirmPlaybookRestoreModal from '../restore_playbook_modal';
-
-type ControlProps = {playbook: {
- id: string,
- public: boolean,
- default_playbook_member_role: string,
- title: string,
- delete_at: number,
- team_id: string,
- description: string,
- members: PlaybookPermissionsMember[],
-}};
+import {usePlaybookMembership, useUpdatePlaybook} from 'src/graphql/hooks';
+import {StyledDropdownMenuItem} from '../shared';
+import {copyToClipboard} from 'src/utils';
+import {useLHSRefresh} from '../lhs_navigation';
+
+type ControlProps = {
+ playbook: {
+ id: string,
+ public: boolean,
+ default_playbook_member_role: string,
+ default_owner_id: string,
+ default_owner_enabled: boolean,
+ title: string,
+ delete_at: number,
+ team_id: string,
+ description: string,
+ members: PlaybookPermissionsMember[],
+ }
+ refetch?: () => void;
+};
type StyledProps = {className?: string;};
@@ -105,26 +124,19 @@ export const Back = styled((props: StyledProps) => {
`;
-export const Members = (props: {playbookId: string, numMembers: number}) => {
+export const Members = (props: {playbookId: string, numMembers: number, refetch: () => void}) => {
const dispatch = useDispatch();
return (
- dispatch(displayEditPlaybookAccessModal(props.playbookId))}>
+ dispatch(displayEditPlaybookAccessModal(props.playbookId, props.refetch))}
+ >
);
};
-export const Share = ({playbook: {id}}: ControlProps) => {
- const dispatch = useDispatch();
- return (
- dispatch(displayEditPlaybookAccessModal(id))}>
-
-
-
- );
-};
-
export const CopyPlaybook = ({playbook: {title, id}}: ControlProps) => {
return (
{
);
};
-export const ArchivedLabel = ({playbook: {delete_at}}: ControlProps) => {
- const archived = delete_at !== 0;
- if (!archived) {
- return null;
- }
- return (
-
- );
-};
-
const changeFollowing = async (playbookId: string, userId: string, following: boolean) => {
if (!playbookId || !userId) {
return null;
@@ -241,44 +240,32 @@ export const AutoFollowToggle = ({playbook}: ControlProps) => {
};
const LEARN_PLAYBOOKS_TITLE = 'Learn how to use playbooks';
-const playbookIsTutorialPlaybook = (playbookTitle?: string) => playbookTitle === LEARN_PLAYBOOKS_TITLE;
+export const playbookIsTutorialPlaybook = (playbookTitle?: string) => playbookTitle === LEARN_PLAYBOOKS_TITLE;
export const RunPlaybook = ({playbook}: ControlProps) => {
+ const dispatch = useDispatch();
const {formatMessage} = useIntl();
const team = useSelector((state) => getTeam(state, playbook?.team_id || ''));
- const currentUser = useSelector(getCurrentUser);
const isTutorialPlaybook = playbookIsTutorialPlaybook(playbook.title);
const hasPermissionToRunPlaybook = useHasPlaybookPermission(PlaybookPermissionGeneral.RunCreate, playbook);
const enableRunPlaybook = playbook.delete_at === 0 && hasPermissionToRunPlaybook;
- const runPlaybook = async () => {
- if (playbook && isTutorialPlaybook) {
- const playbookRun = await createPlaybookRun(playbook.id, currentUser.id, playbook.team_id, `${currentUser.username}'s onboarding run`, playbook.description);
- const channel = await Client4.getChannel(playbookRun.channel_id);
-
- navigateToUrl({
- pathname: `/${team.name}/channels/${channel.name}`,
- search: '?forceRHSOpen&openTakeATourDialog',
- });
- return;
- }
- if (playbook?.id) {
- telemetryEventForPlaybook(playbook.id, 'playbook_dashboard_run_clicked');
- navigateToUrl(`/${team.name || ''}/_playbooks/${playbook?.id || ''}/run`);
- }
- };
-
return (
{
+ dispatch(openPlaybookRunModal(
+ playbook.id,
+ playbook.default_owner_enabled ? playbook.default_owner_id : null,
+ playbook.description,
+ team.id,
+ team.name
+ ));
+ }}
disabled={!enableRunPlaybook}
title={enableRunPlaybook ? formatMessage({defaultMessage: 'Run Playbook'}) : formatMessage({defaultMessage: 'You do not have permissions'})}
data-testid='run-playbook'
>
-
+
{isTutorialPlaybook ? (
) : (
@@ -288,6 +275,85 @@ export const RunPlaybook = ({playbook}: ControlProps) => {
);
};
+export const JoinPlaybook = ({playbook: {id: playbookId}, refetch}: ControlProps & {refetch: () => void;}) => {
+ const {formatMessage} = useIntl();
+ const currentUserId = useSelector(getCurrentUserId);
+ const {join} = usePlaybookMembership(playbookId, currentUserId);
+ const {setFollowing} = useEditorFollowersMeta(playbookId);
+
+ return (
+ {
+ await join();
+ await setFollowing(true);
+ refetch();
+ }}
+ data-testid='join-playbook'
+ >
+
+ {formatMessage({defaultMessage: 'Join playbook'})}
+
+ );
+};
+
+export const FavoritePlaybookMenuItem = (props: {playbookId: string, isFavorite: boolean}) => {
+ const {formatMessage} = useIntl();
+ const refreshLHS = useLHSRefresh();
+ const updatePlaybook = useUpdatePlaybook(props.playbookId);
+
+ const toggleFavorite = async () => {
+ await updatePlaybook({isFavorite: !props.isFavorite});
+ refreshLHS();
+ };
+ return (
+
+ {props.isFavorite ? (
+ <>{formatMessage({defaultMessage: 'Unfavorite'})}
+ ) : (
+ <>{formatMessage({defaultMessage: 'Favorite'})}
+ )}
+
+ );
+};
+
+export const CopyPlaybookLinkMenuItem = (props: {playbookId: string}) => {
+ const {formatMessage} = useIntl();
+ const {add: addToast} = useToaster();
+
+ return (
+ {
+ copyToClipboard(getSiteUrl() + '/playbooks/playbooks/' + props.playbookId);
+ addToast(formatMessage({defaultMessage: 'Copied!'}));
+ }}
+ >
+
+
+
+ );
+};
+
+export const LeavePlaybookMenuItem = (props: {playbookId: string}) => {
+ const currentUserId = useSelector(getCurrentUserId);
+ const refreshLHS = useLHSRefresh();
+
+ const {leave} = usePlaybookMembership(props.playbookId, currentUserId);
+ return (
+ {
+ await leave();
+ refreshLHS();
+ }}
+ >
+
+
+
+ );
+};
+
type TitleMenuProps = {
className?: string;
editTitle: () => void;
@@ -303,20 +369,26 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
navigateToPluginUrl('/playbooks');
}
});
- const [confirmRestoreModal, openConfirmRestoreModal] = useConfirmPlaybookRestoreModal();
+ const [confirmRestoreModal, openConfirmRestoreModal] = useConfirmPlaybookRestoreModal((playbookId: string) => restorePlaybook(playbookId));
const {add: addToast} = useToaster();
+ const currentUserId = useSelector(getCurrentUserId);
+
const archived = playbook.delete_at !== 0;
+ const currentUserMember = useMemo(() => playbook?.members.find(({user_id}) => user_id === currentUserId), [playbook?.members, currentUserId]);
const permissionForDuplicate = useHasTeamPermission(playbook.team_id, 'playbook_public_create');
+ const {leave} = usePlaybookMembership(playbook.id, currentUserId);
+
return (
<>
{children}
@@ -324,18 +396,25 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
}
>
- dispatch(displayEditPlaybookAccessModal(playbook.id))}
- >
-
-
-
-
-
+ {currentUserMember && (
+ <>
+ dispatch(displayEditPlaybookAccessModal(playbook.id, refetch))}
+ >
+
+
+
+
+
+
+
+
+
+ )}
{
const newID = await clientDuplicatePlaybook(playbook.id);
@@ -346,30 +425,50 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
disabled={!permissionForDuplicate}
disabledAltText={formatMessage({defaultMessage: 'Duplicate is disabled for this team.'})}
>
+
telemetryEventForPlaybook(playbook.id, 'playbook_export_clicked_in_playbook')}
>
+
- {archived ? (
- openConfirmRestoreModal(playbook, () => refetch())}
- >
-
-
- ) : (
- openDeletePlaybookModal(playbook)}
- >
-
-
-
-
+ {currentUserMember && (
+ <>
+
+ {
+ await leave();
+ refetch();
+ }}
+ >
+
+
+
+
+ {archived ? (
+ openConfirmRestoreModal(playbook, () => refetch())}
+ >
+
+
+
+ ) : (
+ openDeletePlaybookModal(playbook)}
+ >
+
+
+
+
+
+ )}
+
)}
{confirmArchiveModal}
@@ -378,8 +477,12 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
);
};
-export const TitleMenu = styled(TitleMenuImpl)`
+const DropdownMenuItem = styled(DropdownMenuItemBase)`
+ ${iconSplitStyling};
+ min-width: 220px;
+`;
+export const TitleMenu = styled(TitleMenuImpl)`
`;
const buttonCommon = css`
diff --git a/webapp/src/components/backstage/playbook_editor/outline/inputs/broadcast_channels_selector.tsx b/webapp/src/components/backstage/playbook_editor/outline/inputs/broadcast_channels_selector.tsx
index 546405f33e..03141863ce 100644
--- a/webapp/src/components/backstage/playbook_editor/outline/inputs/broadcast_channels_selector.tsx
+++ b/webapp/src/components/backstage/playbook_editor/outline/inputs/broadcast_channels_selector.tsx
@@ -135,10 +135,10 @@ const BroadcastChannels = (props: Props) => {
const selectStyles: StylesConfig = {
control: (provided) => ({...provided, minWidth: 240, margin: 8}),
menu: () => ({boxShadow: 'none', width: '340px'}),
- option: (provided) => {
+ option: (provided, state) => {
return {
...provided,
- backgroundColor: 'var(--center-channel-bg)',
+ backgroundColor: state.isFocused ? 'rgba(var(--button-bg-rgb), 0.08)' : 'var(--center-channel-bg)',
color: 'unset',
};
},
diff --git a/webapp/src/components/backstage/playbook_editor/outline/inputs/webhooks_input.tsx b/webapp/src/components/backstage/playbook_editor/outline/inputs/webhooks_input.tsx
index d1374fb950..fa23be84c4 100644
--- a/webapp/src/components/backstage/playbook_editor/outline/inputs/webhooks_input.tsx
+++ b/webapp/src/components/backstage/playbook_editor/outline/inputs/webhooks_input.tsx
@@ -70,7 +70,7 @@ export const WebhooksInput = (props: Props) => {
isOpen={isOpen}
onOpenChange={setOpen}
target={target}
- initialFocus={props.webhooksDisabled ? -1 : undefined}
+ focusManager={{initialFocus: props.webhooksDisabled ? -1 : undefined}}
>