README.md

-# Coscine UIv2
-
-## Routes
-Currently available routes in Coscine (Vue Router): 
-* `./profile` for user profile
-* `./search` for global search
-* `./create-project` for project create
-* `./p/{slug}` for projects
-* `./p/{slug}/settings` for project settings
-* `./p/{slug}/members` for project members
-* `./p/{slug}/quota` for project quota
-* `./p/{slug}/create-resource` for resource create
-* `./p/{slug}/r/{guid}` for resources within a project
-* `./p/{slug}/r/{guid}/settings` for resource edit
-* `./admin` for admin page
-* `./login` for login page
-
-## Development
+# Coscine UI
+
+[[_TOC_]] 
+
+## 📝 Overview
+
+The User Interface (UI) project is a comprehensive frontend application that facilitates interaction with the Coscine environment and its API. Built using Vue and TypeScript, it leverages a range of powerful tools including Bootstrap Vue, Vue Router, Pinia, and Vue i18n. It is the central repository for the entire Coscine user interface.
+
+## ⚙️ Configuration
 
 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://git.rwth-aachen.de/coscine/frontend/apps/ui)
 
 (For a specific branch, build such a URL: `https://gitpod.io/#https://git.rwth-aachen.de/coscine/frontend/apps/ui/tree/{branch}`)
 
