Merge pull request #1472 from eclipse/CHE-1222

CHE-1222: make workspace details sections extendible

dashboard/src/app/index.module.js

@@ -111,13 +111,15 @@ initModule.config(['$routeProvider', ($routeProvider) => {
 /**
  * Setup route redirect module
  */
-initModule.run(['$rootScope', '$location', 'routingRedirect', 'cheUser', '$timeout', 'ideIFrameSvc', 'cheIdeFetcher', 'routeHistory', 'cheUIElementsInjectorService',
-  ($rootScope, $location, routingRedirect, cheUser, $timeout, ideIFrameSvc, cheIdeFetcher, routeHistory, cheUIElementsInjectorService) => {
+initModule.run(['$rootScope', '$location', 'routingRedirect', 'cheUser', '$timeout', 'ideIFrameSvc', 'cheIdeFetcher', 'routeHistory', 'cheUIElementsInjectorService', 'workspaceDetailsService',
+  ($rootScope, $location, routingRedirect, cheUser, $timeout, ideIFrameSvc, cheIdeFetcher, routeHistory, cheUIElementsInjectorService, workspaceDetailsService) => {
 
     $rootScope.hideLoader = false;
     $rootScope.waitingLoaded = false;
     $rootScope.showIDE = false;
 
+    workspaceDetailsService.addSection('Projects', '<workspace-details-projects></workspace-details-projects>', 'icon-ic_inbox_24px');
+
     // here only to create instances of these components
     cheIdeFetcher;
     routeHistory;

dashboard/src/app/workspaces/workspace-details/workspace-details.controller.js

@@ -20,14 +20,15 @@ export class WorkspaceDetailsCtrl {
    * Default constructor that is using resource injection
    * @ngInject for Dependency injection
    */
-  constructor($rootScope, $route, $location, cheWorkspace, $mdDialog, cheNotification, ideSvc, $log) {
+  constructor($rootScope, $route, $location, cheWorkspace, $mdDialog, cheNotification, ideSvc, $log, workspaceDetailsService) {
     this.$rootScope = $rootScope;
     this.cheNotification = cheNotification;
     this.cheWorkspace = cheWorkspace;
     this.$mdDialog = $mdDialog;
     this.$location = $location;
     this.ideSvc = ideSvc;
     this.$log = $log;
+    this.workspaceDetailsService = workspaceDetailsService;
 
     this.workspaceDetails = {};
     this.workspaceId = $route.current.params.workspaceId;
@@ -56,6 +57,14 @@ export class WorkspaceDetailsCtrl {
     this.cheWorkspace.fetchWorkspaces();
   }
 
+  /**
+   * Returns workspace details sections (tabs, example - projects)
+   * @returns {*}
+   */
+  getSections() {
+    return this.workspaceDetailsService.getSections();
+  }
+
   //Update the workspace data to be displayed.
   updateWorkspaceData() {
     this.workspaceDetails = this.cheWorkspace.getWorkspacesById().get(this.workspaceId);

dashboard/src/app/workspaces/workspace-details/workspace-details.html

@@ -95,13 +95,13 @@
         </che-panel>
       </md-tab-body>
     </md-tab>
-    <md-tab>
+    <md-tab ng-repeat="section in workspaceDetailsCtrl.getSections()">
       <md-tab-label>
-        <md-icon md-font-icon="material-design icon-ic_inbox_24px" class="che-tab-label-icon"></md-icon>
-        <span class="che-tab-label-title">Projects</span>
+        <md-icon md-font-icon="material-design {{section.icon}}" class="che-tab-label-icon"></md-icon>
+        <span class="che-tab-label-title">{{section.title}}</span>
       </md-tab-label>
       <md-tab-body>
-        <workspace-details-projects></workspace-details-projects>
+        <div che-compile="section.content"></div>
       </md-tab-body>
     </md-tab>
   </md-tabs>

dashboard/src/app/workspaces/workspace-details/workspace-details.service.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2015-2016 Codenvy, S.A.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *   Codenvy, S.A. - initial API and implementation
+ */
+'use strict';
+
+/**
+ * This class is handling the data for workspace details sections (tabs)
+ *
+ * @author Ann Shumilova
+ */
+export class WorkspaceDetailsService {
+
+    /**
+     * Default constructor that is using resource
+     * @ngInject for Dependency injection
+     */
+    constructor () {
+      this.sections = [];
+    }
+
+  /**
+   * Add new section to the workspace details.
+   *
+   * @param title section title
+   * @param content section html content
+   * @param icon section icon
+   * @param index optional section index (order)
+   */
+    addSection(title, content, icon, index) {
+      let section = {};
+      section.title = title;
+      section.content = content;
+      section.icon = icon;
+      section.index = index || this.sections.length;
+      this.sections.push(section);
+    }
+
+  /**
+   * Returns workspace details sections.
+   *
+   * @returns {Array} array of sections
+   */
+    getSections() {
+      return this.sections;
+    }
+}

dashboard/src/app/workspaces/workspaces-config.js

@@ -18,6 +18,7 @@ import {UsageChart} from './list-workspaces/workspace-item/usage-chart.directive
 import {WorkspaceItemCtrl} from './list-workspaces/workspace-item/workspace-item.controller';
 import {WorkspaceDetailsCtrl} from './workspace-details/workspace-details.controller';
 import {WorkspaceDetailsProjectsCtrl} from './workspace-details/workspace-projects/workspace-details-projects.controller';
+import {WorkspaceDetailsService} from './workspace-details/workspace-details.service.js';
 import {ExportWorkspaceController} from './workspace-details/export-workspace/export-workspace.controller';
 import {ExportWorkspace} from './workspace-details/export-workspace/export-workspace.directive';
 import {ExportWorkspaceDialogController} from  './workspace-details/export-workspace/dialog/export-workspace-dialog.controller';
@@ -39,6 +40,7 @@ import {WorkspaceStatusIndicator} from './workspace-status-indicator/workspace-s
 import {CheStackLibraryFilterCtrl} from './create-workspace/select-stack/stack-library/stack-library-filter/che-stack-library-filter.controller';
 import {CheStackLibraryFilter}     from './create-workspace/select-stack/stack-library/stack-library-filter/che-stack-library-filter.directive';
 import {CreateProjectStackLibrarySelectedStackFilter} from './create-workspace/select-stack/stack-library/create-project-stack-library-selected-stack.filter.js';
+
 /**
  * @ngdoc controller
  * @name workspaces:WorkspacesConfig
@@ -63,6 +65,7 @@ export class WorkspacesConfig {
 
     register.controller('WorkspaceDetailsProjectsCtrl', WorkspaceDetailsProjectsCtrl);
     register.directive('workspaceDetailsProjects', WorkspaceDetailsProjects);
+    register.service('workspaceDetailsService', WorkspaceDetailsService);
 
     register.controller('ExportWorkspaceDialogController', ExportWorkspaceDialogController);
     register.controller('ExportWorkspaceController', ExportWorkspaceController);

dashboard/src/components/widget/compile/che-compile.directive.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2015-2016 Codenvy, S.A.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *   Codenvy, S.A. - initial API and implementation
+ */
+'use strict';
+
+/**
+ * Defines a directive in html element, which value will be self compiled.
+ *
+ * @author Ann Shumilova
+ */
+export class CheCompile {
+  /**
+   * Default constructor that is using resource
+   * @ngInject for Dependency injection
+   */
+  constructor ($compile) {
+    this.restrict='A';
+
+    this.$compile = $compile;
+  }
+
+  link($scope, element, attrs) {
+    $scope.$watch(attrs.cheCompile, (value) => {
+      element.html(value);
+      this.$compile(element.contents())($scope);
+    });
+
+  }
+}

dashboard/src/components/widget/widget-config.js

@@ -20,6 +20,7 @@ import {CheButtonWarning} from './button/che-button-warning.directive';
 import {CheButtonDropdownCtrl} from './button-dropdown/che-button-dropdown.controller';
 import {CheButtonDropdown} from './button-dropdown/che-button-dropdown.directive';
 import {CheClipboard} from './copy-clipboard/che-clipboard.directive';
+import {CheCompile} from './compile/che-compile.directive';
 import {CheDropZoneCtrl} from './dropzone/che-dropzone.controller';
 import {CheDropZone} from './dropzone/che-dropzone.directive';
 import {CheEmptyState} from './empty-state/che-empty-state.directive';
@@ -76,6 +77,7 @@ export class WidgetConfig {
       .directive('cheButtonDropdown', CheButtonDropdown)
       //clipboard
       .directive('cheClipboard', CheClipboard)
+      .directive('cheCompile', CheCompile)
       //dropzone
       .controller('CheDropZoneCtrl', CheDropZoneCtrl)
       .directive('cheDropzone', CheDropZone)