Use new style for help in Angular ModalFormService

ModalFormService (horizon.framework.widgets.form.ModalFormService, used in create key pair dialog or create user dialog) and WizardModalService (horizon.framework.widgets.modal.wizard-modal.service, used in create instance dialog or create image dialog) are used in dialogs for create/edit/etc in Angularized panel. But their help descriptions are shown in different style. Angularization proposes new look and feel, so ModalFormService should follow new style for help description like WizardModalService. This patch proposes new style for help in dialogs that uses ModalFormService. And "?" button for opening help panel is overlaped on input field on the first row, so this patch moves it up little bit. In this new style, if the help contents is too simple, it is not needed to make description space in the right harf of dialog for looks consistency, it is prefer not to add help panel, i.e. simply do not show "?" button. Change-Id: Ia720180c7aaef1f3d9c5e24dbebe3fe2d796d6c7 Closes-Bug: #1781151
2018-07-11 16:56:52 +09:00 · 2018-07-11 16:56:52 +09:00 · f5666eed00
parent 35ac8aac77
commit f5666eed00
13 changed files with 46 additions and 52 deletions
--- a/horizon/static/framework/widgets/form/modal-form.controller.js
+++ b/horizon/static/framework/widgets/form/modal-form.controller.js
@ -50,6 +50,7 @@
    ctrl.submitText = context.submitText;
    ctrl.submitIcon = context.submitIcon;
    ctrl.cancel = cancel;
+    ctrl.helpUrl = context.helpUrl;

    function submit($event, schemaForm) {
      $event.preventDefault();
--- a/horizon/static/framework/widgets/form/modal-form.controller.spec.js
+++ b/horizon/static/framework/widgets/form/modal-form.controller.spec.js
@ -31,7 +31,8 @@
        title: "title",
        form: "form",
        schema: "schema",
-        model: "model"
+        model: "model",
+        helpUrl: "help.html"
      };
      ctrl = $controller(
        'horizon.framework.widgets.form.ModalFormController',
@ -63,6 +64,10 @@
      expect(ctrl.model).toEqual('model');
    });

+    it('sets helpUrl on scope', function() {
+      expect(ctrl.helpUrl).toEqual('help.html');
+    });
+
    it('calls modalInstance close on submit', function() {
      spyOn(modalInstance, 'close');
      ctrl.submit(mockEvent, mockSchemaValidForm);
--- a/horizon/static/framework/widgets/form/modal-form.html
+++ b/horizon/static/framework/widgets/form/modal-form.html
@ -16,6 +16,9 @@
                      pristine: { errors: false, success: false } }"
        ng-submit="ctrl.submit($event, schemaForm)">
  </form>
+  <help-panel class="wizard-help" ng-if="ctrl.helpUrl">
+    <ng-include src="ctrl.helpUrl"></ng-include>
+  </help-panel>
 </div>

 <div class="modal-footer">
--- a/horizon/static/framework/widgets/form/modal-form.service.js
+++ b/horizon/static/framework/widgets/form/modal-form.service.js
@ -59,7 +59,8 @@
              submitIcon: config.submitIcon || "check",
              schema: config.schema,
              form: config.form,
-              model: config.model
+              model: config.model,
+              helpUrl: config.helpUrl
            };
          }
        },
--- a/horizon/static/framework/widgets/form/modal-form.service.spec.js
+++ b/horizon/static/framework/widgets/form/modal-form.service.spec.js
@ -41,7 +41,8 @@
        "form": "form",
        "model": "model",
        "submitIcon": "icon",
-        "submitText": "save"
+        "submitText": "save",
+        "helpUrl": "help.html"
      };
      var modalService = service.open(modalConfig);
      var context = modalService.resolve.context();
@ -51,6 +52,7 @@
      expect(context.model).toEqual('model');
      expect(context.submitIcon).toEqual('icon');
      expect(context.submitText).toEqual('save');
+      expect(context.helpUrl).toEqual('help.html');
    });

    it('sets default values for optional parameters', function() {
--- a/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/create.action.service.js
+++ b/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/create.action.service.js
@ -23,6 +23,7 @@

  createService.$inject = [
    '$q',
+    'horizon.dashboard.identity.roles.basePath',
    'horizon.dashboard.identity.roles.resourceType',
    'horizon.dashboard.identity.roles.role-schema',
    'horizon.app.core.openstack-service-api.keystone',
@ -40,6 +41,7 @@
   */
  function createService(
    $q,
+    basePath,
    resourceType,
    schema,
    keystoneAPI,
@ -74,7 +76,7 @@
        schema: schema,
        form: ['*'],
        model: model,
-        size: 'sm'
+        size: 'md'
      };
      return modalFormService.open(config).then(submit);
    }
--- a/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/edit.action.service.js
+++ b/openstack_dashboard/dashboards/identity/static/dashboard/identity/roles/actions/edit.action.service.js
@ -23,6 +23,7 @@

  editService.$inject = [
    '$q',
+    'horizon.dashboard.identity.roles.basePath',
    'horizon.dashboard.identity.roles.resourceType',
    'horizon.dashboard.identity.roles.role-schema',
    'horizon.app.core.openstack-service-api.keystone',
@ -39,6 +40,7 @@
   */
  function editService(
    $q,
+    basePath,
    resourceType,
    schema,
    keystoneAPI,
@ -76,7 +78,7 @@
        schema: schema,
        form: ['*'],
        model: response.data,
-        size: 'sm'
+        size: 'md'
      };
      return modalFormService.open(config).then(service.submit);
    }
--- a/openstack_dashboard/dashboards/identity/static/dashboard/identity/users/actions/workflow/workflow.service.js
+++ b/openstack_dashboard/dashboards/identity/static/dashboard/identity/users/actions/workflow/workflow.service.js
@ -109,10 +109,6 @@
                  type: 'template',
                  templateUrl: basePath + "actions/workflow/error." + errorTemplate + ".html",
                  condition: errorTemplate === "default"
-                },
-                {
-                  type: 'template',
-                  templateUrl: basePath + "actions/workflow/info." + action + ".help.html"
                }
              ]
            },
