Add read only mode (#197)

datagouv · Dec 12, 2024 · a8a5290 · a8a5290
1 parent 3565c06
commit a8a5290
Show file tree

Hide file tree

Showing 13 changed files with 155 additions and 40 deletions.
diff --git a/components/AdminPublishButton/AdminPublishButton.vue b/components/AdminPublishButton/AdminPublishButton.vue
@@ -1,5 +1,6 @@
 <template>
   <NuxtLinkLocale
+    v-if="!config.public.readOnlyMode"
     :to="link"
     class="fr-btn fr-icon-add-line fr-btn--icon-left"
   >
@@ -21,6 +22,8 @@ const props = defineProps<{
 
 const { t } = useI18n()
 
+const config = useRuntimeConfig()
+
 const link = computed(() => {
   switch (props.type) {
     case 'dataset':

diff --git a/components/BannerAction.vue b/components/BannerAction.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="group flex items-center justify-between rounded border p-2.5 group"
+    class="group flex items-center justify-between rounded border p-2.5"
     :data-banner-action-type="type"
     :class="{
       '!border-datagouv bg-datagouv-lightest text-datagouv-dark': type === 'primary',

diff --git a/components/BannerReadOnly.vue b/components/BannerReadOnly.vue
@@ -0,0 +1,12 @@
+<template>
+  <BannerSticky
+    v-if="config.public.readOnlyMode"
+    type="warning"
+  >
+    {{ $t('Due to security reasons, the creation of new content is currently disabled.') }}
+  </BannerSticky>
+</template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig()
+</script>
diff --git a/components/BannerSticky.vue b/components/BannerSticky.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="group flex items-center justify-between rounded group-data-[with-container=true]/layout:!px-0 p-4 md:px-6"
+    :data-banner-action-type="type"
+    :class="{
+      'bg-datagouv-lightest text-datagouv-dark': type === 'info',
+      'bg-danger-lightest text-danger-dark': type === 'error',
+      'bg-warning-lightest text-warning-dark': type === 'warning',
+      'bg-success-lighter text-success-darker': type === 'success',
+    }"
+  >
+    <div class="group-data-[with-container=true]/layout:container flex items-center">
+      <component
+        :is="icon"
+        class="size-4 mr-2"
+      />
+      <div class="flex-1">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RiAlertLine, RiCheckDoubleLine, RiInformationLine, RiSpamLine } from '@remixicon/vue'
+
+const props = defineProps<{
+  type: 'info' | 'error' | 'warning' | 'success'
+}>()
+
+const icon = computed(() => {
+  switch (props.type) {
+    case 'info':
+      return RiInformationLine
+    case 'error':
+      return RiSpamLine
+    case 'warning':
+      return RiAlertLine
+    case 'success':
+      return RiCheckDoubleLine
+    default:
+      return throwOnNever(props.type as never, 'Unknown banner type')
+  }
+})
+</script>
diff --git a/components/DesignSystem/BannerSticky.vue b/components/DesignSystem/BannerSticky.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <BannerSticky
+      v-for="type in ['info', 'error', 'warning', 'success']"
+      :key="type"
+      :type
+      class="mb-4"
+    >
+      Ces ressources sont publiées par la communauté et ne sont pas sous la responsabilité du producteur des données.
+    </BannerSticky>
+  </div>
+</template>
diff --git a/components/SiteHeader/SiteHeader.vue b/components/SiteHeader/SiteHeader.vue
@@ -126,7 +126,7 @@
                           <li
                             class="fr-nav__item"
                           >
-                            <ClientOnly>
+                            <ClientOnly v-if="!config.public.readOnlyMode">
                               <Disclosure>
                                 <DisclosureButton
                                   class="fr-nav__btn justify-start after:!ml-auto"
@@ -338,7 +338,7 @@
             <li
               class="fr-nav__item ml-auto sm:!hidden xl:!flex"
             >
-              <ClientOnly>
+              <ClientOnly v-if="!config.public.readOnlyMode">
                 <Popover>
                   <PopoverButton
                     class="fr-nav__btn !w-64 inline after:!align-middle"

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,6 +1,10 @@
 <template>
-  <div>
+  <div
+    class="group/layout"
+    :data-with-container="true"
+  >
     <SiteHeader />
+    <BannerReadOnly />
     <slot />
   </div>
 </template>
diff --git a/layouts/fluid.vue b/layouts/fluid.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="flex flex-col">
+  <div
+    class="group/layout flex flex-col"
+    :data-with-container="false"
+  >
     <SiteHeader :fluid="true" />
+    <BannerReadOnly :fluid="true" />
     <slot />
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -67,6 +67,8 @@ export default defineNuxtConfig({
       changeEmailPage: 'change-email',
       changePasswordPage: 'change',
 
+      readOnlyMode: false,
+
       sentry: {
         dsn: '',
       },

diff --git a/pages/design.vue b/pages/design.vue
@@ -1,83 +1,114 @@
 <template>
   <DevOnly>
-    <div class="fr-container space-y-8 my-8 bg-gray-100 pb-64">
-      <div>
-        <h1 class="!mb-3">
+    <div class="fr-container space-y-8 py-8 bg-gray-100 pb-32">
+      <h1 class="!mb-3">
+        Design System
+      </h1>
+      <section>
+        <h2 class="!mb-3">
           Colors
-        </h1>
+        </h2>
 
         <div class="space-y-4">
           <div>
-            <h2 class="!mb-2">
+            <h3 class="!mb-2">
               Info
-            </h2>
+            </h3>
 
             <div class="flex space-x-4">
               <div class="size-12 bg-datagouv" />
               <div class="size-12 bg-datagouv-lightest" />
             </div>
           </div>
           <div>
-            <h2 class="!mb-2">
+            <h3 class="!mb-2">
               Danger
-            </h2>
+            </h3>
 
             <div class="flex space-x-4">
               <div class="size-12 bg-danger-dark" />
               <div class="size-12 bg-danger-lightest" />
             </div>
           </div>
           <div>
-            <h2 class="!mb-2">
+            <h3 class="!mb-2">
               Warning
-            </h2>
+            </h3>
 
             <div class="flex space-x-4">
               <div class="size-12 bg-warning-dark" />
               <div class="size-12 bg-warning-lightest" />
             </div>
           </div>
           <div>
-            <h2 class="!mb-2">
+            <h3 class="!mb-2">
               Success
-            </h2>
+            </h3>
 
             <div class="flex space-x-4">
               <div class="size-12 bg-success-dark" />
               <div class="size-12 bg-success-lightest" />
             </div>
           </div>
         </div>
-      </div>
+      </section>
 
-      <div>
-        <h1 class="!mb-3">
+      <section>
+        <h2 class="!mb-3">
           BrandedButton
-        </h1>
+        </h2>
 
         <BrandedButton />
-      </div>
-      <div>
-        <h1 class="!mb-3">
+      </section>
+      <section>
+        <h2 class="!mb-3">
           AdminBadge
-        </h1>
+        </h2>
 
         <AdminBadge />
-      </div>
-      <div>
-        <h1 class="!mb-3">
+      </section>
+      <section>
+        <h2 class="!mb-3">
           BannerAction
-        </h1>
+        </h2>
 
         <BannerAction />
-      </div>
-      <div>
-        <h1 class="!mb-3">
+      </section>
+      <section>
+        <h2 class="!mb-3">
           BannerNotif
-        </h1>
+        </h2>
 
         <BannerNotif />
-      </div>
+      </section>
+    </div>
+    <div class="space-y-8 py-8 pb-64">
+      <h2 class="!mb-3">
+        Full width content
+      </h2>
+
+      <section class="space-y-3">
+        <h3 class="!mb-3">
+          BannerSticky in a contained page
+        </h3>
+
+        <div class="flex gap-3">
+          <NuxtLinkLocale
+            :external="true"
+            to="https://www.figma.com/design/fvtAhJSd1hURLxy8GXmc3k/%F0%9F%8E%81-%5BWIP%5D-Syt%C3%A8me-U?node-id=105-4173&t=5JmPave6D8hPb2gG-4"
+          >
+            View design
+          </NuxtLinkLocale>
+          <NuxtLinkLocale
+            :external="true"
+            to="https://github.com/datagouv/front-end/blob/main/components/BannerSticky.vue"
+          >
+            View code
+          </NuxtLinkLocale>
+        </div>
+
+        <DesignSystemBannerSticky />
+      </section>
     </div>
   </DevOnly>
 </template>

diff --git a/sentry.server.config.ts b/sentry.server.config.ts
@@ -1,5 +1,5 @@
-import * as Sentry from "@sentry/nuxt";
-import dotenv from "dotenv";
+import * as Sentry from '@sentry/nuxt'
+import dotenv from 'dotenv'
 
 dotenv.config()
 
@@ -11,4 +11,4 @@ Sentry.init({
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control
   tracesSampleRate: 0.1,
-});
+})
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -66,7 +66,10 @@ export default {
         },
         success: {
           lightest: '#ECF7F0',
+          lighter: '#C3FAD5',
           dark: '#27A658',
+          darker: '#1f8d49', // from DSFR to avoid contrast issue
+          darkest: '#18753c', // from DSFR to avoid contrast issue
         },
       },
       typography: theme => ({

diff --git a/utils/never.ts b/utils/never.ts
@@ -1,4 +1,3 @@
 export function throwOnNever(_: never, message: string): never {
-    throw new Error(message);
-  }
-
+  throw new Error(message)
+}