New: Migrated Blob & Tree APIs

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
         { "allowWholeFile": true }
       ],
     "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }], // will only ignore variables that start with an underscore _
+    "@typescript-eslint/no-inferrable-types": "off", // this enforces the removal of the type declarations for variables that are initialized with a value (e.g. let foo: string = "foo")
     "vue/multi-word-component-names": "off"
   },
 }

package.json

@@ -13,7 +13,7 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@coscine/api-client": "^3.0.0",
+    "@coscine/api-client": "^3.1.0",
     "@coscine/form-generator": "^3.2.2",
     "@dynamic-mapper/mapper": "^1.10.2",
     "@pinia/testing": "^0.1.2",
@@ -92,6 +92,7 @@
     "vite": "^4.3.9",
     "vite-aliases": "^0.11.2",
     "vite-plugin-node-polyfills": "^0.9.0",
+    "vite-plugin-rewrite-all": "^1.0.1",
     "vite-plugin-windicss": "^1.9.0",
     "vitest": "^0.32.2",
     "vue-template-compiler": "^2.7.14"

src/components/coscine/CoscineFormGroup.vue

 <template>
+  <b-container class="mb-3 p-0 w-100">
+    <b-row no-gutters>
       <b-form-group
+        class="w-100 m-0"
         :class="mandatory === true ? 'mandatory' : ''"
         :label-for="labelFor"
         :label-cols-sm="labelColsSm"
@@ -10,7 +13,10 @@
           <template #loading>
             <b-skeleton :type="type" animation="fade"></b-skeleton>
           </template>
+
+          <div class="flex-center">
             <slot />
+          </div>
         </b-skeleton-wrapper>
 
         <!-- Label Template -->
@@ -34,12 +40,16 @@
             </b-popover>
           </div>
         </template>
-
+      </b-form-group>
+    </b-row>
+    <b-row no-gutters>
+      <b-col :sm="labelColsSm" />
       <!-- Hint Text -->
-    <div id="hint" class="small text-muted">
+      <b-col id="hint" class="small text-muted pl-1" align-self="end">
         <slot name="hint" />
