Don't toggle code row

To exand/toggle you need to click anywhere within the tr, but not in the
code row. I tried placing an icon next to the pre element, but couldn't
make it work while maintaining the ellipsis. Fixes https://github.com/galaxyproject/galaxy/issues/11723

client/src/components/JobInformation/CodeRow.vue

@@ -7,22 +7,15 @@
         <td>
             {{ codeLabel }}
         </td>
-        <td v-if="expanded">
-            <pre class="code">{{ codeItem }}</pre>
-        </td>
-        <td v-else-if="codeItem">
-            <pre class="code preview">{{ codeItem }}</pre>
-            <b>(Click to expand)</b>
+        <td v-if="codeItem">
+            <pre @click.stop :class="codeClass">{{ codeItem }}</pre>
+            <i :class="iconClass" />
+            <b>Click to {{ action }}</b>
         </td>
         <td v-else><i>empty</i></td>
     </tr>
 </template>
 <script>
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-
-Vue.use(BootstrapVue);
-
 export default {
     props: {
         codeLabel: String,
@@ -35,6 +28,17 @@ export default {
             expanded: false,
         };
     },
+    computed: {
+        action() {
+            return this.expanded ? "collapse" : "expand";
+        },
+        codeClass() {
+            return this.expanded ? "code" : "code preview";
+        },
+        iconClass() {
+            return this.expanded ? "fa fa-minus" : "fa fa-plus";
+        },
+    },
     methods: {
         toggleExpanded() {
             this.mouseIsDown = false;