mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-60216] Migrate tooltips of admin_consoles "admin_settings", "schema_admin_settings" & "permission_description" to WithTooltip (#28003)

Просмотр исходного кода
Этот коммит содержится в:
M-ZubairAhmed
2024-08-22 13:58:12 +00:00
коммит произвёл GitHub
родитель 5a07d9cb72
Коммит ad5d5f08dc
18 изменённых файлов: 895 добавлений и 1024 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

52
webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
Просмотреть файл

@@ -215,29 +215,27 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -458,29 +456,27 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

104
webapp/channels/src/components/admin_console/__snapshots__/cluster_settings.test.tsx.snap
Просмотреть файл

@@ -234,29 +234,27 @@ exports[`components/ClusterSettings should match snapshot, compression disabled
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -496,29 +494,27 @@ exports[`components/ClusterSettings should match snapshot, compression enabled 1
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -758,29 +754,27 @@ exports[`components/ClusterSettings should match snapshot, encryption disabled 1
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -1020,29 +1014,27 @@ exports[`components/ClusterSettings should match snapshot, encryption enabled 1`
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

26
webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
Просмотреть файл

@@ -430,29 +430,27 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

52
webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
Просмотреть файл

@@ -538,29 +538,27 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -1103,29 +1101,27 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

104
webapp/channels/src/components/admin_console/__snapshots__/message_export_settings.test.tsx.snap
Просмотреть файл

@@ -144,29 +144,27 @@ exports[`components/MessageExportSettings should match snapshot, disabled, actia
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -430,29 +428,27 @@ exports[`components/MessageExportSettings should match snapshot, disabled, globa
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -602,29 +598,27 @@ exports[`components/MessageExportSettings should match snapshot, enabled, actian
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -888,29 +882,27 @@ exports[`components/MessageExportSettings should match snapshot, enabled, global
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

52
webapp/channels/src/components/admin_console/__snapshots__/push_settings.test.tsx.snap
Просмотреть файл

@@ -164,29 +164,27 @@ exports[`components/PushSettings should match snapshot, licensed 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -300,29 +298,27 @@ exports[`components/PushSettings should match snapshot, unlicensed 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

19
webapp/channels/src/components/admin_console/__snapshots__/schema_admin_settings.test.tsx.snap
Просмотреть файл

@@ -710,11 +710,14 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
data-testid="errorMessage" data-testid="errorMessage"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error="" error=""
@@ -727,17 +730,7 @@ exports[`components/admin_console/SchemaAdminSettings should match snapshot with
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
`; `;

47
webapp/channels/src/components/admin_console/admin_settings.tsx
Просмотреть файл

@@ -2,17 +2,15 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React from 'react';
import {Overlay} from 'react-bootstrap'; import {FormattedMessage} from 'react-intl';
import type {AdminConfig, EnvironmentConfig} from '@mattermost/types/config'; import type {AdminConfig, EnvironmentConfig} from '@mattermost/types/config';
import type {DeepPartial} from '@mattermost/types/utilities'; import type {DeepPartial} from '@mattermost/types/utilities';
import FormError from 'components/form_error'; import FormError from 'components/form_error';
import SaveButton from 'components/save_button'; import SaveButton from 'components/save_button';
import Tooltip from 'components/tooltip';
import AdminHeader from 'components/widgets/admin_console/admin_header'; import AdminHeader from 'components/widgets/admin_console/admin_header';
import WithTooltip from 'components/with_tooltip';
import {localizeMessage} from 'utils/utils';
export type BaseProps = { export type BaseProps = {
config?: DeepPartial<AdminConfig>; config?: DeepPartial<AdminConfig>;
@@ -27,7 +25,6 @@ export type BaseState = {
saving: boolean; saving: boolean;
serverError: string|null; serverError: string|null;
serverErrorId?: string; serverErrorId?: string;
errorTooltip: boolean;
} }
// Placeholder type until ClientError is exported from redux. // Placeholder type until ClientError is exported from redux.
@@ -38,21 +35,18 @@ type ClientErrorPlaceholder = {
} }
export default abstract class AdminSettings <Props extends BaseProps, State extends BaseState> extends React.Component<Props, State> { export default abstract class AdminSettings <Props extends BaseProps, State extends BaseState> extends React.Component<Props, State> {
private errorMessageRef: React.RefObject<HTMLDivElement>;
public constructor(props: Props) { public constructor(props: Props) {
super(props); super(props);
const stateInit = { const stateInit = {
saveNeeded: false, saveNeeded: false,
saving: false, saving: false,
serverError: null, serverError: null,
errorTooltip: false,
}; };
if (props.config) { if (props.config) {
this.state = Object.assign(this.getStateFromConfig(props.config), stateInit) as Readonly<State>; this.state = Object.assign(this.getStateFromConfig(props.config), stateInit) as Readonly<State>;
} else { } else {
this.state = stateInit as Readonly<State>; this.state = stateInit as Readonly<State>;
} }
this.errorMessageRef = React.createRef();
} }
protected abstract getStateFromConfig(config: DeepPartial<AdminConfig>): Partial<State>; protected abstract getStateFromConfig(config: DeepPartial<AdminConfig>): Partial<State>;
@@ -67,18 +61,6 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
protected canSave?: () => boolean; protected canSave?: () => boolean;
private closeTooltip = () => {
this.setState({errorTooltip: false});
};
private openTooltip = (e: React.MouseEvent) => {
const elm: HTMLElement|null = e.currentTarget.querySelector('.control-label');
if (elm) {
const isElipsis = elm.offsetWidth < elm.scrollWidth;
this.setState({errorTooltip: isElipsis});
}
};
protected handleChange = (id: string, value: unknown) => { protected handleChange = (id: string, value: unknown) => {
this.setState((prevState) => ({ this.setState((prevState) => ({
...prevState, ...prevState,
@@ -249,25 +231,24 @@ export default abstract class AdminSettings <Props extends BaseProps, State exte
saving={this.state.saving} saving={this.state.saving}
disabled={this.props.isDisabled || !this.state.saveNeeded || (this.canSave && !this.canSave())} disabled={this.props.isDisabled || !this.state.saveNeeded || (this.canSave && !this.canSave())}
onClick={this.handleSubmit} onClick={this.handleSubmit}
savingMessage={localizeMessage('admin.saving', 'Saving Config...')} savingMessage={
<FormattedMessage
id='admin.saving'
defaultMessage='Saving Config...'
/> />
}
/>
<WithTooltip
id='error-tooltip'
placement='top'
title={this.state?.serverError ?? ''}
>
<div <div
className='error-message' className='error-message'
ref={this.errorMessageRef}
onMouseOver={this.openTooltip}
onMouseOut={this.closeTooltip}
> >
<FormError error={this.state.serverError}/> <FormError error={this.state.serverError}/>
</div> </div>
<Overlay </WithTooltip>
show={this.state.errorTooltip}
placement='top'
target={this.errorMessageRef.current as HTMLElement}
>
<Tooltip id='error-tooltip' >
{this.state.serverError}
</Tooltip>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

57
webapp/channels/src/components/admin_console/custom_plugin_settings/__snapshots__/custom_plugin_settings.test.tsx.snap
Просмотреть файл

@@ -191,11 +191,14 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
data-testid="errorMessage" data-testid="errorMessage"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error="" error=""
@@ -208,17 +211,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
`; `;
@@ -252,11 +245,14 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
data-testid="errorMessage" data-testid="errorMessage"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error="" error=""
@@ -269,17 +265,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
`; `;
@@ -475,11 +461,14 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage="Saving Config..."
/> />
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
data-testid="errorMessage" data-testid="errorMessage"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error="" error=""
@@ -492,17 +481,7 @@ exports[`components/admin_console/CustomPluginSettings should match snapshot wit
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
`; `;

104
webapp/channels/src/components/admin_console/custom_terms_of_service_settings/__snapshots__/custom_terms_of_service_settings.test.tsx.snap
Просмотреть файл

@@ -23,29 +23,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -74,29 +72,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -125,29 +121,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -176,29 +170,27 @@ exports[`components/admin_console/CustomTermsOfServiceSettings should match snap
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

1
webapp/channels/src/components/admin_console/message_export_settings.tsx
Просмотреть файл

@@ -110,7 +110,6 @@ export class MessageExportSettings extends AdminSettings<BaseProps & WrappedComp
saveNeeded: false, saveNeeded: false,
saving: false, saving: false,
serverError: null, serverError: null,
errorTooltip: false,
}; };
if (config.MessageExportSettings.GlobalRelaySettings) { if (config.MessageExportSettings.GlobalRelaySettings) {
state.globalRelayCustomerType = config.MessageExportSettings.GlobalRelaySettings.CustomerType; state.globalRelayCustomerType = config.MessageExportSettings.GlobalRelaySettings.CustomerType;

154
webapp/channels/src/components/admin_console/permission_schemes_settings/__snapshots__/permission_description.test.tsx.snap
Просмотреть файл

@@ -22,10 +22,100 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
} }
} }
selectRow={[MockFunction]} selectRow={[MockFunction]}
>
<WithTooltip
disabled={false}
id="defaultID"
placement="top"
title={
<span
className="inherit-link-wrapper"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Inherited from <link>{name}</link>."
id="admin.permissions.inherited_from"
values={
Object {
"link": [Function],
"name": "All Members",
}
}
/>
</span>
}
>
<OverlayTrigger
defaultOverlayShown={false}
delay={400}
disabled={false}
overlay={<Unknown />}
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
>
<OverlayTrigger
defaultOverlayShown={false}
delay={400}
overlay={
<OverlayWrapper
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
/>
}
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
> >
<span <span
className="permission-description" className="permission-description"
onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -53,22 +143,10 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
</span> </span>
</FormattedMessage> </FormattedMessage>
</span> </span>
<Overlay
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Overlay
placement="top"
rootClose={false}
show={false}
target={null}
transition={[Function]}
/>
</Overlay>
</span> </span>
</OverlayTrigger>
</OverlayTrigger>
</WithTooltip>
</PermissionDescription> </PermissionDescription>
</Provider> </Provider>
`; `;
@@ -119,49 +197,39 @@ exports[`components/admin_console/permission_schemes_settings/permission_descrip
`; `;
exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with clickable link 1`] = ` exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with clickable link 1`] = `
<WithTooltip
disabled={false}
id="defaultID"
placement="top"
title={
<span>
This is a clickable description
</span>
}
>
<span <span
className="permission-description" className="permission-description"
onClick={[Function]} onClick={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<span> <span>
This is a clickable description This is a clickable description
</span> </span>
<Overlay
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip>
<span>
This is a clickable description
</span>
</Tooltip>
</Overlay>
</span> </span>
</WithTooltip>
`; `;
exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with default Props 1`] = ` exports[`components/admin_console/permission_schemes_settings/permission_description should match snapshot with default Props 1`] = `
<WithTooltip
disabled={false}
id="defaultID"
placement="top"
title="This is the description"
>
<span <span
className="permission-description" className="permission-description"
onClick={[Function]} onClick={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
This is the description This is the description
<Overlay
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip>
This is the description
</Tooltip>
</Overlay>
</span> </span>
</WithTooltip>
`; `;

50
webapp/channels/src/components/admin_console/permission_schemes_settings/permission_description.tsx
Просмотреть файл

@@ -1,14 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React, {useState, useRef} from 'react'; import React from 'react';
import type {MouseEvent} from 'react'; import type {MouseEvent} from 'react';
import {Overlay} from 'react-bootstrap';
import {FormattedMessage, useIntl} from 'react-intl'; import {FormattedMessage, useIntl} from 'react-intl';
import type {Role} from '@mattermost/types/roles'; import type {Role} from '@mattermost/types/roles';
import Tooltip from 'components/tooltip'; import WithTooltip from 'components/with_tooltip';
import type {AdditionalValues} from './permissions_tree/types'; import type {AdditionalValues} from './permissions_tree/types';
import {rolesRolesStrings} from './strings/roles'; import {rolesRolesStrings} from './strings/roles';
@@ -28,17 +27,7 @@ const PermissionDescription = ({
additionalValues, additionalValues,
inherited, inherited,
}: Props): JSX.Element => { }: Props): JSX.Element => {
const [open, setOpen] = useState(false); const {formatMessage} = useIntl();
const contentRef = useRef<HTMLSpanElement>(null);
const intl = useIntl();
const closeTooltip = () => setOpen(false);
const openTooltip = (e: MouseEvent) => {
const elm = e.currentTarget.querySelector('span');
const isElipsis = elm ? elm.offsetWidth < elm.scrollWidth : false;
setOpen(isElipsis);
};
const parentPermissionClicked = (e: MouseEvent) => { const parentPermissionClicked = (e: MouseEvent) => {
const parent = (e.target as HTMLSpanElement).parentElement; const parent = (e.target as HTMLSpanElement).parentElement;
@@ -53,7 +42,7 @@ const PermissionDescription = ({
let content: string | JSX.Element = ''; let content: string | JSX.Element = '';
if (inherited && inherited.name) { if (inherited && inherited.name) {
const formattedName = intl.formatMessage(rolesRolesStrings[inherited.name]); const formattedName = formatMessage(rolesRolesStrings[inherited.name]);
content = ( content = (
<span className='inherit-link-wrapper'> <span className='inherit-link-wrapper'>
<FormattedMessage <FormattedMessage
@@ -71,34 +60,27 @@ const PermissionDescription = ({
} else { } else {
content = description; content = description;
} }
let tooltip: JSX.Element | null = (
<Overlay let showTooltip = true;
show={open}
placement='top'
target={(contentRef.current as HTMLSpanElement)}
>
<Tooltip>
{content}
</Tooltip>
</Overlay>
);
if (!inherited && additionalValues) { if (!inherited && additionalValues) {
tooltip = null; showTooltip = false;
} }
content = (
return (
<WithTooltip
id={id}
placement='top'
title={content}
disabled={!showTooltip}
>
<span <span
className='permission-description' className='permission-description'
onClick={parentPermissionClicked} onClick={parentPermissionClicked}
ref={contentRef}
onMouseOver={openTooltip}
onMouseOut={closeTooltip}
> >
{content} {content}
{tooltip}
</span> </span>
</WithTooltip>
); );
return content;
}; };
export default PermissionDescription; export default PermissionDescription;

390
webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
Просмотреть файл

@@ -312,29 +312,27 @@ exports[`components/PluginManagement should match snapshot 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -652,29 +650,27 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -740,29 +736,27 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -1080,29 +1074,27 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -1422,29 +1414,27 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -1766,29 +1756,27 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -2106,29 +2094,27 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -2423,29 +2409,27 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -2763,29 +2747,27 @@ exports[`components/PluginManagement should match snapshot, text entered into th
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -3110,29 +3092,27 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -3513,29 +3493,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -3884,29 +3862,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -4255,29 +4231,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -4626,29 +4600,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>
@@ -5029,29 +5001,27 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
saving={false} saving={false}
savingMessage="Saving Config..." savingMessage={
<Memo(MemoizedFormattedMessage)
defaultMessage="Saving Config..."
id="admin.saving"
/> />
}
/>
<WithTooltip
id="error-tooltip"
placement="top"
title=""
>
<div <div
className="error-message" className="error-message"
onMouseOut={[Function]}
onMouseOver={[Function]}
> >
<FormError <FormError
error={null} error={null}
errors={Array []} errors={Array []}
/> />
</div> </div>
<Overlay </WithTooltip>
animation={[Function]}
placement="top"
rootClose={false}
show={false}
target={null}
>
<Tooltip
id="error-tooltip"
/>
</Overlay>
</div> </div>
</div> </div>
</form> </form>

39
webapp/channels/src/components/admin_console/schema_admin_settings.tsx
Просмотреть файл

@@ -2,7 +2,6 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React from 'react';
import {Overlay} from 'react-bootstrap';
import {FormattedMessage, injectIntl} from 'react-intl'; import {FormattedMessage, injectIntl} from 'react-intl';
import type {IntlShape, MessageDescriptor, WrappedComponentProps} from 'react-intl'; import type {IntlShape, MessageDescriptor, WrappedComponentProps} from 'react-intl';
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
@@ -31,9 +30,9 @@ import UserAutocompleteSetting from 'components/admin_console/user_autocomplete_
import FormError from 'components/form_error'; import FormError from 'components/form_error';
import Markdown from 'components/markdown'; import Markdown from 'components/markdown';
import SaveButton from 'components/save_button'; import SaveButton from 'components/save_button';
import Tooltip from 'components/tooltip';
import AdminHeader from 'components/widgets/admin_console/admin_header'; import AdminHeader from 'components/widgets/admin_console/admin_header';
import WarningIcon from 'components/widgets/icons/fa_warning_icon'; import WarningIcon from 'components/widgets/icons/fa_warning_icon';
import WithTooltip from 'components/with_tooltip';
import * as I18n from 'i18n/i18n.jsx'; import * as I18n from 'i18n/i18n.jsx';
import Constants from 'utils/constants'; import Constants from 'utils/constants';
@@ -67,7 +66,6 @@ type State = {
saveNeeded: false | 'both' | 'permissions' | 'config'; saveNeeded: false | 'both' | 'permissions' | 'config';
saving: boolean; saving: boolean;
serverError: null; serverError: null;
errorTooltip: boolean;
customComponentWrapperClass: string; customComponentWrapperClass: string;
confirmNeededId: string; confirmNeededId: string;
showConfirmId: string; showConfirmId: string;
@@ -99,7 +97,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
private isPlugin: boolean; private isPlugin: boolean;
private saveActions: Array<() => Promise<{error?: {message?: string}}>>; private saveActions: Array<() => Promise<{error?: {message?: string}}>>;
private buildSettingFunctions: {[x: string]: (setting: any) => JSX.Element}; private buildSettingFunctions: {[x: string]: (setting: any) => JSX.Element};
private errorMessageRef: React.RefObject<HTMLDivElement>;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@@ -130,13 +127,11 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
saveNeeded: false, saveNeeded: false,
saving: false, saving: false,
serverError: null, serverError: null,
errorTooltip: false,
customComponentWrapperClass: '', customComponentWrapperClass: '',
confirmNeededId: '', confirmNeededId: '',
showConfirmId: '', showConfirmId: '',
clientWarning: '', clientWarning: '',
}; };
this.errorMessageRef = React.createRef();
} }
static getDerivedStateFromProps(props: Props, state: State) { static getDerivedStateFromProps(props: Props, state: State) {
@@ -146,7 +141,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
saveNeeded: false, saveNeeded: false,
saving: false, saving: false,
serverError: null, serverError: null,
errorTooltip: false,
...SchemaAdminSettings.getStateFromConfig(props.config, props.schema, props.roles), ...SchemaAdminSettings.getStateFromConfig(props.config, props.schema, props.roles),
}; };
} }
@@ -1155,19 +1149,6 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
return null; return null;
}; };
closeTooltip = () => {
this.setState({errorTooltip: false});
};
openTooltip = (e: React.MouseEvent<HTMLDivElement>) => {
const elm = e.currentTarget.querySelector<HTMLLabelElement>('.control-label');
if (!elm) {
return;
}
const isElipsis = elm.offsetWidth < elm.scrollWidth;
this.setState({errorTooltip: isElipsis});
};
doSubmit = async (getStateFromConfig: (config: Partial<AdminConfig>, schema: AdminDefinitionSubSectionSchema, roles?: Record<string, Role>) => Partial<State>) => { doSubmit = async (getStateFromConfig: (config: Partial<AdminConfig>, schema: AdminDefinitionSubSectionSchema, roles?: Record<string, Role>) => Partial<State>) => {
if (!this.props.schema) { if (!this.props.schema) {
return; return;
@@ -1368,12 +1349,14 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
onClick={this.handleSubmit} onClick={this.handleSubmit}
savingMessage={this.props.intl.formatMessage({id: 'admin.saving', defaultMessage: 'Saving Config...'})} savingMessage={this.props.intl.formatMessage({id: 'admin.saving', defaultMessage: 'Saving Config...'})}
/> />
<WithTooltip
id='error-tooltip'
placement='top'
title={this.state?.serverError ?? ''}
>
<div <div
className='error-message' className='error-message'
data-testid='errorMessage' data-testid='errorMessage'
ref={this.errorMessageRef}
onMouseOver={this.openTooltip}
onMouseOut={this.closeTooltip}
> >
<FormError <FormError
iconClassName='fa-exclamation-triangle' iconClassName='fa-exclamation-triangle'
@@ -1383,15 +1366,7 @@ export class SchemaAdminSettings extends React.PureComponent<Props, State> {
<FormError error={this.state.serverError}/> <FormError error={this.state.serverError}/>
</div> </div>
<Overlay </WithTooltip>
show={this.state.errorTooltip}
placement='top'
target={this.errorMessageRef.current!}
>
<Tooltip id='error-tooltip' >
{this.state.serverError}
</Tooltip>
</Overlay>
</div> </div>
</div> </div>
); );

1
webapp/channels/src/sass/components/_permissions.scss
Просмотреть файл

@@ -172,6 +172,7 @@
display: flex; display: flex;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
width: fit-content;
height: 100%; height: 100%;
align-items: center; align-items: center;
opacity: 0.75; opacity: 0.75;

27
webapp/channels/src/utils/position_utils.test.tsx
Просмотреть файл

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import {popOverOverlayPosition, approxGroupPopOverHeight} from 'utils/position_utils'; import {popOverOverlayPosition} from 'utils/position_utils';
test('Should return placement position for overlay based on bounds, space required and innerHeight', () => { test('Should return placement position for overlay based on bounds, space required and innerHeight', () => {
const targetBounds = { const targetBounds = {
@@ -14,28 +14,3 @@ test('Should return placement position for overlay based on bounds, space requir
expect(popOverOverlayPosition(targetBounds as DOMRect, 1000, 450)).toEqual('bottom'); expect(popOverOverlayPosition(targetBounds as DOMRect, 1000, 450)).toEqual('bottom');
expect(popOverOverlayPosition(targetBounds as DOMRect, 1000, 600)).toEqual('left'); expect(popOverOverlayPosition(targetBounds as DOMRect, 1000, 600)).toEqual('left');
}); });
test('Should return the correct height for the group list overlay bounded by viewport height or max list height', () => {
// constants. should not need to change
const viewportScaleFactor = 0.4;
const headerHeight = 130;
const maxListHeight = 800;
// array of [listHeight, viewPortHeight, expected]
// tests for cases when
// group list fits
// group list is too tall for viewport
// group list reaches max list height
const testCases = [[100, 1000, 230], [500, 500, 330], [800, 2000, maxListHeight]];
for (const [listHeight, viewPortHeight, expected] of testCases) {
expect(
approxGroupPopOverHeight(
listHeight,
viewPortHeight,
viewportScaleFactor,
headerHeight,
maxListHeight,
)).toBe(expected);
}
});

14
webapp/channels/src/utils/position_utils.tsx
Просмотреть файл

@@ -22,17 +22,3 @@ export function popOverOverlayPosition(
} }
return placement; return placement;
} }
export function approxGroupPopOverHeight(
groupListHeight: number,
viewPortHeight: number,
viewportScaleFactor: number,
headerHeight: number,
maxListHeight: number,
): number {
return Math.min(
(viewPortHeight * viewportScaleFactor) + headerHeight,
groupListHeight + headerHeight,
maxListHeight,
);
}