fix(devcomponents): hide if not preview mode (#59)

* fix(devcomponents): hide if not preview mode * test: add import for is preview mode * refactor(slider): remove comments * refactor(tpp): use $isPreviewMode --------- Co-authored-by: Jonas Scholz <[email protected]>
e-Spirit · Mar 14, 2023 · 38e399d · 38e399d
1 parent 7ed45fb
commit 38e399d
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 52 deletions.
diff --git a/components/AddSection.vue b/components/AddSection.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="mode === FSXAContentMode.PREVIEW"
-    class="my-10 flex flex-col items-center"
-  >
+  <div class="my-10 flex flex-col items-center">
     <button
       class="flex w-fit items-center space-x-2 border border-black px-4 py-2 font-medium hover:bg-gray-50"
       :onclick="() => $createSection(bodyName)"
@@ -28,11 +25,5 @@
 </template>
 
 <script setup lang="ts">
-import { FSXAContentMode } from "fsxa-api";
-
 defineProps<{ bodyName: string }>();
-
-const {
-  public: { mode },
-} = useRuntimeConfig();
 </script>
diff --git a/components/Page/Body.vue b/components/Page/Body.vue
@@ -6,22 +6,20 @@
       class="group relative my-10"
       data-testid="pageBodyChild"
     >
-      <DevOnly>
-        <Dev
-          v-if="showDev"
-          :content="pageBodyContent"
-          class="hidden group-hover:block"
-          component-name="section"
-        />
-      </DevOnly>
+      <Dev
+        v-if="showDev && $isPreviewMode"
+        :content="pageBodyContent"
+        class="hidden group-hover:block"
+        component-name="section"
+      />
 
       <component
         :is="getComponentFromPageBodyContent(pageBodyContent)"
         :content="pageBodyContent"
       />
     </div>
     <ClientOnly>
-      <AddSection :body-name="pageBody.name" />
+      <AddSection v-if="$isPreviewMode" :body-name="pageBody.name" />
     </ClientOnly>
   </div>
 </template>
@@ -32,6 +30,8 @@ defineProps<{ pageBody: PageBody }>();
 
 const { showDev } = useDev();
 
+const { $isPreviewMode } = useNuxtApp();
+
 function getComponentFromPageBodyContent(pageBodyContent: PageBodyContent) {
   switch (pageBodyContent.type) {
     case "Dataset":

diff --git a/components/PageBodyContent/Content2Section.vue b/components/PageBodyContent/Content2Section.vue
@@ -1,18 +1,29 @@
 <template>
   <div data-testid="content2section">
-    <component :is="content2SectionComponent" :content="content" />
+    <component
+      :is="content2SectionComponent"
+      v-if="content2SectionComponent"
+      :content="content"
+    />
+
+    <Unknown
+      v-if="!content2SectionComponent && $isPreviewMode"
+      :content="content"
+      :data="content.data"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Content2Section } from "fsxa-api";
 
 const props = defineProps<{ content: Content2Section }>();
+const { $isPreviewMode } = useNuxtApp();
 
 const content2SectionComponent = computed(() => {
   switch (props.content.sectionType) {
     default:
-      return resolveComponent("Unknown");
+      return undefined;
   }
 });
 </script>
diff --git a/components/PageBodyContent/Dataset.vue b/components/PageBodyContent/Dataset.vue
@@ -1,17 +1,28 @@
 <template>
   <div data-testid="dataset">
-    <component :is="datasetComponent" :content="content" />
+    <component
+      :is="datasetComponent"
+      v-if="datasetComponent"
+      :content="content"
+    />
+    <Unknown
+      v-if="!datasetComponent && $isPreviewMode"
+      :content="content"
+      :data="content.data"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Dataset } from "fsxa-api";
 const props = defineProps<{ content: Dataset }>();
 
+const { $isPreviewMode } = useNuxtApp();
+
 const datasetComponent = computed(() => {
   switch (props.content.template) {
     default:
-      return resolveComponent("Unknown");
+      return undefined;
   }
 });
 </script>
diff --git a/components/PageBodyContent/Section.vue b/components/PageBodyContent/Section.vue
@@ -3,19 +3,25 @@
     <component
       :is="sectionComponent"
       v-if="sectionComponent"
-      :content="content"
       :data="content.data"
       :data-preview-id="
         content.previewId?.split('.')[0] !== '' ? content.previewId : undefined
       "
     />
+    <Unknown
+      v-if="!sectionComponent && $isPreviewMode"
+      :content="content"
+      :data="content.data"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Section } from "fsxa-api";
 const props = defineProps<{ content: Section }>();
 
