From 2d00f2a55646fb7ec6afa8d28d8b2f494089c60b Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Fri, 24 Dec 2021 17:39:14 +0200
Subject: [PATCH 01/20] refactor: rename convertWorkspace => constructWorkspace

---
 .../Navigation/__tests__/RecentList.spec.tsx  |  4 +-
 .../src/Routes/__tests__/index.spec.tsx       |  6 +-
 .../__tests__/FactoryLoader.spec.tsx          | 14 ++--
 .../GetStarted/__tests__/GetStarted.spec.tsx  |  4 +-
 .../EditorTab/__tests__/index.spec.tsx        |  6 +-
 .../WorkspaceDetails/EditorTab/index.tsx      |  6 +-
 .../WorkspaceDetails/OverviewTab/index.tsx    |  4 +-
 .../Toolbar/__tests__/index.spec.tsx          |  4 +-
 .../WorkspacesList/__tests__/index.spec.tsx   |  6 +-
 .../workspace-adapter/__tests__/index.spec.ts | 64 +++++++++----------
 .../src/services/workspace-adapter/index.ts   |  2 +-
 .../src/store/Workspaces/selectors.ts         |  4 +-
 12 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
index bfb8904f6..1ea9cc6ad 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
@@ -18,7 +18,7 @@ import { RenderResult, render, screen } from '@testing-library/react';
 import { Store } from 'redux';
 
 import NavigationRecentList from '../RecentList';
-import { convertWorkspace, Workspace } from '../../../services/workspace-adapter';
+import { constructWorkspace, Workspace } from '../../../services/workspace-adapter';
 import { FakeStoreBuilder } from '../../../store/__mocks__/storeBuilder';
 import { createHashHistory } from 'history';
 import { createFakeCheWorkspace } from '../../../store/__mocks__/workspace';
@@ -30,7 +30,7 @@ jest.mock('react-tooltip', () => {
 });
 
 const cheWorkspaces = [1, 2, 3].map(i => createFakeCheWorkspace('wksp-' + i, 'wksp-' + i));