-    </div>
-  </b-form-group>
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script lang="ts">
@@ -90,4 +100,18 @@ export default defineComponent({
   content: " *";
   color: #a70619;
 }
+.flex-center {
+  /* Needed to center the content vertically */
+  display: flex;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+#hint {
+  position: relative;
+}
+.form-row :deep(.col) {
+  /* Removes the right padding from the inner col, making it go until the end */
+  padding: 0 0 0 5px;
+}
 </style>

src/components/elements/BreadCrumbs.vue

 <template>
   <b-breadcrumb class="breadcrumbs">
+    <!-- Home -->
     <b-breadcrumb-item :to="{ name: 'home' }" :active="crumbs.length === 0">
       <b-icon v-if="crumbs.length === 0" icon="house-fill" aria-hidden="true" />
       <b-icon v-else icon="house" aria-hidden="true" />
       {{ $t(`breadcrumbs.home`) }}
     </b-breadcrumb-item>
+
+    <!-- Rest -->
     <b-breadcrumb-item
       v-for="(crumb, id) in crumbs"
       :key="id"
@@ -29,6 +32,7 @@ import type {
   ProjectDto,
   ResourceDto,
 } from "@coscine/api-client/dist/types/Coscine.Api/api";
+import type { RouteRecord } from "vue-router";
 
 interface RouteLink {
   to: RawLocation;
@@ -46,72 +50,14 @@ export default defineComponent({
 
   computed: {
     crumbs(): RouteLink[] {
-      let pathArray = this.$route.path.split("/");
-      pathArray = pathArray.filter(
-        (path) =>
-          path.trim() !== "" && path.trim() !== "p" && path.trim() !== "r"
-      );
-      // Deal with Root Path inclusion
-      if (pathArray.length === 1) {
-        pathArray.unshift("");
-      }
-      const breadcrumbs = pathArray.reduce(
-        (breadcrumbArray: RouteLink[], path, idx) => {
-          // Deal with Root Path inclusion
-          if (path === "") {
-            return breadcrumbArray;
-          }
-          breadcrumbArray.push({
-            to: {
-              name: this.$route.matched[idx].name
-                ? this.$route.matched[idx].name
-                : this.$route.matched[idx].meta.default,
-            },
-            text:
-              this.$route.matched[idx] &&
-              this.$route.matched[idx].meta &&
-              this.$route.matched[idx].meta.breadCrumb
-                ? this.$t(
-                    `breadcrumbs.${this.$route.matched[idx].meta.breadCrumb}`,
-                    {
-                      path: path,
-                      projectName: this.project
-                        ? this.project.displayName
-                        : path,
-                      resourceName:
-                        this.resource && this.resource.type
-                          ? `${this.$t(
-                              "resourceTypes." +
-                                this.resource.type.specificType +
-                                ".displayName"
-                            )}: ${this.resource.displayName}`
-                          : path,
-                    }
-                  ).toString()
-                : path,
-          });
-          return breadcrumbArray;
-        },
-        []
-      );
-      if (this.project && this.parentProjects) {
-        const parentBreadCrumbs = this.parentProjects.map((parentProject) => {
-          return {
-            to: {
-              name: "project-page",
-              params: { slug: parentProject.slug },
-            },
-            text: this.$t(`breadcrumbs.project.page`, {
-              projectName: parentProject.displayName,
-            }).toString(),
-          } as RouteLink;
-        });
-        breadcrumbs.unshift(...parentBreadCrumbs);
-      }
-      if (breadcrumbs.length > 0) {
-        breadcrumbs[breadcrumbs.length - 1].active = true;
-      }
-      return breadcrumbs;
+      // Get the relevant path from the route (ignores everything after "/-")
+      const relevantPath = this.$route.path.split("/-")[0];
+      // Filter out empty paths and the project and resource path
+      let pathArray = this.filterPaths(relevantPath.split("/"));
+      pathArray = this.includeRootPath(pathArray);
+      let breadcrumbs = this.generateRouteLinks(pathArray);
+      breadcrumbs = this.addParentProjects(breadcrumbs);
+      return this.markLastActive(breadcrumbs);
     },
 
     parentProjects(): ProjectDto[] | null {
@@ -155,7 +101,11 @@ export default defineComponent({
   },
 
   methods: {
-    setDocumentTitle(title = "") {
+    /**
+     * Set the document title.
+     * @param {string} [title=""] - The title to set. If empty, the default title will be used.
+     */
+    setDocumentTitle(title: string = "") {
       if (title.trim() !== "") {
         document.title = this.$t("title.modified", {
           title: title,
@@ -164,6 +114,126 @@ export default defineComponent({
         document.title = this.$t("title.default").toString();
       }
     },
+
+    /**
+     * Filters out unwanted paths from the given array.
+     * @param {string[]} paths - The array of paths.
+     * @returns {string[]} - The filtered array of paths.
+     */
+    filterPaths(paths: string[]): string[] {
+      return paths.filter(
+        (path) =>
+          path.trim() !== "" &&
+          path.trim() !== "p" &&
+          path.trim() !== "r" &&
+          path.trim() !== "-"
+      );
+    },
+
+    /**
+     * Adds a root path if the path array contains only one element.
+     * @param {string[]} pathArray - The array of paths.
+     * @returns {string[]} - The array of paths possibly including the root.
+     */
+    includeRootPath(pathArray: string[]): string[] {
+      if (pathArray.length === 1) {
+        pathArray.unshift("");
+      }
+      return pathArray;
+    },
+
+    /**
+     * Generates RouteLink objects based on the path array.
+     * @param {string[]} pathArray - The array of paths.
+     * @returns {RouteLink[]} - The array of RouteLink objects.
+     */
+    generateRouteLinks(pathArray: string[]): RouteLink[] {
+      return pathArray.reduce((breadcrumbArray: RouteLink[], path, idx) => {
+        if (path === "") return breadcrumbArray;
+        const routeMatched = this.$route.matched[idx];
+        if (routeMatched) {
+          breadcrumbArray.push(this.generateRouteLink(routeMatched, path));
+        }
+        return breadcrumbArray;
+      }, []);
+    },
+
+    /**
+     * Generates a single RouteLink object.
+     * @param {RouteRecord} routeMatched - The matched route record.
+     * @param {string} path - The path segment for this breadcrumb.
+     * @returns {RouteLink} - The RouteLink object.
+     */
+    generateRouteLink(routeMatched: RouteRecord, path: string): RouteLink {
+      return {
+        to: {
+          name: routeMatched.name
+            ? routeMatched.name
+            : routeMatched.meta.default,
+        },
+        text: routeMatched?.meta?.breadCrumb
+          ? this.$t(`breadcrumbs.${routeMatched.meta.breadCrumb}`, {
+              path: path,
+              projectName: this.project ? this.project.displayName : path,
+              resourceName: this.resource ? this.resourceDisplayName() : path,
+            }).toString()
+          : path,
+      } as RouteLink;
+    },
+
+    /**
+     * Retrieves the display name of the resource if available.
+     * @returns {string} - The display name of the resource or an empty string.
+     */
+    resourceDisplayName(): string {
+      if (this.resource?.displayName) {
+        if (this.resource.type?.specificType) {
+          // e.g. "RWTH-RDS-S3: My Resource Name"
+          return `${this.$t(
+            "resourceTypes." + this.resource.type.specificType + ".displayName"
+          )}: ${this.resource.displayName}`;
+        }
+        return this.resource.displayName;
+      }
+      return "";
+    },
+
+    /**
+     * Adds parent projects to the breadcrumb array.
+     * @param {RouteLink[]} breadcrumbs - The existing array of RouteLink objects.
+     * @returns {RouteLink[]} - The updated array of RouteLink objects.
+     */
+    addParentProjects(breadcrumbs: RouteLink[]): RouteLink[] {
+      if (this.project && this.parentProjects) {
+        const parentBreadCrumbs: RouteLink[] = this.parentProjects.map(
+          (parentProject) => {
+            return {
+              to: {
+                name: "project-page",
+                params: { slug: parentProject.slug },
+              },
+              text: this.$t(`breadcrumbs.project.page`, {
+                projectName: parentProject.displayName,
+              }).toString(),
+            } as RouteLink;
+          }
+        );
+        breadcrumbs.unshift(...parentBreadCrumbs);
+      }
+      return breadcrumbs;
+    },
+
+    /**
+     * Marks the last breadcrumb as active.
+     * @param {RouteLink[]} breadcrumbs - The existing array of RouteLink objects.
+     * @returns {RouteLink[]} - The updated array of RouteLink objects.
+     */
+    markLastActive(breadcrumbs: RouteLink[]): RouteLink[] {
+      if (breadcrumbs.length > 0) {
+        breadcrumbs[breadcrumbs.length - 1].active = true;
+      }
+      return breadcrumbs;
+    },
   },
 });
 </script>

src/components/elements/SidebarMenu.vue

@@ -166,6 +166,7 @@ export default defineComponent({
                   params: {
                     slug: this.project ? this.project.slug : undefined,
                     guid: resource.id,
+                    dirTrail: "",
                   },
                 },
                 icon: "bi bi-archive",

src/data/mockup/metadata/applicationProfile.ts

-export const radarApplicationProfile = `[{"@id":"https://purl.org/coscine/ap/radar/","@graph":[{"@id":"https://purl.org/coscine/ap/radar#subject","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/subject"}],"http://www.w3.org/ns/shacl#order":[{"@value":"3","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#class":[{"@id":"http://www.dfg.de/dfg_profil/gremien/fachkollegien/faecher/"}],"http://www.w3.org/ns/shacl#name":[{"@language":"de","@value":"Fachrichtung"},{"@language":"en","@value":"Subject Area"}]},{"@id":"https://purl.org/coscine/ap/radar#created","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/created"}],"http://www.w3.org/ns/shacl#order":[{"@value":"2","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#minCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"en","@value":"Production Date"},{"@language":"de","@value":"Erstelldatum"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#date"}],"http://www.w3.org/ns/shacl#defaultValue":[{"@value":"{TODAY}"}]},{"@id":"https://purl.org/coscine/ap/radar#creator","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/creator"}],"http://www.w3.org/ns/shacl#order":[{"@value":"0","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#minCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"de","@value":"Ersteller"},{"@language":"en","@value":"Creator"}],"http://www.w3.org/ns/shacl#minLength":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#string"}],"http://www.w3.org/ns/shacl#defaultValue":[{"@value":"{ME}"}]},{"@id":"https://purl.org/coscine/ap/radar#rights","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/rights"}],"http://www.w3.org/ns/shacl#order":[{"@value":"5","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"en","@value":"Rights"},{"@language":"de","@value":"Berechtigung"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#string"}]},{"@id":"https://purl.org/coscine/ap/radar#rightsHolder","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/rightsHolder"}],"http://www.w3.org/ns/shacl#order":[{"@value":"6","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"en","@value":"Rightsholder"},{"@language":"de","@value":"Rechteinhaber"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#string"}]},{"@id":"https://purl.org/coscine/ap/radar#title","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/title"}],"http://www.w3.org/ns/shacl#order":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#minCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"de","@value":"Titel"},{"@language":"en","@value":"Title"}],"http://www.w3.org/ns/shacl#minLength":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#string"}]},{"@id":"https://purl.org/coscine/ap/radar#type","http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/type"}],"http://www.w3.org/ns/shacl#order":[{"@value":"4","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#class":[{"@id":"http://purl.org/dc/dcmitype/"}],"http://www.w3.org/ns/shacl#name":[{"@language":"en","@value":"Resource"},{"@language":"de","@value":"Ressource"}]},{"@id":"https://purl.org/coscine/ap/radar/","@type":["http://www.w3.org/ns/shacl#NodeShape"],"http://purl.org/dc/terms/license":[{"@id":"http://spdx.org/licenses/MIT"}],"http://purl.org/dc/terms/rights":[{"@value":"Copyright © 2020 IT Center, RWTH Aachen University"}],"http://www.w3.org/ns/shacl#targetClass":[{"@id":"https://purl.org/coscine/ap/radar/"}],"http://www.w3.org/ns/shacl#closed":[{"@value":"true","@type":"http://www.w3.org/2001/XMLSchema#boolean"}],"http://www.w3.org/ns/shacl#property":[{"@id":"https://purl.org/coscine/ap/radar#creator"},{"@id":"https://purl.org/coscine/ap/radar#rights"},{"@id":"https://purl.org/coscine/ap/radar#subject"},{"@id":"https://purl.org/coscine/ap/radar#created"},{"@id":"https://purl.org/coscine/ap/radar#type"},{"@id":"_:b8922734"},{"@id":"https://purl.org/coscine/ap/radar#rightsHolder"},{"@id":"https://purl.org/coscine/ap/radar#title"}],"http://purl.org/dc/terms/title":[{"@language":"en","@value":"radar application profile"}],"http://purl.org/dc/terms/publisher":[{"@id":"https://itc.rwth-aachen.de/"}],"http://purl.org/dc/terms/description":[{"@value":"The RADAR metadata schema v09 was created by the 2018 FIZ Karlsruhe - Leibniz-Institut fuer Informationsinfrastruktur GmbH and has been published under CC BY 4.0."}]},{"@id":"_:b8922734","http://www.w3.org/ns/shacl#path":[{"@id":"http://www.w3.org/1999/02/22-rdf-syntax-ns#type"}]}]}]`;
+export const baseApplicationProfile = `[{"@id":"_:b6482494","http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#string"}],"http://www.w3.org/ns/shacl#minCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#order":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"en","@value":"Creator"},{"@language":"de","@value":"Ersteller"}],"http://www.w3.org/ns/shacl#description":[{"@language":"de","@value":"Wer ist der Ersteller der Daten?"},{"@language":"en","@value":"Who is the creator of the data?"}],"http://www.w3.org/ns/shacl#defaultValue":[{"@value":"{ME}"}],"http://www.w3.org/ns/shacl#minLength":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/creator"}]},{"@id":"_:b6482495","http://www.w3.org/ns/shacl#description":[{"@language":"de","@value":"Von welchem Datentyp sind Ihre Daten?"},{"@language":"en","@value":"What type of data is your data?"}],"http://www.w3.org/ns/shacl#order":[{"@value":"4","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#class":[{"@id":"http://purl.org/dc/dcmitype/"}],"http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/type"}],"http://www.w3.org/ns/shacl#name":[{"@language":"de","@value":"Typ"},{"@language":"en","@value":"Type"}]},{"@id":"https://purl.org/coscine/ap/base/","http://purl.org/dc/terms/title":[{"@language":"en","@value":"Base Profile"},{"@language":"de","@value":"Basisprofil"}],"http://purl.org/dc/terms/creator":[{"@value":"Hanna Führ"}],"http://www.w3.org/ns/shacl#closed":[{"@value":"false","@type":"http://www.w3.org/2001/XMLSchema#boolean"}],"@type":["http://www.w3.org/ns/shacl#NodeShape"],"http://www.w3.org/ns/shacl#targetClass":[{"@id":"https://purl.org/coscine/ap/base/"}],"http://www.w3.org/ns/shacl#property":[{"@id":"_:b6482493"},{"@id":"_:b6482496"},{"@id":"_:b6482494"},{"@id":"_:b6482497"},{"@id":"_:b6482495"}],"http://purl.org/dc/terms/description":[{"@language":"de","@value":"Basisprofil, das Grundbausteine enthält"},{"@language":"en","@value":"Base application profile, which contains the basic building blocks"}],"http://purl.org/dc/terms/created":[{"@value":"2023-02-06","@type":"http://www.w3.org/2001/XMLSchema#date"}],"http://purl.org/dc/terms/license":[{"@value":"https://spdx.org/licenses/CC-BY-4.0.html"}]},{"@id":"_:b6482497","http://www.w3.org/ns/shacl#name":[{"@language":"en","@value":"Creation Date"},{"@language":"de","@value":"Erstellungsdatum"}],"http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/created"}],"http://www.w3.org/ns/shacl#defaultValue":[{"@value":"{TODAY}"}],"http://www.w3.org/ns/shacl#minCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#date"}],"http://www.w3.org/ns/shacl#description":[{"@language":"en","@value":"When was the data created?"},{"@language":"de","@value":"Wann wurden die Daten erstellt?"}],"http://www.w3.org/ns/shacl#order":[{"@value":"2","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#maxCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}]},{"@id":"_:b6482493","http://www.w3.org/ns/shacl#description":[{"@language":"en","@value":"Which subject does your data belong to?"},{"@language":"de","@value":"Welcher Fachrichtung gehören Ihre Daten an?"}],"http://www.w3.org/ns/shacl#class":[{"@id":"http://www.dfg.de/dfg_profil/gremien/fachkollegien/faecher/"}],"http://www.w3.org/ns/shacl#order":[{"@value":"3","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#name":[{"@language":"de","@value":"Fachrichtung"},{"@language":"en","@value":"Subject Area"}],"http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/subject"}]},{"@id":"_:b6482496","http://www.w3.org/ns/shacl#name":[{"@language":"de","@value":"Titel"},{"@language":"en","@value":"Title"}],"http://www.w3.org/ns/shacl#datatype":[{"@id":"http://www.w3.org/2001/XMLSchema#string"}],"http://www.w3.org/ns/shacl#minLength":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#order":[{"@value":"0","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#minCount":[{"@value":"1","@type":"http://www.w3.org/2001/XMLSchema#integer"}],"http://www.w3.org/ns/shacl#description":[{"@language":"en","@value":"Enter a title to describe your data."},{"@language":"de","@value":"Geben Sie einen Titel an, um Ihre Daten zu beschreiben."}],"http://www.w3.org/ns/shacl#path":[{"@id":"http://purl.org/dc/terms/title"}]}]`;
+export const baseApplicationProfileFormat = "application/ld+json";

src/data/mockup/responses/getMetadata.ts

-export const getMetadataResponse = {
-  data: {
-    metadataStorage: [
+import type {
+  FileDto,
+  MetadataDto,
+  TreeDataType,
+} from "@coscine/api-client/dist/types/Coscine.Api";
+
+export const getMetadataTreeResponse: MetadataDto[] = [
   {
-        "https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTesta":
-          '<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTesta> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <https://purl.org/coscine/ap/radar/> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTesta> <http://purl.org/dc/terms/created> "2022-02-25"^^<http://www.w3.org/2001/XMLSchema#date> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTesta> <http://purl.org/dc/terms/creator> "Benedikt Heinrichs"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTesta> <http://purl.org/dc/terms/title> "Test"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n',
+    version: "1693212042",
+    availableVersions: ["1693212042"],
+    definition:
+      '@base <https://purl.org/coscine/resources/4103cbea-ffa3-40a5-9e5c-b99cc16f0007/folder_1/folder_2/A.txt/@type=metadata&version=1693212042>.\r\n\r\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\r\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\r\n@prefix xsd: <http://www.w3.org/2001/XMLSchema#>.\r\n@prefix ns2: <http://purl.org/dc/terms/>.\r\n\r\n_:b8477997 ns2:created "2023-08-15"^^xsd:date;\r\n ns2:creator "Petar Hristov";\r\n ns2:title "Title inside Form Generator";\r\n a <https://purl.org/coscine/ap/base/>.\r\n',
+    format: "text/turtle",
+    path: "folder_1/folder_2/A.txt",
+    type: "Leaf" as TreeDataType.Leaf,
   },
   {
-        "https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTest":
-          '<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTest> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <https://purl.org/coscine/ap/radar/> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTest> <http://purl.org/dc/terms/created> "2021-12-09"^^<http://www.w3.org/2001/XMLSchema#date> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTest> <http://purl.org/dc/terms/creator> "Benedikt Heinrichs"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FTest> <http://purl.org/dc/terms/title> "Test"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n',
+    version: "1692777419",
+    availableVersions: ["1692777419"],
+    definition:
+      '@base <https://purl.org/coscine/resources/4103cbea-ffa3-40a5-9e5c-b99cc16f0007/file_1.txt/@type=metadata&version=1692777419>.\r\n\r\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\r\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\r\n@prefix xsd: <http://www.w3.org/2001/XMLSchema#>.\r\n@prefix ns2: <http://purl.org/dc/terms/>.\r\n\r\n_:b8425359 ns2:created "2023-08-18"^^xsd:date;\r\n ns2:creator "Petar Hristov";\r\n ns2:title "file_1";\r\n a <https://purl.org/coscine/ap/base/>.\r\n',
+    format: "text/turtle",
+    path: "file_1.txt",
+    type: "Leaf" as TreeDataType.Leaf,
   },
   {
-        "https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FcoolerEintrag":
-          '<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FcoolerEintrag> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <https://purl.org/coscine/ap/radar/> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FcoolerEintrag> <http://purl.org/dc/terms/created> "2022-03-07"^^<http://www.w3.org/2001/XMLSchema#date> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FcoolerEintrag> <http://purl.org/dc/terms/creator> "Benedikt Heinrichs"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2FcoolerEintrag> <http://purl.org/dc/terms/title> "test"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n',
-      },
-      {
-        "https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Freview":
-          '<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Freview> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <https://purl.org/coscine/ap/radar/> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Freview> <http://purl.org/dc/terms/created> "2022-03-10"^^<http://www.w3.org/2001/XMLSchema#date> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Freview> <http://purl.org/dc/terms/creator> "Benedikt Heinrichs"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Freview> <http://purl.org/dc/terms/title> "MyTest2"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n',
-      },
-      {
-        "https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Feawfaewf":
-          '<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Feawfaewf> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <https://purl.org/coscine/ap/radar/> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Feawfaewf> <http://purl.org/dc/terms/created> "2022-03-10"^^<http://www.w3.org/2001/XMLSchema#date> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Feawfaewf> <http://purl.org/dc/terms/creator> "Benedikt Heinrichs"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Feawfaewf> <http://purl.org/dc/terms/rights> "awer"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Feawfaewf> <http://purl.org/dc/terms/title> "awerawe"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n',
-      },
-      {
-        "https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Fw":
-          '<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Fw> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <https://purl.org/coscine/ap/radar/> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Fw> <http://purl.org/dc/terms/created> "2022-04-04"^^<http://www.w3.org/2001/XMLSchema#date> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Fw> <http://purl.org/dc/terms/creator> "Benedikt Heinrichs"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n<https://hdl.handle.net/21.11102/eeb8d803-46a1-49ba-a47c-81cd4f49cd65@path=%2Fw> <http://purl.org/dc/terms/title> "a"^^<http://www.w3.org/2001/XMLSchema#string> .\r\n',
-      },
+    version: "1692779210",
+    availableVersions: [
+      "1692340745",
+      "1692340906",
+      "1692340959",
+      "1692341031",
+      "1692779210",
     ],
-    fileStorage: [
-      {
-        Name: "Testa",
-        Path: "/Testa",
-        Size: 7,
-        Kind: "file",
-        Modified: null,
-        Created: null,
-        Provider: "linked",
-        IsFolder: false,
-        IsFile: true,
-        Action: {},
-      },
-      {
-        Name: "Test",
-        Path: "/Test",
-        Size: 18,
-        Kind: "file",
-        Modified: null,
-        Created: null,
-        Provider: "linked",
-        IsFolder: false,
-        IsFile: true,
-        Action: {},
+    definition:
+      '@base <https://purl.org/coscine/resources/4103cbea-ffa3-40a5-9e5c-b99cc16f0007/file_0.txt/@type=metadata&version=1692779210>.\r\n\r\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\r\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\r\n@prefix xsd: <http://www.w3.org/2001/XMLSchema#>.\r\n@prefix ns2: <http://purl.org/dc/terms/>.\r\n\r\n_:b8425361 ns2:created "2023-08-18"^^xsd:date;\r\n ns2:creator "Petar Hristov";\r\n ns2:title "Revised";\r\n a <https://purl.org/coscine/ap/base/>.\r\n',
+    format: "text/turtle",
+    path: "file_0.txt",
+    type: "Leaf" as TreeDataType.Leaf,
   },
   {
-        Name: "coolerEintrag",
-        Path: "/coolerEintrag",
-        Size: 14,
-        Kind: "file",
-        Modified: null,
-        Created: null,
-        Provider: "linked",
-        IsFolder: false,
-        IsFile: true,
-        Action: {},
+    version: "1693209938",
+    availableVersions: ["1693209938"],
+    definition:
+      '@base <https://purl.org/coscine/resources/4103cbea-ffa3-40a5-9e5c-b99cc16f0007/my_folder/file_of_folder.txt/@type=metadata&version=1693209938>.\r\n\r\n@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>.\r\n@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>.\r\n@prefix xsd: <http://www.w3.org/2001/XMLSchema#>.\r\n@prefix ns2: <http://purl.org/dc/terms/>.\r\n\r\n_:b8477996 ns2:created "2023-08-15"^^xsd:date;\r\n ns2:creator "Petar Hristov";\r\n ns2:title "From Insomnia";\r\n a <https://purl.org/coscine/ap/base/>.\r\n',
+    format: "text/turtle",
+    path: "my_folder/file_of_folder.txt",
+    type: "Leaf" as TreeDataType.Leaf,
   },
+];
+export const getFileTreeResponse: FileDto[] = [
   {
-        Name: "review",
-        Path: "/review",
-        Size: 14,
-        Kind: "file",
-        Modified: null,
-        Created: null,
-        Provider: "linked",
-        IsFolder: false,
-        IsFile: true,
-        Action: {},
+    parentDirectory: "",
+    name: "folder_1",
+    size: 0,
+    creationDate: "2023-09-01T16:57:48.2525218+02:00",
+    changeDate: "2023-09-01T16:57:48.2525225+02:00",
+    path: "folder_1/",
+    type: "Tree" as TreeDataType.Tree,
   },
   {
-        Name: "eawfaewf",
-        Path: "/eawfaewf",
-        Size: 14,
-        Kind: "file",
-        Modified: null,
-        Created: null,
-        Provider: "linked",
-        IsFolder: false,
-        IsFile: true,
-        Action: {},
+    parentDirectory: "",
+    name: "my_folder",
+    size: 0,
+    creationDate: "2023-09-01T16:57:48.2525245+02:00",
+    changeDate: "2023-09-01T16:57:48.2525249+02:00",
+    path: "my_folder/",
+    type: "Tree" as TreeDataType.Tree,
   },
   {
-        Name: "w",
-        Path: "/w",
-        Size: 9,
-        Kind: "file",
-        Modified: null,
-        Created: null,
-        Provider: "linked",
-        IsFolder: false,
-        IsFile: true,
-        Action: {},
-      },
-    ],
+    parentDirectory: "",
+    name: "file_0.txt",
+    extension: "txt",
+    size: 2513352,
+    creationDate: "2023-08-23T10:27:20.062+02:00",
+    changeDate: "2023-08-23T10:27:20.062+02:00",
+    path: "file_0.txt",
+    type: "Leaf" as TreeDataType.Leaf,
   },
-};
+];

src/data/mockup/testResource.ts

@@ -3,7 +3,10 @@ import type {
   ResourceState,
 } from "@/modules/resource/types";
 import { parseRDFDefinition } from "@/modules/resource/utils/linkedData";
-import { radarApplicationProfile } from "./metadata/applicationProfile";
+import {
+  baseApplicationProfile,
+  baseApplicationProfileFormat,
+} from "./metadata/applicationProfile";
 import { radarFixedValues } from "./metadata/fixedValues";
 import { testDiscipline, getTestUser } from "./testUser";
 import type {
@@ -40,10 +43,10 @@ export const testResourceType: ResourceTypeInformationDto = {
 
 export const getTestResource: () => Promise<VisitedResourceObject> =
   async () => {
-    const apUrl = "https://purl.org/coscine/ap/radar/";
+    const apUrl = "https://purl.org/coscine/ap/base/";
     const ap = await parseRDFDefinition(
-      radarApplicationProfile,
-      "application/ld+json",
+      baseApplicationProfile,
+      baseApplicationProfileFormat,
       apUrl
     );
     const resourceObject: VisitedResourceObject = {

src/mapping/tree.ts

+import { MapperConfiguration, MappingPair } from "@dynamic-mapper/mapper";
+import { v4 as uuidv4 } from "uuid";
+
+import type {
+  TreeDataType,
+  FileDto,
+} from "@coscine/api-client/dist/types/Coscine.Api";
+import type {
+  FileInformation,
+  FolderInformation,
+} from "@/modules/resource/types";
+
+export const TreeDto2FileInformation = new MappingPair<
+  FileDto,
+  FileInformation
+>();
+
+export const TreeDto2FolderInformation = new MappingPair<
+  FileDto,
+  FolderInformation
+>();
+
+const configuration = new MapperConfiguration((cfg) => {
+  cfg.createMap(TreeDto2FileInformation, {
+    id: (opt) => opt.mapFrom((_) => uuidv4()),
+    name: (opt) => opt.mapFrom((dto) => dto.name ?? ""),
+    parentDirectory: (opt) => opt.mapFrom((dto) => dto.parentDirectory ?? ""),
+    path: (opt) => opt.mapFrom((dto) => dto.path ?? ""),
+    type: (opt) => opt.mapFrom((_) => "Leaf" as TreeDataType.Leaf),
+    isFolder: (opt) => opt.mapFrom((_) => false),
+    createdAt: (opt) => opt.mapFrom((dto) => dto.creationDate ?? undefined),
+    lastModified: (opt) => opt.mapFrom((dto) => dto.changeDate),
+    size: (opt) => opt.mapFrom((dto) => dto.size ?? 0),
+    version: (opt) => opt.mapFrom((_) => `${+new Date()}`),
+    metadata: (opt) => opt.mapFrom((_) => null), // Set outside of the mapper
+  });
+
+  cfg.createMap(TreeDto2FolderInformation, {
+    id: (opt) => opt.mapFrom((_) => uuidv4()),
+    name: (opt) => opt.mapFrom((dto) => dto.name ?? ""),
+    parentDirectory: (opt) => opt.mapFrom((dto) => dto.parentDirectory ?? ""),
+    path: (opt) => opt.mapFrom((dto) => dto.path ?? ""),
+    type: (opt) => opt.mapFrom((_) => "Tree" as TreeDataType.Tree),
+    isFolder: (opt) => opt.mapFrom((_) => true),
+    createdAt: (opt) => opt.mapFrom((dto) => dto.creationDate ?? undefined),
+    lastModified: (opt) => opt.mapFrom((dto) => dto.changeDate),
+    metadata: (opt) => opt.mapFrom((_) => null), // Set outside of the mapper
+  });
+});
+
+export const treeMapper = configuration.createMapper();

src/modules/project/pages/ProjectPage.vue

@@ -173,7 +173,7 @@ export default defineComponent({
     toResource(resource: ResourceDto): RawLocation {
       const route = {
         name: "resource-page",
-        params: { guid: resource.id },
+        params: { guid: resource.id, dirTrail: "" },
       } as RawLocation;
       return route;
     },

src/modules/resource/ResourceModule.vue

@@ -70,6 +70,11 @@ export default defineComponent({
     this.initialize();
   },
 
+  beforeDestroy() {
+    // Set current resource ID to null
+    this.resourceStore.currentId = null;
+  },
+
   methods: {
     async initialize() {
       await this.apiFetch(this.$router.currentRoute);

src/modules/resource/components/create-resource/ApplicationProfile.vue

@@ -28,7 +28,7 @@
       </template>
 
       <!-- Dropdown -->
-      <div class="d-flex align-items-center gap-2">
+      <div class="d-inline-flex align-items-center gap-2 w-100">
         <multiselect
           id="applicationProfiles"
           v-model="selectedApplicationProfile"
@@ -69,7 +69,7 @@
           <b-button
             variant="outline-primary"
             name="createAP"
-            class="d-flex justify-content-between align-items-center"
+            class="d-flex gap-2 justify-content-between align-items-center w-fit"
             @click="$bvModal.show('createAPModal')"
           >
             <b-icon icon="file-earmark-plus" aria-hidden="true" />

src/modules/resource/components/create-resource/ConfigurationSizeSlider.vue

@@ -4,6 +4,7 @@
       :mandatory="true"
       :label="$t('page.createResource.configuration.labels.size')"
     >
+      <div class="w-100">
         <!-- Slider -->
         <b-form-input
           id="slider"
@@ -22,6 +23,7 @@
             {{ $t("page.createResource.configuration.needMore") }}
           </router-link>
         </div>
+      </div>
     </CoscineFormGroup>
   </div>
 </template>

src/modules/resource/components/resource-page/FilesView.spec.ts

 /* Testing imports */
-import { createLocalVue, mount } from "@vue/test-utils";
+import { type Wrapper, createLocalVue, mount } from "@vue/test-utils";
 import { createTestingPinia } from "@pinia/testing";
 
 /* Vue i18n */
@@ -15,6 +15,8 @@ import { PiniaVuePlugin } from "pinia";
 
 /* Tested Component */
 import FilesView from "./FilesView.vue";
+import VueRouter from "vue-router";
+import { routes } from "@/router";
 
 import type Vue from "vue";
 
@@ -22,7 +24,10 @@ import { getTestUserState } from "@/data/mockup/testUser";
 import { getTestResourceState } from "@/data/mockup/testResource";
 import { testProjectState } from "@/data/mockup/testProject";
 import useResourceStore from "../../store";
-import { getMetadataResponse } from "@/data/mockup/responses/getMetadata";
+import {
+  getFileTreeResponse,
+  getMetadataTreeResponse,
+} from "@/data/mockup/responses/getMetadata";
 
 function sleep(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -31,10 +36,18 @@ function sleep(ms: number) {
 /* Create a local Vue instance */
 const localVue = createLocalVue();
 localVue.use(PiniaVuePlugin);
+localVue.use(VueRouter);
+const router = new VueRouter({ routes: routes });
 
-describe("FilesView.vue", () => {
-  /* Checks for local storage setting of columns */
-  test("testLocalStorageSetting", async () => {
+// Define the Vue instance type (computed properties)
+interface ResourcePageComponent extends Vue {
+  dirTrail: string;
+}
+
+describe("FilesView.vue", async () => {
+  let wrapper: Wrapper<ResourcePageComponent>;
+
+  // Create a mocked pinia instance with initial state
   const testingPinia = createTestingPinia({
     createSpy: vitest.fn,
     initialState: {
@@ -44,24 +57,35 @@ describe("FilesView.vue", () => {
     },
   });
 
+  // Mock the API calls
   const resourceStore = useResourceStore(testingPinia);
-    vi.mocked(resourceStore.getMetadata).mockReturnValue(
-      Promise.resolve(getMetadataResponse)
+  vi.mocked(resourceStore.getMetadataTree).mockReturnValue(
+    Promise.resolve(getMetadataTreeResponse)
+  );
+  vi.mocked(resourceStore.getFileTree).mockReturnValue(
+    Promise.resolve(getFileTreeResponse)
   );
   vi.mocked(resourceStore.getVocabularyInstances).mockReturnValue(
     Promise.resolve({ en: [], de: [] })
   );
 
-    const wrapper = mount(FilesView as unknown as typeof Vue, {
+  beforeEach(() => {
+    // shallowMount does not work here!
+    wrapper = mount(FilesView as unknown as typeof Vue, {
       pinia: testingPinia,
+      router,
       i18n,
       localVue,
+    }) as Wrapper<ResourcePageComponent>;
   });
 
+  test(
+    "Should toggle column visibility and persist to local storage",
+    async () => {
       await wrapper.vm.$nextTick();
 
       // Wait for 1 second until everything is set up
-    await sleep(1000);
+      await sleep(1000); // Don't remove!
 
       expect(resourceStore.setStoredColumns).toBeCalledTimes(1);
 
@@ -78,11 +102,16 @@ describe("FilesView.vue", () => {
       await wrapper.vm.$nextTick();
 
       // Wait for 1 second until everything is set up
-    await sleep(1000);
+      await sleep(1000); // Don't remove!
 
       const additionalColumnHeader = wrapper.find(".additionalColumnHeader");
       expect(additionalColumnHeader.exists()).toBeTruthy();
 
       expect(resourceStore.setStoredColumns).toBeCalledTimes(2);
-  });
+    },
+    {
+      // Override the maximum run time for this test (10 sec), due to the sleep() calls
+      timeout: 10000,
+    }
+  );
 });

src/modules/resource/components/resource-page/FilesViewHeader.vue

@@ -34,6 +34,7 @@
           :disabled="isUploading || readOnly || (resource && resource.archived)"
           @click="upload"
         >
+          <!-- TODO: Add GitLab branch disabled logic as in MetadataManagerHeader -->
           <b-icon icon="plus" :title="$t('page.resource.upload')" />
         </b-button>
 

src/modules/resource/components/resource-page/metadata/MetadataManagerFileInformation.vue

 <template>
   <span>
+    <!-- File Name -->
     <CoscineFormGroup :label="$t('page.resource.infoFileName')">
       <div
-        id="fileInfoFieldID"
-        class="fileInfoField"
+        id="fileInfofileName"
         data-toggle="tooltip"
         :title="currentFile.name"
       >
@@ -14,42 +14,39 @@
         }}
       </div>
     </CoscineFormGroup>
+
+    <!-- Last Modified -->
     <CoscineFormGroup :label="$t('page.resource.infoFileLastModified')">
-      <div class="fileInfoField">
       {{
         !currentFile.lastModified
           ? $t("page.resource.infoFileNoInformation")
-            : new Date(currentFile.lastModified).toLocaleDateString(
-                $i18n.locale
-              )
+          : new Date(currentFile.lastModified).toLocaleDateString($i18n.locale)
       }}
-      </div>
     </CoscineFormGroup>
+
+    <!-- Uploaded -->
     <CoscineFormGroup :label="$t('page.resource.infoFileCreated')">
-      <div class="fileInfoField">
       {{
-          !currentFile.created
+        !currentFile.createdAt
           ? $t("page.resource.infoFileNoInformation")
-            : new Date(currentFile.created).toLocaleDateString($i18n.locale)
+          : new Date(currentFile.createdAt).toLocaleDateString($i18n.locale)
       }}
-      </div>
     </CoscineFormGroup>
+
+    <!-- File Size -->
     <CoscineFormGroup :label="$t('page.resource.infoFileSize')">
-      <div class="fileInfoField">
       {{
         currentFile.isFolder === false
           ? currentFile.size + " Bytes"
           : $t("page.resource.infoFileNoInformation")
       }}
-      </div>
     </CoscineFormGroup>
   </span>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-
-import type { FolderContent } from "../../../utils/EntryDefinition";
+import type { FolderContent } from "@/modules/resource/types";
 
 export default defineComponent({
   props: {
@@ -71,12 +68,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.fileInfoField {
-  padding-top: calc(0.375rem + 1px);
-  padding-bottom: calc(0.375rem + 1px);
-}
-#fileInfoFieldID {
-  margin-left: auto;
+#fileInfofileName {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/modules/resource/components/resource-page/metadata/MetadataManagerHeader.vue

@@ -65,20 +65,20 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-
 import useProjectStore from "@/modules/project/store";
 // import the store for current module
 import useResourceStore from "../../../store";
-
-import type { FolderContent } from "../../../utils/EntryDefinition";
-
 import type { TranslateResult } from "vue-i18n";
 import type {
   GitlabBranchDto,
   ResourceDto,
   ResourceTypeInformationDto,
 } from "@coscine/api-client/dist/types/Coscine.Api";
-import { CoscineResourceTypes } from "@/modules/resource/types";
+import {
+  CoscineResourceTypes,
+  type FolderContent,
+} from "@/modules/resource/types";
+
 export default defineComponent({
   props: {
     editableDataUrl: {
@@ -168,7 +168,6 @@ export default defineComponent({
       const accessToken =
         this.resource.type?.options?.gitLabOptions?.accessToken;
       const currentBranch = this.resource.type?.options?.gitLabOptions?.branch;
-
       if (projectId && domain && accessToken && currentBranch) {
         const gitlabBranches =
           await this.resourceStore.getGitlabBranchesForProject(

src/modules/resource/components/resource-page/metadata/MetadataManagerSpecialProperties.vue

 <template>
   <div>
+    <!-- Data URL -->
     <span v-if="editableDataUrl && !currentFolderContent.isFolder">
       <CoscineFormGroup
         :mandatory="true"
@@ -21,6 +22,8 @@
         </b-input-group>
       </CoscineFormGroup>
     </span>
+
+    <!-- Entry Name - Editable Key -->
     <span v-if="editableKey">
       <CoscineFormGroup
         :mandatory="true"
@@ -43,7 +46,7 @@
 import { defineComponent, type PropType } from "vue";
 import useProjectStore from "@/modules/project/store";
 
-import type { FolderContent } from "../../../utils/EntryDefinition";
+import type { FolderContent } from "@/modules/resource/types";
 import type { ResourceDto } from "@coscine/api-client/dist/types/Coscine.Api";
 
 export default defineComponent({