CHE-13476 improve CHE-6 workspaces warning

Signed-off-by: Oleksii Orel <oorel@redhat.com>

dashboard/src/app/factories/list-factories/factory-item/factory-item.html

@@ -52,7 +52,7 @@
           <div>
            <span>Not compatible</span>
             <span class="che-list-actions">
-             <i class="fa fa-question-circle"
+             <i class="fa fa-warning"
                 uib-tooltip="This factory is using old workspace definition format which is not compatible anymore.
                              Please follow the documentation to update the definition of the workspace and benefits from the latest capabilities."></i>
             </span>

dashboard/src/app/workspaces/list-workspaces/workspace-item/workspace-item.controller.ts

@@ -11,8 +11,12 @@
  */
 'use strict';
 import {CheWorkspace} from '../../../../components/api/workspace/che-workspace.factory';
+import {CheBranding} from '../../../../components/branding/che-branding.factory';
 import {WorkspacesService} from '../../workspaces.service';
 
+
+const BLUR_TIMEOUT = 5000;
+
 /**
  * @ngdoc controller
  * @name workspaces.list.controller:WorkspaceItemCtrl
@@ -21,29 +25,47 @@ import {WorkspacesService} from '../../workspaces.service';
  */
 export class WorkspaceItemCtrl {
 
-  static $inject = ['$location', 'lodash', 'cheWorkspace', 'workspacesService'];
+  static $inject = ['$location', 'lodash', 'cheWorkspace', 'workspacesService', '$timeout', '$document', 'cheBranding', '$sce'];
 
   $location: ng.ILocationService;
   lodash: any;
   cheWorkspace: CheWorkspace;
   workspacesService: WorkspacesService;
+  $document: ng.IDocumentService;
+  $timeout: ng.ITimeoutService;
 
   workspace: che.IWorkspace;
   workspaceName: string;
-  workspaceSupportIssues = '';
+  workspaceSupportIssues: any;
+
+  private supportedRecipeTypeIsshue: any;
+  private supportedVersionTypeIsshue: any;
+  private timeoutPromise: ng.IPromise<any>;
 
   /**
    * Default constructor that is using resource
    */
   constructor($location: ng.ILocationService,
               lodash: any,
               cheWorkspace: CheWorkspace,
-              workspacesService: WorkspacesService) {
+              workspacesService: WorkspacesService,
+              $timeout: ng.ITimeoutService,
+              $document: ng.IDocumentService,
+              cheBranding: CheBranding,
+              $sce: ng.ISCEService) {
     this.$location = $location;
     this.lodash = lodash;
     this.cheWorkspace = cheWorkspace;
     this.workspacesService = workspacesService;
+    this.$timeout = $timeout;
+    this.$document = $document;
     this.workspaceName = this.cheWorkspace.getWorkspaceDataManager().getName(this.workspace);
+
+    this.supportedRecipeTypeIsshue = $sce.trustAsHtml('Current infrastructure doesn\'t support this workspace recipe type.');
+
+    this.supportedVersionTypeIsshue = $sce.trustAsHtml(`This workspace is using old definition format which is not compatible anymore. 
+          Please follow the <a href="${cheBranding.getDocs().workspace}" target="_blank">documentation</a>
+          to update the definition of the workspace and benefits from the latest capabilities.`);
   }
 
   /**
@@ -53,18 +75,19 @@ export class WorkspaceItemCtrl {
    */
   get isSupported(): boolean {
     if (!this.workspacesService.isSupportedRecipeType(this.workspace)) {
-      this.workspaceSupportIssues = 'Current infrastructure doesn\'t support this workspace recipe type.';
+      if (this.workspaceSupportIssues !== this.supportedRecipeTypeIsshue) {
+        this.workspaceSupportIssues = this.supportedRecipeTypeIsshue;
+      }
 
       return false;
-    }
-    if (!this.workspacesService.isSupportedVersion(this.workspace)) {
-      this.workspaceSupportIssues = `This workspace is using old definition format which is not compatible anymore. 
-          Please follow the documentation to update the definition of the workspace and benefits from the latest capabilities.`;
+    } else if (!this.workspacesService.isSupportedVersion(this.workspace)) {
+      if (this.workspaceSupportIssues !== this.supportedVersionTypeIsshue) {
+        this.workspaceSupportIssues = this.supportedVersionTypeIsshue;
+      }
 
       return false;
-    }
-    if (!this.workspaceSupportIssues) {
-      this.workspaceSupportIssues = '';
+    } else if (this.workspaceSupportIssues) {
+      this.workspaceSupportIssues = undefined;
     }
 
     return true;
@@ -105,6 +128,26 @@ export class WorkspaceItemCtrl {
     return '-';
   }
 
+  setTemporaryFocus(elementId?: string): void {
+    const id = elementId ? elementId : `${this.workspace.id}-item-error`;
+    const targetElement = this.$document.find(`#${id}`);
+    if (!targetElement) {
+      return;
+    }
+    targetElement.focus();
+
+    this.resetBlurTimeout();
+    this.timeoutPromise = this.$timeout(() => {
+      targetElement.blur();
+    }, BLUR_TIMEOUT);
+  }
+
+  resetBlurTimeout(): void {
+    if (this.timeoutPromise) {
+      this.$timeout.cancel(this.timeoutPromise);
+    }
+  }
+
   /**
    * Returns current status of workspace
    * @returns {String}

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

@@ -81,28 +81,33 @@
            class="workspace-item-actions">
         <span class="che-xs-header noselect" hide-gt-xs>Actions</span>
 
-        <div class="che-list-actions"
-             ng-if="workspaceItemCtrl.isSupported === true">
-          <che-workspace-status workspace-id="workspaceItemCtrl.workspace.id"
+        <div class="che-list-actions">
+          <che-workspace-status ng-if="workspaceItemCtrl.isSupported"
+                                workspace-id="workspaceItemCtrl.workspace.id"
                                 name="workspace-stop-start-button"
                                 is-request-pending="workspaceItemCtrl.isRequestPending"></che-workspace-status>
-          <a href="#/workspace/{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspaceName}}?tab=Config"
+          <a ng-href="#/workspace/{{workspaceItemCtrl.workspace.namespace}}/{{workspaceItemCtrl.workspaceName}}?tab={{workspaceItemCtrl.isSupported ? 'Devfile':'Config'}}"
              name="configure-workspace-button"
              uib-tooltip="Configure workspace">
             <span class="fa fa-cog"></span>
           </a>
-          <span ng-click="workspaceItemCtrl.redirectToWorkspaceDetails('Projects');" uib-tooltip="Add project">
+          <span ng-if="workspaceItemCtrl.isSupported"
+                ng-click="workspaceItemCtrl.redirectToWorkspaceDetails('Projects');"
+                uib-tooltip="Add project" ng-hide="workspaceItemCtrl.isSupported">
             <span class="fa fa-plus-square-o" name="add-project-button"></span>
           </span>
+          <span ng-if="!workspaceItemCtrl.isSupported"
+                class="workspace-item-not-supported"
+                tabindex="-1"
+                id="{{workspaceItemCtrl.workspace.id}}-item-error"
+                ng-mouseover="workspaceItemCtrl.setTemporaryFocus();"
+                ng-click="workspaceItemCtrl.resetBlurTimeout();"
+                tooltip-trigger="focus"
+                tooltip-append-to-body="true"
+                uib-tooltip-html="workspaceItemCtrl.workspaceSupportIssues">
+               <span>Not compatible</span><span class="fa fa-warning"></span>
+          </span>
         </div>
-        <div class="che-list-item-secondary workspace-item-not-supported"
-             ng-if="workspaceItemCtrl.isSupported === false">
-          <div>
-            <span>Not compatible</span>
-            <span class="che-list-actions"><i class="fa fa-question-circle" uib-tooltip="{{workspaceItemCtrl.workspaceSupportIssues}}"></i></span>
-          </div>
-        </div>
-
       </div>
     </div>
   </div>

dashboard/src/app/workspaces/list-workspaces/workspace-item/workspace-item.styl

@@ -39,7 +39,13 @@
       padding 0
 
 .workspace-item-not-supported
+  position relative
+  min-width 120px
+  cursor pointer
 
-  .che-list-actions > *:hover
-    color $list-action-color
-    cursor default
+  *
+    color inherit
+    display inline
+
+    &:not(:first-child)
+      padding-left 5px

dashboard/src/components/widget/list/che-list-item.styl

@@ -30,9 +30,6 @@
 .che-list-item-row *
   outline none
 
-.che-list-item-row:not(:hover) .tooltip
-  display none !important
-
 .che-list-item-details
   line-height inherit
   font-size 12px