From 84a50c3d180df2a43478b75999e96fc6b4b61893 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 8 Dec 2023 12:18:35 +0100
Subject: [PATCH] Added: - fullstorage warning message mapped to workspace not
 profile (fix) - implemented warning message with severity warning Upgrade: -
 primevue 3.43.0 Vuetify clenup: - removed vuetify.min.csswith unnecessary css
 resets

---
 web-app/packages/app/package.json             |  2 +-
 web-app/packages/app/src/app.ts               |  1 -
 .../modules/dashboard/views/DashboardView.vue |  2 +-
 web-app/packages/lib/components.d.ts          |  1 +
 web-app/packages/lib/package.json             |  2 +-
 .../mm-theme-light/variables/_message.scss    |  4 +-
 .../components/FullStorageWarningTemplate.vue | 38 +++++++++++++------
 .../lib/src/common/components/index.ts        |  4 +-
 .../DashboardFullStorageWarningRow.vue        | 12 +++---
 .../dashboard/views/DashboardViewTemplate.vue |  4 +-
 .../ProjectAccessRequestTableTemplate.vue     |  2 +-
 .../project/components/ProjectsTable.vue      |  4 +-
 .../components/ProjectsTableDataLoader.vue    |  6 ++-
 .../packages/lib/src/modules/user/types.ts    |  2 -
 web-app/yarn.lock                             |  8 ++--
 15 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/web-app/packages/app/package.json b/web-app/packages/app/package.json
index f9b98c99..873251cf 100644
--- a/web-app/packages/app/package.json
+++ b/web-app/packages/app/package.json
@@ -34,7 +34,7 @@
     "pinia": "^2.1.7",
     "portal-vue": "^3.0.0",
     "primeflex": "^3.3.1",
-    "primevue": "^3.42.0",
+    "primevue": "^3.43.0",
     "vue": "^3.3.8",
     "vue-i18n": "^9.7.1",
     "vue-meta": "^3.0.0-alpha.10",
diff --git a/web-app/packages/app/src/app.ts b/web-app/packages/app/src/app.ts
index 2ab1b474..56e2114b 100644
--- a/web-app/packages/app/src/app.ts
+++ b/web-app/packages/app/src/app.ts
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 // styles must be imported first (at least before imports of our libs)
-import 'vuetify/dist/vuetify.min.css'
 import 'material-icons/iconfont/material-icons.scss'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@mdi/font/css/materialdesignicons.css'
diff --git a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
index bb656f1e..d7e5bc84 100644
--- a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
+++ b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
@@ -34,7 +34,7 @@ import {
   useUserStore,
   DashboardProjectsRow
 } from '@mergin/lib'
