Added functionality to show/hide more options on deploy page.

src/app/frontend/deploy/deployfromsettings.html

@@ -68,68 +68,82 @@ limitations under the License.
   </md-switch>
 </kd-help-section>
 
-<kd-help-section>
-  <md-input-container>
-    <label>Description (optional)</label>
-    <textarea ng-model="ctrl.description"></textarea>
-  </md-input-container>
-  <kd-user-help>
-    The description will be added as an annotation to the Replica Set and displayed in the application's details.
-  </kd-user-help>
-</kd-help-section>
+<div ng-show="ctrl.isMoreOptionsEnabled()">
+  <kd-help-section>
+    <md-input-container>
+      <label>Description (optional)</label>
+      <textarea ng-model="ctrl.description"></textarea>
+    </md-input-container>
+    <kd-user-help>
+      The description will be added as an annotation to the Replica Set and displayed in the application's details.
+    </kd-user-help>
+  </kd-help-section>
 
-<kd-help-section>
-  <div>
-    <div>Labels (optional)</div>
-    <div layout="column">
-      <div layout="row">
-        <p flex>Key</p>
-        <p flex>Value</p>
-      </div>
-      <div ng-repeat="label in ctrl.labels">
-        <kd-label layout="row" flex label="label" labels="ctrl.labels"></kd-label>
+  <kd-help-section>
+    <div>
+      <div>Labels (optional)</div>
+      <div layout="column">
+        <div layout="row">
+          <p flex>Key</p>
+          <p flex>Value</p>
+        </div>
+        <div ng-repeat="label in ctrl.labels">
+          <kd-label layout="row" flex label="label" labels="ctrl.labels"></kd-label>
+        </div>
       </div>
     </div>
-  </div>
-  <kd-user-help>
-    The specified labels will be applied to the created Replica Set, Service (if any) and Pods. Common labels include release, environment, tier, partition and track.
-    <a href="">Learn more</a>
-  </kd-user-help>
-</kd-help-section>
-
-<kd-help-section>
-  <md-input-container class="md-block">
-    <label>Namespace</label>
-    <md-select ng-model="ctrl.namespace" required>
-      <md-option ng-repeat="namespace in ctrl.namespaces" ng-value="namespace">
-        {{namespace}}
-      </md-option>
-      <md-option ng-click="ctrl.handleNamespaceDialog($event)">
-        Create a new namespace...
-      </md-option>
-    </md-select>
-  </md-input-container>
-  <kd-user-help>
-    Namespaces let you partition resources into logically named groups.
-    <a href="">Learn more</a>
-  </kd-user-help>
-</kd-help-section>
+    <kd-user-help>
+      The specified labels will be applied to the created Replica Set, Service (if any) and Pods. Common labels include release, environment, tier, partition and track.
+      <a href="">Learn more</a>
+    </kd-user-help>
+  </kd-help-section>
 
-<kd-help-section>
-  <div>
+  <kd-help-section>
     <md-input-container class="md-block">
-      <label>Run command (optional)</label>
-      <input ng-model="ctrl.containerCommand">
+      <label>Namespace</label>
+      <md-select ng-model="ctrl.namespace" required>
+        <md-option ng-repeat="namespace in ctrl.namespaces" ng-value="namespace">
+          {{namespace}}
+        </md-option>
+        <md-option ng-click="ctrl.handleNamespaceDialog($event)">
+          Create a new namespace...
+        </md-option>
+      </md-select>
     </md-input-container>
+    <kd-user-help>
+      Namespaces let you partition resources into logically named groups.
+      <a href="">Learn more</a>
+    </kd-user-help>
+  </kd-help-section>
 
-    <md-input-container class="md-block">
-      <label>Run command arguments (optional)</label>
-      <input ng-model="ctrl.containerCommandArgs">
-    </md-input-container>
-  </div>
-  <kd-user-help>
-    By default, your containers run the selected image's default entrypoint command. You can use the
-    command options to override the default. 
-    <a href="">Learn more</a>
-  </kd-user-help>
-</kd-help-section>
+  <kd-help-section>
+    <div>
+      <md-input-container class="md-block">
+        <label>Run command (optional)</label>
+        <input ng-model="ctrl.containerCommand">
+      </md-input-container>
+
+      <md-input-container class="md-block">
+        <label>Run command arguments (optional)</label>
+        <input ng-model="ctrl.containerCommandArgs">
+      </md-input-container>
+    </div>
+    <kd-user-help>
+      By default, your containers run the selected image's default entrypoint command. You can use the
+      command options to override the default.
+      <a href="">Learn more</a>
+    </kd-user-help>
+  </kd-help-section>
+</div>
+
+<md-button class="md-primary kd-deploy-moreoptions-button" type="button"
+           ng-click="ctrl.switchMoreOptions()"
+           ng-hide="ctrl.isMoreOptionsEnabled()">
+  <md-icon>arrow_drop_down</md-icon>More options
+</md-button>
+
+<md-button class="md-primary kd-deploy-moreoptions-button" type="button"
+           ng-click="ctrl.switchMoreOptions()"
+           ng-show="ctrl.isMoreOptionsEnabled()">
+  <md-icon>arrow_drop_up</md-icon>Less options
+</md-button>

src/app/frontend/deploy/deployfromsettings_controller.js

@@ -42,6 +42,9 @@ export default class DeployFromSettingsController {
      */
     this.detail = this;
 
+    /** @private {boolean} */
+    this.showMoreOptions_ = false;
+
     /** @export {string} */
     this.containerImage = '';
 
@@ -232,4 +235,17 @@ export default class DeployFromSettingsController {
    * @private
    */
   getName_() { return this.name; }
+
+  /**
+   * Returns true if more options have been enabled and should be shown, false otherwise.
+   * @return {boolean}
+   * @export
+   */
+  isMoreOptionsEnabled() { return this.showMoreOptions_; }
+
+  /**
+   * Shows or hides more options.
+   * @export
+   */
+  switchMoreOptions() { this.detail.showMoreOptions_ = !this.detail.showMoreOptions_; }
 }

src/test/frontend/deploy/deployfromsettings_controller_test.js

@@ -157,4 +157,18 @@ describe('DeployFromSettings controller', () => {
     // then
     expect(resourceObject.save).toHaveBeenCalled();
   });
+
+  it('should hide more options by default', () => {
+    // this is default behavior so no given/when
+    // then
+    expect(ctrl.isMoreOptionsEnabled()).toBeFalsy();
+  });
+
+  it('should show more options after switch', () => {
+    // when
+    ctrl.switchMoreOptions();
+
+    // then
+    expect(ctrl.isMoreOptionsEnabled()).toBeTruthy();
+  });
 });