Merge pull request #4828 from metabase/ie11-fixes

IE11 compatibility fixes

frontend/src/metabase/components/EditBar.jsx

@@ -33,7 +33,7 @@ class EditBar extends Component {
                         {subtitle}
                     </span>
                 )}
-                <span className="flex-align-right">
+                <span className="flex-align-right flex">
                     {buttons}
                 </span>
             </div>

frontend/src/metabase/components/HistoryModal.jsx

@@ -76,7 +76,7 @@ export default class HistoryModal extends Component {
                 title="Revision history"
                 onClose={() => this.props.onClose()}
             >
-                <LoadingAndErrorWrapper loading={!revisions} error={this.state.error}>
+                <LoadingAndErrorWrapper className="flex flex-full flex-basis-auto" loading={!revisions} error={this.state.error}>
                 {() =>
                     <div className="pb4 flex-full">
                         <div className="border-bottom flex px4 py1 text-uppercase text-grey-3 text-bold h5">

frontend/src/metabase/components/LoadingAndErrorWrapper.jsx

@@ -60,7 +60,7 @@ export default class LoadingAndErrorWrapper extends Component {
             <div className={this.props.className} style={this.props.style}>
                 { error ?
                     <div className={contentClassName}>
-                        <h2 className="text-normal text-grey-2">{this.getErrorMessage()}</h2>
+                        <h2 className="text-normal text-grey-2 ie-wrap-content-fix">{this.getErrorMessage()}</h2>
                     </div>
                 : loading ?
                     <div className={contentClassName}>

frontend/src/metabase/components/Modal.jsx

@@ -143,8 +143,12 @@ export class FullPageModal extends Component {
         this._renderModal(false);
 
         // restore scroll position and scrolling
-        window.scrollTo(this._scrollX, this._scrollY);
-        document.body.style.overflow = "unset";
+        document.body.style.overflow = "";
+
+        // On IE11 a timeout is required for the scroll to happen after the change of overflow setting
+        setTimeout(() => {
+            window.scrollTo(this._scrollX, this._scrollY);
+        }, 0)
 
         // wait for animations to complete before unmounting
         setTimeout(() => {

frontend/src/metabase/components/ModalContent.jsx

@@ -66,7 +66,7 @@ ModalHeader.contextTypes = MODAL_CHILD_CONTEXT_TYPES;
 
 export const ModalBody = ({ children }, { fullPageModal, formModal }) =>
     <div
-        className={cx("ModalBody", { "px4": formModal, "flex flex-full": !formModal })}
+        className={cx("ModalBody", { "px4": formModal, "flex flex-full flex-basis-auto": !formModal })}
     >
         <div
             className="flex-full ml-auto mr-auto flex flex-column"

frontend/src/metabase/css/components/modal.css

@@ -10,6 +10,14 @@
   overflow-y: auto;
 }
 
+/* On IE11, single flex item with `margin: auto` gets shifted to flex end
+ * https://github.com/philipwalton/flexbugs/issues/157
+ * Set margin to zero when using Flexbox in `WindowModal` component 
+ */
+.Modal-backdrop > .Modal, .Modal-backdrop--dark > .Modal {
+  margin: 0;
+}
+
 .Modal.Modal--small   { width: 480px; } /* TODO - why is this one px? */
 .Modal.Modal--medium  { width: 65%; }
 .Modal.Modal--wide    { width: 85%; }
@@ -32,7 +40,7 @@
     background-color: rgba(255, 255, 255, 0.6);
 }
 
-.Modal-backdrop-dark {
+.Modal-backdrop--dark {
     background-color: rgba(75, 75, 75, 0.7);
 }
 

frontend/src/metabase/css/core/base.css

@@ -6,6 +6,7 @@
 
 html {
     height: 100%; /* ensure the entire page will fill the window */
+    width: 100%;
 }
 
 body {

frontend/src/metabase/css/core/flex.css

@@ -16,7 +16,22 @@
     flex-shrink: 0;
 }
 
-.flex-retain-width {
+/* The behavior of how `flex: <flex-grow>` sets flex-basis is inconsistent across
+ * browsers. Specifically:
+ * - On Chrome and FF it's set to `flex-basis: 0%`. That behaves equally as `height: 0%`.
+ *   It means that if the containing block has no explicit height, then `height: 0%` is computed as `height: auto`,
+ *   and element grows as its content grows. That is the most common scenario in Metabase codebase.
+ * - On older IEs it's set to `flex-basis: 0` which means that the initial main size of flex item is zero.
+ *   It is also notable that `flex-basis: 0%` doesn't work correctly on IE.
+ *
+ *  As a solution, `flex-basis-auto` should always be used in conjunction with `flex-full` when it is
+ *  a desired behavior that the element grows with its contents.
+*/
+.flex-basis-auto {
+    flex-basis: auto;
+}
+
+.shrink-below-content-size {
     /* W3C spec says:
      * By default, flex items won’t shrink below their minimum content size (the length of the longest word or
      * fixed-size element). To change this, set the min-width or min-height property.
@@ -135,9 +150,16 @@
 }
 
 .no-flex {
-    flex: 0;
+    flex: 0 1 0%;
 }
 
 @media screen and (--breakpoint-min-md) {
     .md-no-flex { flex: 0 !important; }
 }
+
+/* Contents of elements inside flex items might not be wrapped correctly on IE11,
+   set max-width manually to enforce wrapping
+*/
+.ie-wrap-content-fix {
+   max-width: 100%;
+}
\ No newline at end of file

frontend/src/metabase/css/core/inputs.css

@@ -13,6 +13,13 @@
   transition: border .3s linear;
 }
 
+/* React doesn't receive events from IE11:s input clear button so don't show it */
+.input::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
 .input--small {
   padding: 0.3rem 0.4rem;
 }

frontend/src/metabase/dashboards/components/DashboardList.jsx

@@ -21,7 +21,7 @@ type DashboardListItemType = {
 
 const enhance = withState('hover', 'setHover', false)
 const DashboardListItem = enhance(({dashboard, hover, setHover}: DashboardListItemType) =>
-    <li className="Grid-cell flex-retain-width" style={{maxWidth: "550px"}}>
+    <li className="Grid-cell shrink-below-content-size" style={{maxWidth: "550px"}}>
         <Link to={Urls.dashboard(dashboard.id)}
               data-metabase-event={"Navbar;Dashboards;Open Dashboard;" + dashboard.id}
               className={cx(
@@ -38,7 +38,7 @@ const DashboardListItem = enhance(({dashboard, hover, setHover}: DashboardListIt
               onMouseLeave={() => setHover(false)}>
             <Icon name="dashboard"
                   className={cx("pr2", {"text-grey-1": !hover}, {"text-brand-darken": hover})} size={32}/>
-            <div className={cx("flex-full flex-retain-width")}>
+            <div className={cx("flex-full shrink-below-content-size")}>
                 <h4 className={cx("text-ellipsis text-nowrap overflow-hidden text-brand", {"text-white": hover})}
                     style={{marginBottom: "0.2em"}}>
                     <Ellipsified>{dashboard.name}</Ellipsified>
@@ -67,4 +67,4 @@ export default class DashboardList extends Component {
             </ol>
         );
     }
-}
\ No newline at end of file
+}

frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx

@@ -163,42 +163,50 @@ export default class EmbedModalContent extends Component<*, Props, State> {
                         }}
                     />
                 </div>
-                <div className="flex flex-full">
-                    { embedType == null ?
-                        <div className="flex-full ml-auto mr-auto" style={{ maxWidth: 1040 }}>
+                { embedType == null ?
+                    <div className="flex-full">
+                        {/* Center only using margins because  */}
+                        <div className="ml-auto mr-auto" style={{maxWidth: 1040}}>
                             <SharingPane
                                 {...this.props}
                                 publicUrl={getUnsignedPreviewUrl(siteUrl, resourceType, resource.public_uuid, displayOptions)}
                                 iframeUrl={getUnsignedPreviewUrl(siteUrl, resourceType, resource.public_uuid, displayOptions)}
-                                onChangeEmbedType={(embedType) => this.setState({ embedType })}
+                                onChangeEmbedType={(embedType) => this.setState({embedType})}
                             />
                         </div>
+                    </div>
                     : embedType === "application" ?
-                        <AdvancedEmbedPane
-                            pane={pane}
-                            resource={resource}
-                            resourceType={resourceType}
-                            embedType={embedType}
-                            token={getSignedToken(resourceType, resource.id, params, secretKey, embeddingParams)}
-                            iframeUrl={getSignedPreviewUrl(siteUrl, resourceType, resource.id, params, displayOptions, secretKey, embeddingParams)}
-                            siteUrl={siteUrl}
-                            secretKey={secretKey}
-                            params={params}
-                            displayOptions={displayOptions}
-                            previewParameters={previewParameters}
-                            parameterValues={parameterValues}
-                            resourceParameters={resourceParameters}
-                            embeddingParams={embeddingParams}
-                            onChangeDisplayOptions={(displayOptions) => this.setState({ displayOptions })}
-                            onChangeEmbeddingParameters={(embeddingParams) => this.setState({ embeddingParams })}
-                            onChangeParameterValue={(id, value) => this.setState({ parameterValues: { ...parameterValues, [id]: value }})}
-                            onChangePane={(pane) => this.setState({ pane })}
-                            onSave={this.handleSave}
-                            onUnpublish={this.handleUnpublish}
-                            onDiscard={this.handleDiscard}
-                        />
-                : null }
-                </div>
+                        <div className="flex flex-full">
+                            <AdvancedEmbedPane
+                                pane={pane}
+                                resource={resource}
+                                resourceType={resourceType}
+                                embedType={embedType}
+                                token={getSignedToken(resourceType, resource.id, params, secretKey, embeddingParams)}
+                                iframeUrl={getSignedPreviewUrl(siteUrl, resourceType, resource.id, params, displayOptions, secretKey, embeddingParams)}
+                                siteUrl={siteUrl}
+                                secretKey={secretKey}
+                                params={params}
+                                displayOptions={displayOptions}
+                                previewParameters={previewParameters}
+                                parameterValues={parameterValues}
+                                resourceParameters={resourceParameters}
+                                embeddingParams={embeddingParams}
+                                onChangeDisplayOptions={(displayOptions) => this.setState({displayOptions})}
+                                onChangeEmbeddingParameters={(embeddingParams) => this.setState({embeddingParams})}
+                                onChangeParameterValue={(id, value) => this.setState({
+                                    parameterValues: {
+                                        ...parameterValues,
+                                        [id]: value
+                                    }
+                                })}
+                                onChangePane={(pane) => this.setState({pane})}
+                                onSave={this.handleSave}
+                                onUnpublish={this.handleUnpublish}
+                                onDiscard={this.handleDiscard}
+                            />
+                        </div>
+                        : null }
             </div>
         );
     }

frontend/src/metabase/tutorial/PageFlag.css

@@ -19,6 +19,8 @@
   line-height: 24px;
 
   transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
+
+  z-index: 5;
 }
 
 .PageFlag:before,