Redesign project detail files

web-app/packages/app/components.d.ts

@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PDivider: typeof import('primevue/divider')['default']
+    PTabPanel: typeof import('primevue/tabpanel')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VApp: typeof import('vuetify/components')['VApp']

web-app/packages/app/package.json

@@ -38,7 +38,7 @@
     "vue": "^3.3.8",
     "vue-i18n": "^9.7.1",
     "vue-meta": "^3.0.0-alpha.10",
-    "vue-router": "^4.1.6",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "~2.20.0",
     "vuetify": "3.4.3"
   }

web-app/packages/app/src/App.vue

@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         'col-12',
         'min-h-full',
         'overflow-auto',
-        drawer && !isOverlay && 'xl:col-offset-2 xl:col-10'
+        drawer && !isUnderOverlayBreakpoint && 'xl:col-offset-2 xl:col-10'
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
@@ -37,6 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </div>
         </transition>
       </router-view>
+      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
@@ -93,7 +94,7 @@ export default defineComponent({
     ...mapState(useInstanceStore, ['pingData']),
     ...mapState(useAppStore, ['serverError']),
     ...mapState(useUserStore, ['loggedUser']),
-    ...mapState(useLayoutStore, ['drawer', 'isOverlay']),
+    ...mapState(useLayoutStore, ['drawer', 'isUnderOverlayBreakpoint']),
 
     error() {
       return this.serverError

web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <project-settings-view-template
+  Hopaa
+  <!-- <project-settings-view-template
     :namespace="namespace"
     :projectName="projectName"
     :asAdmin="asAdmin"
@@ -18,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @save-project="saveProject(...arguments)"
       />
     </template>
-  </project-settings-view-template>
+  </project-settings-view-template> -->
 </template>
 
 <script lang="ts">

web-app/packages/app/src/modules/project/views/ProjectView.vue

@@ -59,7 +59,7 @@ export default defineComponent({
         namespace: props.namespace,
         project: props.projectName
       }
-      const dialog = { maxWidth: 580, persistent: true }
+      const dialog = { maxWidth: 580, persistent: true, header: 'Clone project' }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({

web-app/packages/app/src/router.ts

@@ -5,7 +5,6 @@
 import {
   ChangePasswordView,
   FileBrowserView,
-  FileDetailView,
   FileVersionDetailView,
   ProjectVersionsView,
   VersionDetailView,
@@ -130,6 +129,23 @@ export const createRouter = (pinia: Pinia) => {
           }
         ]
       },
+      /** Redirect of unused /blob path to /tree */
+      {
+        path: '/projects/:namespace/:projectName/blob/:location?',
+        name: 'blob',
+        component: NotFoundView,
+        props: true,
+        meta: { public: true },
+        beforeEnter: (to, from, next) => {
+          next({
+            path: `/projects/${to.params.namespace}/${
+              to.params.projectName
+            }/tree${from.params.location ? `/${from.params.location}` : ''}`,
+            query: { file_path: to.params.location }
+          })
+          return
+        }
+      },
       {
         path: '/projects/:namespace/:projectName',
         name: 'project',
@@ -141,17 +157,14 @@ export const createRouter = (pinia: Pinia) => {
         props: {
           default: true
         },
+        meta: {
+          title: 'Projects'
+        },
         redirect: { name: 'project-tree' },
+
         children: [
           {
-            path: 'blob/:location*',
-            name: 'blob',
-            component: FileDetailView,
-            props: true,
-            meta: { public: true }
-          },
-          {
-            path: 'tree/:location*',
+            path: 'tree/:location?',
             name: 'project-tree',
             component: FileBrowserView,
             props: true,
@@ -170,19 +183,35 @@ export const createRouter = (pinia: Pinia) => {
             props: true
           },
           {
-            path: 'history/:version_id?',
+            path: 'history/:version_id',
             name: 'project-versions-detail',
             component: VersionDetailView,
             props: true
           },
           {
-            path: 'history/:version_id?/:path?',
+            path: 'history/:version_id/:path',
             name: 'file-version-detail',
             component: FileVersionDetailView,
             props: true,
             meta: { public: true }
           }
-        ]
+        ].map((child) => ({
+          ...child,
+          beforeEnter: (to, from, next) => {
+            // added project name to matched route
+            to.matched = to.matched.map((route) => ({
+              ...route,
+              meta: {
+                ...route.meta,
+                title:
+                  route.name === to.name
+                    ? (to.params.projectName as string)
+                    : route.meta.title
+              }
+            }))
+            next()
+          }
+        }))
       },
       {
         path: '/:pathMatch(.*)*',

web-app/packages/lib/.eslintrc.cjs

@@ -21,6 +21,6 @@ module.exports = {
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',
     'vue/no-multiple-template-root': 'off',
-    'vue/no-v-model-argument': 'off',
+    'vue/no-v-model-argument': 'off'
   }
 }

web-app/packages/lib/components.d.ts

@@ -15,11 +15,17 @@ declare module 'vue' {
     PDataView: typeof import('primevue/dataview')['default']
     PDialog: typeof import('primevue/dialog')['default']
     PDropdown: typeof import('primevue/dropdown')['default']
+    PImage: typeof import('primevue/image')['default']
+    PInlineMessage: typeof import('primevue/inlinemessage')['default']
     PInputText: typeof import('primevue/inputtext')['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']
+    PPanel: typeof import('primevue/panel')['default']
+    PSidebar: typeof import('primevue/sidebar')['default']
+    PTabPanel: typeof import('primevue/tabpanel')['default']
+    PTabView: typeof import('primevue/tabview')['default']
     PTag: typeof import('primevue/tag')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -46,20 +52,13 @@ declare module 'vue' {
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']
-    VMenu: typeof import('vuetify/components')['VMenu']
-    VPagination: typeof import('vuetify/components')['VPagination']
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VRow: typeof import('vuetify/components')['VRow']
     VSelect: typeof import('vuetify/components')['VSelect']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
-    VTab: typeof import('vuetify/components')['VTab']
-    VTabs: typeof import('vuetify/components')['VTabs']
-    VTextarea: typeof import('vuetify/components')['VTextarea']
     VTextField: typeof import('vuetify/components')['VTextField']
-    VToolbar: typeof import('vuetify/components')['VToolbar']
-    VToolbarTitle: typeof import('vuetify/components')['VToolbarTitle']
     VTooltip: typeof import('vuetify/components')['VTooltip']
   }
 }

web-app/packages/lib/package.json

@@ -48,7 +48,7 @@
     "primevue": "^3.43.0",
     "universal-cookie": "^4.0.4",
     "vue": "^3.3.8",
-    "vue-router": "^4.1.6",
+    "vue-router": "4.2.5",
     "vue-tabler-icons": "~2.20.0",
     "vuetify": "^3.4.3"
   },

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss

@@ -7,4 +7,15 @@ h4,
 h5,
 h6 {
   color: $primaryDarkColor;
+  font-weight: 600;
+}
+
+// Customization of infinite border of tabs using classes instead pt because, we want to have access to variables
+.p-tabview-nav-content {
+  border: $tabviewNavBorder;
+  border-width: $tabviewNavBorderWidth;
+}
+
+.text-color-forest {
+  color: $primaryDarkColor;
 }

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss

@@ -79,7 +79,7 @@ $colors: (
     --content-padding:#{$panelContentPadding};
     --inline-spacing:#{$inlineSpacing};
     --border-radius:#{$borderRadius};
-    --surface-ground: #EFF5F3;
+    --surface-ground: #{map-get($map: $colors, $key: light-green)};
     --surface-section:#ffffff;
     --surface-card:#ffffff;
     --surface-overlay:#ffffff;
@@ -94,5 +94,8 @@ $colors: (
     // TODO: use primary-classes primary-100 ... ??
     --light-green-color: #{map-get($colors, "light-green")};
     --deep-ocean-color: #{map-get($colors, "light-ocean")};
+    --negative-color: #{map-get($colors, "negative")};
+    --warning-color: #{map-get($colors, "warning")};
+    --positive-color: #{map-get($colors, "positive")};
     color-scheme: light;
 }

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_button.scss

@@ -20,7 +20,7 @@ $buttonTextColor: $primaryDarkColor;
 
 /// Border of a button
 /// @group button
-$buttonBorder: 1px solid $primaryColor;
+$buttonBorder: 2px solid $primaryColor;
 
 /// Background of a button in hover state
 /// @group button

web-app/packages/lib/src/common/components/AppContainer.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div class="app-container mx-auto py-4 px-4 xl:px-0">
+  <div class="app-container mx-auto py-3 px-4 xl:px-0">
     <slot></slot>
   </div>
 </template>

web-app/packages/lib/src/common/components/AppMenu.vue

@@ -0,0 +1,39 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <div>
+    <PButton
+      severity="secondary"
+      text
+      :icon="icon"
+      @click="toggleMenu"
+      aria-haspopup="true"
+      aria-controls="app-menu"
+      class="text-2xl"
+    />
+    <PMenu ref="menu" id="app-menu" :model="items" :popup="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
+
+withDefaults(
+  defineProps<{
+    items: MenuItem[]
+    icon: string
+  }>(),
+  { icon: 'ti ti-sort-descending' }
+)
+
+const menu = ref<{ toggle: (event: Event) => void }>()
+
+function toggleMenu(event) {
+  menu.value.toggle(event)
+}
+</script>

web-app/packages/lib/src/common/components/AppPanelToggleable.vue

@@ -0,0 +1,51 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <PPanel
+    toggleable
+    v-bind="$props"
+    :pt="{
+      header(options) {
+        return {
+          class: [
+            'surface-section border-none p-4',
+            // Toggle border radius by open / closed panel
+            options.state.d_collapsed
+              ? 'border-round-2xl'
+              : 'border-round-top-2xl'
+          ]
+        }
+      },
+      content: {
+        class: 'border-none border-round-bottom-2xl p-4 pt-2'
+      }
+    }"
+  >
+    <template #header>
+      <h3 class="text-color-forest font-semibold m-0">
+        <slot name="header"></slot>
+      </h3>
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+    <template #icons>
+      <slot name="icons"></slot>
+    </template>
+    <slot></slot>
+    <template #togglericon="{ collapsed }">
+      <i
+        :class="[
+          'font-semibold text-color-forest ti',
+          collapsed ? 'ti-chevron-down' : 'ti-chevron-up'
+        ]"
+      ></i>
+    </template>
+  </PPanel>
+</template>
+
+<script lang="ts" setup></script>