feat: partial editors

.github/workflows/ci.yml

@@ -103,7 +103,7 @@ jobs:
           - browser: chromium
             projects: "--project=setup --project=setup-normal-user --project=chromium --project=chromium-normal-user --project=chromium-2fa-user"
           - browser: firefox
-            projects: "--project=setup --project=firefox"
+            projects: "--project=setup --project=setup-normal-user --project=firefox"
     container:
       image: mcr.microsoft.com/playwright:v1.57.0-noble
       options: --user 1001

components/AdminMembershipRequest/AdminMembershipRequest.vue

@@ -52,7 +52,7 @@
               {{ t('Rôle proposé :') }}
               <AdminBadge
                 size="xs"
-                :type="request.role === 'admin' ? 'primary' : 'secondary'"
+                :type="getRoleBadgeType(request.role)"
               >
                 {{ roleLabel }}
               </AdminBadge>
@@ -193,7 +193,8 @@ import { RiCheckLine, RiMailLine, RiMailSendLine, RiUserAddLine } from '@remixic
 import InputGroup from '../InputGroup/InputGroup.vue'
 import ModalWithButton from '../Modal/ModalWithButton.vue'
 import AdminBadge from '../AdminBadge/AdminBadge.vue'
-import type { MemberRole, PendingMembershipRequest } from '~/types/types'
+import type { MemberRole } from '@datagouv/components-next'
+import type { PendingMembershipRequest } from '~/types/types'
 
 const props = defineProps<{
   oid: string

components/AdminOrgInvitation/AdminOrgInvitation.vue

@@ -39,7 +39,7 @@
               {{ t('Rôle proposé :') }}
               <AdminBadge
                 size="xs"
-                :type="invitation.role === 'admin' ? 'primary' : 'secondary'"
+                :type="getRoleBadgeType(invitation.role)"
               >
                 {{ roleLabel }}
               </AdminBadge>
@@ -61,7 +61,7 @@
           {{ formatDate(new Date(invitation.created), { dateStyle: 'long', timeStyle: 'short' }) }}
         </div>
       </div>
-      <div class="flex flex-col gap-2.5 items-end">
+      <div class="flex gap-2.5 items-start">
         <BrandedButton
           color="primary"
           size="xs"
@@ -89,7 +89,8 @@ import { BrandedButton, useFormatDate } from '@datagouv/components-next'
 import { ref } from 'vue'
 import { RiBuilding2Line, RiCheckLine, RiUserAddLine } from '@remixicon/vue'
 import AdminBadge from '../AdminBadge/AdminBadge.vue'
-import type { MemberRole, OrgInvitation } from '~/types/types'
+import type { MemberRole } from '@datagouv/components-next'
+import type { OrgInvitation } from '~/types/types'
 
 const props = defineProps<{
   invitation: OrgInvitation

components/AdminTable/AdminDataservicesTable/AdminDataservicesTable.vue

@@ -91,6 +91,7 @@
             keep-margins-even-without-borders
           />
           <BrandedButton
+            v-if="dataservice.permissions.edit"
             size="xs"
             color="tertiary"
             :href="getDataserviceAdminUrl(dataservice)"

components/AdminTable/AdminDatasetsTable/AdminDatasetsTable.vue

@@ -113,6 +113,7 @@
             keep-margins-even-without-borders
           />
           <BrandedButton
+            v-if="dataset.permissions.edit"
             size="xs"
             color="tertiary"
             :href="getDatasetAdminUrl(dataset)"

components/AdminTable/AdminReusesTable/AdminReusesTable.vue

@@ -82,6 +82,7 @@
             keep-margins-even-without-borders
           />
           <BrandedButton
+            v-if="reuse.permissions.edit"
             size="xs"
             color="tertiary"
             :href="getReuseAdminUrl(reuse)"

components/Dataservices/AdminUpdateDataserviceDatasetsPage.vue

@@ -26,8 +26,20 @@
       </SimpleBanner>
     </div>
     <div v-else>
-      <DatasetsSelect v-model="datasets" />
-      <div class="fr-grid-row fr-grid-row--right">
+      <DatasetsSelect
+        v-model="datasets"
+        :read-only="!canEdit"
+      >
+        <template #empty>
+          <p class="text-sm text-gray-medium">
+            {{ t('Aucun jeu de données associé.') }}
+          </p>
+        </template>
+      </DatasetsSelect>
+      <div
+        v-if="canEdit"
+        class="fr-grid-row fr-grid-row--right"
+      >
         <BrandedButton
           color="primary"
           @click="submit"
@@ -52,6 +64,7 @@ const { $api } = useNuxtApp()
 const route = useRoute()
 const url = computed(() => `/api/1/dataservices/${route.params.id}`)
 const { data: dataservice } = await useAPI<Dataservice>(url, { redirectOn404: true })
+const canEdit = computed(() => dataservice.value?.permissions.edit ?? false)
 
 const tooManyDatasets = computed(() => (dataservice.value?.datasets.total ?? 0) > config.public.maxNumberOfDatasetsForDataserviceUpdate)
 const datasets = ref<Array<DatasetV2 | DatasetSuggest>>([])

components/Dataservices/AdminUpdateDataservicePage.vue

@@ -1,6 +1,6 @@
 <template>
   <LoadingBlock
     v-slot="{ data: dataservice }"
     :status
     :data="dataservice"
   >
@@ -12,7 +12,10 @@
       @feature="feature"
       @submit="save"
     >
-      <template #top>
+      <template
+        v-if="dataservice.permissions.edit"
+        #top
+      >
         <BannerAction
           v-if="!dataservice.deleted_at && !dataservice.archived_at"
           class="mb-4"
@@ -65,69 +68,80 @@
         </BannerAction>
       </template>
       <template #button="attrs">
-        <BrandedButton
-          type="submit"
-          v-bind="attrs"
-          :loading="isLoading"
-        >
-          {{ t("Sauvegarder") }}
-        </BrandedButton>
+        <div class="flex items-center gap-3">
+          <p
+            v-if="!dataservice.permissions.edit"
+            class="text-sm text-gray-medium m-0"
+          >
+            {{ t('Vous n\'avez pas la permission de modifier cette API.') }}
+          </p>
+          <BrandedButton
+            type="submit"
+            v-bind="attrs"
+            :loading="isLoading"
+            :disabled="!dataservice.permissions.edit"
+          >
+            {{ t("Sauvegarder") }}
+          </BrandedButton>
+        </div>
       </template>
-      <div class="mt-5 space-y-5">
-        <TransferBanner
-          type="Dataservice"
-          :subject="dataservice"
-          :label="$t(`Transférer l'API`)"
-        />
-        <BannerAction
-          type="warning"
-          :title="dataservice.archived_at ? $t('Désarchiver cette API') : $t('Archiver cette API')"
-        >
-          {{ $t("Une API archivée n'est plus indexée mais reste accessible aux utilisateurs avec un lien direct.") }}
+      <template v-if="dataservice.permissions.edit">
+        <div class="mt-5 space-y-5">
+          <TransferBanner
+            type="Dataservice"
+            :subject="dataservice"
+            :label="$t(`Transférer l'API`)"
+          />
+          <BannerAction
+            type="warning"
+            :title="dataservice.archived_at ? $t('Désarchiver cette API') : $t('Archiver cette API')"
+          >
+            {{ $t("Une API archivée n'est plus indexée mais reste accessible aux utilisateurs avec un lien direct.") }}
 
-          <template #button>
-            <BrandedButton
-              :icon="RiArchiveLine"
-              @click="archiveDataservice"
-            >
-              {{ dataservice.archived_at ? $t('Désarchiver') : $t('Archiver') }}
-            </BrandedButton>
-          </template>
-        </BannerAction>
-        <BannerAction
-          v-if="!dataservice.deleted_at"
-          type="danger"
-          :title="$t(`Supprimer l'API`)"
-        >
-          {{ $t("Attention, cette action ne peut pas être annulée.") }}
-          <template #button>
-            <AdminDeleteModal
-              :title="$t('Êtes-vous sûr de vouloir supprimer cette API ?')"
-              :delete-url="`/api/1/dataservices/${route.params.id}`"
-              :delete-button-label="$t(`Supprimer l'API`)"
-              :deletable-object="dataservice"
-              object-type="dataservice"
-              :object-title="dataservice.title"
-              @deleted="onDataserviceDeleted"
-            >
-              <template #button="{ attrs, listeners }">
-                <BrandedButton
-                  color="danger"
-                  size="xs"
-                  :icon="RiDeleteBin6Line"
-                  v-bind="attrs"
-                  v-on="listeners"
-                >
-                  {{ $t('Supprimer') }}
-                </BrandedButton>
-              </template>
-              <p class="fr-text--bold">
-                {{ $t("Cette action est irréversible.") }}
-              </p>
-            </AdminDeleteModal>
-          </template>
-        </BannerAction>
-      </div>
+            <template #button>
+              <BrandedButton
+                :icon="RiArchiveLine"
+                @click="archiveDataservice"
+              >
+                {{ dataservice.archived_at ? $t('Désarchiver') : $t('Archiver') }}
+              </BrandedButton>
+            </template>
+          </BannerAction>
+          <BannerAction
+            v-if="!dataservice.deleted_at"
+            type="danger"
+            :title="$t(`Supprimer l'API`)"
+          >
+            {{ $t("Attention, cette action ne peut pas être annulée.") }}
+            <template #button>
+              <AdminDeleteModal
+                :title="$t('Êtes-vous sûr de vouloir supprimer cette API ?')"
+                :delete-url="`/api/1/dataservices/${route.params.id}`"
+                :delete-button-label="$t(`Supprimer l'API`)"
+                :deletable-object="dataservice"
+                object-type="dataservice"
+                :object-title="dataservice.title"
+                @deleted="onDataserviceDeleted"
+              >
+                <template #button="{ attrs, listeners }">
+                  <BrandedButton
+                    color="danger"
+                    size="xs"
+                    :icon="RiDeleteBin6Line"
+                    v-bind="attrs"
+                    v-on="listeners"
+                  >
+                    {{ $t('Supprimer') }}
+                  </BrandedButton>
+                </template>
+                <p class="fr-text--bold">
+                  {{ $t("Cette action est irréversible.") }}
+                </p>
+              </AdminDeleteModal>
+            </template>
+          </BannerAction>
+        </div>
+      </template>
     </DescribeDataservice>
   </LoadingBlock>
 </template>

components/DataservicesSelect.vue

@@ -7,6 +7,7 @@
     :a-label="$t('une API')"
     :this-label="$t('cette API')"
     :allow-reorder
+    :read-only
     :suggest="(query) => $api<PaginatedArray<Dataservice>>('/api/1/dataservices/', { query }).then(({ data }) => data)"
     :fetch="(id) => $api<Dataservice>(`/api/1/dataservices/${id}/`)"
     :object-image-url="(dataservice) => ''"
@@ -19,6 +20,12 @@
         class="w-full"
       />
     </template>
+    <template
+      v-if="$slots.empty"
+      #empty
+    >
+      <slot name="empty" />
+    </template>
   </ObjectsSelect>
 </template>
 
@@ -30,9 +37,11 @@ withDefaults(defineProps<{
   single?: boolean
   label?: string
   allowReorder?: boolean
+  readOnly?: boolean
 }>(), {
   single: false,
   allowReorder: true,
+  readOnly: false,
 })
 
 const selectedDataservices = defineModel<Array<Dataservice>>({ required: true })