@ -197,7 +193,8 @@
        schema: schema,
        form: form,
        model: model,
-        size: 'md'
+        size: 'md',
+        helpUrl: basePath + "actions/workflow/info." + action + ".help.html"
      };

      keystone.getVersion().then(function (response) {
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.controller.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.controller.js
@ -196,7 +196,7 @@
        items: [
          {
            type: 'section',
-            htmlClass: 'col-sm-6',
+            htmlClass: 'col-sm-12',
            items: [
              {
                key: 'name',
@ -217,10 +217,6 @@
                ]
              }
            ]
-          },
-          {
-            type: 'template',
-            templateUrl: basePath + 'create-container.help.html'
          }
        ]
      }
@ -232,7 +228,9 @@
        title: gettext('Create Container'),
        schema: createContainerSchema,
        form: createContainerForm,
-        model: model
+        model: model,
+        size: 'md',
+        helpUrl: basePath + 'create-container.help.html'
      };
      return modalFormService.open(config).then(function then() {
        return ctrl.createContainerAction(model);
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/create-container.help.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/create-container.help.html
@ -1,11 +1,9 @@
-<div class="col-sm-6">
-  <p translate>
-    A container is a storage compartment for your data and provides a way for
-    you to organize your data. You can think of a container as a folder in
-    Windows&reg; or a directory in UNIX&reg;. The primary difference between a
-    container and these other file system concepts is that containers cannot be
-    nested. You can, however, create an unlimited number of containers within
-    your account. Data must be stored in a container so you must have at least
-    one container defined in your account prior to uploading data.
-  </p>
-</div>
+<p translate>
+  A container is a storage compartment for your data and provides a way for
+  you to organize your data. You can think of a container as a folder in
+  Windows&reg; or a directory in UNIX&reg;. The primary difference between a
+  container and these other file system concepts is that containers cannot be
+  nested. You can, however, create an unlimited number of containers within
+  your account. Data must be stored in a container so you must have at least
+  one container defined in your account prior to uploading data.
+</p>
--- a/openstack_dashboard/static/app/core/keypairs/actions/create.service.js
+++ b/openstack_dashboard/static/app/core/keypairs/actions/create.service.js
@ -63,7 +63,7 @@
        items: [
          {
            type: "section",
-            htmlClass: "col-sm-6",
+            htmlClass: "col-sm-12",
            items: [
              {
                key: "name",
@ -78,16 +78,6 @@
                required: true
              }
            ]
-          },
-          {
-            type: "section",
-            htmlClass: "col-sm-6",
-            items: [
-              {
-                type: "template",
-                templateUrl: basePath + "actions/create.description.html"
-              }
-            ]
          }
        ]
      }
@ -121,7 +111,9 @@
        "schema": schema,
        "form": form,
        "model": model,
-        "submitIcon": "plus"
+        "submitIcon": "plus",
+        "size": "md",
+        "helpUrl": basePath + "actions/create.description.html"
      };
      return modal.open(config).then(submit);
    }
--- a/openstack_dashboard/static/app/core/keypairs/actions/import.service.js
+++ b/openstack_dashboard/static/app/core/keypairs/actions/import.service.js
@ -66,7 +66,7 @@
        items: [
          {
            type: "section",
-            htmlClass: "col-sm-6",
+            htmlClass: "col-sm-12",
            items: [
              {
                key: "name",
@ -85,16 +85,6 @@
                templateUrl: basePath + "actions/import.public-key.html"
              }
            ]
-          },
-          {
-            type: "section",
-            htmlClass: "col-sm-6",
-            items: [
-              {
-                type: "template",
-                templateUrl: basePath + "actions/import.description.html"
-              }
-            ]
          }
        ]
      }
@ -128,7 +118,9 @@
        "schema": schema,
        "form": form,
        "model": model,
-        "submitIcon": "upload"
+        "submitIcon": "upload",
+        "size": "md",
+        "helpUrl": basePath + "actions/import.description.html"
      };
      return modal.open(config).then(submit);
    }
--- a/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_help_panel.scss
@ -1,10 +1,11 @@
 $help-panel-width: 400px;
+$help-panel-top: -5px;

 .help-toggle,
 .wizard-help,
 .help-panel {
  position: absolute;
-  top: $padding-xs-horizontal;
+  top: $help-panel-top;
  right: 0;
  z-index: 2; // TODO(robcresswell) untangle the need for this sorcery
 }