Show the warning message in the case with deprecated plugins

dashboard/Dockerfile

@@ -14,16 +14,18 @@
 #  $ docker run --rm eclipse-che-dashboard | tar -C target/ -zxf -
 FROM node:8.16.0
 
-RUN apt-get update && \
-    apt-get install -y git \
+RUN apt-get update \
+    && apt-get install -y git \
     && apt-get -y clean \
     && rm -rf /var/lib/apt/lists/*
+
 COPY package.json /dashboard/
 COPY yarn.lock /dashboard/
 COPY typings.json /dashboard/
 WORKDIR /dashboard
 RUN yarn install --ignore-optional
 COPY . /dashboard/
+
 RUN yarn build && yarn test
 RUN cd /dashboard/target/ && tar zcf /tmp/dashboard.tar.gz dist/
 

dashboard/src/app/factories/factory-details/factory-details.html

@@ -11,8 +11,8 @@
       Red Hat, Inc. - initial API and implementation
 
 -->
-<che-description ng-hide="factoryDetailsController.isSupportedVersion()" class="workspace-details-warning-info">
-  This factory is using old workspace definition format which is not compatible anymore. 
+<che-description ng-hide="!factoryDetailsController.factory || factoryDetailsController.isSupportedVersion()" class="workspace-details-warning-info">
+  This factory is using old workspace definition format which is not compatible anymore.
   Please follow the <a ng-href="{{branding.docs.workspace}}" target="_blank">documentation</a> to update the definition of the workspace and benefits from the latest capabilities.
 </che-description>
 <che-toolbar

dashboard/src/app/index.styl

@@ -75,7 +75,7 @@ label
   font-weight normal !important
 
 md-divider
-  border-top-color #353E5D !important
+  border-top-color #353E5D
   margin 0 10px
 
 md-toolbar
@@ -107,11 +107,15 @@ md-option:hover
       max-height calc(100vh - 30px)
 
 .progress-line
-  position absolute
-  left 0
-  right 0
-  height 5px
+  position relative
   z-index 80
+  width 100%
+  max-height 5px
+  md-progress-linear
+   position absolute
+   left 0
+   right 0
+   height 5px
 
 .main-page-loader
   position absolute

dashboard/src/app/workspaces/create-workspace/project-source-selector/edit-project/edit-project.styl

@@ -1,32 +1,22 @@
 .edit-project
-
   md-divider
-    border-top-color $box-border-color !important
-    margin 0
-    margin-top 21px
-
-.edit-project
-
+    border-top-color $box-border-color
   .edit-project-button
-
-    che-button-primary button.md-button.che-button.md-accent,
-    che-button-cancel-flat button.md-button.che-button.md-accent,
-    che-button-danger button.md-button.md-danger-theme.md-accent
-      padding-top 2px
-      margin 6px !important
-
-    che-button-cancel-flat button.md-button.che-button.md-accent,
-    che-button-danger button.md-button.md-danger-theme.md-accent
-      background-color $che-white-color !important
-      border none !important
-      box-shadow none !important
-
-      &[disabled] span
-        color $disabled-color !important
-
-    che-button-cancel-flat button.md-button.che-button.md-accent span
-      color $grey-input-label-color !important
-
-    che-button-danger button.md-button.md-danger-theme.md-accent span
+    button
+      margin 6px
+
+    che-button-cancel-flat,
+    che-button-danger
+      button
+        background-color $white-color !important
+        box-shadow none !important
+        border none
+        &[disabled]
+          color $disabled-color
+
+    che-button-cancel-flat button
+      color $grey-input-label-color
+
+    che-button-danger button
       color $error-color !important
 

dashboard/src/app/workspaces/list-workspaces/list-workspaces.html

@@ -14,9 +14,9 @@
 <che-toolbar che-title="Workspaces" border-none></che-toolbar>
 <che-description che-link-title="Learn more." che-link="{{branding.docs.workspace}}">A workspace is where your projects live and run. Create workspaces from stacks that define projects, runtimes, and commands.</che-description>
 <md-content md-scroll-y flex layout="column" md-theme="maincontent-theme">
-  <md-progress-linear md-mode="indeterminate" class="progress-line"
+  <div class="progress-line"><md-progress-linear md-mode="indeterminate"
                       ng-show="listWorkspacesCtrl.isInfoLoading || listWorkspacesCtrl.isRequestPending"></md-progress-linear>
-  <md-content flex class="workspace-list-content" ng-hide="listWorkspacesCtrl.isInfoLoading">
+  <md-content flex class="workspace-list-content" ng-hide="listWorkspacesCtrl.isInfoLoading"><div>
     <che-list-header che-input-placeholder="Search"
                      che-search-model="listWorkspacesCtrl.workspaceFilter.config.name"
                      che-on-search-change="listWorkspacesCtrl.onSearchChanged(str)"

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

@@ -16,6 +16,7 @@ import {WorkspaceDetailsService} from './workspace-details.service';
 import IdeSvc from '../../ide/ide.service';
 import {WorkspacesService} from '../workspaces.service';
 import {ICheEditModeOverlayConfig} from '../../../components/widget/edit-mode-overlay/che-edit-mode-overlay.directive';
+import {CheBranding} from '../../../components/branding/che-branding.factory';
 
 export  interface IInitData {
   namespaceId: string;
@@ -33,7 +34,7 @@ export  interface IInitData {
  */
 export class WorkspaceDetailsController {
 
-  static $inject = ['$location', '$log', '$scope', 'lodash', 'cheNotification', 'cheWorkspace', 'ideSvc', 'workspaceDetailsService', 'initData', '$timeout', 'workspacesService'];
+  static $inject = ['$location', '$log', '$sce', '$scope', 'lodash', 'cheNotification', 'cheWorkspace', 'ideSvc', 'workspaceDetailsService', 'initData', '$timeout', 'cheBranding', 'workspacesService'];
 
   /**
    * Overlay panel configuration.
@@ -43,6 +44,7 @@ export class WorkspaceDetailsController {
   workspacesService: WorkspacesService;
   private lodash: any;
   private $scope: ng.IScope;
+  private $sce: ng.ISCEService;
   private $log: ng.ILogService;
   private $location: ng.ILocationService;
   private $timeout: ng.ITimeoutService;
@@ -64,17 +66,27 @@ export class WorkspaceDetailsController {
   private tabsValidationTimeout: ng.IPromise<any>;
   private pluginRegistry: string;
   private TAB: Array<string>;
+  private cheBranding: CheBranding;
 
   /**
    * There are unsaved changes to apply (with restart) when is't <code>true</code>.
    */
   private unsavedChangesToApply: boolean;
+  /**
+   * There is selected deprecated editor when is't <code>true</code>.
+   */
+  private hasSelectedDeprecatedEditor: boolean;
+  /**
+   * There are selected deprecated plugins when is't <code>true</code>.
+   */
+  private hasSelectedDeprecatedPlugins: boolean;
 
   /**
    * Default constructor that is using resource injection
    */
   constructor($location: ng.ILocationService,
               $log: ng.ILogService,
+              $sce: ng.ISCEService,
               $scope: ng.IScope,
               lodash: any,
               cheNotification: CheNotification,
@@ -83,8 +95,10 @@ export class WorkspaceDetailsController {
               workspaceDetailsService: WorkspaceDetailsService,
               initData: IInitData,
               $timeout: ng.ITimeoutService,
+              cheBranding: CheBranding,
               workspacesService: WorkspacesService) {
     this.$log = $log;
+    this.$sce = $sce;
     this.$scope = $scope;
     this.$timeout = $timeout;
     this.$location = $location;
@@ -94,6 +108,7 @@ export class WorkspaceDetailsController {
     this.ideSvc = ideSvc;
     this.workspaceDetailsService = workspaceDetailsService;
     this.workspacesService = workspacesService;
+    this.cheBranding = cheBranding;
     this.pluginRegistry = cheWorkspace.getWorkspaceSettings() != null ? cheWorkspace.getWorkspaceSettings().cheWorkspacePluginRegistryUrl : null;
 
     if (!initData.workspaceDetails) {
@@ -116,12 +131,14 @@ export class WorkspaceDetailsController {
         this.workspaceDetails = angular.copy(newWorkspaceDetails);
       }
       this.checkEditMode();
+      this.updateDeprecatedInfo();
     };
     this.cheWorkspace.subscribeOnWorkspaceChange(initData.workspaceDetails.id, action);
 
     this.originWorkspaceDetails = angular.copy(initData.workspaceDetails);
     this.workspaceDetails = angular.copy(initData.workspaceDetails);
     this.checkEditMode();
+    this.updateDeprecatedInfo();
     this.TAB = this.workspaceDetails.config ? ['Overview', 'Projects', 'Containers', 'Servers', 'Env_Variables', 'Volumes', 'Config', 'SSH', 'Plugins', 'Editors'] : ['Overview', 'Projects', 'Plugins', 'Editors', 'Devfile'];
     this.updateTabs();
 
@@ -181,11 +198,11 @@ export class WorkspaceDetailsController {
     return this.workspacesService.isSupported(this.workspaceDetails);
   }
 
-  isSupportedVersion(): boolean {
+  get isSupportedVersion(): boolean {
     return this.workspacesService.isSupportedVersion(this.workspaceDetails);
   }
 
-  isSupportedRecipeType(): boolean {
+  get isSupportedRecipeType(): boolean {
     return this.workspacesService.isSupportedRecipeType(this.workspaceDetails);
   }
 
@@ -366,11 +383,11 @@ export class WorkspaceDetailsController {
    * @returns {string}
    */
   getOverlayMessage(failedTabs?: string[]): string {
-    if (!this.isSupportedRecipeType()) {
+    if (!this.isSupportedRecipeType) {
       return `Current infrastructure doesn't support this workspace recipe type.`;
     }
 
-    if (!this.isSupportedVersion()) {
+    if (!this.isSupportedVersion) {
       return `This workspace is using old definition format which is not compatible anymore.`;
     }
 
@@ -447,6 +464,8 @@ export class WorkspaceDetailsController {
       const failedTabs = this.checkForFailedTabs();
       // update overlay
       this.updateEditModeOverlayConfig(configIsDiffer, failedTabs);
+      // update info(editor and plugins)
+      this.updateDeprecatedInfo();
       // publish changes
       this.workspaceDetailsService.publishWorkspaceChange(this.workspaceDetails);
     }, 500);
@@ -586,4 +605,37 @@ export class WorkspaceDetailsController {
 
     return tabs.some((tabKey: string) => this.checkFormsNotValid(tabKey));
   }
+
+  /**
+   * Builds and returns the warning message for che-description(warning info) component.
+   *
+   * @returns {string}
+   */
+  get warningMessage(): any {
+    let message = '';
+
+    if (!this.isSupportedVersion) {
+      message += `This workspace is using old definition format which is not compatible anymore.
+      Please follow the <a href="${this.cheBranding.getDocs().converting}" target="_blank">documentation</a>
+      to update the definition of the workspace and benefits from the latest capabilities.`;
+    } else if (this.hasSelectedDeprecatedPlugins) {
+      message += `The workspace uses deprecated plugins${this.hasSelectedDeprecatedEditor ? ' and editor' : ''}.`;
+    } else if (this.hasSelectedDeprecatedEditor) {
+      message += `The workspace uses deprecated editor.`
+    }
+
+    return this.$sce.trustAsHtml(message);
+  }
+
+  get hasWarningMessage(): boolean {
+    return !this.isSupportedVersion || this.hasSelectedDeprecatedEditor || this.hasSelectedDeprecatedPlugins;
+  }
+
+  private updateDeprecatedInfo() {
+    const deprecatedEditor = this.workspaceDetailsService.getSelectedDeprecatedEditor(this.workspaceDetails);
+    this.hasSelectedDeprecatedEditor = deprecatedEditor !== '';
+
+    const deprecatedPlugins = this.workspaceDetailsService.getSelectedDeprecatedPlugins(this.workspaceDetails);
+    this.hasSelectedDeprecatedPlugins = deprecatedPlugins.length > 0;
+  }
 }

dashboard/src/app/workspaces/workspace-details/workspace-details.directive.spec.ts

@@ -210,18 +210,44 @@ describe(`WorkspaceDetailsController >`, () => {
         this.getSupportedRecipeTypes = () => {
           return ['dockerimage', 'dockerfile', 'compose'];
         };
+        this.fetchWorkspaceSettings = (): any => {
+          // todo: rework to use Angular promise instead of native one
+          return Promise.resolve({
+            cheWorkspacePluginRegistryUrl: 'cheWorkspacePluginRegistryUrl'
+          });
+        };
         this.getWorkspaceSettings = () => {
           return {};
         };
-
         this.getWorkspaceDataManager = () => {
           return {
             getName(data: che.IWorkspace): string {
               return 'name';
+            },
+            getEditor() {
+              return '';
+            },
+            getPlugins() {
+              return [];
             }
           };
         };
       })
+      .factory('pluginRegistry', function () {
+        return {
+          fetchPlugins: (url: string) => {
+            return $q.when([]);
+          }
+        }
+      })
+      .factory('cheBranding', function () {
+        return {
+          getDocs: () => {
+            const converting = 'converting-a-che-6-workspace-to-a-che-7-devfile';
+            return {converting};
+          }
+        }
+      })
       // terminal directives which prevent to execute an original ones
       .directive('mdTab', function () {
         // this directive produces timeout task which cannot be flushed