Migration: Migrate org switcher to react (#19607)

* Migration: Migrate org switcher to react

* Improve modal overflow behavior

* Updated modal backdrop

* Renamed type

* Modal: Refactoring and reducing duplication

packages/grafana-data/src/types/index.ts

@@ -18,6 +18,7 @@ export * from './datasource';
 export * from './panel';
 export * from './plugin';
 export * from './theme';
+export * from './orgs';
 
 import * as AppEvents from './appEvents';
 import { AppEvent } from './appEvents';

packages/grafana-data/src/types/orgs.ts

@@ -0,0 +1,11 @@
+export interface UserOrgDTO {
+  orgId: number;
+  name: string;
+  role: OrgRole;
+}
+
+export enum OrgRole {
+  Admin = 'Admin',
+  Editor = 'Editor',
+  Viewer = 'Viewer',
+}

packages/grafana-ui/src/components/Modal/Modal.tsx

@@ -8,13 +8,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   modal: css`
     position: fixed;
     z-index: ${theme.zIndex.modal};
-    width: 100%;
     background: ${theme.colors.pageBg};
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     background-clip: padding-box;
     outline: none;
-
-    max-width: 750px;
+    width: 750px;
+    max-width: 100%;
     left: 0;
     right: 0;
     margin-left: auto;
@@ -28,20 +27,25 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
     bottom: 0;
     left: 0;
     z-index: ${theme.zIndex.modalBackdrop};
-    background-color: ${theme.colors.bodyBg};
+    background-color: ${theme.colors.blueFaint};
     opacity: 0.8;
     backdrop-filter: blur(4px);
   `,
   modalHeader: css`
     background: ${theme.background.pageHeader};
     box-shadow: ${theme.shadow.pageHeader};
-    border-bottom: 1px soliod ${theme.colors.pageHeaderBorder};
+    border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
     display: flex;
   `,
   modalHeaderTitle: css`
     font-size: ${theme.typography.heading.h3};
-    padding-top: calc(${theme.spacing.d} * 0.75);
-    margin: 0 calc(${theme.spacing.d} * 3) 0 calc(${theme.spacing.d} * 1.5);
+    padding-top: ${theme.spacing.sm};
+    margin: 0 ${theme.spacing.md};
+  `,
+  modalHeaderIcon: css`
+    position: relative;
+    top: 2px;
+    padding-right: ${theme.spacing.md};
   `,
   modalHeaderClose: css`
     margin-left: auto;
@@ -49,10 +53,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
   `,
   modalContent: css`
     padding: calc(${theme.spacing.d} * 2);
+    overflow: auto;
+    width: 100%;
+    max-height: calc(90vh - ${theme.spacing.d} * 2);
   `,
 }));
 
 interface Props {
+  icon?: string;
   title: string | JSX.Element;
   theme: GrafanaTheme;
 
@@ -74,6 +82,18 @@ export class UnthemedModal extends React.PureComponent<Props> {
     this.onDismiss();
   };
 
+  renderDefaultHeader() {
+    const { title, icon, theme } = this.props;
+    const styles = getStyles(theme);
+
+    return (
+      <h2 className={styles.modalHeaderTitle}>
+        {icon && <i className={cx(icon, styles.modalHeaderIcon)} />}
+        {title}
+      </h2>
+    );
+  }
+
   render() {
     const { title, isOpen = false, theme } = this.props;
     const styles = getStyles(theme);
@@ -84,16 +104,16 @@ export class UnthemedModal extends React.PureComponent<Props> {
 
     return (
       <Portal>
-        <div className={cx(styles.modal)}>
-          <div className={cx(styles.modalHeader)}>
-            {typeof title === 'string' ? <h2 className={cx(styles.modalHeaderTitle)}>{title}</h2> : <>{title}</>}
-            <a className={cx(styles.modalHeaderClose)} onClick={this.onDismiss}>
+        <div className={styles.modal}>
+          <div className={styles.modalHeader}>
+            {typeof title === 'string' ? this.renderDefaultHeader() : title}
+            <a className={styles.modalHeaderClose} onClick={this.onDismiss}>
               <i className="fa fa-remove" />
             </a>
           </div>
-          <div className={cx(styles.modalContent)}>{this.props.children}</div>
+          <div className={styles.modalContent}>{this.props.children}</div>
         </div>
-        <div className={cx(styles.modalBackdrop)} onClick={this.props.onClickBackdrop || this.onClickBackdrop} />
+        <div className={styles.modalBackdrop} onClick={this.props.onClickBackdrop || this.onClickBackdrop} />
       </Portal>
     );
   }