Merge pull request #735 from smiclea/large-edit

Increase the width of the Edit Replica modal

src/components/modules/DetailsModule/DetailsPageHeader/DetailsPageHeader.tsx

@@ -26,7 +26,7 @@ import type { User as UserType } from "@src/@types/User";
 
 import notificationStore from "@src/stores/NotificationStore";
 
-import backgroundImage from "./images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import logoImage from "./images/logo.svg";
 
 const Wrapper = styled.div<any>`

src/components/modules/NavigationModule/Navigation/Navigation.tsx

@@ -24,7 +24,7 @@ import configLoader from "@src/utils/Config";
 
 import { navigationMenu } from "@src/constants";
 import { ThemeProps } from "@src/components/Theme";
-import backgroundImage from "./images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import cbsImage from "./images/cbsl-logo.svg";
 import cbsImageSmall from "./images/cbsl-logo-small.svg";
 import tinyLogo from "./images/logo-small.svg";

src/components/modules/TransferModule/TransferItemModal/TransferItemModal.tsx

@@ -102,6 +102,8 @@ const Buttons = styled.div<any>`
   justify-content: space-between;
 `;
 
+type Width = "normal" | "wide";
+
 type Props = {
   type?: "replica" | "migration";
   isOpen: boolean;
@@ -129,6 +131,7 @@ type State = {
   destinationFailedMessage: string | null;
   uploadedScripts: InstanceScript[];
   removedScripts: InstanceScript[];
+  width: Width;
 };
 
 @observer
@@ -146,12 +149,36 @@ class TransferItemModal extends React.Component<Props, State> {
     sourceFailed: false,
     destinationFailedMessage: null,
     removedScripts: [],
+    width: "normal",
   };
 
   scrollableRef: HTMLElement | null | undefined;
 
   UNSAFE_componentWillMount() {
     this.loadData(true);
+
+    this.updateAvailableWidth();
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleResize.bind(this));
+  }
+
+  handleResize() {
+    this.updateAvailableWidth();
+  }
+
+  updateAvailableWidth() {
+    const RESIZE_BREAKPOINT = 1100;
+    if (window.innerWidth < RESIZE_BREAKPOINT && this.state.width === "wide") {
+      this.setState({ width: "normal" });
+    } else if (
+      window.innerWidth >= RESIZE_BREAKPOINT &&
+      this.state.width === "normal"
+    ) {
+      this.setState({ width: "wide" });
+    }
   }
 
   get requiresWindowsImage() {
@@ -866,7 +893,11 @@ class TransferItemModal extends React.Component<Props, State> {
           width: "100%",
           alignItems: "center",
         }}
-        fieldWidth={ThemeProps.inputSizes.large.width}
+        fieldWidth={
+          this.state.width === "wide"
+            ? ThemeProps.inputSizes.wizard.width
+            : ThemeProps.inputSizes.large.width
+        }
         onScrollableRef={ref => {
           this.scrollableRef = ref;
         }}
@@ -910,7 +941,7 @@ class TransferItemModal extends React.Component<Props, State> {
           this.handleStorageChange(mapping);
         }}
         style={{ padding: "32px 32px 0 32px", width: "calc(100% - 64px)" }}
-        titleWidth={160}
+        titleWidth={this.state.width === "normal" ? 160 : 320}
         onScrollableRef={ref => {
           this.scrollableRef = ref;
         }}
@@ -930,7 +961,7 @@ class TransferItemModal extends React.Component<Props, State> {
         }}
         selectedNetworks={this.getSelectedNetworks()}
         style={{ padding: "32px 32px 0 32px", width: "calc(100% - 64px)" }}
-        titleWidth={160}
+        titleWidth={this.state.width === "normal" ? 160 : 320}
       />
     );
   }
@@ -1064,11 +1095,12 @@ class TransferItemModal extends React.Component<Props, State> {
           this.props.type === "replica" ? "Edit Replica" : "Recreate Migration"
         }`}
         onRequestClose={this.props.onRequestClose}
-        contentStyle={{ width: "800px" }}
+        contentWidth={this.state.width === "normal" ? "800px" : "1074px"}
         onScrollableRef={() => this.scrollableRef}
         fixedHeight={512}
       >
         <Panel
