diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 54da2a1fdd..6c63a86e5f 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -10,12 +10,12 @@ REMEMBER TO:
- Run `make test` to ensure unit tests passed
-->
-#### Summary
+## Summary
-#### Ticket Link
+## Ticket Link
-#### Checklist
+## Checklist
- [ ] Telemetry updated
- [ ] Gated by experimental feature flag
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index c36fc3a0b1..d7ce70a44f 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -8,7 +8,7 @@
"@apollo/client": "3.5.10",
"@floating-ui/react-dom-interactions": "0.6.3",
"@mattermost/client": "7.1.0",
- "@mattermost/compass-icons": "0.1.25",
+ "@mattermost/compass-icons": "0.1.26",
"@mattermost/types": "7.1.0",
"@mdi/js": "^6.5.95",
"@mdi/react": "1.5.0",
@@ -3881,9 +3881,9 @@
}
},
"node_modules/@mattermost/compass-icons": {
- "version": "0.1.25",
- "resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.25.tgz",
- "integrity": "sha512-1fjw3kPUXZL0dfmzz2XJUIXhXcJKFvBEw9QljjYUKiyXgK3EpA1w4TsZqJ3az/7kKq9K8qi8zLBtHw5AXr1HDA==",
+ "version": "0.1.26",
+ "resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.26.tgz",
+ "integrity": "sha512-HFhTW9yjpYWDEtjWlZ50BpgKYvdrngzwtgIz4G/ghl+BQkEbhDaM7m7hzNA1lzfdyIknu7WTqEbV8lTE6GZncQ==",
"dependencies": {
"esm": "3.2.25",
"fontello-batch-cli": "4.0.0",
@@ -25694,9 +25694,9 @@
}
},
"@mattermost/compass-icons": {
- "version": "0.1.25",
- "resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.25.tgz",
- "integrity": "sha512-1fjw3kPUXZL0dfmzz2XJUIXhXcJKFvBEw9QljjYUKiyXgK3EpA1w4TsZqJ3az/7kKq9K8qi8zLBtHw5AXr1HDA==",
+ "version": "0.1.26",
+ "resolved": "https://registry.npmjs.org/@mattermost/compass-icons/-/compass-icons-0.1.26.tgz",
+ "integrity": "sha512-HFhTW9yjpYWDEtjWlZ50BpgKYvdrngzwtgIz4G/ghl+BQkEbhDaM7m7hzNA1lzfdyIknu7WTqEbV8lTE6GZncQ==",
"requires": {
"esm": "3.2.25",
"fontello-batch-cli": "4.0.0",
diff --git a/webapp/package.json b/webapp/package.json
index 80ae23bfa6..f54568a551 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -105,7 +105,7 @@
"@apollo/client": "3.5.10",
"@floating-ui/react-dom-interactions": "0.6.3",
"@mattermost/client": "7.1.0",
- "@mattermost/compass-icons": "0.1.25",
+ "@mattermost/compass-icons": "0.1.26",
"@mattermost/types": "7.1.0",
"@mdi/js": "^6.5.95",
"@mdi/react": "1.5.0",
diff --git a/webapp/src/components/backstage/playbook_editor/controls.tsx b/webapp/src/components/backstage/playbook_editor/controls.tsx
index cc2911aa62..403a5c1635 100644
--- a/webapp/src/components/backstage/playbook_editor/controls.tsx
+++ b/webapp/src/components/backstage/playbook_editor/controls.tsx
@@ -6,9 +6,6 @@ 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, mdiRestore} from '@mdi/js';
-
import {
PlusIcon,
CloseIcon,
@@ -20,6 +17,8 @@ import {
StarOutlineIcon,
StarIcon,
LinkVariantIcon,
+ RestoreIcon,
+ PlayOutlineIcon,
} from '@mattermost/compass-icons/components';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
@@ -263,10 +262,7 @@ export const RunPlaybook = ({playbook}: ControlProps) => {
title={enableRunPlaybook ? formatMessage({defaultMessage: 'Run Playbook'}) : formatMessage({defaultMessage: 'You do not have permissions'})}
data-testid='run-playbook'
>
-
+
{isTutorialPlaybook ? (
) : (
@@ -456,10 +452,7 @@ const TitleMenuImpl = ({playbook, children, className, editTitle, refetch}: Titl
openConfirmRestoreModal(playbook, () => refetch())}
>
-
+
) : (
diff --git a/webapp/src/components/backstage/playbook_editor/outline/scroll_nav.tsx b/webapp/src/components/backstage/playbook_editor/outline/scroll_nav.tsx
index 9c99d3f981..011a61d63d 100644
--- a/webapp/src/components/backstage/playbook_editor/outline/scroll_nav.tsx
+++ b/webapp/src/components/backstage/playbook_editor/outline/scroll_nav.tsx
@@ -7,8 +7,7 @@ import {FormattedMessage} from 'react-intl';
import {useLocation} from 'react-router-dom';
-import Icon from '@mdi/react';
-import {mdiTextBoxOutline} from '@mdi/js';
+import {TextBoxOutlineIcon} from '@mattermost/compass-icons/components';
import {telemetryEventForPlaybook} from 'src/client';
import {BackstageID} from 'src/components/backstage/backstage';
@@ -118,10 +117,7 @@ const ScrollNav = ({playbookId, items, ...attrs}: Props & Attrs) => {
{...attrs}
>
diff --git a/webapp/src/components/backstage/playbook_editor/outline/section_actions.tsx b/webapp/src/components/backstage/playbook_editor/outline/section_actions.tsx
index 8420330ce4..a4b140ebaf 100644
--- a/webapp/src/components/backstage/playbook_editor/outline/section_actions.tsx
+++ b/webapp/src/components/backstage/playbook_editor/outline/section_actions.tsx
@@ -9,9 +9,7 @@ import {useDispatch} from 'react-redux';
import {getProfilesInTeam, searchProfiles} from 'mattermost-redux/actions/users';
import styled from 'styled-components';
-import {PlayIcon} from '@mattermost/compass-icons/components';
-import Icon from '@mdi/react';
-import {mdiAccountCheckOutline} from '@mdi/js';
+import {PlayIcon, AccountPlusOutlineIcon} from '@mattermost/compass-icons/components';
import {FullPlaybook, Loaded, useUpdatePlaybook} from 'src/graphql/hooks';
@@ -173,10 +171,7 @@ const LegacyActionsEdit = ({playbook}: Props) => {
-
+
diff --git a/webapp/src/components/backstage/playbook_list_row.tsx b/webapp/src/components/backstage/playbook_list_row.tsx
index 75a2b1911a..144c9ed47a 100644
--- a/webapp/src/components/backstage/playbook_list_row.tsx
+++ b/webapp/src/components/backstage/playbook_list_row.tsx
@@ -7,42 +7,26 @@ import styled from 'styled-components';
import {getTeam} from 'mattermost-redux/selectors/entities/teams';
import {useSelector, useDispatch} from 'react-redux';
import {FormattedMessage, useIntl} from 'react-intl';
-
-import {PlayOutlineIcon, ArchiveOutlineIcon, ExportVariantIcon, ContentCopyIcon, PencilOutlineIcon, CloseIcon, EyeOutlineIcon, AccountPlusOutlineIcon, DotsVerticalIcon} from '@mattermost/compass-icons/components';
-
-import Icon from '@mdi/react';
-import {mdiRestore} from '@mdi/js';
-
+import {PlayOutlineIcon, RestoreIcon, ArchiveOutlineIcon, ExportVariantIcon, ContentCopyIcon, PencilOutlineIcon, CloseIcon, EyeOutlineIcon, AccountPlusOutlineIcon, DotsVerticalIcon} from '@mattermost/compass-icons/components';
import {Client4} from 'mattermost-redux/client';
-
import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
-
import {GlobalState} from '@mattermost/types/store';
import {useHasPlaybookPermission, useHasTeamPermission} from 'src/hooks';
import {Playbook} from 'src/types/playbook';
import TextWithTooltip from 'src/components/widgets/text_with_tooltip';
-
import DotMenu, {DropdownMenuItem as DropdownMenuItemBase, DropdownMenuItemStyled, iconSplitStyling} from 'src/components/dot_menu';
-
import Tooltip from 'src/components/widgets/tooltip';
-
import {createPlaybookRun, playbookExportProps, telemetryEventForPlaybook} from 'src/client';
-
import {PlaybookPermissionGeneral} from 'src/types/permissions';
-
import {TertiaryButton, SecondaryButton} from 'src/components/assets/buttons';
-
import {navigateToUrl} from 'src/browser_routing';
-
-import {DotMenuButton} from '../dot_menu';
-
import {usePlaybookMembership} from 'src/graphql/hooks';
-
import {Timestamp} from 'src/webapp_globals';
-
import {openPlaybookRunModal} from 'src/actions';
+import {DotMenuButton} from '../dot_menu';
+
import {InfoLine} from './styles';
import {playbookIsTutorialPlaybook} from './playbook_editor/controls';
@@ -304,10 +288,7 @@ const PlaybookListRow = (props: Props) => {
-
+
) : (
diff --git a/webapp/src/components/backstage/playbook_runs/playbook_run/retrospective/timeline_event_item.tsx b/webapp/src/components/backstage/playbook_runs/playbook_run/retrospective/timeline_event_item.tsx
index abd6b9649c..68ee615345 100644
--- a/webapp/src/components/backstage/playbook_runs/playbook_run/retrospective/timeline_event_item.tsx
+++ b/webapp/src/components/backstage/playbook_runs/playbook_run/retrospective/timeline_event_item.tsx
@@ -9,9 +9,7 @@ import {useIntl} from 'react-intl';
import {DateTime} from 'luxon';
-import Icon from '@mdi/react';
-
-import {mdiClockOutline} from '@mdi/js';
+import {ClockOutlineIcon} from '@mattermost/compass-icons/components';
import {TimelineEvent, TimelineEventType} from 'src/types/rhs';
import {isMobile} from 'src/mobile';
@@ -309,10 +307,7 @@ const TimelineEventItem = (props: Props) => {
>
)}
>
-
+
{
navigateToPluginUrl(overviewURL)}>
-
+
+
+
navigateToPluginUrl(playbookURL)}>
@@ -101,11 +97,6 @@ const ThreeDotsIcon = styled(HamburgerButton)`
margin-left: 1px;
`;
-const DropdownIcon = styled(Icon)`
- color: rgba(var(--center-channel-color-rgb), 0.56);
- margin-right: 11px;
-`;
-
const IconWrapper = styled.div`
margin-right: 11px;
color: rgba(var(--center-channel-color-rgb), 0.56);
diff --git a/webapp/src/components/rhs/rhs_home_item.tsx b/webapp/src/components/rhs/rhs_home_item.tsx
index 8afc740783..6114ff02ea 100644
--- a/webapp/src/components/rhs/rhs_home_item.tsx
+++ b/webapp/src/components/rhs/rhs_home_item.tsx
@@ -7,9 +7,7 @@ import styled from 'styled-components';
import {FormattedMessage, useIntl} from 'react-intl';
import {Link} from 'react-router-dom';
-import Icon from '@mdi/react';
-import {mdiClipboardPlayOutline} from '@mdi/js';
-import {CheckAllIcon, SyncIcon, OpenInNewIcon} from '@mattermost/compass-icons/components';
+import {CheckAllIcon, SyncIcon, OpenInNewIcon, PlayOutlineIcon} from '@mattermost/compass-icons/components';
import {GlobalState} from '@mattermost/types/store';
import {Team} from '@mattermost/types/teams';
@@ -254,10 +252,7 @@ export const RHSHomePlaybook = ({playbook}: RHSHomePlaybookProps) => {
));
}}
>
-
+
}
diff --git a/webapp/src/components/sidebar/create_playbook_dropdown.tsx b/webapp/src/components/sidebar/create_playbook_dropdown.tsx
index 592f01c55b..44d43c2ca2 100644
--- a/webapp/src/components/sidebar/create_playbook_dropdown.tsx
+++ b/webapp/src/components/sidebar/create_playbook_dropdown.tsx
@@ -4,8 +4,7 @@ import {useDispatch, useSelector} from 'react-redux';
import {Tooltip, OverlayTrigger} from 'react-bootstrap';
import {useIntl} from 'react-intl';
import {getMyTeams} from 'mattermost-redux/selectors/entities/teams';
-import {mdiClipboardPlayMultipleOutline, mdiImport} from '@mdi/js';
-import Icon from '@mdi/react';
+import {ImportIcon, PlayBoxMultipleOutlineIcon, PlusIcon, GlobeIcon} from '@mattermost/compass-icons/components';
import {displayPlaybookCreateModal} from 'src/actions';
import {useImportPlaybook} from 'src/components/backstage/import_playbook';
@@ -45,7 +44,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
onClick={() => {
navigateToPluginUrl('/playbooks');
}}
- icon={}
+ icon={}
text={formatMessage({defaultMessage: 'Browse Playbooks'})}
/>
);
@@ -55,7 +54,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
id='createPlaybook'
show={true}
onClick={() => dispatch(displayPlaybookCreateModal({}))}
- icon={}
+ icon={}
text={formatMessage({defaultMessage: 'Create New Playbook'})}
/>
);
@@ -69,10 +68,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
fileInputRef?.current?.click();
}}
icon={
-
+
}
text={formatMessage({defaultMessage: 'Import Playbook'})}
/>
@@ -87,10 +83,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
navigateToPluginUrl('/runs');
}}
icon={
-
+
}
text={formatMessage({defaultMessage: 'Browse Runs'})}
/>
@@ -119,7 +112,7 @@ const CreatePlaybookDropdown = (props: CreatePlaybookDropdownProps) => {
>
<>
{inputImportPlaybook}
>
@@ -161,22 +154,18 @@ const Button = styled.button`
min-width: 28px;
height: 28px;
font-size: 18px;
- vertical-align: middle;
+ justify-content: center;
+ align-items: center;
+ display: inline-flex;
&.disabled {
background: rgba(255, 255, 255, 0.08);
}
`;
-const StyledMDIIcon = styled(Icon)`
- width: 25px;
- height: 22px;
+const IconWrapper = styled.div`
margin-right: 7px;
margin-left: 4px;
-`;
-
-const StyledIcon = styled.i`
- width: 25px;
- height: 22px;
- margin-right: 3px;
+ display: flex;
+ justify-items: center;
`;
diff --git a/webapp/webpack.config.js b/webapp/webpack.config.js
index d56c06a0f1..986aa76fb6 100644
--- a/webapp/webpack.config.js
+++ b/webapp/webpack.config.js
@@ -117,6 +117,7 @@ let config = {
},
externals: {
react: 'React',
+ 'react-dom': 'ReactDOM',
redux: 'Redux',
luxon: 'Luxon',
'react-redux': 'ReactRedux',