Add in-context Jenkinsfile help

app/index.html

@@ -270,6 +270,7 @@ <h1>JavaScript Required</h1>
         <script src="scripts/controllers/modals/confirmReplaceModal.js"></script>
         <script src="scripts/controllers/modals/processTemplateModal.js"></script>
         <script src="scripts/controllers/modals/linkService.js"></script>
+        <script src="scripts/controllers/modals/jenkinsfileExamplesModal.js"></script>
         <script src="scripts/controllers/about.js"></script>
         <script src="scripts/controllers/commandLine.js"></script>
         <script src="scripts/controllers/createPersistentVolumeClaim.js"></script>

app/scripts/constants.js

@@ -39,6 +39,8 @@ window.OPENSHIFT_CONSTANTS = {
     "roles":                   "architecture/additional_concepts/authorization.html#roles",
     "service_accounts":        "dev_guide/service_accounts.html",
     "users_and_groups":        "architecture/additional_concepts/authentication.html#users-and-groups",
+    "pipeline-builds":         "architecture/core_concepts/builds_and_image_streams.html#pipeline-build",
+    "pipeline-plugin":         "using_images/other_images/jenkins.html#openshift-origin-pipeline-plug-in",
     // default should remain last, add new links above
     "default":                 "welcome/index.html"
   },

app/scripts/controllers/build.js

@@ -12,6 +12,7 @@ angular.module('openshiftConsole')
                                            $routeParams,
                                            BuildsService,
                                            DataService,
+                                           ModalsService,
                                            Navigate,
                                            ProjectsService) {
     $scope.projectName = $routeParams.project;
@@ -199,6 +200,10 @@ angular.module('openshiftConsole')
           }
         };
 
+        $scope.showJenkinsfileExamples = function() {
+          ModalsService.showJenkinsfileExamples();
+        };
+
         $scope.$on('$destroy', function(){
           DataService.unwatchAll(watches);
         });

app/scripts/controllers/buildConfig.js

@@ -16,6 +16,7 @@ angular.module('openshiftConsole')
                                                  ImagesService,
                                                  DataService,
                                                  LabelFilter,
+                                                 ModalsService,
                                                  ProjectsService,
                                                  keyValueEditorUtils) {
     $scope.projectName = $routeParams.project;
@@ -266,6 +267,10 @@ angular.module('openshiftConsole')
             });
         };
 
+        $scope.showJenkinsfileExamples = function() {
+          ModalsService.showJenkinsfileExamples();
+        };
+
         $scope.$on('$destroy', function(){
           DataService.unwatchAll(watches);
         });

app/scripts/controllers/modals/jenkinsfileExamplesModal.js

@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module('openshiftConsole')
+  .controller('JenkinsfileExamplesModalController', function($scope, $uibModalInstance) {
+    $scope.ok = function() {
+      $uibModalInstance.close('ok');
+    };
+  });

app/scripts/services/modals.js

@@ -16,6 +16,14 @@ angular.module("openshiftConsole")
         });
 
         return modalInstance.result;
+      },
+
+      showJenkinsfileExamples: function() {
+        $uibModal.open({
+          animation: true,
+          templateUrl: 'views/modals/jenkinsfile-examples-modal.html',
+          controller: 'JenkinsfileExamplesModalController'
+        });
       }
     };
   });

app/styles/_forms.less

@@ -6,3 +6,12 @@
 .input-group-addon.wildcard-prefix {
   padding-left: 10px;
 }
+
+.editor-examples {
+  padding: 19px;
+  margin-bottom: 20px;
+  border: 1px solid @color-pf-black-300;
+  .copy-to-clipboard {
+    margin-top: 3px;
+  }
+}

app/views/browse/_build-details.html

@@ -87,18 +87,24 @@ <h3>Configuration <span class="small" ng-if="buildConfigName">created from <a hr
         <dt ng-if-start="build.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath">
           Jenkinsfile Path:
         </dt>
-        <dd ng-if-end>
+        <dd>
           <span ng-if="build | jenkinsfileLink">
             <a ng-href="{{build | jenkinsfileLink}}">{{build.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath}}</a>
           </span>
           <span ng-if="!(build | jenkinsfileLink)">
             {{build.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath}}
           </span>
         </dd>
+        <div ng-if-end class="small">
+          <a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
+        </div>
         <dt ng-if-start="build.spec.strategy.jenkinsPipelineStrategy.jenkinsfile">
           Jenkinsfile:
         </dt>
         <dd></dd>
+        <div class="small pull-right mar-top-sm">
+          <a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
+        </div>
         <div ng-if-end ui-ace="{
           mode: 'groovy',
           theme: 'eclipse',

app/views/browse/build-config.html

@@ -234,9 +234,17 @@ <h2>No builds.</h2>
                                     <dd ng-if="!(buildConfig | jenkinsfileLink)">
                                       {{buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfilePath}}
                                     </dd>
+                                    <div class="small">
+                                      <a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
+                                    </div>
                                   </div>
                                   <div ng-if="buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile">
-                                    <dt>Jenkinsfile:</dt><dd></dd>
+                                    <div class="small pull-right mar-top-sm">
+                                      <a href="" ng-click="showJenkinsfileExamples()">What's a Jenkinsfile?</a>
+                                    </div>
+                                    <dt>
+                                      Jenkinsfile:
+                                    </dt><dd></dd>
                                     <div ui-ace="{
                                       mode: 'groovy',
                                       theme: 'eclipse',
