feat(SW-1818): Refactored sysAsset handling to support PDF links

Approved-by: Matilda Landström

apps/scandic-web/components/JsonToHtml/renderOptions.tsx

@@ -429,11 +429,7 @@ export const renderOptions: RenderOptions = {
                 embeds,
                 fullRenderOptions
               )}
-              <MaterialIcon
+              <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-                icon="open_in_new"
-                size={20}
-                color="Icon/Interactive/Default"
-              />
             </Link>
           )
         }

apps/scandic-web/lib/graphql/Fragments/Blocks/Accordion.graphql

@@ -1,4 +1,4 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 
 #import "../PageLink/AccountPageLink.graphql"
 #import "../PageLink/CollectionPageLink.graphql"
@@ -33,7 +33,7 @@ fragment AccordionBlock on Accordion {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
             ...AccountPageLink
             ...CollectionPageLink
             ...ContentPageLink
@@ -60,7 +60,7 @@ fragment GlobalAccordionBlock on GlobalAccordion {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
             ...AccountPageLink
             ...CollectionPageLink
             ...ContentPageLink
@@ -113,7 +113,7 @@ fragment SpecificAccordion_ContentPage on ContentPageBlocksAccordionBlockAccordi
           edges {
             node {
               __typename
-              ...Image
+              ...SysAsset
               ...AccountPageLink
               ...CollectionPageLink
               ...ContentPageLink
@@ -214,7 +214,7 @@ fragment SpecificAccordion_DestinationCityPage on DestinationCityPageBlocksAccor
           edges {
             node {
               __typename
-              ...Image
+              ...SysAsset
               ...AccountPageLink
               ...CollectionPageLink
               ...ContentPageLink
@@ -315,7 +315,7 @@ fragment SpecificAccordion_DestinationCountryPage on DestinationCountryPageBlock
           edges {
             node {
               __typename
-              ...Image
+              ...SysAsset
               ...AccountPageLink
               ...CollectionPageLink
               ...ContentPageLink

apps/scandic-web/lib/graphql/Fragments/Blocks/Content.graphql

@@ -1,4 +1,4 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 #import "../ImageContainer.graphql"
 
 #import "../PageLink/AccountPageLink.graphql"
@@ -28,7 +28,7 @@ fragment Content_ContentPage on ContentPageBlocksContent {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
             ...ImageContainer
             ...AccountPageLink
             ...CollectionPageLink
@@ -78,7 +78,7 @@ fragment Content_LoyaltyPage on LoyaltyPageBlocksContent {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
             ...ImageContainer
             ...AccountPageLink
             ...CollectionPageLink

apps/scandic-web/lib/graphql/Fragments/Blocks/Text.graphql

@@ -1,4 +1,4 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 
 fragment TextBlock on CurrentBlocksPageBlocksText {
   text {
@@ -8,7 +8,7 @@ fragment TextBlock on CurrentBlocksPageBlocksText {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
           }
         }
       }

apps/scandic-web/lib/graphql/Fragments/Blocks/TextContent.graphql

@@ -1,4 +1,4 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 
 fragment TextContent_AccountPage on AccountPageContentTextContent {
   text_content {
@@ -9,7 +9,7 @@ fragment TextContent_AccountPage on AccountPageContentTextContent {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
           }
         }
       }

apps/scandic-web/lib/graphql/Fragments/CurrentFooter/AppDownloads.graphql

@@ -1,4 +1,4 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 
 fragment CurrentFooterAppDownloads on CurrentFooter {
   app_downloads {
@@ -8,7 +8,7 @@ fragment CurrentFooterAppDownloads on CurrentFooter {
       imageConnection {
         edges {
           node {
-            ...Image
+            ...SysAsset
           }
         }
       }
@@ -18,7 +18,7 @@ fragment CurrentFooterAppDownloads on CurrentFooter {
       imageConnection {
         edges {
           node {
-            ...Image
+            ...SysAsset
           }
         }
       }

apps/scandic-web/lib/graphql/Fragments/CurrentFooter/Logo.graphql

@@ -1,10 +1,10 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 
 fragment Logo on CurrentFooter {
   logoConnection {
     edges {
       node {
-        ...Image
+        ...SysAsset
       }
     }
   }

apps/scandic-web/lib/graphql/Fragments/CurrentFooter/TripAdvisor.graphql

@@ -1,11 +1,11 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 
 fragment TripAdvisor on CurrentFooter {
   trip_advisor {
     logoConnection {
       edges {
         node {
-          ...Image
+          ...SysAsset
         }
       }
     }

apps/scandic-web/lib/graphql/Fragments/Hero.graphql

@@ -1,11 +1,11 @@
-#import "./Image.graphql"
+#import "./SysAsset.graphql"
 
 fragment Hero on Hero {
   imagesConnection {
     totalCount
     edges {
       node {
-        ...Image
+        ...SysAsset
       }
     }
   }

apps/scandic-web/lib/graphql/Fragments/Preamble.graphql

@@ -1,4 +1,4 @@
-#import "./Image.graphql"
+#import "./SysAsset.graphql"
 
 fragment Preamble on CurrentBlocksPage {
   preamble {
@@ -8,7 +8,7 @@ fragment Preamble on CurrentBlocksPage {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
           }
         }
       }

apps/scandic-web/lib/graphql/Fragments/Puff.graphql

@@ -1,10 +1,10 @@
-#import "./Image.graphql"
+#import "./SysAsset.graphql"
 
 fragment Puff on Puff {
   imageConnection {
     edges {
       node {
-        ...Image
+        ...SysAsset
       }
     }
   }

apps/scandic-web/lib/graphql/Fragments/Sidebar/Content.graphql

@@ -1,4 +1,4 @@
-#import "../Image.graphql"
+#import "../SysAsset.graphql"
 #import "../ImageContainer.graphql"
 
 #import "../PageLink/AccountPageLink.graphql"
@@ -29,7 +29,7 @@ fragment ContentSidebar_ContentPage on ContentPageSidebarContent {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
             ...ImageContainer
             ...AccountPageLink
             ...CollectionPageLink
@@ -79,7 +79,7 @@ fragment ContentSidebar_LoyaltyPage on LoyaltyPageSidebarContent {
         edges {
           node {
             __typename
-            ...Image
+            ...SysAsset
             ...ImageContainer
             ...AccountPageLink
             ...CollectionPageLink

apps/scandic-web/lib/graphql/Fragments/SysAsset.graphql

@@ -1,4 +1,4 @@
-fragment Image on SysAsset {
+fragment SysAsset on SysAsset {
   content_type
   description
   dimension {

apps/scandic-web/lib/graphql/Query/Current/Header.graphql

@@ -1,4 +1,4 @@
-#import "../../Fragments/Image.graphql"
+#import "../../Fragments/SysAsset.graphql"
 #import "../../Fragments/System.graphql"
 
 query GetCurrentHeader($locale: String!) {
@@ -8,7 +8,7 @@ query GetCurrentHeader($locale: String!) {
       logoConnection {
         edges {
           node {
-            ...Image
+            ...SysAsset
           }
         }
       }

apps/scandic-web/server/routers/contentstack/schemas/blocks/accordion.ts

@@ -5,11 +5,11 @@ import {
   linkUnionSchema,
   transformPageLink,
 } from "../pageLinks"
-import { imageSchema } from "./image"
+import { sysAssetSchema } from "./sysAsset"
 
 import { BlocksEnums } from "@/types/enums/blocks"
 
-export const embeddedContentSchema = z.union([linkUnionSchema, imageSchema])
+export const embeddedContentSchema = z.union([linkUnionSchema, sysAssetSchema])
 
 export const accordionItemsSchema = z.array(
   z.object({

apps/scandic-web/server/routers/contentstack/schemas/blocks/cards/teaserCard.ts

@@ -14,8 +14,8 @@ import {
   transformPageLink,
 } from "../../pageLinks"
 import { systemSchema } from "../../system"
-import { imageSchema } from "../image"
 import { imageContainerSchema } from "../imageContainer"
+import { sysAssetSchema } from "../sysAsset"
 import { buttonSchema } from "../utils/buttonLinkSchema"
 import { linkConnectionRefsSchema } from "../utils/linkConnection"
 
@@ -47,7 +47,7 @@ export const teaserCardBlockSchema = z.object({
               node: z
                 .discriminatedUnion("__typename", [
                   imageContainerSchema,
-                  imageSchema,
+                  sysAssetSchema,
                   accountPageSchema,
                   collectionPageSchema,
                   contentPageSchema,

apps/scandic-web/server/routers/contentstack/schemas/blocks/content.ts

@@ -12,11 +12,11 @@ import {
   startPageSchema,
   transformPageLink,
 } from "../pageLinks"
-import { imageRefsSchema, imageSchema } from "./image"
 import {
   imageContainerRefsSchema,
   imageContainerSchema,
 } from "./imageContainer"
+import { sysAssetRefsSchema, sysAssetSchema } from "./sysAsset"
 
 import { BlocksEnums } from "@/types/enums/blocks"
 import { ContentEnum } from "@/types/enums/content"
@@ -36,7 +36,7 @@ export const contentSchema = z.object({
               node: z
                 .discriminatedUnion("__typename", [
                   imageContainerSchema,
-                  imageSchema,
+                  sysAssetSchema,
                   accountPageSchema,
                   collectionPageSchema,
                   contentPageSchema,
@@ -72,7 +72,7 @@ export const contentRefsSchema = z.object({
           edges: z.array(
             z.object({
               node: z.discriminatedUnion("__typename", [
-                imageRefsSchema,
+                sysAssetRefsSchema,
                 imageContainerRefsSchema,
                 accountPageSchema,
                 collectionPageSchema,

apps/scandic-web/server/routers/contentstack/schemas/blocks/contentEmbeds.ts

@@ -12,13 +12,13 @@ import {
   startPageSchema,
   transformPageLink,
 } from "../pageLinks"
-import { imageSchema } from "./image"
 import { imageContainerSchema } from "./imageContainer"
+import { sysAssetSchema } from "./sysAsset"
 
 export const contentEmbedsSchema = z
   .discriminatedUnion("__typename", [
     imageContainerSchema,
-    imageSchema,
+    sysAssetSchema,
     accountPageSchema,
     collectionPageSchema,
     contentPageSchema,

apps/scandic-web/server/routers/contentstack/schemas/blocks/image.ts

@@ -1,30 +0,0 @@
-import { z } from "zod"
-
-import { ContentEnum } from "@/types/enums/content"
-
-export const imageSchema = z.object({
-  __typename: z.literal(ContentEnum.blocks.SysAsset),
-  content_type: z.string(),
-  description: z.string().nullable().optional(),
-  dimension: z
-    .object({
-      height: z.number(),
-      width: z.number(),
-    })
-    .nullable(),
-  metadata: z.any(), // JSON
-  // system for SysAssets is not the same type
-  // as for all other types eventhough they have
-  // the exact same structure, that's why systemSchema
-  // is not used as that correlates to the
-  // EntrySystemField type
-  system: z.object({
-    uid: z.string(),
-  }),
-  title: z.string().optional(),
-  url: z.string().optional(),
-})
-
-export const imageRefsSchema = z.object({
-  __typename: z.literal(ContentEnum.blocks.SysAsset),
-})

apps/scandic-web/server/routers/contentstack/schemas/blocks/sysAsset.ts

@@ -0,0 +1,36 @@
+import { z } from "zod"
+
+import { ContentEnum } from "@/types/enums/content"
+
+// SysAsset is used for several different assets in ContentStack, such as images, pdf-files, etc.
+// It is a generic asset type that can represent any file type.
+// A lot of the fields are optional/nullable, hence the use of `.nullish()`.
+// The properties of this schema should be handled inside the components that use it, fe. web/apps/scandic-web/components/JsonToHtml/renderOptions.tsx.
+export const sysAssetSchema = z.object({
+  __typename: z.literal(ContentEnum.blocks.SysAsset),
+  content_type: z.string().nullish(),
+  description: z.string().nullish(),
+  dimension: z
+    .object({
+      height: z.number(),
+      width: z.number(),
+    })
+    .nullish(),
+  metadata: z.any(), // JSON
+  // system for SysAssets is not the same type
+  // as for all other types eventhough they have
+  // the exact same structure, that's why systemSchema
+  // is not used as that correlates to the
+  // EntrySystemField type
+  system: z
+    .object({
+      uid: z.string(),
+    })
+    .nullish(),
+  title: z.string().nullish(),
+  url: z.string().nullish(),
+})
+
+export const sysAssetRefsSchema = z.object({
+  __typename: z.literal(ContentEnum.blocks.SysAsset),
+})

apps/scandic-web/server/routers/contentstack/schemas/blocks/textCols.ts

@@ -5,7 +5,7 @@ import {
   linkUnionSchema,
   transformPageLink,
 } from "../pageLinks"
-import { imageRefsSchema, imageSchema } from "./image"
+import { sysAssetRefsSchema, sysAssetSchema } from "./sysAsset"
 
 import { BlocksEnums } from "@/types/enums/blocks"
 import { ContentEnum } from "@/types/enums/content"
@@ -26,7 +26,7 @@ export const textColsSchema = z.object({
               z.object({
                 node: z
                   .discriminatedUnion("__typename", [
-                    imageSchema,
+                    sysAssetSchema,
                     ...linkUnionSchema.options,
                   ])
                   .transform((data) => {
@@ -59,7 +59,7 @@ export const textColsRefsSchema = z.object({
               edges: z.array(
                 z.object({
                   node: z.discriminatedUnion("__typename", [
-                    imageRefsSchema,
+                    sysAssetRefsSchema,
                     ...linkRefsUnionSchema.options,
                   ]),
                 })

apps/scandic-web/server/routers/contentstack/schemas/blocks/textContent.ts

@@ -1,6 +1,6 @@
 import { z } from "zod"
 
-import { imageSchema } from "./image"
+import { sysAssetSchema } from "./sysAsset"
 
 import { BlocksEnums } from "@/types/enums/blocks"
 
@@ -15,7 +15,7 @@ export const textContentSchema = z.object({
       embedded_itemsConnection: z.object({
         edges: z.array(
           z.object({
-            node: z.discriminatedUnion("__typename", [imageSchema]),
+            node: z.discriminatedUnion("__typename", [sysAssetSchema]),
           })
         ),
         totalCount: z.number(),

apps/scandic-web/server/routers/contentstack/schemas/sidebar/content.ts

@@ -1,10 +1,10 @@
 import { z } from "zod"
 
-import { imageRefsSchema, imageSchema } from "../blocks/image"
 import {
   imageContainerRefsSchema,
   imageContainerSchema,
 } from "../blocks/imageContainer"
+import { sysAssetRefsSchema, sysAssetSchema } from "../blocks/sysAsset"
 import {
   linkRefsUnionSchema,
   linkUnionSchema,
@@ -29,7 +29,7 @@ export const contentSchema = z.object({
               node: z
                 .discriminatedUnion("__typename", [
                   imageContainerSchema,
-                  imageSchema,
+                  sysAssetSchema,
                   ...linkUnionSchema.options,
                 ])
                 .transform((data) => {
@@ -70,7 +70,7 @@ export const contentRefsSchema = z.object({
           edges: z.array(
             z.object({
               node: z.discriminatedUnion("__typename", [
-                imageRefsSchema,
+                sysAssetRefsSchema,
                 ...actualRefs.options,
               ]),
             })