+
+
+
+
+
+
+ {/*Reasons for flagging*/}
+
+
+
+
+
+
+
+
+ null,
+ Menu: () => null,
+ MenuList: () => null,
+ IndicatorSeparator: () => null,
+ Input: CreatableReactSelectInput,
+ MultiValue: ReasonOption,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {children ||
+ );
+}
+
+export function ReasonOption(props: MultiValueProps<{label: string; value: string}, true>) {
+ const {data, innerProps, selectProps, removeProps} = props;
+
+ return (
+
+ {data.label}
+
+
+ );
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/content_flagging_section_base.scss b/webapp/channels/src/components/admin_console/content_flagging/content_flagging_section_base.scss
new file mode 100644
index 0000000000..e9a2e8383a
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/content_flagging_section_base.scss
@@ -0,0 +1,49 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.content:has(.content-flagging-section-setting-wrapper) {
+ padding: 28px 32px !important;
+}
+
+.content-flagging-section-setting-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.content-flagging-section-title {
+ margin: unset;
+ font-size: 16px;
+}
+
+.content-flagging-section-description, .helpText {
+ color: var(--center-channel-color-72);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+}
+
+.content-flagging-section-setting {
+ display: flex;
+ width: 100%;
+ align-items: baseline;
+
+ .setting-title {
+ min-width: 290px;
+ max-width: 290px;
+ color: var(--center-channel-color);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ }
+
+ .setting-content {
+ display: flex;
+ flex: 1;
+ gap: 32px;
+ }
+}
+
+.helpText {
+ margin-top: 8px;
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/content_reviewers.scss b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/content_reviewers.scss
new file mode 100644
index 0000000000..b43f22e76a
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/content_reviewers.scss
@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.teamSpecificReviewerSection {
+ flex-direction: column;
+
+ .teamSearchWrapper {
+ display: flex;
+ width: 100%;
+ margin-top: 16px;
+ gap: 8px;
+
+ #teamSearchSelect {
+ flex: 1;
+ }
+
+ .selectAllTeamsButton {
+ padding: 10px 20px;
+ text-decoration: none !important;
+ }
+ }
+}
+
diff --git a/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/content_reviewers.test.tsx b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/content_reviewers.test.tsx
new file mode 100644
index 0000000000..8255018fa9
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/content_reviewers.test.tsx
@@ -0,0 +1,269 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {screen, fireEvent} from '@testing-library/react';
+import React from 'react';
+
+import type {ContentFlaggingReviewerSetting, TeamReviewerSetting} from '@mattermost/types/config';
+
+import type {SystemConsoleCustomSettingsComponentProps} from 'components/admin_console/schema_admin_settings';
+
+import {renderWithContext} from 'tests/react_testing_utils';
+
+import ContentFlaggingContentReviewers from './content_reviewers';
+
+// Mock the UserMultiSelector component
+jest.mock('../../content_flagging/user_multiselector/user_multiselector', () => ({
+ UserMultiSelector: ({id, initialValue, onChange}: {id: string; initialValue: string[]; onChange: (userIds: string[]) => void}) => (
+
+
+ {initialValue.join(',')}
+
+ ),
+}));
+
+// Mock the TeamReviewers component
+jest.mock('./team_reviewers_section/team_reviewers_section', () => ({
+ __esModule: true,
+ default: ({teamReviewersSetting, onChange}: {teamReviewersSetting: Record
+
+ {JSON.stringify(teamReviewersSetting)}
+
+ ),
+}));
+
+describe('ContentFlaggingContentReviewers', () => {
+ const defaultProps = {
+ id: 'content_reviewers',
+ value: {
+ CommonReviewers: true,
+ CommonReviewerIds: ['user1'],
+ SystemAdminsAsReviewers: false,
+ TeamAdminsAsReviewers: false,
+ TeamReviewersSetting: {},
+ } as ContentFlaggingReviewerSetting,
+ onChange: jest.fn(),
+ disabled: false,
+ setByEnv: false,
+ } as unknown as SystemConsoleCustomSettingsComponentProps;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('renders the component with correct title and description', () => {
+ renderWithContext(
+
+
+
+
+
+ {/* Same reviewers for all teams */}
+
+
+
+
+ {
+ reviewerSetting.CommonReviewers &&
+
+
+
+
+
+
+
+
+
+
+ }
+
+ {
+ !reviewerSetting.CommonReviewers &&
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {content}
+
+ ),
+}));
+
+describe('TeamOptionComponent', () => {
+ const mockTeam: Team = {
+ id: 'team-id-1',
+ create_at: 1234567890,
+ update_at: 1234567890,
+ delete_at: 0,
+ display_name: 'Test Team',
+ name: 'test-team',
+ description: 'A test team',
+ email: 'test@example.com',
+ type: 'O',
+ company_name: '',
+ allowed_domains: '',
+ invite_id: '',
+ allow_open_invite: true,
+ scheme_id: '',
+ group_constrained: false,
+ policy_id: '',
+ };
+
+ const mockProps: OptionProps
+
+ );
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.scss b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.scss
new file mode 100644
index 0000000000..97d2f6d913
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.scss
@@ -0,0 +1,112 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.TeamReviewers {
+ width: 100%;
+ border: 1px solid var(--center-channel-color-16);
+ border-radius: 8px;
+ margin-top: 24px;
+
+ > .DataGrid {
+ padding: 0;
+ background: none;
+
+ .DataGrid_search {
+ height: unset;
+ padding: 16px;
+ background: none;
+
+ .DataGrid_searchBar {
+ margin-left: 0;
+ }
+
+ .TeamReviewers__disable-all, .TeamReviewers__disable-all > button {
+ display: flex;
+ align-items: center;
+ margin-left: auto;
+ background: none;
+ text-decoration: none !important;
+ }
+ }
+
+ .DataGrid_rows .DataGrid_row:nth-child(odd) {
+ background: none;
+ }
+
+ .DataGrid_row {
+ display: flex;
+ padding: 8px 16px;
+ gap: 32px;
+
+ .TeamReviewers__team {
+ display: flex;
+ overflow: hidden;
+ align-items: center;
+ gap: 8px;
+ text-overflow: ellipsis;
+
+ .TeamReviewers__team-name {
+ overflow: hidden;
+ flex: 1;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .TeamIcon {
+ background: var(--center-channel-color-08);
+ }
+
+ .DataGrid_cell {
+ display: flex;
+ align-items: center !important;
+ margin: 0;
+
+ .user-multiselector__control {
+ margin-block: 2px;
+ }
+
+ &:has(.UserMultiSelector) {
+ overflow: unset;
+ }
+ }
+ }
+
+ .DataGrid_header {
+ background: var(--center-channel-color-04);
+ gap: 32px;
+ padding-inline: 18px;
+
+ > .DataGrid_cell {
+ padding-left: 0;
+ color: var(--center-channel-color-72);
+ font-size: 12px;
+ }
+ }
+
+ .DataGrid_cell {
+ &:nth-child(1) {
+ max-width: 230px;
+ }
+
+ &:nth-child(2) {
+ max-width: 446px;
+ }
+
+ &:nth-child(3) {
+ max-width: 44px;
+ }
+ }
+
+ .DataGrid_footer {
+ width: 100%;
+ padding: 8px 16px;
+ background: none;
+
+ > .DataGrid_cell {
+ margin-left: auto;
+ }
+ }
+ }
+}
+
+
diff --git a/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.test.tsx b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.test.tsx
new file mode 100644
index 0000000000..e8526879e1
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/content_reviewers/team_reviewers_section/team_reviewers_section.test.tsx
@@ -0,0 +1,498 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {screen, fireEvent, waitFor} from '@testing-library/react';
+import React from 'react';
+
+import type {TeamReviewerSetting} from '@mattermost/types/config';
+import type {Team} from '@mattermost/types/teams';
+
+import {searchTeams} from 'mattermost-redux/actions/teams';
+
+import {renderWithContext} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
+
+import TeamReviewersSection from './team_reviewers_section';
+
+jest.mock('mattermost-redux/actions/teams', () => ({
+ searchTeams: jest.fn(),
+}));
+
+jest.mock('../../user_multiselector/user_multiselector', () => ({
+ UserMultiSelector: ({id, initialValue, onChange}: {id: string; initialValue: string[]; onChange: (ids: string[]) => void}) => (
+
+ {`Selected: {${initialValue.join(', ')}`}
+
+
+ ),
+}));
+
+jest.mock('components/widgets/team_icon/team_icon', () => ({
+ TeamIcon: ({content}: {content: string}) => {content}
,
+}));
+
+const mockSearchTeams = jest.mocked(searchTeams);
+
+describe('TeamReviewersSection', () => {
+ const mockTeams: Team[] = [
+ TestHelper.getTeamMock({
+ id: 'team1',
+ display_name: 'Team One',
+ name: 'team-one',
+ }),
+ TestHelper.getTeamMock({
+ id: 'team2',
+ display_name: 'Team Two',
+ name: 'team-two',
+ }),
+ ];
+
+ const defaultProps = {
+ teamReviewersSetting: {} as Record
+
+ ),
+ reviewers: (
+
+
+
+ ), [intl]);
+
+ return (
+
+
+ );
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/notificatin_settings/notification_settings.test.tsx b/webapp/channels/src/components/admin_console/content_flagging/notificatin_settings/notification_settings.test.tsx
new file mode 100644
index 0000000000..1ff7477705
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/notificatin_settings/notification_settings.test.tsx
@@ -0,0 +1,289 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {render, screen, fireEvent} from '@testing-library/react';
+import React from 'react';
+import {IntlProvider} from 'react-intl';
+
+import type {ContentFlaggingNotificationSettings} from '@mattermost/types/config';
+
+import type {SystemConsoleCustomSettingsComponentProps} from 'components/admin_console/schema_admin_settings';
+
+import ContentFlaggingNotificationSettingsSection from './notification_settings';
+
+const renderWithIntl = (component: React.ReactElement) => {
+ return render(
+
+
+
+
+
+
+
+ {/*Notify on flagging*/}
+
+
+
+
+ {/*Notify on reviewer assigned*/}
+
+
+
+
+
+
+
+
+ {/*Notify on removal*/}
+
+
+
+
+
+
+
+
+ {/*Notify on dismiss*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_multiselect.scss b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_multiselect.scss
new file mode 100644
index 0000000000..5b4ac977d0
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_multiselect.scss
@@ -0,0 +1,16 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.UserMultiSelector {
+ width: 100%;
+
+ &__menu-list {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__value-container {
+ display: flex;
+ gap: 8px;
+ }
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_multiselector.tsx b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_multiselector.tsx
new file mode 100644
index 0000000000..9ec451d7a4
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_multiselector.tsx
@@ -0,0 +1,124 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React, {type ReactElement, useCallback, useEffect, useMemo, useRef} from 'react';
+import {useIntl} from 'react-intl';
+import {useDispatch, useSelector} from 'react-redux';
+import type {MultiValue} from 'react-select';
+import AsyncSelect from 'react-select/async';
+
+import type {UserProfile} from '@mattermost/types/users';
+
+import {debounce} from 'mattermost-redux/actions/helpers';
+import {getMissingProfilesByIds, searchProfiles} from 'mattermost-redux/actions/users';
+import {getUsersByIDs} from 'mattermost-redux/selectors/entities/users';
+
+import type {GlobalState} from 'types/store';
+
+import {UserProfilePill} from './user_profile_pill';
+
+import {UserOptionComponent} from '../../content_flagging/user_multiselector/user_profile_option';
+import {LoadingIndicator} from '../../system_users/system_users_filters_popover/system_users_filter_team';
+
+import './user_multiselect.scss';
+
+export type AutocompleteOptionType
+ 
+ Test User
+
+
+
+
+
+
+
+ null,
+ IndicatorSeparator: () => null,
+ Option: UserOptionComponent,
+ MultiValue: UserProfilePill,
+ }}
+ />
+
+ );
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_option.scss b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_option.scss
new file mode 100644
index 0000000000..5d19e17fb7
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_option.scss
@@ -0,0 +1,16 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.UserOptionComponent {
+ display: flex;
+ align-items: center;
+ padding: 8px 14px;
+ cursor: pointer;
+ gap: 8px;
+
+ &:hover {
+ background: var(--center-channel-color-08);
+ }
+}
+
+
diff --git a/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_option.tsx b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_option.tsx
new file mode 100644
index 0000000000..83124747da
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_option.tsx
@@ -0,0 +1,40 @@
+// 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 type {OptionProps} from 'react-select';
+
+import type {UserProfile} from '@mattermost/types/users';
+
+import Avatar from 'components/widgets/users/avatar';
+
+import {getDisplayNameByUser, imageURLForUser} from 'utils/utils';
+
+import type {GlobalState} from 'types/store';
+
+import type {AutocompleteOptionType} from './user_multiselector';
+
+import './user_profile_option.scss';
+
+export function UserOptionComponent(props: OptionProps
+
+ );
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_pill.scss b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_pill.scss
new file mode 100644
index 0000000000..077db315cd
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_pill.scss
@@ -0,0 +1,23 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+.UserProfilePill {
+ display: flex;
+ align-items: center;
+ border-radius: 12px;
+ background: var(--center-channel-color-08);
+ color: var(--center-channel-color);
+ font-size: 12px;
+ font-weight: 600;
+ gap: 5px;
+ padding-inline: 6px;
+}
+
+.Remove {
+ cursor: pointer;
+
+ svg {
+ margin-top: 4px;
+ fill: var(--center-channel-color-32);
+ }
+}
diff --git a/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_pill.test.tsx b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_pill.test.tsx
new file mode 100644
index 0000000000..505888dceb
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/content_flagging/user_multiselector/user_profile_pill.test.tsx
@@ -0,0 +1,186 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import type {MultiValueProps} from 'react-select/dist/declarations/src/components/MultiValue';
+
+import type {UserProfile} from '@mattermost/types/users';
+
+import {fireEvent, renderWithContext} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
+
+import type {AutocompleteOptionType} from './user_multiselector';
+import {UserProfilePill} from './user_profile_pill';
+
+describe('components/admin_console/content_flagging/user_multiselector/UserProfilePill', () => {
+ const baseProps = {
+ data: {
+ value: 'user-id-1',
+ label: 'Test User',
+ raw: TestHelper.getUserMock({
+ id: 'user-id-1',
+ username: 'testuser',
+ first_name: 'Test',
+ last_name: 'User',
+ email: 'test@example.com',
+ }),
+ } as AutocompleteOptionType
+ {children ||
+ );
+}
+
+export function UserProfilePill(props: MultiValueProps
+
+ );
+}
diff --git a/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx b/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
index 09cc5d1553..be46c704b5 100644
--- a/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
+++ b/webapp/channels/src/components/admin_console/data_grid/data_grid.tsx
@@ -262,6 +262,7 @@ class DataGrid extends React.PureComponent