@@ -27,19 +33,29 @@ const SaveChangesPanel = ({saveNeeded, onClick, saving, serverError, cancelLink,
onClick={onClick}
savingMessage={savingMessage ?? formatMessage({id: 'admin.team_channel_settings.saving', defaultMessage: 'Saving Config...'})}
/>
- {
- cancelLink !== '' &&
-
-
-
- }
+ {cancelLink ? (
+
+
+
+ ) : onCancel && (
+
+
+
+ )}
{serverError}
diff --git a/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx b/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx
index 84407fbb9b..a8098eaed9 100644
--- a/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx
+++ b/webapp/channels/src/components/admin_console/secure_connections/secure_connection_detail.tsx
@@ -47,7 +47,7 @@ import type {SharedChannelRemoteRow} from './utils';
import {getEditLocation, isConfirmed, isErrorState, isPendingState, useRemoteClusterEdit, useSharedChannelRemoteRows, useTeamOptions} from './utils';
import {AdminConsoleListTable} from '../list_table';
-import SaveChangesPanel from '../team_channel_settings/save_changes_panel';
+import SaveChangesPanel from '../save_changes_panel';
type Params = {
connection_id: 'create' | RemoteCluster['remote_id'];
diff --git a/webapp/channels/src/components/admin_console/system_properties/controls.tsx b/webapp/channels/src/components/admin_console/system_properties/controls.tsx
new file mode 100644
index 0000000000..9d9781220d
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/system_properties/controls.tsx
@@ -0,0 +1,88 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {ReactNode} from 'react';
+import React from 'react';
+import styled, {css} from 'styled-components';
+
+export const SectionHeading = styled.h3`
+ &&& {
+ margin-bottom: 8px;
+ }
+`;
+
+export const SectionHeader = styled.header.attrs({className: 'header'})<{$borderless?: boolean}>`
+ &&& {
+ padding: 24px 32px;
+ ${({$borderless}) => !$borderless && css`
+ border-bottom: 1px solid var(--center-channel-color-12, rgba(63, 67, 80, 0.12));
+ `}
+ }
+`;
+
+export const SectionContent = styled.div.attrs({className: 'content'})<{$compact?: boolean}>`
+ &&& {
+ padding: ${({$compact}) => ($compact ? '24px 32px' : '48px 32px')};
+ border-bottom: 1px solid var(--center-channel-color-12, rgba(63, 67, 80, 0.12));
+ }
+`;
+
+export const AdminSection = styled.section.attrs({className: 'AdminPanel'})`
+ && {
+ overflow: visible;
+ }
+`;
+
+export const AdminWrapper = (props: {children: ReactNode}) => {
+ return (
+
+ );
+};
+
+export const FieldInput = styled.input.attrs({className: 'form-control secure-connections-input'})<{$deleted?: boolean; $strong?: boolean; $borderless?: boolean}>`
+ font-weight: normal;
+
+ ${({$borderless}) => $borderless && css`
+ && {
+ border-color: transparent;
+ box-shadow: none;
+ }
+ `};
+
+ ${({$deleted}) => $deleted && css`
+ && {
+ color: #D24B4E;
+ text-decoration: line-through;
+ }
+ `};
+
+ ${({$strong}) => $strong && css`
+ && {
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ }
+ `};
+`;
+
+export const DangerText = styled.span`
+ color: #D24B4E;
+`;
+
+export const FieldDeleteButton = styled.button.attrs({className: 'btn btn-sm btn-transparent'})`
+ font-weight: normal;
+`;
+
+export const LinkButton = styled.button.attrs({className: 'btn btn-link'})`
+ font-weight: normal;
+ padding: 8px 16px !important;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 16px;
+ gap: 6px;
+`;
diff --git a/webapp/channels/src/components/admin_console/system_properties/index.ts b/webapp/channels/src/components/admin_console/system_properties/index.ts
new file mode 100644
index 0000000000..68c69e6092
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/system_properties/index.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import SystemProperties from './system_properties';
+
+export {searchableStrings} from './system_properties';
+
+export default SystemProperties;
diff --git a/webapp/channels/src/components/admin_console/system_properties/section_utils.test.ts b/webapp/channels/src/components/admin_console/system_properties/section_utils.test.ts
new file mode 100644
index 0000000000..b9e24753b1
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/system_properties/section_utils.test.ts
@@ -0,0 +1,151 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {act} from '@testing-library/react-hooks';
+
+import type {DeepPartial} from '@mattermost/types/utilities';
+
+import {renderHookWithContext} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
+
+import type {GlobalState} from 'types/store';
+
+import {useOperation, useOperationStatus} from './section_utils';
+
+function getBaseState(): DeepPartial
{
+ const currentUser = TestHelper.getUserMock();
+ const otherUser = TestHelper.getUserMock();
+
+ return {
+ entities: {
+ users: {
+ currentUserId: currentUser.id,
+ profiles: {
+ [currentUser.id]: currentUser,
+ [otherUser.id]: otherUser,
+ },
+ },
+ general: {
+
+ },
+ },
+ };
+}
+
+describe('useOperationStatus', () => {
+ it('should indicate loading true then false', async () => {
+ const {result, rerender} = renderHookWithContext(() => {
+ return useOperationStatus(true);
+ }, getBaseState());
+
+ const [status1, setStatus] = result.current;
+ expect(status1.loading).toBe(true);
+ expect(status1.error).toBe(undefined);
+
+ act(() => {
+ setStatus(false);
+ });
+
+ rerender();
+
+ const [status2] = result.current;
+ expect(status2.loading).toBe(false);
+ expect(status2.error).toBe(undefined);
+ });
+
+ it('should indicate loading true then false with error', async () => {
+ const {result, rerender} = renderHookWithContext(() => {
+ return useOperationStatus(true);
+ }, getBaseState());
+
+ const [status1, setStatus] = result.current;
+ expect(status1.loading).toBe(true);
+ expect(status1.error).toBe(undefined);
+
+ const testErr = new Error('test error');
+
+ act(() => {
+ setStatus(testErr);
+ });
+
+ rerender();
+
+ const [status2] = result.current;
+ expect(status2.loading).toBe(false);
+ expect(status2.error).toBe(testErr);
+ });
+});
+
+describe('useOperation', () => {
+ it('should run operation on command with response value and loading phases: false -> true -> false', async () => {
+ jest.useFakeTimers();
+
+ const testResolvingAsyncAction = jest.fn().mockImplementation((responseValue) => new Promise((r) => setTimeout(() => r(responseValue), 1000)));
+
+ const {result, rerender} = renderHookWithContext(() => {
+ return useOperation(testResolvingAsyncAction, false);
+ }, getBaseState());
+
+ const [doAction, status1] = result.current;
+ expect(status1.loading).toBe(false);
+ expect(status1.error).toBe(undefined);
+ expect(testResolvingAsyncAction).not.toBeCalled();
+
+ let actionPromise: Promise;
+ await act(async () => {
+ actionPromise = doAction('test response value');
+ });
+ rerender();
+
+ const [, status2] = result.current;
+ expect(status2.loading).toBe(true);
+ expect(status2.error).toBe(undefined);
+ expect(testResolvingAsyncAction).toBeCalledTimes(1);
+
+ jest.runAllTimers();
+
+ await act(async () => {
+ await actionPromise;
+
+ const [, status3] = result.current;
+
+ expect(status3.loading).toBe(false);
+ expect(await actionPromise).toBe('test response value');
+ expect(status3.error).toBe(undefined);
+ });
+ });
+
+ it('should run operation on command with error and loading phases: false -> true -> false', async () => {
+ jest.useFakeTimers();
+
+ const testRejectingAsyncAction = jest.fn().mockImplementation(() => new Promise((resolve, reject) => setTimeout(() => reject(new Error('error somewhere')), 1000)));
+
+ const {result, rerender} = renderHookWithContext(() => {
+ return useOperation(testRejectingAsyncAction, false);
+ }, getBaseState());
+
+ const [doAction, status1] = result.current;
+ expect(status1.loading).toBe(false);
+ expect(status1.error).toBe(undefined);
+
+ let actionPromise: Promise;
+ act(() => {
+ actionPromise = doAction();
+ });
+ rerender();
+
+ const [, status2] = result.current;
+ expect(status2.loading).toBe(true);
+ expect(status2.error).toBe(undefined);
+
+ jest.runAllTimers();
+
+ await act(async () => {
+ await actionPromise;
+ });
+
+ const [, status3] = result.current;
+ expect(status3.loading).toBe(false);
+ expect(status3.error).toBeTruthy();
+ });
+});
diff --git a/webapp/channels/src/components/admin_console/system_properties/section_utils.ts b/webapp/channels/src/components/admin_console/system_properties/section_utils.ts
new file mode 100644
index 0000000000..e33aced9f2
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/system_properties/section_utils.ts
@@ -0,0 +1,141 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {ReactNode} from 'react';
+import {useState, useCallback, useEffect} from 'react';
+import {useSelector} from 'react-redux';
+
+import type {GlobalState} from 'types/store';
+
+export class BatchProcessingError extends Error {
+ cause?: {[key: string]: T};
+}
+
+export type SectionHook = SectionIO & {
+ content: ReactNode;
+}
+
+export type SectionIO = {
+ save: () => void;
+ cancel: () => void;
+ loading: boolean;
+ saving: boolean;
+ saveError: Error | undefined;
+ hasChanges: boolean;
+ isValid: boolean;
+};
+
+export type TLoadingState = boolean | TError;
+
+const status = (state: TLoadingState) => {
+ const loading = state === true;
+ const error = state instanceof Error ? state : undefined;
+
+ return {loading, error};
+};
+
+/**
+ * Track loading and error states of an async operation.
+ * Error is cleared when setting loading status.
+ * @param initialState -
+ */
+export const useOperationStatus = (initialState: TLoadingState) => {
+ const [state, setState] = useState>(initialState);
+ return [status(state), setState] as const;
+};
+
+export type ReadOperations = {
+ get: () => Promise;
+ select?: (state: GlobalState) => T | undefined;
+ opts?: {forceInitialGet: boolean; initial?: Partial};
+}
+
+export interface CollectionIO {
+ create?: (patch?: Partial) => void;
+ update?: (item: T) => void;
+ delete?: ((item: T) => void) | ((id: T['id']) => void);
+ reorder?: (item: T, nextOrder: number) => void;
+}
+
+/**
+ * Monitored async operation with stateful error and loading status handling.
+ * @param initialStatus Provide default loading status. e.g. `true` if operation starts immediately or `false` if manually triggered.
+ */
+export function useOperation(op: (...args: TArgs) => T | undefined | Promise, initialStatus = true) {
+ const [status, setStatus] = useOperationStatus(initialStatus);
+
+ const doOp = useCallback(async (...args: TArgs) => {
+ setStatus(true);
+ try {
+ const response = await op(...args);
+ setStatus(false);
+ return response;
+ } catch (err) {
+ setStatus(err);
+ return undefined;
+ }
+ }, [op]);
+
+ return [doOp, status, setStatus] as const;
+}
+
+/**
+ * Use current thing from redux selector or async read operation
+ * @param ops Read
+ * @param ops.get Async operation to retrieve thing if not selected or needs hydration. e.g. a client4 method or dispatched action creator.
+ * @param ops.select Redux selector to retrieve thing from the store. Selected thing takes precedence over get-acquired thing.
+ * @param initial Provide the initial state of the thing, e.g. placeholder while the get operation is pending.
+ * @returns The thing and related meta. Use returned `get` action to forcefully or manually get thing.
+ * @remarks Current thing is designed to correspond to the real/saved thing e.g. most recent version of the thing on the server
+ */
+export function useThing(ops: ReadOperations, initial: T) {
+ const forceInitialGet = ops.opts?.forceInitialGet ?? true;
+ const selected = useSelector((state) => ops.select?.(state));
+ const [data, setData] = useState(initial);
+ const [get, status] = useOperation(ops.get, forceInitialGet || !selected);
+
+ useEffect(() => {
+ if (forceInitialGet || !selected) {
+ get().then((value) => {
+ if (value !== undefined) {
+ setData(value);
+ }
+ });
+ }
+ }, [forceInitialGet, selected, get, setData]);
+
+ return [selected ?? data, {...status, get, setData}] as const;
+}
+
+/**
+ * Use a pending thing to be saved in the future. Designed to be used with a corresponding {@link useThing}.
+ * Has built-in patching for simple/flat objects, or add your own layered write operations on top in your custom hook.
+ * @param data Current version or "source of truth" version of thing.
+ * @param opts.commit Action to save pending thing.
+ * @remarks After successfully committing, sync the resulting thing back to the current thing to reconcile or complete or the cycle and clear any diffs.
+ */
+export function usePendingThing, TErr extends Error>(data: T, opts: {commit: (pending: T, current: T) => T | Promise}) {
+ const [pending, setPending] = useState(data);
+ const hasChanges = pending !== data;
+
+ const [doCommit, {loading: saving, error}, setStatus] = useOperation, TErr>(opts.commit, false);
+
+ useEffect(() => {
+ setPending(data);
+ }, [data]);
+
+ const apply = useCallback((update: T | ((current: T) => T)) => {
+ setPending((current) => (typeof update === 'function' ? update(current) : ({...current, ...update})));
+ }, [setPending]);
+
+ const reset = useCallback(() => {
+ setPending(data);
+ setStatus(false);
+ }, [setPending, data, setStatus]);
+
+ const commit = useCallback(() => {
+ return doCommit(pending, data);
+ }, [doCommit, pending, data]);
+
+ return [pending, {saving, error, hasChanges, apply, commit, reset}] as const;
+}
diff --git a/webapp/channels/src/components/admin_console/system_properties/system_properties.tsx b/webapp/channels/src/components/admin_console/system_properties/system_properties.tsx
new file mode 100644
index 0000000000..c6a0df6f53
--- /dev/null
+++ b/webapp/channels/src/components/admin_console/system_properties/system_properties.tsx
@@ -0,0 +1,97 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {useEffect} from 'react';
+import {FormattedMessage, defineMessages, useIntl} from 'react-intl';
+import {useDispatch} from 'react-redux';
+
+import {setNavigationBlocked} from 'actions/admin_actions';
+
+import AdminHeader from 'components/widgets/admin_console/admin_header';
+
+import {AdminSection, AdminWrapper, DangerText, SectionContent, SectionHeader, SectionHeading} from './controls';
+import {useUserPropertiesTable} from './user_properties_table';
+
+import SaveChangesPanel from '../save_changes_panel';
+import type {SearchableStrings} from '../types';
+
+type Props = {
+ disabled: boolean;
+}
+
+export default function SystemProperties(props: Props) {
+ const {formatMessage} = useIntl();
+ const dispatch = useDispatch();
+
+ const userProperties = useUserPropertiesTable();
+
+ const saving = userProperties.saving;
+ const hasChanges = userProperties.hasChanges;
+ const isValid = userProperties.isValid;
+ const saveError = userProperties.saveError;
+
+ const handleSave = () => {
+ userProperties.save();
+ };
+
+ const handleCancel = () => {
+ userProperties.cancel();
+ };
+
+ useEffect(() => {
+ // block nav when changes are pending
+ dispatch(setNavigationBlocked(hasChanges));
+ }, [hasChanges]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {userProperties.content}
+
+
+
+
+ ) : undefined}
+ savingMessage={formatMessage({id: 'admin.system_properties.details.saving_changes', defaultMessage: 'Saving configuration…'})}
+ isDisabled={props.disabled || saving || !isValid}
+ />
+