Fix: sponsor media upload text preview

package.json

@@ -93,7 +93,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.47",
+    "openstack-uicore-foundation": "5.0.50",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",

src/actions/sponsor-mu-actions.js

@@ -178,3 +178,62 @@ export const removeFileForSponsorMU =
       dispatch(stopLoading());
     });
   };
+
+export const uploadTextForSponsorMU =
+  (pageId, moduleId, text) => async (dispatch, getState) => {
+    const { currentSummitState, currentSponsorState } = getState();
+    const { currentSummit } = currentSummitState;
+    const { entity: sponsor } = currentSponsorState;
+    const accessToken = await getAccessTokenSafely();
+
+    dispatch(startLoading());
+
+    const params = {
+      access_token: accessToken
+    };
+
+    return putRequest(
+      null,
+      createAction("DUMMY_ACTION"),
+      `${window.SPONSOR_PAGES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsor.id}/available-pages/${pageId}/modules/${moduleId}/text`,
+      { value: text },
+      snackbarErrorHandler
+    )(params)(dispatch)
+      .then(({ response }) => {
+        dispatch(
+          createAction(SPONSOR_MEDIA_UPLOAD_FILE_UPLOADED)({
+            ...response,
+            moduleId
+          })
+        );
+      })
+      .finally(() => {
+        dispatch(stopLoading());
+      });
+  };
+
+export const removeTextForSponsorMU =
+  (pageId, moduleId) => async (dispatch, getState) => {
+    const { currentSummitState, currentSponsorState } = getState();
+    const { currentSummit } = currentSummitState;
+    const { entity: sponsor } = currentSponsorState;
+    const accessToken = await getAccessTokenSafely();
+
+    dispatch(startLoading());
+
+    const params = {
+      access_token: accessToken
+    };
+
+    return deleteRequest(
+      null,
+      createAction(SPONSOR_MEDIA_UPLOAD_FILE_DELETED)({ moduleId }),
+      `${window.SPONSOR_PAGES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsor.id}/available-pages/${pageId}/modules/${moduleId}/text`,
+      null,
+      snackbarErrorHandler
+    )(params)(dispatch)
+      .catch(() => {})
+      .finally(() => {
+        dispatch(stopLoading());
+      });
+  };

src/components/mui/PreviewModal/index.jsx

@@ -1,15 +1,8 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import T from "i18n-react/dist/i18n-react";
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  Box,
-  Typography,
-  IconButton
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import { Box, Typography } from "@mui/material";
+import CustomDialog from "openstack-uicore-foundation/lib/components/mui/custom-dialog";
 import BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined";
 import { formatDate } from "../../../utils/methods";
 
@@ -35,87 +28,55 @@ const PreviewModal = ({ title, open, onClose, url, filename, uploadDate }) => {
   }, [open]);
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle
+    <CustomDialog title={title} open={open} onClose={onClose}>
+      <Box
         sx={{
+          mx: "-24px",
+          mt: "-20px",
+          mb: 2,
+          bgcolor: "grey.400",
           display: "flex",
           alignItems: "center",
-          justifyContent: "space-between",
-          pb: 1
+          justifyContent: "center",
+          minHeight: 200
         }}
       >
-        <Typography variant="h6">{title}</Typography>
-      </DialogTitle>
-      <IconButton
-        aria-label="close"
-        onClick={onClose}
-        size="small"
-        sx={(theme) => ({
-          position: "absolute",
-          right: 12,
-          top: 12,
-          color: theme.palette.grey[500]
-        })}
-      >
-        <CloseIcon fontSize="large" />
-      </IconButton>
-      <DialogContent sx={{ p: 0 }}>
-        <Box
-          sx={{
-            mx: 2,
-            mb: 2,
-            bgcolor: "grey.400",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            minHeight: 200
-          }}
-        >
-          {!url || imageError ? (
-            <BrokenImage />
-          ) : (
-            <Box
-              component="img"
-              src={url}
-              alt={filename}
-              onError={() => setImageError(true)}
-              sx={{
-                maxWidth: "100%",
-                maxHeight: 400,
-                display: "block",
-                objectFit: "contain"
-              }}
-            />
-          )}
+        {!url || imageError ? (
+          <BrokenImage />
+        ) : (
+          <Box
+            component="img"
+            src={url}
+            alt={filename}
+            onError={() => setImageError(true)}
+            sx={{
+              maxWidth: "100%",
+              maxHeight: 400,
+              display: "block",
+              objectFit: "contain"
+            }}
+          />
+        )}
+      </Box>
+      {filename && (
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, minWidth: 80 }}>
+            {T.translate("preview_modal.file_name")}
+          </Typography>
+          <Typography variant="body2" sx={{ wordBreak: "break-all" }}>
+            {filename}
+          </Typography>
         </Box>
-        <Box sx={{ px: 2, pt: 1.5, pb: 2 }}>
-          {filename && (
-            <Box sx={{ display: "flex", gap: 2 }}>
-              <Typography
-                variant="body2"
-                sx={{ fontWeight: 600, minWidth: 80 }}
-              >
-                {T.translate("preview_modal.file_name")}
-              </Typography>
-              <Typography variant="body2" sx={{ wordBreak: "break-all" }}>
-                {filename}
-              </Typography>
-            </Box>
-          )}
-          {!!uploadDate && (
-            <Box sx={{ display: "flex", gap: 2 }}>
-              <Typography
-                variant="body2"
-                sx={{ fontWeight: 600, minWidth: 80 }}
-              >
-                {T.translate("preview_modal.uploaded")}
-              </Typography>
-              <Typography variant="body2">{formatDate(uploadDate)}</Typography>
-            </Box>
-          )}
+      )}
+      {!!uploadDate && (
+        <Box sx={{ display: "flex", gap: 2 }}>
+          <Typography variant="body2" sx={{ fontWeight: 600, minWidth: 80 }}>
+            {T.translate("preview_modal.uploaded")}
+          </Typography>
+          <Typography variant="body2">{formatDate(uploadDate)}</Typography>
         </Box>
-      </DialogContent>
-    </Dialog>
+      )}
+    </CustomDialog>
   );
 };
 

