feat: add a link to support on api portal view

This closes gravitee-io/issues#1241
gravitee-io · Jun 13, 2018 · 5d2da50 · 5d2da50
1 parent 51a7bdf
commit 5d2da50
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 20 deletions.
diff --git a/src/management/management.interceptor.ts b/src/management/management.interceptor.ts
@@ -16,6 +16,7 @@
 import angular = require('angular');
 
 import NotificationService from '../services/notification.service';
+import {StateProvider} from "angular-ui-router";
 
 function interceptorConfig(
   $httpProvider: angular.IHttpProvider
@@ -46,8 +47,7 @@ function interceptorConfig(
                 $injector.get('$rootScope').$broadcast('graviteeLogout');
               }, 2000);
             } else {
-              let state = ($injector.get('$state') as ng.ui.IStateService);
-              state.go('portal.home');
+              ($injector.get('$state') as ng.ui.IStateService).go('portal.home');
             }
           }
         } else {

diff --git a/src/portal/api/_api.scss b/src/portal/api/_api.scss
@@ -246,7 +246,7 @@ a.ui.label:focus, a.ui.label:hover {
   box-sizing: border-box;
 }
 
-.api-nav ul li.subscribe {
+.api-nav ul li.header-button {
   float: right;
 }
 
@@ -255,7 +255,7 @@ a.ui.label:focus, a.ui.label:hover {
   padding-bottom: 0;
 }
 
-.api-nav ul li.subscribe button.oui-button.thin-button {
+.api-nav ul li.header-button button.oui-button.thin-button {
   margin: 10px 0 8px;
   line-height: 28px;
   padding: 2px 2ex;

diff --git a/src/portal/api/header/api-header.component.ts b/src/portal/api/header/api-header.component.ts
@@ -14,16 +14,18 @@
  * limitations under the License.
  */
 import ApiService from "../../../services/api.service";
+import TicketService from "../../../services/ticket.service";
 
 const ApiHeaderComponent: ng.IComponentOptions = {
   bindings: {
     api: '<',
     apiRatingSummary: '<'
   },
   template: require('./api-header.html'),
-  controller: function(Constants, ApiService: ApiService, $state, $stateParams, $rootScope) {
+  controller: function(Constants, ApiService: ApiService, $state, $stateParams, $rootScope, TicketService) {
     'ngInject';
     this.ratingEnabled = ApiService.isRatingEnabled();
+    this.supportEnabled = TicketService.isSupportEnabled();
 
     this.getEndpoint = function () {
       return Constants.portal.entrypoint + this.api.context_path;

diff --git a/src/portal/api/header/api-header.html b/src/portal/api/header/api-header.html
@@ -61,7 +61,10 @@
       <li ui-sref-active="active">
         <a ui-sref="portal.api.pages({apiId: $ctrl.api.id})">{{'api.documentation.title' | translate}}</a>
       </li>
-      <li class="subscribe">
+      <li ui-sref-active="active" ng-if="$ctrl.supportEnabled">
+        <a ui-sref="portal.api.support({apiId: $ctrl.api.id})">{{'menu.support' | translate}}</a>
+      </li>
+      <li class="header-button">
         <button class="oui-button inverted progressive thin-button" ui-sref="portal.api.detail({apiId: $ctrl.api.id, '#': 'plans'})">{{'api.plan.subscribe' | translate}}</button>
       </li>
     </ul>

diff --git a/src/portal/api/support/api-support.component.ts b/src/portal/api/support/api-support.component.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SupportTicketController from '../../../support/ticket.controller';
+
+const ApiPageComponent: ng.IComponentOptions = {
+  bindings: {
+    api: '<'
+  },
+  template: require('../../../support/ticket.html'),
+  controller: SupportTicketController,
+  controllerAs: 'supportTicketCtrl'
+};
+
+export default ApiPageComponent;
diff --git a/src/portal/portal.module.ts b/src/portal/portal.module.ts
@@ -54,6 +54,8 @@ import uiRouter from 'angular-ui-router';
 import {permission, uiPermission} from 'angular-permission';
 import StarRatingDirective from "./components/starRating/star.rating.directive";
 
+import ApiSupport from './api/support/api-support.component';
+
 require('angulartics');
 
 angular.module('gravitee-portal', [uiRouter, permission, uiPermission, 'ngMaterial', 'pascalprecht.translate',
@@ -71,6 +73,7 @@ angular.module('gravitee-portal', [uiRouter, permission, uiPermission, 'ngMateri
   .component('apiPlans', ApiPlansComponent)
   .component('apiPages', ApiPagesComponent)
   .component('apiPage', ApiPageComponent)
+  .component('apiSupport', ApiSupport)
   .component('pages', PagesComponent)
   .component('page', PageComponent)
   .component('apiSubscribe', ApiSubscribeComponent)

diff --git a/src/portal/portal.route.ts b/src/portal/portal.route.ts
@@ -159,6 +159,13 @@ function portalRouterConfig($stateProvider: ng.ui.IStateProvider) {
         }
       }
     })
+    .state('portal.api.support', {
+      url: '/support',
+      views: {
+        'header': {component: 'apiPortalHeader'},
+        'content': {component: 'apiSupport'}
+      }
+    })
     .state('portal.pages', {
       url: '/pages',
       component: 'pages',

diff --git a/src/services/ticket.service.ts b/src/services/ticket.service.ts
@@ -16,7 +16,7 @@
 class TicketService {
   private ticketURL: string;
 
-  constructor(private $http, Constants) {
+  constructor(private $http, private Constants) {
     'ngInject';
     this.ticketURL = `${Constants.baseURL}platform/tickets`;
   }
@@ -26,6 +26,10 @@ class TicketService {
       return this.$http.post(this.ticketURL, ticket);
     }
   }
+
+  isSupportEnabled() {
+    return this.Constants.portal.support.enabled;
+  }
 }
 
 export default TicketService;
diff --git a/src/support/ticket.controller.ts b/src/support/ticket.controller.ts
@@ -18,6 +18,7 @@ import NotificationService from '../services/notification.service';
 import ApiService from '../services/api.service';
 import ApplicationService from '../services/applications.service';
 import UserService from '../services/user.service';
+import _ = require('lodash');
 
 class SupportTicketController {
 
@@ -26,18 +27,31 @@ class SupportTicketController {
   private applications: [any];
   private isAuthenticated: boolean;
   private userHasAnEmail: boolean;
+  private stateParams: any;
 
   constructor(
     private TicketService: TicketService,
     private NotificationService: NotificationService,
     private UserService: UserService,
     private ApiService: ApiService,
-    private ApplicationService: ApplicationService) {
+    private ApplicationService: ApplicationService,
+    private $stateParams) {
     'ngInject';
 
+    this.stateParams = $stateParams;
+
     if (this.isAuthenticated = UserService.isAuthenticated()) {
       this.userHasAnEmail = !!UserService.currentUser.email;
-      ApiService.list().then((response) => this.apis = response.data);
+      ApiService.list().then((response) => this.apis = response.data).then((apis) => {
+        if ($stateParams.apiId) {
+          let api = _.find(apis, {id: $stateParams.apiId});
+          if (api) {
+            this.ticket = {
+              api: $stateParams.apiId
+            };
+          }
+        }
+      });
       ApplicationService.list().then((response) => this.applications = response.data);
     }
   }

diff --git a/src/support/ticket.html b/src/support/ticket.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div style="padding-top: 100px;">
+<div ng-style="{'padding-top': supportTicketCtrl.stateParams.apiId?'0':'50px'}">
   <div ng-if="!supportTicketCtrl.isAuthenticated">
     <div layout="column" flex layout-align="center center" style="color: #424E5A;">
       <ng-md-icon icon="bug_report" style="fill: #cdcccc;" size="120"></ng-md-icon>
@@ -27,41 +27,44 @@ <h5 translate="support.ticket.notAuthenticated.message"></h5>
     </div>
   </div>
 
-  <form name="formTicket" ng-submit="supportTicketCtrl.create()" novalidate ng-if="supportTicketCtrl.isAuthenticated">
+  <form name="formTicket" ng-submit="supportTicketCtrl.create()" novalidate ng-if="supportTicketCtrl.isAuthenticated"
+    style="width: 70%; margin: 0 auto;">
     <h5 ng-if="!supportTicketCtrl.userHasAnEmail" style="color: red;margin-left: 10px;">
       <ng-md-icon icon="warning" style="fill: red"></ng-md-icon>
       <span translate="support.ticket.userWithoutEmail.message"></span>
     </h5>
 
     <md-card>
-      <md-card-title>
+      <md-card-title style="background-color: #E8E8E8;">
         <md-card-title-text>
           <span class="md-headline" translate="support.ticket.title"></span>
         </md-card-title-text>
       </md-card-title>
-      <md-card-content layout="column">
-        <md-input-container>
+      <md-card-content layout="column" style="background-color: #FAFAFA;">
+        <md-input-container ng-if="!supportTicketCtrl.stateParams.apiId">
           <label translate="support.ticket.api"></label>
-          <md-select ng-model="supportTicketCtrl.ticket.api">
+          <md-select ng-model="supportTicketCtrl.ticket.api" ng-disabled="!supportTicketCtrl.userHasAnEmail">
             <md-option ng-repeat="api in supportTicketCtrl.apis" ng-value="api.id">{{api.name}} ({{api.version}})</md-option>
           </md-select>
         </md-input-container>
         <md-input-container>
           <label translate="support.ticket.application"></label>
-          <md-select ng-model="supportTicketCtrl.ticket.application">
-            <md-option ng-repeat="application in supportTicketCtrl.applications" ng-value="application.id">{{application.name}} ({{application.owner.username}})</md-option>
+          <md-select ng-model="supportTicketCtrl.ticket.application" ng-disabled="!supportTicketCtrl.userHasAnEmail">
+            <md-option ng-repeat="application in supportTicketCtrl.applications" ng-value="application.id">{{application.name}} ({{application.owner.displayName}})</md-option>
           </md-select>
         </md-input-container>
         <md-input-container>
           <label translate="support.ticket.subject"></label>
-          <input ng-model="supportTicketCtrl.ticket.subject" ng-required="true">
+          <input ng-model="supportTicketCtrl.ticket.subject" ng-required="true" ng-disabled="!supportTicketCtrl.userHasAnEmail">
         </md-input-container>
         <md-input-container flex>
           <label translate="support.ticket.content"></label>
-          <textarea ng-model="supportTicketCtrl.ticket.content" ng-required="true" rows="10"></textarea>
+          <textarea ng-model="supportTicketCtrl.ticket.content" ng-required="true" rows="10" ng-disabled="!supportTicketCtrl.userHasAnEmail"></textarea>
         </md-input-container>
         <md-input-container flex>
-          <md-checkbox ng-model="supportTicketCtrl.ticket.copyToSender" aria-label="cb-copy-to-sender"><span translate="support.ticket.copyToSender"></span></md-checkbox>
+          <md-checkbox ng-model="supportTicketCtrl.ticket.copyToSender" aria-label="cb-copy-to-sender" ng-disabled="!supportTicketCtrl.userHasAnEmail">
+            <span translate="support.ticket.copyToSender"></span>
+          </md-checkbox>
         </md-input-container>
       </md-card-content>
       <md-card-actions layout="row" layout-align="end center">