Support creating templates in a dialog

Author: spadgett

app/index.html

@@ -282,7 +282,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/controllers/modals/deleteModal.js"></script>
         <script src="scripts/controllers/modals/debugTerminal.js"></script>
         <script src="scripts/controllers/modals/confirmReplaceModal.js"></script>
-        <script src="scripts/controllers/modals/processTemplateModal.js"></script>
+        <script src="scripts/controllers/modals/processOrSaveTemplateModal.js"></script>
         <script src="scripts/controllers/modals/linkService.js"></script>
         <script src="scripts/controllers/modals/jenkinsfileExamplesModal.js"></script>
         <script src="scripts/controllers/modals/aboutComputeUnitsModal.js"></script>
@@ -345,6 +345,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/directives/routeServiceBarChart.js"></script>
         <script src="scripts/directives/bindService.js"></script>
         <script src="scripts/directives/processTemplate.js"></script>
+        <script src="scripts/directives/processTemplateDialog.js"></script>
         <script src="scripts/directives/create/nextSteps.js"></script>
 
         <!-- Old Overview, TODO: remove -->

app/scripts/controllers/landingPage.js

@@ -18,8 +18,16 @@ angular.module('openshiftConsole')
     // Once all pages show notifications this should be removed.
     NotificationsService.clearNotifications();
 
