ref: improve handling for room destroyed events (#13591)

* ref: improve handling for room destroyed events

* add missing translation

* code review

* implement kick handling

* implement native handling

* fix tests

* code review changes

* add dialog testId

* fix end conf for react native

* fix lobby test

* add translation for lobby closing

---------

Co-authored-by: Gabriel Borlea <gabriel.borlea@8x8.com>

react/features/conference/components/web/LeaveReasonDialog.web.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import Dialog from '../../../base/ui/components/web/Dialog';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        dialog: {
+            marginBottom: theme.spacing(1)
+        },
+
+        text: {
+            fontSize: '20px'
+        }
+    };
+});
+
+/**
+ * The type of the React {@code Component} props of {@link LeaveReasonDialog}.
+ */
+interface IProps {
+
+    /**
+     * Callback invoked when {@code LeaveReasonDialog} is unmounted.
+     */
+    onClose: () => void;
+
+    /**
+     * The title to display in the dialog.
+     */
+    title?: string;
+}
+
+/**
+ * A React {@code Component} for displaying a dialog with a reason that ended the conference.
+ *
+ * @param {IProps} props - Component's props.
+ * @returns {JSX}
+ */
+const LeaveReasonDialog = ({ onClose, title }: IProps) => {
+    const { classes } = useStyles();
+    const { t } = useTranslation();
+
+    useEffect(() => () => {
+        onClose?.();
+    }, []);
+
+    return (
+        <Dialog
+            cancel = {{ hidden: true }}
+            onSubmit = { onClose }
+            size = 'medium'
+            testId = 'dialog.leaveReason'>
+            <div className = { classes.dialog }>
+                {title ? <div className = { classes.text }>{t(title)}</div> : null}
+            </div>
+        </Dialog>
+    );
+};
+
+export default LeaveReasonDialog;