Update Saved Object edit form with new components. (#9632)

Backports PR #9543

**Commit 1:**
Update Saved Object edit form with new components.

* Original sha: 6d0cc00f28
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-17T02:12:58Z

**Commit 2:**
Add InfoPanel. Use InfoPanel to present warning in Saved Object form.

* Original sha: bbb5c0364c
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-23T01:06:36Z

src/core_plugins/kibana/public/management/sections/objects/_view.html

@@ -1,36 +1,129 @@
-<kbn-management-app section="kibana">
-  <kbn-management-objects-view class="container">
-    <div class="pull-right" style="margin-top: 20px;">
-      <a href="{{ link }}" class="btn btn-primary">View {{ title }}</a>
-      <a confirm-click="delete()" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete {{ title }} Object</a>
-    </div>
-    <h1>Edit {{ title }} Object</h1>
-    <div class="bs-callout bs-callout-danger" ng-if="notFound">
-      <h4>There is a problem with that saved object</h4>
+<kbn-management-app section="kibana" class="kuiView">
+  <kbn-management-objects-view class="kuiViewContent kuiViewContent--constrainedWidth">
+    <!-- Header -->
+    <div class="kuiViewContentItem kuiSubHeader">
+      <h1 class="kuiTitle">
+        Edit {{ title }}
+      </h1>
 
-      <p ng-if="notFound === 'search'">The saved search associated with this object no longer exists.</p>
-      <p ng-if="notFound === 'index-pattern'">The index pattern associated with this object no longer exists.</p>
-      <p ng-if="notFound === 'index-pattern-field'">A field associated with this object no longer exists in the index pattern.</p>
+      <div class="kuiButtonGroup">
+        <a
+          class="kuiButton kuiButton--basic kuiButton--iconText"
+          href="{{ link }}"
+        >
+          <span class="kuiButton__icon kuiIcon fa-eye"></span>
+          View {{ title }}
+        </a>
 
-      <p>If you know what this error means, go ahead and fix it - otherwise click the delete button above.</p>
-    </div>
-    <div class="bs-callout bs-callout-warning">
-      <h4>Proceed with caution</h4>
-
-      <p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn't be.</p>
-    </div>
-    <form role="form" name="objectForm" ng-submit="submit()">
-      <div class="form-group" ng-repeat="field in fields">
-        <label>{{ field.name }}</label>
-        <textarea rows="1" msd-elastic=" " ng-if="field.type === 'text'" ng-model="field.value" class="form-control span12"/>
-        <input ng-if="field.type === 'number'"  type="number" ng-model="field.value" class="form-control span12"/>
-        <div ng-if="field.type === 'json' || field.type === 'array'" ui-ace="{ onLoad: aceLoaded, mode: 'json' }" id="{{field.name}}" ng-model="field.value" class="form-control"></div>
-        <input ng-if="field.type === 'boolean'" type="checkbox" ng-model="field.value" ng-checked="field.value">
+        <button
+          class="kuiButton kuiButton--danger kuiButton--iconText"
+          confirm-click="delete()"
+        >
+          <span class="kuiButton__icon kuiIcon fa-trash-o"></span>
+          Delete {{ title }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Errors -->
+    <div class="bs-callout bs-callout-danger" ng-if="notFound">
+      <h4>There is a problem with this saved object</h4>
+
+      <p ng-if="notFound === 'search'">
+        The saved search associated with this object no longer exists.
+      </p>
+
+      <p ng-if="notFound === 'index-pattern'">
+        The index pattern associated with this object no longer exists.
+      </p>
+
+      <p ng-if="notFound === 'index-pattern-field'">
+        A field associated with this object no longer exists in the index pattern.
+      </p>
+
+      <p>
+        If you know what this error means, go ahead and fix it &mdash; otherwise click the delete button above.
+      </p>
+    </div>
+
+    <!-- Intro -->
+    <div class="kuiViewContentItem kuiVerticalRhythm">
+      <div class="kuiInfoPanel kuiInfoPanel--warning">
+        <p>
+          <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
+          <strong>Proceed with caution!</strong>
+        </p>
+
+        <p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be.</p>
+      </div>
+    </div>
+
+    <div class="kuiViewContentItem kuiVerticalRhythm">
+      <!-- Form -->
+      <form
+        role="form"
+        name="objectForm"
+        ng-submit="submit()"
+      >
+        <div class="kuiFormSection" ng-repeat="field in fields">
+          <label for="{{ field.name }}" class="kuiFormLabel">
+            {{ field.name }}
+          </label>
+
+          <input
+            id="{{ field.name }}"
+            ng-if="field.type === 'number'"
+            class="kuiTextInput"
+            type="number"
+            ng-model="field.value"
+          >
+
+          <textarea
+            id="{{ field.name }}"
+            ng-if="field.type === 'text'"
+            class="kuiTextArea"
+            rows="1"
+            msd-elastic=" "
+            ng-model="field.value"
+          ></textarea>
+
+          <input
+            ng-if="field.type === 'boolean'"
+            class="kuiCheckBox"
+            type="checkbox"
+            ng-model="field.value"
+            ng-checked="field.value"
+          >
+
+          <div
+            ng-if="field.type === 'json' || field.type === 'array'"
+            ui-ace="{ onLoad: aceLoaded, mode: 'json' }"
+            id="{{field.name}}"
+            ng-model="field.value"
+            class="form-control"
+          ></div>
+        </div>
+      </form>
+
+      <!-- Actions -->
+      <div class="kuiButtonGroup">
+        <button
+          class="kuiButton kuiButton--primary"
+          aria-label="Save {{ title }} Object"
+          ng-click="submit()"
+          ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0"
+        >
+          Save {{ title }} Object
+        </button>
+
+        <button
+          class="kuiButton kuiButton--basic"
+          aria-label="Cancel"
+          ng-click="cancel()"
+        >
+          Cancel
+        </button>
       </div>
-    </form>
-    <div class="form-group">
-      <button aria-label="Cancel" class="btn btn-primary" ng-click="cancel()">Cancel</button>
-      <button aria-label="Save {{ title }} Object" class="btn btn-success" ng-click="submit()" ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0">Save {{ title }} Object</button>
     </div>
   </kbn-management-objects-view>
 </kbn-management-app>

src/core_plugins/kibana/public/management/styles/main.less

@@ -135,9 +135,6 @@ kbn-management-advanced {
 }
 
 kbn-management-objects-view {
-  label {
-    font-family: @font-family-monospace;
-  }
   .ace_editor { height: 300px; }
 }
 

src/ui_framework/components/button/_button.scss

@@ -31,7 +31,13 @@
 
 .kuiButton--iconText {
   .kuiButton__icon {
-    margin-right: 4px;
+    &:first-child {
+      margin-right: 4px;
+    }
+
+    &:last-child {
+      margin-left: 4px;
+    }
   }
 }
 

src/ui_framework/components/button/_button_group.scss

@@ -1,6 +1,13 @@
 .kuiButtonGroup {
   display: flex;
+  align-items: center;
 
+  .kuiButton + .kuiButton {
+    margin-left: 4px;
+  }
+}
+
+.kuiButtonGroup--united {
   > .kuiButton:not(:first-child):not(:last-child) {
     border-radius: 0;
   }

src/ui_framework/components/form/_index.scss

@@ -1,2 +1,3 @@
 @import "check_box";
+@import "text_area";
 @import "text_input";

src/ui_framework/components/form/_text_area.scss

@@ -0,0 +1,3 @@
+.kuiTextArea {
+  @include formControl;
+}

src/ui_framework/components/form/_text_input.scss

@@ -1,26 +1,3 @@
 .kuiTextInput {
-  appearance: none;
-  padding: 3px 12px 4px;
-  font-size: $fontSize;
-  font-weight: 400;
-  line-height: $lineHeight;
-  background-color: #ffffff;
-  border: 1px solid #DEDEDE;
-  color: $fontColor;
-  border-radius: $buttonBorderRadius;
-  transition: border-color $formTransitionTiming;
-
-  &:invalid {
-    border-color: $errorBorderColor;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: $selectedBorderColor;
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
+  @include formControl;
 }

src/ui_framework/components/index.scss

@@ -60,6 +60,33 @@ $formTransitionTiming: 0.1s linear;
   outline-offset: 2px !important; /* 2 */
 }
 
+@mixin formControl {
+  appearance: none;
+  padding: 3px 12px 4px;
+  font-size: $fontSize;
+  font-weight: 400;
+  line-height: $lineHeight;
+  background-color: #ffffff;
+  border: 1px solid #DEDEDE;
+  color: $fontColor;
+  border-radius: $buttonBorderRadius;
+  transition: border-color $formTransitionTiming;
+
+  &:invalid {
+    border-color: $errorBorderColor;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $selectedBorderColor;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
 * {
   box-sizing: border-box;
 }
@@ -71,6 +98,7 @@ body {
 @import "button/index";
 @import "form/index";
 @import "icon/index";
+@import "info_panel/index";
 @import "link/index";
 @import "local_nav/index";
 @import "micro_button/index";

src/ui_framework/components/info_panel/_index.scss

@@ -0,0 +1 @@
+@import "info_panel";

src/ui_framework/components/info_panel/_info_panel.scss

@@ -0,0 +1,8 @@
+.kuiInfoPanel {
+  padding: 20px;
+  line-height: $lineHeight;
+}
+
+.kuiInfoPanel--warning {
+  background-color: #FFF6E4;
+}

src/ui_framework/doc_site/src/services/routes/Routes.js

@@ -10,6 +10,9 @@ import FormExample
 import IconExample
   from '../../views/icon/icon_example.jsx';
 
+import InfoPanelExample
+  from '../../views/info_panel/info_panel_example.jsx';
+
 import LinkExample
   from '../../views/link/link_example.jsx';
 
@@ -38,6 +41,9 @@ const components = [{
 }, {
   name: 'Icon',
   component: IconExample,
+}, {
+  name: 'InfoPanel',
+  component: InfoPanelExample,
 }, {
   name: 'Link',
   component: LinkExample,

src/ui_framework/doc_site/src/views/button/button_example.jsx

@@ -34,13 +34,17 @@ export default createExample([{
   hasDarkTheme: false,
 }, {
   title: 'ButtonGroup',
+  html: require('./button_group.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'United ButtonGroup',
   description: (
     <div>
-      <p>Use the ButtonGroup to emphasize the relationships between a set of Buttons, and differentiate them from Buttons outside of the set.</p>
+      <p>Use the united version of the ButtonGroup to emphasize the close relationship within a set of Buttons, and differentiate them from Buttons outside of the set.</p>
       <p>They support containing a single Button, so that Buttons can be dynamically added and removed.</p>
     </div>
   ),
-  html: require('./button_group.html'),
+  html: require('./button_group_united.html'),
   hasDarkTheme: false,
 }, {
   title: 'In ToolBar',

src/ui_framework/doc_site/src/views/button/button_group.html

@@ -1,12 +1,12 @@
 <div class="kuiButtonGroup">
   <button class="kuiButton kuiButton--basic">
-    Option A
+    Cancel
   </button>
   <button class="kuiButton kuiButton--basic">
-    Option B
+    Duplicate
   </button>
-  <button class="kuiButton kuiButton--basic">
-    Option C
+  <button class="kuiButton kuiButton--primary">
+    Save
   </button>
 </div>
 

src/ui_framework/doc_site/src/views/button/button_group_united.html

@@ -0,0 +1,24 @@
+<div class="kuiButtonGroup kuiButtonGroup--united">
+  <button class="kuiButton kuiButton--basic">
+    Option A
+  </button>
+  <button class="kuiButton kuiButton--basic">
+    Option B
+  </button>
+  <button class="kuiButton kuiButton--basic">
+    Option C
+  </button>
+</div>
+
+<hr class="guideBreak">
+
+<div class="kuiButtonGroup kuiButtonGroup--united">
+  <button class="kuiButton kuiButton--basic kuiButton--iconText">
+    <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
+    Back
+  </button>
+  <button class="kuiButton kuiButton--basic kuiButton--iconText">
+    Next
+    <span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
+  </button>
+</div>

src/ui_framework/doc_site/src/views/form/form_example.jsx

@@ -8,6 +8,10 @@ export default createExample([{
   title: 'TextInput',
   html: require('./text_input.html'),
   hasDarkTheme: false,
+}, {
+  title: 'TextArea',
+  html: require('./text_area.html'),
+  hasDarkTheme: false,
 }, {
   title: 'CheckBox',
   html: require('./check_box.html'),

src/ui_framework/doc_site/src/views/form/text_area.html

@@ -0,0 +1,19 @@
+<textarea type="text" class="kuiTextArea" placeholder="Placeholder text">
+</textarea>
+
+<hr class="guideBreak">
+
+<textarea type="text" class="kuiTextArea" value="Entered text">
+  Entered text
+</textarea>
+
+<hr class="guideBreak">
+
+<textarea type="text" class="kuiTextArea" required>
+</textarea>
+
+<hr class="guideBreak">
+
+<textarea type="text" class="kuiTextArea" disabled>
+  Disabled
+</textarea>

src/ui_framework/doc_site/src/views/info_panel/info_panel.html

@@ -0,0 +1,10 @@
+<div class="kuiInfoPanel kuiInfoPanel--warning">
+  <p>
+    <span class="kuiIcon kuiIcon--warning fa-bolt"></span>
+    <strong>Proceed with caution!</strong>
+  </p>
+
+  <p>
+    Here be dragons. Don&rsquo;t wanna mess with no dragons.
+  </p>
+</div>

src/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Warning',
+  description: (
+    <p>Use this InfoPanel to warn the user against decisions they might regret.</p>
+  ),
+  html: require('./info_panel.html'),
+  hasDarkTheme: false,
+}]);

src/ui_framework/doc_site/src/views/table/controlled_table.html

@@ -31,7 +31,7 @@
         1 – 20 of 33
       </div>
 
-      <div class="kuiButtonGroup">
+      <div class="kuiButtonGroup kuiButtonGroup--united">
         <button class="kuiButton kuiButton--basic kuiButton--icon">
           <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
         </button>
@@ -168,7 +168,7 @@
         1 &ndash; 20 of 33
       </div>
 
-      <div class="kuiButtonGroup">
+      <div class="kuiButtonGroup kuiButtonGroup--united">
         <button class="kuiButton kuiButton--basic kuiButton--icon">
           <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
         </button>

src/ui_framework/doc_site/src/views/table/controlled_table_no_results.html

@@ -28,10 +28,10 @@
 
     <div class="kuiToolBarSection">
       <div class="kuiToolBarText">
-        1 &ndash; 20 of 33
+        0 of 33
       </div>
 
-      <div class="kuiButtonGroup">
+      <div class="kuiButtonGroup kuiButtonGroup--united">
         <button class="kuiButton kuiButton--basic kuiButton--icon">
           <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
         </button>
@@ -53,10 +53,10 @@
   <div class="kuiToolBarFooter">
     <div class="kuiToolBarFooterSection">
       <div class="kuiToolBarText">
-        1 &ndash; 20 of 33
+        0 of 33
       </div>
 
-      <div class="kuiButtonGroup">
+      <div class="kuiButtonGroup kuiButtonGroup--united">
         <button class="kuiButton kuiButton--basic kuiButton--icon">
           <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
         </button>

src/ui_framework/doc_site/src/views/tool_bar/tool_bar.html

@@ -29,7 +29,7 @@
       1 – 20 of 33
     </div>
 
-    <div class="kuiButtonGroup">
+    <div class="kuiButtonGroup kuiButtonGroup--united">
       <button class="kuiButton kuiButton--basic kuiButton--icon">
         <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
       </button>

src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html

@@ -10,7 +10,7 @@
       1 – 20 of 33
     </div>
 
-    <div class="kuiButtonGroup">
+    <div class="kuiButtonGroup kuiButtonGroup--united">
       <button class="kuiButton kuiButton--basic kuiButton--icon">
         <span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
       </button>