+          contentWidth={this.state.width}
           navigationItems={navigationItems}
           content={this.renderContent()}
           onChange={navItem => {

src/components/smart/LoginPage/LoginPage.tsx

@@ -23,7 +23,7 @@ import LoginForm from "@src/components/modules/LoginModule/LoginForm";
 import userStore from "@src/stores/UserStore";
 import configStore from "@src/utils/Config";
 
-import backgroundImage from "./images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import cbsImage from "./images/cbsl-logo.svg";
 
 const Wrapper = styled.div<any>`

src/components/smart/SetupPage/SetupPage.tsx

@@ -16,7 +16,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { observer } from "mobx-react";
 
-import backgroundImage from "@src/components/smart/LoginPage/images/star-bg.jpg";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 import configLoader from "@src/utils/Config";
 import {
   CustomerInfoBasic,

src/components/ui/Modal/Modal.tsx

@@ -17,26 +17,24 @@ import { observer } from "mobx-react";
 import styled from "styled-components";
 import Modal from "react-modal";
 import autobind from "autobind-decorator";
+import ReactTooltip from "react-tooltip";
 
 import KeyboardManager from "@src/utils/KeyboardManager";
 
 import { ThemeProps } from "@src/components/Theme";
-import headerBackground from "./images/header-background.png";
-import headerBackgroundWide from "./images/header-background-wide.png";
-import ReactTooltip from "react-tooltip";
+import backgroundImage from "@src/components/ui/Images/star-bg.jpg";
 
 const headerHeight = 48;
 
-const Title = styled.div<any>`
+const Title = styled.div`
   height: ${headerHeight}px;
   font-size: 24px;
   font-weight: ${ThemeProps.fontWeights.light};
   text-align: center;
   line-height: 48px;
   color: white;
-  background: url("${props =>
-      props.wide ? headerBackgroundWide : headerBackground}")
-    center/contain no-repeat;
+  background: url("${backgroundImage}") center no-repeat;
+  background-size: cover;
 `;
 
 type Props = {
@@ -44,7 +42,7 @@ type Props = {
   isOpen: boolean;
   contentLabel?: string;
   onRequestClose?: () => void;
-  contentStyle?: { [prop: string]: any };
+  contentWidth?: React.CSSProperties["width"];
   topBottomMargin?: number;
   title?: string;
   componentRef?: (ref: any) => void;
@@ -180,12 +178,12 @@ class NewModal extends React.Component<Props> {
     scrollableNode.scrollTop = scrollTop + scrollOffset;
   }
 
-  renderTitle(contentWidth: string) {
+  renderTitle() {
     if (!this.props.title) {
       return null;
     }
 
-    return <Title wide={contentWidth === "800px"}>{this.props.title}</Title>;
+    return <Title>{this.props.title}</Title>;
   }
 
   render() {
@@ -216,10 +214,9 @@ class NewModal extends React.Component<Props> {
       },
     };
 
-    modalStyle.content = {
-      ...modalStyle.content,
-      ...this.props.contentStyle,
-    };
+    if (this.props.contentWidth) {
+      modalStyle.content!.width = this.props.contentWidth;
+    }
 
     const children = React.Children.map(this.props.children, child =>
       React.cloneElement(child as React.ReactElement<any>, {
@@ -249,7 +246,7 @@ class NewModal extends React.Component<Props> {
         }}
         ariaHideApp={false}
       >
-        {this.renderTitle(modalStyle.content.width as string)}
+        {this.renderTitle()}
         {children}
       </Modal>
     );

src/components/ui/Panel/Panel.tsx

@@ -51,8 +51,8 @@ const NavigationItemDiv = styled.div<any>`
         `
       : ""}
 `;
-const Content = styled.div<any>`
-  width: 576px;
+const Content = styled.div<{ width: "normal" | "wide" }>`
+  width: ${props => (props.width === "wide" ? "976px" : "576px")};
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -92,6 +92,7 @@ type Props = {
   selectedValue: string | null;
   onChange: (item: NavigationItem) => void;
   style?: any;
+  contentWidth?: "normal" | "wide";
   reloadLabel: string;
   onReloadClick: () => void;
 };
@@ -130,7 +131,9 @@ class Panel extends React.Component<Props> {
             </NavigationItemDiv>
           ))}
         </Navigation>
-        <Content>{this.props.content}</Content>
+        <Content width={this.props.contentWidth || "normal"}>
+          {this.props.content}
+        </Content>
         <ReloadButton
           onClick={() => {
             this.props.onReloadClick();