@@ -249,7 +257,7 @@ <h2>No builds.</h2>
                                       advanced: {
                                         highlightActiveLine: false
                                       }
-                                    }" readonly ng-model="buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline ace-read-only mar-top-md"></div>
+                                    }" readonly ng-model="buildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline ace-read-only"></div>
                                   </div>
                                 </div>
                                 <dt ng-if-start="buildConfig.spec.source.binary.asFile">Binary Input as File:</dt>

app/views/edit/build-config.html

@@ -232,7 +232,7 @@ <h3>Source Configuration</h3>
                     </div>
 
                     <div ng-if="updatedBuildConfig | isJenkinsPipelineStrategy" class="section">
-                      <h3 class="with-divider">Jenkins Pipeline Configuration</h3>
+                      <h3 ng-class="{ 'with-divider': !sources.none }">Jenkins Pipeline Configuration</h3>
                       <div class="form-group" ng-if="buildConfig.spec.source.type === 'Git'">
                         <label for="jenkinsfile-type">Jenkinsfile Type</label>
                         <select
@@ -267,15 +267,25 @@ <h3 class="with-divider">Jenkins Pipeline Configuration</h3>
 
                       <div ng-if="jenkinsfileOptions.type === 'inline'">
                         <label>Jenkinsfile</label>
-                          <div ui-ace="{
-                            mode: 'groovy',
-                            theme: 'eclipse',
-                            onLoad: aceLoaded,
-                            rendererOptions: {
-                              fadeFoldWidgets: true,
-                              showPrintMargin: false
-                            }
-                          }" ng-model="updatedBuildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline"></div>
+                        <div ui-ace="{
+                          mode: 'groovy',
+                          theme: 'eclipse',
+                          onLoad: aceLoaded,
+                          rendererOptions: {
+                            fadeFoldWidgets: true,
+                            showPrintMargin: false
+                          }
+                        }" ng-model="updatedBuildConfig.spec.strategy.jenkinsPipelineStrategy.jenkinsfile" class="ace-bordered ace-inline"></div>
+                      </div>
+                      <div class="mar-top-md mar-bottom-md">
+                        <a ng-if="!view.jenkinsfileExamples" href="" ng-click="view.jenkinsfileExamples = true">What's a Jenkinsfile?</a>
+                      </div>
+                      <div ng-if="view.jenkinsfileExamples" class="editor-examples">
+                        <div class="pull-right mar-top-md">
+                          <a href="" ng-click="view.jenkinsfileExamples = false">Hide examples</a>
+                        </div>
+                        <h4>Jenkinsfile Examples</h4>
+                        <ng-include src="'views/edit/jenkinsfile-examples.html'"></ng-include>
                       </div>
                     </div>
                     <div ng-if="sources.none && !(updatedBuildConfig | isJenkinsPipelineStrategy)">

app/views/edit/jenkinsfile-examples.html

@@ -0,0 +1,48 @@
+<div>
+  <p>
+    A Jenkinsfile is a Groovy script that defines your pipeline. In the Jenkinsfile, you can declare
+    pipeline stages and run one or more steps within each stage. Here are some examples you can use
+    in your pipelines.
+  </p>
+  <p>
+    Declare a new pipeline stage called <var>Build:</var>
+    <copy-to-clipboard
+        display-wide="true"
+        clipboard-text="'stage \'Build\''">
+    </copy-to-clipboard>
+  </p>
+  <p>
+    Start a build for build config <var>my-build-config:</var>
+    <copy-to-clipboard
+        display-wide="true"
+        clipboard-text="'openshiftBuild(buildConfig: \'my-build-config\', showBuildLogs: \'true\')'">
+    </copy-to-clipboard>
+  </p>
+  <p>
+    Start a deployment for deployment config <var>my-deployment-config:</var>
+    <copy-to-clipboard
+        display-wide="true"
+        clipboard-text="'openshiftDeploy(deploymentConfig: \'my-deployment-config\')'">
+    </copy-to-clipboard>
+  </p>
+  <p>
+    Run the shell command <var>make test:</var>
+    <copy-to-clipboard
+        display-wide="true"
+        clipboard-text="'sh \'make test\''">
+    </copy-to-clipboard>
+  </p>
+  <p>
+    Prompt for manual input:
+    <copy-to-clipboard
+        display-wide="true"
+        clipboard-text="'input \'Promote to production?\''">
+    </copy-to-clipboard>
+  </p>
+  <p>
+    Learn more about
+    <a ng-href="{{ 'pipeline-builds' | helpLink}}" target="_blank">Pipeline Builds</a>
+    and the
+    <a ng-href="{{ 'pipeline-plugin' | helpLink}}" target="_blank">OpenShift Pipeline Plugin</a>.
+  </p>
+</div>

app/views/modals/jenkinsfile-examples-modal.html

@@ -0,0 +1,9 @@
+<div>
+  <div class="modal-body">
+    <h2>Jenkinsfile Examples</h2>
+    <ng-include src="'views/edit/jenkinsfile-examples.html'"></ng-include>
+  </div>
+  <div class="modal-footer">
+      <button class="btn btn-lg btn-default" type="button" ng-click="ok()">OK</button>
+  </div>
+</div>