-import { defineComponent, computed, ref } from 'vue'
+import { defineComponent, computed } from 'vue'
 
 export default defineComponent({
   name: 'DashboardView',
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index 2bb5d5b9..f6e9b208 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     PDropdown: typeof import('primevue/dropdown')['default']
     PMenu: typeof import('primevue/menu')['default']
     PMenubar: typeof import('primevue/menubar')['default']
+    PMessage: typeof import('primevue/message')['default']
     POverlayPanel: typeof import('primevue/overlaypanel')['default']
     PTag: typeof import('primevue/tag')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/web-app/packages/lib/package.json b/web-app/packages/lib/package.json
index 18a82c4f..b71cb5b4 100644
--- a/web-app/packages/lib/package.json
+++ b/web-app/packages/lib/package.json
@@ -45,7 +45,7 @@
     "date-fns": "^2.28.0",
     "lodash": "^4.17.21",
     "primeflex": "^3.3.1",
-    "primevue": "^3.42.0",
+    "primevue": "^3.43.0",
     "universal-cookie": "^4.0.4",
     "vue": "^3.3.8",
     "vue-router": "^4.1.6",
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_message.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_message.scss
index 57e74047..4406b9ae 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_message.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_message.scss
@@ -8,7 +8,7 @@ $messagePadding: 1rem 1.5rem;
 
 /// Border width of a message
 /// @group message
-$messageBorderWidth: 0 0 0 4px;
+$messageBorderWidth: 0 0 0 6px;
 
 /// Font size of a message icon
 /// @group message
@@ -116,7 +116,7 @@ $warningMessageBg: map-get($map: $colors, $key: warning);
 
 /// Border of a warning message
 /// @group message
-$warningMessageBorder: 0 none;
+$warningMessageBorder: 0 solid map-get($map: $colors, $key: earth);
 
 /// Text color of a warning message
 /// @group message
diff --git a/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue b/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue
index 257084a2..1f315b09 100644
--- a/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue
+++ b/web-app/packages/lib/src/common/components/FullStorageWarningTemplate.vue
@@ -5,26 +5,40 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card
-    class="mt-3"
-    style="background-color: #fce8e6; color: rgba(0, 0, 0, 0.87)"
-    variant="outlined"
-  >
-    <v-card-text
-      ><span>
-        <b>Your storage is almost full ({{ usage }}%).</b> Soon you will not be
-        able to sync your projects. <slot name="buttons"></slot> </span
-    ></v-card-text>
-  </v-card>
+  <app-container v-if="open">
+    <app-section ground>
+      <PMessage severity="warn" @close="open = false">
+        <p>
+          <span class="font-semibold"
+            >Your storage is almost full ({{ usage }}%).</span
+          >
+          Soon you will not be able to sync your projects.
+          <slot name="buttons"></slot></p
+      ></PMessage>
+    </app-section>
+  </app-container>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
+
+import { AppContainer, AppSection } from '@/common/components'
 
 export default defineComponent({
   name: 'FullStorageWarningTemplate',
+  components: {
+    AppContainer,
+    AppSection
+  },
   props: {
     usage: Number
+  },
+  setup() {
+    /** Handle open state with connection to message close button */
+    const open = ref(true)
+    return {
+      open
+    }
   }
 })
 </script>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 3d9e14dd..4613af66 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -4,6 +4,8 @@
 
 export * from './base'
 
+export { default as AppSection } from './AppSection.vue'
+export { default as AppContainer } from './AppContainer.vue'
 export { default as ActionButton } from './ActionButton.vue'
 export { default as CustomPage } from './CustomPage.vue'
 export { default as FullStorageWarning } from './FullStorageWarning.vue'
@@ -17,5 +19,3 @@ export { default as UsageStatus } from './UsageStatus.vue'
 export { default as UsageStatusTemplate } from './UsageStatusTemplate.vue'
 export { default as WarningMessage } from './WarningMessage.vue'
 export { default as WarningMessageTemplate } from './WarningMessageTemplate.vue'
-export { default as AppSection } from './AppSection.vue'
-export { default as AppContainer } from './AppContainer.vue'
diff --git a/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue b/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
index 2146dcb2..70c88f54 100644
--- a/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
+++ b/web-app/packages/lib/src/modules/dashboard/components/DashboardFullStorageWarningRow.vue
@@ -5,9 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-row v-if="usage > 90">
-    <slot :usage="usage" :username="loggedUser.username" />
-  </v-row>
+  <slot v-if="usage > 90" :usage="usage" />
 </template>
 
 <script lang="ts">
@@ -19,14 +17,14 @@ import { useUserStore } from '@/modules/user/store'
 export default defineComponent({
   name: 'DashboardFullStorageWarningRow',
   computed: {
-    ...mapState(useUserStore, ['loggedUser']),
-
+    ...mapState(useUserStore, ['currentWorkspace']),
     usage() {
       return Math.floor(
-        (this.loggedUser?.disk_usage / this.loggedUser?.storage) * 100
+        (this.currentWorkspace?.disk_usage / this.currentWorkspace?.storage) *
+          100
       )
     }
-  }
+  },
 })
 </script>
 
diff --git a/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue b/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
index d3dffd75..2d918bc9 100644
--- a/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/dashboard/views/DashboardViewTemplate.vue
@@ -6,9 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div>
-    <app-container>
-      <slot name="usageInfo" />
-    </app-container>
+    <slot name="usageInfo" />
     <slot name="content"></slot>
     <dashboard-footer />
   </div>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
index 82d5f336..5ca58d7f 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     }"
   >
     <template #header>
