Merge branch 'dev' into fix/3873-search-api-crashing-issue

Author: geodem127

etc/nginx.conf

@@ -33,7 +33,7 @@ http {
       add_header X-Permitted-Cross-Domain-Policies "";
       add_header X-Frame-Options "deny";
       add_header Referrer-Policy "no-referrer-when-downgrade";
-      add_header Content-Security-Policy "connect-src 'self' *.zesty.io *.a.run.app us-central1-zesty-dev.cloudfunctions.net us-central1-zesty-stage.cloudfunctions.net us-central1-zesty-prod.cloudfunctions.net *.sentry.io www.googleapis.com *.amplitude.com *.tiny.cloud *.getbynder.com *.bynder.com d8ejoa1fys2rk.cloudfront.net dam.redshieldtoolkit.org;";
+      add_header Content-Security-Policy "connect-src 'self' *.zesty.io *.a.run.app us-central1-zesty-dev.cloudfunctions.net us-central1-zesty-stage.cloudfunctions.net us-central1-zesty-prod.cloudfunctions.net *.sentry.io www.googleapis.com *.amplitude.com *.tiny.cloud *.getbynder.com *.bynder.com d8ejoa1fys2rk.cloudfront.net dam.redshieldtoolkit.org brand.frontdoor.com;";
       # *.a.run.app - zesty cloudrun apps
       # d8ejoa1fys2rk.cloudfront.net - bynder modules
       # googleapis.com - google fonts

src/apps/content-editor/src/app/components/FieldTypeMedia.tsx

@@ -81,7 +81,6 @@ export const FieldTypeMedia = forwardRef(
     }: FieldTypeMediaProps,
     ref
   ) => {
-    const dndContainerRef = useRef(null);
     const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
     const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
     const [localImageZUIDs, setLocalImageZUIDs] = useState<string[]>(images);
@@ -487,16 +486,14 @@ export const FieldTypeMedia = forwardRef(
     return (
       <>
         <Stack
-          id={name}
-          ref={dndContainerRef}
           data-cy="mediaItem-container"
           gap={1}
           sx={{
             border: (theme) =>
               hasError ? `1px solid ${theme.palette.error.main}` : "none",
           }}
         >
-          <DndContextProvider containerRef={dndContainerRef}>
+          <DndContextProvider>
             {sortedImages.map((image, index) => {
               const isBynderAsset = image?.includes("bynder.com");
 
@@ -750,15 +747,11 @@ export const MediaItem = ({
         alignItems="center"
         sx={{
           border: (theme) => `1px solid ${theme.palette.border}`,
-          borderRadius: "8px",
-          "&:hover": {
-            backgroundColor: "action.hover",
-            cursor: "pointer",
-          },
+          borderRadius: 2,
           backgroundColor: "background.paper",
-          ...(isDragging && {
-            opacity: 0.01,
-          }),
+          overflow: "hidden",
+          opacity: isDragging ? 0 : 1,
+          transform: "translate(0, 0)",
         }}
         position="relative"
       >

src/shell/components/DndContextProvider.tsx

@@ -1,27 +1,14 @@
-import { memo, MutableRefObject, useEffect, useState } from "react";
+import { memo } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 
 const DndContextProvider = memo(
-  ({
-    containerRef,
-    children,
-  }: {
-    containerRef: MutableRefObject<any>;
-    children: React.ReactNode;
-  }) => {
-    const [context, setContext] = useState(null);
-
-    useEffect(() => {
-      if (!containerRef?.current) return;
-      setContext(containerRef?.current);
-    }, [containerRef?.current]);
-
-    return context ? (
-      <DndProvider backend={HTML5Backend} options={{ rootElement: context }}>
+  ({ children }: { children: React.ReactNode }) => {
+    return (
+      <DndProvider backend={HTML5Backend} context={window}>
         {children}
       </DndProvider>
-    ) : null;
+    );
   }
 );
 

src/shell/components/GlobalSearch/index.tsx

@@ -196,15 +196,10 @@ export const GlobalSearch = () => {
 
     const blocksSuggestions: Suggestion[] =
       blocks?.map((block) => {
-        const langCode = languages?.find(
-          (lang: Language) => lang?.ID === block?.langID
-        )?.code;
-        const titlePrefix = !!langCode ? `(${langCode}) ` : "";
-
         return {
           type: "block",
           ZUID: block?.ZUID,
-          title: block?.title, //`${titlePrefix}${block?.label}`,
+          title: block?.title,
           updatedAt: block?.updatedAt,
           url: block?.url,
         };

src/shell/components/RelationalFieldBase/index.tsx

@@ -6,8 +6,6 @@ import {
   KeyboardArrowDownRounded,
   AddRounded,
 } from "@mui/icons-material";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDispatch } from "react-redux";
 
 import { ActiveItem } from "./ActiveItem";
@@ -21,6 +19,7 @@ import { ActiveItemLoading } from "./ActiveItem/ActiveItemLoading";
 import { CreateNewItemDialog } from "./CreateNewItemDialog";
 import { useParams } from "../../hooks/useParams";
 import { CreateContentItemDialogContext } from "../../contexts/CreateContentItemDialogProvider";
+import DndContextProvider from "../DndContextProvider";
 
 type RelationalFieldBaseProps = {
   name: string;
@@ -121,7 +120,7 @@ export const RelationalFieldBase = ({
             <ActiveItemLoading key={index} draggable />
           ))
         ) : (
-          <DndProvider backend={HTML5Backend}>
+          <DndContextProvider>
             {itemZUIDs?.slice(0, showAll ? undefined : 5)?.map((val, index) => (
               <ActiveItem
                 key={val}
@@ -146,7 +145,7 @@ export const RelationalFieldBase = ({
                 }}
               />
             ))}
-          </DndProvider>
+          </DndContextProvider>
         )}
       </Stack>
       {itemZUIDs?.length > 5 && (

src/shell/hooks/useSearchBlocksByKeyword.ts

@@ -186,8 +186,6 @@ export const useSearchBlocksByKeyword = ({
     isLoading,
     variants,
     blocks,
-    languages,
-    users,
     normalizedSearchTerm,
     showAll,
     languageMap,
@@ -203,7 +201,9 @@ export const useSearchBlocksByKeyword = ({
     if (showAll && !!blocks?.length) {
       setIsFetchingVariants(true);
       Promise.all(
-        blocks?.map((block) => dispatch(fetchItems(block?.ZUID)))
+        blocks?.map((block) =>
+          dispatch(fetchItems(block?.ZUID, { limit: 1000 }))
+        )
       ).then(() => {
         setIsFetchingVariants(false);
       });

src/shell/webpack.config.js

@@ -55,7 +55,7 @@ module.exports = async (env) => {
       },
       headers: {
         "Content-Security-Policy":
-          "connect-src 'self' *.zesty.io *.a.run.app us-central1-zesty-dev.cloudfunctions.net us-central1-zesty-stage.cloudfunctions.net us-central1-zesty-prod.cloudfunctions.net *.sentry.io www.googleapis.com *.amplitude.com *.tiny.cloud *.getbynder.com *.bynder.com d8ejoa1fys2rk.cloudfront.net dam.redshieldtoolkit.org;",
+          "connect-src 'self' *.zesty.io *.a.run.app us-central1-zesty-dev.cloudfunctions.net us-central1-zesty-stage.cloudfunctions.net us-central1-zesty-prod.cloudfunctions.net *.sentry.io www.googleapis.com *.amplitude.com *.tiny.cloud *.getbynder.com *.bynder.com d8ejoa1fys2rk.cloudfront.net dam.redshieldtoolkit.org brand.frontdoor.com;",
         // *.a.run.app - zesty cloudrun apps
         // d8ejoa1fys2rk.cloudfront.net - bynder modules
         // googleapis.com - google fonts