fix: DevfileViewer widget (#1309)

Signed-off-by: Oleksii Orel <[email protected]>

.deps/dev.md

@@ -75,7 +75,7 @@
 | [`@pkgr/[email protected]`](https://github.com/un-ts/pkgr/blob/master/packages/utils) | MIT | clearlydefined |
 | `@polka/[email protected]` | MIT | #16183 |
 | `@react-mock/[email protected]` | MIT | clearlydefined |
-| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | clearlydefined |
+| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | #19220 |
 | [`@sinonjs/[email protected]`](git+https://github.com/sinonjs/commons.git) | BSD-3-Clause | #12905 |
 | [`@sinonjs/[email protected]`](https://github.com/sinonjs/fake-timers.git) | BSD-3-Clause | #9214 |
 | [`@testing-library/[email protected]`](https://github.com/testing-library/dom-testing-library) | MIT | #15966 |
@@ -90,6 +90,7 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #8935 |
+| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10812 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #9382 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #15963 |
@@ -125,6 +126,7 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #7582 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10842 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
+| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #7054 |

packages/dashboard-frontend/package.json

@@ -75,6 +75,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/codemirror": "^5.60.15",
     "@types/history": "^4.7.6",
     "@types/jest": "^29.5.3",
     "@types/js-yaml": "^4.0.5",

packages/dashboard-frontend/src/components/BasicViewer/index.tsx

@@ -26,30 +26,31 @@ export class BasicViewer extends React.PureComponent<Props> {
   public componentDidMount(): void {
     const parent = window.document.querySelector(`#${this.props.id}`);
     if (parent) {
-      const editor = new CodeMirror.fromTextArea(parent, {
+      this.editor = CodeMirror.fromTextArea(parent as HTMLTextAreaElement, {
         lineNumbers: false,
         lineWrapping: false,
         readOnly: true,
-        autoRefresh: true,
-        autofocus: true,
+        value: this.props.value,
       });
-      editor.setSize(`100%`, `100%`);
-      editor.setValue(this.props.value);
-
-      this.editor = editor;
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>): void {
-    if (this.editor && this.props.value !== prevProps.value) {
+  componentDidUpdate(): void {
+    if (this.editor) {
       this.editor.setValue(this.props.value);
+      this.editor.refresh();
     }
   }
 
   public render(): React.ReactElement {
     return (
       <div className={styles.basicViewer}>
-        <textarea id={this.props.id} value={this.props.value} readOnly={true}></textarea>
+        <textarea
+          id={this.props.id}
+          data-testid={this.props.id}
+          value={this.props.value}
+          readOnly={true}
+        ></textarea>
       </div>
     );
   }

packages/dashboard-frontend/src/components/DevfileViewer/index.tsx

@@ -36,29 +36,28 @@ export class DevfileViewer extends React.PureComponent<Props> {
   public componentDidMount(): void {
     const parent = window.document.querySelector(`#${this.props.id}`);
     if (parent) {
-      const editor = new CodeMirror.fromTextArea(parent, {
+      this.editor = CodeMirror.fromTextArea(parent as HTMLTextAreaElement, {
         mode: 'yaml',
         theme: 'eclipse-che',
         lineNumbers: true,
         lineWrapping: true,
         readOnly: true,
-        autoRefresh: true,
+        value: this.props.value,
       });
-      editor.setSize(`100%`, `100%`);
-      editor.setValue(this.props.value);
-
-      this.editor = editor;
     }
   }
 
   componentDidUpdate(): void {
-    this.editor.setValue(this.props.value);
+    if (this.editor) {
+      this.editor.setValue(this.props.value);
+      this.editor.refresh();
+    }
   }
 
   public render(): React.ReactElement {
     return (
       <div className={styles.devfileViewer}>
-        <textarea id={this.props.id} readOnly={true}></textarea>
+        <textarea id={this.props.id} value={this.props.value} readOnly={true}></textarea>
       </div>
     );
   }

packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/__tests__/index.spec.tsx

@@ -37,6 +37,7 @@ import {
 import { buildFactoryLocation } from '@/services/helpers/location';
 import { AlertItem } from '@/services/helpers/types';
 import { che } from '@/services/models';
+import { DEVWORKSPACE_BOOTSTRAP } from '@/services/workspace-client/devworkspace/devWorkspaceClient';
 import { AppThunk } from '@/store';
 import { DevWorkspaceBuilder } from '@/store/__mocks__/devWorkspaceBuilder';
 import { MockStoreBuilder } from '@/store/__mocks__/mockStore';
@@ -241,7 +242,7 @@ describe('Creating steps, applying a devfile', () => {
         expect(prepareDevfile).toHaveBeenCalledWith(
           expect.objectContaining({
             attributes: {
-              'controller.devfile.io/bootstrap-devworkspace': true,
+              [DEVWORKSPACE_BOOTSTRAP]: true,
               defaultDevfile: true,
             },
           }),
@@ -332,7 +333,7 @@ describe('Creating steps, applying a devfile', () => {
         expect(prepareDevfile).toHaveBeenCalledWith(
           expect.objectContaining({
             attributes: {
-              'controller.devfile.io/bootstrap-devworkspace': true,
+              [DEVWORKSPACE_BOOTSTRAP]: true,
             },
           }),
           factoryId,
@@ -409,7 +410,7 @@ describe('Creating steps, applying a devfile', () => {
           expect.objectContaining({
             attributes: {
               defaultDevfile: true,
-              'controller.devfile.io/bootstrap-devworkspace': true,
+              [DEVWORKSPACE_BOOTSTRAP]: true,
             },
           }),
           factoryId,

packages/dashboard-frontend/src/components/WorkspaceProgress/CreatingSteps/Apply/Devfile/index.tsx

@@ -41,6 +41,7 @@ import { buildIdeLoaderLocation, toHref } from '@/services/helpers/location';
 import { AlertItem } from '@/services/helpers/types';
 import { TabManager } from '@/services/tabManager';
 import { Workspace } from '@/services/workspace-adapter';
+import { DEVWORKSPACE_BOOTSTRAP } from '@/services/workspace-client/devworkspace/devWorkspaceClient';
 import { RootState } from '@/store';
 import { selectDefaultDevfile } from '@/store/DevfileRegistries/selectors';
 import { selectFactoryResolver } from '@/store/FactoryResolver/selectors';
@@ -185,7 +186,7 @@ class CreatingStepApplyDevfile extends ProgressStep<Props, State> {
         devfile.attributes = {};
       }
 
-      devfile.attributes['controller.devfile.io/bootstrap-devworkspace'] = true;
+      devfile.attributes[DEVWORKSPACE_BOOTSTRAP] = true;
 
       if (devfile.projects === undefined) {
         devfile.projects = [];
@@ -205,7 +206,7 @@ class CreatingStepApplyDevfile extends ProgressStep<Props, State> {
         devfile.attributes = {};
       }
 
-      devfile.attributes['controller.devfile.io/bootstrap-devworkspace'] = true;
+      devfile.attributes[DEVWORKSPACE_BOOTSTRAP] = true;
     }
 
     if (remotes) {

packages/dashboard-frontend/src/pages/WorkspaceDetails/DevfileEditorTab/index.tsx

@@ -22,6 +22,7 @@ import devfileApi from '@/services/devfileApi';
 import stringify from '@/services/helpers/editor';
 import { Workspace } from '@/services/workspace-adapter';
 import {
+  DEVWORKSPACE_BOOTSTRAP,
   DEVWORKSPACE_DEVFILE,
   DEVWORKSPACE_METADATA_ANNOTATION,
 } from '@/services/workspace-client/devworkspace/devWorkspaceClient';
@@ -82,6 +83,9 @@ export function prepareDevfile(workspace: Workspace): devfileApi.Devfile {
   if (attrs?.[DEVWORKSPACE_METADATA_ANNOTATION]) {
     delete attrs[DEVWORKSPACE_METADATA_ANNOTATION];
   }
+  if (attrs?.[DEVWORKSPACE_BOOTSTRAP]) {
+    delete attrs[DEVWORKSPACE_BOOTSTRAP];
+  }
   if (Object.keys(attrs).length === 0) {
     delete devfile.attributes;
     delete devfile.metadata.attributes;

packages/dashboard-frontend/src/pages/WorkspaceDetails/index.tsx

@@ -92,7 +92,7 @@ export class WorkspaceDetails extends React.PureComponent<Props, State> {
       const searchParam = new URLSearchParams(search);
       const tab = searchParam.get('tab');
       if (
-        pathname === '/workspace' &&
+        pathname.startsWith('/workspace/') &&
         (tab === WorkspaceDetailsTab.OVERVIEW ||
           tab === WorkspaceDetailsTab.DEVFILE ||
           tab === WorkspaceDetailsTab.EVENTS ||

packages/dashboard-frontend/src/services/backend-client/websocketClient/__tests__/index.spec.ts

@@ -94,7 +94,7 @@ describe('websocketClient', () => {
 
         const serverMockNext = new WS('ws://localhost/dashboard/api/websocket');
         const wsNext = await serverMockNext.connected;
-        await delay(1000);
+        await delay(500);
 
         expect(wsNext).toBeDefined();
         expect(handleConnectionOpen).toHaveBeenCalledTimes(2);

packages/dashboard-frontend/src/services/workspace-client/devworkspace/devWorkspaceClient.ts

@@ -52,6 +52,8 @@ export const DEVWORKSPACE_NEXT_START_ANNOTATION = 'che.eclipse.org/next-start-cf
 
 export const DEVWORKSPACE_DEBUG_START_ANNOTATION = 'controller.devfile.io/debug-start';
 
+export const DEVWORKSPACE_BOOTSTRAP = 'controller.devfile.io/bootstrap-devworkspace';
+
 export const DEVWORKSPACE_DEVFILE_SOURCE = 'che.eclipse.org/devfile-source';
 
 export const DEVWORKSPACE_DEVFILE = 'che.eclipse.org/devfile';

packages/dashboard-frontend/src/store/Workspaces/devWorkspaces/actions/actionCreators/helpers.ts

@@ -80,7 +80,7 @@ export async function checkDevWorkspaceNextStartAnnotation(
     delete workspace.metadata.annotations[DEVWORKSPACE_NEXT_START_ANNOTATION];
     workspace.spec.template = storedDevWorkspace.spec.template;
     workspace.spec.started = false;
-    workspace = await devWorkspaceClient.update(workspace);
+    await devWorkspaceClient.update(workspace);
   }
 }
 

scripts/yarn/old_version/.deps/dev.md

@@ -83,7 +83,7 @@
 | [`@pkgr/[email protected]`](git+https://github.com/un-ts/pkgr.git) | MIT | clearlydefined |
 | [`@polka/[email protected]`](https://github.com/lukeed/polka.git) | MIT | #16183 |
 | [`@react-mock/[email protected]`](https://github.com/skidding/react-mock) | MIT | clearlydefined |
-| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | clearlydefined |
+| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | #19220 |
 | [`@sinonjs/[email protected]`](git+https://github.com/sinonjs/commons.git) | BSD-3-Clause | #12905 |
 | [`@sinonjs/[email protected]`](https://github.com/sinonjs/fake-timers.git) | BSD-3-Clause | #9214 |
 | [`@testing-library/[email protected]`](https://github.com/testing-library/dom-testing-library) | MIT | #15966 |
@@ -98,8 +98,9 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #8935 |
+| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #9382 |
-| [`@types/[email protected].5`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #8266 |
+| [`@types/[email protected].4`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #8266 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
@@ -129,6 +130,7 @@
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #7582 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10842 |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
+| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
 | [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #7054 |

scripts/yarn/old_version/.deps/prod.md

@@ -5,9 +5,9 @@
 | [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | #10718 |
 | [`@devfile/[email protected]`](https://github.com/GIT_USER_ID/GIT_REPO_ID.git) | Apache-2.0 | N/A |
 | [`@eclipse-che/[email protected]`](git+https://github.com/devfile/devworkspace-generator.git) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/common@7.98.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/dashboard-backend@7.98.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/dashboard-frontend@7.98.0-next`](git://github.com/eclipse/che-dashboard.git) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/common@7.99.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/dashboard-backend@7.99.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/dashboard-frontend@7.99.0-next`](git://github.com/eclipse/che-dashboard.git) | EPL-2.0 | ecd.che |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/accept-negotiator.git) | MIT | clearlydefined |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/ajv-compiler.git) | MIT | clearlydefined |
 | [`@fastify/[email protected]`](https://github.com/fastify/busboy.git) | MIT | clearlydefined |
@@ -65,7 +65,7 @@
 | [`[email protected]`](https://github.com/chalk/ansi-styles.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/nodeca/argparse.git) | Python-2.0 | [CQ22954](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22954) |
 | [`[email protected]`](https://github.com/leo/args.git) | MIT | clearlydefined |
-| [`[email protected]`]([email protected]:indutny/asn1.js) | MIT | clearlydefined |
+| [`[email protected]`]([email protected]:indutny/asn1.js) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/asn1.js/4.10.1) |
 | [`[email protected]`](https://github.com/joyent/node-asn1.git) | MIT | clearlydefined |
 | [`[email protected]`](https://github.com/mcavage/node-assert-plus.git) | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/alexindigo/asynckit.git) | MIT | clearlydefined |

scripts/yarn/old_version/yarn.lock

@@ -1178,6 +1178,13 @@
   resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.4.tgz#1326429a519cc077028150343fd502b04686bd6f"
   integrity sha512-2in/lrHRNmDvHPgyormtEralhPcN3An1gLjJzj2Bw145VBxkQ75JEXW6CTdMAwShiHQcYsl2d10IjQSdJSJz4g==
 
+"@types/codemirror@^5.60.15":
+  version "5.60.15"
+  resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-5.60.15.tgz#0f82be6f4126d1e59cf4c4830e56dcd49d3c3e8a"
+  integrity sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==
+  dependencies:
+    "@types/tern" "*"
+
 "@types/eslint@^8.37.0":
   version "8.44.6"
   resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.44.6.tgz#60e564551966dd255f4c01c459f0b4fb87068603"
@@ -1424,6 +1431,13 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.2.tgz#01284dde9ef4e6d8cef6422798d9a3ad18a66f8b"
   integrity sha512-g7CK9nHdwjK2n0ymT2CW698FuWJRIx+RP6embAzZ2Qi8/ilIrA1Imt2LVSeHUzKvpoi7BhmmQcXz95eS0f2JXw==
 
+"@types/tern@*":
+  version "0.23.9"
+  resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.23.9.tgz#6f6093a4a9af3e6bb8dde528e024924d196b367c"
+  integrity sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==
+  dependencies:
+    "@types/estree" "*"
+
 "@types/tough-cookie@*":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.4.tgz#cf2f0c7c51b985b6afecea73eb2cd65421ecb717"

yarn.lock

@@ -637,6 +637,7 @@ __metadata:
     "@testing-library/jest-dom": ^6.5.0
     "@testing-library/react": ^16.0.1
     "@testing-library/user-event": ^14.5.2
+    "@types/codemirror": ^5.60.15
     "@types/history": ^4.7.6
     "@types/jest": ^29.5.3
     "@types/js-yaml": ^4.0.5
@@ -1795,6 +1796,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/codemirror@npm:^5.60.15":
+  version: 5.60.15
+  resolution: "@types/codemirror@npm:5.60.15"
+  dependencies:
+    "@types/tern": "*"
+  checksum: cfad3f569de48fba3efa44fdfeba77933e231486a52cc80cff7ce6eeeed5b447a5bc2b11e2226bc00ccee332c661e53e35a15cf14eb835f434a6a402d9462f5f
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.7":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -2142,6 +2152,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tern@npm:*":
+  version: 0.23.9
+  resolution: "@types/tern@npm:0.23.9"
+  dependencies:
+    "@types/estree": "*"
+  checksum: 53f229c79edf9454011f5b37c8539e0e760a130beac953d4e2126823de1ac6b0e2a45612596679fb232ec861826584fcaa272e2254a890b410575683423d56a8
+  languageName: node
+  linkType: hard
+
 "@types/tough-cookie@npm:*":
   version: 4.0.4
   resolution: "@types/tough-cookie@npm:4.0.4"