-      <h3 class="font-semibold text-xs text-color">Access requests</h3>
+      <h3 class="font-semibold text-xs text-color m-0">Access requests</h3>
     </template>
     <template #list="slotProps">
       <template v-for="item in slotProps.items" :key="item.id">
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
index 01b79124..6080448c 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           :pt="ptColumn"
         >
           <template #body="slotProps">
-            <p class="font-semibold text-sm">
+            <p class="font-semibold text-sm mb-1">
               {{ slotProps.data.name
               }}<PTag
                 v-if="slotProps.data.access.public"
@@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 value: $filters.datetime(slotProps.data.updated),
                 pt: { root: { 'data-cy': 'project-form-updated' } }
               }"
-              class="text-color-secondary text-xs"
+              class="text-color-secondary text-xs mt-0"
             >
               Updated {{ $filters.timediff(slotProps.data.updated) }}
             </p>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
index 96f34d7d..14985ca8 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTableDataLoader.vue
@@ -13,10 +13,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       @fetch-projects="fetchProjects"
     >
       <template #empty>
-        <div class="flex flex-column align-items-center p-6 text-center">
+        <div class="flex flex-column align-items-center p-4 text-center">
           <img src="@/assets/map-circle.svg" alt="No projects" />
           <p class="font-semibold p-4">There are currently no projects.</p>
-          <p class="text-sm opacity-80">You don’t have got any projects yet.</p>
+          <p class="text-sm opacity-80 m-0">
+            You don’t have got any projects yet.
+          </p>
           <template v-if="canCreateProject">
             <p class="text-sm opacity-80 pb-4">Please create new project.</p>
             <PButton @click="newProjectDialog">Create new project</PButton>
diff --git a/web-app/packages/lib/src/modules/user/types.ts b/web-app/packages/lib/src/modules/user/types.ts
index e43722ee..5aec9bce 100644
--- a/web-app/packages/lib/src/modules/user/types.ts
+++ b/web-app/packages/lib/src/modules/user/types.ts
@@ -28,14 +28,12 @@ export interface ResetPasswordData {
 
 /* eslint-disable camelcase */
 export interface UserProfileResponse {
-  disk_usage: number
   first_name: string
   has_project: boolean
   last_name: string
   name: string
   receive_notifications: boolean
   registration_date: string
-  storage: number
 }
 
 export interface UserResponse {
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index 73b33339..ca29a8da 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -2895,10 +2895,10 @@ primeflex@^3.3.1:
   resolved "https://registry.yarnpkg.com/primeflex/-/primeflex-3.3.1.tgz#361dddf6eb5db50d733e4cddd4b6e376a3d7bd68"
   integrity sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==
 
-primevue@^3.42.0:
-  version "3.42.0"
-  resolved "https://registry.yarnpkg.com/primevue/-/primevue-3.42.0.tgz#17b44f6c85c48b44cacd43a76142a59ebf8bad4f"
-  integrity sha512-vY/nHBInl/k2MFfgx+5dGI3tH1P6OmO2Oj6eOLwtHk000yopPxLBUP/enALoElriy5EaPzfv02upOrsQqd+nJA==
+primevue@^3.43.0:
+  version "3.43.0"
+  resolved "https://registry.yarnpkg.com/primevue/-/primevue-3.43.0.tgz#bee115cd9a8324106d0a66078eb82c37b9118693"
+  integrity sha512-iW2gEbM79v5RzRYIrg010fN1DRr5CIRdMsVMG3pBUCq0rzUGnm/hlzJ9ThDZyJrA0/tEKByAo/Pra56s5PnvqQ==
 
 punycode@^2.1.0:
   version "2.3.0"