Add contextual helper (#10047)

* Add contextual helper

* Add changelog item

changelog/unreleased/enhancement-add-explaining-contextual-helper-to-spaces-overview

@@ -0,0 +1,4 @@
+Enhancement: Add explaining contextual helper to spaces overview
+
+https://github.com/owncloud/web/pull/10047
+https://github.com/owncloud/web/issues/8163

packages/web-app-files/src/views/spaces/Projects.vue

@@ -15,6 +15,13 @@
       >
         <template #actions>
           <create-space v-if="hasCreatePermission" class="oc-mr-s" />
+          <div v-if="!selectedResourcesIds?.length" class="oc-flex oc-flex-middle oc-pl-s">
+            <span v-text="$gettext('Learn about spaces')" />
+            <oc-contextual-helper
+              :text="$gettext('Spaces are special folders built for collaboration.')"
+              class="oc-ml-xs"
+            />
+          </div>
         </template>
       </app-bar>
       <app-loading-spinner v-if="areResourcesLoading" />
@@ -120,8 +127,8 @@
             <template #totalQuota="{ resource }">
               {{ getTotalQuota(resource) }}
             </template>
-            <template #usedQuota="{ resource }"> {{ getUsedQuota(resource) }} </template>
-            <template #remainingQuota="{ resource }"> {{ getRemainingQuota(resource) }} </template>
+            <template #usedQuota="{ resource }"> {{ getUsedQuota(resource) }}</template>
+            <template #remainingQuota="{ resource }"> {{ getRemainingQuota(resource) }}</template>
             <template #image="{ resource }">
               <img
                 v-if="imageContentObject[resource.id]"
@@ -481,9 +488,11 @@ export default defineComponent({
 #files-spaces-empty {
   height: 75vh;
 }
+
 .table-preview {
   border-radius: 3px;
 }
+
 .state-trashed {
   .tile-preview,
   .tile-default-image > svg {