Mono repo -> Master (#22553)

Combines the following repositories into one:

https://github.com/mattermost/mattermost-server
https://github.com/mattermost/mattermost-webapp
https://github.com/mattermost/focalboard
https://github.com/mattermost/mattermost-plugin-playbooks

webapp/channels/src/components/cloud_invoice_preview/cloud_invoice_preview.scss

@@ -0,0 +1,82 @@
+.CloudInvoicePreview {
+    top: 15px;
+    width: 860px;
+    height: 1030px;
+    margin: 0 auto;
+    border-radius: 8px;
+    overflow-y: hidden !important;
+
+    .modal-header {
+        display: block;
+        padding-bottom: 0;
+        border: none;
+        background-color: #fff !important;
+        color: #3f4350;
+
+        .close {
+            margin-top: auto;
+            margin-bottom: auto;
+            color: rgba(#3f4350, 0.56) !important;
+        }
+
+        .modal-title {
+            color: inherit;
+            font-family: 'Metropolis';
+            font-size: 22px;
+            font-style: normal;
+            font-weight: 600;
+        }
+
+        .subtitle {
+            margin-top: 10px;
+            color: rgba(#3d3c40, 0.72);
+            font-family: 'Metropolis';
+            font-size: 14px;
+            font-style: normal;
+        }
+    }
+
+    .modal-open {
+        overflow-y: hidden !important;
+    }
+
+    .modal {
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        margin: 0 !important;
+    }
+
+    .modal-dialog {
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        margin: 0 !important;
+    }
+
+    .modal-body {
+        padding: 0;
+
+        .view-image__loading {
+            background-color: #fff;
+            color: #fff;
+
+            .fa {
+                color: #3f4350;
+            }
+        }
+    }
+
+    .post-code {
+        display: flex;
+
+        canvas {
+            display: block;
+            max-height: 100%;
+            padding-right: 0;
+            padding-left: 0;
+            margin-right: auto;
+            margin-left: auto;
+        }
+    }
+}

webapp/channels/src/components/cloud_invoice_preview/index.tsx

@@ -0,0 +1,84 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+
+import {useDispatch, useSelector} from 'react-redux';
+
+import {Modal} from 'react-bootstrap';
+
+import PDFPreview from 'components/pdf_preview';
+
+import {closeModal} from 'actions/views/modals';
+import {ModalIdentifiers} from 'utils/constants';
+import {isModalOpen} from 'selectors/views/modals';
+import {GlobalState} from 'types/store';
+
+import './cloud_invoice_preview.scss';
+import ExternalLink from 'components/external_link';
+
+type Props = {
+    onHide?: () => void;
+    url?: string;
+};
+
+function CloudInvoicePreview(props: Props) {
+    const dispatch = useDispatch();
+
+    const isPreviewModalOpen = useSelector((state: GlobalState) =>
+        isModalOpen(state, ModalIdentifiers.CLOUD_INVOICE_PREVIEW),
+    );
+
+    const onHide = () => {
+        dispatch(closeModal(ModalIdentifiers.CLOUD_INVOICE_PREVIEW));
+        if (typeof props.onHide === 'function') {
+            props.onHide();
+        }
+    };
+
+    return (
+        <Modal
+            show={isPreviewModalOpen}
+            onExited={onHide}
+            onHide={onHide}
+            id='cloud-invoice-preview'
+            className='CloudInvoicePreview'
+            dialogClassName='a11y__modal'
+        >
+            <Modal.Header closeButton={true}>
+                <Modal.Title>{'Invoice'}</Modal.Title>
+                <div className={'subtitle'}>
+                    <FormattedMessage
+                        id='cloud.invoice_pdf_preview.download'
+                        values={{
+                            downloadLink: (msg: string) => (
+                                <ExternalLink
+                                    href={props.url || ''}
+                                    location='cloud_invoice_preview'
+                                >
+                                    {msg}
+                                </ExternalLink>),
+                        }}
+                    />
+                </div>
+            </Modal.Header>
+            <Modal.Body>
+                <div className='cloud_invoice_preview_modal'>
+                    <PDFPreview
+                        fileInfo={{
+                            extension: 'pdf',
+                            size: 0,
+                            name: '',
+                        }}
+                        fileUrl={props.url}
+                        scale={1.4}
+                        handleBgClose={() => {}}
+                    />
+                </div>
+            </Modal.Body>
+        </Modal>
+    );
+}
+
+export default CloudInvoicePreview;