Empower Users to Select Storage Destination

client/src/components/Dataset/DatasetStorage/DatasetStorage.test.js

@@ -4,37 +4,18 @@ import { getLocalVue } from "tests/jest/helpers";
 import flushPromises from "flush-promises";
 import MockAdapter from "axios-mock-adapter";
 import axios from "axios";
-import MarkdownIt from "markdown-it";
 
 const localVue = getLocalVue();
 
 const TEST_STORAGE_API_RESPONSE_WITHOUT_ID = {
     object_store_id: null,
-};
-const TEST_STORAGE_API_RESPONSE_WITH_ID = {
-    object_store_id: "foobar",
-};
-const TEST_STORAGE_API_RESPONSE_WITH_NAME = {
-    object_store_id: "foobar",
-    name: "my cool storage",
-    description: "My cool **markdown**",
+    private: false,
 };
 const TEST_DATASET_ID = "1";
 const TEST_STORAGE_URL = `/api/datasets/${TEST_DATASET_ID}/storage`;
-const TEST_RENDERED_MARKDOWN_AS_HTML = "<p>My cool <strong>markdown</strong>\n";
 const TEST_ERROR_MESSAGE = "Opps all errors.";
 
-// works fine without mocking but I guess it is more JS unit-y with the mock?
-jest.mock("markdown-it");
-MarkdownIt.mockImplementation(() => {
-    return {
-        render(markdown) {
-            return TEST_RENDERED_MARKDOWN_AS_HTML;
-        },
-    };
-});
-
-describe("Dataset Storage", () => {
+describe("DatasetStorage.vue", () => {
     let axiosMock;
     let wrapper;
 
@@ -46,9 +27,6 @@ describe("Dataset Storage", () => {
         wrapper = shallowMount(DatasetStorage, {
             propsData: { datasetId: TEST_DATASET_ID },
             localVue,
-            stubs: {
-                "loading-span": true,
-            },
         });
     }
 
@@ -62,6 +40,7 @@ describe("Dataset Storage", () => {
         mount();
         await wrapper.vm.$nextTick();
         expect(wrapper.findAll("loading-span-stub").length).toBe(1);
+        expect(wrapper.findAll("describe-object-store-stub").length).toBe(0);
     });
 
     it("test error rendering...", async () => {
@@ -78,44 +57,8 @@ describe("Dataset Storage", () => {
     it("test dataset storage with object store without id", async () => {
         await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITHOUT_ID);
         expect(wrapper.findAll("loading-span-stub").length).toBe(0);
-        expect(wrapper.vm.descriptionRendered).toBeNull();
-        const header = wrapper.findAll("h2");
-        expect(header.length).toBe(1);
-        expect(header.at(0).text()).toBe("Dataset Storage");
-        const byIdSpan = wrapper.findAll(".display-os-by-id");
-        expect(byIdSpan.length).toBe(0);
-        const byNameSpan = wrapper.findAll(".display-os-by-name");
-        expect(byNameSpan.length).toBe(0);
-        const byDefaultSpan = wrapper.findAll(".display-os-default");
-        expect(byDefaultSpan.length).toBe(1);
-    });
-
-    it("test dataset storage with object store id", async () => {
-        await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITH_ID);
-        expect(wrapper.findAll("loading-span-stub").length).toBe(0);
-        expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
-        expect(wrapper.vm.descriptionRendered).toBeNull();
-        const header = wrapper.findAll("h2");
-        expect(header.length).toBe(1);
-        expect(header.at(0).text()).toBe("Dataset Storage");
-        const byIdSpan = wrapper.findAll(".display-os-by-id");
-        expect(byIdSpan.length).toBe(1);
-        const byNameSpan = wrapper.findAll(".display-os-by-name");
-        expect(byNameSpan.length).toBe(0);
-    });
-
-    it("test dataset storage with object store name", async () => {
-        await mountWithResponse(TEST_STORAGE_API_RESPONSE_WITH_NAME);
-        expect(wrapper.findAll("loading-span-stub").length).toBe(0);
-        expect(wrapper.vm.storageInfo.object_store_id).toBe("foobar");
-        expect(wrapper.vm.descriptionRendered).toBe(TEST_RENDERED_MARKDOWN_AS_HTML);
-        const header = wrapper.findAll("h2");
-        expect(header.length).toBe(1);
-        expect(header.at(0).text()).toBe("Dataset Storage");
-        const byIdSpan = wrapper.findAll(".display-os-by-id");
-        expect(byIdSpan.length).toBe(0);
-        const byNameSpan = wrapper.findAll(".display-os-by-name");
-        expect(byNameSpan.length).toBe(1);
+        expect(wrapper.findAll("describe-object-store-stub").length).toBe(1);
+        expect(wrapper.vm.storageInfo.private).toEqual(false);
     });
 
     afterEach(() => {

client/src/components/Dataset/DatasetStorage/DatasetStorage.vue

@@ -16,30 +16,21 @@
             </p>
         </div>
         <div v-else>
-            <p>
-                This dataset is stored in
-                <span v-if="storageInfo.name" class="display-os-by-name">
-                    a Galaxy object store named <b>{{ storageInfo.name }}</b>
-                </span>
-                <span v-else-if="storageInfo.object_store_id" class="display-os-by-id">
-                    a Galaxy object store with id <b>{{ storageInfo.object_store_id }}</b>
-                </span>
-                <span v-else class="display-os-default"> the default configured Galaxy object store </span>.
-            </p>
-            <div v-html="descriptionRendered"></div>
+            <describe-object-store what="This dataset is stored in" :storage-info="storageInfo" />
         </div>
     </div>
 </template>
 
 <script>
 import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
-import LoadingSpan from "components/LoadingSpan";
-import MarkdownIt from "markdown-it";
 import { errorMessageAsString } from "utils/simple-error";
+import DescribeObjectStore from "components/ObjectStore/DescribeObjectStore";
+import LoadingSpan from "components/LoadingSpan";
 
 export default {
     components: {
+        DescribeObjectStore,
         LoadingSpan,
     },
     props: {
@@ -58,7 +49,6 @@ export default {
     data() {
         return {
             storageInfo: null,
-            descriptionRendered: null,
             errorMessage: null,
         };
     },
@@ -94,13 +84,7 @@ export default {
     methods: {
         handleResponse(response) {
             const storageInfo = response.data;
-            const description = storageInfo.description;
             this.storageInfo = storageInfo;
-            if (description) {
-                this.descriptionRendered = MarkdownIt({ html: true }).render(storageInfo.description);
-            } else {
-                this.descriptionRendered = null;
-            }
         },
     },
 };

client/src/components/History/CurrentHistory/HistoryCounter.vue

@@ -1,67 +1,104 @@
 <template>
-    <div class="history-size my-1 d-flex justify-content-between">
-        <b-button
-            v-b-tooltip.hover
-            title="History Size"
-            variant="link"
-            size="sm"
-            class="rounded-0 text-decoration-none"
-            @click="onDashboard">
-            <icon icon="database" />
-            <span>{{ historySize | niceFileSize }}</span>
-        </b-button>
-        <b-button-group>
+    <CurrentUser v-slot="{ user }">
+        <div class="history-size my-1 d-flex justify-content-between">
             <b-button
                 v-b-tooltip.hover
-                title="Show active"
+                title="History Size"
                 variant="link"
                 size="sm"
                 class="rounded-0 text-decoration-none"
-                @click="setFilter('')">
-                <span class="fa fa-map-marker" />
-                <span>{{ numItemsActive }}</span>
+                @click="onDashboard">
+                <icon icon="database" />
+                <span>{{ historySize | niceFileSize }}</span>
             </b-button>
-            <b-button
-                v-if="numItemsDeleted"
-                v-b-tooltip.hover
-                title="Show deleted"
-                variant="link"
-                size="sm"
-                class="rounded-0 text-decoration-none"
-                @click="setFilter('deleted:true')">
-                <icon icon="trash" />
-                <span>{{ numItemsDeleted }}</span>
-            </b-button>
-            <b-button
-                v-if="numItemsHidden"
-                v-b-tooltip.hover
-                title="Show hidden"
-                variant="link"
-                size="sm"
-                class="rounded-0 text-decoration-none"
-                @click="setFilter('visible:false')">
-                <icon icon="eye-slash" />
-                <span>{{ numItemsHidden }}</span>
-            </b-button>
-            <b-button
-                v-b-tooltip.hover
-                :title="reloadButtonTitle"
-                :variant="reloadButtonVariant"
-                size="sm"
-                class="rounded-0 text-decoration-none"
-                @click="reloadContents()">
-                <span :class="reloadButtonCls" />
-            </b-button>
-        </b-button-group>
-    </div>
+            <b-button-group>
+                <b-button
+                    :id="`history-storage-${history.id}`"
+                    variant="link"
+                    size="sm"
+                    class="rounded-0 text-decoration-none"
+                    @click="showPreferredObjectStoreModal = true">
+                    <icon icon="hdd" />
+                </b-button>
+                <PreferredStorePopover
+                    :history-id="history.id"
+                    :history-preferred-object-store-id="historyPreferredObjectStoreId"
+                    :user="user">
+                </PreferredStorePopover>
+                <b-button-group>
+                    <b-button
+                        v-b-tooltip.hover
+                        title="Show active"
+                        variant="link"
+                        size="sm"
+                        class="rounded-0 text-decoration-none"
+                        @click="setFilter('')">
+                        <span class="fa fa-map-marker" />
+                        <span>{{ numItemsActive }}</span>
+                    </b-button>
+                    <b-button
+                        v-if="numItemsDeleted"
+                        v-b-tooltip.hover
+                        title="Show deleted"
+                        variant="link"
+                        size="sm"
+                        class="rounded-0 text-decoration-none"
+                        @click="setFilter('deleted:true')">
+                        <icon icon="trash" />
+                        <span>{{ numItemsDeleted }}</span>
+                    </b-button>
+                    <b-button
+                        v-if="numItemsHidden"
+                        v-b-tooltip.hover
+                        title="Show hidden"
+                        variant="link"
+                        size="sm"
+                        class="rounded-0 text-decoration-none"
+                        @click="setFilter('visible:false')">
+                        <icon icon="eye-slash" />
+                        <span>{{ numItemsHidden }}</span>
+                    </b-button>
+                    <b-button
+                        v-b-tooltip.hover
+                        :title="reloadButtonTitle"
+                        :variant="reloadButtonVariant"
+                        size="sm"
+                        class="rounded-0 text-decoration-none"
+                        @click="reloadContents()">
+                        <span :class="reloadButtonCls" />
+                    </b-button>
+                </b-button-group>
+                <b-modal
+                    v-model="showPreferredObjectStoreModal"
+                    title="History Preferred Object Store"
+                    modal-class="history-preferred-object-store-modal"
+                    title-tag="h3"
+                    size="sm"
+                    hide-footer>
+                    <SelectPreferredStore
+                        :user-preferred-object-store-id="user.preferred_object_store_id"
+                        :history="history"
+                        @updated="onUpdatePreferredObjectStoreId" />
+                </b-modal>
+            </b-button-group>
+        </div>
+    </CurrentUser>
 </template>
 
 <script>
 import prettyBytes from "pretty-bytes";
 import { formatDistanceToNowStrict } from "date-fns";
 import { usesDetailedHistoryMixin } from "./usesDetailedHistoryMixin.js";
+import CurrentUser from "components/providers/CurrentUser";
+import PreferredStorePopover from "./PreferredStorePopover";
+import SelectPreferredStore from "./SelectPreferredStore";
 
 export default {
+    components: {
+        CurrentUser,
+        PreferredStorePopover,
+        SelectPreferredStore,
+    },
     filters: {
         niceFileSize(rawSize = 0) {
             return prettyBytes(rawSize);
@@ -78,6 +115,8 @@ export default {
             reloadButtonCls: "fa fa-sync",
             reloadButtonTitle: "",
             reloadButtonVariant: "link",
+            showPreferredObjectStoreModal: false,
+            historyPreferredObjectStoreId: this.history.preferred_object_store_id,
         };
     },
     mounted() {
@@ -111,6 +150,13 @@ export default {
                 this.reloadButtonCls = "fa fa-sync";
             }, 1000);
         },
+        onUpdatePreferredObjectStoreId(preferredObjectStoreId) {
+            this.showPreferredObjectStoreModal = false;
+            // ideally this would be pushed back to the history object somehow
+            // and tracked there... but for now this is only component using
+            // this information.
+            this.historyPreferredObjectStoreId = preferredObjectStoreId;
+        },
     },
 };
 </script>

client/src/components/History/CurrentHistory/PreferredStorePopover.vue

@@ -0,0 +1,49 @@
+<template>
+    <b-popover :target="`history-storage-${historyId}`" triggers="hover" placement="bottomleft">
+        <template v-slot:title>Preferred Target Object Store</template>
+        <p v-if="historyPreferredObjectStoreId" class="history-preferred-object-store-inherited">
+            This target object store has been set at the history level.
+        </p>
+        <p v-else class="history-preferred-object-store-not-inherited">
+            This target object store has been inherited from your user preferences (set in User -> Preferences ->
+            Preferred Object Store). If that option is updated, this history will target that new default.
+        </p>
+        <ShowSelectedObjectStore
+            v-if="preferredObjectStoreId"
+            :preferred-object-store-id="preferredObjectStoreId"
+            for-what="Galaxy will default to storing this history's datasets in "></ShowSelectedObjectStore>
+        <div v-localize>
+            Change this preference object store target by clicking on the storage button in the history panel.
+        </div>
+    </b-popover>
+</template>
+
+<script>
+import ShowSelectedObjectStore from "components/ObjectStore/ShowSelectedObjectStore";
+
+export default {
+    components: {
+        ShowSelectedObjectStore,
+    },
+    props: {
+        historyId: {
+            type: String,
+            required: true,
+        },
+        historyPreferredObjectStoreId: {
+            type: String,
+            default: null,
+        },
+        user: { type: Object, required: true },
+    },
+    computed: {
+        preferredObjectStoreId() {
+            let id = this.historyPreferredObjectStoreId;
+            if (!id) {
+                id = this.user.preferred_object_store_id;
+            }
+            return id;
+        },
+    },
+};
+</script>