From d7a6d653e952fd2ff5f0df20405f081d3dc4a1d6 Mon Sep 17 00:00:00 2001
From: Hadley King <hadley_king@gwu.edu>
Date: Wed, 27 Jul 2022 12:32:01 -0400
Subject: [PATCH] Create `components/WorkflowInvocationState/Export`

RE: review on https://github.com/galaxyproject/galaxy/pull/14374
- created `components/WorkflowInvocationState/Export`
- created 'components/WorkflowInvocationStatecomponents/WorkflowInvocationState/WorkflowInvocationExportOptions.vue'/Export/BioComputeObjectExportCard.vue`
- modified 'components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue'

Changes to be committed:
	new file:   client/src/components/WorkflowInvocationState/Export/BioComputeObjectExportCard.vue
	new file:   client/src/components/WorkflowInvocationState/Export/index.js
	modified:   client/src/components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue
---
 .../Export/BioComputeObjectExportCard.vue     | 174 ++++++++++++++++++
 .../WorkflowInvocationState/Export/index.js   |   1 +
 .../WorkflowInvocationExportOptions.vue       | 165 +----------------
 3 files changed, 179 insertions(+), 161 deletions(-)
 create mode 100644 client/src/components/WorkflowInvocationState/Export/BioComputeObjectExportCard.vue
 create mode 100644 client/src/components/WorkflowInvocationState/Export/index.js

diff --git a/client/src/components/WorkflowInvocationState/Export/BioComputeObjectExportCard.vue b/client/src/components/WorkflowInvocationState/Export/BioComputeObjectExportCard.vue
new file mode 100644
index 00000000000..e57afdc08dd
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/Export/BioComputeObjectExportCard.vue
@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <p>
+            A BioCompute Object (BCO) is the unofficial name for a JSON object that adheres to the
+            <a href="https://standards.ieee.org/ieee/2791/7337/">IEEE-2791-2020 standard</a>. A BCO is designed to
+            communicate High-throughput Sequencing (HTS) analysis results, data set creation, data curation, and
+            bioinformatics verification protocols.
+        </p>
+        <p>Learn more about <a href="https://biocomputeobject.org/" target="_blank">BioCompute Objects</a>.</p>
+        <p>
+            Instructions for
+            <a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start" target="_blank"
+                >creating a BCO using Galaxy</a
+            >.
+        </p>
+        <b-tabs lazy>
+            <b-tab title="Download">
+                <a class="bco-json" style="padding-left: 1em" :href="bcoDownloadLink"><b>Download BCO</b></a>
+            </b-tab>
+            <b-tab title="Submit To BCODB">
+                <div>
+                    <p>
+                        To submit to a BCODB you need to already have an authenticated account. Instructions on
+                        submitting a BCO from Galaxy are available
+                        <a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start/" target="_blank">here</a>.
+                    </p>
+                    <form @submit.prevent="submitForm">
+                        <div class="form-group">
+                            <label for="fetch">BCO DB URL (example: https://biocomputeobject.org)</label>
+                            <input
+                                id="fetch"
+                                v-model="form.fetch"
+                                type="text"
+                                class="form-control"
+                                placeholder="https://biocomputeobject.org"
+                                required />
+                        </div>
+                        <div class="form-group">
+                            <label for="authorization">User API Key</label>
+                            <input
+                                id="authorization"
+                                v-model="form.authorization"
+                                type="password"
+                                class="form-control"
+                                required />
+                        </div>
+                        <div class="form-group">
+                            <label for="table">Prefix</label>
+                            <input
+                                id="table"
+                                v-model="form.table"
+                                type="text"
+                                class="form-control"
+                                placeholder="BCO"
+                                required />
+                        </div>
+                        <div class="form-group">
+                            <label for="owner_group">User Name</label>
+                            <input
+                                id="owner_group"
+                                v-model="form.owner_group"
+                                type="text"
+                                class="form-control"
+                                required />
+                        </div>
+                        <div class="form-group">
+                            <button class="btn btn-primary">{{ "Submit" | localize }}</button>
+                        </div>
+                    </form>
+                </div>
+            </b-tab>
+        </b-tabs>
+    </div>
+</template>
+
+<script>
+import { getRootFromIndexLink } from "onload";
+import { getAppRoot } from "onload/loadConfig";
+import { mapGetters } from "vuex";
+import axios from "axios";
+
+const getUrl = (path) => getRootFromIndexLink() + path;
+
+export default {
+    props: {
+        invocationId: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            bco: {
+                type: Object,
+                required: true,
+            },
+            form: {
+                fetch: "",
+                authorization: "",
+                table: "",
+                owner_group: "",
+            },
+        };
+    },
+    computed: {
+        ...mapGetters(["getInvocationById"]),
+        indexStr() {
+            if (this.index == null) {
+                return 0;
+            } else {
+                return `${this.index + 1}`;
+            }
+        },
+        bcoDownloadLink: function () {
+            return `${getAppRoot()}api/invocations/${this.invocationId}/biocompute/download`;
+        },
+    },
+    created: function () {
+        axios
+            .get(getUrl(`./api/invocations/${this.invocationId}/biocompute/`))
+            .then((response) => {
+                this.bco = response.data;
+            })
+            .catch((e) => {
+                this.errors.push(e);
+            });
+    },
+    methods: {
+        submitForm() {
+            const bcoString = {
+                POST_api_objects_draft_create: [
+                    {
+                        contents: this.bco,
+                        owner_group: this.form.owner_group,
+                        schema: "IEEE",
+                        prefix: this.form.table,
+                    },
+                ],
+            };
+            const headers = {
+                Authorization: "Token " + this.form.authorization,
+                "Content-type": "application/json; charset=UTF-8",
+            };
+            const submitURL = this.form.fetch;
+            axios
+                .post(`${submitURL}/api/objects/drafts/create/`, bcoString, { headers: headers })
+                .then((response) => {
+                    if (response.status === 200) {
+                        console.log("response:", response);
+                        alert(response.data[0].message);
+                    }
+                    if (response.status === 207) {
+                        console.log("response:", response);
+                        alert(response.data[0].message);
+                    }
+                })
+                .catch(function (error) {
+                    console.log("Error", { ...error });
+                    if (error.response.status == 401) {
+                        alert(error.response.data.detail);
+                        console.log("Error response: ", error);
+                    } else {
+                        console.log("Error", error);
+                        alert("Error", error);
+                    }
+                });
+            this.form.owner_group = "";
+            this.form.authorization = "";
+            this.form.owner_group = "";
+            this.form.fetch = "";
+        },
+    },
+};
+</script>
diff --git a/client/src/components/WorkflowInvocationState/Export/index.js b/client/src/components/WorkflowInvocationState/Export/index.js
new file mode 100644
index 00000000000..2d2614c5998
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/Export/index.js
@@ -0,0 +1 @@
+export { default as BioComputeObjectExportCard } from "./BioComputeObjectExportCard";
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue
index 85b739ba773..10af2a218b1 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationExportOptions.vue
@@ -1,178 +1,21 @@
 <template>
     <b-card-group deck>
-        <b-card title="BioCompute Object" class="export-plugin-card">
-            <p>
-                A BioCompute Object (BCO) is the unofficial name for a JSON object that adheres to the
-                <a href="https://standards.ieee.org/ieee/2791/7337/">IEEE-2791-2020 standard</a>. A BCO is designed to
-                communicate High-throughput Sequencing (HTS) analysis results, data set creation, data curation, and
-                bioinformatics verification protocols.
-            </p>
-            <p>Learn more about <a href="https://biocomputeobject.org/" target="_blank">BioCompute Objects</a>.</p>
-            <p>
-                Instructions for
-                <a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start" target="_blank"
-                    >creating a BCO using Galaxy</a
-                >.
-            </p>
-            <b-tabs lazy>
-                <b-tab title="Download">
-                    <a class="bco-json" :href="bcoDownloadLink"><b>Download BCO</b></a>
-                </b-tab>
-                <b-tab title="Submit To BCODB">
-                    <div>
-                        <p>
-                            To submit to a BCODB you need to already have an authenticated account. Instructions on
-                            submitting a BCO from Galaxy are available
-                            <a href="https://w3id.org/biocompute/tutorials/galaxy_quick_start/" target="_blank">here</a
-                            >.
-                        </p>
-                        <form @submit.prevent="submitForm">
-                            <div class="form-group">
-                                <label for="fetch">BCO DB URL (example: https://biocomputeobject.org)</label>
-                                <input
-                                    id="fetch"
-                                    v-model="form.fetch"
-                                    type="text"
-                                    class="form-control"
-                                    placeholder="https://biocomputeobject.org"
-                                    required />
-                            </div>
-                            <div class="form-group">
-                                <label for="authorization">User API Key</label>
-                                <input
-                                    id="authorization"
-                                    v-model="form.authorization"
-                                    type="password"
-                                    class="form-control"
-                                    required />
-                            </div>
-                            <div class="form-group">
-                                <label for="table">Prefix</label>
-                                <input
-                                    id="table"
-                                    v-model="form.table"
-                                    type="text"
-                                    class="form-control"
-                                    placeholder="BCO"
-                                    required />
-                            </div>
-                            <div class="form-group">
-                                <label for="owner_group">User Name</label>
-                                <input
-                                    id="owner_group"
-                                    v-model="form.owner_group"
-                                    type="text"
-                                    class="form-control"
-                                    required />
-                            </div>
-                            <div class="form-group">
-                                <button class="btn btn-primary">{{ "Submit" | localize }}</button>
-                            </div>
-                        </form>
-                    </div>
-                </b-tab>
-            </b-tabs>
+        <b-card title="BioCompute Object Export" class="export-plugin-card">
+            <bio-compute-object-export-card :invocation-id="invocationId" />
         </b-card>
         <!-- Add more export plugins here -->
     </b-card-group>
 </template>
 
 <script>
-import { getRootFromIndexLink } from "onload";
-import { getAppRoot } from "onload/loadConfig";
-import { mapGetters } from "vuex";
-import axios from "axios";
-
-const getUrl = (path) => getRootFromIndexLink() + path;
-
+import BioComputeObjectExportCard from "./Export/BioComputeObjectExportCard.vue";
 export default {
+    components: { BioComputeObjectExportCard },
     props: {
         invocationId: {
             type: String,
             required: true,
         },
     },
-    data() {
-        return {
-            bco: {
-                type: Object,
-                required: true,
-            },
-            form: {
-                fetch: "",
-                authorization: "",
-                table: "",
-                owner_group: "",
-            },
-        };
-    },
-    computed: {
-        ...mapGetters(["getInvocationById"]),
-        indexStr() {
-            if (this.index == null) {
-                return 0;
-            } else {
-                return `${this.index + 1}`;
-            }
-        },
-        bcoDownloadLink: function () {
-            return `${getAppRoot()}api/invocations/${this.invocationId}/biocompute/download`;
-        },
-    },
-    created: function () {
-        axios
-            .get(getUrl(`./api/invocations/${this.invocationId}/biocompute/`))
-            .then((response) => {
-                this.bco = response.data;
-            })
-            .catch((e) => {
-                this.errors.push(e);
-            });
-    },
-    methods: {
-        submitForm() {
-            const bcoString = {
-                POST_api_objects_draft_create: [
-                    {
-                        contents: this.bco,
-                        owner_group: this.form.owner_group,
-                        schema: "IEEE",
-                        prefix: this.form.table,
-                    },
-                ],
-            };
-            const headers = {
-                Authorization: "Token " + this.form.authorization,
-                "Content-type": "application/json; charset=UTF-8",
-            };
-            const submitURL = this.form.fetch;
-            axios
-                .post(`${submitURL}/api/objects/drafts/create/`, bcoString, { headers: headers })
-                .then((response) => {
-                    if (response.status === 200) {
-                        console.log("response:", response);
-                        alert(response.data[0].message);
-                    }
-                    if (response.status === 207) {
-                        console.log("response:", response);
-                        alert(response.data[0].message);
-                    }
-                })
-                .catch(function (error) {
-                    console.log("Error", { ...error });
-                    if (error.response.status == 401) {
-                        alert(error.response.data.detail);
-                        console.log("Error response: ", error);
-                    } else {
-                        console.log("Error", error);
-                        alert("Error", error);
-                    }
-                });
-            this.form.owner_group = "";
-            this.form.authorization = "";
-            this.form.owner_group = "";
-            this.form.fetch = "";
-        },
-    },
 };
 </script>