From 35d585251a0922f3c66f0ee33fbee4c1cd6105a6 Mon Sep 17 00:00:00 2001 From: Aditya Toshniwal Date: Wed, 14 Aug 2024 18:15:03 +0530 Subject: [PATCH] Upgrade xterm realted packages to the latest @xterm based namespace. --- web/package.json | 8 +- web/pgadmin/static/css/style.css | 2 +- .../static/js/components/PsqlComponent.jsx | 38 +++++----- web/webpack.shim.js | 6 -- web/yarn.lock | 76 +++++++++---------- 5 files changed, 63 insertions(+), 67 deletions(-) diff --git a/web/package.json b/web/package.json index 30bd66ff3..82b2f22db 100644 --- a/web/package.json +++ b/web/package.json @@ -91,6 +91,10 @@ "@types/classnames": "^2.2.6", "@types/react": "^18.0.2", "@types/react-dom": "^18.0.0", + "@xterm/addon-fit": "^0.10.0", + "@xterm/addon-search": "^0.15.0", + "@xterm/addon-web-links": "^0.11.0", + "@xterm/xterm": "^5.5.0", "ajv": "^8.8.2", "anti-trojan-source": "^1.4.0", "aspen-decorations": "^1.0.2", @@ -149,10 +153,6 @@ "uplot-react": "^1.1.4", "valid-filename": "^2.0.1", "wkx": "^0.5.0", - "xterm": "^5.3.0", - "xterm-addon-fit": "^0.5.0", - "xterm-addon-search": "^0.13.0", - "xterm-addon-web-links": "^0.4.0", "zustand": "^4.4.1" }, "scripts": { diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css index 66d9e46ca..79d45a9e1 100644 --- a/web/pgadmin/static/css/style.css +++ b/web/pgadmin/static/css/style.css @@ -1,7 +1,7 @@ @import 'node_modules/@fortawesome/fontawesome-free/css/all.css'; @import 'node_modules/leaflet/dist/leaflet.css'; -@import 'node_modules/xterm/css/xterm.css'; +@import 'node_modules/@xterm/xterm/css/xterm.css'; @import 'node_modules/jsoneditor/dist/jsoneditor.min.css'; @import 'node_modules/react-checkbox-tree/lib/react-checkbox-tree.css'; diff --git a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx index 254c48d04..38eedc044 100644 --- a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx +++ b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx @@ -12,10 +12,10 @@ import { Box, useTheme } from '@mui/material'; import url_for from 'sources/url_for'; import PropTypes from 'prop-types'; -import { Terminal } from 'xterm'; -import { FitAddon } from 'xterm-addon-fit'; -import { WebLinksAddon } from 'xterm-addon-web-links'; -import { SearchAddon } from 'xterm-addon-search'; +import { Terminal } from '@xterm/xterm'; +import { FitAddon } from '@xterm/addon-fit'; +import { WebLinksAddon } from '@xterm/addon-web-links'; +import { SearchAddon } from '@xterm/addon-search'; import { io } from 'socketio'; import { copyToClipboard } from '../../../../../static/js/clipboard'; import 'pgadmin.browser.keyboard'; @@ -109,11 +109,9 @@ function psql_Addon(term) { const fitAddon = new FitAddon(); term.loadAddon(fitAddon); - const webLinksAddon = new WebLinksAddon(); - term.loadAddon(webLinksAddon); + term.loadAddon(new WebLinksAddon()); - const searchAddon = new SearchAddon(); - term.loadAddon(searchAddon); + term.loadAddon(new SearchAddon()); fitAddon.fit(); term.resize(15, 50); @@ -158,12 +156,23 @@ export default function PsqlComponent({ params, pgAdmin }) { return [term, socket]; }; + const setTheme = ()=>{ + if(termRef.current) { + termRef.current.options.theme = { + background: theme.palette.background.default, + foreground: theme.palette.text.primary, + cursor: theme.palette.text.primary, + cursorAccent: theme.palette.text.primary, + selection: theme.palette.primary.main + }; + } + }; + useEffect(()=>{ const [term, socket] = initializePsqlTool(params); termRef.current = term; - termRef.current?.setOption('theme', { - background: theme?.palette.background.default}); + setTheme(); termRef.current.focus(); @@ -177,14 +186,7 @@ export default function PsqlComponent({ params, pgAdmin }) { }, []); useEffect(()=>{ - let psqlTheme = { - background: theme.palette.background.default, - foreground: theme.palette.text.primary, - cursor: theme.palette.text.primary, - cursorAccent: theme.palette.text.primary, - selection: theme.palette.primary.main - }; - termRef.current?.setOption('theme', psqlTheme ); + setTheme(); },[theme]); diff --git a/web/webpack.shim.js b/web/webpack.shim.js index 738bd6c4c..4ba4eebf3 100644 --- a/web/webpack.shim.js +++ b/web/webpack.shim.js @@ -48,12 +48,6 @@ let webpackShimConfig = { 'stylis': path.join(__dirname, 'node_modules/stylis'), 'popper.js': path.join(__dirname, 'node_modules/popper.js'), - //xterm - 'xterm': path.join(__dirname, './node_modules/xterm/lib/xterm.js'), - 'xterm-addon-fit': path.join(__dirname, './node_modules/xterm-addon-fit/lib/xterm-addon-fit.js'), - 'xterm-addon-web-links': path.join(__dirname, './node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js'), - 'xterm-addon-search': path.join(__dirname, './node_modules/xterm-addon-search/lib/xterm-addon-search.js'), - //socket 'socketio': path.join(__dirname, './node_modules/socket.io-client/dist/socket.io.js'), diff --git a/web/yarn.lock b/web/yarn.lock index 9878df62a..1476fdeb5 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -3871,6 +3871,40 @@ __metadata: languageName: node linkType: hard +"@xterm/addon-fit@npm:^0.10.0": + version: 0.10.0 + resolution: "@xterm/addon-fit@npm:0.10.0" + peerDependencies: + "@xterm/xterm": ^5.0.0 + checksum: 8edfad561c0d0316c5883cbe2ce56109f105a2b2bf53b71d5f8c788e656a3205c1093a659dddcf4025a459e4b7ff8e07b6c6a19815c8711deeded560de5f1893 + languageName: node + linkType: hard + +"@xterm/addon-search@npm:^0.15.0": + version: 0.15.0 + resolution: "@xterm/addon-search@npm:0.15.0" + peerDependencies: + "@xterm/xterm": ^5.0.0 + checksum: d4f77e3637f915e86c9208da70f615f5e6150810943931a4bba8a3422d5c2b791b84d2136de65603dbc4437328f4c584c8faa1f53e71524dd667bee631ca3f1e + languageName: node + linkType: hard + +"@xterm/addon-web-links@npm:^0.11.0": + version: 0.11.0 + resolution: "@xterm/addon-web-links@npm:0.11.0" + peerDependencies: + "@xterm/xterm": ^5.0.0 + checksum: c1b36b649b8cddc613213eb9e835daf3106a8be359a19ccacca1f1d9ff883b59d478f166109ee017fa3994d224dcdd82976ad5d5a1221271ab8d3d5684eb141d + languageName: node + linkType: hard + +"@xterm/xterm@npm:^5.5.0": + version: 5.5.0 + resolution: "@xterm/xterm@npm:5.5.0" + checksum: 393c1891b95fdd50d05e7a063abdc95a6643d2c45a4231637c23db90511426a95b1b56a5c4c91831121d2710aee9de97cf5e426016c589ca87dea8fff9a41b33 + languageName: node + linkType: hard + "@xtuc/ieee754@npm:^1.2.0": version: 1.2.0 resolution: "@xtuc/ieee754@npm:1.2.0" @@ -13975,6 +14009,10 @@ __metadata: "@types/jest": ^29.5.4 "@types/react": ^18.0.2 "@types/react-dom": ^18.0.0 + "@xterm/addon-fit": ^0.10.0 + "@xterm/addon-search": ^0.15.0 + "@xterm/addon-web-links": ^0.11.0 + "@xterm/xterm": ^5.5.0 ajv: ^8.8.2 anti-trojan-source: ^1.4.0 aspen-decorations: ^1.0.2 @@ -14075,10 +14113,6 @@ __metadata: webpack-bundle-analyzer: ^4.8.0 webpack-cli: ^5.1.4 wkx: ^0.5.0 - xterm: ^5.3.0 - xterm-addon-fit: ^0.5.0 - xterm-addon-search: ^0.13.0 - xterm-addon-web-links: ^0.4.0 yarn-audit-html: 4.0.0 zustand: ^4.4.1 languageName: unknown @@ -16511,40 +16545,6 @@ __metadata: languageName: node linkType: hard -"xterm-addon-fit@npm:^0.5.0": - version: 0.5.0 - resolution: "xterm-addon-fit@npm:0.5.0" - peerDependencies: - xterm: ^4.0.0 - checksum: 884d9f360893335c87e4514beeda2af6dbebf38a89b8518f1126d9c4611aefc1598b750bb43a953b79fdf1179c40d70c77a9169ae10f07e0abbbdb39b919b33f - languageName: node - linkType: hard - -"xterm-addon-search@npm:^0.13.0": - version: 0.13.0 - resolution: "xterm-addon-search@npm:0.13.0" - peerDependencies: - xterm: ^5.0.0 - checksum: aea339667bf2ff8a3392bc01eb98948e2c7ab7fec8525232cf6332270a03fe3ff751303c829f3c53d4c4f3d546d7b42be30d028a2dfeb61f61aad45a68ccdb8c - languageName: node - linkType: hard - -"xterm-addon-web-links@npm:^0.4.0": - version: 0.4.0 - resolution: "xterm-addon-web-links@npm:0.4.0" - peerDependencies: - xterm: ^4.0.0 - checksum: 7bcb489b2b406602a3aa4bde4394379e24820a9a25503e24e78fa5b9301b8aea64c7851c91d5b9d27784f7a5bd6da5d81588f149f5379641bf97857e65e1f2d0 - languageName: node - linkType: hard - -"xterm@npm:^5.3.0": - version: 5.3.0 - resolution: "xterm@npm:5.3.0" - checksum: 1bdfdfe4cae4412128376180d85e476b43fb021cdd1114b18acad821c9ea44b5b600e0d88febf2b3572f38fad7741e5161ce0178a44369617cf937222cc6e011 - languageName: node - linkType: hard - "y18n@npm:^5.0.5": version: 5.0.8 resolution: "y18n@npm:5.0.8"