-const workspaces = cheWorkspaces.map(workspace => convertWorkspace(workspace));
+const workspaces = cheWorkspaces.map(workspace => constructWorkspace(workspace));
 
 describe('Navigation Recent List', () => {
   function renderComponent(store: Store, workspaces: Workspace[]): RenderResult {
diff --git a/packages/dashboard-frontend/src/Routes/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/Routes/__tests__/index.spec.tsx
index fd5b0fdda..bf5341fe1 100644
--- a/packages/dashboard-frontend/src/Routes/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/Routes/__tests__/index.spec.tsx
@@ -27,7 +27,7 @@ import {
   buildWorkspacesLocation,
 } from '../../services/helpers/location';
 import { IdeLoaderTab, WorkspaceDetailsTab } from '../../services/helpers/types';
-import { convertWorkspace, Workspace } from '../../services/workspace-adapter';
+import { constructWorkspace, Workspace } from '../../services/workspace-adapter';
 import { CheWorkspaceBuilder } from '../../store/__mocks__/cheWorkspaceBuilder';
 
 jest.mock('../../pages/GetStarted', () => {
@@ -140,7 +140,7 @@ describe('Routes', () => {
     let workspace: Workspace;
 
     beforeEach(() => {
-      workspace = convertWorkspace(new CheWorkspaceBuilder().withNamespace('namespace').build());
+      workspace = constructWorkspace(new CheWorkspaceBuilder().withNamespace('namespace').build());
     });
 
     it('should handle "/workspace/namespace/name"', async () => {
@@ -184,7 +184,7 @@ describe('Routes', () => {
     let workspace: Workspace;
 
     beforeEach(() => {
-      workspace = convertWorkspace(new CheWorkspaceBuilder().withNamespace('namespace').build());
+      workspace = constructWorkspace(new CheWorkspaceBuilder().withNamespace('namespace').build());
     });
 
     it('should handle "/ide/namespace/name"', async () => {
diff --git a/packages/dashboard-frontend/src/containers/__tests__/FactoryLoader.spec.tsx b/packages/dashboard-frontend/src/containers/__tests__/FactoryLoader.spec.tsx
index 3ca6f3372..c0114f6dd 100644
--- a/packages/dashboard-frontend/src/containers/__tests__/FactoryLoader.spec.tsx
+++ b/packages/dashboard-frontend/src/containers/__tests__/FactoryLoader.spec.tsx
@@ -22,7 +22,7 @@ import { createFakeCheWorkspace } from '../../store/__mocks__/workspace';
 import { WorkspaceStatus } from '../../services/helpers/types';
 import FactoryLoaderContainer, { LoadFactorySteps } from '../FactoryLoader';
 import { AlertOptions } from '../../pages/IdeLoader';
-import { convertWorkspace, Devfile, WorkspaceAdapter } from '../../services/workspace-adapter';
+import { constructWorkspace, Devfile, WorkspaceAdapter } from '../../services/workspace-adapter';
 import { DevWorkspaceBuilder } from '../../store/__mocks__/devWorkspaceBuilder';
 import devfileApi from '../../services/devfileApi';
 import { safeDump } from 'js-yaml';
@@ -71,7 +71,7 @@ jest.mock('../../store/Workspaces');
     ) =>
     async () => {
       createWorkspaceFromDevfileMock(devfile, namespace, infrastructureNamespace, attributes);
-      return convertWorkspace({
+      return constructWorkspace({
         id: 'id-wksp-test',
         attributes: attributes as che.WorkspaceAttributes,
         namespace,
@@ -319,7 +319,7 @@ metadata:
         .withId('wrksp-test-id')
         .withName('wrksp-test-name')
         .build();
-      const workspaceAdapter = convertWorkspace(workspace);
+      const workspaceAdapter = constructWorkspace(workspace);
 
       renderComponentV1(location, workspace);
 
@@ -361,7 +361,7 @@ metadata:
     it('should resolve the factory, create a new workspace and open IDE', async () => {
       const location = 'http://test-location';
       const workspace = createFakeWorkspaceWithRuntimeV1('id-wksp-test');
-      const workspaceAdapter = convertWorkspace(workspace);
+      const workspaceAdapter = constructWorkspace(workspace);
 
       renderComponentV1(location, workspace);
 
@@ -494,7 +494,7 @@ metadata:
         'id-wksp-test',
         'http://test-location/?policies.create=peruser',
       );
-      const workspaceAdapter = convertWorkspace(workspace);
+      const workspaceAdapter = constructWorkspace(workspace);
 
       renderComponentV1(location, workspace);
 
@@ -1035,7 +1035,7 @@ metadata:
 });
 
 function renderComponentV2(url: string, workspace: devfileApi.DevWorkspace): RenderResult {
-  const wrks = convertWorkspace(workspace);
+  const wrks = constructWorkspace(workspace);
   (wrks.ref as devfileApi.DevWorkspace).metadata.annotations = {
     'che.eclipse.org/devfile-source': safeDump({
       factory: { params: 'url=http://test-location&policies.create=peruser' },
@@ -1057,7 +1057,7 @@ function renderComponentV2(url: string, workspace: devfileApi.DevWorkspace): Ren
       {
         v: '4.0',
         source: 'devfile.yaml',
-        devfile: convertWorkspace(workspace).devfile,
+        devfile: constructWorkspace(workspace).devfile,
         location: url.split('&')[0],
         scm_info: {
           clone_url: 'http://github.com/clone-url',
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/__tests__/GetStarted.spec.tsx b/packages/dashboard-frontend/src/pages/GetStarted/__tests__/GetStarted.spec.tsx
index fdc237d64..932621d33 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/__tests__/GetStarted.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/GetStarted/__tests__/GetStarted.spec.tsx
@@ -18,7 +18,7 @@ import React from 'react';
 import GetStarted from '..';
 import { FakeStoreBuilder } from '../../../store/__mocks__/storeBuilder';
 import { BrandingData } from '../../../services/bootstrap/branding.constant';
-import { convertWorkspace, Devfile, Workspace } from '../../../services/workspace-adapter';
+import { constructWorkspace, Devfile, Workspace } from '../../../services/workspace-adapter';
 import { CheWorkspaceBuilder } from '../../../store/__mocks__/cheWorkspaceBuilder';
 
 const setWorkspaceQualifiedName = jest.fn();
@@ -45,7 +45,7 @@ jest.mock('../../../store/Workspaces/index', () => {
         (devfile, namespace, infrastructureNamespace, attributes) =>
         async (): Promise<Workspace> => {
           createWorkspaceFromDevfileMock(devfile, namespace, infrastructureNamespace, attributes);
-          return convertWorkspace({
+          return constructWorkspace({
             id: 'id-wksp-test',
             attributes,
             namespace,
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/__tests__/index.spec.tsx
index 9138fa0e1..fd3a46fb0 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/__tests__/index.spec.tsx
@@ -19,7 +19,7 @@ import userEvent from '@testing-library/user-event';
 import { dump } from 'js-yaml';
 import devfileApi from '../../../../services/devfileApi';
 import EditorTab from '..';
-import { Workspace, convertWorkspace } from '../../../../services/workspace-adapter';
+import { Workspace, constructWorkspace } from '../../../../services/workspace-adapter';
 import { CheWorkspaceBuilder } from '../../../../store/__mocks__/cheWorkspaceBuilder';
 import { DevWorkspaceBuilder } from '../../../../store/__mocks__/devWorkspaceBuilder';
 import { FakeStoreBuilder } from '../../../../store/__mocks__/storeBuilder';
@@ -66,7 +66,7 @@ describe('Editor Tab', () => {
           workspaces: [cheWorkspace],
         })
         .build();
-      workspace = convertWorkspace(cheWorkspace);
+      workspace = constructWorkspace(cheWorkspace);
       component = getComponent(store, workspace);
     });
 
@@ -141,7 +141,7 @@ describe('Editor Tab', () => {
           workspaces: [devWorkspace],
         })
         .build();
-      workspace = convertWorkspace(devWorkspace);
+      workspace = constructWorkspace(devWorkspace);
       component = getComponent(store, workspace);
     });
 
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
index 5c7525a58..06004636f 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
@@ -29,7 +29,7 @@ import { safeLoad } from 'js-yaml';
 import common from '@eclipse-che/common';
 import DevfileEditor, { DevfileEditor as Editor } from '../../../components/DevfileEditor';
 import EditorTools from './EditorTools';
-import { convertWorkspace, isCheWorkspace, Workspace } from '../../../services/workspace-adapter';
+import { constructWorkspace, isCheWorkspace, Workspace } from '../../../services/workspace-adapter';
 import devfileApi, { isDevfileV2, isDevWorkspace } from '../../../services/devfileApi';
 import {
   DevWorkspaceClient,
@@ -245,7 +245,7 @@ export class EditorTab extends React.PureComponent<Props, State> {
     try {
       await this.checkForModifiedClusterDevWorkspace();
       const devworkspace = this.props.workspace.ref as devfileApi.DevWorkspace;
-      const convertedDevWorkspace = convertWorkspace(devworkspace);
+      const convertedDevWorkspace = constructWorkspace(devworkspace);
       convertedDevWorkspace.devfile = devfile;
       // Store the devfile in here
       (convertedDevWorkspace.ref as devfileApi.DevWorkspace).metadata.annotations = {
@@ -333,7 +333,7 @@ export class EditorTab extends React.PureComponent<Props, State> {
     if (!devfile) {
       return;
     }
-    const workspaceCopy = convertWorkspace(this.props.workspace.ref);
+    const workspaceCopy = constructWorkspace(this.props.workspace.ref);
     if (!devfile.metadata) {
       devfile.metadata = {};
     }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
index 4ec3b954d..d8283a18a 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
@@ -16,7 +16,7 @@ import StorageTypeFormGroup from './StorageType';
 import { WorkspaceNameFormGroup } from './WorkspaceName';
 import InfrastructureNamespaceFormGroup from './InfrastructureNamespace';
 import ProjectsFormGroup from './Projects';
-import { convertWorkspace, Workspace } from '../../../services/workspace-adapter';
+import { constructWorkspace, Workspace } from '../../../services/workspace-adapter';
 import devfileApi, { isDevWorkspace } from '../../../services/devfileApi';
 
 type Props = {
@@ -105,7 +105,7 @@ export class OverviewTab extends React.Component<Props, State> {
   }
 
   private async onSave(devfile: che.WorkspaceDevfile | devfileApi.Devfile): Promise<void> {
-    const workspaceCopy = convertWorkspace(this.props.workspace.ref);
+    const workspaceCopy = constructWorkspace(this.props.workspace.ref);
     workspaceCopy.devfile = devfile;
     await this.props.onSave(workspaceCopy);
   }
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/Toolbar/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/Toolbar/__tests__/index.spec.tsx
index 40eb141ee..1f6946902 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/Toolbar/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/Toolbar/__tests__/index.spec.tsx
@@ -17,7 +17,7 @@ import { render, screen, RenderResult, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event';
 import WorkspacesListToolbar from '..';
 import { createFakeCheWorkspace } from '../../../../store/__mocks__/workspace';
-import { convertWorkspace, Workspace } from '../../../../services/workspace-adapter';
+import { constructWorkspace, Workspace } from '../../../../services/workspace-adapter';
 
 let workspaces: Workspace[];
 let isSelectedAll: boolean;
@@ -45,7 +45,7 @@ describe('Workspaces List Toolbar', () => {
   beforeEach(() => {
     workspaces = [0, 1, 2, 3, 4]
       .map(i => createFakeCheWorkspace('workspace-' + i, 'workspace-' + i))
-      .map(workspace => convertWorkspace(workspace));
+      .map(workspace => constructWorkspace(workspace));
     isSelectedAll = false;
     isEnabledDelete = false;
   });
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
index 78c455652..f0ffdb6f5 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
@@ -20,7 +20,7 @@ import WorkspacesList from '..';
 import { BrandingData } from '../../../services/bootstrap/branding.constant';
 import { createFakeCheWorkspace } from '../../../store/__mocks__/workspace';
 import { WorkspaceAction, WorkspaceStatus } from '../../../services/helpers/types';
-import { convertWorkspace, Workspace } from '../../../services/workspace-adapter';
+import { constructWorkspace, Workspace } from '../../../services/workspace-adapter';
 
 jest.mock('../../../components/Head', () => {
   const FakeHead = () => {
@@ -55,7 +55,7 @@ describe('Workspaces List Page', () => {
   beforeEach(() => {
     workspaces = [0, 1, 2, 3, 4]
       .map(i => createFakeCheWorkspace('workspace-' + i, 'workspace-' + i))
-      .map(workspace => convertWorkspace(workspace));
+      .map(workspace => constructWorkspace(workspace));
     isDeleted = [];
   });
 
@@ -352,7 +352,7 @@ describe('Workspaces List Page', () => {
         status: WorkspaceStatus.RUNNING,
         activeEnv: 'default',
       };
-      workspaces[0] = convertWorkspace(
+      workspaces[0] = constructWorkspace(
         createFakeCheWorkspace(
           'workspace-' + 0,
           'workspace-' + 0,
diff --git a/packages/dashboard-frontend/src/services/workspace-adapter/__tests__/index.spec.ts b/packages/dashboard-frontend/src/services/workspace-adapter/__tests__/index.spec.ts
index 8730fb686..7c652bbb9 100644
--- a/packages/dashboard-frontend/src/services/workspace-adapter/__tests__/index.spec.ts
+++ b/packages/dashboard-frontend/src/services/workspace-adapter/__tests__/index.spec.ts
@@ -11,7 +11,7 @@
  */
 
 import { cloneDeep } from 'lodash';
-import { convertWorkspace } from '..';
+import { constructWorkspace } from '..';
 import {
   CheWorkspaceBuilder,
   CHE_DEVFILE_STUB,
@@ -40,14 +40,14 @@ describe('Workspace adapter', () => {
     it('should not throw when convert Che workspace', () => {
       const cheWorkspace = new CheWorkspaceBuilder().build();
       expect(() => {
-        convertWorkspace(cheWorkspace);
+        constructWorkspace(cheWorkspace);
       }).not.toThrow();
     });
 
     it('should not throw when convert Dev workspace', () => {
       const devWorkspace = new DevWorkspaceBuilder().build();
       expect(() => {
-        convertWorkspace(devWorkspace);
+        constructWorkspace(devWorkspace);
       }).not.toThrow();
     });
 
@@ -58,7 +58,7 @@ describe('Workspace adapter', () => {
         field: 'value',
       } as any;
       expect(() => {
-        convertWorkspace(obj);
+        constructWorkspace(obj);
       }).toThrow();
     });
   });
@@ -66,28 +66,28 @@ describe('Workspace adapter', () => {
   describe('for Che workspace', () => {
     it('should return reference to the workspace', () => {
       const cheWorkspace = new CheWorkspaceBuilder().build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.ref).toMatchObject(cheWorkspace);
     });
 
     it('should return ID', () => {
       const id = 'workspace1234asdf';
       const cheWorkspace = new CheWorkspaceBuilder().withId(id).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.id).toEqual(id);
     });
 
     it('should return name', () => {
       const name = 'wksp-1234';
       const cheWorkspace = new CheWorkspaceBuilder().withName(name).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.name).toEqual(name);
     });
 
     it('should return namespace', () => {
       const namespace = 'test-namespace';
       const cheWorkspace = new CheWorkspaceBuilder().withNamespace(namespace).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.namespace).toEqual(namespace);
     });
 
@@ -98,7 +98,7 @@ describe('Workspace adapter', () => {
           infrastructureNamespace,
         } as che.WorkspaceAttributes)
         .build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.infrastructureNamespace).toEqual(infrastructureNamespace);
     });
 
@@ -109,7 +109,7 @@ describe('Workspace adapter', () => {
           created,
         } as che.WorkspaceAttributes)
         .build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.created.toString()).toEqual(created);
     });
 
@@ -120,14 +120,14 @@ describe('Workspace adapter', () => {
           updated,
         } as che.WorkspaceAttributes)
         .build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.updated.toString()).toEqual(updated);
     });
 
     it('should return status', () => {
       const status = 'STARTING';
       const cheWorkspace = new CheWorkspaceBuilder().withStatus(status).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.status).toEqual(status);
     });
 
@@ -136,7 +136,7 @@ describe('Workspace adapter', () => {
       const runtime = CHE_RUNTIME_STUB;
       runtime.machines['theia-ide'].servers.theia.url = ideUrl;
       const cheWorkspace = new CheWorkspaceBuilder().withRuntime(runtime).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.ideUrl).toEqual(ideUrl);
     });
 
@@ -146,7 +146,7 @@ describe('Workspace adapter', () => {
         asyncPersist: 'false',
       };
       const cheWorkspace = new CheWorkspaceBuilder().withDevfile(cheDevfile).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.storageType).toEqual(StorageTypeTitle.ephemeral.toLowerCase());
     });
 
@@ -156,7 +156,7 @@ describe('Workspace adapter', () => {
         asyncPersist: 'false',
       };
       const cheWorkspace = new CheWorkspaceBuilder().withDevfile(cheDevfile).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.devfile).toMatchObject(cheDevfile);
     });
 
@@ -178,13 +178,13 @@ describe('Workspace adapter', () => {
         },
       ];
       const cheWorkspace = new CheWorkspaceBuilder().withProjects(projects).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
       expect(workspace.projects).toEqual([projects[0].name, projects[1].name]);
     });
 
     it('should set "ephemeral" storage type', () => {
       const cheWorkspace = new CheWorkspaceBuilder().withDevfile(cheDevfile).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
 
       expect(workspace.storageType).toEqual('persistent');
       expect((workspace.devfile as che.WorkspaceDevfile).attributes).toEqual(undefined);
@@ -199,7 +199,7 @@ describe('Workspace adapter', () => {
 
     it('should set "async" storage type', () => {
       const cheWorkspace = new CheWorkspaceBuilder().withDevfile(cheDevfile).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
 
       expect(workspace.storageType).toEqual('persistent');
       expect((workspace.devfile as che.WorkspaceDevfile).attributes).toEqual(undefined);
@@ -218,7 +218,7 @@ describe('Workspace adapter', () => {
         persistVolumes: 'false',
       };
       const cheWorkspace = new CheWorkspaceBuilder().withDevfile(cheDevfile).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
 
       expect(workspace.storageType).toEqual('ephemeral');
 
@@ -235,7 +235,7 @@ describe('Workspace adapter', () => {
         asyncPersist: 'true',
       };
       const cheWorkspace = new CheWorkspaceBuilder().withDevfile(cheDevfile).build();
-      const workspace = convertWorkspace(cheWorkspace);
+      const workspace = constructWorkspace(cheWorkspace);
 
       expect(workspace.storageType).toEqual('async');
 
@@ -251,35 +251,35 @@ describe('Workspace adapter', () => {
   describe('for Dev workspace', () => {
     it('should return reference to the workspace', () => {
       const devWorkspace = new DevWorkspaceBuilder().build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.ref).toMatchObject(devWorkspace);
     });
 
     it('should return ID', () => {
       const id = '1234asdf';
       const devWorkspace = new DevWorkspaceBuilder().withId(id).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.id).toEqual(id);
     });
 
     it('should return name', () => {
       const name = 'wksp-1234';
       const devWorkspace = new DevWorkspaceBuilder().withName(name).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.name).toEqual(name);
     });
 
     it('should return namespace', () => {
       const namespace = 'test-namespace';
       const devWorkspace = new DevWorkspaceBuilder().withNamespace(namespace).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.namespace).toEqual(namespace);
     });
 
     it('should return infrastructure namespace', () => {
       const infrastructureNamespace = 'infrastructure-namespace';
       const devWorkspace = new DevWorkspaceBuilder().withNamespace(infrastructureNamespace).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.infrastructureNamespace).toEqual(infrastructureNamespace);
     });
 
@@ -288,7 +288,7 @@ describe('Workspace adapter', () => {
       const created = new Date(timestamp);
       const devWorkspace = new DevWorkspaceBuilder().build();
       devWorkspace.metadata.creationTimestamp = created;
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.created).toEqual(timestamp);
     });
 
@@ -299,27 +299,27 @@ describe('Workspace adapter', () => {
       devWorkspace.metadata.annotations = {
         [DEVWORKSPACE_UPDATING_TIMESTAMP_ANNOTATION]: updated,
       };
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.updated).toEqual(timestamp);
     });
 
     it('should return status', () => {
       const status = 'STARTING';
       const devWorkspace = new DevWorkspaceBuilder().withStatus({ phase: status }).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.status).toEqual(DevWorkspaceStatus[status]);
     });
 
     it('should return ideUrl', () => {
       const ideUrl = 'my/ide/url';
       const devWorkspace = new DevWorkspaceBuilder().withIdeUrl(ideUrl).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.ideUrl).toEqual(ideUrl);
     });
 
     it('should return storage type', () => {
       const devWorkspace = new DevWorkspaceBuilder().build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.storageType).toEqual(StorageTypeTitle.persistent.toLowerCase());
     });
 
@@ -335,7 +335,7 @@ describe('Workspace adapter', () => {
         .withName('my-wksp')
         .withNamespace('my-namespace')
         .build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.devfile).toMatchObject(devfile);
     });
 
@@ -359,7 +359,7 @@ describe('Workspace adapter', () => {
         },
       ];
       const devWorkspace = new DevWorkspaceBuilder().withProjects(projects).build();
-      const workspace = convertWorkspace(devWorkspace);
+      const workspace = constructWorkspace(devWorkspace);
       expect(workspace.projects).toEqual([projects[0].name, projects[1].name]);
     });
   });
diff --git a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
index 7a95e8b8b..95da3cf8b 100644
--- a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
+++ b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
@@ -334,7 +334,7 @@ export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>
   }
 }
 
-export function convertWorkspace<T extends che.Workspace | devfileApi.DevWorkspace>(
+export function constructWorkspace<T extends che.Workspace | devfileApi.DevWorkspace>(
   workspace: T,
 ): Workspace {
   return new WorkspaceAdapter(workspace);
diff --git a/packages/dashboard-frontend/src/store/Workspaces/selectors.ts b/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
index f3bb787d8..987e959c0 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
@@ -12,7 +12,7 @@
 
 import { createSelector } from 'reselect';
 import { AppState } from '..';
-import { convertWorkspace, Workspace } from '../../services/workspace-adapter';
+import { constructWorkspace, Workspace } from '../../services/workspace-adapter';
 import { selectCheWorkspacesError } from './cheWorkspaces/selectors';
 import { selectDevWorkspacesError } from './devWorkspaces/selectors';
 
@@ -35,7 +35,7 @@ export const selectAllWorkspaces = createSelector(
   selectDevWorkspacesState,
   (cheWorkspacesState, devWorkspacesState) => {
     return [...cheWorkspacesState.workspaces, ...devWorkspacesState.workspaces].map(workspace =>
-      convertWorkspace(workspace),
+      constructWorkspace(workspace),
     );
   },
 );

From 0e36f47d6b0628668ecac5edbd084490fe6ac33a Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Tue, 28 Dec 2021 15:46:32 +0200
Subject: [PATCH 02/20] feat: mark che-workspaces as deprecated

---
 .../Navigation/RecentItemWorkspaceActions.tsx |  6 +--
 .../Navigation/__tests__/RecentItem.spec.tsx  |  2 +-
 .../Navigation/__tests__/RecentList.spec.tsx  | 16 +++++--
 .../src/Layout/Navigation/index.tsx           | 11 +++--
 .../src/components/Header/index.tsx           | 15 +++---
 .../Indicator/__tests__/Indicator.spec.tsx    |  9 +++-
 .../__snapshots__/Indicator.spec.tsx.snap     | 33 ++++++++++++-
 .../components/Workspace/Indicator/index.tsx  | 25 ++++++++--
 .../__snapshots__/index.spec.tsx.snap         | 42 ++++++++++++++++-
 .../__tests__/index.spec.tsx                  |  9 +++-
 .../components/WorkspaceStatusLabel/index.tsx | 25 ++++++++--
 .../src/containers/IdeLoader.tsx              | 13 +++++-
 .../IdeLoader/__tests__/IdeLoader.spec.tsx    | 14 +++---
 .../src/pages/IdeLoader/index.tsx             |  9 +++-
 .../pages/WorkspaceDetails/Header/index.tsx   |  7 ++-
 .../src/services/bootstrap/index.ts           |  4 ++
 .../src/services/helpers/types.ts             |  2 +
 .../src/services/workspace-adapter/index.ts   | 24 ++++++++--
 .../src/store/Workspaces/selectors.ts         | 46 +++++++++++--------
 19 files changed, 245 insertions(+), 67 deletions(-)

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/RecentItemWorkspaceActions.tsx b/packages/dashboard-frontend/src/Layout/Navigation/RecentItemWorkspaceActions.tsx
index 8a580e6da..7cc59c4db 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/RecentItemWorkspaceActions.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/RecentItemWorkspaceActions.tsx
@@ -98,11 +98,7 @@ class NavigationItemWorkspaceActions extends React.PureComponent<Props, State> {
         createAction(WorkspaceAction.START_DEBUG_AND_OPEN_LOGS),
         createAction(WorkspaceAction.START_IN_BACKGROUND),
       );
-    } else if (
-      status !== WorkspaceStatus.STOPPING &&
-      status !== DevWorkspaceStatus.TERMINATING &&
-      status !== DevWorkspaceStatus.FAILED
-    ) {
+    } else if (status !== WorkspaceStatus.STOPPING && status !== DevWorkspaceStatus.TERMINATING) {
       dropdownItems.push(createAction(WorkspaceAction.STOP_WORKSPACE));
     }
     if (
diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentItem.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentItem.spec.tsx
index 44c5d2fe7..c5b99af75 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentItem.spec.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentItem.spec.tsx
@@ -30,7 +30,7 @@ jest.mock('../../../components/Workspace/Indicator', () => {
 
 describe('Navigation Item', () => {
   const item: NavigationRecentItemObject = {
-    status: '',
+    status: WorkspaceStatus.STOPPED,
     label: 'workspace',
     to: '/namespace/workspace',
     isDevWorkspace: false,
diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
index 1ea9cc6ad..184ed3f63 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/RecentList.spec.tsx
@@ -21,7 +21,7 @@ import NavigationRecentList from '../RecentList';
 import { constructWorkspace, Workspace } from '../../../services/workspace-adapter';
 import { FakeStoreBuilder } from '../../../store/__mocks__/storeBuilder';
 import { createHashHistory } from 'history';
-import { createFakeCheWorkspace } from '../../../store/__mocks__/workspace';
+import { CheWorkspaceBuilder } from '../../../store/__mocks__/cheWorkspaceBuilder';
 
 jest.mock('react-tooltip', () => {
   return function DummyTooltip(): React.ReactElement {
@@ -29,10 +29,20 @@ jest.mock('react-tooltip', () => {
   };
 });
 
-const cheWorkspaces = [1, 2, 3].map(i => createFakeCheWorkspace('wksp-' + i, 'wksp-' + i));
-const workspaces = cheWorkspaces.map(workspace => constructWorkspace(workspace));
+let cheWorkspaces: che.Workspace[];
+let workspaces: Workspace[];
 
 describe('Navigation Recent List', () => {
+  beforeEach(() => {
+    cheWorkspaces = [1, 2, 3].map(i =>
+      new CheWorkspaceBuilder()
+        .withId('wksp-' + i)
+        .withName('wksp-' + i)
+        .build(),
+    );
+    workspaces = cheWorkspaces.map(workspace => constructWorkspace(workspace));
+  });
+
   function renderComponent(store: Store, workspaces: Workspace[]): RenderResult {
     const history = createHashHistory();
     return render(
diff --git a/packages/dashboard-frontend/src/Layout/Navigation/index.tsx b/packages/dashboard-frontend/src/Layout/Navigation/index.tsx
index bd0c0e38b..9b96cd975 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/index.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/index.tsx
@@ -27,6 +27,11 @@ import {
   buildWorkspacesLocation,
   sanitizeLocation,
 } from '../../services/helpers/location';
+import {
+  DeprecatedWorkspaceStatus,
+  DevWorkspaceStatus,
+  WorkspaceStatus,
+} from '../../services/helpers/types';
 
 export interface NavigationItemObject {
   to: string;
@@ -36,7 +41,7 @@ export interface NavigationItemObject {
 export interface NavigationRecentItemObject {
   to: string;
   label: string;
-  status: string;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   workspaceId: string;
   isDevWorkspace: boolean;
 }
@@ -111,8 +116,6 @@ export class Navigation extends React.PureComponent<Props, State> {
     const { theme, recentWorkspaces, history } = this.props;
     const { activeLocation } = this.state;
 
-    const recent = recentWorkspaces || [];
-
     return (
       <Nav
         aria-label="Navigation"
@@ -121,7 +124,7 @@ export class Navigation extends React.PureComponent<Props, State> {
       >
         <NavigationMainList activePath={activeLocation.pathname} />
         <NavigationRecentList
-          workspaces={recent}
+          workspaces={recentWorkspaces}
           activePath={activeLocation.pathname}
           history={history}
         />
diff --git a/packages/dashboard-frontend/src/components/Header/index.tsx b/packages/dashboard-frontend/src/components/Header/index.tsx
index 13c7b54da..7c0eb42ce 100644
--- a/packages/dashboard-frontend/src/components/Header/index.tsx
+++ b/packages/dashboard-frontend/src/components/Header/index.tsx
@@ -21,11 +21,16 @@ import {
   TextVariants,
 } from '@patternfly/react-core';
 import WorkspaceStatusLabel from '../WorkspaceStatusLabel';
+import {
+  DeprecatedWorkspaceStatus,
+  DevWorkspaceStatus,
+  WorkspaceStatus,
+} from '../../services/helpers/types';
 
 const SECTION_THEME = PageSectionVariants.light;
 
 type Props = {
-  status?: string;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   title: string;
 };
 
@@ -41,11 +46,9 @@ class Header extends React.PureComponent<Props> {
               <Text component={TextVariants.h1}>{title}</Text>
             </TextContent>
           </FlexItem>
-          {status && (
-            <FlexItem>
-              <WorkspaceStatusLabel status={status} />
-            </FlexItem>
-          )}
+          <FlexItem>
+            <WorkspaceStatusLabel status={status} />
+          </FlexItem>
         </Flex>
       </PageSection>
     );
diff --git a/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/Indicator.spec.tsx b/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/Indicator.spec.tsx
index 241942b53..4378fdc0f 100644
--- a/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/Indicator.spec.tsx
+++ b/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/Indicator.spec.tsx
@@ -23,7 +23,7 @@ jest.mock('react-tooltip', () => {
 
 describe('Workspace indicator component', () => {
   it('should render default status correctly', () => {
-    const element = <WorkspaceIndicator status={'undefined'} />;
+    const element = <WorkspaceIndicator status={WorkspaceStatus.STOPPING} />;
     expect(renderer.create(element).toJSON()).toMatchSnapshot();
   });
 
@@ -75,6 +75,13 @@ describe('Workspace indicator component', () => {
       expect(getComponentSnapshot(element)).toMatchSnapshot();
     });
   });
+
+  describe('Deprecated workspaces', () => {
+    it('should render "Deprecated" status correctly', () => {
+      const element = <WorkspaceIndicator status={'Deprecated'} />;
+      expect(getComponentSnapshot(element)).toMatchSnapshot();
+    });
+  });
 });
 
 function getComponentSnapshot(
diff --git a/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap b/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
index 4d8c164d9..4db8b3e24 100644
--- a/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/components/Workspace/Indicator/__tests__/__snapshots__/Indicator.spec.tsx.snap
@@ -161,6 +161,37 @@ Array [
 ]
 `;
 
+exports[`Workspace indicator component Deprecated workspaces should render "Deprecated" status correctly 1`] = `
+Array [
+  <span
+    data-testid="workspace-status-indicator"
+    data-tip="Deprecated workspace"
+  >
+    <svg
+      aria-hidden={true}
+      aria-labelledby={null}
+      fill="var(--pf-global--warning-color--100)"
+      height="1em"
+      role="img"
+      style={
+        Object {
+          "verticalAlign": "-0.125em",
+        }
+      }
+      viewBox="0 0 576 512"
+      width="1em"
+    >
+      <path
+        d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+      />
+    </svg>
+  </span>,
+  <div>
+    Dummy Tooltip
+  </div>,
+]
+`;
+
 exports[`Workspace indicator component DevWorkspaces should render FAILED status correctly 1`] = `
 Array [
   <span
@@ -295,7 +326,7 @@ exports[`Workspace indicator component should render default status correctly 1`
 Array [
   <span
     data-testid="workspace-status-indicator"
-    data-tip="UNDEFINED"
+    data-tip="STOPPING"
   >
     <svg
       aria-hidden={true}
diff --git a/packages/dashboard-frontend/src/components/Workspace/Indicator/index.tsx b/packages/dashboard-frontend/src/components/Workspace/Indicator/index.tsx
index b2668d22b..8c65c537e 100644
--- a/packages/dashboard-frontend/src/components/Workspace/Indicator/index.tsx
+++ b/packages/dashboard-frontend/src/components/Workspace/Indicator/index.tsx
@@ -14,16 +14,21 @@ import {
   ExclamationCircleIcon,
   InProgressIcon,
   ResourcesFullIcon,
+  ExclamationTriangleIcon,
 } from '@patternfly/react-icons/dist/js/icons';
 import React from 'react';
-import { DevWorkspaceStatus, WorkspaceStatus } from '../../../services/helpers/types';
+import ReactTooltip from 'react-tooltip';
+import {
+  DevWorkspaceStatus,
+  WorkspaceStatus,
+  DeprecatedWorkspaceStatus,
+} from '../../../services/helpers/types';
 import { ColorType, StoppedIcon } from '../../WorkspaceStatusLabel';
 
 import styles from './index.module.css';
-import ReactTooltip from 'react-tooltip';
 
 type Props = {
-  status: string;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
 };
 
 class WorkspaceIndicator extends React.PureComponent<Props> {
@@ -57,21 +62,31 @@ class WorkspaceIndicator extends React.PureComponent<Props> {
         color = '#0e6fe0';
         icon = <InProgressIcon className={styles.rotate} color={color} />;
         break;
+      case 'Deprecated':
+        icon = <ExclamationTriangleIcon color="var(--pf-global--warning-color--100)" />;
+        break;
       default:
         color = 'grey';
         icon = <InProgressIcon className={styles.rotate} color={color} />;
     }
 
+    const tooltip = status === 'Deprecated' ? 'Deprecated workspace' : status.toLocaleUpperCase();
+
     return (
       <>
         <span
-          data-tip={status.toUpperCase()}
+          data-tip={tooltip}
           className={styles.statusIndicator}
           data-testid="workspace-status-indicator"
         >
           {icon}
         </span>
-        <ReactTooltip backgroundColor="black" textColor="white" effect="solid" />
+        <ReactTooltip
+          backgroundColor="black"
+          textColor="white"
+          effect="solid"
+          offset={{ right: 20 }}
+        />
       </>
     );
   }
diff --git a/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/__snapshots__/index.spec.tsx.snap
index 418ea6ff4..ff5a9068b 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/__snapshots__/index.spec.tsx.snap
@@ -126,6 +126,46 @@ Array [
 ]
 `;
 
+exports[`The workspace status label component Deprecated workspaces should render "Deprecated" status correctly 1`] = `
+Array [
+  <span
+    className="pf-c-label pf-m-orange"
+    data-tip=""
+  >
+    <span
+      className="pf-c-label__content"
+    >
+      <span
+        className="pf-c-label__icon"
+      >
+        <svg
+          aria-hidden={true}
+          aria-labelledby={null}
+          fill="var(--pf-global--warning-color--100)"
+          height="1em"
+          role="img"
+          style={
+            Object {
+              "verticalAlign": "-0.125em",
+            }
+          }
+          viewBox="0 0 576 512"
+          width="1em"
+        >
+          <path
+            d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          />
+        </svg>
+      </span>
+      Deprecated
+    </span>
+  </span>,
+  <div>
+    Dummy Tooltip
+  </div>,
+]
+`;
+
 exports[`The workspace status label component DevWorkspaces should render FAILED status correctly 1`] = `
 Array [
   <span
@@ -323,7 +363,7 @@ Array [
           />
         </svg>
       </span>
-      undefined
+      stopping
     </span>
   </span>,
   <div>
diff --git a/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/index.spec.tsx
index a2079b9ff..277ff2887 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/__tests__/index.spec.tsx
@@ -23,7 +23,7 @@ jest.mock('react-tooltip', () => {
 
 describe('The workspace status label component', () => {
   it('should render default status correctly', () => {
-    const element = <WorkspaceStatusLabel status={'undefined'} />;
+    const element = <WorkspaceStatusLabel status={WorkspaceStatus.STOPPING} />;
     expect(renderer.create(element).toJSON()).toMatchSnapshot();
   });
 
@@ -65,4 +65,11 @@ describe('The workspace status label component', () => {
       expect(renderer.create(element).toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('Deprecated workspaces', () => {
+    it('should render "Deprecated" status correctly', () => {
+      const element = <WorkspaceStatusLabel status={'Deprecated'} />;
+      expect(renderer.create(element).toJSON()).toMatchSnapshot();
+    });
+  });
 });
diff --git a/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/index.tsx b/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/index.tsx
index b4fa18b4c..bffac2631 100644
--- a/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/index.tsx
+++ b/packages/dashboard-frontend/src/components/WorkspaceStatusLabel/index.tsx
@@ -17,8 +17,13 @@ import {
 } from '@patternfly/react-icons/dist/js/icons';
 import React from 'react';
 import { Label } from '@patternfly/react-core';
-import { DevWorkspaceStatus, WorkspaceStatus } from '../../services/helpers/types';
+import {
+  DevWorkspaceStatus,
+  WorkspaceStatus,
+  DeprecatedWorkspaceStatus,
+} from '../../services/helpers/types';
 import ReactTooltip from 'react-tooltip';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 
 import styles from './index.module.css';
 
@@ -54,7 +59,7 @@ export const StoppedIcon = (props: { color?: ColorType }): React.ReactElement =>
 };
 
 type Props = {
-  status: string | undefined;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
 };
 
 class WorkspaceStatusLabel extends React.PureComponent<Props> {
@@ -65,7 +70,7 @@ class WorkspaceStatusLabel extends React.PureComponent<Props> {
 
     const tooltip = (
       <ReactTooltip
-        getContent={() => status}
+        getContent={() => (status === 'Deprecated' ? 'Deprecated workspace' : status)}
         backgroundColor="black"
         textColor="white"
         effect="solid"
@@ -166,6 +171,20 @@ class WorkspaceStatusLabel extends React.PureComponent<Props> {
             {tooltip}
           </>
         );
+      case 'Deprecated':
+        return (
+          <>
+            <Label
+              data-tip=""
+              className={styles.statusLabel}
+              color="orange"
+              icon={<ExclamationTriangleIcon color="var(--pf-global--warning-color--100)" />}
+            >
+              Deprecated
+            </Label>
+            {tooltip}
+          </>
+        );
       default:
         color = 'grey';
         return (
diff --git a/packages/dashboard-frontend/src/containers/IdeLoader.tsx b/packages/dashboard-frontend/src/containers/IdeLoader.tsx
index 1abdacdfa..ef7b490b4 100644
--- a/packages/dashboard-frontend/src/containers/IdeLoader.tsx
+++ b/packages/dashboard-frontend/src/containers/IdeLoader.tsx
@@ -20,7 +20,12 @@ import { lazyInject } from '../inversify.config';
 import IdeLoader, { AlertOptions } from '../pages/IdeLoader';
 import { Debounce } from '../services/helpers/debounce';
 import { delay } from '../services/helpers/delay';
-import { IdeLoaderTab } from '../services/helpers/types';
+import {
+  DeprecatedWorkspaceStatus,
+  DevWorkspaceStatus,
+  IdeLoaderTab,
+  WorkspaceStatus,
+} from '../services/helpers/types';
 import { AppState } from '../store';
 import { getEnvironment, isDevEnvironment } from '../services/helpers/environment';
 import * as WorkspaceStore from '../store/Workspaces';
@@ -57,7 +62,7 @@ type State = {
   hasStarted: boolean;
   isWaitingForRestart: boolean;
   isDevWorkspace: boolean;
-  status?: string;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
 };
 
 class IdeLoaderContainer extends React.PureComponent<Props, State> {
@@ -94,6 +99,9 @@ class IdeLoaderContainer extends React.PureComponent<Props, State> {
       workspace =>
         workspace.namespace === params.namespace && workspace.name === this.workspaceName,
     );
+    const status =
+      workspace?.status ||
+      (this.props.devworkspacesEnabled ? DevWorkspaceStatus.STOPPED : WorkspaceStatus.STOPPED);
     this.state = {
       currentStep: LoadIdeSteps.INITIALIZING,
       namespace,
@@ -103,6 +111,7 @@ class IdeLoaderContainer extends React.PureComponent<Props, State> {
       preselectedTabKey: this.preselectedTabKey,
       isWaitingForRestart: false,
       hasStarted: false,
+      status,
     };
 
     this.debounce.subscribe(async onStart => {
diff --git a/packages/dashboard-frontend/src/pages/IdeLoader/__tests__/IdeLoader.spec.tsx b/packages/dashboard-frontend/src/pages/IdeLoader/__tests__/IdeLoader.spec.tsx
index e0099de5c..3f743e771 100644
--- a/packages/dashboard-frontend/src/pages/IdeLoader/__tests__/IdeLoader.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/IdeLoader/__tests__/IdeLoader.spec.tsx
@@ -16,7 +16,7 @@ import { Store } from 'redux';
 import { Provider } from 'react-redux';
 import IdeLoaderTabs from '..';
 import { LoadIdeSteps } from '../../../containers/IdeLoader';
-import { WorkspaceStatus } from '../../../services/helpers/types';
+import { DeprecatedWorkspaceStatus, WorkspaceStatus } from '../../../services/helpers/types';
 import { FakeStoreBuilder } from '../../../store/__mocks__/storeBuilder';
 import { createFakeCheWorkspace } from '../../../store/__mocks__/workspace';
 
@@ -53,7 +53,7 @@ describe('The Ide Loader page  component', () => {
       workspaceName,
       workspaceId,
       hasError,
-      workspace.status,
+      workspace.status as WorkspaceStatus,
     );
 
     expect(component.toJSON()).toMatchSnapshot();
@@ -80,7 +80,7 @@ describe('The Ide Loader page  component', () => {
       workspaceName,
       workspaceId,
       hasError,
-      workspace.status,
+      workspace.status as WorkspaceStatus,
     );
 
     expect(component.toJSON()).toMatchSnapshot();
@@ -107,7 +107,7 @@ describe('The Ide Loader page  component', () => {
       workspaceName,
       workspaceId,
       false,
-      workspace.status,
+      workspace.status as WorkspaceStatus,
     );
 
     expect(component.toJSON()).toMatchSnapshot();
@@ -162,7 +162,7 @@ describe('The Ide Loader page  component', () => {
       workspaceName,
       workspaceId,
       false,
-      workspace.status,
+      workspace.status as WorkspaceStatus,
     );
 
     expect(component.toJSON()).toMatchSnapshot();
@@ -216,7 +216,7 @@ describe('The Ide Loader page  component', () => {
       workspaceName,
       workspaceId,
       false,
-      workspace.status,
+      workspace.status as WorkspaceStatus,
       ideUrl,
     );
 
@@ -230,7 +230,7 @@ function renderComponent(
   workspaceName: string,
   workspaceId: string,
   hasError: boolean,
-  workspaceStatus: string | undefined,
+  workspaceStatus: WorkspaceStatus | DeprecatedWorkspaceStatus,
   ideUrl?: string,
 ): ReactTestRenderer {
   return renderer.create(
diff --git a/packages/dashboard-frontend/src/pages/IdeLoader/index.tsx b/packages/dashboard-frontend/src/pages/IdeLoader/index.tsx
index 44c3d8513..15bf39c03 100644
--- a/packages/dashboard-frontend/src/pages/IdeLoader/index.tsx
+++ b/packages/dashboard-frontend/src/pages/IdeLoader/index.tsx
@@ -30,7 +30,12 @@ import Header from '../../components/Header';
 import WorkspaceLogs from '../../components/LogsTab';
 import { LoadIdeSteps } from '../../containers/IdeLoader';
 import { delay } from '../../services/helpers/delay';
-import { WorkspaceStatus, DevWorkspaceStatus, IdeLoaderTab } from '../../services/helpers/types';
+import {
+  WorkspaceStatus,
+  DevWorkspaceStatus,
+  IdeLoaderTab,
+  DeprecatedWorkspaceStatus,
+} from '../../services/helpers/types';
 
 import workspaceStatusLabelStyles from '../../components/WorkspaceStatusLabel/index.module.css';
 import './IdeLoader.styl';
@@ -42,7 +47,7 @@ type Props = {
   hasError: boolean;
   ideUrl?: string;
   preselectedTabKey?: IdeLoaderTab;
-  status: string | undefined;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   workspaceId: string;
   workspaceName: string;
   isDevWorkspace: boolean;
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx
index 611c7c5a7..11253581b 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx
@@ -26,10 +26,15 @@ import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
 import WorkspaceStatusLabel from '../../../components/WorkspaceStatusLabel';
 
 import styles from './index.module.css';
+import {
+  DeprecatedWorkspaceStatus,
+  DevWorkspaceStatus,
+  WorkspaceStatus,
+} from '../../../services/helpers/types';
 
 type Props = {
   workspacesLink: string;
-  status: string | undefined;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   workspaceName: string;
 };
 
diff --git a/packages/dashboard-frontend/src/services/bootstrap/index.ts b/packages/dashboard-frontend/src/services/bootstrap/index.ts
index 33f26afa7..c8c4e1b8b 100644
--- a/packages/dashboard-frontend/src/services/bootstrap/index.ts
+++ b/packages/dashboard-frontend/src/services/bootstrap/index.ts
@@ -36,6 +36,8 @@ import { selectDwEditorsPluginsList } from '../../store/Plugins/devWorkspacePlug
 import devfileApi from '../devfileApi';
 import { selectDefaultNamespace } from '../../store/InfrastructureNamespaces/selectors';
 import { selectDevWorkspacesResourceVersion } from '../../store/Workspaces/devWorkspaces/selectors';
+import { WorkspaceAdapter } from '../workspace-adapter';
+import { selectDeprecatedWorkspacesIds } from '../../store/Workspaces/selectors';
 
 /**
  * This class executes a few initial instructions
@@ -144,6 +146,8 @@ export default class Bootstrap {
   private async fetchWorkspaces(): Promise<void> {
     const { requestWorkspaces } = WorkspacesStore.actionCreators;
     await requestWorkspaces()(this.store.dispatch, this.store.getState, undefined);
+    const deprecatedIds = selectDeprecatedWorkspacesIds(this.store.getState());
+    WorkspaceAdapter.setDeprecatedIds(deprecatedIds);
   }
 
   private async fetchPlugins(settings: che.WorkspaceSettings): Promise<void> {
diff --git a/packages/dashboard-frontend/src/services/helpers/types.ts b/packages/dashboard-frontend/src/services/helpers/types.ts
index 3a8fc37e3..111a693ce 100644
--- a/packages/dashboard-frontend/src/services/helpers/types.ts
+++ b/packages/dashboard-frontend/src/services/helpers/types.ts
@@ -44,6 +44,8 @@ export type DevfileV2ProjectSource = {
   };
 };
 
+export type DeprecatedWorkspaceStatus = 'Deprecated';
+
 export enum WorkspaceStatus {
   RUNNING = 'RUNNING',
   STOPPING = 'STOPPING',
diff --git a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
index 95da3cf8b..e2d274c05 100644
--- a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
+++ b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
@@ -15,7 +15,7 @@ import {
   devWorkspaceToDevfile,
 } from '../workspace-client/devworkspace/converters';
 import { attributesToType, typeToAttributes } from '../storageTypes';
-import { DevWorkspaceStatus, WorkspaceStatus } from '../helpers/types';
+import { DeprecatedWorkspaceStatus, DevWorkspaceStatus, WorkspaceStatus } from '../helpers/types';
 import { DEVWORKSPACE_NEXT_START_ANNOTATION } from '../workspace-client/devworkspace/devWorkspaceClient';
 import devfileApi, { isDevfileV2, isDevWorkspace } from '../devfileApi';
 import { devWorkspaceKind } from '../devfileApi/devWorkspace';
@@ -32,7 +32,7 @@ export interface Workspace {
   readonly infrastructureNamespace: string;
   readonly created: number;
   readonly updated: number;
-  status: WorkspaceStatus | DevWorkspaceStatus;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   readonly ideUrl?: string;
   devfile: Devfile;
   storageType: che.WorkspaceStorageType;
@@ -48,6 +48,7 @@ export interface Workspace {
 export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>
   implements Workspace
 {
+  private static deprecatedIds: string[] = [];
   private workspace: T;
 
   constructor(workspace: T) {
@@ -59,6 +60,14 @@ export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>
     }
   }
 
+  static setDeprecatedIds(ids: string[]) {
+    WorkspaceAdapter.deprecatedIds = ids;
+  }
+
+  static isDeprecated(workspace: che.Workspace | devfileApi.DevWorkspace): boolean {
+    return WorkspaceAdapter.deprecatedIds.indexOf(WorkspaceAdapter.getId(workspace)) !== -1;
+  }
+
   static getId(workspace: che.Workspace | devfileApi.DevWorkspace): string {
     if (isCheWorkspace(workspace)) {
       return workspace.id;
@@ -72,7 +81,10 @@ export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>
 
   static getStatus(
     workspace: che.Workspace | devfileApi.DevWorkspace,
-  ): WorkspaceStatus | DevWorkspaceStatus {
+  ): WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus {
+    if (WorkspaceAdapter.isDeprecated(workspace)) {
+      return 'Deprecated';
+    }
     if (isCheWorkspace(workspace)) {
       return workspace.status as WorkspaceStatus;
     } else {
@@ -164,10 +176,14 @@ export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>
     return new Date().getTime();
   }
 
-  get status(): WorkspaceStatus | DevWorkspaceStatus {
+  get status(): WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus {
     return WorkspaceAdapter.getStatus(this.workspace);
   }
 
+  get isDeprecated(): boolean {
+    return WorkspaceAdapter.isDeprecated(this.workspace);
+  }
+
   get isStarting(): boolean {
     if (isCheWorkspace(this.workspace)) {
       return (this.workspace.status as WorkspaceStatus) === WorkspaceStatus.STARTING;
diff --git a/packages/dashboard-frontend/src/store/Workspaces/selectors.ts b/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
index 987e959c0..a238a17b9 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
@@ -15,6 +15,7 @@ import { AppState } from '..';
 import { constructWorkspace, Workspace } from '../../services/workspace-adapter';
 import { selectCheWorkspacesError } from './cheWorkspaces/selectors';
 import { selectDevWorkspacesError } from './devWorkspaces/selectors';
+import { selectDevworkspacesEnabled } from './Settings/selectors';
 
 const selectState = (state: AppState) => state.workspaces;
 const selectCheWorkspacesState = (state: AppState) => state.cheWorkspaces;
@@ -30,6 +31,20 @@ export const selectLogs = createSelector(
   },
 );
 
+/**
+ * Returns array of IDs of deprecated workspaces
+ */
+export const selectDeprecatedWorkspacesIds = createSelector(
+  selectCheWorkspacesState,
+  selectDevworkspacesEnabled,
+  (cheWorkspacesState, devworkspacesEnabled) => {
+    if (devworkspacesEnabled === false) {
+      return [];
+    }
+    return cheWorkspacesState.workspaces.map(workspace => workspace.id);
+  },
+);
+
 export const selectAllWorkspaces = createSelector(
   selectCheWorkspacesState,
   selectDevWorkspacesState,
@@ -88,15 +103,6 @@ const sortByNameFn = (workspaceA: Workspace, workspaceB: Workspace): -1 | 0 | 1
   }
 };
 
-export const selectAllWorkspacesSortedByTime = createSelector(
-  selectAllWorkspaces,
-  allWorkspaces => {
-    if (!allWorkspaces) {
-      return null;
-    }
-    return allWorkspaces.sort(sortByUpdatedTimeFn);
-  },
-);
 const sortByUpdatedTimeFn = (workspaceA: Workspace, workspaceB: Workspace): -1 | 0 | 1 => {
   const timeA = workspaceA.updated;
   const timeB = workspaceB.updated;
@@ -112,18 +118,18 @@ const sortByUpdatedTimeFn = (workspaceA: Workspace, workspaceB: Workspace): -1 |
 const selectRecentNumber = createSelector(selectState, state => state.recentNumber);
 export const selectRecentWorkspaces = createSelector(
   selectRecentNumber,
-  selectAllWorkspacesSortedByTime,
-  (recentNumber, workspacesSortedByTime) => {
-    if (!workspacesSortedByTime) {
-      return null;
-    }
-
-    return workspacesSortedByTime.slice(0, recentNumber);
-  },
+  selectAllWorkspaces,
+  selectDeprecatedWorkspacesIds,
+  (recentNumber, allWorkspaces, deprecatedWorkspacesIds) =>
+    allWorkspaces
+      .filter(workspace => deprecatedWorkspacesIds.indexOf(workspace.id) === -1)
+      .sort(sortByUpdatedTimeFn)
+      .slice(0, recentNumber),
+);
+export const selectAllWorkspacesNumber = createSelector(
+  selectAllWorkspaces,
+  allWorkspaces => allWorkspaces.length,
 );
-export const selectAllWorkspacesNumber = createSelector(selectAllWorkspaces, allWorkspaces => {
-  return allWorkspaces.length;
-});
 
 export const selectWorkspacesError = createSelector(
   selectCheWorkspacesError,

From 9beb3f30a7f72ecea78619ee2f7fa7d424652d0b Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Wed, 5 Jan 2022 12:21:02 +0200
Subject: [PATCH 03/20] feat: kebab menu actions for deprecated workspaces

---
 .../WorkspacesList/__tests__/index.spec.tsx   | 87 ++++++++++++++++---
 .../src/pages/WorkspacesList/index.tsx        | 11 +++
 .../src/services/workspace-adapter/index.ts   |  1 +
 3 files changed, 85 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
index f0ffdb6f5..acc5ffca7 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
@@ -18,9 +18,13 @@ import { render, screen, RenderResult, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import WorkspacesList from '..';
 import { BrandingData } from '../../../services/bootstrap/branding.constant';
-import { createFakeCheWorkspace } from '../../../store/__mocks__/workspace';
 import { WorkspaceAction, WorkspaceStatus } from '../../../services/helpers/types';
-import { constructWorkspace, Workspace } from '../../../services/workspace-adapter';
+import {
+  constructWorkspace,
+  Workspace,
+  WorkspaceAdapter,
+} from '../../../services/workspace-adapter';
+import { CheWorkspaceBuilder } from '../../../store/__mocks__/cheWorkspaceBuilder';
 
 jest.mock('../../../components/Head', () => {
   const FakeHead = () => {
@@ -54,7 +58,12 @@ let mockShowConfirmation = jest.fn().mockResolvedValue(undefined);
 describe('Workspaces List Page', () => {
   beforeEach(() => {
     workspaces = [0, 1, 2, 3, 4]
-      .map(i => createFakeCheWorkspace('workspace-' + i, 'workspace-' + i))
+      .map(i =>
+        new CheWorkspaceBuilder()
+          .withId('workspace-' + i)
+          .withName('workspace-' + i)
+          .build(),
+      )
       .map(workspace => constructWorkspace(workspace));
     isDeleted = [];
   });
@@ -353,13 +362,12 @@ describe('Workspaces List Page', () => {
         activeEnv: 'default',
       };
       workspaces[0] = constructWorkspace(
-        createFakeCheWorkspace(
-          'workspace-' + 0,
-          'workspace-' + 0,
-          undefined,
-          WorkspaceStatus.RUNNING,
-          runtime,
-        ),
+        new CheWorkspaceBuilder()
+          .withId('workspace-0')
+          .withName('workspace-0')
+          .withStatus('RUNNING')
+          .withRuntime(runtime)
+          .build(),
       );
 
       renderComponent();
@@ -388,6 +396,57 @@ describe('Workspaces List Page', () => {
 
       expect(mockOnAction).toHaveBeenCalledWith(WorkspaceAction.DELETE_WORKSPACE, workspaces[0].id);
     });
+
+    describe('with deprecated workspaces', () => {
+      test('actions', () => {
+        const deprecatedWorkspaceId = 'deprecated-workspace-id';
+        WorkspaceAdapter.setDeprecatedIds([deprecatedWorkspaceId]);
+        const workspaces: Workspace[] = [
+          new CheWorkspaceBuilder()
+            .withId(deprecatedWorkspaceId)
+            .withName('workspace-name')
+            .build(),
+        ].map(constructWorkspace);
+        renderComponent(workspaces);
+
+        // no menu items at all initially
+        let menuItems = screen.queryAllByRole('menuitem');
+        expect(menuItems.length).toEqual(0);
+
+        const actionButtons = screen.getAllByRole('button', { name: /actions/i });
+        // click the kebab button on the first workspace row
+        userEvent.click(actionButtons[0]);
+        expect(actionButtons[0]).toBeEnabled();
+
+        // check number of menu items shown
+        menuItems = screen.getAllByRole('menuitem');
+        expect(menuItems.length).toEqual(1);
+
+        const deleteAction = screen.queryByRole('button', { name: /delete workspace/i });
+        expect(deleteAction).not.toBeNull();
+        expect(deleteAction).toBeEnabled();
+      });
+
+      test('status icon', () => {
+        const deprecatedWorkspaceId = 'deprecated-workspace-id';
+        // mark the workspace as deprecated
+        WorkspaceAdapter.setDeprecatedIds([deprecatedWorkspaceId]);
+        const workspaces: Workspace[] = [
+          new CheWorkspaceBuilder()
+            .withId(deprecatedWorkspaceId)
+            .withName('workspace-name')
+            .build(),
+        ].map(constructWorkspace);
+        renderComponent(workspaces);
+
+        const rows = screen.getAllByRole('row');
+
+        // skip headings row, take the workspace row and get the workspace status indicator
+        const statusIcon = rows[1].querySelector('[data-testid="workspace-status-indicator"]');
+        expect(statusIcon).not.toBeNull();
+        expect(statusIcon!.getAttribute('data-tip')).toEqual('Deprecated workspace');
+      });
+    });
   });
 
   describe('Empty State', () => {
@@ -418,19 +477,19 @@ describe('Workspaces List Page', () => {
   });
 });
 
-function getComponent(): React.ReactElement {
+function getComponent(_workspaces = workspaces): React.ReactElement {
   const history = createHashHistory();
   return (
     <WorkspacesList
       branding={brandingData}
       history={history}
-      workspaces={workspaces}
+      workspaces={_workspaces}
       onAction={mockOnAction}
       showConfirmation={mockShowConfirmation}
       toDelete={isDeleted}
     ></WorkspacesList>
   );
 }
-function renderComponent(): RenderResult {
-  return render(getComponent());
+function renderComponent(workspaces?: Workspace[]): RenderResult {
+  return render(getComponent(workspaces));
 }
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
index 4f4ce94e4..53029d211 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
@@ -157,6 +157,17 @@ export default class WorkspacesList extends React.PureComponent<Props, State> {
       return [];
     }
 
+    if (workspace.isDeprecated) {
+      return [
+        {
+          title: 'Delete Workspace',
+          onClick: (event, rowId, rowData) =>
+            this.handleAction(WorkspaceAction.DELETE_WORKSPACE, rowData),
+          isDisabled: false === this.isEnabledAction(WorkspaceAction.DELETE_WORKSPACE, workspace),
+        },
+      ];
+    }
+
     return [
       {
         title: 'Open in Verbose mode',
diff --git a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
index e2d274c05..148936628 100644
--- a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
+++ b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
@@ -43,6 +43,7 @@ export interface Workspace {
   readonly isRunning: boolean;
   readonly hasError: boolean;
   readonly isDevWorkspace: boolean;
+  readonly isDeprecated: boolean;
 }
 
 export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>

From a50a923117112c4b51a110c698d97a158691224a Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Wed, 5 Jan 2022 15:54:58 +0200
Subject: [PATCH 04/20] feat: actions dropdown actions for deprecated workspace

---
 .../Header/Actions/Actions.styl               |   5 -
 .../{Actions.spec.tsx => index.spec.tsx}      | 105 ++++++++++++------
 .../Header/Actions/index.module.css           |  19 ++++
 .../WorkspaceDetails/Header/Actions/index.tsx |  19 +++-
 4 files changed, 105 insertions(+), 43 deletions(-)
 delete mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/Actions.styl
 rename packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/{Actions.spec.tsx => index.spec.tsx} (67%)
 create mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.module.css

diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/Actions.styl b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/Actions.styl
deleted file mode 100644
index b64d74f64..000000000
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/Actions.styl
+++ /dev/null
@@ -1,5 +0,0 @@
-.workspace-action-selector
-  button
-    border-radius 3px
-  ul
-    padding 0
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/Actions.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
similarity index 67%
rename from packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/Actions.spec.tsx
rename to packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
index 7dc99bad6..c9c2c00a0 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/Actions.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
@@ -15,11 +15,17 @@ import { createHashHistory, History } from 'history';
 import React from 'react';
 import { Provider } from 'react-redux';
 import { HeaderActionSelect } from '..';
-import { WorkspaceAction, WorkspaceStatus } from '../../../../../services/helpers/types';
+import {
+  WorkspaceAction,
+  WorkspaceStatus,
+  DeprecatedWorkspaceStatus,
+} from '../../../../../services/helpers/types';
 import { Workspace } from '../../../../../services/workspace-adapter';
 import { AppThunk } from '../../../../../store';
 import { ActionCreators, ResourceQueryParams } from '../../../../../store/Workspaces';
 import { FakeStoreBuilder } from '../../../../../store/__mocks__/storeBuilder';
+import { CheWorkspaceBuilder } from '../../../../../store/__mocks__/cheWorkspaceBuilder';
+import { Store } from 'redux';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
 jest.mock('../../../../../store/Workspaces/index', () => {
@@ -43,36 +49,68 @@ jest.mock('../../../../../store/Workspaces/index', () => {
 const namespace = 'che';
 const workspaceName = 'test-workspace-name';
 const workspaceId = 'test-workspace-id';
-const workspaceStoppedStatus = WorkspaceStatus.STOPPED;
-const store = new FakeStoreBuilder()
-  .withWorkspaces({
-    workspaceId,
-    workspaceName,
-  })
-  .withInfrastructureNamespace([{ name: namespace, attributes: { phase: 'Active' } }], false)
-  .withCheWorkspaces({
-    workspaces: [
-      {
-        id: workspaceId,
-        namespace,
-        status: WorkspaceStatus[workspaceStoppedStatus],
-        devfile: {
-          apiVersion: 'v1',
-          components: [],
-          metadata: {
-            name: workspaceName,
-          },
-        },
-      },
-    ],
-  })
-  .build();
+
+let cheWorkspace: che.Workspace;
+let store: Store;
 
 describe('Workspace WorkspaceAction widget', () => {
+  beforeEach(() => {
+    cheWorkspace = new CheWorkspaceBuilder()
+      .withId(workspaceId)
+      .withName(workspaceName)
+      .withNamespace(namespace)
+      .withStatus(WorkspaceStatus.STOPPED)
+      .withDevfile({
+        apiVersion: 'v1',
+        components: [],
+        metadata: {
+          name: workspaceName,
+        },
+      })
+      .build();
+    store = new FakeStoreBuilder()
+      .withWorkspaces({
+        workspaceId,
+        workspaceName,
+      })
+      .withInfrastructureNamespace([{ name: namespace, attributes: { phase: 'Active' } }], false)
+      .withCheWorkspaces({
+        workspaces: [cheWorkspace],
+      })
+      .build();
+  });
+
+  it('should provide correct number of actions for a regular workspace', () => {
+    const history = createHashHistory();
+    const component = createComponent(history);
+
+    renderComponent(component);
+
+    const actionDropdown = screen.getByTestId(`${workspaceId}-action-dropdown`);
+    actionDropdown.click();
+
+    const menuitems = screen.getAllByRole('menuitem');
+    expect(menuitems.length).toEqual(6);
+  });
+
+  it('should provide correct number of actions for a deprecated workspace', () => {
+    const history = createHashHistory();
+    const component = createComponent(history, 'Deprecated');
+
+    renderComponent(component);
+
+    const actionDropdown = screen.getByTestId(`${workspaceId}-action-dropdown`);
+    actionDropdown.click();
+
+    const menuitems = screen.getAllByRole('menuitem');
+    expect(menuitems.length).toEqual(1);
+    expect(menuitems[0]).toHaveTextContent('Delete Workspace');
+  });
+
   it('should call the callback with OPEN action', async () => {
     const action = WorkspaceAction.OPEN_IDE;
     const history = createHashHistory();
-    const component = createComponent(workspaceStoppedStatus, workspaceName, workspaceId, history);
+    const component = createComponent(history);
 
     renderComponent(component);
 
@@ -92,7 +130,7 @@ describe('Workspace WorkspaceAction widget', () => {
   it('should call the callback with OPEN_IN_VERBOSE_MODE action', async () => {
     const action = WorkspaceAction.START_DEBUG_AND_OPEN_LOGS;
     const history = createHashHistory();
-    const component = createComponent(workspaceStoppedStatus, workspaceName, workspaceId, history);
+    const component = createComponent(history);
 
     renderComponent(component);
 
@@ -112,7 +150,7 @@ describe('Workspace WorkspaceAction widget', () => {
   it('should call the callback with START_IN_BACKGROUND action', () => {
     const action = WorkspaceAction.START_IN_BACKGROUND;
     const history = createHashHistory();
-    const component = createComponent(workspaceStoppedStatus, workspaceName, workspaceId, history);
+    const component = createComponent(history);
 
     renderComponent(component);
 
@@ -130,7 +168,7 @@ describe('Workspace WorkspaceAction widget', () => {
   it('should not call the callback with STOP_WORKSPACE action if disabled', () => {
     const action = WorkspaceAction.STOP_WORKSPACE;
     const history = createHashHistory();
-    renderComponent(createComponent(workspaceStoppedStatus, workspaceName, workspaceId, history));
+    renderComponent(createComponent(history));
 
     const actionDropdown = screen.getByTestId(`${workspaceId}-action-dropdown`);
     actionDropdown.click();
@@ -145,10 +183,9 @@ describe('Workspace WorkspaceAction widget', () => {
 
   it('should call the callback with STOP_WORKSPACE action', () => {
     const action = WorkspaceAction.STOP_WORKSPACE;
-    const workspaceStatus = WorkspaceStatus.RUNNING;
     const history = createHashHistory();
 
-    renderComponent(createComponent(workspaceStatus, workspaceName, workspaceId, history));
+    renderComponent(createComponent(history, WorkspaceStatus.RUNNING));
 
     const actionDropdown = screen.getByTestId(`${workspaceId}-action-dropdown`);
     actionDropdown.click();
@@ -163,17 +200,15 @@ describe('Workspace WorkspaceAction widget', () => {
 });
 
 function createComponent(
-  workspaceStatus: WorkspaceStatus,
-  workspaceName: string,
-  workspaceId: string,
   history: History,
+  status: WorkspaceStatus | DeprecatedWorkspaceStatus = WorkspaceStatus.STOPPED,
 ): React.ReactElement {
   return (
     <HeaderActionSelect
       workspaceId={workspaceId}
       workspaceName={workspaceName}
       history={history}
-      status={workspaceStatus}
+      status={status}
     />
   );
 }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.module.css b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.module.css
new file mode 100644
index 000000000..e83049a42
--- /dev/null
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.module.css
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2018-2021 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
+ */
+
+.workspaceActionSelector button {
+  border-radius: 3px;
+}
+
+.workspaceActionSelector ul {
+  padding: 0;
+}
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
index 205693a8b..a1bd95d85 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
@@ -20,6 +20,7 @@ import {
   WorkspaceAction,
   WorkspaceStatus,
   DevWorkspaceStatus,
+  DeprecatedWorkspaceStatus,
 } from '../../../../services/helpers/types';
 import {
   ActionContextType,
@@ -29,12 +30,12 @@ import { lazyInject } from '../../../../inversify.config';
 import { AppAlerts } from '../../../../services/alerts/appAlerts';
 import getRandomString from '../../../../services/helpers/random';
 
-import './Actions.styl';
+import styles from './index.module.css';
 
 type Props = {
   workspaceId: string;
   workspaceName: string;
-  status: string | undefined;
+  status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   history: History;
 };
 
@@ -104,6 +105,18 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
   private getDropdownItems(context: ActionContextType): React.ReactNode[] {
     const { status } = this.props;
 
+    if (status === 'Deprecated') {
+      return [
+        <DropdownItem
+          key={`action-${WorkspaceAction.DELETE_WORKSPACE}`}
+          isDisabled={false}
+          onClick={async () => this.handleSelect(WorkspaceAction.DELETE_WORKSPACE, context)}
+        >
+          <div>{WorkspaceAction.DELETE_WORKSPACE}</div>
+        </DropdownItem>,
+      ];
+    }
+
     return [
       <DropdownItem
         key={`action-${WorkspaceAction.OPEN_IDE}`}
@@ -163,7 +176,7 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
         <WorkspaceActionsConsumer>
           {context => (
             <Dropdown
-              className="workspace-action-selector"
+              className={styles.workspaceActionSelector}
               toggle={
                 <DropdownToggle
                   data-testid={`${workspaceId}-action-dropdown`}

From 357f06000f74d658e361290ebbdabd04febfa233 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Wed, 5 Jan 2022 17:15:51 +0200
Subject: [PATCH 05/20] feat: devfile editor in readonly mode for deprecated
 workspaces

---
 .../src/pages/WorkspaceDetails/EditorTab/index.tsx              | 2 ++
 .../src/pages/WorkspaceDetails/OverviewTab/index.tsx            | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
index 06004636f..04b2c010b 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
@@ -141,6 +141,7 @@ export class EditorTab extends React.PureComponent<Props, State> {
   public render(): React.ReactElement {
     const originDevfile = this.props.workspace.devfile;
     const { devfile, additionSchema } = this.state;
+    const isReadonly = this.props.workspace.isDeprecated;
 
     return (
       <React.Fragment>
@@ -207,6 +208,7 @@ export class EditorTab extends React.PureComponent<Props, State> {
             devfile={originDevfile}
             decorationPattern="location[ \t]*(.*)[ \t]*$"
             onChange={(newValue, isValid) => this.onDevfileChange(newValue, isValid)}
+            isReadonly={isReadonly}
           />
           <Flex direction={{ default: 'column' }}>
             <FlexItem align={{ default: 'alignRight' }} className={styles.buttonsGroup}>
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
index d8283a18a..f667a10e7 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
@@ -76,7 +76,7 @@ export class OverviewTab extends React.Component<Props, State> {
     const workspaceName = this.props.workspace.name;
     const namespace = this.state.infrastructureNamespace;
     const projects = this.props.workspace.projects;
-    const readonly = isDevWorkspace(this.props.workspace.ref);
+    const readonly = this.props.workspace.isDeprecated || this.props.workspace.isDevWorkspace;
 
     return (
       <React.Fragment>

From d051f1775c1a33dc83c94f4059d46aa04b68687a Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Tue, 11 Jan 2022 14:17:41 +0200
Subject: [PATCH 06/20] feat: old workspaces conversion action

---
 .../src/containers/WorkspaceActions/index.tsx | 90 +++++++++++++-----
 .../src/containers/WorkspacesList.tsx         | 13 ++-
 .../__tests__/WorkspacesList.spec.tsx         | 34 ++++---
 .../Header/Actions/__tests__/index.spec.tsx   | 10 +-
 .../WorkspaceDetails/Header/Actions/index.tsx | 64 ++++++++++---
 .../src/pages/WorkspaceDetails/index.tsx      | 92 ++++++++++++++-----
 .../src/pages/WorkspacesList/Rows.tsx         |  4 +-
 .../src/services/helpers/types.ts             |  1 +
 .../src/store/Workspaces/index.ts             |  6 +-
 .../dashboard-frontend/src/typings/che.d.ts   |  1 +
 10 files changed, 231 insertions(+), 84 deletions(-)

diff --git a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
index 58f7337ea..db1036033 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
@@ -35,6 +35,9 @@ import { selectAllWorkspaces } from '../../store/Workspaces/selectors';
 import * as WorkspacesStore from '../../store/Workspaces';
 import { WorkspaceActionsContext } from './context';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
+import { convertDevfileV1toDevfileV2 } from '../../services/devfile/converters';
+import { isDevWorkspace } from '../../services/devfileApi';
+import { selectDefaultNamespace } from '../../store/InfrastructureNamespaces/selectors';
 
 type Deferred = {
   resolve: () => void;
@@ -70,7 +73,7 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
   /**
    * open the action in a new tab for DevWorkspaces
    */
-  async handleLocation(location: Location, workspace: Workspace): Promise<Location | void> {
+  private async handleLocation(location: Location, workspace: Workspace): Promise<Location | void> {
     if (workspace.isDevWorkspace) {
       const link = toHref(this.props.history, location);
       window.open(link, workspace.id);
@@ -79,6 +82,61 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
     }
   }
 
+  private async deleteWorkspace(
+    action: WorkspaceAction,
+    workspace: Workspace,
+  ): Promise<Location | void> {
+    if (isCheWorkspace(workspace.ref) && !(workspace.isStopped || workspace.hasError)) {
+      throw new Error('Only STOPPED workspaces can be deleted.');
+    }
+
+    this.deleting.add(workspace.id);
+    this.setState({
+      toDelete: Array.from(this.deleting),
+    });
+
+    try {
+      await this.props.deleteWorkspace(workspace);
+      this.deleting.delete(workspace.id);
+      this.setState({
+        toDelete: Array.from(this.deleting),
+      });
+      return buildWorkspacesLocation();
+    } catch (e) {
+      this.deleting.delete(workspace.id);
+      this.setState({
+        toDelete: Array.from(this.deleting),
+      });
+      console.error(`Action "${action}" failed with workspace "${workspace.name}". ${e}`);
+    }
+  }
+
+  private async convertWorkspace(
+    action: WorkspaceAction,
+    workspace: Workspace,
+  ): Promise<Location | void> {
+    try {
+      if (isDevWorkspace(workspace.ref)) {
+        throw new Error('This workspace cannot be converted to DevWorkspaces.');
+      }
+
+      const devfileV1 = workspace.devfile as che.WorkspaceDevfile;
+      const devfileV2 = await convertDevfileV1toDevfileV2(devfileV1);
+      const defaultNamespace = this.props.defaultNamespace.name;
+      // create a new workspace
+      await this.props.createWorkspaceFromDevfile(devfileV2, undefined, defaultNamespace, {});
+      // add 'converted' attribute to the old workspace
+      // to be able to hide it on the Workspaces page
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      workspace.ref.attributes!.converted = new Date().toISOString();
+      await this.props.updateWorkspace(workspace);
+    } catch (e) {
+      const errorMessage = `Action "${action}" failed with workspace "${workspace.name}". ${e}`;
+      console.error(errorMessage);
+      throw new Error(errorMessage);
+    }
+  }
+
   /**
    * Performs an action on the given workspace
    */
@@ -126,29 +184,7 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
         return buildDetailsLocation(workspace, WorkspaceDetailsTab.DEVFILE);
       case WorkspaceAction.DELETE_WORKSPACE:
         {
-          if (isCheWorkspace(workspace.ref) && !(workspace.isStopped || workspace.hasError)) {
-            throw new Error('Only STOPPED workspaces can be deleted.');
-          }
-
-          this.deleting.add(id);
-          this.setState({
-            toDelete: Array.from(this.deleting),
-          });
-
-          try {
-            await this.props.deleteWorkspace(workspace);
-            this.deleting.delete(id);
-            this.setState({
-              toDelete: Array.from(this.deleting),
-            });
-            return buildWorkspacesLocation();
-          } catch (e) {
-            this.deleting.delete(id);
-            this.setState({
-              toDelete: Array.from(this.deleting),
-            });
-            console.error(`Action failed: "${action}", ID: "${id}", e: ${e}.`);
-          }
+          await this.deleteWorkspace(action, workspace);
         }
         break;
       case WorkspaceAction.RESTART_WORKSPACE:
@@ -156,6 +192,11 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
           await this.props.restartWorkspace(workspace);
         }
         break;
+      case WorkspaceAction.CONVERT:
+        {
+          await this.convertWorkspace(action, workspace);
+        }
+        break;
       default:
         console.warn(`Unhandled action type: "${action}".`);
     }
@@ -290,6 +331,7 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
 
 const mapStateToProps = (state: AppState) => ({
   allWorkspaces: selectAllWorkspaces(state),
+  defaultNamespace: selectDefaultNamespace(state),
 });
 
 const connector = connect(mapStateToProps, WorkspacesStore.actionCreators);
diff --git a/packages/dashboard-frontend/src/containers/WorkspacesList.tsx b/packages/dashboard-frontend/src/containers/WorkspacesList.tsx
index 633d66db9..5fa21c911 100644
--- a/packages/dashboard-frontend/src/containers/WorkspacesList.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspacesList.tsx
@@ -28,6 +28,7 @@ import { lazyInject } from '../inversify.config';
 import { AppAlerts } from '../services/alerts/appAlerts';
 import { AlertVariant } from '@patternfly/react-core';
 import { selectBranding } from '../store/Branding/selectors';
+import { isDevWorkspace } from '../services/devfileApi';
 
 type Props = MappedProps & { history: History };
 
@@ -62,6 +63,16 @@ export class WorkspacesListContainer extends React.PureComponent<Props> {
       return Fallback;
     }
 
+    const filteredWorkspaces = allWorkspaces.filter(workspace => {
+      if (workspace.isDeprecated === false) {
+        return true;
+      }
+      if (isDevWorkspace(workspace.ref)) {
+        return true;
+      }
+      return workspace.ref.attributes?.converted === undefined;
+    });
+
     return (
       <WorkspaceActionsProvider history={history}>
         <WorkspaceActionsConsumer>
@@ -69,7 +80,7 @@ export class WorkspacesListContainer extends React.PureComponent<Props> {
             <WorkspacesList
               branding={branding}
               history={history}
-              workspaces={allWorkspaces}
+              workspaces={filteredWorkspaces}
               onAction={(action, id) => context.handleAction(action, id)}
               showConfirmation={wantDelete => context.showConfirmation(wantDelete)}
               toDelete={context.toDelete}
diff --git a/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx b/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx
index d1af7758c..7602c6a3d 100644
--- a/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx
+++ b/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx
@@ -20,11 +20,13 @@ import { Action, Store } from 'redux';
 import { ActionCreators } from '../../store/Workspaces';
 import WorkspacesList from '../WorkspacesList';
 import { FakeStoreBuilder } from '../../store/__mocks__/storeBuilder';
-import { createFakeCheWorkspace } from '../../store/__mocks__/workspace';
+import { CheWorkspaceBuilder } from '../../store/__mocks__/cheWorkspaceBuilder';
 
-let isLoadingResult = false;
 let workspaces = [0, 1, 2, 3, 4].map(i =>
-  createFakeCheWorkspace('workspace-' + i, 'workspace-' + i),
+  new CheWorkspaceBuilder()
+    .withId('workspace-' + i)
+    .withName('workspace-' + i)
+    .build(),
 );
 
 jest.mock('../../store/Workspaces/index', () => {
@@ -36,13 +38,6 @@ jest.mock('../../store/Workspaces/index', () => {
     } as ActionCreators,
   };
 });
-jest.mock('../../store/Workspaces/selectors.ts', () => {
-  return {
-    selectIsLoading: jest.fn(() => isLoadingResult),
-    selectAllWorkspaces: () => workspaces,
-    selectWorkspacesError: () => undefined,
-  };
-});
 jest.mock('../../pages/WorkspacesList', () => {
   const FakeWorkspacesList = () => <div>Workspaces List Page</div>;
   FakeWorkspacesList.displayName = 'WorkspacesList';
@@ -65,17 +60,16 @@ describe('Workspaces List Container', () => {
 
   describe('while fetching workspaces', () => {
     it('should show the fallback', () => {
-      isLoadingResult = true;
       workspaces = [];
-      renderComponent(workspaces);
+      renderComponent(workspaces, true);
 
       expect(screen.queryByText('Fallback Spinner')).toBeTruthy();
     });
   });
 });
 
-function renderComponent(workspaces: che.Workspace[]): RenderResult {
-  const store = createFakeStore(workspaces);
+function renderComponent(workspaces: che.Workspace[], isLoading = false): RenderResult {
+  const store = createFakeStore(workspaces, isLoading);
   const history = createHashHistory();
   return render(
     <Provider store={store}>
@@ -84,10 +78,14 @@ function renderComponent(workspaces: che.Workspace[]): RenderResult {
   );
 }
 
-function createFakeStore(workspaces: che.Workspace[]): Store {
+function createFakeStore(workspaces: che.Workspace[], isLoading: boolean): Store {
   return new FakeStoreBuilder()
-    .withCheWorkspaces({
-      workspaces,
-    })
+    .withCheWorkspaces(
+      {
+        workspaces,
+      },
+      isLoading,
+    )
+    .withWorkspaces({}, isLoading)
     .build();
 }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
index c9c2c00a0..b15111734 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
@@ -46,6 +46,9 @@ jest.mock('../../../../../store/Workspaces/index', () => {
 });
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
+const mockOnConversionAlert = jest.fn();
+const mockCloseConversionAlert = jest.fn();
+
 const namespace = 'che';
 const workspaceName = 'test-workspace-name';
 const workspaceId = 'test-workspace-id';
@@ -103,8 +106,9 @@ describe('Workspace WorkspaceAction widget', () => {
     actionDropdown.click();
 
     const menuitems = screen.getAllByRole('menuitem');
-    expect(menuitems.length).toEqual(1);
-    expect(menuitems[0]).toHaveTextContent('Delete Workspace');
+    expect(menuitems.length).toEqual(2);
+    expect(menuitems[0]).toHaveTextContent('Convert');
+    expect(menuitems[1]).toHaveTextContent('Delete Workspace');
   });
 
   it('should call the callback with OPEN action', async () => {
@@ -209,6 +213,8 @@ function createComponent(
       workspaceName={workspaceName}
       history={history}
       status={status}
+      onConversionAlert={mockOnConversionAlert}
+      closeConversionAlert={mockCloseConversionAlert}
     />
   );
 }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
index a1bd95d85..2d26c9b39 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
@@ -37,6 +37,8 @@ type Props = {
   workspaceName: string;
   status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   history: History;
+  onConversionAlert: (errorMessage: string) => void;
+  closeConversionAlert: () => void;
 };
 
 type State = {
@@ -64,7 +66,7 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
     this.setState({ isExpanded });
   }
 
-  private async handleSelect(
+  private async handleSelectedAction(
     selectedAction: WorkspaceAction,
     context: ActionContextType,
   ): Promise<void> {
@@ -86,11 +88,29 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
       this.props.history.push(nextPath);
     } catch (e) {
       const errorMessage = common.helpers.errors.getMessage(e);
-      const message =
-        `Unable to ${selectedAction.toLocaleLowerCase()} ${this.props.workspaceName}. ` +
-        errorMessage.replace('Error: ', '');
-      this.showAlert(message);
-      console.warn(message);
+      this.showAlert(errorMessage);
+      console.warn(errorMessage);
+    }
+  }
+
+  private async handleConversion(
+    selectedAction: WorkspaceAction,
+    context: ActionContextType,
+  ): Promise<void> {
+    this.setState({
+      isExpanded: false,
+    });
+    try {
+      // todo implement redirecting to the new workspace page
+      const nextPath = await context.handleAction(selectedAction, this.props.workspaceId);
+      if (!nextPath) {
+        return;
+      }
+      this.props.history.push(nextPath);
+    } catch (e) {
+      const errorMessage = common.helpers.errors.getMessage(e);
+      this.props.onConversionAlert(errorMessage);
+      console.warn(errorMessage);
     }
   }
 
@@ -107,10 +127,24 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
 
     if (status === 'Deprecated') {
       return [
+        <DropdownItem
+          key={`action-${WorkspaceAction.CONVERT}`}
+          // todo isDisabled={isConverted}
+          isDisabled={false}
+          onClick={async () => {
+            this.props.closeConversionAlert();
+            this.handleConversion(WorkspaceAction.CONVERT, context);
+          }}
+        >
+          <div>{WorkspaceAction.CONVERT}</div>
+        </DropdownItem>,
         <DropdownItem
           key={`action-${WorkspaceAction.DELETE_WORKSPACE}`}
           isDisabled={false}
-          onClick={async () => this.handleSelect(WorkspaceAction.DELETE_WORKSPACE, context)}
+          onClick={async () => {
+            this.props.closeConversionAlert();
+            this.handleSelectedAction(WorkspaceAction.CONVERT, context);
+          }}
         >
           <div>{WorkspaceAction.DELETE_WORKSPACE}</div>
         </DropdownItem>,
@@ -121,35 +155,39 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
       <DropdownItem
         key={`action-${WorkspaceAction.OPEN_IDE}`}
         isDisabled={status === DevWorkspaceStatus.TERMINATING}
-        onClick={async () => this.handleSelect(WorkspaceAction.OPEN_IDE, context)}
+        onClick={async () => this.handleSelectedAction(WorkspaceAction.OPEN_IDE, context)}
       >
         <div>{WorkspaceAction.OPEN_IDE}</div>
       </DropdownItem>,
       <DropdownItem
         key={`action-${WorkspaceAction.START_DEBUG_AND_OPEN_LOGS}`}
         isDisabled={status === DevWorkspaceStatus.TERMINATING || status !== WorkspaceStatus.STOPPED}
-        onClick={async () => this.handleSelect(WorkspaceAction.START_DEBUG_AND_OPEN_LOGS, context)}
+        onClick={async () =>
+          this.handleSelectedAction(WorkspaceAction.START_DEBUG_AND_OPEN_LOGS, context)
+        }
       >
         <div>{WorkspaceAction.START_DEBUG_AND_OPEN_LOGS}</div>
       </DropdownItem>,
       <DropdownItem
         key={`action-${WorkspaceAction.START_IN_BACKGROUND}`}
         isDisabled={status === DevWorkspaceStatus.TERMINATING || status !== WorkspaceStatus.STOPPED}
-        onClick={async () => this.handleSelect(WorkspaceAction.START_IN_BACKGROUND, context)}
+        onClick={async () =>
+          this.handleSelectedAction(WorkspaceAction.START_IN_BACKGROUND, context)
+        }
       >
         <div>{WorkspaceAction.START_IN_BACKGROUND}</div>
       </DropdownItem>,
       <DropdownItem
         key={`action-${WorkspaceAction.RESTART_WORKSPACE}`}
         isDisabled={status === DevWorkspaceStatus.TERMINATING || status === WorkspaceStatus.STOPPED}
-        onClick={async () => this.handleSelect(WorkspaceAction.RESTART_WORKSPACE, context)}
+        onClick={async () => this.handleSelectedAction(WorkspaceAction.RESTART_WORKSPACE, context)}
       >
         <div>{WorkspaceAction.RESTART_WORKSPACE}</div>
       </DropdownItem>,
       <DropdownItem
         key={`action-${WorkspaceAction.STOP_WORKSPACE}`}
         isDisabled={status === DevWorkspaceStatus.TERMINATING || status === WorkspaceStatus.STOPPED}
-        onClick={async () => this.handleSelect(WorkspaceAction.STOP_WORKSPACE, context)}
+        onClick={async () => this.handleSelectedAction(WorkspaceAction.STOP_WORKSPACE, context)}
       >
         <div>{WorkspaceAction.STOP_WORKSPACE}</div>
       </DropdownItem>,
@@ -160,7 +198,7 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
           status === WorkspaceStatus.STARTING ||
           status === WorkspaceStatus.STOPPING
         }
-        onClick={async () => this.handleSelect(WorkspaceAction.DELETE_WORKSPACE, context)}
+        onClick={async () => this.handleSelectedAction(WorkspaceAction.DELETE_WORKSPACE, context)}
       >
         <div>{WorkspaceAction.DELETE_WORKSPACE}</div>
       </DropdownItem>,
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
index 687a987e2..34a362f53 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
@@ -15,6 +15,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import {
   Alert,
   AlertActionCloseButton,
+  AlertGroup,
   AlertVariant,
   PageSection,
   PageSectionVariants,
@@ -49,7 +50,8 @@ type Props = {
 type State = {
   activeTabKey: WorkspaceDetailsTab;
   clickedTabIndex?: WorkspaceDetailsTab;
-  hasWarningMessage?: boolean;
+  inlineAlertConversionError?: string;
+  inlineAlertRestartWarning?: boolean;
 };
 
 export class WorkspaceDetails extends React.PureComponent<Props, State> {
@@ -76,7 +78,6 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
 
     this.state = {
       activeTabKey: this.getActiveTabKey(this.props.history.location.search),
-      hasWarningMessage: false,
     };
 
     // Toggle currently active tab
@@ -105,6 +106,66 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
     };
   }
 
+  private handleConversionAlert(errorMessage: string): void {
+    this.setState({
+      inlineAlertConversionError: errorMessage,
+    });
+  }
+
+  private handleCloseConversionAlert(): void {
+    this.setState({
+      inlineAlertConversionError: undefined,
+    });
+  }
+
+  private handleRestartWarning(): void {
+    this.setState({
+      inlineAlertRestartWarning: true,
+    });
+  }
+
+  private handleCloseRestartWarning(): void {
+    this.setState({
+      inlineAlertRestartWarning: false,
+    });
+  }
+
+  private buildInlineAlerts(): React.ReactElement {
+    const { inlineAlertConversionError, inlineAlertRestartWarning } = this.state;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const workspaceName = this.props.workspace!.name;
+    return (
+      <AlertGroup>
+        {inlineAlertConversionError && (
+          <Alert
+            variant={AlertVariant.danger}
+            isInline
+            title="Workspace conversion failed."
+            actionClose={
+              <AlertActionCloseButton onClose={() => this.handleCloseConversionAlert()} />
+            }
+          >
+            {inlineAlertConversionError}
+          </Alert>
+        )}
+        {inlineAlertRestartWarning && (
+          <Alert
+            variant={AlertVariant.warning}
+            isInline
+            title={
+              <React.Fragment>
+                The workspace <em>{workspaceName}&nbsp;</em> should be restarted to apply changes.
+              </React.Fragment>
+            }
+            actionClose={
+              <AlertActionCloseButton onClose={() => this.handleCloseRestartWarning()} />
+            }
+          />
+        )}
+      </AlertGroup>
+    );
+  }
+
   private getActiveTabKey(search: History.Search): WorkspaceDetailsTab {
     if (search) {
       const searchParam = new URLSearchParams(search.substring(1));
@@ -132,7 +193,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
 
   public componentDidUpdate(): void {
     if (this.props.workspace && this.props.workspace?.isStopped) {
-      this.setState({ hasWarningMessage: false });
+      this.handleCloseRestartWarning();
     }
   }
 
@@ -175,6 +236,8 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
 
     const workspaceName = workspace.name;
 
+    const inlineAlerts = this.buildInlineAlerts();
+
     return (
       <React.Fragment>
         <Head pageName={workspaceName} />
@@ -188,25 +251,12 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
             workspaceName={workspaceName}
             status={workspace.status}
             history={this.props.history}
+            onConversionAlert={errorMessage => this.handleConversionAlert(errorMessage)}
+            closeConversionAlert={() => this.handleCloseConversionAlert()}
           />
         </Header>
         <PageSection variant={SECTION_THEME} className="workspace-details-tabs">
-          {this.state.hasWarningMessage && (
-            <Alert
-              variant={AlertVariant.warning}
-              isInline
-              title={
-                <React.Fragment>
-                  The workspace <em>{workspaceName}&nbsp;</em> should be restarted to apply changes.
-                </React.Fragment>
-              }
-              actionClose={
-                <AlertActionCloseButton
-                  onClose={() => this.setState({ hasWarningMessage: false })}
-                />
-              }
-            />
-          )}
+          {inlineAlerts}
           <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
             <Tab eventKey={WorkspaceDetailsTab.OVERVIEW} title={WorkspaceDetailsTab.OVERVIEW}>
               <CheProgress isLoading={this.props.isLoading} />
@@ -222,7 +272,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
                 ref={this.editorTabPageRef}
                 workspace={workspace}
                 onSave={workspace => this.onSave(workspace)}
-                onDevWorkspaceWarning={() => this.setState({ hasWarningMessage: true })}
+                onDevWorkspaceWarning={() => this.handleRestartWarning()}
               />
             </Tab>
             {/* <Tab eventKey={WorkspaceDetailsTabs.Logs} title={WorkspaceDetailsTabs[WorkspaceDetailsTabs.Logs]}>*/}
@@ -245,7 +295,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
       isCheWorkspace((this.props.workspace as Workspace).ref) &&
       this.props.workspace.status !== WorkspaceStatus.STOPPED
     ) {
-      this.setState({ hasWarningMessage: true });
+      this.handleRestartWarning();
     }
     await this.props.onSave(workspace, this.state.activeTabKey);
     this.editorTabPageRef.current?.cancelChanges();
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx
index 3697b96da..330371756 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx
@@ -151,7 +151,9 @@ export function buildRow(
 
   /* Open IDE link */
   let open: React.ReactElement | string;
-  if (isDeleted || workspace.status === DevWorkspaceStatus.TERMINATING) {
+  if (workspace.isDeprecated) {
+    open = <></>;
+  } else if (isDeleted || workspace.status === DevWorkspaceStatus.TERMINATING) {
     open = 'deleting...';
   } else {
     if (isDevWorkspace) {
diff --git a/packages/dashboard-frontend/src/services/helpers/types.ts b/packages/dashboard-frontend/src/services/helpers/types.ts
index 111a693ce..5cd168728 100644
--- a/packages/dashboard-frontend/src/services/helpers/types.ts
+++ b/packages/dashboard-frontend/src/services/helpers/types.ts
@@ -87,6 +87,7 @@ export enum WorkspaceAction {
   ADD_CUSTOM_WORKSPACE = 'Add Workspace',
   RESTART_WORKSPACE = 'Restart Workspace',
   EDIT_WORKSPACE = 'Edit Workspace',
+  CONVERT = 'Convert',
 }
 
 export type UserPreferencesTab = 'container-registries';
diff --git a/packages/dashboard-frontend/src/store/Workspaces/index.ts b/packages/dashboard-frontend/src/store/Workspaces/index.ts
index 62da17882..5d795829b 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/index.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/index.ts
@@ -136,14 +136,12 @@ export const actionCreators: ActionCreators = {
       try {
         const state = getState();
         const cheDevworkspaceEnabled = isDevworkspacesEnabled(state.workspacesSettings.settings);
-        let requestWorkspaces: Promise<any>;
+        let requestWorkspaces: Promise<any> = Promise.resolve();
 
-        // Hide devfile v1 workspaces if the DevWorkspace engine is enabled - https://github.com/eclipse/che/issues/20900
         if (cheDevworkspaceEnabled) {
           requestWorkspaces = dispatch(DevWorkspacesStore.actionCreators.requestWorkspaces());
-        } else {
-          requestWorkspaces = dispatch(CheWorkspacesStore.actionCreators.requestWorkspaces());
         }
+        requestWorkspaces = dispatch(CheWorkspacesStore.actionCreators.requestWorkspaces());
 
         await requestWorkspaces;
 
diff --git a/packages/dashboard-frontend/src/typings/che.d.ts b/packages/dashboard-frontend/src/typings/che.d.ts
index fb25c14bf..909bb2b97 100755
--- a/packages/dashboard-frontend/src/typings/che.d.ts
+++ b/packages/dashboard-frontend/src/typings/che.d.ts
@@ -64,6 +64,7 @@ declare namespace che {
     stackName?: string;
     errorMessage?: string;
     infrastructureNamespace: string;
+    converted?: string;
 
     [propName: string]: string | number | undefined;
   }

From cc4d9ae46d0df4f3a9b436ec30cfd4f6e5990710 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Thu, 13 Jan 2022 14:24:50 +0200
Subject: [PATCH 07/20] feat: on conversion's done, redirect to new workspace
 page

---
 .../src/containers/WorkspaceActions/index.tsx | 28 ++++++++++++-----
 .../src/containers/WorkspaceDetails.tsx       |  5 ++-
 .../WorkspaceDetails/Header/Actions/index.tsx |  7 ++---
 .../src/pages/WorkspacesList/index.tsx        | 31 ++++++++++++++-----
 .../src/services/helpers/location.ts          | 28 ++++++++++++++---
 .../devworkspace/devWorkspaceClient.ts        |  3 +-
 .../store/Workspaces/devWorkspaces/index.ts   |  3 ++
 .../src/store/Workspaces/index.ts             |  3 ++
 8 files changed, 82 insertions(+), 26 deletions(-)

diff --git a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
index db1036033..75367cf1e 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
@@ -113,25 +113,37 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
 
   private async convertWorkspace(
     action: WorkspaceAction,
-    workspace: Workspace,
+    oldWorkspace: Workspace,
   ): Promise<Location | void> {
     try {
-      if (isDevWorkspace(workspace.ref)) {
+      if (isDevWorkspace(oldWorkspace.ref)) {
         throw new Error('This workspace cannot be converted to DevWorkspaces.');
       }
 
-      const devfileV1 = workspace.devfile as che.WorkspaceDevfile;
+      const devfileV1 = oldWorkspace.devfile as che.WorkspaceDevfile;
       const devfileV2 = await convertDevfileV1toDevfileV2(devfileV1);
       const defaultNamespace = this.props.defaultNamespace.name;
       // create a new workspace
-      await this.props.createWorkspaceFromDevfile(devfileV2, undefined, defaultNamespace, {});
+      await this.props.createWorkspaceFromDevfile(
+        devfileV2,
+        undefined,
+        defaultNamespace,
+        {},
+        {},
+        false,
+      );
+
       // add 'converted' attribute to the old workspace
       // to be able to hide it on the Workspaces page
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      workspace.ref.attributes!.converted = new Date().toISOString();
-      await this.props.updateWorkspace(workspace);
+      oldWorkspace.ref.attributes!.converted = new Date().toISOString();
+      await this.props.updateWorkspace(oldWorkspace);
+
+      // return the new workspace page location
+      const nextLocation = buildDetailsLocation(defaultNamespace, oldWorkspace.name);
+      return nextLocation;
     } catch (e) {
-      const errorMessage = `Action "${action}" failed with workspace "${workspace.name}". ${e}`;
+      const errorMessage = `Action "${action}" failed with workspace "${oldWorkspace.name}". ${e}`;
       console.error(errorMessage);
       throw new Error(errorMessage);
     }
@@ -194,7 +206,7 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
         break;
       case WorkspaceAction.CONVERT:
         {
-          await this.convertWorkspace(action, workspace);
+          return this.convertWorkspace(action, workspace);
         }
         break;
       default:
diff --git a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
index c432d7f96..0f547369f 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
@@ -93,7 +93,10 @@ class WorkspaceDetailsContainer extends React.Component<Props> {
   }
 
   public shouldComponentUpdate(nextProps: Props): boolean {
-    return this.props.workspace?.id !== nextProps.workspace?.id;
+    return (
+      this.props.workspace?.id !== nextProps.workspace?.id ||
+      this.props.location.pathname !== nextProps.location.pathname
+    );
   }
 
   public componentDidUpdate(): void {
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
index 2d26c9b39..dc5fd15da 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
@@ -101,12 +101,11 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
       isExpanded: false,
     });
     try {
-      // todo implement redirecting to the new workspace page
-      const nextPath = await context.handleAction(selectedAction, this.props.workspaceId);
-      if (!nextPath) {
+      const nextLocation = await context.handleAction(selectedAction, this.props.workspaceId);
+      if (!nextLocation) {
         return;
       }
-      this.props.history.push(nextPath);
+      this.props.history.replace(nextLocation);
     } catch (e) {
       const errorMessage = common.helpers.errors.getMessage(e);
       this.props.onConversionAlert(errorMessage);
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
index 53029d211..632dd8b64 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
@@ -159,6 +159,13 @@ export default class WorkspacesList extends React.PureComponent<Props, State> {
 
     if (workspace.isDeprecated) {
       return [
+        {
+          title: 'Convert',
+          onClick: (event, rowId, rowData) => {
+            this.handleConversion(WorkspaceAction.CONVERT, rowData);
+          },
+          isDisabled: false === this.isEnabledAction(WorkspaceAction.CONVERT, workspace),
+        },
         {
           title: 'Delete Workspace',
           onClick: (event, rowId, rowData) =>
@@ -242,14 +249,24 @@ export default class WorkspacesList extends React.PureComponent<Props, State> {
       }
       this.props.history.push(nextPath);
     } catch (e) {
-      const workspace = this.props.workspaces.find(workspace => id === workspace.id);
-      const workspaceName = workspace?.name ? ` "${workspace?.name}"` : '';
       const errorMessage = common.helpers.errors.getMessage(e);
-      const message =
-        `Unable to ${action.toLocaleLowerCase()}${workspaceName}. ` +
-        errorMessage.replace('Error: ', '');
-      this.showAlert(message);
-      console.warn(message);
+      this.showAlert(errorMessage);
+      console.warn(errorMessage);
+    }
+  }
+
+  private async handleConversion(action: WorkspaceAction, rowData: IRowData): Promise<void> {
+    const id = (rowData as RowData).props.workspaceId;
+    try {
+      const nextLocation = await this.props.onAction(action, id);
+      if (!nextLocation) {
+        return;
+      }
+      this.props.history.replace(nextLocation);
+    } catch (e) {
+      const errorMessage = common.helpers.errors.getMessage(e);
+      this.showAlert(errorMessage);
+      console.warn(errorMessage);
     }
   }
 
diff --git a/packages/dashboard-frontend/src/services/helpers/location.ts b/packages/dashboard-frontend/src/services/helpers/location.ts
index 52c557e08..c06885a9d 100644
--- a/packages/dashboard-frontend/src/services/helpers/location.ts
+++ b/packages/dashboard-frontend/src/services/helpers/location.ts
@@ -107,16 +107,34 @@ export function buildGettingStartedLocation(tab?: CreateWorkspaceTab): Location
   return _buildLocationObject(pathAndQuery);
 }
 
-export function buildDetailsLocation(workspace: Workspace, tab?: WorkspaceDetailsTab): Location {
+export function buildDetailsLocation(
+  ...args:
+    | [namespace: string, workspaceName: string, pageTab?: WorkspaceDetailsTab]
+    | [workspace: Workspace, pageTab?: WorkspaceDetailsTab]
+): Location {
+  let workspaceName: string;
+  let namespace: string;
+  let tab: WorkspaceDetailsTab | undefined;
+  if (typeof args[0] === 'string') {
+    namespace = args[0];
+    workspaceName = args[1] as string;
+    tab = args[2];
+  } else {
+    const workspace = args[0];
+    namespace = workspace.namespace;
+    workspaceName = workspace.name;
+    tab = args[1] as WorkspaceDetailsTab | undefined;
+  }
+
   let pathAndQuery: string;
   if (!tab) {
-    pathAndQuery = ROUTE.WORKSPACE_DETAILS.replace(':namespace', workspace.namespace).replace(
+    pathAndQuery = ROUTE.WORKSPACE_DETAILS.replace(':namespace', namespace).replace(
       ':workspaceName',
-      workspace.name,
+      workspaceName,
     );
   } else {
-    pathAndQuery = ROUTE.WORKSPACE_DETAILS_TAB.replace(':namespace', workspace.namespace)
-      .replace(':workspaceName', workspace.name)
+    pathAndQuery = ROUTE.WORKSPACE_DETAILS_TAB.replace(':namespace', namespace)
+      .replace(':workspaceName', workspaceName)
       .replace(':tabId', tab);
   }
   return _buildLocationObject(pathAndQuery);
diff --git a/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts b/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts
index 54f26ed72..65ab7b686 100644
--- a/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts
+++ b/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts
@@ -334,6 +334,7 @@ export class DevWorkspaceClient extends WorkspaceClient {
     pluginRegistryInternalUrl: string | undefined,
     editorId: string | undefined,
     optionalFilesContent: { [fileName: string]: string },
+    start = true,
   ): Promise<devfileApi.DevWorkspace> {
     if (!devfile.components) {
       devfile.components = [];
@@ -526,7 +527,7 @@ export class DevWorkspaceClient extends WorkspaceClient {
       }),
     );
 
-    createdWorkspace.spec.started = true;
+    createdWorkspace.spec.started = start;
     const patch = [
       {
         op: 'replace',
diff --git a/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts b/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts
index b8741d219..6cc041dbe 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts
@@ -140,6 +140,7 @@ export type ActionCreators = {
     pluginRegistryUrl: string | undefined,
     pluginRegistryInternalUrl: string | undefined,
     attributes: { [key: string]: string },
+    start?: boolean,
   ) => AppThunk<KnownAction, Promise<void>>;
   createWorkspaceFromResources: (
     devworkspace: devfileApi.DevWorkspace,
@@ -496,6 +497,7 @@ export const actionCreators: ActionCreators = {
       pluginRegistryUrl: string | undefined,
       pluginRegistryInternalUrl: string | undefined,
       attributes: { [key: string]: string },
+      start = true,
     ): AppThunk<KnownAction, Promise<void>> =>
     async (dispatch, getState): Promise<void> => {
       let state = getState();
@@ -541,6 +543,7 @@ export const actionCreators: ActionCreators = {
           pluginRegistryInternalUrl,
           cheEditor,
           optionalFilesContent,
+          start,
         );
 
         if (workspace.spec.started) {
diff --git a/packages/dashboard-frontend/src/store/Workspaces/index.ts b/packages/dashboard-frontend/src/store/Workspaces/index.ts
index 5d795829b..b210d1a39 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/index.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/index.ts
@@ -116,6 +116,7 @@ export type ActionCreators = {
     optionalFilesContent?: {
       [fileName: string]: string;
     },
+    start?: boolean,
   ) => AppThunk<KnownAction, Promise<void>>;
 
   setWorkspaceQualifiedName: (
@@ -292,6 +293,7 @@ export const actionCreators: ActionCreators = {
       optionalFilesContent?: {
         [fileName: string]: string;
       },
+      start = true,
     ): AppThunk<KnownAction, Promise<void>> =>
     async (dispatch, getState): Promise<void> => {
       dispatch({ type: 'REQUEST_WORKSPACES' });
@@ -311,6 +313,7 @@ export const actionCreators: ActionCreators = {
               pluginRegistryUrl,
               pluginRegistryInternalUrl,
               attributes,
+              start,
             ),
           );
           dispatch({ type: 'ADD_WORKSPACE' });

From b9a78b624bd5e4f4a650dd7d0a75fa5d49d3639d Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Fri, 14 Jan 2022 14:14:35 +0200
Subject: [PATCH 08/20] feat: add link to the original workspace page

---
 .../src/containers/WorkspaceActions/index.tsx | 37 +++++++++++++++++--
 .../src/containers/WorkspaceDetails.tsx       | 28 +++++++++++++-
 .../src/pages/WorkspaceDetails/index.tsx      | 18 +++++++--
 .../devworkspace/devWorkspaceClient.ts        |  9 +++++
 .../store/Workspaces/devWorkspaces/index.ts   | 26 +++++++++++++
 5 files changed, 109 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
index 75367cf1e..b6f2be4ad 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
@@ -31,14 +31,20 @@ import {
 } from '../../services/helpers/location';
 import { IdeLoaderTab, WorkspaceAction, WorkspaceDetailsTab } from '../../services/helpers/types';
 import { AppState } from '../../store';
-import { selectAllWorkspaces } from '../../store/Workspaces/selectors';
+import {
+  selectAllWorkspaces,
+  selectWorkspaceByQualifiedName,
+} from '../../store/Workspaces/selectors';
 import * as WorkspacesStore from '../../store/Workspaces';
+import * as DevWorkspacesStore from '../../store/Workspaces/devWorkspaces';
 import { WorkspaceActionsContext } from './context';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
 import { convertDevfileV1toDevfileV2 } from '../../services/devfile/converters';
-import { isDevWorkspace } from '../../services/devfileApi';
+import devfileApi, { isDevWorkspace } from '../../services/devfileApi';
 import { selectDefaultNamespace } from '../../store/InfrastructureNamespaces/selectors';
 
+export const ORIGINAL_WORKSPACE_ID = 'che.eclipse.org/original-workspace-id';
+
 type Deferred = {
   resolve: () => void;
   reject: () => void;
@@ -133,6 +139,25 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
         false,
       );
 
+      await this.props.requestWorkspaces();
+      const newWorkspace = this.props.allWorkspaces.find(
+        workspace =>
+          workspace.namespace === defaultNamespace && workspace.name === oldWorkspace.name,
+      );
+      if (!newWorkspace) {
+        // todo
+        throw new Error('todo');
+      }
+
+      // add annotation to the new workspace
+      // so then we can figure out the original workspace
+      const newDevworkspace = newWorkspace.ref as devfileApi.DevWorkspace;
+      if (!newDevworkspace.metadata.annotations) {
+        newDevworkspace.metadata.annotations = {};
+      }
+      newDevworkspace.metadata.annotations[ORIGINAL_WORKSPACE_ID] = oldWorkspace.id;
+      await this.props.updateWorkspaceAnnotations(newDevworkspace);
+
       // add 'converted' attribute to the old workspace
       // to be able to hide it on the Workspaces page
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -140,7 +165,7 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
       await this.props.updateWorkspace(oldWorkspace);
 
       // return the new workspace page location
-      const nextLocation = buildDetailsLocation(defaultNamespace, oldWorkspace.name);
+      const nextLocation = buildDetailsLocation(newWorkspace);
       return nextLocation;
     } catch (e) {
       const errorMessage = `Action "${action}" failed with workspace "${oldWorkspace.name}". ${e}`;
@@ -344,9 +369,13 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
 const mapStateToProps = (state: AppState) => ({
   allWorkspaces: selectAllWorkspaces(state),
   defaultNamespace: selectDefaultNamespace(state),
+  workspaceByQualifiedName: selectWorkspaceByQualifiedName(state),
 });
 
-const connector = connect(mapStateToProps, WorkspacesStore.actionCreators);
+const connector = connect(mapStateToProps, {
+  ...WorkspacesStore.actionCreators,
+  updateWorkspaceAnnotations: DevWorkspacesStore.actionCreators.updateWorkspaceAnnotation,
+});
 
 type MappedProps = ConnectedProps<typeof connector>;
 export default connector(WorkspaceActionsProvider);
diff --git a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
index 0f547369f..000ccb674 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
@@ -11,7 +11,7 @@
  */
 
 import { AlertVariant } from '@patternfly/react-core';
-import { History } from 'history';
+import { History, Location } from 'history';
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { RouteComponentProps } from 'react-router';
@@ -31,6 +31,8 @@ import {
   selectIsLoading,
   selectWorkspaceById,
 } from '../store/Workspaces/selectors';
+import { isDevWorkspace } from '../services/devfileApi';
+import { ORIGINAL_WORKSPACE_ID } from './WorkspaceActions';
 
 type Props = MappedProps & { history: History } & RouteComponentProps<{
     namespace: string;
@@ -80,6 +82,24 @@ class WorkspaceDetailsContainer extends React.Component<Props> {
     }
   }
 
+  private getOldWorkspacePath(workspace: Workspace): Location | undefined {
+    if (!workspace || !isDevWorkspace(workspace.ref)) {
+      return;
+    }
+    const oldWorkspaceId = workspace.ref.metadata.annotations?.[ORIGINAL_WORKSPACE_ID];
+    if (!oldWorkspaceId) {
+      return;
+    }
+    // check if the old workspace is still available
+    const oldWorkspace = this.props.allWorkspaces.find(
+      workspace => workspace.id === oldWorkspaceId,
+    );
+    if (!oldWorkspace) {
+      return;
+    }
+    return buildDetailsLocation(oldWorkspace);
+  }
+
   public componentDidMount(): void {
     this.init();
     const showAlert = this.workspaceDetailsPageRef.current?.showAlert;
@@ -115,10 +135,16 @@ class WorkspaceDetailsContainer extends React.Component<Props> {
   }
 
   render() {
+    let oldWorkspacePath: Location | undefined;
+    if (this.props.workspace && isDevWorkspace(this.props.workspace.ref)) {
+      oldWorkspacePath = this.getOldWorkspacePath(this.props.workspace);
+    }
+
     return (
       <WorkspaceDetails
         ref={this.workspaceDetailsPageRef}
         workspacesLink={this.workspacesLink}
+        oldWorkspacePath={oldWorkspacePath}
         onSave={(workspace: Workspace, activeTab?: WorkspaceDetailsTab) =>
           this.onSave(workspace, activeTab)
         }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
index 34a362f53..4768d98ae 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
@@ -17,6 +17,7 @@ import {
   AlertActionCloseButton,
   AlertGroup,
   AlertVariant,
+  Button,
   PageSection,
   PageSectionVariants,
   Tab,
@@ -33,16 +34,20 @@ import { AppAlerts } from '../../services/alerts/appAlerts';
 import OverviewTab, { OverviewTab as Overview } from './OverviewTab';
 import EditorTab, { EditorTab as Editor } from './EditorTab';
 import { selectIsLoading, selectWorkspaceById } from '../../store/Workspaces/selectors';
-import { History, UnregisterCallback } from 'history';
-
-import './WorkspaceDetails.styl';
+import { History, UnregisterCallback, Location } from 'history';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
 import UnsavedChangesModal from '../../components/UnsavedChangesModal';
+import { Link } from 'react-router-dom';
+import { isDevWorkspace } from '../../services/devfileApi';
+import { ORIGINAL_WORKSPACE_ID } from '../../containers/WorkspaceActions';
+
+import './WorkspaceDetails.styl';
 
 export const SECTION_THEME = PageSectionVariants.light;
 
 type Props = {
   workspacesLink: string;
+  oldWorkspacePath?: Location;
   onSave: (workspace: Workspace, activeTab: WorkspaceDetailsTab | undefined) => Promise<void>;
   history: History;
 } & MappedProps;
@@ -228,7 +233,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
   }
 
   public render(): React.ReactElement {
-    const { workspace, workspacesLink, history } = this.props;
+    const { workspace, workspacesLink, history, oldWorkspacePath } = this.props;
 
     if (!workspace) {
       return <div>Workspace not found.</div>;
@@ -246,6 +251,11 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
           workspaceName={workspaceName}
           status={workspace.status}
         >
+          {oldWorkspacePath && (
+            <Button variant="link" component={props => <Link {...props} to={oldWorkspacePath} />}>
+              Show Original Devfile
+            </Button>
+          )}
           <HeaderActionSelect
             workspaceId={workspace.id}
             workspaceName={workspaceName}
diff --git a/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts b/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts
index 65ab7b686..7f275e986 100644
--- a/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts
+++ b/packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts
@@ -665,6 +665,15 @@ export class DevWorkspaceClient extends WorkspaceClient {
     return DwApi.patchWorkspace(namespace, name, patch);
   }
 
+  async updateAnnotation(workspace: devfileApi.DevWorkspace): Promise<devfileApi.DevWorkspace> {
+    const patch: api.IPatch = {
+      op: 'replace',
+      path: '/metadata/annotations',
+      value: workspace.metadata.annotations || {},
+    };
+    return DwApi.patchWorkspace(workspace.metadata.namespace, workspace.metadata.name, [patch]);
+  }
+
   private escape(key: string): string {
     // We have to escape the slash and use ~1 instead. See https://tools.ietf.org/html/rfc6902#appendix-A.14
     return key.replace(/\//g, '~1');
diff --git a/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts b/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts
index 6cc041dbe..c7ad52789 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/index.ts
@@ -131,6 +131,9 @@ export type ActionCreators = {
   restartWorkspace: (workspace: devfileApi.DevWorkspace) => AppThunk<KnownAction, Promise<void>>;
   stopWorkspace: (workspace: devfileApi.DevWorkspace) => AppThunk<KnownAction, Promise<void>>;
   terminateWorkspace: (workspace: devfileApi.DevWorkspace) => AppThunk<KnownAction, Promise<void>>;
+  updateWorkspaceAnnotation: (
+    workspace: devfileApi.DevWorkspace,
+  ) => AppThunk<KnownAction, Promise<void>>;
   updateWorkspace: (workspace: devfileApi.DevWorkspace) => AppThunk<KnownAction, Promise<void>>;
   createWorkspaceFromDevfile: (
     devfile: devfileApi.Devfile,
@@ -417,6 +420,29 @@ export const actionCreators: ActionCreators = {
       }
     },
 
+  updateWorkspaceAnnotation:
+    (workspace: devfileApi.DevWorkspace): AppThunk<KnownAction, Promise<void>> =>
+    async (dispatch): Promise<void> => {
+      dispatch({ type: 'REQUEST_DEVWORKSPACE' });
+
+      try {
+        const updated = await devWorkspaceClient.updateAnnotation(workspace);
+        dispatch({
+          type: 'UPDATE_DEVWORKSPACE',
+          workspace: updated,
+        });
+      } catch (e) {
+        const errorMessage =
+          `Failed to update the workspace ${workspace.metadata.name}, reason: ` +
+          common.helpers.errors.getMessage(e);
+        dispatch({
+          type: 'RECEIVE_DEVWORKSPACE_ERROR',
+          error: errorMessage,
+        });
+        throw errorMessage;
+      }
+    },
+
   updateWorkspace:
     (workspace: devfileApi.DevWorkspace): AppThunk<KnownAction, Promise<void>> =>
     async (dispatch): Promise<void> => {

From 1459cf444a95cc1b5808f126cfa30f2b04583c10 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Mon, 17 Jan 2022 10:21:18 +0200
Subject: [PATCH 09/20] refact: move conversion functionality into
 WorkspaceConversionButton component

---
 .../src/containers/WorkspaceActions/index.tsx |  80 +-------
 .../src/containers/WorkspaceDetails.tsx       |   4 +-
 .../__snapshots__/index.spec.tsx.snap         |  18 ++
 .../ConversionButton/__tests__/index.spec.tsx | 188 ++++++++++++++++++
 .../ConversionButton/index.tsx                | 145 ++++++++++++++
 .../Header/Actions/__tests__/index.spec.tsx   |  10 +-
 .../WorkspaceDetails/Header/Actions/index.tsx |  38 +---
 .../WorkspaceDetails/Header/index.module.css  |   4 +
 .../pages/WorkspaceDetails/Header/index.tsx   |   4 +-
 .../src/pages/WorkspaceDetails/index.tsx      |  15 +-
 .../src/pages/WorkspacesList/Rows.tsx         |  82 +++++---
 .../WorkspacesList/__tests__/index.spec.tsx   |  41 +++-
 .../src/pages/WorkspacesList/index.tsx        |  26 +--
 .../devfileApi/devWorkspace/metadata.ts       |   4 +-
 .../src/services/helpers/types.ts             |   1 -
 15 files changed, 463 insertions(+), 197 deletions(-)
 create mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/__snapshots__/index.spec.tsx.snap
 create mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/index.spec.tsx
 create mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx

diff --git a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
index b6f2be4ad..5d44e8e78 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceActions/index.tsx
@@ -31,19 +31,10 @@ import {
 } from '../../services/helpers/location';
 import { IdeLoaderTab, WorkspaceAction, WorkspaceDetailsTab } from '../../services/helpers/types';
 import { AppState } from '../../store';
-import {
-  selectAllWorkspaces,
-  selectWorkspaceByQualifiedName,
-} from '../../store/Workspaces/selectors';
+import { selectAllWorkspaces } from '../../store/Workspaces/selectors';
 import * as WorkspacesStore from '../../store/Workspaces';
-import * as DevWorkspacesStore from '../../store/Workspaces/devWorkspaces';
 import { WorkspaceActionsContext } from './context';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
-import { convertDevfileV1toDevfileV2 } from '../../services/devfile/converters';
-import devfileApi, { isDevWorkspace } from '../../services/devfileApi';
-import { selectDefaultNamespace } from '../../store/InfrastructureNamespaces/selectors';
-
-export const ORIGINAL_WORKSPACE_ID = 'che.eclipse.org/original-workspace-id';
 
 type Deferred = {
   resolve: () => void;
@@ -117,63 +108,6 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
     }
   }
 
-  private async convertWorkspace(
-    action: WorkspaceAction,
-    oldWorkspace: Workspace,
-  ): Promise<Location | void> {
-    try {
-      if (isDevWorkspace(oldWorkspace.ref)) {
-        throw new Error('This workspace cannot be converted to DevWorkspaces.');
-      }
-
-      const devfileV1 = oldWorkspace.devfile as che.WorkspaceDevfile;
-      const devfileV2 = await convertDevfileV1toDevfileV2(devfileV1);
-      const defaultNamespace = this.props.defaultNamespace.name;
-      // create a new workspace
-      await this.props.createWorkspaceFromDevfile(
-        devfileV2,
-        undefined,
-        defaultNamespace,
-        {},
-        {},
-        false,
-      );
-
-      await this.props.requestWorkspaces();
-      const newWorkspace = this.props.allWorkspaces.find(
-        workspace =>
-          workspace.namespace === defaultNamespace && workspace.name === oldWorkspace.name,
-      );
-      if (!newWorkspace) {
-        // todo
-        throw new Error('todo');
-      }
-
-      // add annotation to the new workspace
-      // so then we can figure out the original workspace
-      const newDevworkspace = newWorkspace.ref as devfileApi.DevWorkspace;
-      if (!newDevworkspace.metadata.annotations) {
-        newDevworkspace.metadata.annotations = {};
-      }
-      newDevworkspace.metadata.annotations[ORIGINAL_WORKSPACE_ID] = oldWorkspace.id;
-      await this.props.updateWorkspaceAnnotations(newDevworkspace);
-
-      // add 'converted' attribute to the old workspace
-      // to be able to hide it on the Workspaces page
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      oldWorkspace.ref.attributes!.converted = new Date().toISOString();
-      await this.props.updateWorkspace(oldWorkspace);
-
-      // return the new workspace page location
-      const nextLocation = buildDetailsLocation(newWorkspace);
-      return nextLocation;
-    } catch (e) {
-      const errorMessage = `Action "${action}" failed with workspace "${oldWorkspace.name}". ${e}`;
-      console.error(errorMessage);
-      throw new Error(errorMessage);
-    }
-  }
-
   /**
    * Performs an action on the given workspace
    */
@@ -229,11 +163,6 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
           await this.props.restartWorkspace(workspace);
         }
         break;
-      case WorkspaceAction.CONVERT:
-        {
-          return this.convertWorkspace(action, workspace);
-        }
-        break;
       default:
         console.warn(`Unhandled action type: "${action}".`);
     }
@@ -368,14 +297,9 @@ export class WorkspaceActionsProvider extends React.Component<Props, State> {
 
 const mapStateToProps = (state: AppState) => ({
   allWorkspaces: selectAllWorkspaces(state),
-  defaultNamespace: selectDefaultNamespace(state),
-  workspaceByQualifiedName: selectWorkspaceByQualifiedName(state),
 });
 
-const connector = connect(mapStateToProps, {
-  ...WorkspacesStore.actionCreators,
-  updateWorkspaceAnnotations: DevWorkspacesStore.actionCreators.updateWorkspaceAnnotation,
-});
+const connector = connect(mapStateToProps, WorkspacesStore.actionCreators);
 
 type MappedProps = ConnectedProps<typeof connector>;
 export default connector(WorkspaceActionsProvider);
diff --git a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
index 000ccb674..0ee92f457 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
@@ -32,7 +32,7 @@ import {
   selectWorkspaceById,
 } from '../store/Workspaces/selectors';
 import { isDevWorkspace } from '../services/devfileApi';
-import { ORIGINAL_WORKSPACE_ID } from './WorkspaceActions';
+import { ORIGINAL_WORKSPACE_ID_ANNOTATION } from '../services/devfileApi/devWorkspace/metadata';
 
 type Props = MappedProps & { history: History } & RouteComponentProps<{
     namespace: string;
@@ -86,7 +86,7 @@ class WorkspaceDetailsContainer extends React.Component<Props> {
     if (!workspace || !isDevWorkspace(workspace.ref)) {
       return;
     }
-    const oldWorkspaceId = workspace.ref.metadata.annotations?.[ORIGINAL_WORKSPACE_ID];
+    const oldWorkspaceId = workspace.ref.metadata.annotations?.[ORIGINAL_WORKSPACE_ID_ANNOTATION];
     if (!oldWorkspaceId) {
       return;
     }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/__snapshots__/index.spec.tsx.snap b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/__snapshots__/index.spec.tsx.snap
new file mode 100644
index 000000000..f905f8c57
--- /dev/null
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/__snapshots__/index.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkspaceConversionButton render 1`] = `
+<button
+  aria-disabled={false}
+  aria-label={null}
+  className="pf-c-button pf-m-warning"
+  data-ouia-component-id="OUIA-Generated-Button-warning-1"
+  data-ouia-component-type="PF4/Button"
+  data-ouia-safe={true}
+  disabled={false}
+  onClick={[Function]}
+  role={null}
+  type="button"
+>
+  Convert
+</button>
+`;
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/index.spec.tsx
new file mode 100644
index 000000000..003f95504
--- /dev/null
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/__tests__/index.spec.tsx
@@ -0,0 +1,188 @@
+/*
+ * Copyright (c) 2018-2021 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 React from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router';
+import { Store } from 'redux';
+import { createHashHistory } from 'history';
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import renderer, { ReactTestRendererJSON } from 'react-test-renderer';
+import WorkspaceConversionButton from '..';
+import { constructWorkspace, Workspace } from '../../../../services/workspace-adapter';
+import { FakeStoreBuilder } from '../../../../store/__mocks__/storeBuilder';
+import { CheWorkspaceBuilder } from '../../../../store/__mocks__/cheWorkspaceBuilder';
+import { DevWorkspaceBuilder } from '../../../../store/__mocks__/devWorkspaceBuilder';
+import devfileApi from '../../../../services/devfileApi';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../../../../store/Workspaces', () => {
+  return {
+    actionCreators: {
+      createWorkspaceFromDevfile: () => async (): Promise<void> => Promise.resolve(),
+      updateWorkspace: () => async () => Promise.resolve(),
+    },
+  };
+});
+
+jest.mock('../../../../store/Workspaces/devWorkspaces', () => {
+  return {
+    actionCreators: {
+      updateWorkspaceAnnotation: () => async () => Promise.resolve(),
+    },
+  };
+});
+
+const mockCleanupError = jest.fn();
+const mockOnError = jest.fn();
+
+describe('WorkspaceConversionButton', () => {
+  let cheWorkspace: che.Workspace;
+  let devWorkspace: devfileApi.DevWorkspace;
+  let store: Store;
+
+  beforeEach(() => {
+    cheWorkspace = new CheWorkspaceBuilder()
+      .withId('old-workspace-id')
+      .withName('workspace-name')
+      .withNamespace('user')
+      .withDevfile({
+        apiVersion: '1.0.0',
+        metadata: {
+          name: 'workspace-name',
+        },
+        components: [],
+      })
+      .build();
+    devWorkspace = new DevWorkspaceBuilder()
+      .withId('dev-workspace-id')
+      .withName('workspace-name')
+      .withNamespace('user-dev')
+      .build();
+    store = new FakeStoreBuilder()
+      .withCheWorkspaces({ workspaces: [cheWorkspace] })
+      .withDevWorkspaces({ workspaces: [devWorkspace] })
+      .withInfrastructureNamespace([
+        {
+          name: 'user-dev',
+          attributes: {
+            default: 'true',
+            displayName: 'user-dev',
+            phase: 'Active',
+          },
+        },
+      ])
+      .build();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('render', () => {
+    const oldWorkspace = constructWorkspace(cheWorkspace);
+    const component = getComponent(oldWorkspace);
+    const snapshot = createSnapshot(component);
+    expect(snapshot).toMatchSnapshot();
+  });
+
+  it('should emit cleanupError on conversion start', async () => {
+    const oldWorkspace = constructWorkspace(cheWorkspace);
+    const component = getComponent(oldWorkspace);
+    renderComponent(component);
+
+    const convertButton = screen.getByRole('button', { name: 'Convert' });
+    userEvent.click(convertButton);
+
+    await waitFor(() => expect(mockCleanupError).toBeCalled());
+  });
+
+  it('should emit onError if devworkspace', async () => {
+    // try to convert an devworkspace
+    const oldWorkspace = constructWorkspace(devWorkspace);
+    const component = getComponent(oldWorkspace);
+    renderComponent(component);
+
+    const convertButton = screen.getByRole('button', { name: 'Convert' });
+    userEvent.click(convertButton);
+
+    await waitFor(() =>
+      expect(mockOnError).toBeCalledWith('This workspace cannot be converted to DevWorkspaces.'),
+    );
+  });
+
+  it('should emit onError if new workspace is not in the store', async () => {
+    // no devworkspace in the store
+    store = new FakeStoreBuilder()
+      .withCheWorkspaces({ workspaces: [cheWorkspace] })
+      .withInfrastructureNamespace([
+        {
+          name: 'user-dev',
+          attributes: {
+            default: 'true',
+            displayName: 'user-dev',
+            phase: 'Active',
+          },
+        },
+      ])
+      .build();
+    const oldWorkspace = constructWorkspace(cheWorkspace);
+    const component = getComponent(oldWorkspace);
+    renderComponent(component);
+
+    const convertButton = screen.getByRole('button', { name: 'Convert' });
+    userEvent.click(convertButton);
+
+    await waitFor(() =>
+      expect(mockOnError).toBeCalledWith(
+        'The new DevWorkspace has been created but cannot be obtained.',
+      ),
+    );
+  });
+
+  it('should redirect to new workspace page', async () => {
+    const oldWorkspace = constructWorkspace(cheWorkspace);
+    const component = getComponent(oldWorkspace);
+    renderComponent(component);
+
+    const convertButton = screen.getByRole('button', { name: 'Convert' });
+    userEvent.click(convertButton);
+
+    await waitFor(() => expect(window.location.href).toMatch(/user-dev\/workspace-name/));
+  });
+
+  function getComponent(oldWorkspace: Workspace): React.ReactElement {
+    const history = createHashHistory();
+    return (
+      <Router history={history}>
+        <Provider store={store}>
+          <WorkspaceConversionButton
+            history={history}
+            oldWorkspace={oldWorkspace}
+            cleanupError={mockCleanupError}
+            onError={mockOnError}
+          />
+        </Provider>
+      </Router>
+    );
+  }
+
+  function renderComponent(component: React.ReactElement): RenderResult {
+    return render(component);
+  }
+
+  function createSnapshot(
+    component: React.ReactElement,
+  ): null | ReactTestRendererJSON | ReactTestRendererJSON[] {
+    return renderer.create(component).toJSON();
+  }
+});
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx
new file mode 100644
index 000000000..b97c0e8c4
--- /dev/null
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx
@@ -0,0 +1,145 @@
+/*
+ * Copyright (c) 2018-2021 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 React from 'react';
+import { Location, History } from 'history';
+import { connect, ConnectedProps } from 'react-redux';
+import { Button } from '@patternfly/react-core';
+import common from '@eclipse-che/common';
+import devfileApi, { isDevWorkspace } from '../../../services/devfileApi';
+import { ORIGINAL_WORKSPACE_ID_ANNOTATION } from '../../../services/devfileApi/devWorkspace/metadata';
+import { convertDevfileV1toDevfileV2 } from '../../../services/devfile/converters';
+import { Workspace } from '../../../services/workspace-adapter';
+import { AppState } from '../../../store';
+import { selectDefaultNamespace } from '../../../store/InfrastructureNamespaces/selectors';
+import {
+  selectAllWorkspaces,
+  selectWorkspaceByQualifiedName,
+} from '../../../store/Workspaces/selectors';
+import * as WorkspacesStore from '../../../store/Workspaces';
+import * as DevWorkspacesStore from '../../../store/Workspaces/devWorkspaces';
+import { buildDetailsLocation } from '../../../services/helpers/location';
+import { WorkspaceDetailsTab } from '../../../services/helpers/types';
+
+type Props = MappedProps & {
+  history: History;
+  oldWorkspace: Workspace;
+  onError: (errorMessage: string) => void;
+  cleanupError: () => void;
+};
+
+type State = {
+  isDisabled: boolean;
+};
+
+export class WorkspaceConversionButton extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      isDisabled: false,
+    };
+  }
+
+  private async handleConversion(): Promise<void> {
+    this.setState({
+      isDisabled: true,
+    });
+    this.props.cleanupError();
+
+    const { oldWorkspace } = this.props;
+
+    try {
+      const newWorkspaceLocation = await this.convert(oldWorkspace);
+      this.props.history.replace(newWorkspaceLocation);
+    } catch (e) {
+      const errorMessage = common.helpers.errors.getMessage(e);
+      this.props.onError(errorMessage);
+    }
+
+    this.setState({
+      isDisabled: false,
+    });
+  }
+
+  private async convert(oldWorkspace: Workspace): Promise<Location> {
+    if (isDevWorkspace(oldWorkspace.ref)) {
+      throw new Error('This workspace cannot be converted to DevWorkspaces.');
+    }
+
+    const devfileV1 = oldWorkspace.devfile as che.WorkspaceDevfile;
+    const devfileV2 = await convertDevfileV1toDevfileV2(devfileV1);
+    const defaultNamespace = this.props.defaultNamespace.name;
+    // create a new workspace
+    await this.props.createWorkspaceFromDevfile(
+      devfileV2,
+      undefined,
+      defaultNamespace,
+      {},
+      {},
+      false,
+    );
+
+    const newWorkspace = this.props.allWorkspaces.find(
+      workspace => workspace.namespace === defaultNamespace && workspace.name === oldWorkspace.name,
+    );
+    if (!newWorkspace) {
+      throw new Error('The new DevWorkspace has been created but cannot be obtained.');
+    }
+
+    // add annotation to the new workspace
+    // so then we can figure out the original workspace
+    const newDevworkspace = newWorkspace.ref as devfileApi.DevWorkspace;
+    if (!newDevworkspace.metadata.annotations) {
+      newDevworkspace.metadata.annotations = {};
+    }
+    newDevworkspace.metadata.annotations[ORIGINAL_WORKSPACE_ID_ANNOTATION] = oldWorkspace.id;
+    await this.props.updateWorkspaceAnnotation(newDevworkspace);
+
+    // add 'converted' attribute to the old workspace
+    // to be able to hide it on the Workspaces page
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    oldWorkspace.ref.attributes!.converted = new Date().toISOString();
+    await this.props.updateWorkspace(oldWorkspace);
+
+    // return the new workspace page location
+    const nextLocation = buildDetailsLocation(newWorkspace, WorkspaceDetailsTab.DEVFILE);
+    return nextLocation;
+  }
+
+  render() {
+    const { isDisabled } = this.state;
+    return (
+      <Button
+        variant="warning"
+        isDisabled={isDisabled}
+        onClick={async () => await this.handleConversion()}
+      >
+        Convert
+      </Button>
+    );
+  }
+}
+
+const mapStateToProps = (state: AppState) => ({
+  allWorkspaces: selectAllWorkspaces(state),
+  defaultNamespace: selectDefaultNamespace(state),
+  workspaceByQualifiedName: selectWorkspaceByQualifiedName(state),
+});
+
+const connector = connect(mapStateToProps, {
+  ...WorkspacesStore.actionCreators,
+  updateWorkspaceAnnotation: DevWorkspacesStore.actionCreators.updateWorkspaceAnnotation,
+});
+
+type MappedProps = ConnectedProps<typeof connector>;
+export default connector(WorkspaceConversionButton);
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
index b15111734..c9c2c00a0 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/__tests__/index.spec.tsx
@@ -46,9 +46,6 @@ jest.mock('../../../../../store/Workspaces/index', () => {
 });
 /* eslint-enable @typescript-eslint/no-unused-vars */
 
-const mockOnConversionAlert = jest.fn();
-const mockCloseConversionAlert = jest.fn();
-
 const namespace = 'che';
 const workspaceName = 'test-workspace-name';
 const workspaceId = 'test-workspace-id';
@@ -106,9 +103,8 @@ describe('Workspace WorkspaceAction widget', () => {
     actionDropdown.click();
 
     const menuitems = screen.getAllByRole('menuitem');
-    expect(menuitems.length).toEqual(2);
-    expect(menuitems[0]).toHaveTextContent('Convert');
-    expect(menuitems[1]).toHaveTextContent('Delete Workspace');
+    expect(menuitems.length).toEqual(1);
+    expect(menuitems[0]).toHaveTextContent('Delete Workspace');
   });
 
   it('should call the callback with OPEN action', async () => {
@@ -213,8 +209,6 @@ function createComponent(
       workspaceName={workspaceName}
       history={history}
       status={status}
-      onConversionAlert={mockOnConversionAlert}
-      closeConversionAlert={mockCloseConversionAlert}
     />
   );
 }
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
index dc5fd15da..861af1f56 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/Actions/index.tsx
@@ -37,8 +37,6 @@ type Props = {
   workspaceName: string;
   status: WorkspaceStatus | DevWorkspaceStatus | DeprecatedWorkspaceStatus;
   history: History;
-  onConversionAlert: (errorMessage: string) => void;
-  closeConversionAlert: () => void;
 };
 
 type State = {
@@ -93,26 +91,6 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
     }
   }
 
-  private async handleConversion(
-    selectedAction: WorkspaceAction,
-    context: ActionContextType,
-  ): Promise<void> {
-    this.setState({
-      isExpanded: false,
-    });
-    try {
-      const nextLocation = await context.handleAction(selectedAction, this.props.workspaceId);
-      if (!nextLocation) {
-        return;
-      }
-      this.props.history.replace(nextLocation);
-    } catch (e) {
-      const errorMessage = common.helpers.errors.getMessage(e);
-      this.props.onConversionAlert(errorMessage);
-      console.warn(errorMessage);
-    }
-  }
-
   private showAlert(message: string): void {
     this.appAlerts.showAlert({
       key: 'workspace-details-' + getRandomString(4),
@@ -126,24 +104,10 @@ export class HeaderActionSelect extends React.PureComponent<Props, State> {
 
     if (status === 'Deprecated') {
       return [
-        <DropdownItem
-          key={`action-${WorkspaceAction.CONVERT}`}
-          // todo isDisabled={isConverted}
-          isDisabled={false}
-          onClick={async () => {
-            this.props.closeConversionAlert();
-            this.handleConversion(WorkspaceAction.CONVERT, context);
-          }}
-        >
-          <div>{WorkspaceAction.CONVERT}</div>
-        </DropdownItem>,
         <DropdownItem
           key={`action-${WorkspaceAction.DELETE_WORKSPACE}`}
           isDisabled={false}
-          onClick={async () => {
-            this.props.closeConversionAlert();
-            this.handleSelectedAction(WorkspaceAction.CONVERT, context);
-          }}
+          onClick={async () => this.handleSelectedAction(WorkspaceAction.DELETE_WORKSPACE, context)}
         >
           <div>{WorkspaceAction.DELETE_WORKSPACE}</div>
         </DropdownItem>,
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.module.css b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.module.css
index 596770075..26cb20cfb 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.module.css
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.module.css
@@ -17,3 +17,7 @@
 .breadcrumb li:first-child a {
   margin-right: 8px;
 }
+
+.actionButtons > * {
+  margin-left: 10px;
+}
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx
index 11253581b..33b48a8bc 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/Header/index.tsx
@@ -61,7 +61,9 @@ class Header extends React.PureComponent<Props> {
               <FlexItem>
                 <WorkspaceStatusLabel status={status} />
               </FlexItem>
-              <FlexItem align={{ default: 'alignRight' }}>{children}</FlexItem>
+              <FlexItem className={styles.actionButtons} align={{ default: 'alignRight' }}>
+                {children}
+              </FlexItem>
             </Flex>
           </StackItem>
         </Stack>
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
index 4768d98ae..2f148e7dc 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
@@ -12,6 +12,7 @@
 
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
+import { Link } from 'react-router-dom';
 import {
   Alert,
   AlertActionCloseButton,
@@ -37,9 +38,7 @@ import { selectIsLoading, selectWorkspaceById } from '../../store/Workspaces/sel
 import { History, UnregisterCallback, Location } from 'history';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
 import UnsavedChangesModal from '../../components/UnsavedChangesModal';
-import { Link } from 'react-router-dom';
-import { isDevWorkspace } from '../../services/devfileApi';
-import { ORIGINAL_WORKSPACE_ID } from '../../containers/WorkspaceActions';
+import WorkspaceConversionButton from './ConversionButton';
 
 import './WorkspaceDetails.styl';
 
@@ -256,13 +255,19 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
               Show Original Devfile
             </Button>
           )}
+          {workspace.isDeprecated && (
+            <WorkspaceConversionButton
+              history={history}
+              oldWorkspace={workspace}
+              cleanupError={() => this.handleCloseConversionAlert()}
+              onError={errorMessage => this.handleConversionAlert(errorMessage)}
+            />
+          )}
           <HeaderActionSelect
             workspaceId={workspace.id}
             workspaceName={workspaceName}
             status={workspace.status}
             history={this.props.history}
-            onConversionAlert={errorMessage => this.handleConversionAlert(errorMessage)}
-            closeConversionAlert={() => this.handleCloseConversionAlert()}
           />
         </Header>
         <PageSection variant={SECTION_THEME} className="workspace-details-tabs">
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx
index 330371756..6c7c28042 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/Rows.tsx
@@ -11,18 +11,16 @@
  */
 
 import React from 'react';
-import { History } from 'history';
+import { Link } from 'react-router-dom';
+import { Location } from 'history';
 import { IRow, SortByDirection } from '@patternfly/react-table';
+import { Button } from '@patternfly/react-core';
 import WorkspaceIndicator from '../../components/Workspace/Indicator';
 import { formatDate, formatRelativeDate } from '../../services/helpers/date';
-import {
-  buildDetailsLocation,
-  toHref,
-  buildIdeLoaderLocation,
-} from '../../services/helpers/location';
+import { buildDetailsLocation, buildIdeLoaderLocation } from '../../services/helpers/location';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
 import devfileApi from '../../services/devfileApi';
-import { DevWorkspaceStatus } from '../../services/helpers/types';
+import { DevWorkspaceStatus, WorkspaceDetailsTab } from '../../services/helpers/types';
 
 export interface RowData extends IRow {
   props: {
@@ -31,7 +29,6 @@ export interface RowData extends IRow {
 }
 
 export function buildRows(
-  history: History,
   workspaces: Workspace[],
   toDelete: string[],
   filtered: string[],
@@ -59,11 +56,10 @@ export function buildRows(
       const isSelected = selected.includes(workspace.id);
       const isDeleted = toDelete.includes(workspace.id);
 
-      const locationToDetails = buildDetailsLocation(workspace);
-      const linkToDetails = toHref(history, locationToDetails);
+      const overviewPageLocation = buildDetailsLocation(workspace);
+      const devfilePageLocation = buildDetailsLocation(workspace, WorkspaceDetailsTab.DEVFILE);
 
-      const locationToIde = buildIdeLoaderLocation(workspace);
-      const linkToIde = toHref(history, locationToIde);
+      const ideLoaderLocation = buildIdeLoaderLocation(workspace);
 
       try {
         rows.push(
@@ -71,9 +67,9 @@ export function buildRows(
             workspace,
             isSelected,
             isDeleted,
-            linkToDetails,
-            linkToIde,
-            workspace.isDevWorkspace,
+            overviewPageLocation,
+            devfilePageLocation,
+            ideLoaderLocation,
           ),
         );
       } catch (e) {
@@ -96,9 +92,9 @@ export function buildRow(
   workspace: Workspace,
   isSelected: boolean,
   isDeleted: boolean,
-  linkToDetails: string,
-  linkToIde: string,
-  isDevWorkspace: boolean,
+  overviewPageLocation: Location,
+  devfilePageLocation: Location,
+  ideLoaderLocation: Location,
 ): RowData {
   if (!workspace.name) {
     throw new Error('Empty workspace name.');
@@ -113,7 +109,9 @@ export function buildRow(
   const details = (
     <span>
       {statusIndicator}
-      <a href={linkToDetails}>{workspace.name}</a>
+      <Button variant="link" component={props => <Link {...props} to={overviewPageLocation} />}>
+        {workspace.name}
+      </Button>
     </span>
   );
 
@@ -149,21 +147,45 @@ export function buildRow(
   }
   const projectsList = projects.join(', \n') || '-';
 
-  /* Open IDE link */
-  let open: React.ReactElement | string;
+  let action: React.ReactElement | string;
   if (workspace.isDeprecated) {
-    open = <></>;
+    action = (
+      <Button
+        variant="link"
+        isInline
+        isSmall
+        component={props => <Link {...props} to={devfilePageLocation} />}
+      >
+        Convert
+      </Button>
+    );
   } else if (isDeleted || workspace.status === DevWorkspaceStatus.TERMINATING) {
-    open = 'deleting...';
+    action = 'deleting...';
   } else {
-    if (isDevWorkspace) {
-      open = (
-        <a href={linkToIde} target={workspace.id} rel="noreferrer">
+    if (workspace.isDevWorkspace) {
+      action = (
+        <Button
+          variant="link"
+          isInline
+          isSmall
+          component={props => (
+            <Link {...props} to={ideLoaderLocation} rel="noreferrer" target={workspace.id} />
+          )}
+        >
           Open
-        </a>
+        </Button>
       );
     } else {
-      open = <a href={linkToIde}>Open</a>;
+      action = (
+        <Button
+          variant="link"
+          isInline
+          isSmall
+          component={props => <Link {...props} to={ideLoaderLocation} />}
+        >
+          Open
+        </Button>
+      );
     }
   }
 
@@ -183,12 +205,12 @@ export function buildRow(
       },
       {
         // Cell is visible only on Sm
-        title: open,
+        title: action,
         key: 'open-ide-visible-sm',
       },
       {
         // Cell is hidden only on Sm
-        title: open,
+        title: action,
         key: 'open-ide-hidden-sm',
       },
     ],
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
index acc5ffca7..fc35b273e 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
@@ -15,6 +15,7 @@
 import React from 'react';
 import { createHashHistory } from 'history';
 import { render, screen, RenderResult, waitFor } from '@testing-library/react';
+import { Router } from 'react-router';
 import userEvent from '@testing-library/user-event';
 import WorkspacesList from '..';
 import { BrandingData } from '../../../services/bootstrap/branding.constant';
@@ -25,6 +26,7 @@ import {
   WorkspaceAdapter,
 } from '../../../services/workspace-adapter';
 import { CheWorkspaceBuilder } from '../../../store/__mocks__/cheWorkspaceBuilder';
+import { DevWorkspaceBuilder } from '../../../store/__mocks__/devWorkspaceBuilder';
 
 jest.mock('../../../components/Head', () => {
   const FakeHead = () => {
@@ -41,7 +43,7 @@ jest.mock('react-tooltip', () => {
 });
 
 // mute the outputs
-console.log = jest.fn();
+// console.log = jest.fn();
 
 const brandingData = {
   docs: {
@@ -446,6 +448,25 @@ describe('Workspaces List Page', () => {
         expect(statusIcon).not.toBeNull();
         expect(statusIcon!.getAttribute('data-tip')).toEqual('Deprecated workspace');
       });
+
+      test('Convert action link should redirect to the workspace page', () => {
+        const deprecatedWorkspaceId = 'deprecated-workspace-id';
+        // mark the workspace as deprecated
+        WorkspaceAdapter.setDeprecatedIds([deprecatedWorkspaceId]);
+        const workspaces: Workspace[] = [
+          new CheWorkspaceBuilder()
+            .withId(deprecatedWorkspaceId)
+            .withName('workspace-name')
+            .withNamespace('user')
+            .build(),
+        ].map(constructWorkspace);
+        renderComponent(workspaces);
+
+        const convertActions = screen.getAllByRole('link', { name: 'Convert' });
+
+        userEvent.click(convertActions[0]);
+        expect(window.location.href).toMatch(/user\/workspace-name/);
+      });
     });
   });
 
@@ -480,14 +501,16 @@ describe('Workspaces List Page', () => {
 function getComponent(_workspaces = workspaces): React.ReactElement {
   const history = createHashHistory();
   return (
-    <WorkspacesList
-      branding={brandingData}
-      history={history}
-      workspaces={_workspaces}
-      onAction={mockOnAction}
-      showConfirmation={mockShowConfirmation}
-      toDelete={isDeleted}
-    ></WorkspacesList>
+    <Router history={history}>
+      <WorkspacesList
+        branding={brandingData}
+        history={history}
+        workspaces={_workspaces}
+        onAction={mockOnAction}
+        showConfirmation={mockShowConfirmation}
+        toDelete={isDeleted}
+      ></WorkspacesList>
+    </Router>
   );
 }
 function renderComponent(workspaces?: Workspace[]): RenderResult {
diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
index 632dd8b64..f4f65dd3d 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/index.tsx
@@ -142,10 +142,10 @@ export default class WorkspacesList extends React.PureComponent<Props, State> {
   }
 
   private buildRows(): RowData[] {
-    const { history, toDelete, workspaces } = this.props;
+    const { toDelete, workspaces } = this.props;
     const { filtered, selected, sortBy } = this.state;
 
-    return buildRows(history, workspaces, toDelete, filtered, selected, sortBy);
+    return buildRows(workspaces, toDelete, filtered, selected, sortBy);
   }
 
   private actionResolver(rowData: IRowData): IAction[] {
@@ -159,13 +159,6 @@ export default class WorkspacesList extends React.PureComponent<Props, State> {
 
     if (workspace.isDeprecated) {
       return [
-        {
-          title: 'Convert',
-          onClick: (event, rowId, rowData) => {
-            this.handleConversion(WorkspaceAction.CONVERT, rowData);
-          },
-          isDisabled: false === this.isEnabledAction(WorkspaceAction.CONVERT, workspace),
-        },
         {
           title: 'Delete Workspace',
           onClick: (event, rowId, rowData) =>
@@ -255,21 +248,6 @@ export default class WorkspacesList extends React.PureComponent<Props, State> {
     }
   }
 
-  private async handleConversion(action: WorkspaceAction, rowData: IRowData): Promise<void> {
-    const id = (rowData as RowData).props.workspaceId;
-    try {
-      const nextLocation = await this.props.onAction(action, id);
-      if (!nextLocation) {
-        return;
-      }
-      this.props.history.replace(nextLocation);
-    } catch (e) {
-      const errorMessage = common.helpers.errors.getMessage(e);
-      this.showAlert(errorMessage);
-      console.warn(errorMessage);
-    }
-  }
-
   private async handleBulkDelete(): Promise<void> {
     const { selected } = this.state;
     const { workspaces } = this.props;
diff --git a/packages/dashboard-frontend/src/services/devfileApi/devWorkspace/metadata.ts b/packages/dashboard-frontend/src/services/devfileApi/devWorkspace/metadata.ts
index 9004dd366..d0eebc531 100644
--- a/packages/dashboard-frontend/src/services/devfileApi/devWorkspace/metadata.ts
+++ b/packages/dashboard-frontend/src/services/devfileApi/devWorkspace/metadata.ts
@@ -13,12 +13,12 @@
 import { V1alpha2DevWorkspaceMetadata } from '@devfile/api';
 
 export const DEVWORKSPACE_UPDATING_TIMESTAMP_ANNOTATION = 'che.eclipse.org/last-updated-timestamp';
-
 export const DEVWORKSPACE_CHE_EDITOR = 'che.eclipse.org/che-editor';
-
+export const ORIGINAL_WORKSPACE_ID_ANNOTATION = 'che.eclipse.org/original-workspace-id';
 type DevWorkspaceMetadataAnnotation = {
   [DEVWORKSPACE_UPDATING_TIMESTAMP_ANNOTATION]?: string;
   [DEVWORKSPACE_CHE_EDITOR]?: string;
+  [ORIGINAL_WORKSPACE_ID_ANNOTATION]?: string;
 };
 
 export type DevWorkspaceMetadata = V1alpha2DevWorkspaceMetadata &
diff --git a/packages/dashboard-frontend/src/services/helpers/types.ts b/packages/dashboard-frontend/src/services/helpers/types.ts
index 5cd168728..111a693ce 100644
--- a/packages/dashboard-frontend/src/services/helpers/types.ts
+++ b/packages/dashboard-frontend/src/services/helpers/types.ts
@@ -87,7 +87,6 @@ export enum WorkspaceAction {
   ADD_CUSTOM_WORKSPACE = 'Add Workspace',
   RESTART_WORKSPACE = 'Restart Workspace',
   EDIT_WORKSPACE = 'Edit Workspace',
-  CONVERT = 'Convert',
 }
 
 export type UserPreferencesTab = 'container-registries';

From 49616b104c254fecdbb35cad49872daabe967ce4 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Tue, 18 Jan 2022 18:06:42 +0200
Subject: [PATCH 10/20] fix: number of workspaces in the navbar

---
 .../src/Layout/Navigation/MainList.tsx        | 13 +++-
 .../Navigation/__tests__/MainList.spec.tsx    | 67 ++++++++++++++++---
 .../src/store/Workspaces/selectors.ts         |  4 --
 3 files changed, 67 insertions(+), 17 deletions(-)

diff --git a/packages/dashboard-frontend/src/Layout/Navigation/MainList.tsx b/packages/dashboard-frontend/src/Layout/Navigation/MainList.tsx
index bb82335bb..3f990e3e8 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/MainList.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/MainList.tsx
@@ -17,7 +17,7 @@ import { NavigationItemObject } from '.';
 import { ROUTE } from '../../route.enum';
 import { AppState } from '../../store';
 import { connect, ConnectedProps } from 'react-redux';
-import { selectAllWorkspacesNumber } from '../../store/Workspaces/selectors';
+import { selectAllWorkspaces } from '../../store/Workspaces/selectors';
 
 type Props = MappedProps & {
   activePath: string;
@@ -25,7 +25,14 @@ type Props = MappedProps & {
 
 export class NavigationMainList extends React.PureComponent<Props> {
   private get items(): NavigationItemObject[] {
-    const { allWorkspacesNumber } = this.props;
+    const { allWorkspaces } = this.props;
+
+    const allWorkspacesNumber = allWorkspaces.filter(workspace => {
+      if (workspace.isDevWorkspace) {
+        return true;
+      }
+      return (workspace.ref as che.Workspace).attributes?.converted === undefined;
+    }).length;
 
     return [
       { to: ROUTE.GET_STARTED, label: 'Create Workspace' },
@@ -45,7 +52,7 @@ export class NavigationMainList extends React.PureComponent<Props> {
 }
 
 const mapStateToProps = (state: AppState) => ({
-  allWorkspacesNumber: selectAllWorkspacesNumber(state),
+  allWorkspaces: selectAllWorkspaces(state),
 });
 
 const connector = connect(mapStateToProps);
diff --git a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainList.spec.tsx b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainList.spec.tsx
index af3560f3e..c8512c349 100644
--- a/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainList.spec.tsx
+++ b/packages/dashboard-frontend/src/Layout/Navigation/__tests__/MainList.spec.tsx
@@ -11,25 +11,29 @@
  */
 
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, RenderResult, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { Nav } from '@patternfly/react-core';
 
 import NavigationMainList from '../MainList';
 import { FakeStoreBuilder } from '../../../store/__mocks__/storeBuilder';
 import { Provider } from 'react-redux';
-import { createFakeCheWorkspace } from '../../../store/__mocks__/workspace';
+import { DevWorkspaceBuilder } from '../../../store/__mocks__/devWorkspaceBuilder';
+import { Store } from 'redux';
+import { CheWorkspaceBuilder } from '../../../store/__mocks__/cheWorkspaceBuilder';
 
 describe('Navigation Main List', () => {
   it('should have correct number of main navigation items', () => {
-    render(buildElement());
+    const store = new FakeStoreBuilder().build();
+    renderComponent(store);
 
     const navLinks = screen.getAllByRole('link');
     expect(navLinks.length).toEqual(2);
   });
 
   it('should have correct navigation item labels', () => {
-    render(buildElement());
+    const store = new FakeStoreBuilder().build();
+    renderComponent(store);
 
     const navLinks = screen.getAllByRole('link');
 
@@ -38,20 +42,63 @@ describe('Navigation Main List', () => {
   });
 
   it('should have correct navigation item workspaces quantity', () => {
-    let workspaces = [0, 1, 2, 3, 4].map(i => createFakeCheWorkspace('works-' + i, 'works-' + i));
-    const { rerender } = render(buildElement(workspaces));
+    let workspaces = [0, 1, 2, 3, 4].map(i =>
+      new DevWorkspaceBuilder()
+        .withId('wksp-' + i)
+        .withName('wksp-' + i)
+        .build(),
+    );
+    let store = new FakeStoreBuilder().withDevWorkspaces({ workspaces }).build();
+    const { rerender } = renderComponent(store);
 
     expect(screen.queryByRole('link', { name: 'Workspaces (5)' })).toBeInTheDocument();
 
-    workspaces = [0, 1, 2].map(i => createFakeCheWorkspace('works-' + i, 'works-' + i));
-    rerender(buildElement(workspaces));
+    workspaces = [0, 1, 2].map(i =>
+      new DevWorkspaceBuilder()
+        .withId('wksp-' + i)
+        .withName('wksp-' + i)
+        .build(),
+    );
+    store = new FakeStoreBuilder().withDevWorkspaces({ workspaces }).build();
+    rerender(buildElement(store));
 
     expect(screen.queryByRole('link', { name: 'Workspaces (3)' })).toBeInTheDocument();
   });
+
+  describe('with deprecated workspaces', () => {
+    it('should count all workspaces but converted', () => {
+      const cheworkspaces = [
+        new CheWorkspaceBuilder().withId('wksp-1').withName('wksp-1').build(),
+        new CheWorkspaceBuilder()
+          .withId('wksp-2')
+          .withName('wksp-2')
+          .withAttributes({
+            converted: new Date().toISOString(),
+          } as che.WorkspaceAttributes)
+          .build(),
+      ];
+      const devworkspaces = [0, 1].map(i =>
+        new DevWorkspaceBuilder()
+          .withId('devwksp-' + i)
+          .withName('wksp-' + i)
+          .build(),
+      );
+      const store = new FakeStoreBuilder()
+        .withCheWorkspaces({ workspaces: cheworkspaces })
+        .withDevWorkspaces({ workspaces: devworkspaces })
+        .build();
+      renderComponent(store);
+
+      expect(screen.queryByRole('link', { name: 'Workspaces (3)' })).toBeInTheDocument();
+    });
+  });
 });
 
-function buildElement(workspaces: che.Workspace[] = []): JSX.Element {
-  const store = new FakeStoreBuilder().withCheWorkspaces({ workspaces }).build();
+function renderComponent(store: Store): RenderResult {
+  return render(buildElement(store));
+}
+
+function buildElement(store: Store): React.ReactElement {
   return (
     <Provider store={store}>
       <MemoryRouter>
diff --git a/packages/dashboard-frontend/src/store/Workspaces/selectors.ts b/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
index a238a17b9..aa5e37ac5 100644
--- a/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
+++ b/packages/dashboard-frontend/src/store/Workspaces/selectors.ts
@@ -126,10 +126,6 @@ export const selectRecentWorkspaces = createSelector(
       .sort(sortByUpdatedTimeFn)
       .slice(0, recentNumber),
 );
-export const selectAllWorkspacesNumber = createSelector(
-  selectAllWorkspaces,
-  allWorkspaces => allWorkspaces.length,
-);
 
 export const selectWorkspacesError = createSelector(
   selectCheWorkspacesError,

From 6b707bd7e7cfad476e0b228564d3f542aafb7adb Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Wed, 19 Jan 2022 13:47:38 +0200
Subject: [PATCH 11/20] feat: show warning with migration instruction

---
 .../src/pages/WorkspaceDetails/index.tsx      | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
index 2f148e7dc..11ab276f2 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
@@ -23,6 +23,9 @@ import {
   PageSectionVariants,
   Tab,
   Tabs,
+  Text,
+  TextContent,
+  TextVariants,
 } from '@patternfly/react-core';
 import Head from '../../components/Head';
 import { WorkspaceDetailsTab, WorkspaceStatus } from '../../services/helpers/types';
@@ -41,6 +44,7 @@ import UnsavedChangesModal from '../../components/UnsavedChangesModal';
 import WorkspaceConversionButton from './ConversionButton';
 
 import './WorkspaceDetails.styl';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const SECTION_THEME = PageSectionVariants.light;
 
@@ -138,8 +142,22 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
     const { inlineAlertConversionError, inlineAlertRestartWarning } = this.state;
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const workspaceName = this.props.workspace!.name;
+    const isDeprecated = this.props.workspace?.isDeprecated;
+    const migratingDocs =
+      'https://devfile.io/docs/devfile/2.1.0/user-guide/migrating-to-devfile-v2.html';
     return (
-      <AlertGroup>
+      <AlertGroup className={spacing.mbLg}>
+        {isDeprecated && (
+          <Alert
+            variant={AlertVariant.warning}
+            isInline
+            title="This workspace is deprecated. Please refer the document below to see next steps."
+          >
+            <a href={migratingDocs} rel="noreferrer" target="_blank">
+              Migrating to devfile v2
+            </a>
+          </Alert>
+        )}
         {inlineAlertConversionError && (
           <Alert
             variant={AlertVariant.danger}
@@ -149,7 +167,16 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
               <AlertActionCloseButton onClose={() => this.handleCloseConversionAlert()} />
             }
           >
-            {inlineAlertConversionError}
+            <TextContent>
+              {inlineAlertConversionError}
+              <Text component={TextVariants.small}>
+                Find manual instructions for converting devfile v1 to devfile v2 in the{' '}
+                <a href={migratingDocs} rel="noreferrer" target="_blank">
+                  documentation
+                </a>
+                .
+              </Text>
+            </TextContent>
           </Alert>
         )}
         {inlineAlertRestartWarning && (

From 22201bb5dda7b12c6c34a8b4ac1a7cf605ac626e Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Wed, 19 Jan 2022 14:12:29 +0200
Subject: [PATCH 12/20] fix(workspace page): hide devfile editor buttons in
 readonly mode

---
 .../WorkspaceDetails/EditorTab/index.tsx      | 42 ++++++++++---------
 .../WorkspaceDetails/OverviewTab/index.tsx    |  2 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
index 04b2c010b..795292591 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/EditorTab/index.tsx
@@ -210,26 +210,28 @@ export class EditorTab extends React.PureComponent<Props, State> {
             onChange={(newValue, isValid) => this.onDevfileChange(newValue, isValid)}
             isReadonly={isReadonly}
           />
-          <Flex direction={{ default: 'column' }}>
-            <FlexItem align={{ default: 'alignRight' }} className={styles.buttonsGroup}>
-              <Button
-                onClick={() => this.onSave()}
-                variant="primary"
-                className={styles.saveButton}
-                isDisabled={!this.state.hasChanges || !this.state.isDevfileValid}
-              >
-                Save
-              </Button>
-              <Button
-                onClick={() => this.cancelChanges()}
-                variant="secondary"
-                className={styles.cancelButton}
-                isDisabled={!this.state.hasChanges && this.state.isDevfileValid}
-              >
-                Cancel
-              </Button>
-            </FlexItem>
-          </Flex>
+          {isReadonly === false && (
+            <Flex direction={{ default: 'column' }}>
+              <FlexItem align={{ default: 'alignRight' }} className={styles.buttonsGroup}>
+                <Button
+                  onClick={() => this.onSave()}
+                  variant="primary"
+                  className={styles.saveButton}
+                  isDisabled={!this.state.hasChanges || !this.state.isDevfileValid}
+                >
+                  Save
+                </Button>
+                <Button
+                  onClick={() => this.cancelChanges()}
+                  variant="secondary"
+                  className={styles.cancelButton}
+                  isDisabled={!this.state.hasChanges && this.state.isDevfileValid}
+                >
+                  Cancel
+                </Button>
+              </FlexItem>
+            </Flex>
+          )}
         </TextContent>
       </React.Fragment>
     );
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
index f667a10e7..073a7f450 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/OverviewTab/index.tsx
@@ -17,7 +17,7 @@ import { WorkspaceNameFormGroup } from './WorkspaceName';
 import InfrastructureNamespaceFormGroup from './InfrastructureNamespace';
 import ProjectsFormGroup from './Projects';
 import { constructWorkspace, Workspace } from '../../../services/workspace-adapter';
-import devfileApi, { isDevWorkspace } from '../../../services/devfileApi';
+import devfileApi from '../../../services/devfileApi';
 
 type Props = {
   onSave: (workspace: Workspace) => Promise<void>;

From c5eb70adbb437a1d0cbb9588189b286ad62e30ae Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Thu, 20 Jan 2022 14:21:56 +0200
Subject: [PATCH 13/20] code cleanup

---
 .../src/pages/WorkspacesList/__tests__/index.spec.tsx       | 1 -
 .../src/services/workspace-adapter/index.ts                 | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
index fc35b273e..3c2e57ed9 100644
--- a/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspacesList/__tests__/index.spec.tsx
@@ -26,7 +26,6 @@ import {
   WorkspaceAdapter,
 } from '../../../services/workspace-adapter';
 import { CheWorkspaceBuilder } from '../../../store/__mocks__/cheWorkspaceBuilder';
-import { DevWorkspaceBuilder } from '../../../store/__mocks__/devWorkspaceBuilder';
 
 jest.mock('../../../components/Head', () => {
   const FakeHead = () => {
diff --git a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
index 148936628..0d3c9e967 100644
--- a/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
+++ b/packages/dashboard-frontend/src/services/workspace-adapter/index.ts
@@ -168,10 +168,10 @@ export class WorkspaceAdapter<T extends che.Workspace | devfileApi.DevWorkspace>
         return new Date(parseInt(this.workspace.attributes.updated, 10)).getTime();
       }
     } else {
-      const timestampAnnotation =
+      const updated =
         this.workspace.metadata.annotations?.[DEVWORKSPACE_UPDATING_TIMESTAMP_ANNOTATION];
-      if (timestampAnnotation) {
-        return new Date(timestampAnnotation).getTime();
+      if (updated) {
+        return new Date(updated).getTime();
       }
     }
     return new Date().getTime();

From 4b2250e6e819e6ded88c665d723862634eb0fc0e Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Thu, 20 Jan 2022 16:56:52 +0200
Subject: [PATCH 14/20] chore: bump *-devworkspace-handler versions

---
 packages/dashboard-frontend/package.json |  4 ++--
 yarn.lock                                | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard-frontend/package.json b/packages/dashboard-frontend/package.json
index dc70ce08a..503390862 100644
--- a/packages/dashboard-frontend/package.json
+++ b/packages/dashboard-frontend/package.json
@@ -36,8 +36,8 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@eclipse-che/che-code-devworkspace-handler": "1.64.0-dev-7ba5d3e",
-    "@eclipse-che/che-theia-devworkspace-handler": "0.0.1-1639587602",
+    "@eclipse-che/che-code-devworkspace-handler": "1.64.0-dev-210b722",
+    "@eclipse-che/che-theia-devworkspace-handler": "0.0.1-1642670698",
     "@eclipse-che/devfile-converter": "0.0.1-14c62ee",
     "@eclipse-che/workspace-client": "0.0.1-1632305737",
     "@patternfly/react-core": "4.120.0",
diff --git a/yarn.lock b/yarn.lock
index c8c099099..8c62109af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -357,10 +357,10 @@
   resolved "https://registry.yarnpkg.com/@eclipse-che/api/-/api-7.39.2.tgz#a49d8a56345cbb52da7829652ffcad612e5f0391"
   integrity sha512-13zSFY4+YjYBQOzQTXE71fAX37HMQm/3rkMHN8c7Ejg1UF8ILXwC3Z28xzlMv4kSxtecn0/frqbwoZN8wRjc/g==
 
-"@eclipse-che/che-code-devworkspace-handler@1.64.0-dev-7ba5d3e":
-  version "1.64.0-dev-7ba5d3e"
-  resolved "https://registry.yarnpkg.com/@eclipse-che/che-code-devworkspace-handler/-/che-code-devworkspace-handler-1.64.0-dev-7ba5d3e.tgz#f247e7959a7db2b0539238bcfbe5cb1cb6c59542"
-  integrity sha512-EQq/db7+MQsZm4D+XLnskQOkZjzyXWx/rTaNLTOHG51zE26GkJWgsDu9NrUADxuqZ3CMqO8GIlk9j91UfNL73Q==
+"@eclipse-che/che-code-devworkspace-handler@1.64.0-dev-210b722":
+  version "1.64.0-dev-210b722"
+  resolved "https://registry.yarnpkg.com/@eclipse-che/che-code-devworkspace-handler/-/che-code-devworkspace-handler-1.64.0-dev-210b722.tgz#185625439849bb733e97eb2e34e1f415e0dcd0ed"
+  integrity sha512-QGDwuXZwxgt68dStE0JTMGB/GBnp6Q7EsDLuUZMR3yTswc44ZxAafvBS3K3pWtenErGManCwNJ+6FM8yP0Q7/A==
   dependencies:
     "@devfile/api" latest
     axios "0.21.2"
@@ -370,10 +370,10 @@
     jsonc-parser "^3.0.0"
     reflect-metadata "^0.1.13"
 
-"@eclipse-che/che-theia-devworkspace-handler@0.0.1-1639587602":
-  version "0.0.1-1639587602"
-  resolved "https://registry.yarnpkg.com/@eclipse-che/che-theia-devworkspace-handler/-/che-theia-devworkspace-handler-0.0.1-1639587602.tgz#ce26a00b7c668a3e2aa03a298c716354329ec4f9"
-  integrity sha512-vCzirEnaul87XaXXRGtr+wCJjJSM0M1BO4rdN7EazzdOLiucIF8kjvIk9Qjzbty2Pfx2ntveXI0wjnWFJ4l4UA==
+"@eclipse-che/che-theia-devworkspace-handler@0.0.1-1642670698":
+  version "0.0.1-1642670698"
+  resolved "https://registry.yarnpkg.com/@eclipse-che/che-theia-devworkspace-handler/-/che-theia-devworkspace-handler-0.0.1-1642670698.tgz#c64f57b66b40b5e1f211eba7855609d71182a290"
+  integrity sha512-nRS7n/X+PV7S6o/KjPbI/OH35eUArQ4MBiBX7+SvlwEqyVk/8Fac+/zg1h/A3mT23DN6X47ooBT+eYNLGNSitg==
   dependencies:
     "@devfile/api" latest
     axios "0.21.2"

From 9e95eb8d0600f61f1e5f3492fb3c2ebc71dd5fcb Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Thu, 20 Jan 2022 17:34:36 +0200
Subject: [PATCH 15/20] fix: 'Show Original Devfile' path

---
 packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
index 0ee92f457..d33523006 100644
--- a/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
+++ b/packages/dashboard-frontend/src/containers/WorkspaceDetails.tsx
@@ -97,7 +97,7 @@ class WorkspaceDetailsContainer extends React.Component<Props> {
     if (!oldWorkspace) {
       return;
     }
-    return buildDetailsLocation(oldWorkspace);
+    return buildDetailsLocation(oldWorkspace, WorkspaceDetailsTab.DEVFILE);
   }
 
   public componentDidMount(): void {

From d7a3e308611c1d02a4fef1d09f4cc52cf241b089 Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Mon, 24 Jan 2022 10:23:50 +0200
Subject: [PATCH 16/20] fix: progress-indicator componen

Added area-label to get rid of hundreds warning in browser console.
---
 .../__tests__/__snapshots__/Progress.spec.tsx.snap         | 5 +++--
 .../dashboard-frontend/src/components/Progress/index.tsx   | 7 ++++---
 .../src/pages/GetStarted/GetStartedTab/index.tsx           | 4 ++--
 .../pages/UserPreferences/ContainerRegistriesTab/index.tsx | 4 ++--
 .../src/pages/WorkspaceDetails/index.tsx                   | 6 +++---
 5 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/dashboard-frontend/src/components/Progress/__tests__/__snapshots__/Progress.spec.tsx.snap b/packages/dashboard-frontend/src/components/Progress/__tests__/__snapshots__/Progress.spec.tsx.snap
index 9d2dba077..9d4504156 100644
--- a/packages/dashboard-frontend/src/components/Progress/__tests__/__snapshots__/Progress.spec.tsx.snap
+++ b/packages/dashboard-frontend/src/components/Progress/__tests__/__snapshots__/Progress.spec.tsx.snap
@@ -4,12 +4,12 @@ exports[`Progress component should render progress with loading correctly 1`] =
 <span>
   <div
     className="pf-c-progress pf-m-sm pf-m-singleline"
-    id="che-progress-ind"
+    id="progress-indicator"
   >
     <div
       aria-hidden="true"
       className="pf-c-progress__description"
-      id="che-progress-ind-description"
+      id="progress-indicator-description"
       onMouseEnter={null}
     >
       
@@ -19,6 +19,7 @@ exports[`Progress component should render progress with loading correctly 1`] =
       className="pf-c-progress__status"
     />
     <div
+      aria-label="Action is in progress"
       aria-valuemax={100}
       aria-valuemin={0}
       aria-valuenow={0}
diff --git a/packages/dashboard-frontend/src/components/Progress/index.tsx b/packages/dashboard-frontend/src/components/Progress/index.tsx
index d70f8ac91..77dba46cd 100644
--- a/packages/dashboard-frontend/src/components/Progress/index.tsx
+++ b/packages/dashboard-frontend/src/components/Progress/index.tsx
@@ -23,7 +23,7 @@ type State = {
   progressVal: number;
 };
 
-class CheProgress extends React.PureComponent<Props, State> {
+class ProgressIndicator extends React.PureComponent<Props, State> {
   private intervalId: any;
   private readonly onProgressInc: () => void;
 
@@ -78,10 +78,11 @@ class CheProgress extends React.PureComponent<Props, State> {
       <span className={styles.progressLine}>
         {this.props.isLoading || this.state.progressVal !== 0 ? (
           <Progress
-            id="che-progress-ind"
+            id="progress-indicator"
             value={progressVal}
             size={ProgressSize.sm}
             measureLocation={ProgressMeasureLocation.none}
+            aria-label="Action is in progress"
           />
         ) : (
           ''
@@ -91,4 +92,4 @@ class CheProgress extends React.PureComponent<Props, State> {
   }
 }
 
-export default CheProgress;
+export default ProgressIndicator;
diff --git a/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/index.tsx b/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/index.tsx
index fe427e6dd..07d1b5ca1 100644
--- a/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/GetStarted/GetStartedTab/index.tsx
@@ -14,7 +14,7 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Flex, FlexItem, PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { AppState } from '../../../store';
-import CheProgress from '../../../components/Progress';
+import ProgressIndicator from '../../../components/Progress';
 import { SamplesListHeader } from './SamplesListHeader';
 import SamplesListToolbar from './SamplesListToolbar';
 import SamplesListGallery from './SamplesListGallery';
@@ -115,7 +115,7 @@ export class SamplesListTab extends React.PureComponent<Props, State> {
 
     return (
       <>
-        <CheProgress isLoading={isLoading} />
+        <ProgressIndicator isLoading={isLoading} />
         <PageSection variant={PageSectionVariants.default} style={{ background: '#f0f0f0' }}>
           <PageSection variant={PageSectionVariants.light}>
             <ImportFromGit
diff --git a/packages/dashboard-frontend/src/pages/UserPreferences/ContainerRegistriesTab/index.tsx b/packages/dashboard-frontend/src/pages/UserPreferences/ContainerRegistriesTab/index.tsx
index 7b4070d13..fd62669ca 100644
--- a/packages/dashboard-frontend/src/pages/UserPreferences/ContainerRegistriesTab/index.tsx
+++ b/packages/dashboard-frontend/src/pages/UserPreferences/ContainerRegistriesTab/index.tsx
@@ -24,7 +24,7 @@ import { Table, TableBody, TableHeader } from '@patternfly/react-table';
 import { History } from 'history';
 import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
-import CheProgress from '../../../components/Progress';
+import ProgressIndicator from '../../../components/Progress';
 import { lazyInject } from '../../../inversify.config';
 import { AppAlerts } from '../../../services/alerts/appAlerts';
 import { AlertItem } from '../../../services/helpers/types';
@@ -297,7 +297,7 @@ export class ContainerRegistriesTab extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <CheProgress isLoading={isLoading} />
+        <ProgressIndicator isLoading={isLoading} />
         <EditRegistryModal
           onCancel={() => this.setEditModalStatus(false)}
           onChange={_registry => this.handleRegistryChange(_registry)}
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
index 11ab276f2..c13db0f06 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
@@ -30,7 +30,7 @@ import {
 import Head from '../../components/Head';
 import { WorkspaceDetailsTab, WorkspaceStatus } from '../../services/helpers/types';
 import Header from './Header';
-import CheProgress from '../../components/Progress';
+import ProgressIndicator from '../../components/Progress';
 import { AppState } from '../../store';
 import { HeaderActionSelect } from './Header/Actions';
 import { lazyInject } from '../../inversify.config';
@@ -301,7 +301,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
           {inlineAlerts}
           <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
             <Tab eventKey={WorkspaceDetailsTab.OVERVIEW} title={WorkspaceDetailsTab.OVERVIEW}>
-              <CheProgress isLoading={this.props.isLoading} />
+              <ProgressIndicator isLoading={this.props.isLoading} />
               <OverviewTab
                 ref={this.overviewTabPageRef}
                 workspace={workspace}
@@ -309,7 +309,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
               />
             </Tab>
             <Tab eventKey={WorkspaceDetailsTab.DEVFILE} title={WorkspaceDetailsTab.DEVFILE}>
-              <CheProgress isLoading={this.props.isLoading} />
+              <ProgressIndicator isLoading={this.props.isLoading} />
               <EditorTab
                 ref={this.editorTabPageRef}
                 workspace={workspace}

From bcb430a7fcbe3a4fee044f828fcfa145c4308d6f Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Mon, 24 Jan 2022 11:47:23 +0200
Subject: [PATCH 17/20] refact: Conversion button

get rid of unnecessary patch request
---
 .../ConversionButton/index.tsx                | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx
index b97c0e8c4..8b4479af7 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/ConversionButton/index.tsx
@@ -15,7 +15,7 @@ import { Location, History } from 'history';
 import { connect, ConnectedProps } from 'react-redux';
 import { Button } from '@patternfly/react-core';
 import common from '@eclipse-che/common';
-import devfileApi, { isDevWorkspace } from '../../../services/devfileApi';
+import { isDevWorkspace } from '../../../services/devfileApi';
 import { ORIGINAL_WORKSPACE_ID_ANNOTATION } from '../../../services/devfileApi/devWorkspace/metadata';
 import { convertDevfileV1toDevfileV2 } from '../../../services/devfile/converters';
 import { Workspace } from '../../../services/workspace-adapter';
@@ -29,6 +29,7 @@ import * as WorkspacesStore from '../../../store/Workspaces';
 import * as DevWorkspacesStore from '../../../store/Workspaces/devWorkspaces';
 import { buildDetailsLocation } from '../../../services/helpers/location';
 import { WorkspaceDetailsTab } from '../../../services/helpers/types';
+import { DEVWORKSPACE_METADATA_ANNOTATION } from '../../../services/workspace-client/devworkspace/devWorkspaceClient';
 
 type Props = MappedProps & {
   history: History;
@@ -60,15 +61,17 @@ export class WorkspaceConversionButton extends React.PureComponent<Props, State>
 
     try {
       const newWorkspaceLocation = await this.convert(oldWorkspace);
+      this.setState({
+        isDisabled: false,
+      });
       this.props.history.replace(newWorkspaceLocation);
     } catch (e) {
+      this.setState({
+        isDisabled: false,
+      });
       const errorMessage = common.helpers.errors.getMessage(e);
       this.props.onError(errorMessage);
     }
-
-    this.setState({
-      isDisabled: false,
-    });
   }
 
   private async convert(oldWorkspace: Workspace): Promise<Location> {
@@ -78,6 +81,15 @@ export class WorkspaceConversionButton extends React.PureComponent<Props, State>
 
     const devfileV1 = oldWorkspace.devfile as che.WorkspaceDevfile;
     const devfileV2 = await convertDevfileV1toDevfileV2(devfileV1);
+    if (devfileV2.metadata.attributes === undefined) {
+      devfileV2.metadata.attributes = {};
+    }
+    if (devfileV2.metadata.attributes[DEVWORKSPACE_METADATA_ANNOTATION] === undefined) {
+      devfileV2.metadata.attributes[DEVWORKSPACE_METADATA_ANNOTATION] = {};
+    }
+    devfileV2.metadata.attributes[DEVWORKSPACE_METADATA_ANNOTATION][
+      ORIGINAL_WORKSPACE_ID_ANNOTATION
+    ] = oldWorkspace.id;
     const defaultNamespace = this.props.defaultNamespace.name;
     // create a new workspace
     await this.props.createWorkspaceFromDevfile(
@@ -92,19 +104,11 @@ export class WorkspaceConversionButton extends React.PureComponent<Props, State>
     const newWorkspace = this.props.allWorkspaces.find(
       workspace => workspace.namespace === defaultNamespace && workspace.name === oldWorkspace.name,
     );
+
     if (!newWorkspace) {
       throw new Error('The new DevWorkspace has been created but cannot be obtained.');
     }
 
-    // add annotation to the new workspace
-    // so then we can figure out the original workspace
-    const newDevworkspace = newWorkspace.ref as devfileApi.DevWorkspace;
-    if (!newDevworkspace.metadata.annotations) {
-      newDevworkspace.metadata.annotations = {};
-    }
-    newDevworkspace.metadata.annotations[ORIGINAL_WORKSPACE_ID_ANNOTATION] = oldWorkspace.id;
-    await this.props.updateWorkspaceAnnotation(newDevworkspace);
-
     // add 'converted' attribute to the old workspace
     // to be able to hide it on the Workspaces page
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

From aa846b46f20ecf5ff9a6f1d0c047e7c5e601a7de Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Mon, 24 Jan 2022 15:11:49 +0200
Subject: [PATCH 18/20] refact: extract WorkspaceInlineAlerts component

---
 .../InlineAlerts/__tests__/index.spec.tsx     | 262 ++++++++++++++++++
 .../WorkspaceDetails/InlineAlerts/index.tsx   | 159 +++++++++++
 .../src/pages/WorkspaceDetails/index.tsx      |  85 +-----
 3 files changed, 434 insertions(+), 72 deletions(-)
 create mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/__tests__/index.spec.tsx
 create mode 100644 packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/index.tsx

diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/__tests__/index.spec.tsx
new file mode 100644
index 000000000..f77ef9766
--- /dev/null
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/__tests__/index.spec.tsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright (c) 2018-2021 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 React from 'react';
+import { render, RenderResult, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { WorkspaceInlineAlerts } from '..';
+import {
+  constructWorkspace,
+  Workspace,
+  WorkspaceAdapter,
+} from '../../../../services/workspace-adapter';
+import { DevWorkspaceBuilder } from '../../../../store/__mocks__/devWorkspaceBuilder';
+import { CheWorkspaceBuilder } from '../../../../store/__mocks__/cheWorkspaceBuilder';
+
+const mockOnCloseConversionError = jest.fn();
+const mockOnCloseRestartAlert = jest.fn();
+
+describe('Inline alerts', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should render empty alert group', () => {
+    const workspace = constructWorkspace(
+      new DevWorkspaceBuilder().withName('wksp').withNamespace('user').build(),
+    );
+    renderComponent({ workspace });
+
+    const alertHeadings = screen.queryAllByRole('heading');
+    expect(alertHeadings.length).toEqual(0);
+  });
+
+  it('should render the deprecation warning', () => {
+    const deprecatedId = 'wksp-id';
+    WorkspaceAdapter.setDeprecatedIds([deprecatedId]);
+    const workspace = constructWorkspace(
+      new CheWorkspaceBuilder().withId(deprecatedId).withName('wksp').withNamespace('user').build(),
+    );
+    renderComponent({ workspace });
+
+    const alertHeading = screen.queryByRole('heading');
+    expect(alertHeading).toBeTruthy();
+    expect(alertHeading).toBeInTheDocument();
+    expect(alertHeading).toHaveTextContent('This workspace is deprecated.');
+  });
+
+  it('should render the conversion error', () => {
+    const deprecatedId = 'wksp-id';
+    WorkspaceAdapter.setDeprecatedIds([deprecatedId]);
+    const workspace = constructWorkspace(
+      new CheWorkspaceBuilder().withId(deprecatedId).withName('wksp').withNamespace('user').build(),
+    );
+    const conversionError = 'An error happened during devfiles conversion.';
+    renderComponent({ workspace, conversionError });
+
+    const alertHeading = screen.queryByRole('heading', {
+      name: /workspace conversion failed/i,
+    });
+    expect(alertHeading).toBeTruthy();
+    expect(alertHeading).toBeInTheDocument();
+    expect(screen.queryByText(conversionError)).toBeTruthy();
+    expect(screen.queryByText(/instructions for converting/i)).toBeTruthy();
+  });
+
+  it('should render the restart warning', () => {
+    const workspace = constructWorkspace(
+      new DevWorkspaceBuilder().withName('wksp').withNamespace('user').build(),
+    );
+    renderComponent({ workspace, restartWarning: true });
+
+    const alertHeading = screen.queryByRole('heading');
+    expect(alertHeading).toBeTruthy();
+    expect(alertHeading).toBeInTheDocument();
+    expect(alertHeading).toHaveTextContent(/should be restarted to apply changes/i);
+  });
+
+  describe('workspace failures', () => {
+    it('should render no alerts if status message was not set', () => {
+      const workspace = constructWorkspace(
+        new DevWorkspaceBuilder()
+          .withName('wksp')
+          .withNamespace('user')
+          .withStatus({ phase: 'FAILED' })
+          .build(),
+      );
+      renderComponent({ workspace });
+
+      const alertHeading = screen.queryByRole('heading');
+      expect(alertHeading).toBeFalsy();
+    });
+
+    it('should initially render a failure error', () => {
+      const failureMessage = 'The workspace failed to start.';
+      const workspace = constructWorkspace(
+        new DevWorkspaceBuilder()
+          .withName('wksp')
+          .withNamespace('user')
+          .withStatus({ phase: 'FAILED', message: failureMessage })
+          .build(),
+      );
+      renderComponent({ workspace });
+
+      const alertHeading = screen.queryByRole('heading');
+      expect(alertHeading).toBeTruthy();
+      expect(alertHeading).toBeInTheDocument();
+      expect(alertHeading).toHaveTextContent(failureMessage);
+    });
+
+    it('should re-render a failure error', () => {
+      const failureMessage = 'The workspace failed to start.';
+      const initWorkspace = constructWorkspace(
+        new DevWorkspaceBuilder()
+          .withName('wksp')
+          .withNamespace('user')
+          .withStatus({ phase: 'FAILED' })
+          .build(),
+      );
+      const { rerender } = renderComponent({ workspace: initWorkspace });
+
+      const prevAlertHeading = screen.queryByRole('heading');
+      expect(prevAlertHeading).toBeFalsy();
+
+      const nextWorkspace = constructWorkspace(
+        new DevWorkspaceBuilder()
+          .withName('wksp')
+          .withNamespace('user')
+          .withStatus({ phase: 'FAILED', message: failureMessage })
+          .build(),
+      );
+      reRenderComponent({ workspace: nextWorkspace }, rerender);
+
+      const nextAlertHeading = screen.queryByRole('heading');
+      expect(nextAlertHeading).toBeTruthy();
+      expect(nextAlertHeading).toBeInTheDocument();
+      expect(nextAlertHeading).toHaveTextContent(failureMessage);
+    });
+
+    // the alert should remain closed if until the workspace status is changed
+    it('should close a failure error', () => {
+      const failureMessage = 'The workspace failed to start.';
+      const devworkspace = new DevWorkspaceBuilder()
+        .withName('wksp')
+        .withNamespace('user')
+        .withStatus({ phase: 'FAILED', message: failureMessage })
+        .build();
+      const prevWorkspace = constructWorkspace(devworkspace);
+      const { rerender } = renderComponent({ workspace: prevWorkspace });
+
+      // alert visible
+      let prevAlertHeading = screen.queryByRole('heading');
+      expect(prevAlertHeading).toBeTruthy();
+
+      const closeButton = screen.getByRole('button', {
+        name: /workspace failed/i,
+      });
+      userEvent.click(closeButton);
+
+      // alert closed
+      prevAlertHeading = screen.queryByRole('heading');
+      expect(prevAlertHeading).toBeFalsy();
+
+      const nextWorkspace = constructWorkspace(devworkspace);
+      reRenderComponent({ workspace: nextWorkspace }, rerender);
+
+      // alert remains closed
+      const nextAlertHeading = screen.queryByRole('heading');
+      expect(nextAlertHeading).toBeFalsy();
+    });
+
+    // the alert should be reopened if the workspace status is changed
+    it('should reopen a failure error alert', () => {
+      const failureMessage = 'The workspace failed to start.';
+      const failedWorkspace = constructWorkspace(
+        new DevWorkspaceBuilder()
+          .withName('wksp')
+          .withNamespace('user')
+          .withStatus({ phase: 'FAILED', message: failureMessage })
+          .build(),
+      );
+      const startingWorkspace = constructWorkspace(
+        new DevWorkspaceBuilder()
+          .withName('wksp')
+          .withNamespace('user')
+          .withStatus({ phase: 'STARTING' })
+          .build(),
+      );
+
+      const { rerender } = renderComponent({ workspace: failedWorkspace });
+
+      // alert visible
+      let prevAlertHeading = screen.queryByRole('heading');
+      expect(prevAlertHeading).toBeTruthy();
+
+      const closeButton = screen.getByRole('button', {
+        name: /workspace failed/i,
+      });
+      userEvent.click(closeButton);
+
+      // alert closed
+      prevAlertHeading = screen.queryByRole('heading');
+      expect(prevAlertHeading).toBeFalsy();
+
+      // render the workspace in 'starting' phase
+      reRenderComponent({ workspace: startingWorkspace }, rerender);
+
+      // render the workspace in 'failed' phase again
+      reRenderComponent({ workspace: failedWorkspace }, rerender);
+
+      // alert should be visible
+      const nextAlertHeading = screen.queryByRole('heading');
+      expect(nextAlertHeading).toBeTruthy();
+    });
+  });
+});
+
+function renderComponent(options: {
+  workspace: Workspace;
+  conversionError?: string;
+  restartWarning?: boolean;
+}): RenderResult {
+  options.restartWarning = !!options.restartWarning;
+
+  return render(
+    <WorkspaceInlineAlerts
+      workspace={options.workspace}
+      conversionError={options.conversionError}
+      showRestartWarning={options.restartWarning}
+      onCloseConversionAlert={mockOnCloseConversionError}
+      onCloseRestartAlert={mockOnCloseRestartAlert}
+    />,
+  );
+}
+function reRenderComponent(
+  options: {
+    workspace: Workspace;
+    conversionError?: string;
+    restartWarning?: boolean;
+  },
+  rerender: (ui: React.ReactElement) => void,
+): void {
+  options.restartWarning = !!options.restartWarning;
+
+  rerender(
+    <WorkspaceInlineAlerts
+      workspace={options.workspace}
+      conversionError={options.conversionError}
+      showRestartWarning={options.restartWarning}
+      onCloseConversionAlert={mockOnCloseConversionError}
+      onCloseRestartAlert={mockOnCloseRestartAlert}
+    />,
+  );
+}
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/index.tsx
new file mode 100644
index 000000000..c6b0c7665
--- /dev/null
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/InlineAlerts/index.tsx
@@ -0,0 +1,159 @@
+/*
+ * Copyright (c) 2018-2021 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 React from 'react';
+import {
+  AlertGroup,
+  Alert,
+  AlertVariant,
+  AlertActionCloseButton,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import devfileApi from '../../../services/devfileApi';
+import { DevWorkspaceStatus } from '../../../services/helpers/types';
+import { Workspace } from '../../../services/workspace-adapter';
+
+const migratingDocs =
+  'https://devfile.io/docs/devfile/2.1.0/user-guide/migrating-to-devfile-v2.html';
+
+type Props = {
+  workspace: Workspace;
+  conversionError: string | undefined;
+  onCloseConversionAlert: () => void;
+  showRestartWarning: boolean;
+  onCloseRestartAlert: () => void;
+};
+
+type State = {
+  showFailureAlert: boolean;
+};
+
+export class WorkspaceInlineAlerts extends React.PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showFailureAlert: true,
+    };
+  }
+
+  private buildDeprecationAlert(): React.ReactElement {
+    return (
+      <Alert
+        variant={AlertVariant.warning}
+        isInline
+        title="This workspace is deprecated. Please refer the document below to see next steps."
+      >
+        <a href={migratingDocs} rel="noreferrer" target="_blank">
+          Migrating to devfile v2
+        </a>
+      </Alert>
+    );
+  }
+
+  private buildConversionAlert(): React.ReactElement {
+    const { conversionError } = this.props;
+    return (
+      <Alert
+        variant={AlertVariant.danger}
+        isInline
+        title="Workspace conversion failed."
+        actionClose={<AlertActionCloseButton onClose={() => this.props.onCloseConversionAlert()} />}
+      >
+        <TextContent>
+          {conversionError}
+          <Text component={TextVariants.small}>
+            Find manual instructions for converting devfile v1 to devfile v2 in the{' '}
+            <a href={migratingDocs} rel="noreferrer" target="_blank">
+              documentation
+            </a>
+            .
+          </Text>
+        </TextContent>
+      </Alert>
+    );
+  }
+
+  private buildRestartAlert(): React.ReactElement {
+    const { workspace } = this.props;
+    return (
+      <Alert
+        variant={AlertVariant.warning}
+        isInline
+        title={
+          <React.Fragment>
+            The workspace <em>{workspace.name}&nbsp;</em> should be restarted to apply changes.
+          </React.Fragment>
+        }
+        actionClose={<AlertActionCloseButton onClose={() => this.props.onCloseRestartAlert()} />}
+      />
+    );
+  }
+
+  private buildFailureAlert(): React.ReactElement {
+    const { workspace } = this.props;
+    if (!workspace.isDevWorkspace) {
+      return <></>;
+    }
+    const { status } = workspace.ref as devfileApi.DevWorkspace;
+    if (!status) {
+      return <></>;
+    }
+    const title = status.message;
+    if (!title) {
+      return <></>;
+    }
+
+    return (
+      <Alert
+        variant={AlertVariant.danger}
+        isInline
+        title={title}
+        actionClose={<AlertActionCloseButton onClose={() => this.handleCloseFailureAlert()} />}
+      />
+    );
+  }
+
+  private handleCloseFailureAlert(): void {
+    this.setState({
+      showFailureAlert: false,
+    });
+  }
+
+  public componentDidUpdate(prevProps: Props): void {
+    if (this.state.showFailureAlert === false) {
+      const showFailureAlert = this.props.workspace.status !== prevProps.workspace.status;
+      this.setState({
+        showFailureAlert,
+      });
+    }
+  }
+
+  render(): React.ReactElement {
+    const { workspace, conversionError, showRestartWarning: restartWarning } = this.props;
+    const { showFailureAlert } = this.state;
+
+    return (
+      <AlertGroup className={spacing.mbLg}>
+        {workspace.isDeprecated && this.buildDeprecationAlert()}
+        {conversionError && this.buildConversionAlert()}
+        {restartWarning && this.buildRestartAlert()}
+        {showFailureAlert &&
+          workspace.status === DevWorkspaceStatus.FAILED &&
+          this.buildFailureAlert()}
+      </AlertGroup>
+    );
+  }
+}
diff --git a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
index c13db0f06..7f7212060 100644
--- a/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
+++ b/packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx
@@ -14,18 +14,12 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Link } from 'react-router-dom';
 import {
-  Alert,
-  AlertActionCloseButton,
-  AlertGroup,
   AlertVariant,
   Button,
   PageSection,
   PageSectionVariants,
   Tab,
   Tabs,
-  Text,
-  TextContent,
-  TextVariants,
 } from '@patternfly/react-core';
 import Head from '../../components/Head';
 import { WorkspaceDetailsTab, WorkspaceStatus } from '../../services/helpers/types';
@@ -42,9 +36,9 @@ import { History, UnregisterCallback, Location } from 'history';
 import { isCheWorkspace, Workspace } from '../../services/workspace-adapter';
 import UnsavedChangesModal from '../../components/UnsavedChangesModal';
 import WorkspaceConversionButton from './ConversionButton';
+import { WorkspaceInlineAlerts } from './InlineAlerts';
 
 import './WorkspaceDetails.styl';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const SECTION_THEME = PageSectionVariants.light;
 
@@ -59,7 +53,7 @@ type State = {
   activeTabKey: WorkspaceDetailsTab;
   clickedTabIndex?: WorkspaceDetailsTab;
   inlineAlertConversionError?: string;
-  inlineAlertRestartWarning?: boolean;
+  showInlineAlertRestartWarning: boolean;
 };
 
 export class WorkspaceDetails extends React.PureComponent<Props, State> {
@@ -86,6 +80,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
 
     this.state = {
       activeTabKey: this.getActiveTabKey(this.props.history.location.search),
+      showInlineAlertRestartWarning: false,
     };
 
     // Toggle currently active tab
@@ -128,75 +123,16 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
 
   private handleRestartWarning(): void {
     this.setState({
-      inlineAlertRestartWarning: true,
+      showInlineAlertRestartWarning: true,
     });
   }
 
   private handleCloseRestartWarning(): void {
     this.setState({
-      inlineAlertRestartWarning: false,
+      showInlineAlertRestartWarning: false,
     });
   }
 
-  private buildInlineAlerts(): React.ReactElement {
-    const { inlineAlertConversionError, inlineAlertRestartWarning } = this.state;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const workspaceName = this.props.workspace!.name;
-    const isDeprecated = this.props.workspace?.isDeprecated;
-    const migratingDocs =
-      'https://devfile.io/docs/devfile/2.1.0/user-guide/migrating-to-devfile-v2.html';
-    return (
-      <AlertGroup className={spacing.mbLg}>
-        {isDeprecated && (
-          <Alert
-            variant={AlertVariant.warning}
-            isInline
-            title="This workspace is deprecated. Please refer the document below to see next steps."
-          >
-            <a href={migratingDocs} rel="noreferrer" target="_blank">
-              Migrating to devfile v2
-            </a>
-          </Alert>
-        )}
-        {inlineAlertConversionError && (
-          <Alert
-            variant={AlertVariant.danger}
-            isInline
-            title="Workspace conversion failed."
-            actionClose={
-              <AlertActionCloseButton onClose={() => this.handleCloseConversionAlert()} />
-            }
-          >
-            <TextContent>
-              {inlineAlertConversionError}
-              <Text component={TextVariants.small}>
-                Find manual instructions for converting devfile v1 to devfile v2 in the{' '}
-                <a href={migratingDocs} rel="noreferrer" target="_blank">
-                  documentation
-                </a>
-                .
-              </Text>
-            </TextContent>
-          </Alert>
-        )}
-        {inlineAlertRestartWarning && (
-          <Alert
-            variant={AlertVariant.warning}
-            isInline
-            title={
-              <React.Fragment>
-                The workspace <em>{workspaceName}&nbsp;</em> should be restarted to apply changes.
-              </React.Fragment>
-            }
-            actionClose={
-              <AlertActionCloseButton onClose={() => this.handleCloseRestartWarning()} />
-            }
-          />
-        )}
-      </AlertGroup>
-    );
-  }
-
   private getActiveTabKey(search: History.Search): WorkspaceDetailsTab {
     if (search) {
       const searchParam = new URLSearchParams(search.substring(1));
@@ -266,8 +202,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
     }
 
     const workspaceName = workspace.name;
-
-    const inlineAlerts = this.buildInlineAlerts();
+    const { inlineAlertConversionError, showInlineAlertRestartWarning } = this.state;
 
     return (
       <React.Fragment>
@@ -298,7 +233,13 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
           />
         </Header>
         <PageSection variant={SECTION_THEME} className="workspace-details-tabs">
-          {inlineAlerts}
+          <WorkspaceInlineAlerts
+            workspace={workspace}
+            conversionError={inlineAlertConversionError}
+            showRestartWarning={showInlineAlertRestartWarning}
+            onCloseConversionAlert={() => this.handleCloseConversionAlert()}
+            onCloseRestartAlert={() => this.handleCloseRestartWarning()}
+          />
           <Tabs activeKey={this.state.activeTabKey} onSelect={this.handleTabClick}>
             <Tab eventKey={WorkspaceDetailsTab.OVERVIEW} title={WorkspaceDetailsTab.OVERVIEW}>
               <ProgressIndicator isLoading={this.props.isLoading} />

From 4c435f91ad5a210632615dab24c62e93bb34552b Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Tue, 25 Jan 2022 09:23:43 +0200
Subject: [PATCH 19/20] chore: updated dependencies list

---
 .deps/EXCLUDED/dev.md  | 2 +-
 .deps/EXCLUDED/prod.md | 2 +-
 .deps/prod.md          | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.deps/EXCLUDED/dev.md b/.deps/EXCLUDED/dev.md
index fa04182fb..d109daf33 100644
--- a/.deps/EXCLUDED/dev.md
+++ b/.deps/EXCLUDED/dev.md
@@ -3,5 +3,5 @@ This file contains a manual contribution to .deps/dev.md and it's needed because
 | Packages | Resolved CQs |
 | --- | --- |
 | `keycloak-js@10.0.2` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/keycloak-js/10.0.2) |
-| `x-is-string@0.1.0` | [CQ22418](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22418) |
 | `postcss-syntax@0.36.2` | [CQ22418](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22418) |
+| `x-is-string@0.1.0` | [CQ22418](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22418) |
diff --git a/.deps/EXCLUDED/prod.md b/.deps/EXCLUDED/prod.md
index 411389316..60e849357 100644
--- a/.deps/EXCLUDED/prod.md
+++ b/.deps/EXCLUDED/prod.md
@@ -6,7 +6,7 @@ This file lists dependencies that do not need CQs or auto-detection does not wor
 | `@eclipse-che/common@7.43.0-next` | N/A |
 | `@eclipse-che/dashboard-backend@7.43.0-next` | N/A |
 | `@eclipse-che/dashboard-frontend@7.43.0-next` | N/A |
+| `fastify-swagger@4.11.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fastify-swagger/4.11.0) |
 | `fsevents@2.3.2` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fsevents/2.3.2) |
 | `jsdom@16.7.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/jsdom/16.7.0) |
 | `node-notifier@8.0.2` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/node-notifier/8.0.2) |
-| `fastify-swagger@4.11.0` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fastify-swagger/4.11.0) |
diff --git a/.deps/prod.md b/.deps/prod.md
index 428473414..aa491f0fe 100644
--- a/.deps/prod.md
+++ b/.deps/prod.md
@@ -5,12 +5,12 @@
 | [`@babel/runtime@7.15.4`](https://github.com/babel/babel.git) | MIT | clearlydefined |
 | [`@devfile/api@2.2.0-alpha-1633545768`](https://github.com/devfile/api.git) | EPL-2.0 | clearlydefined |
 | `@eclipse-che/api@7.36.0` | EPL-2.0 | clearlydefined |
-| [`@eclipse-che/che-code-devworkspace-handler@1.64.0-dev-7ba5d3e`](git+https://github.com/che-incubator/che-code.git) | EPL-2.0 | clearlydefined |
-| [`@eclipse-che/che-theia-devworkspace-handler@0.0.1-1639587602`](git+https://github.com/eclipse-che/che-theia.git) | EPL-2.0 | clearlydefined |
+| [`@eclipse-che/che-code-devworkspace-handler@1.64.0-dev-210b722`](git+https://github.com/che-incubator/che-code.git) | EPL-2.0 | clearlydefined |
+| [`@eclipse-che/che-theia-devworkspace-handler@0.0.1-1642670698`](git+https://github.com/eclipse-che/che-theia.git) | EPL-2.0 | clearlydefined |
 | [`@eclipse-che/common@7.43.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | N/A |
 | [`@eclipse-che/dashboard-backend@7.43.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | N/A |
 | [`@eclipse-che/dashboard-frontend@7.43.0-next`](git://github.com/eclipse/che-dashboard.git) | EPL-2.0 | N/A |
-| [`@eclipse-che/devfile-converter@0.0.1-437a239`](git+https://github.com/che-incubator/devfile-converter.git) | EPL-2.0 | clearlydefined |
+| [`@eclipse-che/devfile-converter@0.0.1-14c62ee`](git+https://github.com/che-incubator/devfile-converter.git) | EPL-2.0 | clearlydefined |
 | [`@eclipse-che/workspace-client@0.0.1-1632305737`](https://github.com/eclipse/che-workspace-client) | EPL-2.0 | clearlydefined |
 | [`@fastify/ajv-compiler@1.1.0`](git+https://github.com/fastify/ajv-compiler.git) | MIT | clearlydefined |
 | [`@hapi/address@2.1.4`](git://github.com/hapijs/address) | BSD-3-Clause | clearlydefined |

From 1651f28b5364ed3d42072f57c26ce43d0c55756f Mon Sep 17 00:00:00 2001
From: Oleksii Kurinnyi <okurinny@redhat.com>
Date: Tue, 25 Jan 2022 13:16:58 +0200
Subject: [PATCH 20/20] test: filter workspaces

---
 .../__tests__/WorkspacesList.spec.tsx         | 128 ++++++++++++++----
 1 file changed, 102 insertions(+), 26 deletions(-)

diff --git a/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx b/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx
index 7602c6a3d..d8937dcf5 100644
--- a/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx
+++ b/packages/dashboard-frontend/src/containers/__tests__/WorkspacesList.spec.tsx
@@ -21,13 +21,8 @@ import { ActionCreators } from '../../store/Workspaces';
 import WorkspacesList from '../WorkspacesList';
 import { FakeStoreBuilder } from '../../store/__mocks__/storeBuilder';
 import { CheWorkspaceBuilder } from '../../store/__mocks__/cheWorkspaceBuilder';
-
-let workspaces = [0, 1, 2, 3, 4].map(i =>
-  new CheWorkspaceBuilder()
-    .withId('workspace-' + i)
-    .withName('workspace-' + i)
-    .build(),
-);
+import { DevWorkspaceBuilder } from '../../store/__mocks__/devWorkspaceBuilder';
+import { Workspace, WorkspaceAdapter } from '../../services/workspace-adapter';
 
 jest.mock('../../store/Workspaces/index', () => {
   return {
@@ -39,7 +34,19 @@ jest.mock('../../store/Workspaces/index', () => {
   };
 });
 jest.mock('../../pages/WorkspacesList', () => {
-  const FakeWorkspacesList = () => <div>Workspaces List Page</div>;
+  const FakeWorkspacesList = (props: { workspaces: Workspace[] }): React.ReactElement => {
+    const ids = props.workspaces.map(wksp => (
+      <span data-testid="workspace" key={wksp.id}>
+        {wksp.name}
+      </span>
+    ));
+    return (
+      <div>
+        Workspaces List Page
+        <div data-testid="workspaces-list">{ids}</div>
+      </div>
+    );
+  };
   FakeWorkspacesList.displayName = 'WorkspacesList';
   return FakeWorkspacesList;
 });
@@ -47,12 +54,22 @@ jest.mock('../../components/Fallback', () => <div>Fallback Spinner</div>);
 
 describe('Workspaces List Container', () => {
   afterEach(() => {
-    jest.clearAllMocks();
+    jest.resetAllMocks();
   });
 
   describe('workspaces are fetched', () => {
     it('should show the workspaces list', () => {
-      renderComponent(workspaces);
+      const workspaces = [0, 1, 2].map(i =>
+        new DevWorkspaceBuilder()
+          .withId('workspace-' + i)
+          .withName('workspace-' + i)
+          .build(),
+      );
+      const store = new FakeStoreBuilder()
+        .withDevWorkspaces({ workspaces }, false)
+        .withWorkspaces({}, false)
+        .build();
+      renderComponent(store);
 
       expect(screen.queryByText('Workspaces List Page')).toBeTruthy();
     });
@@ -60,16 +77,87 @@ describe('Workspaces List Container', () => {
 
   describe('while fetching workspaces', () => {
     it('should show the fallback', () => {
-      workspaces = [];
-      renderComponent(workspaces, true);
+      const store = new FakeStoreBuilder()
+        .withDevWorkspaces({ workspaces: [] }, true)
+        .withWorkspaces({}, true)
+        .build();
+      renderComponent(store);
 
       expect(screen.queryByText('Fallback Spinner')).toBeTruthy();
     });
   });
+
+  describe('workspaces filter', () => {
+    describe('in che-server mode', () => {
+      it('should pass all che-server based workspaces', () => {
+        const cheWorkspaces = [
+          new CheWorkspaceBuilder()
+            .withId('che-wksp-0')
+            .withName('che-wksp-0')
+            .withAttributes({
+              created: new Date().toISOString(),
+              converted: new Date().toISOString(),
+              infrastructureNamespace: 'user',
+            })
+            .build(),
+          new CheWorkspaceBuilder().withId('che-wksp-1').withName('che-wksp-1').build(),
+          new CheWorkspaceBuilder().withId('che-wksp-2').withName('che-wksp-2').build(),
+        ];
+        const store = new FakeStoreBuilder()
+          .withCheWorkspaces({ workspaces: cheWorkspaces })
+          .withWorkspaces({})
+          .withWorkspacesSettings({
+            'che.devworkspaces.enabled': 'false',
+          })
+          .build();
+        renderComponent(store);
+
+        const workspaces = screen.getAllByTestId('workspace');
+        expect(workspaces.length).toEqual(3);
+      });
+    });
+
+    describe('in devworkspace mode', () => {
+      it('should pass workspaces but not converted che-server based workspaces', () => {
+        const deprecatedId = 'che-wksp-0';
+        WorkspaceAdapter.setDeprecatedIds([deprecatedId]);
+        const cheWorkspaces = [
+          new CheWorkspaceBuilder()
+            .withId(deprecatedId)
+            .withName('che-wksp-0')
+            .withAttributes({
+              created: new Date().toISOString(),
+              converted: new Date().toISOString(),
+              infrastructureNamespace: 'user',
+            })
+            .build(),
+          new CheWorkspaceBuilder().withId('che-wksp-1').withName('che-wksp-1').build(),
+          new CheWorkspaceBuilder().withId('che-wksp-2').withName('che-wksp-2').build(),
+        ];
+        const devWorkspaces = [0, 1, 2, 4].map(i =>
+          new DevWorkspaceBuilder()
+            .withId('dev-wksp-' + i)
+            .withName('dev-wksp-' + i)
+            .build(),
+        );
+        const store = new FakeStoreBuilder()
+          .withCheWorkspaces({ workspaces: cheWorkspaces })
+          .withDevWorkspaces({ workspaces: devWorkspaces })
+          .withWorkspaces({})
+          .withWorkspacesSettings({
+            'che.devworkspaces.enabled': 'true',
+          })
+          .build();
+        renderComponent(store);
+
+        const workspaces = screen.getAllByTestId('workspace');
+        expect(workspaces.length).toEqual(6);
+      });
+    });
+  });
 });
 
-function renderComponent(workspaces: che.Workspace[], isLoading = false): RenderResult {
-  const store = createFakeStore(workspaces, isLoading);
+function renderComponent(store: Store): RenderResult {
   const history = createHashHistory();
   return render(
     <Provider store={store}>
@@ -77,15 +165,3 @@ function renderComponent(workspaces: che.Workspace[], isLoading = false): Render
     </Provider>,
   );
 }
-
-function createFakeStore(workspaces: che.Workspace[], isLoading: boolean): Store {
-  return new FakeStoreBuilder()
-    .withCheWorkspaces(
-      {
-        workspaces,
-      },
-      isLoading,
-    )
-    .withWorkspaces({}, isLoading)
-    .build();
-}