ContainerShell window manager fixes (#11973)

* Remove border when terminal window is focused

Remove deep selector from non-scoped style

Migrate vue-resize library to vue3-resize

* Fix codeMirrorRef instance name

* Missing semicolon

package.json

@@ -122,7 +122,7 @@
     "ufo": "0.7.11",
     "unfetch": "4.2.0",
     "url-parse": "1.5.10",
-    "vue-resize": "0.4.5",
+    "vue3-resize": "0.2.0",
     "vue-router": "4.4.3",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.6.14",

shell/components/CodeMirror.vue

@@ -107,7 +107,7 @@ export default {
   methods: {
     focus() {
       if ( this.$refs.codeMirrorRef ) {
-        this.$refs.codeMirrorRef.codemirror.focus();
+        this.$refs.codeMirrorRef.cminstance.focus();
       }
     },
 
@@ -143,7 +143,7 @@ export default {
 
     updateValue(value) {
       if ( this.$refs.codeMirrorRef ) {
-        this.$refs.codeMirrorRef.codemirror.doc.setValue(value);
+        this.$refs.codeMirrorRef.cminstance.doc.setValue(value);
       }
     },
 

shell/components/nav/WindowManager/ContainerShell.vue

@@ -474,20 +474,14 @@ export default {
   .shell-body {
     padding: calc(2 * var(--outline-width));
     height: 100%;
-
-    & > .terminal.focus {
-      outline: var(--outline-width) solid var(--outline);
-    }
   }
 
-  .containerPicker {
-    :deep() &.unlabeled-select {
-      display: inline-block;
-      min-width: 200px;
-      height: 30px;
-      min-height: 30px;
-      width: initial;
-    }
+  .containerPicker.unlabeled-select {
+    display: inline-block;
+    min-width: 200px;
+    height: 30px;
+    min-height: 30px;
+    width: initial;
   }
 
   .status {

shell/initialize/install-plugins.js

@@ -1,8 +1,8 @@
 import PortalVue from 'portal-vue';
-import VueResize from 'vue-resize';
+import Vue3Resize from 'vue3-resize';
 import FloatingVue from 'floating-vue';
 import vSelect from 'vue-select';
-import 'vue-resize/dist/vue-resize.css';
+import 'vue3-resize/dist/vue3-resize.css';
 
 // import '@shell/plugins/extend-router';
 import '@shell/plugins/formatters';
@@ -35,7 +35,7 @@ import { floatingVueOptions } from '@shell/plugins/floating-vue';
 export async function installPlugins(vueApp) {
   vueApp.use(globalFormatters);
   vueApp.use(PortalVue);
-  vueApp.use(VueResize);
+  vueApp.use(Vue3Resize);
   vueApp.use(FloatingVue, floatingVueOptions);
   vueApp.use(ShortKey, { prevent: ['input', 'textarea', 'select'] });
   vueApp.use(InstallCodeMirror);

shell/package.json

@@ -123,7 +123,7 @@
     "unfetch": "4.2.0",
     "url-parse": "1.5.10",
     "vue": "~3.2.13",
-    "vue-resize": "0.4.5",
+    "vue3-resize": "0.2.0",
     "vue-router": "4.4.3",
     "vue-select": "4.0.0-beta.6",
     "vue-server-renderer": "2.7.16",

yarn.lock

@@ -14652,11 +14652,6 @@ vue-loader@^17.0.0:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
-vue-resize@0.4.5:
-  version "0.4.5"
-  resolved "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
-
 vue-resize@^2.0.0-alpha.1:
   version "2.0.0-alpha.1"
   resolved "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
@@ -14709,6 +14704,11 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue3-resize@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/vue3-resize/-/vue3-resize-0.2.0.tgz#a1f06468cb7add911dfe3cb980984fa865ea1c8b"
+  integrity sha512-vZkbEv4PjMEWFV0igAxCvdSIH9hrIJjXyJ9XPTxH0cS/L2/VW1dLVORMWJKU0VXHpHiYKwskB62ju7aBQMVpOQ==
+
 vue3-virtual-scroll-list@0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/vue3-virtual-scroll-list/-/vue3-virtual-scroll-list-0.2.1.tgz#7fdc5be066c9b8d877614626a0bc02eb1fd12ad0"