Convert Deployment configuration dialog to ModalPanel

Change-Id: I0b319baaded327dce89bb493b30ad6d1d7c2a500

src/js/components/deployment_plan/DeploymentConfiguration.js

@@ -23,7 +23,7 @@ import React from 'react';
 import { checkRunningDeployment } from '../utils/checkRunningDeploymentHOC';
 import EnvironmentConfiguration from '../environment_configuration/EnvironmentConfiguration';
 import NavTab from '../ui/NavTab';
-import { CloseModalXButton, RoutedModal } from '../ui/Modals';
+import { CloseModalXButton, RoutedModalPanel } from '../ui/Modals';
 import Parameters from '../parameters/Parameters';
 
 const messages = defineMessages({
@@ -42,9 +42,8 @@ const messages = defineMessages({
 });
 
 const DeploymentConfiguration = ({ location, match }) => (
-  <RoutedModal
+  <RoutedModalPanel
     id="DeploymentConfiguration__ModalDialog"
-    bsSize="xl"
     redirectPath={`/plans/${match.params.planName}`}
   >
     <ModalHeader>
@@ -83,7 +82,7 @@ const DeploymentConfiguration = ({ location, match }) => (
         to={`${match.url}/environment`}
       />
     </Switch>
-  </RoutedModal>
+  </RoutedModalPanel>
 );
 DeploymentConfiguration.propTypes = {
   location: PropTypes.object.isRequired,

src/js/components/environment_configuration/EnvironmentConfiguration.js

@@ -128,23 +128,20 @@ class EnvironmentConfiguration extends React.Component {
         height={60}
         loaded={!isFetching}
         content={formatMessage(messages.loadingEnvironmentConfiguration)}
+        componentProps={{ className: 'flex-container' }}
       >
         <EnvironmentConfigurationForm
           allEnvironments={allEnvironments}
           onSubmit={this.handleSubmit}
           initialValues={this.getFormInitialValues()}
         >
-          <div className="container-fluid">
-            <div className="row row-eq-height">
-              <EnvironmentConfigurationSidebar
-                activateTab={tabName => this.setState({ activeTab: tabName })}
-                categories={environmentConfigurationTopics.toList().toJS()}
-                isTabActive={this.isTabActive}
-              />
-              <div className="col-sm-8">
-                <div className="tab-content">{this.renderTopics()}</div>
-              </div>
-            </div>
+          <EnvironmentConfigurationSidebar
+            activateTab={tabName => this.setState({ activeTab: tabName })}
+            categories={environmentConfigurationTopics.toList().toJS()}
+            isTabActive={this.isTabActive}
+          />
+          <div className="col-sm-8 flex-column">
+            <div className="tab-content">{this.renderTopics()}</div>
           </div>
         </EnvironmentConfigurationForm>
       </Loader>

src/js/components/environment_configuration/EnvironmentConfigurationForm.js

@@ -62,8 +62,8 @@ const messages = defineMessages({
 });
 
 const EnvironmentConfigurationForm = ({
-  error,
   children,
+  error,
   onSubmit,
   handleSubmit,
   intl: { formatMessage },
@@ -72,13 +72,14 @@ const EnvironmentConfigurationForm = ({
   submitting,
   initialValues
 }) => (
-  <Form onSubmit={handleSubmit} horizontal>
+  <Form className="flex-container" onSubmit={handleSubmit} horizontal>
     <OverlayLoader
       loaded={!submitting}
       content={formatMessage(messages.updatingEnvironmentConfiguration)}
+      containerClassName="flex-container"
     >
       <ModalFormErrorList errors={error ? [error] : []} />
-      {children}
+      <div className="flex-row">{children}</div>
     </OverlayLoader>
     <ModalFooter>
       <CloseModalButton>

src/js/components/environment_configuration/EnvironmentConfigurationSidebar.js

@@ -25,7 +25,7 @@ const EnvironmentConfigurationSidebar = ({
   categories,
   isTabActive
 }) => (
-  <div className="col-sm-4 sidebar-pf sidebar-pf-left">
+  <div className="col-xs-12 col-sm-4 sidebar-pf sidebar-pf-left flex-column">
     <ul
       id="DeploymentConfiguration__CategoriesList"
       className="nav nav-pills nav-stacked nav-arrows"

src/js/components/parameters/Parameters.js

@@ -154,23 +154,21 @@ class Parameters extends React.Component {
         height={120}
         content="Fetching Parameters..."
         loaded={!isFetchingParameters}
+        componentProps={{ className: 'flex-container' }}
       >
         <ParametersForm
           onSubmit={this.handleSubmit}
           parameters={parameters}
           initialValues={this.getFormInitialValues()}
+          className="flex-container"
         >
-          <div className="container-fluid">
-            <div className="row row-eq-height">
-              <ParametersSidebar
-                activateTab={tabName => this.setState({ activeTab: tabName })}
-                enabledEnvironments={enabledEnvironments.toList()}
-                isTabActive={this.isTabActive}
-              />
-              <div className="col-sm-8">
-                <div className="tab-content">{this.renderTabPanes()}</div>
-              </div>
-            </div>
+          <ParametersSidebar
+            activateTab={tabName => this.setState({ activeTab: tabName })}
+            enabledEnvironments={enabledEnvironments.toList()}
+            isTabActive={this.isTabActive}
+          />
+          <div className="col-sm-8 flex-column">
+            <div className="tab-content">{this.renderTabPanes()}</div>
           </div>
         </ParametersForm>
       </Loader>

src/js/components/parameters/ParametersForm.js

@@ -71,13 +71,14 @@ const ParametersForm = ({
   submitting,
   initialValues
 }) => (
-  <Form onSubmit={handleSubmit} horizontal>
+  <Form className="flex-container" onSubmit={handleSubmit} horizontal>
     <OverlayLoader
       loaded={!submitting}
       content={formatMessage(messages.updatingParameters)}
+      containerClassName="flex-container"
     >
       <ModalFormErrorList errors={error ? [error] : []} />
-      {children}
+      <div className="flex-row">{children}</div>
     </OverlayLoader>
     <ModalFooter>
       <CloseModalButton>

src/js/components/parameters/ParametersSidebar.js

@@ -34,7 +34,7 @@ const ParametersSidebar = ({
   intl: { formatMessage },
   isTabActive
 }) => (
-  <div className="col-sm-4 sidebar-pf sidebar-pf-left">
+  <div className="col-xs-12 col-sm-4 sidebar-pf sidebar-pf-left flex-column">
     <ul
       id="Parameters__EnvironmentTabsList"
       className="nav nav-pills nav-stacked nav-arrows"