-## Commands
+## 📖 Usage
 
 This project uses [Yarn](https://yarnpkg.com/) and [Node.js](https://nodejs.org/en/) to manage its dependencies.
 
-### Project setup
-
 ```
 yarn install
 ```
@@ -56,3 +45,29 @@ yarn lint
 yarn lint:fix
 ```
 
+## 👥 Contributing
+
+As an open source plattform and project, we welcome contributions from our community in any form. You can do so by submitting bug reports or feature requests, or by directly contributing to Coscine's source code. To submit your contribution please follow our [Contributing Guideline](https://git.rwth-aachen.de/coscine/docs/public/wiki/-/blob/master/Contributing%20To%20Coscine.md).
+
+## 📄 License
+
+The current open source repository is licensed under the **MIT License**, which is a permissive license that allows the software to be used, modified, and distributed for both commercial and non-commercial purposes, with limited restrictions (see `LICENSE` file)
+
+> The MIT License allows for free use, modification, and distribution of the software and its associated documentation, subject to certain conditions. The license requires that the copyright notice and permission notice be included in all copies or substantial portions of the software. The software is provided "as is" without any warranties, and the authors or copyright holders cannot be held liable for any damages or other liability arising from its use.
+
+## 🆘 Support
+
+1. **Check the documentation**: Before reaching out for support, check the help pages provided by the team at https://docs.coscine.de/en/. This may have the information you need to solve the issue.
+2. **Contact the team**: If the documentation does not help you or if you have a specific question, you can reach out to our support team at `servicedesk@itc.rwth-aachen.de` 📧. Provide a detailed description of the issue you're facing, including any error messages or screenshots if applicable.
+3. **Be patient**: Our team will do their best to provide you with the support you need, but keep in mind that they may have a lot of requests to handle. Be patient and wait for their response.
+4. **Provide feedback**: If the support provided by our support team helps you solve the issue, let us know! This will help us improve our documentation and support processes for future users.
+
+By following these simple steps, you can get the support you need to use Coscine's services as an external user.
+
+## 📦 Release & Changelog
+
+External users can find the _Releases and Changelog_ inside each project's repository. The repository contains a section for Releases (`Deployments > Releases`), where users can find the latest release changelog and source. Withing the Changelog you can find a list of all the changes made in that particular release and version.  
+By regularly checking for new releases and changes in the Changelog, you can stay up-to-date with the latest improvements and bug fixes by our team and community!
+
+
+

package.json

 {
   "name": "ui",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -101,7 +101,7 @@
     "vitest": "^0.27.1",
     "vue-template-compiler": "^2.7.14"
   },
-  "packageManager": "yarn@3.4.1",
+  "packageManager": "yarn@3.5.0",
   "resolutions": {
     "readable-stream": "3.6.0"
   }

src/modules/admin/i18n/de.ts

@@ -5,7 +5,7 @@ export default {
     admin: {
       headline: "Adminseite",
 
-      projectInputPlaceholder: "Projekt-GUID oder -Slug eingeben",
+      projectInputPlaceholder: "Projekt Id oder -Slug eingeben",
 
       projectFound: "Projekt gefunden",
       projectNotSelected: "Kein Projekt ausgewählt",
@@ -21,7 +21,7 @@ export default {
         displayNameLabel:
           "@:(page.admin.form.displayName)@:(page.admin.form.labelSymbol)",
 
-        projectId: "GUID",
+        projectId: "Projekt Id",
         projectIdLabel:
           "@:(page.admin.form.projectId)@:(page.admin.form.labelSymbol)",
       },
@@ -31,7 +31,7 @@ export default {
       headers: {
         resourceType: "Ressourcentyp",
         projectQuota: "Aktuelle Projektquota",
-        resourceQuota: "Aktielle Ressourcenquota",
+        resourceQuota: "Aktuelle Ressourcenquota",
 
         maximumQuota: "Maximale Quota",
         maximumQuotaHint:

src/modules/admin/i18n/en.ts

@@ -5,7 +5,7 @@ export default {
     admin: {
       headline: "Quota Admin Panel",
 
-      projectInputPlaceholder: "Enter a project's Slug or GUID",
+      projectInputPlaceholder: "Enter a project's Slug or Id",
 
       projectFound: "Project found",
       projectNotSelected: "No project selected",
@@ -21,7 +21,7 @@ export default {
         displayNameLabel:
           "@:(page.admin.form.displayName)@:(page.admin.form.labelSymbol)",
 
-        projectId: "GUID",
+        projectId: "Project Id",
         projectIdLabel:
           "@:(page.admin.form.projectId)@:(page.admin.form.labelSymbol)",
       },

src/modules/pid/i18n/de.ts

@@ -18,7 +18,7 @@ export default {
       contactPidOwnerDescription:
         "In den meisten Fällen sind die referenzierten Daten nicht öffentlich zugänglich. Sie können sich daher an den Besitzer der Daten wenden und um Zugang bitten. Der Besitzer dieser Ressource wird dann von Coscine kontaktiert. Die Informationen, die Sie im Formular angeben, werden so an den Besitzer weitergeleitet.",
 
-      toClipboard: "PID wurde in der Zwischenablage kopiert",
+      toClipboard: "PID wurde in die Zwischenablage kopiert",
 
       form: {
         labelSymbol: ":",
@@ -28,8 +28,7 @@ export default {
           "@:(page.pid.form.persistentId)@:(page.pid.form.labelSymbol)",
         persistentIdPopover:
           "Für weitere Informationen zum @:(page.pid.form.persistentId) siehe",
-        persistentIdPopoverUrl:
-          "https://help.itc.rwth-aachen.de/service/b2b7729fd93f4c7080b475776f6b5d87/article/d5c6ef062cc24c9a84dcb774d0bbc021/",
+        persistentIdPopoverUrl: "https://docs.coscine.de/de/rdm/publishing/",
 
         yourName: "Ihr Name",
         yourNameLabel:

src/modules/pid/i18n/en.ts

@@ -28,8 +28,7 @@ export default {
           "@:(page.pid.form.persistentId)@:(page.pid.form.labelSymbol)",
         persistentIdPopover:
           "For more information on @:(page.pid.form.persistentId) see",
-        persistentIdPopoverUrl:
-          "https://help.itc.rwth-aachen.de/en/service/b2b7729fd93f4c7080b475776f6b5d87/article/d5c6ef062cc24c9a84dcb774d0bbc021/",
+        persistentIdPopoverUrl: "https://docs.coscine.de/en/rdm/publishing/",
 
         yourName: "Your Name",
         yourNameLabel:

src/modules/project/i18n/de.ts

@@ -206,6 +206,21 @@ export default {
       projectDescriptionLabel:
         "@:(form.project.projectDescription)@:(form.project.labelSymbol)",
 
+      projectSlug: "Slug",
+      projectSlugLabel:
+        "@:(form.project.projectSlug)@:(form.project.labelSymbol)",
+
+      projectId: "Projekt Id",
+      projectIdLabel: "@:(form.project.projectId)@:(form.project.labelSymbol)",
+
+      projectPersistentId: "Persistent Identifier (PID)",
+      projectPersistentIdLabel:
+        "@:(form.project.projectPersistentId)@:(form.project.labelSymbol)",
+      projectPersistentIdPopover:
+        "Für weitere Informationen zum @:(form.project.projectPersistentId) siehe",
+      projectPersistentIdPopoverUrl:
+        "https://docs.coscine.de/de/rdm/publishing/",
+
       activatedImportFromParent: "Projekt-Metadaten",
 
       copyMetadataLabel:
@@ -232,6 +247,12 @@ export default {
       projectOrganization: "Teilnehmende Organisationen",
       projectOrganizationLabel:
         "@:(form.project.projectOrganization)@:(form.project.labelSymbol)",
+      projectOrganizationHint:
+        "Wenn Ihre Organisation nicht in der Liste erscheint, geben Sie bitte ihren Namen in das Feld ein, um nach ihr zu suchen.",
+      projectOrganizationLabelPopover:
+        "Für weitere Informationen zu teilnehmenden Organisationen siehe",
+      projectOrganizationLabelPopoverUrl:
+        "https://docs.coscine.de/de/projects/create/",
       projectOrganizationNoOptions: "Suche nach Organisationen",
       projectOrganizationNoResult:
         "Keine Organisationen gefunden, die der Suche entsprechen",
@@ -259,6 +280,8 @@ export default {
         "Dieses Feld besitzt eine Maximallänge von {maxLength} Zeichen.",
       projectGrantIdLabel:
         "@:(form.project.projectGrantId)@:(form.project.labelSymbol)",
+
+      toClipboard: "{projectOption} wurde in die Zwischenablage kopiert",
     },
   },
 } as VueI18n.LocaleMessageObject;

src/modules/project/i18n/en.ts

@@ -201,6 +201,21 @@ export default {
       projectDescriptionLabel:
         "@:(form.project.projectDescription)@:(form.project.labelSymbol)",
 
+      projectSlug: "Slug",
+      projectSlugLabel:
+        "@:(form.project.projectSlug)@:(form.project.labelSymbol)",
+
+      projectId: "Project Id",
+      projectIdLabel: "@:(form.project.projectId)@:(form.project.labelSymbol)",
+
+      projectPersistentId: "Persistent Identifier (PID)",
+      projectPersistentIdLabel:
+        "@:(form.project.projectPersistentId)@:(form.project.labelSymbol)",
+      projectPersistentIdPopover:
+        "For more information on @:(form.project.projectPersistentId) see",
+      projectPersistentIdPopoverUrl:
+        "https://docs.coscine.de/en/rdm/publishing/",
+
       activatedImportFromParent: "Project Metadata",
 
       copyMetadataLabel:
@@ -227,6 +242,12 @@ export default {
       projectOrganization: "Participating Organizations",
       projectOrganizationLabel:
         "@:(form.project.projectOrganization)@:(form.project.labelSymbol)",
+      projectOrganizationHint:
+        "If your organization does not appear in the list, please enter its name in the field to search for it.",
+      projectOrganizationLabelPopover:
+        "For more information on participating Organizations see",
+      projectOrganizationLabelPopoverUrl:
+        "https://docs.coscine.de/en/projects/create/",
       projectOrganizationNoOptions: "Search for organizations",
       projectOrganizationNoResult: "No organizations found matching the search",
 
@@ -253,6 +274,8 @@ export default {
         "This field can only contain up to {maxLength} characters.",
       projectGrantIdLabel:
         "@:(form.project.projectGrantId)@:(form.project.labelSymbol)",
+
+      toClipboard: "{projectOption} has been copied to clipboard",
     },
   },
 } as VueI18n.LocaleMessageObject;

src/modules/project/pages/Settings.vue

@@ -12,6 +12,12 @@
             @validation="formValidations.naming = $event"
           /><!-- TODO: Fix @validation assignment and typing -->
 
+          <FormReadonlyData
+            v-model="projectForm"
+            :disabled="!isOwner"
+            :is-loading="isLoading"
+          />
+
           <div class="h-divider" />
 
           <FormMetadata
@@ -74,6 +80,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import FormNaming from "./components/FormNaming.vue";
+import FormReadonlyData from "./components/FormReadonlyData.vue";
 import FormMetadata from "./components/FormMetadata.vue";
 import DeleteProjectModal from "./components/modals/DeleteProjectModal.vue";
 
@@ -93,6 +100,7 @@ import type { Validation } from "@vuelidate/core";
 export default defineComponent({
   components: {
     FormNaming,
+    FormReadonlyData,
     FormMetadata,
     DeleteProjectModal,
   },
@@ -108,6 +116,8 @@ export default defineComponent({
       projectForm: {
         description: "",
         displayName: "",
+        id: "",
+        pid: "",
         startDate: "",
         endDate: "",
         keywords: "",

src/modules/project/pages/components/FormMetadata.vue

@@ -148,7 +148,24 @@
       :label="$t('form.project.projectOrganizationLabel')"
       :is-loading="isLoading"
       type="input"
+      :info="true"
     >
+      <!-- Hint -->
+      <template #hint>
+        {{ $t("form.project.projectOrganizationHint") }}
+      </template>
+
+      <template #popover>
+        {{ $t("form.project.projectOrganizationLabelPopover") }}
+        <b-link
+          :href="
+            $t('form.project.projectOrganizationLabelPopoverUrl').toString()
+          "
+          target="_blank"
+          >{{ $t("default.help") }}
+        </b-link>
+      </template>
+
       <multiselect
         id="Organization"
         v-model="v$.projectForm.organizations.$model"

src/modules/project/pages/components/FormReadonlyData.vue

+<template>
+  <div>
+    <!-- Project Slug -->
+    <CoscineFormGroup
+      label-for="Slug"
+      :label="$t('form.project.projectSlugLabel')"
+      :is-loading="isLoading"
+      type="input"
+    >
+      <b-form-input
+        id="ProjectSlug"
+        v-model="projectForm.slug"
+        :readonly="readonly"
+        required
+      />
+    </CoscineFormGroup>
+
+    <!-- Project Id -->
+    <CoscineFormGroup
+      label-for="Id"
+      :label="$t('form.project.projectIdLabel')"
+      :is-loading="isLoading"
+      type="input"
+    >
+      <b-form-input
+        id="ProjectId"
+        v-model="projectForm.id"
+        :readonly="readonly"
+        required
+      />
+    </CoscineFormGroup>
+
+    <!-- Project Persistent Identifier -->
+    <CoscineFormGroup
+      label-for="ProjectPersistentId"
+      :label="$t('form.project.projectPersistentIdLabel')"
+      :is-loading="isLoading"
+      :info="true"
+    >
+      <template #popover>
+        {{ $t("form.project.projectPersistentIdPopover") }}
+        <b-link
+          :href="$t('form.project.projectPersistentIdPopoverUrl').toString()"
+          target="_blank"
+        >
+          {{ $t("default.help") }}
+        </b-link>
+      </template>
+
+      <b-button-group class="w-100">
+        <!-- Text Field -->
+        <b-form-input
+          id="ProjectPersistentId"
+          v-model="projectForm.pid"
+          required
+          :readonly="readonly"
+        />
+
+        <!-- Copy Button -->
+        <b-button id="copyPidButton" @click="copyPid()">
+          <b-icon icon="clipboard" />
+        </b-button>
+
+        <!-- Copied Tooltip -->
+        <b-tooltip
+          id="copyPidTooltip"
+          target="copyPidButton"
+          placement="top"
+          triggers="blur"
+        >
+          {{
+            $t("form.project.toClipboard", {
+              projectOption: $t("form.project.projectPersistentId"),
+            })
+          }}
+        </b-tooltip>
+      </b-button-group>
+    </CoscineFormGroup>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import type { ProjectObject } from "@coscine/api-client/dist/types/Coscine.Api.Project";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Object as PropType<ProjectObject>,
+      required: true,
+    },
+    isLoading: {
+      default: false,
+      type: Boolean,
+    },
+  },
+
+  data() {
+    return {
+      readonly: true,
+      projectForm: this.value,
+    };
+  },
+  methods: {
+    copyPid() {
+      if (this.projectForm) {
+        navigator.clipboard.writeText(
+          "http://hdl.handle.net/" + this.projectForm.pid
+        );
+        this.$root.$emit("bv::show::tooltip", "copyPidTooltip");
+      }
+    },
+  },
+});
+</script>

src/modules/project/pages/components/MembersList.vue

@@ -16,6 +16,20 @@
             <b-col class="user-details">
               <!-- Member Display Name -->
               {{ projectRole.user ? projectRole.user.displayName : "" }}
+              <!-- Member Role Badge-->
+              <span
+                v-if="
+                  projectRole.user &&
+                  currentUser &&
+                  projectRole.user.id === currentUser.id
+                "
+                class="badge badge-pill badge-primary ml-2"
+              >
+                {{ projectRole.role?.displayName }}
+              </span>
+              <span v-else class="badge badge-pill badge-secondary ml-2">
+                {{ projectRole.role?.displayName }}
+              </span>
               <br />
               <!-- Member Email -->
               <a

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

 <template>
-  <div class="metadata">
+  <div class="applicationProfile">
     <div>
       <!-- Application Profile Dropdown -->
       <CoscineFormGroup
         label-for="ApplicationProfiles"
         :mandatory="true"
-        :label="$t('page.createResource.metadata.applicationProfileLabel')"
+        :label="
+          $t('page.createResource.applicationProfile.applicationProfileLabel')
+        "
         :info="true"
       >
         <template #popover>
-          {{ $t("page.createResource.metadata.applicationProfilePopover") }}
+          {{
+            $t(
+              "page.createResource.applicationProfile.applicationProfilePopover"
+            )
+          }}
           <b-link
             :href="
               $t(
-                'page.createResource.metadata.applicationProfilePopoverUrl'
+                'page.createResource.applicationProfile.applicationProfilePopoverUrl'
               ).toString()
             "
             target="_blank"
@@ -27,14 +33,18 @@
             v-model="selectedApplicationProfile"
             :options="applicationProfileList"
             :placeholder="
-              $t('page.createResource.metadata.selectApplicationProfile')
+              $t(
+                'page.createResource.applicationProfile.selectApplicationProfile'
+              )
             "
             @change="notifyFormGenerator"
           >
             <template #first>
               <b-form-select-option :value="null" disabled>
                 {{
-                  $t("page.createResource.metadata.selectApplicationProfile")
+                  $t(
+                    "page.createResource.applicationProfile.selectApplicationProfile"
+                  )
                 }}
               </b-form-select-option>
             </template>
@@ -56,7 +66,9 @@
         </div>
 
         <b-tooltip target="createButton" triggers="hover">
-          <i18n path="page.createResource.metadata.createAp.tooltip" />
+          <i18n
+            path="page.createResource.applicationProfile.createAp.tooltip"
+          />
         </b-tooltip>
       </CoscineFormGroup>
     </div>

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

@@ -33,18 +33,18 @@
       </CoscineFormGroup>
     </b-card>
 
-    <!-- General Information -->
+    <!-- Resource Metadata Information -->
     <b-card class="my-2">
       <b-link class="float-right text-primary" @click.prevent="toTab(tabs[1])">
         {{ $t("page.createResource.overview.edit") }}
       </b-link>
       <CoscineHeadline :headline="$t('form.steps.second')" h="h5" />
 
-      <!-- General -->
-      <General v-model="resource" :readonly="true" />
+      <!-- Resource Metadata -->
+      <ResourceMetadata v-model="resource" :readonly="true" />
     </b-card>
 
-    <!-- Metadata -->
+    <!-- Application Profile -->
     <b-card class="my-2 p-0">
       <b-link class="float-right text-primary" @click.prevent="toTab(tabs[2])">
         {{ $t("page.createResource.overview.edit") }}
@@ -96,7 +96,7 @@ import useResourceStore from "@/modules/resource/store";
 import useProjectStore from "@/modules/project/store";
 import useUserStore from "@/modules/user/store";
 import "@/plugins/form-generator";
-import General from "./General.vue";
+import ResourceMetadata from "./ResourceMetadata.vue";
 import { navigateToProject } from "@/router";
 import type { Dataset } from "@rdfjs/types";
 import type { ResourceObject } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
@@ -107,7 +107,7 @@ import type { UserObject } from "@coscine/api-client/dist/types/Coscine.Api.User
 import useNotificationStore from "@/store/notification";
 
 export default defineComponent({
-  components: { General },
+  components: { ResourceMetadata },
   props: {
     value: {
       type: Object as PropType<ResourceObject>,

src/modules/resource/components/create-resource/General.vue → src/modules/resource/components/create-resource/ResourceMetadata.vue

 <template>
-  <div class="general">
+  <div class="resourceMetadata">
     <!-- Form -->
     <b-form id="edit_form" @submit.stop.prevent="">
       <!-- Resource Name -->

src/modules/resource/components/create-resource/modals/CreateAPModal.vue

@@ -2,11 +2,11 @@
   <div class="modal">
     <b-modal
       id="createAPModal"
-      :title="$t('page.createResource.metadata.createAp.title')"
+      :title="$t('page.createResource.applicationProfile.createAp.title')"
       :hide-footer="true"
     >
       <!-- Body -->
-      <i18n path="page.createResource.metadata.createAp.body" tag="p">
+      <i18n path="page.createResource.applicationProfile.createAp.body" tag="p">
         <template #br><br /></template>
       </i18n>
 

src/modules/resource/components/create-resource/resource-type/GitLab.vue

@@ -142,6 +142,22 @@
           {{ $t("page.createResource.multiselect.noOptions") }}
         </span>
       </multiselect>
+
+      <template #hint>
+        <span
+          v-if="
+            gitlabInformation.reference &&
+            !gitlabInformation.reference?.can_push
+          "
+          class="text-danger"
+        >
+          {{
+            $t("resourceType.gitlab.cantPush", {
+              branch: gitlabInformation.reference?.name,
+            })
+          }}
+        </span>
+      </template>
     </CoscineFormGroup>
 
     <CoscineFormGroup>

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

@@ -165,19 +165,19 @@ export default defineComponent({
       type: Boolean,
     },
     fileListEdit: {
-      default() {
+      default: () => {
         return [];
       },
       type: Array as PropType<FolderContent[]>,
     },
     fileListUpload: {
-      default() {
+      default: () => {
         return [];
       },
       type: Array as PropType<FileInformation[]>,
     },
     folderContents: {
-      default() {
+      default: () => {
         return [];
       },
       type: Array as PropType<FolderContent[]>,

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

@@ -2,17 +2,28 @@
   <b-row id="metadataManagerButtonRowTop" align-h="between">
     <b-col>
       <!-- Select Files Button -->
+      <span id="buttonSelectFilesWrapper">
         <b-button
           v-if="!isGuest"
           id="buttonSelectFiles"
           variant="secondary"
           :placeholder="$t('page.resource.metadataManagerBtnSelectFiles')"
-        :disabled="isUploading || readOnly || (resource && resource.archived)"
+          :disabled="uploadDisabled"
           autofocus
           @click="$emit('selectFiles')"
         >
           {{ $t("page.resource.metadataManagerBtnSelectFiles") }}
         </b-button>
+      </span>
+      <b-tooltip
+        v-if="uploadDisabled && uploadDisabledReason"
+        target="buttonSelectFilesWrapper"
+        triggers="hover"
+        placement="bottom"
+        boundary="viewport"
+      >
+        {{ uploadDisabledReason }}
+      </b-tooltip>
     </b-col>
 
     <b-col>
@@ -59,10 +70,14 @@ import useProjectStore from "@/modules/project/store";
 // import the store for current module
 import useResourceStore from "../../../store";
 
-import type { ResourceObject } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
+import type {
+  Branch,
+  ResourceObject,
+} from "@coscine/api-client/dist/types/Coscine.Api.Resources";
 import type { FolderContent } from "../../../utils/EntryDefinition";
 
 import type { ResourceTypeInformation } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
+import type { TranslateResult } from "vue-i18n";
 export default defineComponent({
   props: {
     editableDataUrl: {
@@ -96,10 +111,37 @@ export default defineComponent({
 
     return { projectStore, resourceStore };
   },
+  data() {
+    return {
+      gitlabBranchProps: null as Branch | null,
+    };
+  },
   computed: {
     isGuest(): boolean | undefined {
       return this.projectStore.currentUserRoleIsGuest;
     },
+    uploadDisabled(): boolean {
+      return (
+        this.isUploading ||
+        this.readOnly ||
+        this.resource.archived ||
+        !this.gitlabBranchProps?.can_push ||
+        false
+      );
+    },
+    uploadDisabledReason(): TranslateResult | null {
+      if (this.isUploading)
+        return this.$t("page.resource.metadataManagerBtnCantUploadArchived");
+      else if (this.readOnly)
+        return this.$t("page.resource.metadataManagerBtnCantUploadReadonly");
+      else if (this.resource.archived)
+        return this.$t("page.resource.metadataManagerBtnCantUploadUploading");
+      else if (!this.gitlabBranchProps?.can_push)
+        return this.$t("resourceType.gitlab.cantPush", {
+          branch: this.gitlabBranchProps?.name,
+        });
+      else return null;
+    },
     resourceTypeInformation(): null | undefined | ResourceTypeInformation {
       if (this.resourceStore.enabledResourceTypes && this.resource) {
         return this.resourceStore.enabledResourceTypes.find(
@@ -109,6 +151,35 @@ export default defineComponent({
       return null;
     },
   },
+  async mounted() {
+    if (
+      this.resource.resourceTypeOption &&
+      this.resource.type?.displayName === "gitlab"
+    ) {
+      await this.fetchGitlabBranchInfo();
+    }
+  },
+  methods: {
+    async fetchGitlabBranchInfo() {
+      const projectId = this.resource.resourceTypeOption["ProjectId"];
+      const domain = this.resource.resourceTypeOption["RepoUrl"];
+      const accessToken = this.resource.resourceTypeOption["AccessToken"];
+      const currentBranch = this.resource.resourceTypeOption["Branch"];
+
+      if (projectId && domain && accessToken && currentBranch) {
+        const gitlabRefs = await this.resourceStore.getGitlabBranchesForProject(
+          projectId,
+          domain,
+          accessToken
+        );
+        if (gitlabRefs) {
+          this.gitlabBranchProps = gitlabRefs.find(
+            (b) => b.name === currentBranch
+          ) as Branch;
+        }
+      }
+    },
+  },
 });
 </script>