From 48ee7f44a9a1541a89f83fe09c5d3a13716ec814 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Aug 2022 12:01:40 +0200
Subject: [PATCH 1/4] hide disabled installation actions refactor to
 composition api

---
 .../Toolshed/RepositoryDetails/Index.vue      | 14 ++-
 .../RepositoryDetails/InstallationActions.vue | 91 ++++++-------------
 2 files changed, 40 insertions(+), 65 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.vue b/client/src/components/Toolshed/RepositoryDetails/Index.vue
index fd885115154..86a18f2c033 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.vue
@@ -28,6 +28,15 @@
                             <span v-if="!data.value" :class="repoChecked" />
                             <span v-else :class="repoUnchecked" />
                         </template>
+                        <template v-slot:cell(status)="row">
+                            <span v-if="row.item.status">
+                                <span
+                                    v-if="!['Error', 'Installed', 'Uninstalled'].includes(row.item.status)"
+                                    class="fa fa-spinner fa-spin" />
+                                {{ row.item.status }}
+                            </span>
+                            <span v-else> - </span>
+                        </template>
                         <template v-slot:cell(actions)="row">
                             <InstallationActions
                                 :status="row.item.status"
@@ -96,6 +105,7 @@ export default {
                 { key: "tools", label: "Tools and Versions" },
                 { key: "profile", label: "Requires" },
                 { key: "missing_test_components", label: "Tests" },
+                { key: "status" },
                 { key: "actions", label: "", class: "toolshed-repo-actions" },
             ],
             showSettings: false,
@@ -199,7 +209,7 @@ export default {
 <style lang="scss">
 // make actions take up less space
 .toolshed-repo-actions {
-    width: 15%;
-    min-width: 280px;
+    width: 10%;
+    min-width: 120px;
 }
 </style>
diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue
index f892c56f0fd..7b4be984132 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue
@@ -1,86 +1,51 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+    status: String,
+});
+
+const emit = defineEmits(["onInstall", "onUninstall"]);
+
+const buttonClass = "btn-sm text-nowrap";
+
+const installState = computed(() => !props.status || props.status === "Uninstalled");
+const uninstallState = computed(() => props.status === "Installed");
+
+function onCancel() {
+    if (window.confirm(`Do you want to reset this repository?`)) {
+        emit("onUninstall");
+    }
+}
+</script>
+
 <template>
     <div>
-        <span class="d-inline-block status">
-            <span v-if="installingState" class="fa fa-spinner fa-spin" />
-            {{ status }}
-        </span>
         <div class="d-inline-block">
-            <b-button
-                :disabled="!installState"
-                :class="buttonClass"
-                :variant="installState ? 'primary' : ''"
-                @click="onInstall">
+            <b-button v-if="installState" variant="primary" :class="buttonClass" @click="() => emit('onInstall')">
                 Install
             </b-button>
             <b-button
-                :disabled="!uninstallState"
+                v-else-if="uninstallState"
+                variant="danger"
                 :class="buttonClass"
-                :variant="uninstallState ? 'danger' : ''"
-                @click="onUninstall">
+                @click="() => emit('onUninstall')">
                 Uninstall
             </b-button>
             <b-button
-                :disabled="!resetState"
+                v-else
+                variant="warning"
                 :class="buttonClass"
                 :title="l('Reset Broken or Stuck Installation')"
-                :variant="resetState ? 'warning' : ''"
                 @click="onCancel">
                 Reset
             </b-button>
         </div>
     </div>
 </template>
-<script>
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-
-Vue.use(BootstrapVue);
-
-export default {
-    props: {
-        status: {
-            type: String,
-            default: "Uninstalled",
-        },
-    },
-    data() {
-        return {
-            buttonClass: "btn-sm text-nowrap",
-        };
-    },
-    computed: {
-        installState() {
-            return !this.status || this.status === "Uninstalled";
-        },
-        uninstallState() {
-            return this.status === "Installed";
-        },
-        resetState() {
-            return !this.installState && !this.uninstallState;
-        },
-        installingState() {
-            return this.status !== "Error" && this.resetState;
-        },
-    },
-    methods: {
-        onInstall() {
-            this.$emit("onInstall");
-        },
-        onUninstall() {
-            this.$emit("onUninstall");
-        },
-        onCancel() {
-            if (window.confirm(`Do you want to reset this repository?`)) {
-                this.$emit("onUninstall");
-            }
-        },
-    },
-};
-</script>
 
 <style lang="scss" scoped>
