- {showEditTutorial &&
- }
- screen={}
- tutorialCategory={TutorialTourCategories.PLAYBOOK_PREVIEW}
- step={PlaybookPreviewTutorialSteps.EditButton}
- placement='left'
- pulsatingDotPlacement='left'
- pulsatingDotTranslate={{x: -10, y: -135}}
- autoTour={true}
- width={370}
- punchOut={punchoutEdit}
- telemetryTag={`tutorial_tip_Playbook_Preview_${PlaybookPreviewTutorialSteps.EditButton}_EditButton`}
- />
- }
- {showNavbarTutorial &&
- }
- screen={}
- tutorialCategory={TutorialTourCategories.PLAYBOOK_PREVIEW}
- step={PlaybookPreviewTutorialSteps.Navbar}
- placement='left'
- pulsatingDotPlacement='left'
- pulsatingDotTranslate={{x: -10, y: -50}}
- autoTour={true}
- width={360}
- punchOut={punchoutNavbar}
- telemetryTag={`tutorial_tip_Playbook_Preview_${PlaybookPreviewTutorialSteps.Navbar}_Navbar`}
- />
- }
- navigateToUrl(match.url.replace('/preview', '/edit'))}
- disabled={!hasEditPermissions || archived}
- title={hasEditPermissions ? formatMessage({defaultMessage: 'Edit'}) : formatMessage({defaultMessage: 'You do not have permissions'})}
- id='edit-playbook'
- data-testid='edit-playbook'
- >
-
- {formatMessage({defaultMessage: 'Edit'})}
-
-
-
- {formatMessage({defaultMessage: 'In this playbook'})}
-
-
-
-
-
- );
-};
-
-const Wrapper = styled.nav`
- width: 172px;
-
- position: sticky;
- align-self: flex-start;
- top: 116px;
-`;
-
-const EditButton = styled(SecondaryButtonLargerRight)`
- width: 100%;
- justify-content: center;
- margin-bottom: 16px;
- font-size: 14px;
-`;
-
-const Header = styled.div`
- height: 32px;
- border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
- text-transform: uppercase;
-
- font-weight: 600;
- font-size: 11px;
- line-height: 16px;
-
- color: rgba(var(--center-channel-color-rgb), 0.56);
-
- padding-left: 12px;
- padding-top: 4px;
-
- margin-bottom: 8px;
-`;
-
-const Items = styled.div`
- display: flex;
- flex-direction: column;
- margin-bottom: 16px;
-`;
-
-const generateItemComponent = (isSectionActive: (id: SectionID) => boolean, scrollToSection: (id: SectionID) => void) => {
- return (props: {id: SectionID, iconName: string, title: string, show: boolean}) => {
- if (!props.show) {
- return null;
- }
-
- return (
-