phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[MM-61716][MM-62643] Introduce Modal component, remove bootstrap and react-bootstrap from most modals, update styles (#3317)

Browse Source 
* Introduce Modal, add some styles from the webapp

* Remove bootstrap from LoadingScreen/WelcomeScreen

* Migrate add/edit server modal to Modal, remove bootstrap

* Migrate remove server modal to Modal, remove bootstrap

* Migrate certificate modal to Modal, remove bootstrap

* Migrate login and permission modals to Modal, remove Bootstrap

* Misc fixes

* E2E tests for current modals

* Update src/renderer/components/Modal.tsx

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* Update src/renderer/components/Modal.tsx

Co-authored-by: Daniel Espino García <larkox@gmail.com>

* PR feedback

---------

Co-authored-by: Daniel Espino García <larkox@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Devin Binnie
2025-02-18 10:58:28 -05:00
committed by GitHub
parent 34963cbaa8
commit 4d754efdd7
44 changed files with 1854 additions and 927 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/renderer/modals/permission/permissionModal.tsx
View File

@@ -2,19 +2,19 @@
// See LICENSE.txt for license information.
import React from 'react';
import {Modal, Button} from 'react-bootstrap';
import type {IntlShape} from 'react-intl';
import {FormattedMessage, injectIntl} from 'react-intl';
import type {IntlShape} from 'react-intl';
import {PERMISSION_DESCRIPTION} from 'common/permissions';
import {parseURL} from 'common/utils/url';
import {t} from 'common/utils/util';
import {Modal} from 'renderer/components/Modal';
import type {PermissionModalInfo} from 'types/modals';
type Props = {
handleDeny: React.MouseEventHandler<HTMLButtonElement>;
handleGrant: React.MouseEventHandler<HTMLButtonElement>;
handleDeny: () => void;
handleGrant: () => void;
getPermissionInfo: () => Promise<PermissionModalInfo>;
openExternalLink: (protocol: string, url: string) => void;
intl: IntlShape;
@@ -67,74 +67,52 @@ class PermissionModal extends React.PureComponent<Props, State> {
};
return (
<div>
<p>
<FormattedMessage
id='renderer.modals.permission.permissionModal.body'
defaultMessage={'A site that\'s not included in your Mattermost server configuration requires access for {permission}.'}
values={{
permission: this.props.intl.formatMessage({id: PERMISSION_DESCRIPTION[permission!]}),
}}
/>
{}
</p>
<p>
<FormattedMessage
id='renderer.modals.permission.permissionModal.requestOriginatedFromOrigin'
defaultMessage='This request originated from <link>{origin}</link>'
values={{
origin: originDisplay,
link: (msg: React.ReactNode) => (
<a
<>
<FormattedMessage
id='renderer.modals.permission.permissionModal.body'
defaultMessage={'A site that\'s not included in your Mattermost server configuration requires access for {permission}.'}
values={{
permission: this.props.intl.formatMessage({id: PERMISSION_DESCRIPTION[permission!]}),
}}
/>
<p/>
<FormattedMessage
id='renderer.modals.permission.permissionModal.requestOriginatedFromOrigin'
defaultMessage='This request originated from <link>{origin}</link>'
values={{
origin: originDisplay,
link: (msg: React.ReactNode) => (
<a
onClick={click}
href='#'
>
{msg}
</a>
),
}}
/>
</p>
</div>
onClick={click}
href='#'
>
{msg}
</a>
),
}}
/>
</>
);
}
render() {
return (
<Modal
bsClass='modal'
className='permission-modal'
show={Boolean(this.state.url && this.state.permission)}
id='requestPermissionModal'
enforceFocus={true}
onHide={() => {}}
show={Boolean(this.state.url && this.state.permission)}
onExited={() => {}}
modalHeaderText={this.getModalTitle()}
handleConfirm={this.props.handleGrant}
confirmButtonText={
<FormattedMessage
id='label.accept'
defaultMessage='Accept'
/>
}
handleCancel={this.props.handleDeny}
>
<Modal.Header>
<Modal.Title>{this.getModalTitle()}</Modal.Title>
</Modal.Header>
<Modal.Body>
{this.getModalBody()}
</Modal.Body>
<Modal.Footer className={'remove-border'}>
<div>
<Button onClick={this.props.handleDeny}>
<FormattedMessage
id='label.cancel'
defaultMessage='Cancel'
/>
</Button>
<Button
variant='primary'
onClick={this.props.handleGrant}
>
<FormattedMessage
id='label.accept'
defaultMessage='Accept'
/>
</Button>
</div>
</Modal.Footer>
{this.getModalBody()}
</Modal>
);
}