;
-}
-
-function Drafts({
- displayName,
- drafts,
- draftRemotes,
- status,
- user,
-}: Props) {
- const dispatch = useDispatch();
-
- const history = useHistory();
- const match: match<{team: string}> = useRouteMatch();
- const isDraftsTab = useRouteMatch('/:team/drafts');
-
- const isScheduledPostsTab = useRouteMatch('/:team/' + SCHEDULED_POST_URL_SUFFIX);
-
- const currentTeamId = useSelector(getCurrentTeamId);
- const getScheduledPostsByTeam = useMemo(() => makeGetScheduledPostsByTeam(), []);
- const scheduledPosts = useSelector((state: GlobalState) => getScheduledPostsByTeam(state, currentTeamId, true));
- const isScheduledPostEnabled = useSelector(isScheduledPostsEnabled);
-
- useEffect(() => {
- dispatch(selectLhsItem(LhsItemType.Page, LhsPage.Drafts));
- dispatch(suppressRHS);
-
- return () => {
- dispatch(unsuppressRHS);
- };
- }, [dispatch]);
-
- const handleSwitchTabs = useCallback((key) => {
- if (key === 0 && isScheduledPostsTab) {
- history.push(`/${match.params.team}/drafts`);
- } else if (key === 1 && isDraftsTab) {
- history.push(`/${match.params.team}/scheduled_posts`);
- }
- }, [history, isDraftsTab, isScheduledPostsTab, match]);
-
- const scheduledPostsTabHeading = useMemo(() => {
- return (
-
-
-
- {
- scheduledPosts?.length > 0 &&
-
- }
-
- );
- }, [scheduledPosts?.length]);
-
- const draftTabHeading = useMemo(() => {
- return (
-
-
-
- {
- drafts.length > 0 &&
-
- }
-
- );
- }, [drafts?.length]);
-
- const heading = useMemo(() => {
- return (
-
- );
- }, []);
-
- const subtitle = useMemo(() => {
- return (
-
- );
- }, []);
-
- const activeTab = isDraftsTab ? 0 : 1;
-
- return (
-
-
-
- {
- isScheduledPostEnabled &&
-
-
-
-
-
-
-
-
-
- }
-
- {
- !isScheduledPostEnabled &&
-
- }
-
- );
-}
-
-export default memo(Drafts);
diff --git a/webapp/channels/src/components/drafts/drafts.scss b/webapp/channels/src/components/drafts/drafts_and_schedule_posts.scss
similarity index 87%
rename from webapp/channels/src/components/drafts/drafts.scss
rename to webapp/channels/src/components/drafts/drafts_and_schedule_posts.scss
index c867f6b8fd..accfd43bc1 100644
--- a/webapp/channels/src/components/drafts/drafts.scss
+++ b/webapp/channels/src/components/drafts/drafts_and_schedule_posts.scss
@@ -18,9 +18,8 @@
display: flex;
overflow: auto;
width: 100%;
- height: 100%;
+ height: calc(100% - 56px);
flex-flow: column nowrap;
- padding: 24px;
}
display: grid;
@@ -72,6 +71,7 @@
.DraftList.Drafts__main {
top: 0;
+ height: calc(100%);
}
}
}
@@ -81,6 +81,14 @@
top: -2px;
}
+ .virtualizedVariableListRowWrapper {
+ padding: 0 24px 16px 24px;
+
+ &.firstRow {
+ padding-top: 24px;
+ }
+ }
+
@media screen and (max-width: 768px) {
grid-template-rows: 0 1fr;
@@ -92,4 +100,11 @@
border-top: var(--border-default);
}
}
+
+ .Panel {
+ .post--editing__wrapper {
+ margin: 16px;
+ }
+ }
+
}
diff --git a/webapp/channels/src/components/drafts/drafts_and_schedule_posts_page_header.tsx b/webapp/channels/src/components/drafts/drafts_and_schedule_posts_page_header.tsx
new file mode 100644
index 0000000000..b2b7c7266d
--- /dev/null
+++ b/webapp/channels/src/components/drafts/drafts_and_schedule_posts_page_header.tsx
@@ -0,0 +1,39 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import type {ReactNode} from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import Header from 'components/widgets/header';
+
+type Props = {
+ children: ReactNode;
+}
+
+export default function DraftsAndSchedulePostsPageHeader(props: Props) {
+ return (
+
+
+ }
+ subtitle={
+
+ }
+ />
+ {props.children}
+
+ );
+}
diff --git a/webapp/channels/src/components/drafts/drafts_and_schedule_posts_tabs.tsx b/webapp/channels/src/components/drafts/drafts_and_schedule_posts_tabs.tsx
new file mode 100644
index 0000000000..9abff02f41
--- /dev/null
+++ b/webapp/channels/src/components/drafts/drafts_and_schedule_posts_tabs.tsx
@@ -0,0 +1,143 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {Badge} from '@mui/base';
+import React, {useCallback, useMemo} from 'react';
+import {FormattedMessage} from 'react-intl';
+import {useSelector} from 'react-redux';
+import {useHistory, useLocation} from 'react-router-dom';
+
+import type {ScheduledPost} from '@mattermost/types/schedule_post';
+import type {UserProfile, UserStatus} from '@mattermost/types/users';
+
+import {makeGetScheduledPostsByTeam} from 'mattermost-redux/selectors/entities/scheduled_posts';
+import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
+
+import {type Draft} from 'selectors/drafts';
+
+import DraftList from 'components/drafts/draft_list';
+import ScheduledPostList from 'components/drafts/scheduled_post_list';
+import Tab from 'components/tabs/tab';
+import Tabs from 'components/tabs/tabs';
+
+import {DRAFT_URL_SUFFIX, SCHEDULED_POST_URL_SUFFIX} from 'utils/constants';
+
+import type {GlobalState} from 'types/store';
+
+const EMPTY_SCHEDULED_POSTS: ScheduledPost[] = [];
+
+const TAB_KEYS = {
+ DRAFTS: 'drafts',
+ SCHEDULED_POSTS: 'scheduled_posts',
+};
+
+type Props = {
+ drafts: Draft[];
+ currentUser: UserProfile;
+ userDisplayName: string;
+ userStatus: UserStatus['status'];
+}
+
+export default function DraftsAndSchedulePostsTabs(props: Props) {
+ const history = useHistory();
+ const location = useLocation();
+ const isDraftsTab = location.pathname.includes(DRAFT_URL_SUFFIX);
+ const isScheduledPostsTab = location.pathname.includes(SCHEDULED_POST_URL_SUFFIX);
+
+ const currentTeam = useSelector(getCurrentTeam);
+ const currentTeamName = currentTeam?.name ?? '';
+ const currentTeamId = currentTeam?.id ?? '';
+
+ const getScheduledPostsByTeam = useMemo(() => makeGetScheduledPostsByTeam(), []);
+ const scheduledPosts = useSelector((state: GlobalState) => getScheduledPostsByTeam(state, currentTeamId, true));
+
+ const handleSwitchTabs = useCallback((key) => {
+ if (key === TAB_KEYS.DRAFTS) {
+ history.push(`/${currentTeamName}/drafts`);
+ } else if (key === TAB_KEYS.SCHEDULED_POSTS) {
+ history.push(`/${currentTeamName}/scheduled_posts`);
+ }
+ }, [history, currentTeamName]);
+
+ const scheduledPostsTabHeading = useMemo(() => {
+ return (
+
+
+ {scheduledPosts?.length > 0 && (
+
+ )}
+
+ );
+ }, [scheduledPosts?.length]);
+
+ const draftTabHeading = useMemo(() => {
+ return (
+
+
+ {props.drafts.length > 0 && (
+
+ )}
+
+ );
+ }, [props.drafts.length]);
+
+ const activeTab = useMemo(() => {
+ if (isDraftsTab) {
+ return TAB_KEYS.DRAFTS;
+ } else if (isScheduledPostsTab) {
+ return TAB_KEYS.SCHEDULED_POSTS;
+ }
+ return '';
+ }, [isDraftsTab, isScheduledPostsTab]);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
diff --git a/webapp/channels/src/components/drafts/index.ts b/webapp/channels/src/components/drafts/index.ts
deleted file mode 100644
index 264ff391be..0000000000
--- a/webapp/channels/src/components/drafts/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {connect} from 'react-redux';
-
-import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
-import {getCurrentUser, getStatusForUserId} from 'mattermost-redux/selectors/entities/users';
-import {displayUsername} from 'mattermost-redux/utils/user_utils';
-
-import {makeGetDrafts} from 'selectors/drafts';
-
-import type {GlobalState} from 'types/store';
-
-import Drafts from './drafts';
-
-function makeMapStateToProps() {
- const getDrafts = makeGetDrafts();
- return (state: GlobalState) => {
- const user = getCurrentUser(state);
- const status = getStatusForUserId(state, user.id);
-
- return {
- displayName: displayUsername(user, getTeammateNameDisplaySetting(state)),
- drafts: getDrafts(state),
- draftRemotes: state.views.drafts.remotes,
- status,
- user,
- };
- };
-}
-
-export default connect(makeMapStateToProps)(Drafts);
diff --git a/webapp/channels/src/components/drafts/index.tsx b/webapp/channels/src/components/drafts/index.tsx
new file mode 100644
index 0000000000..255dd38c56
--- /dev/null
+++ b/webapp/channels/src/components/drafts/index.tsx
@@ -0,0 +1,81 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {memo, useEffect, useMemo} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+
+import {getCurrentUser} from 'mattermost-redux/selectors/entities/common';
+import {getTeammateNameDisplaySetting} from 'mattermost-redux/selectors/entities/preferences';
+import {isScheduledPostsEnabled} from 'mattermost-redux/selectors/entities/scheduled_posts';
+import {getStatusForUserId} from 'mattermost-redux/selectors/entities/users';
+import {displayUsername} from 'mattermost-redux/utils/user_utils';
+
+import {selectLhsItem} from 'actions/views/lhs';
+import {suppressRHS, unsuppressRHS} from 'actions/views/rhs';
+import type {Draft} from 'selectors/drafts';
+import {makeGetDrafts} from 'selectors/drafts';
+
+import DraftList from 'components/drafts/draft_list';
+
+import type {GlobalState} from 'types/store';
+import {LhsItemType, LhsPage} from 'types/store/lhs';
+
+import DraftsAndSchedulePostsPageHeader from './drafts_and_schedule_posts_page_header';
+import DraftsAndSchedulePostsTabs from './drafts_and_schedule_posts_tabs';
+
+import './drafts_and_schedule_posts.scss';
+
+const EMPTY_DRAFTS: Draft[] = [];
+
+function Drafts() {
+ const dispatch = useDispatch();
+
+ const scheduledPostsEnabled = useSelector(isScheduledPostsEnabled);
+
+ // We would need to get drafts here early since its needed by the draft list component
+ const getDrafts = useMemo(() => makeGetDrafts(), []);
+ const drafts = useSelector(getDrafts);
+
+ const currentUser = useSelector(getCurrentUser);
+ const userStatus = useSelector((state: GlobalState) => getStatusForUserId(state, currentUser.id));
+
+ const teammateNameDisplaySetting = useSelector(getTeammateNameDisplaySetting);
+ const userDisplayName = useMemo(() => displayUsername(currentUser, teammateNameDisplaySetting), [currentUser, teammateNameDisplaySetting]);
+
+ // When Drafts component mounts, select Drafts in the LHS
+ // and suppress the RHS and restore RHS when component unmounts
+ useEffect(() => {
+ dispatch(selectLhsItem(LhsItemType.Page, LhsPage.Drafts));
+ dispatch(suppressRHS);
+
+ return () => {
+ dispatch(unsuppressRHS);
+ };
+ }, [dispatch]);
+
+ if (scheduledPostsEnabled) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
+
+export default memo(Drafts);
diff --git a/webapp/channels/src/components/drafts/panel/panel.tsx b/webapp/channels/src/components/drafts/panel/panel.tsx
index 04c84e3851..4a18f8268d 100644
--- a/webapp/channels/src/components/drafts/panel/panel.tsx
+++ b/webapp/channels/src/components/drafts/panel/panel.tsx
@@ -14,6 +14,8 @@ type Props = {
hasError: boolean;
innerRef?: React.Ref;
isHighlighted?: boolean;
+ style?: React.CSSProperties;
+ className?: string;
};
const isEligibleForClick = makeIsEligibleForClick('.hljs, code');
@@ -24,6 +26,8 @@ function Panel({
hasError,
innerRef,
isHighlighted,
+ style,
+ className,
}: Props) {
const [hover, setHover] = useState(false);
@@ -49,7 +53,9 @@ function Panel({
draftError: hasError,
highlighted: isHighlighted,
},
+ className,
)}
+ style={style}
onMouseOver={handleMouseOver}
onClick={handleOnClick}
onMouseLeave={handleMouseLeave}
diff --git a/webapp/channels/src/components/drafts/scheduled_post_list/empty_scheduled_post_list.tsx b/webapp/channels/src/components/drafts/scheduled_post_list/empty_scheduled_post_list.tsx
new file mode 100644
index 0000000000..46a0905a25
--- /dev/null
+++ b/webapp/channels/src/components/drafts/scheduled_post_list/empty_scheduled_post_list.tsx
@@ -0,0 +1,29 @@
+// 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 NoResultsIndicator from 'components/no_results_indicator';
+
+import NoScheduledPostsIllustration from './empty_scheduled_post_list_illustration';
+
+export default function EmptyScheduledPostList() {
+ const {formatMessage} = useIntl();
+
+ return (
+
+ );
+}
diff --git a/webapp/channels/src/components/drafts/scheduled_post_list/index.tsx b/webapp/channels/src/components/drafts/scheduled_post_list/index.tsx
new file mode 100644
index 0000000000..4300e4d43e
--- /dev/null
+++ b/webapp/channels/src/components/drafts/scheduled_post_list/index.tsx
@@ -0,0 +1,60 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+
+import type {ScheduledPost} from '@mattermost/types/schedule_post';
+import type {UserProfile, UserStatus} from '@mattermost/types/users';
+
+import {fetchMissingChannels} from 'mattermost-redux/actions/channels';
+import {hasScheduledPostError} from 'mattermost-redux/selectors/entities/scheduled_posts';
+import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+
+import type {GlobalState} from 'types/store';
+
+import EmptyScheduledPostList from './empty_scheduled_post_list';
+import NonVirtualizedScheduledPostList from './non_virtualized_scheduled_post_list';
+import ScheduledPostError from './scheduled_post_error';
+
+import './scheduled_post_list.scss';
+
+type Props = {
+ scheduledPosts: ScheduledPost[];
+ currentUser: UserProfile;
+ userDisplayName: string;
+ userStatus: UserStatus['status'];
+};
+
+export default function ScheduledPostList(props: Props) {
+ const dispatch = useDispatch();
+
+ const currentTeamId = useSelector(getCurrentTeamId);
+
+ const scheduledPostsHasError = useSelector((state: GlobalState) => hasScheduledPostError(state, currentTeamId));
+
+ useEffect(() => {
+ if (props.scheduledPosts.length > 0) {
+ dispatch(fetchMissingChannels(props.scheduledPosts.map((post) => post.channel_id)));
+ }
+ }, [dispatch, props.scheduledPosts]);
+
+ if (props.scheduledPosts.length === 0) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {scheduledPostsHasError && ()}
+
+
+
+ );
+}
diff --git a/webapp/channels/src/components/drafts/scheduled_post_list/non_virtualized_scheduled_post_list.tsx b/webapp/channels/src/components/drafts/scheduled_post_list/non_virtualized_scheduled_post_list.tsx
new file mode 100644
index 0000000000..7ab70a210d
--- /dev/null
+++ b/webapp/channels/src/components/drafts/scheduled_post_list/non_virtualized_scheduled_post_list.tsx
@@ -0,0 +1,54 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React, {useRef} from 'react';
+
+import type {ScheduledPost} from '@mattermost/types/schedule_post';
+import type {UserProfile, UserStatus} from '@mattermost/types/users';
+
+import DraftRow from 'components/drafts/draft_row';
+
+import {useQuery} from 'utils/http_utils';
+
+type Props = {
+ scheduledPosts: ScheduledPost[];
+ currentUser: UserProfile;
+ userDisplayName: string;
+ userStatus: UserStatus['status'];
+}
+
+export default function NonVirtualizedScheduledPostList(props: Props) {
+ const query = useQuery();
+ const targetId = query.get('target_id');
+ const targetScheduledPostId = useRef();
+
+ return (
+ <>
+ {
+ props.scheduledPosts.map((scheduledPost, index) => {
+ // find the first scheduled posst with the target and no error
+ const isInTargetChannelOrThread = scheduledPost.channel_id === targetId || scheduledPost.root_id === targetId;
+ const hasError = Boolean(scheduledPost.error_code);
+ const scrollIntoView = !targetScheduledPostId.current && (isInTargetChannelOrThread && !hasError);
+ if (scrollIntoView) {
+ // if found, save the scheduled post's ID
+ targetScheduledPostId.current = scheduledPost.id;
+ }
+
+ return (
+
+ );
+ })
+ }
+
+ );
+}
diff --git a/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_error.tsx b/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_error.tsx
new file mode 100644
index 0000000000..58456bd6bf
--- /dev/null
+++ b/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_error.tsx
@@ -0,0 +1,22 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import AlertBanner from 'components/alert_banner';
+
+export default function ScheduledPostError() {
+ return (
+
+ }
+ />
+ );
+}
diff --git a/webapp/channels/src/components/drafts/scheduled_post_list/style.scss b/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_list.scss
similarity index 72%
rename from webapp/channels/src/components/drafts/scheduled_post_list/style.scss
rename to webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_list.scss
index c57bdbf154..91a36367ee 100644
--- a/webapp/channels/src/components/drafts/scheduled_post_list/style.scss
+++ b/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_list.scss
@@ -2,17 +2,26 @@
// See LICENSE.txt for license information.
.ScheduledPostList {
- position: absolute;
- width: 100%;
height: 100%;
- padding: 24px;
- overflow-y: auto;
+
+ &.nonVirtualizedScheduledPostList {
+ position: absolute;
+ overflow-y: auto;
+ }
+
+ .nonVirtualizedScheduledPostRow {
+ margin: 0 24px 16px 24px;
+
+ &.firstRow {
+ margin-top: 24px;
+ }
+ }
.scheduledPostListErrorIndicator {
display: flex;
flex-direction: row;
align-items: center;
- margin-bottom: 16px;
+ margin: 24px 24px 16px 24px;
font-weight: bold;
padding-block: 10px;
}
@@ -35,6 +44,4 @@
.Panel.highlighted {
animation: borderColorAnimation 10s;
}
-
-
}
diff --git a/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_list.tsx b/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_list.tsx
deleted file mode 100644
index 24015b1676..0000000000
--- a/webapp/channels/src/components/drafts/scheduled_post_list/scheduled_post_list.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {useEffect, useRef} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
-import {useDispatch, useSelector} from 'react-redux';
-
-import type {ScheduledPost} from '@mattermost/types/schedule_post';
-import type {UserProfile, UserStatus} from '@mattermost/types/users';
-
-import {fetchMissingChannels} from 'mattermost-redux/actions/channels';
-import {hasScheduledPostError} from 'mattermost-redux/selectors/entities/scheduled_posts';
-import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
-
-import AlertBanner from 'components/alert_banner';
-import NoScheduledPostsIllustration from 'components/drafts/scheduled_post_list/empty_scheduled_post_list_illustration';
-import NoResultsIndicator from 'components/no_results_indicator';
-
-import {useQuery} from 'utils/http_utils';
-
-import type {GlobalState} from 'types/store';
-
-import DraftRow from '../draft_row';
-
-import './style.scss';
-
-type Props = {
- scheduledPosts: ScheduledPost[];
- user: UserProfile;
- displayName: string;
- status: UserStatus['status'];
-}
-
-export default function ScheduledPostList({
- scheduledPosts,
- user,
- displayName,
- status,
-}: Props) {
- const {formatMessage} = useIntl();
-
- const currentTeamId = useSelector(getCurrentTeamId);
- const scheduledPostsHasError = useSelector((state: GlobalState) => hasScheduledPostError(state, currentTeamId));
-
- const query = useQuery();
- const targetId = query.get('target_id');
- const targetScheduledPostId = useRef();
-
- const dispatch = useDispatch();
- useEffect(() => {
- dispatch(fetchMissingChannels(scheduledPosts.map((post) => post.channel_id)));
- }, [scheduledPosts]);
-
- return (
-
- {
- scheduledPostsHasError &&
-
- }
- />
- }
-
- {
- scheduledPosts.map((scheduledPost) => {
- // find the first scheduled posst with the target and no error
- const isInTargetChannelOrThread = scheduledPost.channel_id === targetId || scheduledPost.root_id === targetId;
- const hasError = Boolean(scheduledPost.error_code);
- const scrollIntoView = !targetScheduledPostId.current && (isInTargetChannelOrThread && !hasError);
- if (scrollIntoView) {
- // if found, save the scheduled post's ID
- targetScheduledPostId.current = scheduledPost.id;
- }
-
- return (
-
- );
- })
- }
-
- {
- scheduledPosts.length === 0 && (
-
- )
- }
-
+
`;
diff --git a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx
index cbb0a62a34..edc649392b 100644
--- a/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx
+++ b/webapp/channels/src/components/threading/virtualized_thread_viewer/virtualized_thread_viewer.tsx
@@ -431,7 +431,7 @@ class ThreadViewerVirtualized extends PureComponent
{
role='application'
aria-label={Utils.localizeMessage({id: 'accessibility.sections.rhsContent', defaultMessage: 'message details complimentary region'})}
className='post-right__content a11y__region'
- style={{height: '100%'}}
+ style={{height: '100%', position: 'relative'}}
data-a11y-sort-order='3'
data-a11y-focus-child={true}
data-a11y-order-reversed={true}
diff --git a/webapp/channels/src/selectors/drafts.ts b/webapp/channels/src/selectors/drafts.ts
index d89292fd3b..c559447f19 100644
--- a/webapp/channels/src/selectors/drafts.ts
+++ b/webapp/channels/src/selectors/drafts.ts
@@ -141,3 +141,7 @@ export function makeGetDraft() {
},
);
}
+
+export function getDraftRemotes(state: GlobalState) {
+ return state.views.drafts.remotes;
+}
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 1826eee776..2f14cc4a1d 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -2249,6 +2249,7 @@ export const PageLoadContext = {
RECONNECT: 'reconnect',
} as const;
+export const DRAFT_URL_SUFFIX = 'drafts';
export const SCHEDULED_POST_URL_SUFFIX = 'scheduled_posts';
export const scheduledPosts = {
diff --git a/webapp/channels/src/utils/http_utils.ts b/webapp/channels/src/utils/http_utils.ts
index c7d1cdcc8e..b697f89c86 100644
--- a/webapp/channels/src/utils/http_utils.ts
+++ b/webapp/channels/src/utils/http_utils.ts
@@ -1,8 +1,15 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
+import {useMemo} from 'react';
import {useLocation} from 'react-router-dom';
export function useQuery() {
- return new URLSearchParams(useLocation().search);
+ const {search} = useLocation();
+
+ const params = useMemo(() => {
+ return new URLSearchParams(search);
+ }, [search]);
+
+ return params;
}
diff --git a/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx b/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
index 27aa17e91e..ee8bcc217e 100644
--- a/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
+++ b/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
@@ -3,7 +3,7 @@
import {createMemoryHistory} from 'history';
import React from 'react';
-import type {AutoSizerProps} from 'react-virtualized-auto-sizer';
+import type {Props as AutoSizerProps} from 'react-virtualized-auto-sizer';
import {Permissions} from 'mattermost-redux/constants';
@@ -14,7 +14,7 @@ import {TestHelper} from 'utils/test_helper';
import {identifyElementRegion} from './element_identification';
-jest.mock('react-virtualized-auto-sizer', () => (props: AutoSizerProps) => props.children({height: 100, width: 100}));
+jest.mock('react-virtualized-auto-sizer', () => (props: AutoSizerProps) => props.children({height: 100, width: 100, scaledHeight: 100, scaledWidth: 100}));
describe('identifyElementRegion', () => {
test('should be able to identify various elements in the app', async () => {
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index a009dc3568..1b7b4f4071 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -128,9 +128,9 @@
"react-router-dom": "5.3.4",
"react-select": "5.9.0",
"react-transition-group": "4.4.5",
- "react-virtualized-auto-sizer": "1.0.7",
- "react-window": "1.8.8",
- "react-window-infinite-loader": "1.0.8",
+ "react-virtualized-auto-sizer": "1.0.25",
+ "react-window": "1.8.11",
+ "react-window-infinite-loader": "1.0.10",
"rebound": "0.1.0",
"redux": "4.2.0",
"redux-batched-actions": "0.5.0",
@@ -515,6 +515,48 @@
}
}
},
+ "channels/node_modules/react-virtualized-auto-sizer": {
+ "version": "1.0.25",
+ "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.25.tgz",
+ "integrity": "sha512-YHsksEGDfsHbHuaBVDYwJmcktblcHGafz4ZVuYPQYuSHMUGjpwmUCrAOcvMSGMwwk1eFWj1M/1GwYpNPuyhaBg==",
+ "peerDependencies": {
+ "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "channels/node_modules/react-window": {
+ "version": "1.8.11",
+ "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
+ "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.0.0",
+ "memoize-one": ">=3.1.1 <6"
+ },
+ "engines": {
+ "node": ">8.0.0"
+ },
+ "peerDependencies": {
+ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "channels/node_modules/react-window-infinite-loader": {
+ "version": "1.0.10",
+ "resolved": "https://registry.npmjs.org/react-window-infinite-loader/-/react-window-infinite-loader-1.0.10.tgz",
+ "integrity": "sha512-NO/csdHlxjWqA2RJZfzQgagAjGHspbO2ik9GtWZb0BY1Nnapq0auG8ErI+OhGCzpjYJsCYerqUlK6hkq9dfAAA==",
+ "engines": {
+ "node": ">8.0.0"
+ },
+ "peerDependencies": {
+ "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
+ "channels/node_modules/react-window/node_modules/memoize-one": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+ "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+ },
"channels/node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -23459,51 +23501,6 @@
"tslib": "*"
}
},
- "node_modules/react-virtualized-auto-sizer": {
- "version": "1.0.7",
- "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz",
- "integrity": "sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==",
- "engines": {
- "node": ">8.0.0"
- },
- "peerDependencies": {
- "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc",
- "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc"
- }
- },
- "node_modules/react-window": {
- "version": "1.8.8",
- "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz",
- "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==",
- "dependencies": {
- "@babel/runtime": "^7.0.0",
- "memoize-one": ">=3.1.1 <6"
- },
- "engines": {
- "node": ">8.0.0"
- },
- "peerDependencies": {
- "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
- "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
- }
- },
- "node_modules/react-window-infinite-loader": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/react-window-infinite-loader/-/react-window-infinite-loader-1.0.8.tgz",
- "integrity": "sha512-907ZLAiZZfBHuZyiY0V7uiSL4P/rI6UQyCF9wES1cDWTeyNLgGLaxu+BZkcUW3R5tSCQcbCcWBl0jVIpYzrKGQ==",
- "engines": {
- "node": ">8.0.0"
- },
- "peerDependencies": {
- "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
- "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
- }
- },
- "node_modules/react-window/node_modules/memoize-one": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
- "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
- },
"node_modules/reactcss": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz",