Fix: Show legacy web headers (#1911)

* task: added legacy head tag rtk query

* task: render legacy head tags on preview & add notif message

* task: only skip first res item

* task: removed comment

* task: removed unused import

* task: moved query to instance

src/shell/components/Head/Head.js

@@ -1,8 +1,8 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { connect } from "react-redux";
 import cx from "classnames";
 
-import Button from "@mui/material/Button";
+import { Button, Box } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 
 import { Notice } from "@zesty-io/core/Notice";
@@ -12,6 +12,7 @@ import { Preview } from "./Preview";
 
 import { fetchHeadTags, addHeadTag } from "shell/store/headTags";
 import { useDomain } from "shell/hooks/use-domain";
+import { useGetLegacyHeadTagsQuery } from "../../services/instance";
 
 import styles from "./Head.less";
 export default connect((state, props) => {
@@ -40,11 +41,34 @@ export default connect((state, props) => {
   };
 })(function Head(props) {
   const domain = useDomain();
+  const { data: rawLegacyHeadTags } = useGetLegacyHeadTagsQuery();
 
   useEffect(() => {
     props.dispatch(fetchHeadTags());
   }, []);
 
+  const legacyHeadTags = useMemo(() => {
+    const customRawLegacyHeadTags = rawLegacyHeadTags?.filter(
+      (tag) => tag.resourceZUID === null && tag.ID > 1
+    );
+
+    return customRawLegacyHeadTags?.map((tag) => {
+      const attributes = tag?.keys?.split("*|*").map((attr) => {
+        const [key, value] = attr.split(":");
+
+        return {
+          key,
+          value,
+        };
+      });
+
+      return {
+        type: tag.nodeName,
+        attributes,
+      };
+    });
+  }, [rawLegacyHeadTags]);
+
   function handleAdd() {
     props.dispatch(addHeadTag(props.resourceZUID, props.tags.length));
   }
@@ -73,6 +97,15 @@ export default connect((state, props) => {
           </h1>
         </div>
 
+        {legacyHeadTags?.length && (
+          <Box sx={{ mx: 2 }} component="h1">
+            <Notice>
+              This instance has legacy head tags. If you want to edit or delete
+              these, please contact support.
+            </Notice>
+          </Box>
+        )}
+
         {props.tags.length ? (
           props.tags
             .sort((a, b) => (a.sort > b.sort ? 1 : -1))
@@ -93,6 +126,7 @@ export default connect((state, props) => {
         instanceName={props.instanceName}
         domain={domain}
         tags={props.tags}
+        legacyHeadTags={legacyHeadTags}
       />
     </div>
   );

src/shell/components/Head/Preview/Preview.js

@@ -37,6 +37,16 @@ export const Preview = (props) => (
                 .join(" ")} />`
           )
           .join("\n")}
+      {`\n`}
+      {props.legacyHeadTags &&
+        props.legacyHeadTags
+          .map(
+            (tag) =>
+              `  <${tag.type} ${tag.attributes
+                .map((attr) => `${attr.key}="${attr.value}"`)
+                .join(" ")} />`
+          )
+          .join("\n")}
 
       <div className={styles.Tag}>{`</head>`}</div>
     </pre>

src/shell/services/instance.ts

@@ -2,7 +2,13 @@ import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 import instanceZUID from "../../utility/instanceZUID";
 import { getResponseData, prepareHeaders } from "./util";
 import { resolveResourceType } from "../../utility/resolveResourceType";
-import { Audit, ContentItem, ContentModel, Publishing } from "./types";
+import {
+  Audit,
+  ContentItem,
+  ContentModel,
+  Publishing,
+  LegacyHeader,
+} from "./types";
 
 // Define a service using a base URL and expected endpoints
 export const instanceApi = createApi({
@@ -115,6 +121,10 @@ export const instanceApi = createApi({
       }),
       invalidatesTags: ["ContentModels"],
     }),
+    getLegacyHeadTags: builder.query<LegacyHeader[], void>({
+      query: () => `/web/headers`,
+      transformResponse: getResponseData,
+    }),
   }),
 });
 
@@ -131,4 +141,5 @@ export const {
   useGetContentItemPublishingsQuery,
   useGetLangsMappingQuery,
   useCreateContentModelFromTemplateMutation,
+  useGetLegacyHeadTagsQuery,
 } = instanceApi;

src/shell/services/types.ts

@@ -155,3 +155,21 @@ export interface Audit {
   lastName: string;
   email: string;
 }
+
+export interface LegacyHeader {
+  ID: number;
+  active: number;
+  comment: string | null;
+  createdAt: string;
+  isLocked: number | null;
+  keys: string;
+  module: number;
+  nodeName: string;
+  plugin: number;
+  resourceZUID: string;
+  sort: number;
+  template: number;
+  type: string;
+  updatedAt: string;
+  value: string | null;
+}