[WIP] Add tutorials describing basic features of the product

Gruntfile.js

@@ -36,7 +36,7 @@ module.exports = function (grunt) {
         tasks: ['wiredep']
       },
       js: {
-        files: ['<%= yeoman.app %>/scripts/{,*/}*.js', '<%= yeoman.app %>/admin_components/**/*.js'],
+        files: ['<%= yeoman.app %>/scripts/{,*/}*.js', '<%= yeoman.app %>/admin_components/**/*.js', '<%= yeoman.app %>/services/*.js'],
         tasks: ['newer:jshint:all'],
         options: {
           livereload: '<%= connect.options.livereload %>'
@@ -121,7 +121,8 @@ module.exports = function (grunt) {
       all: {
         src: [
           'Gruntfile.js',
-          '<%= yeoman.app %>/scripts/{,*/}*.js'
+          '<%= yeoman.app %>/scripts/{,*/}*.js',
+          '<%= yeoman.app %>/services/*.js'
         ]
       },
       test: {

app/admin_components/adf-scripts/dreamfactory-scripts.js

@@ -801,6 +801,12 @@ angular.module('dfScripts', ['ngRoute', 'dfUtility'])
                 watchSelections();
                 watchApiData();
             });
+
+            // TODO Temporary hack to handle view render. Need to replace with more explicit solution.
+            $scope.showTutorialStep = function (currentStepId, nextStepId) {
+                return FeatureTour.showStep(currentStepId, nextStepId);
+            }
+
         }])
 
     .directive('scriptSidebarMenu', ['MODSCRIPTING_ASSET_PATH', function (MODSCRIPTING_ASSET_PATH) {

app/admin_components/adf-scripts/views/main.html

@@ -1,5 +1,5 @@
 <df-scripting-loading></df-scripting-loading>
-<div class="" ng-if="!dataLoading">
+<div class="scripts-page" ng-if="!dataLoading">
     <div class="">
         <div class="df-section df-section-all-round" df-fs-height>
             <div data-ng-show="isHostedSystem">
@@ -21,7 +21,7 @@
                                             <button class="btn btn-default" data-ng-click="toggleMenu()">Toggle Menu</button>
                                         </div>
                                         <div class="btn-group btn-group-sm">
-                                            <button class="btn btn-default" data-ng-click="saveScript()" data-ng-disabled="$parent.$parent.menuPathArr.length !== 4">Save</button>
+                                            <button class="btn btn-default" data-tour="scripting" data-step="save-example-script" data-ng-click="saveScript()" data-ng-disabled="$parent.$parent.menuPathArr.length !== 4">Save</button>
                                             <button class="btn btn-default" data-ng-click="deleteScript()" data-ng-disabled="$parent.$parent.menuPathArr.length !== 4 || newScript">Delete</button>
                                         </div>
                                     </div>
@@ -47,7 +47,11 @@
                                                    data-input-format="currentScriptObj.type"
                                                    data-is-editable="isEventScriptEditable"
                                                    data-editor-obj="eventScriptEditorObj"
-                                                   data-target-div="'eventScript'">
+                                                   data-target-div="'eventScript'"
+                                                   data-tour="scripting"
+                                                   data-step-1="show-script-editor"
+                                                   data-step-2="fill-in-script"
+                                    >
                                     </df-ace-editor>
                                 </div>
                             </div>

app/admin_components/adf-scripts/views/script-sidebar-menu.html

@@ -16,28 +16,37 @@
 
     <div df-fs-height id="scripting-sidebar-list" style="height:500px; overflow-y: scroll">
         <div>
-            <div class="list-group scripting-list-group" data-ng-show="menuPathArr.length === 0">
-                <a class="list-group-item" ng-class="{ highlighted: highlightService(service.name) }" data-ng-repeat="service in apiData.service_list"
+            <div class="list-group scripting-list-group" data-ng-show="menuPathArr.length === 0" ng-init="showTutorialStep('scripts-tab', 'choose-system-service')">
+                <a data-tutorial="scripting" data-step="select-service-{{service.name}}" class="list-group-item tutorial-step-select-service-{{service.name}}" ng-class="{ highlighted: highlightService(service.name) }" data-ng-repeat="service in apiData.service_list"
                    data-ng-click="selectService(service)">{{service.name}}<i
                         class="fa fa-fw fa-chevron-right pull-right"></i></a>
             </div>
 
             <div class="list-group scripting-list-group" data-ng-show="menuPathArr.length === 1">
                 <a class="list-group-item"
+                   data-tutorial="scripting"
+                   data-step="choose-{{resource.split('.').join('-')}}"
+                   ng-init="showTutorialStep('choose-system-service', 'choose-system-admin')"
                    data-ng-repeat="(resource, data) in currentServiceObj.resources"
                    ng-class="{ highlighted: highlightResource(resource) }"
                    data-ng-click="selectResource(resource, data)">{{resource}}<i class="fa fa-fw fa-chevron-right pull-right"></i></a>
             </div>
 
             <div class="list-group scripting-list-group" data-ng-show="menuPathArr.length === 2">
                 <a class="list-group-item"
+                   data-tutorial="scripting"
+                   data-step="{{endpoint.split('.').join('-')}}"
+                   ng-init="showTutorialStep('choose-system-admin', 'choose-admin-post-process')"
                    data-ng-repeat="endpoint in currentResourceObj.endpoints"
                    ng-class="{ highlighted: highlightEndpoint(endpoint) }"
                    data-ng-click="selectEndpoint(endpoint)">{{endpoint}}<i class="fa fa-fw fa-chevron-right pull-right"></i></a>
             </div>
 
             <div class="list-group scripting-list-group" data-ng-show="menuPathArr.length === 3">
                 <a class="list-group-item"
+                   data-tutorial="scripting"
+                   data-step="{{endpoint.split('.').join('-')}}-again"
+                   ng-init="showTutorialStep('choose-admin-post-process', 'again-choose-admin-post-process')"
                    data-ng-repeat="endpoint in currentEndpointObj.endpoints"
                    ng-class="{ highlighted: highlightExplodedEndpoint(endpoint) }"
                    data-ng-click="getScript(endpoint)">{{endpoint}}<i class="fa fa-fw fa-chevron-right pull-right"></i></a>
@@ -53,14 +62,16 @@
                 <div class="form-group">
                     <label>Script Type/Language</label>
                     <select class="form-control input-sm"
+                            data-tutorial="scripting"
+                            data-step="choose-language"
                             data-ng-model="currentScriptObj.type"
                             data-ng-options="scriptType.name as scriptType.label for scriptType in apiData.script_type">
                     </select>
                 </div>
                 <div class="form-inline">
                     <div class="checkbox">
                         <label>
-                            <input type="checkbox" data-ng-model="currentScriptObj.is_active"/>
+                            <input type="checkbox" data-tour="scripting" data-step="activate-script" data-ng-model="currentScriptObj.is_active"/>
                             &nbsp;
                             Active
                         </label>
@@ -69,7 +80,7 @@
                 <div data-ng-if="currentScriptObj.name.indexOf('pre_process') >= 0 || currentScriptObj.name.indexOf('post_process') >= 0" class="form-inline">
                     <div class="checkbox">
                         <label>
-                            <input type="checkbox" data-ng-model="currentScriptObj.allow_event_modification"/>
+                            <input type="checkbox" data-tour="scripting" data-step="modify-response" data-ng-model="currentScriptObj.allow_event_modification"/>
                             &nbsp;
                             <span data-ng-if="currentScriptObj.name.indexOf('pre_process') >= 0">Allow script to modify request payload</span>
                             <span data-ng-if="currentScriptObj.name.indexOf('post_process') >= 0">Allow script to modify response payload</span>

app/admin_components/adf-services/dreamfactory-services.js

@@ -96,6 +96,11 @@ angular.module('dfServices', ['ngRoute', 'dfUtility'])
         };
 
         $scope.loadTabData(true);
+
+        // TODO Temporary hack to handle view render. Need to replace with more explicit solution.
+        $scope.showTutorialStep = function (currentStepId, nextStepId) {
+            FeatureTour.showStep(currentStepId, nextStepId);
+        }
     }])
 
     .directive('dfServiceLoading', [function() {

app/admin_components/adf-services/views/df-manage-services.html

@@ -23,7 +23,7 @@
         <div data-ng-show="services.length > 0">
 
             <div>
-                <table class="table table-responsive table-bordered table-striped table-hover table-condensed">
+                <table id="services-table" class="table table-responsive table-bordered table-striped table-hover table-condensed">
                     <thead>
                     <th></th>
                     <th data-ng-class="order.orderBy === field.name ? 'df-th-selected' : ''"
@@ -37,8 +37,8 @@
                         </span>
                     </th>
                     </thead>
-                    <tbody>
-                    <tr data-ng-repeat="obj in services | orderObjectBy:order.orderBy:order.orderByReverse" class="repeated-item" class="repeated-item" data-ng-class="obj.__dfUI.selected ? 'danger' : ''">
+                    <tbody ng-init="showTutorialStep('service-save-button','show-created-service')">
+                    <tr data-ng-repeat="obj in services | orderObjectBy:order.orderBy:order.orderByReverse" class="repeated-item" data-ng-class="obj.__dfUI.selected ? 'danger' : ''">
                         <td style="width: 80px">
                             <div data-ng-if="obj.record.deletable == true">
                                 <div class="checkbox" style="margin: 0">

app/admin_components/adf-services/views/df-service-config.html

@@ -65,17 +65,17 @@
             </div>
         </div>
 
-        <input class="form-control" data-ng-if="field.type == 'string' && field.name !== 'storage_path' && field.name !== 'scm_reference' && field.name !== 'scm_repository'"
+        <input class="form-control tutorial-step-{{field.name}}-input" data-ng-if="field.type == 'string' && field.name !== 'storage_path' && field.name !== 'scm_reference' && field.name !== 'scm_repository'"
                id="services_details_config_string_{{$index}}"
                data-ng-model="serviceConfig[field.name]"
                type="text" data-ng-required="field.required"/>
 
-        <input class="form-control" data-ng-if="field.type == 'password' || field.name == 'password'"
+        <input class="form-control tutorial-step-{{field.name}}-input" data-ng-if="field.type == 'password' || field.name == 'password'"
                id="services_details_config_password_{{$index}}"
                data-ng-model="serviceConfig[field.name]"
-               type="password" data-ng-required="field.required"/>
+               type="password" ta-ng-required="field.required"/>
 
-        <input class="form-control" data-ng-if="field.type == 'text' && field.name !== 'content' && field.name !== 'password'"
+        <input class="form-control tutorial-step-{{field.name}}-input" data-ng-if="field.type == 'text' && field.name !== 'content' && field.name !== 'password'"
                id="services_details_config_text_{{$index}}"
                data-ng-model="serviceConfig[field.name]"
                type="text" data-ng-required="field.required"/>
@@ -90,7 +90,7 @@
                        data-target-div="'serviceConfig'">
         </df-ace-editor>
 
-        <input class="form-control" data-ng-if="field.type == 'integer' && field.name !== 'storage_service_id'"
+        <input class="form-control tutorial-step-{{field.name}}" data-ng-if="field.type == 'integer' && field.name !== 'storage_service_id'"
                id="services_details_config_integer_{{$index}}"
                data-ng-model="serviceConfig[field.name]"
                type="number" data-ng-required="field.required">

app/admin_components/adf-services/views/df-service-details.html

@@ -7,7 +7,7 @@
 
         <ul class="nav nav-tabs" data-role="tablist">
             <li class="active"><a showtab href="#info" id="info-tab">Info</a></li>
-            <li><a showtab href="#config" id="config-tab" ng-click="refreshServiceConfigEditor()">Config</a></li>
+            <li><a showtab href="#config" class="tutorial-step-config-type" id="config-tab" ng-click="refreshServiceConfigEditor()">Config</a></li>
             <li>
                 <a showtab href="#service-definition" id="service-definition-tab" ng-click="refreshServiceDefEditor()">Service Definition</a>
             </li>

app/admin_components/adf-services/views/df-service-info.html

@@ -3,17 +3,17 @@
     <label>Service Type</label>
     <df-simple-help data-options="dfSimpleHelp.serviceType"></df-simple-help><br/>
 
-    <div class="dropdown" data-ng-if="newService">
-        <button id="services_info_type" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+    <div class="dropdown" >
+        <button data-ng-if="newService" id="services_info_type" class="btn btn-default dropdown-toggle tutorial-step-selecting-service-type-dropdown" type="button" data-toggle="dropdown">
             {{selectedSchema.label || 'Select Service Type'}}
             <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu">
+        <ul class="dropdown-menu tutorial-step-selecting-service-type-dropdown-list" data-ng-if="newService">
             <li class="dropdown-submenu" ng-repeat="service in serviceTypes">
                 <a id="services_info_type_{{$index}}" class="sub" tabindex="-1">{{service.group_name}}</a>
                 <ul class="dropdown-menu {{service.group_types.length > serviceTypesSingleColLimit ? 'dropdown-menu-2' : ''}}">
                     <li data-ng-repeat="type in service.group_types">
-                        <a href="" id="services_info_type_select_{{type.name}}" data-ng-click="changeServiceType(type.name)">{{type.label}}</a>
+                        <a href="" id="services_info_type_select_{{type.name}}" class="tutorial-step-service-type-selected" data-ng-click="changeServiceType(type.name)">{{type.label}}</a>
                     </li>
                 </ul>
             </li>
@@ -30,13 +30,13 @@
         <br/>
         <label>Name</label>
         <df-simple-help data-options="dfSimpleHelp.name"></df-simple-help>
-        <input id="services_info_name" class="form-control" data-ng-model="serviceInfo.name" type="text" required="" style="">
+        <input id="services_info_name" class="form-control tutorial-service-name" data-ng-model="serviceInfo.name" type="text" required="" style="">
     </div>
 
     <div class="form-group" data-ng-if="selectedSchema && selectedSchema.config_schema">
         <label>Label</label>
         <df-simple-help data-options="dfSimpleHelp.label"></df-simple-help>
-        <input id="services_info_label" class="form-control" data-ng-model="serviceInfo.label" type="text" required="" style="">
+        <input id="services_info_label" class="form-control tutorial-service-label" data-ng-model="serviceInfo.label" type="text" required="" style="">
     </div>
 
     <div class="form-group" data-ng-if="selectedSchema && selectedSchema.config_schema">
@@ -46,7 +46,7 @@
     </div>
 
     <div class="form-group ng-scope" data-ng-if="selectedSchema && selectedSchema.config_schema">
-        <div class="checkbox">
+        <div class="checkbox tutorial-step-active-service-checkbox">
             <label><input id="services_info_active" data-ng-model="serviceInfo.is_active" type="checkbox">Active</label>
         </div>
     </div>

app/admin_components/adf-services/views/main.html

@@ -2,7 +2,7 @@
     <div class="col-md-2 df-sidebar-nav" >
         <df-sidebar-nav></df-sidebar-nav>
     </div>
-    <div class="col-md-10 df-section"  data-ng-class="activeView.path === 'manage-services' ? 'df-section-3-round' : 'df-section-all-round'"  df-fs-height>
+    <div class="col-md-10 df-section" id="scroll-element" data-ng-class="activeView.path === 'manage-services' ? 'df-section-3-round' : 'df-section-all-round'"  df-fs-height>
         <df-service-loading></df-service-loading>
         <df-manage-services data-ng-if="!dataLoading && activeView.path === 'manage-services'"></df-manage-services>
         <df-service-details data-ng-if="!dataLoading && activeView.path === 'create-service'" data-new-service="true" data-api-data="apiData"></df-service-details>

app/admin_components/adf-tutorial/tutorial.controller.js

@@ -0,0 +1,21 @@
+'use strict';
+
+angular.module('dfTutorial')
+
+    .controller('TutorialController', ['$scope', function ($scope) {
+
+        $scope.$parent.title = 'Tutorials';
+
+        $scope.startTutorial = function (scenarioName) {
+            FeatureTour.start(scenarioName);
+        };
+
+        $scope.dfLargeHelp = {
+            manageSchema: {
+                title: 'Learn How To',
+                text: 'This section includes interactive tutorials. The below list covers basic ' +
+                    'workflows of DreamFactory. You can find here the information about how to start with DreamFactory.'
+            }
+        };
+
+    }]);

app/admin_components/adf-tutorial/tutorial.module.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('dfTutorial', [])
+    .constant('MOD_TUTORIALS_ROUTER_PATH', '/tutorials')
+    .constant('MOD_TUTORIALS_ASSET_PATH', 'admin_components/adf-tutorial/')
+    .config(['$routeProvider', 'MOD_TUTORIALS_ROUTER_PATH', 'MOD_TUTORIALS_ASSET_PATH',
+        function ($routeProvider, MOD_TUTORIALS_ROUTER_PATH, MOD_TUTORIALS_ASSET_PATH) {
+            $routeProvider
+                .when(MOD_TUTORIALS_ROUTER_PATH, {
+                    templateUrl: MOD_TUTORIALS_ASSET_PATH + 'views/main-tutorial.html',
+                    controller: 'TutorialController',
+                    resolve: {
+                        checkUser: ['checkUserService', function (checkUserService) {
+                            return checkUserService.checkUser();
+                        }]
+                    }
+                });
+        }]);

app/admin_components/adf-tutorial/views/main-tutorial.html

@@ -0,0 +1,34 @@
+<style>
+    .tutorials-index .start-service-link{
+        font-size: 18px;
+    }
+
+    .tutorials-index ul li {
+        margin-bottom: 10px;
+    }
+</style>
+
+<div class="col-md-12 df-section tutorials-index" df-fs-height>
+    <df-large-help data-options="dfLargeHelp.manageSchema"></df-large-help>
+    <ul>
+        <li>
+            <a type="button" class="start-service-link" data-ng-click="startTutorial('createService')">
+                <b>Create Service</b>
+            </a>
+            <br>
+            This is where you would want to start. Services are the building blocks of DreamFactory. They are the entrypoints for interaction with your application.
+            In this tutorial we will guide you through the service creation workflow. As a result you will end up with a simple database service for MySQL.
+        </li>
+        <li>
+            <a type="button" class="start-service-link" data-ng-click="startTutorial('scripting')">
+                <b>Scripting</b>
+            </a>
+            <br>
+            Sometimes you would want to add the custom behavior to some of your endpoint.
+            To achieve that we have this feature called Scripting.
+            For example this interactive guide will show you how to add the custom PHP code to one of the standard system endpoints.
+            We have already prepared an example script so you won't do any coding this time.
+            Just start the tour and follow the instructions.
+        </li>
+    </ul>
+</div>