IO-3092 add messaging support for imgproxy

client/src/components/chat-media-selector/chat-media-selector.component.jsx

@@ -1,7 +1,8 @@
 import { PictureFilled } from "@ant-design/icons";
 import { useQuery } from "@apollo/client";
+import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { Badge, Popover } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -9,6 +10,7 @@ import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import JobsDocumentImgproxyGalleryExternal from "../jobs-documents-imgproxy-gallery/jobs-documents-imgproxy-gallery.external.component";
 import JobDocumentsLocalGalleryExternal from "../jobs-documents-local-gallery/jobs-documents-local-gallery.external.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
@@ -23,6 +25,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(ChatMediaSelector);
 export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, conversation }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
+  const {
+    treatments: { Imgproxy }
+  } = useSplitTreatments({
+    attributes: {},
+    names: ["Imgproxy"],
+    splitKey: bodyshop && bodyshop.imexshopid
+  });
 
   const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
     fetchPolicy: "network-only",
@@ -42,6 +51,9 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
     setSelectedMedia([]);
   }, [setSelectedMedia, conversation]);
 
+
+  //Knowingly taking on the technical debt of poor implementation below.
+  //Cloudinary will be removed once the migration is completed. 
   const content = (
     <div>
       {loading && <LoadingSpinner />}
@@ -49,13 +61,19 @@ export function ChatMediaSelector({ bodyshop, selectedMedia, setSelectedMedia, c
       {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
         <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
       ) : null}
-      {!bodyshop.uselocalmediaserver && data && (
+      {Imgproxy.treatment === "on" && !bodyshop.uselocalmediaserver && data && (
+        <JobsDocumentImgproxyGalleryExternal
+          jobId={conversation.job_conversations[0].jobid}
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+        />
+      )}
+      {Imgproxy.treatment !== "on" && !bodyshop.uselocalmediaserver && data && (
         <JobDocumentsGalleryExternal
           data={data ? data.documents : []}
           externalMediaState={[selectedMedia, setSelectedMedia]}
         />
       )}
-      {bodyshop.uselocalmediaserver && open && (
+      {Imgproxy.treatment !== "on" && bodyshop.uselocalmediaserver && open && (
         <JobDocumentsLocalGalleryExternal
           externalMediaState={[selectedMedia, setSelectedMedia]}
           jobId={conversation.job_conversations[0] && conversation.job_conversations[0].jobid}