src/components/upload-dialog/index.js

@@ -12,24 +12,14 @@
  * */
 
 import React, { useState } from "react";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  IconButton,
-  Typography
-} from "@mui/material";
+import { Box, Divider, IconButton, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import UploadInputV3 from "openstack-uicore-foundation/lib/components/inputs/upload-input-v3";
+import CustomDialog from "openstack-uicore-foundation/lib/components/mui/custom-dialog";
 import T from "i18n-react/dist/i18n-react";
-import CloseIcon from "@mui/icons-material/Close";
 import NoteAddIcon from "@mui/icons-material/NoteAdd";
 import DeleteIcon from "@mui/icons-material/Delete";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import DialogActions from "@mui/material/DialogActions";
 
 const MAX_PAGE_MODULE_UPLOAD_QTY = 1;
 
@@ -90,9 +80,7 @@ const UploadDialog = ({
     }
   };
 
-  const handleUpload = () => {
-    onUpload(uploadedFile);
-  };
+  const handleUpload = () => onUpload(uploadedFile);
 
   const handleRemove = () => {
     if (onRemove) {
@@ -108,62 +96,43 @@ const UploadDialog = ({
   const canAddMore = () => (value?.length || 0) < maxFiles;
 
   return (
-    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
-      <DialogTitle>
-        {T.translate("edit_sponsor.mu_tab.upload_input.upload_file")}
-      </DialogTitle>
-      <IconButton
-        aria-label="close"
-        onClick={handleClose}
-        sx={(theme) => ({
-          position: "absolute",
-          right: 8,
-          top: 8,
-          color: theme.palette.grey[500]
-        })}
-      >
-        <CloseIcon />
-      </IconButton>
-      <Divider />
-      <DialogContent>
-        <Typography variant="body1" sx={{ mb: 2 }}>
-          {fileMeta.name}
-        </Typography>
-        <Typography variant="body2" sx={{ mb: 2, color: "text.secondary" }}>
-          {fileMeta.description}
-        </Typography>
-        {value ? (
-          <>
-            <Divider sx={{ marginLeft: -2, marginRight: -2, mb: 2 }} />
-            <CurrentFile file={value} onRemove={handleRemove} />
-          </>
-        ) : (
-          <UploadInputV3
-            id={`media_upload_${name}`}
-            name={name}
-            onUploadComplete={setUploadedFile}
-            value={[]}
-            mediaType={mediaType}
-            onRemove={() => setUploadedFile(null)}
-            postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
-            djsConfig={{ withCredentials: true }}
-            maxFiles={maxFiles}
-            canAdd={canAddMore()}
-            parallelChunkUploads
-          />
-        )}
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={handleUpload}
-          fullWidth
-          disabled={!uploadedFile}
-          variant="contained"
-        >
-          {T.translate("edit_sponsor.mu_tab.upload_input.upload_file")}
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <CustomDialog
+      title={T.translate("edit_sponsor.mu_tab.upload_input.upload_file")}
+      open={open}
+      onClose={handleClose}
+      primaryAction={{
+        label: T.translate("edit_sponsor.mu_tab.upload_input.upload_file"),
+        onClick: handleUpload,
+        disabled: !uploadedFile
+      }}
+    >
+      <Typography variant="body1" sx={{ mb: 2 }}>
+        {fileMeta.name}
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 2, color: "text.secondary" }}>
+        {fileMeta.description}
+      </Typography>
+      {value ? (
+        <>
+          <Divider sx={{ marginLeft: -2, marginRight: -2, mb: 2 }} />
+          <CurrentFile file={value} onRemove={handleRemove} />
+        </>
+      ) : (
+        <UploadInputV3
+          id={`media_upload_${name}`}
+          name={name}
+          onUploadComplete={setUploadedFile}
+          value={[]}
+          mediaType={mediaType}
+          onRemove={() => setUploadedFile(null)}
+          postUrl={`${window.FILE_UPLOAD_API_BASE_URL}/api/v1/files/upload`}
+          djsConfig={{ withCredentials: true }}
+          maxFiles={maxFiles}
+          canAdd={canAddMore()}
+          parallelChunkUploads
+        />
+      )}
+    </CustomDialog>
   );
 };
 

src/i18n/en.json

@@ -2721,14 +2721,17 @@
       "media_upload": "media upload",
       "sponsor_request": "Sponsor Specific Request",
       "general_request": "General Media Request",
+      "type": "Type",
       "add_on": "Add-on",
       "max_size": "Max Size",
       "format": "Format",
       "deadline": "Deadline",
       "status": "Status",
       "upload_input": {
         "complete": "Complete",
-        "upload_file": "Upload file"
+        "upload_file": "Upload file",
+        "enter_text": "Enter text",
+        "save_answer": "Save Answer"
       }
     },
     "placeholders": {