-.status {
-    display: inline-block;
+button {
     min-width: 80px;
 }
 </style>

From b577eb8806f1d9eab7ca8aaf8d5e3dcd36664abb Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:09:22 +0200
Subject: [PATCH 2/4] restructure installation actions

---
 .../RepositoryDetails/InstallationActions.vue | 40 ++++++++-----------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue
index 7b4be984132..04228b87adf 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.vue
@@ -5,13 +5,11 @@ const props = defineProps({
     status: String,
 });
 
-const emit = defineEmits(["onInstall", "onUninstall"]);
-
-const buttonClass = "btn-sm text-nowrap";
-
 const installState = computed(() => !props.status || props.status === "Uninstalled");
 const uninstallState = computed(() => props.status === "Installed");
 
+const emit = defineEmits(["onInstall", "onUninstall"]);
+
 function onCancel() {
     if (window.confirm(`Do you want to reset this repository?`)) {
         emit("onUninstall");
@@ -21,26 +19,20 @@ function onCancel() {
 
 <template>
     <div>
-        <div class="d-inline-block">
-            <b-button v-if="installState" variant="primary" :class="buttonClass" @click="() => emit('onInstall')">
-                Install
-            </b-button>
-            <b-button
-                v-else-if="uninstallState"
-                variant="danger"
-                :class="buttonClass"
-                @click="() => emit('onUninstall')">
-                Uninstall
-            </b-button>
-            <b-button
-                v-else
-                variant="warning"
-                :class="buttonClass"
-                :title="l('Reset Broken or Stuck Installation')"
-                @click="onCancel">
-                Reset
-            </b-button>
-        </div>
+        <b-button v-if="installState" variant="primary" class="btn-sm" @click="() => emit('onInstall')">
+            Install
+        </b-button>
+        <b-button v-else-if="uninstallState" variant="danger" class="btn-sm" @click="() => emit('onUninstall')">
+            Uninstall
+        </b-button>
+        <b-button
+            v-else
+            variant="warning"
+            class="btn-sm"
+            :title="l('Reset Broken or Stuck Installation')"
+            @click="onCancel">
+            Reset
+        </b-button>
     </div>
 </template>
 

From 48b2e2a59f8e3f6215d902621116d1b46586835b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Aug 2022 13:09:43 +0200
Subject: [PATCH 3/4] update selector in test

---
 .../Toolshed/RepositoryDetails/InstallationActions.test.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js
index 12f3e45f337..754c5013e50 100644
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js
+++ b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js
@@ -14,7 +14,7 @@ describe("InstallationActions", () => {
             },
             localVue,
         });
-        const $el = wrapper.find("button:nth-of-type(2)");
+        const $el = wrapper.find("button");
         expect($el.classes()).toEqual(expect.arrayContaining(["btn-danger"]));
         $el.trigger("click");
         expect(wrapper.emitted().onUninstall).toBeDefined();
@@ -28,7 +28,7 @@ describe("InstallationActions", () => {
             },
             localVue,
         });
-        const $el = wrapper.find("button:nth-of-type(1)");
+        const $el = wrapper.find("button");
         expect($el.classes()).toEqual(expect.arrayContaining(["btn-primary"]));
         $el.trigger("click");
         expect(wrapper.emitted().onInstall).toBeDefined();

From 516f9680c8bd42a1d7fdde6e05404f783d3f803d Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Aug 2022 15:24:23 +0200
Subject: [PATCH 4/4] remove test until vue-jest is fixed
 https://github.com/vuejs/vue-jest/pull/489

---
 .../InstallationActions.test.js               | 36 -------------------
 1 file changed, 36 deletions(-)
 delete mode 100644 client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js

diff --git a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js b/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js
deleted file mode 100644
index 754c5013e50..00000000000
--- a/client/src/components/Toolshed/RepositoryDetails/InstallationActions.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { mount, createLocalVue } from "@vue/test-utils";
-import InstallationActions from "./InstallationActions";
-import { localizationPlugin } from "components/plugins";
-
-const localVue = createLocalVue();
-localVue.use(localizationPlugin);
-
-describe("InstallationActions", () => {
-    it("test installed repository revision", () => {
-        const wrapper = mount(InstallationActions, {
-            propsData: {
-                installed: true,
-                status: "Installed",
-            },
-            localVue,
-        });
-        const $el = wrapper.find("button");
-        expect($el.classes()).toEqual(expect.arrayContaining(["btn-danger"]));
-        $el.trigger("click");
-        expect(wrapper.emitted().onUninstall).toBeDefined();
-    });
-
-    it("test uninstalled repository revision", () => {
-        const wrapper = mount(InstallationActions, {
-            propsData: {
-                installed: false,
-                status: "Uninstalled",
-            },
-            localVue,
-        });
-        const $el = wrapper.find("button");
-        expect($el.classes()).toEqual(expect.arrayContaining(["btn-primary"]));
-        $el.trigger("click");
-        expect(wrapper.emitted().onInstall).toBeDefined();
-    });
-});