Implement quota tracking options per ObjectStore.

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/Libraries/LibraryFolder/TopToolbar/library-model.js

@@ -172,7 +172,7 @@ var HistoryContents = Backbone.Collection.extend({
         this.id = options.id;
     },
     url: function () {
-        return `${this.urlRoot + this.id}/contents`;
+        return `${this.urlRoot + this.id}/contents?shareable=true`;
     },
     model: HistoryItem,
 });

client/src/components/ObjectStore/DescribeObjectStore.test.js

@@ -0,0 +1,80 @@
+import { shallowMount } from "@vue/test-utils";
+import DescribeObjectStore from "./DescribeObjectStore";
+import { getLocalVue } from "tests/jest/helpers";
+import MarkdownIt from "markdown-it";
+
+const localVue = getLocalVue();
+
+const TEST_STORAGE_API_RESPONSE_WITHOUT_ID = {
+    object_store_id: null,
+    private: false,
+};
+const TEST_RENDERED_MARKDOWN_AS_HTML = "<p>My cool <strong>markdown</strong>\n";
+
+const TEST_STORAGE_API_RESPONSE_WITH_ID = {
+    object_store_id: "foobar",
+    private: false,
+};
+const TEST_STORAGE_API_RESPONSE_WITH_NAME = {
+    object_store_id: "foobar",
+    name: "my cool storage",
+    description: "My cool **markdown**",
+    private: true,
+};
+
+// 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("DescribeObjectStore.vue", () => {
+    let wrapper;
+
+    async function mountWithResponse(response) {
+        wrapper = shallowMount(DescribeObjectStore, {
+            propsData: { storageInfo: response, what: "where i am throwing my test dataset" },
+            localVue,
+        });
+    }
+
+    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 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 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);
+        expect(wrapper.find("object-store-restriction-span-stub").props("isPrivate")).toBeFalsy();
+    });
+
+    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 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.find("object-store-restriction-span-stub").props("isPrivate")).toBeTruthy();
+    });
+});

client/src/components/ObjectStore/DescribeObjectStore.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <div>
+            <span v-localize>{{ what }}</span>
+            <span v-if="storageInfo.name" class="display-os-by-name">
+                a Galaxy <object-store-restriction-span :is-private="isPrivate" /> 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-restriction-span :is-private="isPrivate" /> object store with id
+                <b>{{ storageInfo.object_store_id }}</b>
+            </span>
+            <span v-else class="display-os-default">
+                the default configured Galaxy <object-store-restriction-span :is-private="isPrivate" /> object store </span
+            >.
+        </div>
+        <QuotaSourceUsageProvider
+            v-if="storageInfo.quota && storageInfo.quota.enabled"
+            v-slot="{ result: quotaUsage, loading: isLoadingUsage }"
+            :quota-source-label="quotaSourceLabel">
+            <b-spinner v-if="isLoadingUsage" />
+            <QuotaUsageBar v-else-if="quotaUsage" :quota-usage="quotaUsage" :embedded="true" />
+        </QuotaSourceUsageProvider>
+        <div v-else>Galaxy has no quota configured for this object store.</div>
+        <div v-html="descriptionRendered"></div>
+    </div>
+</template>
+
+<script>
+import MarkdownIt from "markdown-it";
+import ObjectStoreRestrictionSpan from "./ObjectStoreRestrictionSpan";
+import QuotaUsageBar from "components/User/DiskUsage/Quota/QuotaUsageBar";
+import { QuotaSourceUsageProvider } from "components/User/DiskUsage/Quota/QuotaUsageProvider";
+
+export default {
+    components: {
+        ObjectStoreRestrictionSpan,
+        QuotaSourceUsageProvider,
+        QuotaUsageBar,
+    },
+    props: {
+        storageInfo: {
+            type: Object,
+            required: true,
+        },
+        what: {
+            type: String,
+            required: true,
+        },
+    },
+    computed: {
+        quotaSourceLabel() {
+            return this.storageInfo.quota?.source;
+        },
+        descriptionRendered() {
+            const description = this.storageInfo.description;
+            let descriptionRendered;
+            if (description) {
+                descriptionRendered = MarkdownIt({ html: true }).render(description);
+            } else {
+                descriptionRendered = null;
+            }
+            return descriptionRendered;
+        },
+        isPrivate() {
+            return this.storageInfo.private;
+        },
+    },
+};
+</script>

client/src/components/ObjectStore/ObjectStoreRestrictionSpan.test.js

@@ -0,0 +1,27 @@
+import { shallowMount } from "@vue/test-utils";
+import { getLocalVue } from "tests/jest/helpers";
+import ObjectStoreRestrictionSpan from "./ObjectStoreRestrictionSpan";
+
+const localVue = getLocalVue();
+
+describe("ObjectStoreRestrictionSpan", () => {
+    let wrapper;
+
+    it("should render info about private storage if isPrivate", () => {
+        wrapper = shallowMount(ObjectStoreRestrictionSpan, {
+            propsData: { isPrivate: true },
+            localVue,
+        });
+        expect(wrapper.find(".stored-how").text()).toBe("private");
+        expect(wrapper.find(".stored-how").attributes("title")).toBeTruthy();
+    });
+
+    it("should render info about unrestricted storage if not isPrivate", () => {
+        wrapper = shallowMount(ObjectStoreRestrictionSpan, {
+            propsData: { isPrivate: false },
+            localVue,
+        });
+        expect(wrapper.find(".stored-how").text()).toBe("unrestricted");
+        expect(wrapper.find(".stored-how").attributes("title")).toBeTruthy();
+    });
+});

client/src/components/ObjectStore/ObjectStoreRestrictionSpan.vue

@@ -0,0 +1,38 @@
+<template>
+    <span v-b-tooltip.hover class="stored-how" :title="title">{{ text }}</span>
+</template>
+
+<script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+Vue.use(BootstrapVue);
+
+export default {
+    props: {
+        isPrivate: {
+            // private is reserved word
+            type: Boolean,
+        },
+    },
+    computed: {
+        text() {
+            return this.isPrivate ? "private" : "unrestricted";
+        },
+        title() {
+            if (this.isPrivate) {
+                return "This dataset is stored on storage restricted to a single user. It can not be shared, pubished, or added to Galaxy data libraries.";
+            } else {
+                return "This dataset is stored on unrestricted storage. With sufficient Galaxy permissions, this dataset can be published, shared, or added to Galaxy data libraries.";
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+/* Give visual indication of mouseover info */
+.stored-how {
+    text-decoration-line: underline;
+    text-decoration-style: dashed;
+}
+</style>