+    $scope.templateSelected = function(template) {
+      $scope.template = template;
+    };
+
+    $scope.templateDialogClosed = function() {
+      $scope.template = null;
+    };
+
     AuthService.withUser().then(function() {
-      Catalog.getCatalogItems().then(function(items) {
+      Catalog.getCatalogItems(true).then(function(items) {
         $scope.catalogItems = items;
       });
     });

app/scripts/controllers/modals/processTemplateModal.js renamed to app/scripts/controllers/modals/processOrSaveTemplateModal.js

@@ -2,13 +2,13 @@
 
 /**
  * @ngdoc function
- * @name openshiftConsole.controller:ProcessTemplateModalController
+ * @name openshiftConsole.controller:ProcessOrSaveTemplateModalController
  * @description
- * # ProcessTemplateModalController
+ * # ProcessOrSaveTemplateModalController
  * Controller of the openshiftConsole
  */
 angular.module('openshiftConsole')
-  .controller('ProcessTemplateModalController', function ($scope, $uibModalInstance) {
+  .controller('ProcessOrSaveTemplateModalController', function ($scope, $uibModalInstance) {
     $scope.continue = function() {
       $uibModalInstance.close('create');
     };

app/scripts/directives/fromFile.js

@@ -216,8 +216,8 @@ angular.module("openshiftConsole")
         function openTemplateProcessModal() {
           var modalInstance = $uibModal.open({
             animation: true,
-            templateUrl: 'views/modals/process-template.html',
-            controller: 'ProcessTemplateModalController',
+            templateUrl: 'views/modals/process-or-save-template.html',
+            controller: 'ProcessOrSaveTemplateModalController',
             scope: $scope
           });
           modalInstance.result.then(function() {

app/scripts/directives/processTemplate.js

@@ -21,7 +21,9 @@ angular.module('openshiftConsole').component('processTemplate', {
     template: '<',
     project: '<',
     alerts: '<',
-    prefillParameters: '<'
+    prefillParameters: '<',
+    isDialog: '<',
+    onProjectSelected: '&'
   },
   templateUrl: 'views/directives/process-template.html'
 });
@@ -41,7 +43,6 @@ function ProcessTemplate($filter,
   var ctrl = this;
 
   var context;
-  var projectDisplayName;
 
   var dcContainers = $parse('spec.template.spec.containers');
   var builderImage = $parse('spec.strategy.sourceStrategy.from || spec.strategy.dockerStrategy.from || spec.strategy.customStrategy.from');
@@ -129,16 +130,17 @@ function ProcessTemplate($filter,
     images = [];
     var dcImages = [];
     var outputImages = {};
+    var namespace = _.get(ctrl, 'selectedProject.metadata.name');
     angular.forEach(data.objects, function(item) {
       if (item.kind === "BuildConfig") {
-        var builder = imageObjectRef(builderImage(item), ctrl.project.metadata.name);
+        var builder = imageObjectRef(builderImage(item), namespace);
         if(builder) {
           images.push({
             name: builder,
             usesParameters: getParametersInImage(builder)
           });
         }
-        var output = imageObjectRef(outputImage(item), ctrl.project.metadata.name);
+        var output = imageObjectRef(outputImage(item), namespace);
         if (output) {
           outputImages[output] = true;
         }
@@ -185,23 +187,29 @@ function ProcessTemplate($filter,
   ctrl.$onInit = function() {
     ctrl.labels = [];
     ctrl.templateDisplayName = displayName(ctrl.template);
-    context = {
-      namespace: ctrl.project.metadata.name
-    };
-    projectDisplayName = displayName(ctrl.project);
+    ctrl.selectedProject = ctrl.project;
     setTemplateParams();
   };
 
+  $scope.$watch(function() {
+    return ctrl.selectedProject;
+  }, function(project) {
+    var cb = ctrl.onProjectSelected();
+    if (cb) {
+      cb(project);
+    }
+  });
+
   var processedResources;
   var createResources = function() {
     var titles = {
-      started: "Creating " + ctrl.templateDisplayName + " in project " + projectDisplayName,
-      success: "Created " + ctrl.templateDisplayName + " in project " + projectDisplayName,
-      failure: "Failed to create " + ctrl.templateDisplayName + " in project " + projectDisplayName
+      started: "Creating " + ctrl.templateDisplayName + " in project " + displayName(ctrl.selectedProject),
+      success: "Created " + ctrl.templateDisplayName + " in project " + displayName(ctrl.selectedProject),
+      failure: "Failed to create " + ctrl.templateDisplayName + " in project " + displayName(ctrl.selectedProject)
     };
     var helpLinks = getHelpLinks(ctrl.template);
     TaskList.clear();
-    TaskList.add(titles, helpLinks, ctrl.project.metadata.name, function() {
+    TaskList.add(titles, helpLinks, ctrl.selectedProject.metadata.name, function() {
       var d = $q.defer();
       DataService.batch(processedResources, context).then(
         function(result) {
@@ -235,7 +243,15 @@ function ProcessTemplate($filter,
       );
       return d.promise;
     });
-    Navigate.toNextSteps(ctrl.templateDisplayName, ctrl.project.metadata.name);
+
+    if (ctrl.isDialog) {
+      $scope.$emit('templateInstantiated', {
+        project: ctrl.selectedProject,
+        template: ctrl.template
+      });
+    } else {
+      Navigate.toNextSteps(ctrl.templateDisplayName, ctrl.selectedProject.metadata.name);
+    }
   };
 
   var launchConfirmationDialog = function(alerts) {
@@ -260,7 +276,7 @@ function ProcessTemplate($filter,
   };
 
   var showWarningsOrCreate = function(result) {
-    var alerts = SecurityCheckService.getSecurityAlerts(processedResources, ctrl.project.metadata.name);
+    var alerts = SecurityCheckService.getSecurityAlerts(processedResources, ctrl.selectedProject.metadata.name);
 
     // Now that all checks are completed, show any Alerts if we need to
     var quotaAlerts = result.quotaAlerts || [];
@@ -279,36 +295,77 @@ function ProcessTemplate($filter,
     }
   };
 
-  ctrl.createFromTemplate = function() {
-    ctrl.disableInputs = true;
-    var userLabels = keyValueEditorUtils.mapEntries(keyValueEditorUtils.compactEntries(ctrl.labels));
-    var systemLabels = keyValueEditorUtils.mapEntries(keyValueEditorUtils.compactEntries(ctrl.systemLabels));
-    ctrl.template.labels = _.extend(systemLabels, userLabels);
-
-    DataService.create("processedtemplates", null, ctrl.template, context).then(
-      function(config) { // success
-        // Cache template parameters and message so they can be displayed in the nexSteps page
-        ProcessedTemplateService.setTemplateData(config.parameters, ctrl.template.parameters, config.message);
-        processedResources = config.objects;
+  var createProjectIfNecessary = function() {
+    if (_.has(ctrl.selectedProject, 'metadata.uid')) {
+      return $q.when();
+    }
 
-        QuotaService.getLatestQuotaAlerts(processedResources, context).then(showWarningsOrCreate);
+    var newProjName = ctrl.selectedProject.metadata.name;
+    var newProjDisplayName = ctrl.selectedProject.metadata.annotations['new-display-name'];
+    var newProjDesc = $filter('description')(ctrl.selectedProject);
+    var projReqObj = {
+      apiVersion: "v1",
+      kind: "ProjectRequest",
+      metadata: {
+        name: newProjName
       },
-      function(result) { // failure
-        ctrl.disableInputs = false;
-        var details;
-        if (result.data && result.data.message) {
-          details = result.data.message;
+      displayName: newProjDisplayName,
+      description: newProjDesc
+    };
+    return DataService.create('projectrequests', null, projReqObj, $scope);
+  };
+
+  ctrl.createFromTemplate = function() {
+    ctrl.disableInputs = true;
+    createProjectIfNecessary().then(function() {
+      context = {
+        namespace: ctrl.selectedProject.metadata.name
+      };
+      var userLabels = keyValueEditorUtils.mapEntries(keyValueEditorUtils.compactEntries(ctrl.labels));
+      var systemLabels = keyValueEditorUtils.mapEntries(keyValueEditorUtils.compactEntries(ctrl.systemLabels));
+      ctrl.template.labels = _.extend(systemLabels, userLabels);
+
+      DataService.create("processedtemplates", null, ctrl.template, context).then(
+        function(config) { // success
+          // Cache template parameters and message so they can be displayed in the nexSteps page
+          ProcessedTemplateService.setTemplateData(config.parameters, ctrl.template.parameters, config.message);
+          processedResources = config.objects;
+
+          QuotaService.getLatestQuotaAlerts(processedResources, context).then(showWarningsOrCreate);
+        },
+        function(result) { // failure
+          ctrl.disableInputs = false;
+          var details;
+          if (result.data && result.data.message) {
+            details = result.data.message;
+          }
+          ctrl.alerts["process"] =
+            {
+              type: "error",
+              message: "An error occurred processing the template.",
+              details: details
+            };
         }
-        ctrl.alerts["process"] =
-          {
-            type: "error",
-            message: "An error occurred processing the template.",
-            details: details
-          };
+      );
+    }, function(result) {
+      ctrl.disableInputs = false;
+      var details;
+      if (result.data && result.data.message) {
+        details = result.data.message;
       }
-    );
+      ctrl.alerts["create-project"] = {
+        type: "error",
+        message: "An error occurred creating the project.",
+        details: details
+      };
+    });
   };
 
+  // When the process-template component is displayed in a dialog, the create
+  // button is outside the component since it is in the wizard footer. Listen
+  // for an event for when the button is clicked.
+  $scope.$on('instantiateTemplate', ctrl.createFromTemplate);
+
   var shouldAddAppLabel = function() {
     // If the template defines its own app label, we don't need to add one at all
     if (_.get(ctrl.template, 'labels.app')) {

app/scripts/directives/processTemplateDialog.js

@@ -0,0 +1,72 @@
+'use strict';
+
+angular.module('openshiftConsole').component('processTemplateDialog', {
+  controller: [
+    '$scope',
+    'DataService',
+    ProcessTemplateDialog
+  ],
+  controllerAs: '$ctrl',
+  bindings: {
+    template: '<',
+    onDialogClosed: '&'
+  },
+  templateUrl: 'views/directives/process-template-dialog.html'
+});
+
+function ProcessTemplateDialog($scope, DataService) {
+  var ctrl = this;
+
+  var initializeSteps = function() {
+    ctrl.steps = [{
+      id: 'configuration',
+      label: 'Configuration',
+      selected: true,
+      visited: true
+    }, {
+      id: 'results',
+      label: 'Results'
+    }];
+    ctrl.currentStep = ctrl.steps[0];
+  };
+
+  ctrl.$onInit = function() {
+    ctrl.alerts = {};
+    ctrl.loginBaseUrl = DataService.openshiftAPIBaseUrl();
+  };
+
+  var getIconClass = function() {
+    var icon = _.get(ctrl, 'template.metadata.annotations.iconClass', 'fa fa-cubes');
+    return (icon.indexOf('icon-') !== -1) ? 'font-icon ' + icon : icon;
+  };
+
+  ctrl.$onChanges = function(changes) {
+    if (changes.template) {
+      initializeSteps();
+      ctrl.iconClass = getIconClass();
+    }
+  };
+
+  var showResults = function() {
+    ctrl.steps[0].selected = false;
+    ctrl.currentStep = ctrl.steps[1];
+    ctrl.currentStep.selected = true;
+    ctrl.currentStep.visited = true;
+  };
+
+  ctrl.instantiateTemplate = function() {
+    $scope.$broadcast('instantiateTemplate');
+  };
+
+  $scope.$on('templateInstantiated', function(result) {
+    $scope.selectedProject = result.project;
+    showResults();
+  });
+
+  ctrl.close = function() {
+    var cb = ctrl.onDialogClosed();
+    if (cb) {
+      cb();
+    }
+  };
+}

app/scripts/directives/templateopt.js

@@ -6,10 +6,12 @@ angular.module('openshiftConsole')
     return {
       restrict: 'E',
       templateUrl: 'views/_templateopt.html',
+      transclude: true,
       scope: {
         parameters: "=",
         expand: "=?",
-        canToggle: "=?"
+        canToggle: "=?",
+        isDialog: "=?"
       },
       link: function(scope, element, attrs) {
         if (!angular.isDefined(attrs.canToggle)) {
@@ -23,6 +25,17 @@ angular.module('openshiftConsole')
         scope.focus = function(id) {
           angular.element('#' + id).focus();
         };
+
+        if (!scope.isDialog) {
+          scope.visibleParameters = scope.parameters;
+        } else {
+          scope.$watch('parameters', function(parameters) {
+            // Only show parameters that the user has to fill in a value when in a dialog.
+            scope.visibleParameters = _.reject(parameters, function(parameter) {
+              return !parameter.required || parameter.value || parameter.generate;
+            });
+          });
+        }
       }
     };
   });

app/styles/_core.less

@@ -597,8 +597,6 @@ label.checkbox {
       }
     }
     .form-group {
-      width: 100%;
-
       .parameter-input-wrapper {
         position: relative;
 
@@ -611,10 +609,11 @@ label.checkbox {
             transform: rotate(90deg);
           }
         }
-
-        input, textarea {
-          padding-right: 20px;
-        }
+      }
+    }
+    &.form-horizontal .form-group .parameter-input-wrapper {
+      .resize-input {
+        right: 26px;
       }
     }
     .help-block {