Skip to content

Commit 342df66

Browse files
olexii4olexii4
committed
chore: migrate to react-codemirror
Signed-off-by: Oleksii Orel <[email protected]>
1 parent a67105b commit 342df66

File tree

19 files changed

+496
-185
lines changed

19 files changed

+496
-185
lines changed

‎.deps/EXCLUDED/prod.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ This file lists dependencies that do not need CQs or auto-detection does not wor
1010
| `@patternfly/[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@patternfly/react-icons/4.93.7) |
1111
| `@patternfly/[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/@patternfly/react-table/4.113.6) |
1212
| `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/blueimp-md5/2.19.0) |
13-
| `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.18) |
1413
| `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/cookie-signature/1.2.1) |
1514
| `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/elliptic/6.6.1) |
1615
| `[email protected]` | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/fast-uri/2.4.0) |

‎.deps/dev.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
| [`@pkgr/[email protected]`](https://github.com/un-ts/pkgr/blob/master/packages/utils) | MIT | clearlydefined |
7676
| `@polka/[email protected]` | MIT | #16183 |
7777
| `@react-mock/[email protected]` | MIT | clearlydefined |
78-
| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | clearlydefined |
78+
| [`@sinclair/[email protected]`](https://github.com/sinclairzx81/typebox) | MIT | #19220 |
7979
| [`@sinonjs/[email protected]`](git+https://github.com/sinonjs/commons.git) | BSD-3-Clause | #12905 |
8080
| [`@sinonjs/[email protected]`](https://github.com/sinonjs/fake-timers.git) | BSD-3-Clause | #9214 |
8181
| [`@testing-library/[email protected]`](https://github.com/testing-library/dom-testing-library) | MIT | #15966 |

‎.deps/prod.md‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
| Packages | License | Resolved CQs |
44
| --- | --- | --- |
55
| [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | #10718 |
6+
| [`@babel/[email protected]`](https://github.com/babel/babel.git) | MIT | clearlydefined |
7+
| [`@codemirror/[email protected]`](https://github.com/codemirror/autocomplete.git) | MIT | clearlydefined |
8+
| [`@codemirror/[email protected]`](https://github.com/codemirror/commands.git) | MIT | clearlydefined |
9+
| [`@codemirror/[email protected]`](git+https://github.com/codemirror/lang-yaml.git) | MIT | clearlydefined |
10+
| [`@codemirror/[email protected]`](https://github.com/codemirror/language.git) | MIT | clearlydefined |
11+
| [`@codemirror/[email protected]`](https://github.com/codemirror/lint.git) | MIT | clearlydefined |
12+
| [`@codemirror/[email protected]`](https://github.com/codemirror/search.git) | MIT | clearlydefined |
13+
| [`@codemirror/[email protected]`](https://github.com/codemirror/state.git) | MIT | clearlydefined |
14+
| [`@codemirror/[email protected]`](https://github.com/codemirror/theme-one-dark.git) | MIT | clearlydefined |
15+
| [`@codemirror/[email protected]`](https://github.com/codemirror/view.git) | MIT | clearlydefined |
616
| [`@devfile/[email protected]`](https://github.com/GIT_USER_ID/GIT_REPO_ID.git) | Apache-2.0 | N/A |
717
| [`@eclipse-che/[email protected]`](git+https://github.com/devfile/devworkspace-generator.git) | EPL-2.0 | ecd.che |
818
| [`@fastify/[email protected]`](git+https://github.com/fastify/accept-negotiator.git) | MIT | clearlydefined |
@@ -35,6 +45,8 @@
3545
| [`@kubernetes/[email protected]`](https://github.com/kubernetes-client/javascript.git) | Apache-2.0 | #17950 |
3646
| [`@lezer/[email protected]`](https://github.com/lezer-parser/common.git) | MIT | clearlydefined |
3747
| [`@lezer/[email protected]`](https://github.com/lezer-parser/highlight.git) | MIT | clearlydefined |
48+
| [`@lezer/[email protected]`](https://github.com/lezer-parser/lr.git) | MIT | clearlydefined |
49+
| [`@lezer/[email protected]`](https://github.com/lezer-parser/yaml.git) | MIT | clearlydefined |
3850
| `@lukeed/[email protected]` | MIT | clearlydefined |
3951
| [`@npmcli/[email protected]`](https://github.com/npm/agent.git) | ISC | clearlydefined |
4052
| [`@npmcli/[email protected]`](https://github.com/npm/fs.git) | ISC | #14656 |
@@ -58,6 +70,8 @@
5870
| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #10798 |
5971
| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | clearlydefined |
6072
| [`@types/[email protected]`](https://github.com/DefinitelyTyped/DefinitelyTyped.git) | MIT | #6016 |
73+
| [`@uiw/[email protected]`](https://github.com/uiwjs/react-codemirror.git) | MIT | clearlydefined |
74+
| [`@uiw/[email protected]`](https://github.com/uiwjs/react-codemirror.git) | MIT | clearlydefined |
6175
| [`[email protected]`](https://github.com/npm/abbrev-js.git) | ISC | clearlydefined |
6276
| [`[email protected]`](git+https://github.com/mysticatea/abort-controller.git) | MIT | #7592 |
6377
| [`[email protected]`](git+https://github.com/jsumners/abstract-logging.git) | MIT | clearlydefined |
@@ -109,7 +123,7 @@
109123
| [`[email protected]`](git://github.com/isaacs/chownr.git) | BlueOak-1.0.0 | clearlydefined |
110124
| [`[email protected]`](git+https://github.com/crypto-browserify/cipher-base.git) | MIT | clearlydefined |
111125
| `[email protected]` | MIT | clearlydefined |
112-
| [`codemirror@5.65.18`](https://github.com/codemirror/CodeMirror.git) | MIT | [clearlydefined](https://clearlydefined.io/definitions/npm/npmjs/-/codemirror/5.65.18) |
126+
| [`codemirror@6.0.1`](https://github.com/codemirror/basic-setup.git) | MIT | clearlydefined |
113127
| `[email protected]` | MIT | clearlydefined |
114128
| `[email protected]` | MIT | clearlydefined |
115129
| [`[email protected]`]([email protected]:dfcreative/color-name.git) | MIT | clearlydefined |
@@ -125,6 +139,7 @@
125139
| [`[email protected]`](https://github.com/crypto-browserify/createECDH.git) | MIT | clearlydefined |
126140
| [`[email protected]`]([email protected]:crypto-browserify/createHash.git) | MIT | clearlydefined |
127141
| [`[email protected]`](https://github.com/crypto-browserify/createHmac.git) | MIT | clearlydefined |
142+
| [`[email protected]`](git+https://github.com/marijnh/crelt.git) | MIT | clearlydefined |
128143
| [`[email protected]`]([email protected]:moxystudio/node-cross-spawn.git) | MIT | #17146 |
129144
| [`[email protected]`](git://github.com/crypto-browserify/crypto-browserify.git) | MIT | #1033 |
130145
| [`[email protected]`](git://github.com/trentm/node-dashdash.git) | MIT | #14596 |
@@ -426,6 +441,7 @@
426441
| `[email protected]` | MIT | clearlydefined |
427442
| `[email protected]` | MIT | #8735 |
428443
| `[email protected]` | MIT | clearlydefined |
444+
| [`[email protected]`](git+https://github.com/marijnh/style-mod.git) | MIT | clearlydefined |
429445
| `[email protected]` | MIT | clearlydefined |
430446
| [`[email protected]`](git+https://github.com/focus-trap/tabbable.git) | MIT | clearlydefined |
431447
| [`[email protected]`](https://github.com/isaacs/node-tar.git) | ISC | #10508 |
@@ -460,6 +476,7 @@
460476
| [`[email protected]`](https://github.com/uuidjs/uuid.git) | MIT | #57 |
461477
| `[email protected]` | MIT | clearlydefined |
462478
| [`[email protected]`](git://github.com/davepacheco/node-verror.git) | MIT | clearlydefined |
479+
| [`[email protected]`](git+https://github.com/marijnh/w3c-keyname.git) | MIT | clearlydefined |
463480
| [`[email protected]`](https://github.com/BerkeleyTrue/warning.git) | MIT | [CQ22359](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22359) |
464481
| `[email protected]` | BSD-2-Clause | clearlydefined |
465482
| `[email protected]` | MIT | clearlydefined |

‎package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@
4040
},
4141
"resolutions": {
4242
"@adobe/css-tools": "^4.3.2",
43+
"@codemirror/commands": "6.7.1",
44+
"@codemirror/lang-yaml": "6.1.1",
45+
"@codemirror/language": "6.10.3",
46+
"@codemirror/lint": "6.8.2",
47+
"@codemirror/search": "6.5.6",
48+
"@codemirror/state": "6.4.1",
4349
"@hapi/hoek": "^10.0.1",
4450
"axios": "^1.7.4",
4551
"bn.js": "^5.2.0",

‎packages/dashboard-frontend/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,17 @@
3232
"test:watch": "yarn test --watch"
3333
},
3434
"dependencies": {
35+
"@codemirror/lang-yaml": "^6.1.1",
36+
"@codemirror/language": "^6.10.3",
37+
"@codemirror/view": "^6.36.2",
3538
"@lezer/highlight": "^1.2.1",
3639
"@patternfly/react-core": "^4.276.11",
3740
"@patternfly/react-icons": "^4.93.7",
3841
"@patternfly/react-table": "^4.113.3",
3942
"@reduxjs/toolkit": "^2.2.7",
43+
"@uiw/react-codemirror": "4.23.5",
4044
"axios": "^1.7.0",
4145
"buffer": "^6.0.3",
42-
"codemirror": "^5.65.18",
4346
"crypto-browserify": "^3.12.0",
4447
"date-fns": "^3.5.0",
4548
"detect-browser": "^5.3.0",

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

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* Red Hat, Inc. - initial API and implementation
1111
*/
1212

13-
import CodeMirror from 'codemirror';
13+
import CodeMirror from '@uiw/react-codemirror';
1414
import React from 'react';
1515

1616
import styles from '@/components/BasicViewer/index.module.css';
@@ -21,35 +21,15 @@ export type Props = {
2121
};
2222

2323
export class BasicViewer extends React.PureComponent<Props> {
24-
private editor: CodeMirror.Editor | undefined;
25-
26-
public componentDidMount(): void {
27-
const parent = window.document.querySelector(`#${this.props.id}`);
28-
if (parent) {
29-
const editor = new CodeMirror.fromTextArea(parent, {
30-
lineNumbers: false,
31-
lineWrapping: false,
32-
readOnly: true,
33-
autoRefresh: true,
34-
autofocus: true,
35-
});
36-
editor.setSize(`100%`, `100%`);
37-
editor.setValue(this.props.value);
38-
39-
this.editor = editor;
40-
}
41-
}
42-
43-
componentDidUpdate(prevProps: Readonly<Props>): void {
44-
if (this.editor && this.props.value !== prevProps.value) {
45-
this.editor.setValue(this.props.value);
46-
}
47-
}
48-
4924
public render(): React.ReactElement {
5025
return (
5126
<div className={styles.basicViewer}>
52-
<textarea id={this.props.id} value={this.props.value} readOnly={true}></textarea>
27+
<CodeMirror
28+
id={this.props.id}
29+
readOnly={true}
30+
basicSetup={false}
31+
value={this.props.value}
32+
/>
5333
</div>
5434
);
5535
}

‎packages/dashboard-frontend/src/components/DevfileViewer/index.module.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,6 @@
1010
* Red Hat, Inc. - initial API and implementation
1111
*/
1212

13-
.devfileViewer {
14-
width: 100%;
15-
height: 100%;
16-
min-height: 50vh;
17-
}
18-
1913
.devfileViewer > div {
20-
overflow: auto;
21-
height: 100%;
2214
border: 1px solid var(--pf-global--BorderColor--100);
2315
}

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

Lines changed: 46 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,49 @@
1010
* Red Hat, Inc. - initial API and implementation
1111
*/
1212

13-
import 'codemirror/mode/yaml/yaml';
14-
import 'codemirror/lib/codemirror.css';
15-
import '@/components/DevfileViewer/theme/eclipse-che.css';
16-
17-
import CodeMirror from 'codemirror';
13+
import { yaml } from '@codemirror/lang-yaml';
14+
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
15+
import { EditorView } from '@codemirror/view';
16+
import { tags as t } from '@lezer/highlight';
17+
import CodeMirror from '@uiw/react-codemirror';
1818
import React from 'react';
1919

2020
import styles from '@/components/DevfileViewer/index.module.css';
2121

22+
const base00 = '#2e3440'; // black
23+
const base01 = '#999'; // grey
24+
const base02 = '#f7f7f7'; // white
25+
const base03 = '#5e81ac'; // deep blue
26+
const base04 = '#008080'; // teal
27+
const base05 = '#fff'; // white
28+
29+
const basicLightTheme = EditorView.theme(
30+
{
31+
'&': {
32+
color: base00,
33+
backgroundColor: base05,
34+
},
35+
'.cm-gutters': {
36+
backgroundColor: base02,
37+
color: base01,
38+
},
39+
'.cm-activeLineGutter': {
40+
backgroundColor: base02,
41+
},
42+
},
43+
{ dark: false },
44+
);
45+
46+
const basicLightHighlightStyle = HighlightStyle.define([
47+
{ tag: t.keyword, color: base03 },
48+
{ tag: [t.string], color: base03 },
49+
{ tag: [t.variableName], color: base04 },
50+
{
51+
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
52+
color: base04,
53+
},
54+
]);
55+
2256
export type Props = {
2357
isActive: boolean;
2458
isExpanded: boolean;
@@ -27,38 +61,16 @@ export type Props = {
2761
};
2862

2963
export class DevfileViewer extends React.PureComponent<Props> {
30-
private editor: CodeMirror.Editor | undefined;
31-
32-
constructor(props: Props) {
33-
super(props);
34-
}
35-
36-
public componentDidMount(): void {
37-
const parent = window.document.querySelector(`#${this.props.id}`);
38-
if (parent) {
39-
const editor = new CodeMirror.fromTextArea(parent, {
40-
mode: 'yaml',
41-
theme: 'eclipse-che',
42-
lineNumbers: true,
43-
lineWrapping: true,
44-
readOnly: true,
45-
autoRefresh: true,
46-
});
47-
editor.setSize(`100%`, `100%`);
48-
editor.setValue(this.props.value);
49-
50-
this.editor = editor;
51-
}
52-
}
53-
54-
componentDidUpdate(): void {
55-
this.editor.setValue(this.props.value);
56-
}
57-
5864
public render(): React.ReactElement {
5965
return (
6066
<div className={styles.devfileViewer}>
61-
<textarea id={this.props.id} readOnly={true}></textarea>
67+
<CodeMirror
68+
readOnly={true}
69+
height="60vh"
70+
id={this.props.id}
71+
value={this.props.value}
72+
extensions={[basicLightTheme, syntaxHighlighting(basicLightHighlightStyle), yaml()]}
73+
/>
6274
</div>
6375
);
6476
}

‎packages/dashboard-frontend/src/components/DevfileViewer/theme/eclipse-che.css‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { buildIdeLoaderLocation, toHref } from '@/services/helpers/location';
4141
import { AlertItem } from '@/services/helpers/types';
4242
import { TabManager } from '@/services/tabManager';
4343
import { Workspace } from '@/services/workspace-adapter';
44+
import { DEVWORKSPACE_BOOTSTRAP } from '@/services/workspace-client/devworkspace/devWorkspaceClient';
4445
import { RootState } from '@/store';
4546
import { selectDefaultDevfile } from '@/store/DevfileRegistries/selectors';
4647
import { selectFactoryResolver } from '@/store/FactoryResolver/selectors';
@@ -185,7 +186,7 @@ class CreatingStepApplyDevfile extends ProgressStep<Props, State> {
185186
devfile.attributes = {};
186187
}
187188

188-
devfile.attributes['controller.devfile.io/bootstrap-devworkspace'] = true;
189+
devfile.attributes[DEVWORKSPACE_BOOTSTRAP] = true;
189190

190191
if (devfile.projects === undefined) {
191192
devfile.projects = [];
@@ -205,7 +206,7 @@ class CreatingStepApplyDevfile extends ProgressStep<Props, State> {
205206
devfile.attributes = {};
206207
}
207208

208-
devfile.attributes['controller.devfile.io/bootstrap-devworkspace'] = true;
209+
devfile.attributes[DEVWORKSPACE_BOOTSTRAP] = true;
209210
}
210211

211212
if (remotes) {

0 commit comments

Comments
 (0)