+const { $isPreviewMode } = useNuxtApp();
+
 const sectionComponent = computed(() => {
   switch (props.content.sectionType) {
     case "interesting_facts":
@@ -27,7 +33,7 @@ const sectionComponent = computed(() => {
     case "teaser":
       return resolveComponent("SectionTeaser");
     default:
-      return resolveComponent("Unknown");
+      return undefined;
   }
 });
 </script>
diff --git a/components/Section/Header.vue b/components/Section/Header.vue
@@ -1,13 +1,11 @@
 <template>
   <div class="group relative h-64" data-testid="headerSection">
-    <DevOnly>
-      <Dev
-        v-if="showDev"
-        :content="data"
-        class="hidden group-hover:block"
-        component-name="Page Header"
-      />
-    </DevOnly>
+    <Dev
+      v-if="showDev && $isPreviewMode"
+      :content="data"
+      class="hidden group-hover:block"
+      component-name="Page Header"
+    />
     <div
       class="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-80 p-6 text-white md:p-12"
     >
@@ -40,6 +38,8 @@ import { DataEntries } from "fsxa-api";
 
 defineProps<{ data: DataEntries }>();
 
+const { $isPreviewMode } = useNuxtApp();
+
 const { showDev } = useDev();
 
 const breadcrumbs = computed(() => {

diff --git a/components/Section/Slider.vue b/components/Section/Slider.vue
@@ -1,14 +1,12 @@
 <template>
   <div data-testid="sliderSection">
     <div class="group relative">
-      <DevOnly>
-        <Dev
-          v-if="showDev"
-          :content="data"
-          class="hidden group-hover:block"
-          component-name="Slider"
-        />
-      </DevOnly>
+      <Dev
+        v-if="showDev && $isPreviewMode"
+        :content="data"
+        class="hidden group-hover:block"
+        component-name="Slider"
+      />
       <div v-if="activeSlide" class="realtive text-white">
         <div class="sliderButtonContainer left-0">
           <button class="sliderButton pr-8" @click="prevSlide">
@@ -64,9 +62,6 @@
           :image="activeSlide?.data.st_picture"
         />
       </div>
-
-      <!-- {{ activeImage }} {{ data.data }} -->
-      <!-- <pre>{{ activeSlide.data }}</pre> -->
     </div>
   </div>
 </template>
@@ -76,6 +71,8 @@ import { Image, RichTextElement, Section } from "fsxa-api";
 
 const { showDev } = useDev();
 
+const { $isPreviewMode } = useNuxtApp();
+
 interface SliderSlide extends Section {
   data: {
     st_button: {

diff --git a/plugins/2.setupProxyApi.ts b/plugins/2.setupProxyApi.ts
@@ -1,4 +1,4 @@
-import { FSXAProxyApi, LogLevel } from "fsxa-api";
+import { FSXAContentMode, FSXAProxyApi, LogLevel } from "fsxa-api";
 
 export default defineNuxtPlugin(() => {
   const runtimeConfig = useRuntimeConfig();
@@ -14,6 +14,7 @@ export default defineNuxtPlugin(() => {
   return {
     provide: {
       fsxaApi,
+      isPreviewMode: runtimeConfig.public.mode === FSXAContentMode.PREVIEW,
     },
   };
 });
diff --git a/plugins/3.tpp.client.ts b/plugins/3.tpp.client.ts
@@ -1,4 +1,3 @@
-import { FSXAContentMode } from "fsxa-api";
 import TPP_SNAP from "fs-tpp-api";
 import {
   onNavigationChangeHandler,
@@ -10,12 +9,9 @@ import {
  * Nuxt plugin that initializes the TPP Snap, only works if you are in the FirstSpirit editor and if the environment variable FSXA_MODE is set to "preview"
  */
 export default defineNuxtPlugin(() => {
-  const {
-    public: { mode },
-  } = useRuntimeConfig();
+  const { $isPreviewMode } = useNuxtApp();
 
-  // Set by environment variable
-  if (mode !== FSXAContentMode.PREVIEW) return;
+  if (!$isPreviewMode) return;
 
   TPP_SNAP.isConnected.then(async (_isConnected: boolean) => {
     const initialized = await onInit();

diff --git a/tests/pages/[...slug].spec.ts b/tests/pages/[...slug].spec.ts
@@ -36,7 +36,7 @@ describe("slug page", () => {
     addToCachedDatasets: (_route: string, _dataset: Dataset) => null,
   };
 
-  // test cases broken because testutils do not wait for async data
+  // test cases broken because testutils do not wait for useasyncdata
   describe.skip("page not cached", () => {
     it("render with homepage layout prop => render homepage layout component", async () => {
       vi.spyOn(content, "useContent").mockReturnValue({

diff --git a/tests/testutils/nuxtMocks.ts b/tests/testutils/nuxtMocks.ts
@@ -63,6 +63,7 @@ export function useNuxtApp() {
         addEventListener: (_event: string, _cb: (data: any) => void) => null,
       }),
     },
+    $isPreviewMode: true,
   };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -63,6 +63,7 @@ export function useNuxtApp() { @@
             addEventListener: (_event: string, _cb: (data: any) => void) => null,
           }),
         },
+        $isPreviewMode: true,
       };
     }
@@ Expand Down @@