Unverified Commit 66b92bf0 authored by Björn Grüning's avatar Björn Grüning Committed by GitHub
Browse files

Merge pull request #14090 from davelopez/fix_unlimited_quota_display 

Storage Dashboard: fix unlimited quota display
parents 043c8eaf 9a904f8b

client/src/components/User/DiskUsage/Quota/QuotaUsageBar.vue

+2 −1
Original line number Diff line number Diff line
@@ -7,7 +7,8 @@ 
            {{ storageSourceText }}

        </h2>

        <h3>

            <b>{{ quotaUsage.niceTotalDiskUsage }}</b> of {{ quotaUsage.niceQuota }} used

            <b>{{ quotaUsage.niceTotalDiskUsage }}</b>

            <span v-if="quotaHasLimit"> of {{ quotaUsage.niceQuota }}</span> used

        </h3>

        <span v-if="quotaHasLimit" class="quota-percent-text">

            {{ quotaUsage.quotaPercent }}{{ percentOfDiskQuotaUsedText }}

client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.test.js

+19 −0
Original line number Diff line number Diff line
@@ -19,6 +19,7 @@ const FAKE_QUOTA_USAGES_LIST = [ 
    {

        sourceLabel: "Unlimited source",

        quotaInBytes: null,

        isUnlimited: true,

    },

];
@@ -41,4 +42,22 @@ describe("QuotaUsageSummary.vue", () => { 


        expect(wrapper.findAll("quotausagebar-stub").length).toBe(expectedNumberOfBars);

    });



    it("should display `unlimited` quota when all sources are unlimited", async () => {

        const FAKE_UNLIMITED_QUOTA_USAGES = [

            {

                sourceLabel: "Unlimited source 1",

                quotaInBytes: null,

                isUnlimited: true,

            },

            {

                sourceLabel: "Unlimited source 2",

                quotaInBytes: null,

                isUnlimited: true,

            },

        ];

        const wrapper = mountQuotaUsageSummaryWith(FAKE_UNLIMITED_QUOTA_USAGES);

        const summaryText = wrapper.find("h2").text();

        expect(summaryText).toContain("unlimited");

    });

});

client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue

+18 −15
Original line number Diff line number Diff line 
<template>

    <div class="quota-summary">

        <div class="text-center my-5">

            <div v-if="allSourcesUnlimited">

                <h2>You've got <b>unlimited</b> disk quota</h2>

                <h4 v-localize>All your storage sources have unlimited disk space. Enjoy!</h4>

            </div>

            <div v-else>

                <h2>

                    You've got <b> {{ niceTotalQuota }} </b> of total disk quota

                </h2>

            <h4>

                {{ quotaSummaryDescription }}

                <h4 v-localize>

                    This is the maximum disk space that you can use across all your storage sources. Unlimited storage

                    sources are not taken into account

                </h4>

            </div>

        </div>



        <div v-for="quotaUsage in quotaUsages" :key="quotaUsage.sourceLabel">

            <QuotaUsageBar :quota-usage="quotaUsage" />
@@ -16,7 +23,6 @@ 
</template>



<script>

import _l from "utils/localization";

import { bytesToString } from "utils/utils";

import QuotaUsageBar from "./QuotaUsageBar";
@@ -30,14 +36,6 @@ export default { 
            required: true,

        },

    },

    data() {

        return {

            quotaSummaryDescription: _l(

                "This is the maximum disk space that you can use across all your storage sources." +

                    " Unlimited storage sources are not taken into account"

            ),

        };

    },

    computed: {

        /** @returns {Number} */

        totalQuota() {
@@ -48,6 +46,11 @@ export default { 
        niceTotalQuota() {

            return bytesToString(this.totalQuota, true);

        },

        /** @returns {Boolean} */

        allSourcesUnlimited() {

            const allUnlimited = this.quotaUsages.every((usage) => usage.isUnlimited);

            return allUnlimited;

        },

    },

};

</script>