diff --git a/dashboard/README.md b/dashboard/README.md index 7af471d23cd..ae6c01c93ea 100644 --- a/dashboard/README.md +++ b/dashboard/README.md @@ -1,10 +1,13 @@ ## About Eclipse Che + Eclipse Che is a next generation Eclipse IDE and open source alternative to IntelliJ. This repository is licensed under the Eclipse Public License 2.0. Visit [Eclipse Che's Web site](https://eclipse.org/che) for feature information or the main [Che assembly repository](https://github.com/codenvy/che) for a description of all participating repositories. Che Dashboard + ============== ## Requirements + - Docker ## Quick start @@ -22,54 +25,61 @@ $ mvn -Pnative clean install ``` Required tools for native build: + - Python `v2.7.x`(`v3.x.x`currently not supported) - Node.js `v8.x.x` or `v9.x.x` - yarn `v1.13.0` or higher - gulp -Installation instructions for Node.js can be found on the following [link](https://docs.npmjs.com/getting-started/installing-node). +Installation instructions for Node.js can be found on the following [link](https://docs.npmjs.com/getting-started/installing-node). ## Running + In order to run the project, the serve command is used + ```sh $ gulp serve ``` + It will launch the server and then the project can be tested on http://localhost:3000 By default it will use http://localhost:8080 as a remote server, so make sure that Che is running locally. More details about how to do that can be found on the following [link](https://github.com/eclipse/che/wiki/Development-Workflow#build-and-run---tomcat) The argument `--server ` may allow to use another server. (url is for example http://my-server.com) - ```sh $ gulp serve:dist ``` + This command will provide the 'minified/optimised' version of the application This is a good check for testing if the final rendering is OK - ## Tests + The application contains both unit tests and e2e tests (end-to-end) Unit tests + ```sh $ gulp test ``` e2e tests + ```sh $ gulp protractor ``` Both tests + ```sh $ gulp alltests ``` Note: before pushing contribution, these tests should always work -#Architecture design +# Architecture design ## Ecmascript 2015/es6 @@ -80,54 +90,60 @@ So application is written with the new language but the resulting build is Javas Among new features, Class, arrow functions, etc ## Styling/css + [Stylus](https://github.com/LearnBoost/stylus) is used for produced the final CSS. Variables, simple syntax, etc is then provided - ## Code convention ### indent + There is a .editorconfig file that is indicating the current identation which is + ``` indent_style = space indent_size = 2 ``` ### syntax + The syntax is checked by jshint (through .jshintrc file) Also when launching gulp serve command, there is a report on each file that may have invalid data -For example use single quote 'hello', no "double quote", use === and !=== and not == or != - +For example use single quote `'hello'`, no `"double quote"`, use `===` and `!===` and not `==` or `!=` ### name of the files -Controllers are in files named .controller.js -Directives: .directive.js +Controllers are in files named `[name].controller.ts` + +Directives: `[name].directive.ts` -Templates: .html +Templates: `[name].html` -Factories: .factory.js +Factories: `[name].factory.ts` -Unit test: .spec.js (for my-example.factory.js will be named my-example.spec.js) +Unit test: `[name].spec.ts` (for `my-example.factory.ts` will be named `my-example.spec.ts`) #### About e2e tests + If a 'project' page needs to be tested: -project.po.js will contain the Page Object pattern (all methods allowing to get HTML elements on the page) +`project.po.ts` will contain the Page Object pattern (all methods allowing to get HTML elements on the page) -project.spec.js will have the e2e test +`project.spec.ts` will have the e2e test -project.mock.js will provide some mock for the test +`project.mock.ts` will provide some mock for the test ## source tree + Each 'page' needs to have its own folder which include: controller, directive, template, style for the page for a 'list-projects' page, the folder tree will have + ``` list-projects - list-projects.controller.js @@ -135,15 +151,16 @@ list-projects - list-projects.styl ``` -## AngularJS recommandation -As classes are available, the controller will be designed as es6 classes. +## AngularJS recommendation -All injection required will be done through the constructor by adding also the static $inject = ['$toBeInjected']; line. +As classes are available, the controller will be designed as es6 classes. +All injection required will be done through the constructor by adding also the static `$inject = ['$toBeInjected'];` line. Also properties are bound with this. scope (so avoid to use $scope in injection as this will be more aligned with AngularJS 2.0 where scope will disappear) example + ```js /** * Defines a controller @@ -173,8 +190,8 @@ export default CheToggleCtrl; So, no need to add specific arrays for injection. - By using the this syntax, the controllerAs needs to be used when adding the router view + ```js .when('/myURL', { templateUrl: 'mytemplate.html', @@ -183,11 +200,12 @@ By using the this syntax, the controllerAs needs to be used when adding the rout }) ``` -And then, when there is a need to interact with code of a controller, the controllerAs value is used. +And then, when there is a need to interact with code of a controller, the `controllerAs` value is used. ```html
Selected book is {{myCtrl.selectedBook}}
``` + Note that as if scope was using, the values are always prefixed ## Directives @@ -196,23 +214,38 @@ The whole idea is to be able to reuse some 'widgets' when designing HTML pages So instead that each page make the design/css for all buttons, inputs, it should be defined in some widget components. -The components are located in the src/components/widget folder +The components are located in the `src/components/widget` folder -It includes toggle buttons, selecter, etc. +It includes toggle buttons, selector, etc. A demo page is also provided to browse them: localhost:5000/#/demo-components - ## API of Che Each call to the Che API shouldn't be made directly from the controller of the page. -For that, it has to use Che API fatories which are handling the job (with promises operations) +For that, it has to use Che API factories which are handling the job (with promises operations) By injecting 'cheAPI' inside a controller, all operations can be called. -for example cheAPI.getWorkspace().getWorkspaces() for getting the array of the current workspaces of the user +for example `cheAPI.getWorkspace().getWorkspaces()` for getting the array of the current workspaces of the user Mocks are also provided for the Che API, allowing to emulate a real backend for unit tests or e2e tests +## Configurability +The `configuration.menu.disabled` field in [product.json](/src/assets/branding/product.json) allows users to list there menu entries they want to hide in left navigation bar. Along with that corresponding routes also will be disabled. +Available values are `'administration'`, `'factories'`, `'getstarted'`, `'organizations'`, `'stacks'`. + +```json +// product.json +{ + // disables the `Organizations` menu item and prevents opening views + // with list of available organizations or an organization details + "configuration": { + "menu": { + "disabled": ["organizations"] + } + } +} +``` diff --git a/dashboard/src/app/administration/administration-config.service.ts b/dashboard/src/app/administration/administration-config.service.ts new file mode 100644 index 00000000000..579d4e7ad68 --- /dev/null +++ b/dashboard/src/app/administration/administration-config.service.ts @@ -0,0 +1,33 @@ +/* + * Copyright (c) 2015-2018 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; + +export class AdministrationConfigService { + + static $inject = [ + 'cheDashboardConfigurationService' + ]; + + private cheDashboardConfigurationService: CheDashboardConfigurationService; + + constructor( + cheDashboardConfigurationService: CheDashboardConfigurationService, + ) { + this.cheDashboardConfigurationService = cheDashboardConfigurationService; + } + + allowAdministrationRoutes(): ng.IPromise { + return this.cheDashboardConfigurationService.allowRoutes('administration'); + } + +} diff --git a/dashboard/src/app/administration/administration-config.ts b/dashboard/src/app/administration/administration-config.ts index a79f9465f9f..18f60394a94 100644 --- a/dashboard/src/app/administration/administration-config.ts +++ b/dashboard/src/app/administration/administration-config.ts @@ -11,11 +11,10 @@ */ 'use strict'; - import {DockerRegistryList} from './docker-registry/docker-registry-list/docker-registry-list.directive'; import {DockerRegistryListController} from './docker-registry/docker-registry-list/docker-registry-list.controller'; import {EditRegistryController} from './docker-registry/docker-registry-list/edit-registry/edit-registry.controller'; - +import { AdministrationConfigService } from './administration-config.service'; export class AdministrationConfig { @@ -25,11 +24,20 @@ export class AdministrationConfig { register.controller('EditRegistryController', EditRegistryController); + register.service('administrationConfigService', AdministrationConfigService); + // config routes register.app.config(['$routeProvider', ($routeProvider: che.route.IRouteProvider) => { $routeProvider.accessWhen('/administration', { title: 'Administration', - templateUrl: 'app/administration/administration.html' + templateUrl: 'app/administration/administration.html', + resolve: { + init: [ + 'administrationConfigService', + (svc: AdministrationConfigService) => { + return svc.allowAdministrationRoutes(); + }] + } }); }]); diff --git a/dashboard/src/app/dashboard/dashboard-config.ts b/dashboard/src/app/dashboard/dashboard-config.ts index 200c9d98ae3..501d2e159ba 100644 --- a/dashboard/src/app/dashboard/dashboard-config.ts +++ b/dashboard/src/app/dashboard/dashboard-config.ts @@ -38,7 +38,7 @@ export class DashboardConfig { const defer = $q.defer(); cheWorkspace.fetchWorkspaces().then(() => { if (cheWorkspace.getWorkspaces().length === 0) { - $window.open(MENU_ITEM.getStarted, '_self'); + $window.open(MENU_ITEM.getstarted, '_self'); defer.reject(); } else { defer.resolve(); diff --git a/dashboard/src/app/factories/factories-config.ts b/dashboard/src/app/factories/factories-config.ts index f7904734e3b..c88a8471596 100644 --- a/dashboard/src/app/factories/factories-config.ts +++ b/dashboard/src/app/factories/factories-config.ts @@ -11,7 +11,6 @@ */ 'use strict'; - import {FactoryDetailsConfig} from './factory-details/factory-details-config'; import {CreateFactoryConfig} from './create-factory/create-factory-config'; import {LastFactoriesConfig} from './last-factories/last-factories-config'; @@ -20,6 +19,7 @@ import {FactoryItemController} from './list-factories/factory-item/factory-item. import {CheFactoryItem} from './list-factories/factory-item/factory-item.directive'; import {LoadFactoryController} from './load-factory/load-factory.controller'; import {LoadFactoryService} from './load-factory/load-factory.service'; +import { FactoryConfigService } from './factory-config.service'; export class FactoryConfig { @@ -32,27 +32,44 @@ export class FactoryConfig { register.controller('LoadFactoryController', LoadFactoryController); register.service('loadFactoryService', LoadFactoryService); + register.service('factoryConfigService', FactoryConfigService); + // config routes register.app.config(['$routeProvider', ($routeProvider: che.route.IRouteProvider) => { - $routeProvider.accessWhen('/factories', { - title: 'Factories', - templateUrl: 'app/factories/list-factories/list-factories.html', - controller: 'ListFactoriesController', - controllerAs: 'listFactoriesCtrl' - }) + $routeProvider + .accessWhen('/factories', { + title: 'Factories', + templateUrl: 'app/factories/list-factories/list-factories.html', + controller: 'ListFactoriesController', + controllerAs: 'listFactoriesCtrl', + resolve: { + initData: ['factoryConfigService', (svc: FactoryConfigService) => { + return svc.allowFactoriesRoutes(); + }] + } + }) .accessWhen('/load-factory', { title: 'Load Factory', templateUrl: 'app/factories/load-factory/load-factory.html', controller: 'LoadFactoryController', - controllerAs: 'loadFactoryController' + controllerAs: 'loadFactoryController', + resolve: { + initData: ['factoryConfigService', (svc: FactoryConfigService) => { + return svc.allowFactoriesRoutes(); + }] + } }) - .accessWhen('/load-factory/:id', { - title: 'Load Factory', - templateUrl: 'app/factories/load-factory/load-factory.html', - controller: 'LoadFactoryController', - controllerAs: 'loadFactoryController' - }); - + .accessWhen('/load-factory/:id', { + title: 'Load Factory', + templateUrl: 'app/factories/load-factory/load-factory.html', + controller: 'LoadFactoryController', + controllerAs: 'loadFactoryController', + resolve: { + initData: ['factoryConfigService', (svc: FactoryConfigService) => { + return svc.allowFactoriesRoutes(); + }] + } + }); }]); // config files @@ -63,4 +80,3 @@ export class FactoryConfig { /* tslint:enable */ } } - diff --git a/dashboard/src/app/factories/factory-config.service.ts b/dashboard/src/app/factories/factory-config.service.ts new file mode 100644 index 00000000000..52d51214839 --- /dev/null +++ b/dashboard/src/app/factories/factory-config.service.ts @@ -0,0 +1,33 @@ +/* + * Copyright (c) 2015-2018 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; + +export class FactoryConfigService { + + static $inject = [ + 'cheDashboardConfigurationService' + ]; + + private cheDashboardConfigurationService: CheDashboardConfigurationService; + + constructor( + cheDashboardConfigurationService: CheDashboardConfigurationService, + ) { + this.cheDashboardConfigurationService = cheDashboardConfigurationService; + } + + allowFactoriesRoutes(): ng.IPromise { + return this.cheDashboardConfigurationService.allowRoutes('factories'); + } + +} diff --git a/dashboard/src/app/factories/factory-details/factory-details-config.ts b/dashboard/src/app/factories/factory-details/factory-details-config.ts index 19cbe4e453a..c9ccfc82881 100644 --- a/dashboard/src/app/factories/factory-details/factory-details-config.ts +++ b/dashboard/src/app/factories/factory-details/factory-details-config.ts @@ -13,7 +13,7 @@ import {FactoryDetailsController} from '../factory-details/factory-details.controller'; import {InformationTabConfig} from './information-tab/information-tab-config'; - +import { FactoryConfigService } from '../factory-config.service'; export class FactoryDetailsConfig { @@ -26,7 +26,12 @@ export class FactoryDetailsConfig { title: 'Factory', templateUrl: 'app/factories/factory-details/factory-details.html', controller: 'FactoryDetailsController', - controllerAs: 'factoryDetailsController' + controllerAs: 'factoryDetailsController', + resolve: { + initData: ['factoryConfigService', (svc: FactoryConfigService) => { + return svc.allowFactoriesRoutes(); + }] + } }; $routeProvider.accessWhen('/factory/:id', locationProvider) diff --git a/dashboard/src/app/get-started/get-started-config.service.ts b/dashboard/src/app/get-started/get-started-config.service.ts new file mode 100644 index 00000000000..e48e0df6bf1 --- /dev/null +++ b/dashboard/src/app/get-started/get-started-config.service.ts @@ -0,0 +1,33 @@ +/* + * Copyright (c) 2015-2018 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; + +export class GetStartedConfigService { + + static $inject = [ + 'cheDashboardConfigurationService' + ]; + + private cheDashboardConfigurationService: CheDashboardConfigurationService; + + constructor( + cheDashboardConfigurationService: CheDashboardConfigurationService, + ) { + this.cheDashboardConfigurationService = cheDashboardConfigurationService; + } + + allowGetStartedRoutes(): ng.IPromise { + return this.cheDashboardConfigurationService.allowRoutes('getstarted'); + } + +} diff --git a/dashboard/src/app/get-started/get-started-config.ts b/dashboard/src/app/get-started/get-started-config.ts index 66c6673f8b8..51bfa40ca2e 100644 --- a/dashboard/src/app/get-started/get-started-config.ts +++ b/dashboard/src/app/get-started/get-started-config.ts @@ -13,9 +13,10 @@ import {TemplateListController} from './template-list/template-list.controller'; import {Template} from './template/template.directive'; +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; +import { GetStartedConfigService } from './get-started-config.service'; /** - * @ngdoc controller * @name getStarted:GetStartedConfig * @description This class is used for configuring all get started devfiles. * @author Oleksii Orel @@ -27,13 +28,20 @@ export class GetStartedConfig { register.controller('TemplateListController', TemplateListController); + register.service('getStartedConfigService', GetStartedConfigService); + // config routes register.app.config(['$routeProvider', ($routeProvider: any) => { $routeProvider.accessWhen('/getstarted', { title: 'Get Started', templateUrl: 'app/get-started/template-list/template-list.html', controller: 'TemplateListController', - controllerAs: 'templateListController' + controllerAs: 'templateListController', + resolve: { + initData: ['getStartedConfigService', (svc: GetStartedConfigService) => { + return svc.allowGetStartedRoutes(); + }] + } }); }]); } diff --git a/dashboard/src/app/navbar/navbar.controller.ts b/dashboard/src/app/navbar/navbar.controller.ts index e063dadaeb6..095a7ca5216 100644 --- a/dashboard/src/app/navbar/navbar.controller.ts +++ b/dashboard/src/app/navbar/navbar.controller.ts @@ -13,30 +13,36 @@ import {CheAPI} from '../../components/api/che-api.factory'; import {CheKeycloak} from '../../components/api/che-keycloak.factory'; import {CheService} from '../../components/api/che-service.factory'; +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; -export const MENU_ITEM = { - dashboard: '#/', - getStarted: '#/getstarted', - workspaces: '#/workspaces', - stacks: '#/stacks', - factories: '#/factories', +type ConfigurableMenu = { [key in che.ConfigurableMenuItem ]: string }; + +const CONFIGURABLE_MENU: ConfigurableMenu = { administration: '#/administration', - usermanagement: '#/admin/usermanagement', + factories: '#/factories', + getstarted: '#/getstarted', organizations: '#/organizations', - account: '#/account' + stacks: '#/stacks', }; +export const MENU_ITEM = angular.extend({ + account: '#/account', + dashboard: '#/', + usermanagement: '#/admin/usermanagement', + workspaces: '#/workspaces', +}, CONFIGURABLE_MENU); + export class CheNavBarController { - static $inject = ['$mdSidenav', - '$scope', + static $inject = [ '$location', - '$route', + '$scope', 'cheAPI', - '$window', - 'chePermissions', + 'cheDashboardConfigurationService', 'cheKeycloak', - 'cheService']; + 'chePermissions', + 'cheService', + ]; menuItemUrl = MENU_ITEM; @@ -55,19 +61,18 @@ export class CheNavBarController { } ]; - private $mdSidenav: ng.material.ISidenavService; - private $scope: ng.IScope; - private $window: ng.IWindowService; private $location: ng.ILocationService; - private $route: ng.route.IRouteService; + private $scope: ng.IScope; private cheAPI: CheAPI; - private profile: che.IProfile; + private cheDashboardConfigurationService: CheDashboardConfigurationService; + private cheKeycloak: CheKeycloak; private chePermissions: che.api.IChePermissions; + private cheService: CheService; + + private profile: che.IProfile; private userServices: che.IUserServices; private hasPersonalAccount: boolean; private organizations: Array; - private cheKeycloak: CheKeycloak; - private cheService: CheService; private isPermissionServiceAvailable: boolean; private isKeycloackPresent: boolean; @@ -77,23 +82,21 @@ export class CheNavBarController { /** * Default constructor */ - constructor($mdSidenav: ng.material.ISidenavService, - $scope: ng.IScope, - $location: ng.ILocationService, - $route: ng.route.IRouteService, - cheAPI: CheAPI, - $window: ng.IWindowService, - chePermissions: che.api.IChePermissions, - cheKeycloak: CheKeycloak, - cheService: CheService) { - this.$mdSidenav = $mdSidenav; - this.$scope = $scope; + constructor( + $location: ng.ILocationService, + $scope: ng.IScope, + cheAPI: CheAPI, + cheDashboardConfigurationService: CheDashboardConfigurationService, + cheKeycloak: CheKeycloak, + chePermissions: che.api.IChePermissions, + cheService: CheService, + ) { this.$location = $location; - this.$route = $route; + this.$scope = $scope; this.cheAPI = cheAPI; - this.$window = $window; - this.chePermissions = chePermissions; + this.cheDashboardConfigurationService = cheDashboardConfigurationService; this.cheKeycloak = cheKeycloak; + this.chePermissions = chePermissions; this.cheService = cheService; const handler = (workspaces: Array) => { @@ -219,6 +222,10 @@ export class CheNavBarController { return rootOrganizations.length; } + showMenuItem(menuItem: che.ConfigurableMenuItem | string): boolean { + return this.cheDashboardConfigurationService.allowedMenuItem(menuItem); + } + /** * Opens user profile in new browser page. */ @@ -232,4 +239,5 @@ export class CheNavBarController { private logout(): void { this.cheKeycloak.logout(); } + } diff --git a/dashboard/src/app/navbar/navbar.html b/dashboard/src/app/navbar/navbar.html index 8840769dafb..13ec4020189 100644 --- a/dashboard/src/app/navbar/navbar.html +++ b/dashboard/src/app/navbar/navbar.html @@ -29,7 +29,9 @@
- + + @@ -39,8 +41,10 @@
- - + +
@@ -49,7 +53,9 @@
- + + - + + - + + - + + + + ng-if="navbarController.showMenuItem('organizations') && + navbarController.isPermissionServiceAvailable && + !navbarController.userServices.hasInstallationManagerService && + !navbarController.hasPersonalAccount">
diff --git a/dashboard/src/app/organizations/organizations-config.service.spec.ts b/dashboard/src/app/organizations/organizations-config.service.spec.ts index e4f71858fb9..be0071215c2 100644 --- a/dashboard/src/app/organizations/organizations-config.service.spec.ts +++ b/dashboard/src/app/organizations/organizations-config.service.spec.ts @@ -84,7 +84,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path('/admin/create-organization'); - $rootScope.$digest(); const service = $injector.invoke(resolveBlock); @@ -92,6 +91,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalledWith({ @@ -137,7 +137,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path(`/admin/create-organization/${parentOrg.qualifiedName}`); - $rootScope.$digest(); const service = $injector.invoke(resolveBlock); @@ -145,6 +144,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalled(); @@ -169,7 +169,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path(`/admin/create-organization/${parentOrg.qualifiedName}`); - $rootScope.$digest(); // make response for organizations list fail $httpBackend.expect('GET', /\/api\/organization(\?.*$)?/).respond(500, [], {message: 'response failed'}); @@ -180,6 +179,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalledWith({ @@ -253,7 +253,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path(`/organization/${parentOrg.qualifiedName}`); - $rootScope.$digest(); const service = $injector.invoke(resolveBlock); @@ -261,6 +260,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalled(); @@ -288,7 +288,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path(`/organization/${parentOrg.qualifiedName}`); - $rootScope.$digest(); // make response for organizations list fail $httpBackend.expect('GET', /\/api\/organization(\?.*$)?/).respond(500, [], {message: 'response failed'}); @@ -299,6 +298,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalled(); @@ -345,7 +345,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path(`/organization/${subOrg.qualifiedName}`); - $rootScope.$digest(); const service = $injector.invoke(resolveBlock); @@ -353,6 +352,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalled(); @@ -380,7 +380,6 @@ describe('OrganizationsConfig >', () => { spyOn(callbacks, 'testReject'); $location.path(`/organization/${subOrg.qualifiedName}`); - $rootScope.$digest(); // make response for organizations list fail $httpBackend.expect('GET', /\/api\/organization(\?.*$)?/).respond(500, [], {message: 'response failed'}); @@ -391,6 +390,7 @@ describe('OrganizationsConfig >', () => { .then(callbacks.testResolve) .catch(callbacks.testReject); + $rootScope.$digest(); $httpBackend.flush(); expect(callbacks.testResolve).toHaveBeenCalled(); diff --git a/dashboard/src/app/organizations/organizations-config.service.ts b/dashboard/src/app/organizations/organizations-config.service.ts index 6f77a46b847..244a86ebaa1 100644 --- a/dashboard/src/app/organizations/organizations-config.service.ts +++ b/dashboard/src/app/organizations/organizations-config.service.ts @@ -11,9 +11,20 @@ */ 'use strict'; +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; + export class OrganizationsConfigService { - static $inject = ['$log', '$q', '$route', 'cheOrganization', 'chePermissions', 'cheResourcesDistribution', 'cheUser']; + static $inject = [ + '$log', + '$q', + '$route', + 'cheDashboardConfigurationService', + 'cheOrganization', + 'chePermissions', + 'cheResourcesDistribution', + 'cheUser' + ]; /** * Log service. @@ -43,19 +54,28 @@ export class OrganizationsConfigService { * User profile API interaction. */ private cheUser: any; + /** + * Dashboard configuration service. + */ + private cheDashboardConfigurationService: CheDashboardConfigurationService; - /** Default constructor that is using resource injection + /** + * Default constructor that is using resource injection */ - constructor($log: ng.ILogService, - $q: ng.IQService, - $route: ng.route.IRouteService, - cheOrganization: che.api.ICheOrganization, - chePermissions: che.api.IChePermissions, - cheResourcesDistribution: che.api.ICheResourcesDistribution, - cheUser: any) { + constructor( + $log: ng.ILogService, + $q: ng.IQService, + $route: ng.route.IRouteService, + cheDashboardConfigurationService: CheDashboardConfigurationService, + cheOrganization: che.api.ICheOrganization, + chePermissions: che.api.IChePermissions, + cheResourcesDistribution: che.api.ICheResourcesDistribution, + cheUser: any + ) { this.$log = $log; this.$q = $q; this.$route = $route; + this.cheDashboardConfigurationService = cheDashboardConfigurationService; this.cheOrganization = cheOrganization; this.chePermissions = chePermissions; this.cheResourcesDistribution = cheResourcesDistribution; @@ -231,6 +251,10 @@ export class OrganizationsConfigService { return this.$q.all(userPromises); } + allowOrganizationsRoutes(): ng.IPromise { + return this.cheDashboardConfigurationService.allowRoutes('organizations'); + } + /** * Returns promise to resolve route for organization details page. * diff --git a/dashboard/src/app/organizations/organizations-config.ts b/dashboard/src/app/organizations/organizations-config.ts index b7c360d05ea..29b9ee58da5 100644 --- a/dashboard/src/app/organizations/organizations-config.ts +++ b/dashboard/src/app/organizations/organizations-config.ts @@ -79,7 +79,9 @@ export class OrganizationsConfig { controllerAs: 'organizationDetailsController', resolve: { initData: ['organizationsConfigService', (organizationConfigService: OrganizationsConfigService) => { - return organizationConfigService.resolveOrganizationDetailsRoute(); + return organizationConfigService.allowOrganizationsRoutes().then(() => { + return organizationConfigService.resolveOrganizationDetailsRoute(); + }); }] } }; @@ -91,7 +93,9 @@ export class OrganizationsConfig { controllerAs: 'createOrganizationController', resolve: { initData: ['organizationsConfigService', (organizationsConfigService: OrganizationsConfigService) => { - return organizationsConfigService.resolveCreateOrganizationRoute(); + return organizationsConfigService.allowOrganizationsRoutes().then(() => { + return organizationsConfigService.resolveCreateOrganizationRoute(); + }); }] } }; @@ -102,7 +106,12 @@ export class OrganizationsConfig { title: 'organizations', templateUrl: 'app/organizations/organizations.html', controller: 'OrganizationsController', - controllerAs: 'organizationsController' + controllerAs: 'organizationsController', + resolve: { + initData: ['organizationsConfigService', (organizationsConfigService: OrganizationsConfigService) => { + return organizationsConfigService.allowOrganizationsRoutes(); + }] + } }) .accessWhen('/admin/create-organization', createOrganizationLocationProvider) .accessWhen('/admin/create-organization/:parentQualifiedName*', createOrganizationLocationProvider) diff --git a/dashboard/src/app/stacks/stacks-config.service.ts b/dashboard/src/app/stacks/stacks-config.service.ts new file mode 100644 index 00000000000..8d45f02b66f --- /dev/null +++ b/dashboard/src/app/stacks/stacks-config.service.ts @@ -0,0 +1,33 @@ +/* + * Copyright (c) 2015-2018 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ + +import { CheDashboardConfigurationService } from '../../components/branding/che-dashboard-configuration.service'; + +export class StacksConfigService { + + static $inject = [ + 'cheDashboardConfigurationService' + ]; + + private cheDashboardConfigurationService: CheDashboardConfigurationService; + + constructor( + cheDashboardConfigurationService: CheDashboardConfigurationService, + ) { + this.cheDashboardConfigurationService = cheDashboardConfigurationService; + } + + allowStacksRoutes(): ng.IPromise { + return this.cheDashboardConfigurationService.allowRoutes('stacks'); + } + +} diff --git a/dashboard/src/app/stacks/stacks-config.ts b/dashboard/src/app/stacks/stacks-config.ts index 5e889ee4bf2..2debb52eff5 100644 --- a/dashboard/src/app/stacks/stacks-config.ts +++ b/dashboard/src/app/stacks/stacks-config.ts @@ -15,6 +15,7 @@ import {ListStacksController} from './list-stacks/list-stacks.controller'; import {StackController, IStackInitData} from './stack-details/stack.controller'; import {DevfileRegistry, IDevfileMetaData} from '../../components/api/devfile-registry.factory'; import {CheWorkspace} from '../../components/api/workspace/che-workspace.factory'; +import { StacksConfigService } from './stacks-config.service'; /** * @ngdoc controller @@ -28,13 +29,20 @@ export class StacksConfig { register.controller('ListStacksController', ListStacksController); register.controller('StackController', StackController); + register.service('stacksConfigService', StacksConfigService); + // config routes - register.app.config(['$routeProvider', ($routeProvider: any) => { + register.app.config(['$routeProvider', ($routeProvider: che.route.IRouteProvider) => { $routeProvider.accessWhen('/stacks', { title: 'Stacks', templateUrl: 'app/stacks/list-stacks/list-stacks.html', controller: 'ListStacksController', - controllerAs: 'listStacksController' + controllerAs: 'listStacksController', + resolve: { + initData: ['stacksConfigService', (svc: StacksConfigService) => { + return svc.allowStacksRoutes(); + }] + } }) .accessWhen('/stack/:stackId*', { title: (params: any) => { @@ -44,19 +52,21 @@ export class StacksConfig { controller: 'StackController', controllerAs: 'stackController', resolve: { - initData: ['$q', '$route', 'cheWorkspace', 'devfileRegistry', ($q: ng.IQService, $route: ng.route.IRouteService, cheWorkspace: CheWorkspace, devfileRegistry: DevfileRegistry) => { - const {stackId} = $route.current.params; - const selfLink = devfileRegistry.devfileIdToSelfLink(stackId); - const location = cheWorkspace.getWorkspaceSettings().cheWorkspaceDevfileRegistryUrl; - - return devfileRegistry.fetchDevfiles(location).then((devfileMetaDatas: Array) => { + initData: ['$q', '$route', 'cheWorkspace', 'devfileRegistry', 'stacksConfigService', ($q: ng.IQService, $route: ng.route.IRouteService, cheWorkspace: CheWorkspace, devfileRegistry: DevfileRegistry, stacksConfigService: StacksConfigService) => { + return stacksConfigService.allowStacksRoutes().then(() => { + const location = cheWorkspace.getWorkspaceSettings().cheWorkspaceDevfileRegistryUrl; + return devfileRegistry.fetchDevfiles(location); + }).then((devfileMetaDatas: Array) => { + const location = cheWorkspace.getWorkspaceSettings().cheWorkspaceDevfileRegistryUrl; + const { stackId } = $route.current.params; + const selfLink = devfileRegistry.devfileIdToSelfLink(stackId); const devfileMetaData = devfileMetaDatas.find((devfileMetaData: IDevfileMetaData) => devfileMetaData.links.self === selfLink); if (!devfileMetaData) { return $q.reject(); } return devfileRegistry.fetchDevfile(location, selfLink).then(() => { const devfileContent = devfileRegistry.getDevfile(location, selfLink); - return {devfileMetaData, devfileContent}; + return { devfileMetaData, devfileContent }; }); }); }] diff --git a/dashboard/src/app/workspaces/workspace-details/workspace-details.directive.spec.ts b/dashboard/src/app/workspaces/workspace-details/workspace-details.directive.spec.ts index c328e133c81..07cadc5628c 100644 --- a/dashboard/src/app/workspaces/workspace-details/workspace-details.directive.spec.ts +++ b/dashboard/src/app/workspaces/workspace-details/workspace-details.directive.spec.ts @@ -235,9 +235,16 @@ describe(`WorkspaceDetailsController >`, () => { return { getDocs: () => { const converting = 'converting-a-che-6-workspace-to-a-che-7-devfile'; - return {converting}; + return { converting }; + }, + getConfiguration: () => { + return { + menu: { + disabled: [] + } + }; } - } + }; }) // terminal directives which prevent to execute an original ones .directive('mdTab', function () { diff --git a/dashboard/src/components/branding/che-branding-config.ts b/dashboard/src/components/branding/che-branding-config.ts index 9694201d1f8..fd5bd08915e 100644 --- a/dashboard/src/components/branding/che-branding-config.ts +++ b/dashboard/src/components/branding/che-branding-config.ts @@ -12,12 +12,14 @@ 'use strict'; import {CheBranding} from './che-branding.factory'; +import { CheDashboardConfigurationService } from './che-dashboard-configuration.service'; export class CheBrandingConfig { constructor(register: che.IRegisterService) { // register this factory register.factory('cheBranding', CheBranding); + register.service('cheDashboardConfigurationService', CheDashboardConfigurationService); } } diff --git a/dashboard/src/components/branding/che-branding.factory.ts b/dashboard/src/components/branding/che-branding.factory.ts index 2c821deda9a..ceb7abfdcee 100644 --- a/dashboard/src/components/branding/che-branding.factory.ts +++ b/dashboard/src/components/branding/che-branding.factory.ts @@ -28,23 +28,36 @@ interface IBranding { configName?: string; name?: string; }; - docs?: { - devfile?: string; - workspace?: string; - factory?: string; - organization?: string; - general?: string; - converting?: string; - }; - workspace?: { - priorityStacks?: Array; - defaultStack?: string; - creationLink?: string; + docs?: IBrandingDocs; + workspace?: IBrandingWorkspace; + footer?: IBrandingFooter; + configuration?: IBrandingConfiguration; +} + +interface IBrandingDocs { + devfile?: string; + workspace?: string; + factory?: string; + organization?: string; + general?: string; + converting?: string; +} +interface IBrandingWorkspace { + priorityStacks?: Array; + defaultStack?: string; + creationLink?: string; +} +interface IBrandingFooter { + content?: string; + links?: Array<{ title: string, location: string }>; + email?: { title: string, address: string, subject: string }; +} +interface IBrandingConfiguration { + menu: { + disabled: che.ConfigurableMenuItem[]; }; - footer?: { - content?: string; - links?: Array<{title: string, location: string}>; - email?: {title: string, address: string, subject: string}; + misc: { + idePrefetch?: string[]; }; } @@ -76,28 +89,48 @@ const DEFAULT_WEBSOCKET_CONTEXT = '/api/websocket'; */ export class CheBranding { - static $inject = ['$http', '$rootScope', 'cheService']; + static $inject = [ + '$http', + '$q', + '$rootScope', + 'cheService' + ]; - private $rootScope: che.IRootScopeService; private $http: ng.IHttpService; + private $q: ng.IQService; + private $rootScope: che.IRootScopeService; private cheService: CheService; + private branding: IBranding; private callbacks: Map = new Map(); + private _readyDeferred: ng.IDeferred; /** * Default constructor that is using resource */ - constructor($http: ng.IHttpService, $rootScope: che.IRootScopeService, cheService: CheService) { + constructor( + $http: ng.IHttpService, + $q: ng.IQService, + $rootScope: che.IRootScopeService, + cheService: CheService + ) { this.$http = $http; + this.$q = $q; this.$rootScope = $rootScope; this.cheService = cheService; + this.branding = {}; + this._readyDeferred = this.$q.defer(); this.initialize(); this.updateData(); this.updateVersion(); } + get ready(): ng.IPromise { + return this._readyDeferred.promise; + } + initialize(): void { this.$rootScope.branding = { title: this.getProductName(), @@ -114,7 +147,8 @@ export class CheBranding { oauthDocs: this.getOauthDocs(), cli: this.getCLI(), docs: this.getDocs(), - workspace: this.getWorkspace() + workspace: this.getWorkspace(), + configuration: this.getConfiguration(), }; } @@ -140,6 +174,7 @@ export class CheBranding { callback(this.$rootScope.branding); } }); + this._readyDeferred.resolve(); }); } @@ -256,10 +291,8 @@ export class CheBranding { /** * Returns footer additional elements (email button, content, button links). - * - * @returns {any} additional elements (email button, content, button links). */ - getFooter(): {content?: string; links?: Array<{title: string, location: string}>; email: {title: string, address: string, subject: string}} { + getFooter(): IBrandingFooter { return { content: this.branding.footer && this.branding.footer.content ? this.branding.footer.content : '', links: this.branding.footer && this.branding.footer.links ? this.branding.footer.links : [], @@ -269,7 +302,6 @@ export class CheBranding { /** * Returns object with configName and name. - * @returns {{configName: string, name: string}} */ getCLI(): { configName: string; name: string } { return { @@ -280,9 +312,8 @@ export class CheBranding { /** * Returns object with docs URLs. - * @returns {{devfile: string, workspace: string, factory: string, organization: string, general: string, converting: string}} */ - getDocs(): { devfile: string; workspace: string; factory: string; organization: string; general: string, converting: string} { + getDocs(): IBrandingDocs { return { devfile: this.branding.docs && this.branding.docs.devfile ? this.branding.docs.devfile : DEFAULT_DOCS_DEVFILE, workspace: this.branding.docs && this.branding.docs.workspace ? this.branding.docs.workspace : DEFAULT_DOCS_WORKSPACE, @@ -295,13 +326,35 @@ export class CheBranding { /** * Returns object with workspace dedicated data. - * @returns {{stack: string, workspace: string}} */ - getWorkspace(): { priorityStacks: Array; defaultStack: string, creationLink: string} { + getWorkspace(): IBrandingWorkspace { return { priorityStacks: this.branding.workspace && this.branding.workspace.priorityStacks ? this.branding.workspace.priorityStacks : DEFAULT_WORKSPACE_PRIORITY_STACKS, defaultStack: this.branding.workspace && this.branding.workspace.defaultStack ? this.branding.workspace.defaultStack : DEFAULT_WORKSPACE_DEFAULT_STACK, creationLink: this.branding.workspace && this.branding.workspace.creationLink ? this.branding.workspace.creationLink : DEFAULT_WORKSPACE_CREATION_LINK }; } + + /** + * Returns object with UD configuration options. + */ + getConfiguration(): IBrandingConfiguration { + return { + menu: { + disabled: + this.branding.configuration && + this.branding.configuration.menu && this.branding.configuration.menu.disabled + ? this.branding.configuration.menu.disabled + : [] + }, + misc: { + idePrefetch: + this.branding.configuration && + this.branding.configuration.misc && this.branding.configuration.misc.idePrefetch + ? this.branding.configuration.misc.idePrefetch + : [] + } + }; + } + } diff --git a/dashboard/src/components/branding/che-dashboard-configuration.service.ts b/dashboard/src/components/branding/che-dashboard-configuration.service.ts new file mode 100644 index 00000000000..a0507d2c197 --- /dev/null +++ b/dashboard/src/components/branding/che-dashboard-configuration.service.ts @@ -0,0 +1,51 @@ +/* + * Copyright (c) 2015-2018 Red Hat, Inc. + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + * + * Contributors: + * Red Hat, Inc. - initial API and implementation + */ +'use strict'; + +import { CheBranding } from './che-branding.factory'; + +/** + * This class handles configuration data of Dashboard. + * @author Oleksii Kurinnyi + */ +export class CheDashboardConfigurationService { + + static $inject = [ + '$q', + 'cheBranding', + ]; + + $q: ng.IQService; + cheBranding: CheBranding; + + constructor( + $q: ng.IQService, + cheBranding: CheBranding, + ) { + this.$q = $q; + this.cheBranding = cheBranding; + } + + allowedMenuItem(menuItem: che.ConfigurableMenuItem | string): boolean { + const disabledItems = this.cheBranding.getConfiguration().menu.disabled; + return (disabledItems as string[]).indexOf(menuItem) === -1; + } + + allowRoutes(menuItem: che.ConfigurableMenuItem): ng.IPromise { + return this.cheBranding.ready.then(() => { + if (this.allowedMenuItem(menuItem) === false) { + return this.$q.reject(); + } + }); + } + +} diff --git a/dashboard/src/components/typings/che.d.ts b/dashboard/src/components/typings/che.d.ts index 43f339ed5f3..4154d11c434 100755 --- a/dashboard/src/components/typings/che.d.ts +++ b/dashboard/src/components/typings/che.d.ts @@ -15,6 +15,8 @@ declare module 'che' { declare namespace che { + export type ConfigurableMenuItem = 'administration' | 'factories' | 'getstarted' | 'organizations' | 'stacks'; + export interface IRootScopeService extends ng.IRootScopeService { hideLoader: boolean; showIDE: boolean;