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',