EPMRPP-89999 || props fix

reportportal · May 21, 2024 · 155e4e1 · 155e4e1
1 parent b4ed9f9
commit 155e4e1
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 29 deletions.
diff --git a/app/src/pages/admin/pluginsPage/modals/uploadPluginModal/uploadPluginModal.jsx b/app/src/pages/admin/pluginsPage/modals/uploadPluginModal/uploadPluginModal.jsx
@@ -66,18 +66,13 @@ export const UploadPluginModal = ({ data }) => {
       data={data}
       title={formatMessage(messages.modalTitle)}
       importButton={formatMessage(messages.uploadButton)}
-      tip={formatMessage(messages.uploadTip, {
-        b: (d) => DOMPurify.sanitize(`<b>${d}</b>`),
-        span: (d) => DOMPurify.sanitize(`<span>${d}</span>`),
-      })}
       url={url}
       singleImport
       eventsInfo={{
         uploadButton: PLUGINS_PAGE_EVENTS.clickUploadModalBtn,
         cancelBtn: PLUGINS_PAGE_EVENTS.CANCEL_BTN_UPLOAD_MODAL,
         closeIcon: PLUGINS_PAGE_EVENTS.CLOSE_ICON_UPLOAD_MODAL,
       }}
-      incorrectFileSize={formatMessage(messages.incorrectFileSize)}
       maxFileSize={MAX_FILE_SIZES}
       acceptFileMimeTypes={ACCEPT_FILE_MIME_TYPES}
       files={files}
@@ -89,6 +84,11 @@ export const UploadPluginModal = ({ data }) => {
         setFiles={setFiles}
         maxFileSize={MAX_FILE_SIZES}
         acceptFileMimeTypes={ACCEPT_FILE_MIME_TYPES}
+        incorrectFileSize={formatMessage(messages.incorrectFileSize)}
+        tip={formatMessage(messages.uploadTip, {
+          b: (d) => DOMPurify.sanitize(`<b>${d}</b>`),
+          span: (d) => DOMPurify.sanitize(`<span>${d}</span>`),
+        })}
       />
     </ImportModalLayout>
   );

diff --git a/app/src/pages/common/uploadFileControls/dropzoneComponent/dropzoneComponent.jsx b/app/src/pages/common/uploadFileControls/dropzoneComponent/dropzoneComponent.jsx
@@ -22,15 +22,23 @@ import {
 } from 'pages/common/uploadFileControls/importModalLayout/utils';
 import { DropzoneField } from './dropzoneField';
 
-export const DropzoneComponent = ({ data, files, setFiles, maxFileSize, acceptFileMimeTypes }) => {
+export const DropzoneComponent = ({
+  data,
+  files,
+  setFiles,
+  maxFileSize,
+  acceptFileMimeTypes,
+  incorrectFileSize,
+  tip,
+}) => {
   const isDropZoneDisabled = () =>
     isUploadFinished() || isUploadInProgress() || (data.singleImport && files.length > 0);
 
   return (
     <DropzoneField
       disabled={isDropZoneDisabled()}
-      incorrectFileSize={data.incorrectFileSize}
-      tip={data.tip}
+      incorrectFileSize={incorrectFileSize}
+      tip={tip}
       singleImport={data.singleImport}
       files={files}
       setFiles={setFiles}
@@ -45,6 +53,8 @@ DropzoneComponent.propTypes = {
   setFiles: PropTypes.func.isRequired,
   maxFileSize: PropTypes.number,
   acceptFileMimeTypes: PropTypes.arrayOf(PropTypes.string),
+  incorrectFileSize: PropTypes.string.isRequired,
+  tip: PropTypes.string.isRequired,
 };
 DropzoneComponent.defaultProps = {
   maxFileSize: 0,

diff --git a/app/src/pages/common/uploadFileControls/importModalLayout/importModalLayout.jsx b/app/src/pages/common/uploadFileControls/importModalLayout/importModalLayout.jsx
@@ -35,7 +35,17 @@ const messages = defineMessages({
   },
 });
 
-const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => {
+const ImportModalLayoutComponent = ({
+  data,
+  url,
+  files,
+  setFiles,
+  title,
+  importConfirmationWarning,
+  importButton,
+  eventsInfo,
+  children,
+}) => {
   const { formatMessage } = useIntl();
   const { trackEvent } = useTracking();
   const dispatch = useDispatch();
@@ -44,8 +54,7 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => {
   const addCancelRequest = (cancelRequest) => cancelRequests.push(cancelRequest);
 
   const getOkButtonConfig = (isLoading, uploadFinished) => {
-    const text =
-      isLoading || uploadFinished ? formatMessage(COMMON_LOCALE_KEYS.OK) : data.importButton;
+    const text = isLoading || uploadFinished ? formatMessage(COMMON_LOCALE_KEYS.OK) : importButton;
 
     return {
       text,
@@ -54,8 +63,17 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => {
         if (uploadFinished) {
           closeModal();
         } else {
-          trackEvent(data.eventsInfo?.okBtn);
-          uploadFiles(data, files, setFiles, addCancelRequest, dispatch, trackEvent);
+          trackEvent(eventsInfo.okBtn);
+          uploadFiles(
+            data,
+            url,
+            files,
+            setFiles,
+            addCancelRequest,
+            eventsInfo,
+            dispatch,
+            trackEvent,
+          );
         }
       },
     };
@@ -69,7 +87,7 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => {
 
   const getCloseConfirmationConfig = (isValidFilesExists, loading, uploadFinished) => {
     const confirmationWarning = loading
-      ? data.importConfirmationWarning
+      ? importConfirmationWarning
       : formatMessage(COMMON_LOCALE_KEYS.CLOSE_MODAL_WARNING);
 
     if (!isValidFilesExists || uploadFinished) {
@@ -89,33 +107,40 @@ const ImportModalLayoutComponent = ({ data, files, setFiles, children }) => {
 
   return (
     <ModalLayout
-      title={data.title}
+      title={title}
       okButton={getOkButtonConfig(loading, uploadFinished)}
       cancelButton={{
         text: formatMessage(COMMON_LOCALE_KEYS.CANCEL),
-        eventInfo: data.eventsInfo?.cancelBtn,
+        eventInfo: eventsInfo.cancelBtn,
         disabled: uploadFinished,
       }}
       closeConfirmation={getCloseConfirmationConfig(validFiles.length, loading, uploadFinished)}
-      closeIconEventInfo={data.eventsInfo?.closeIcon}
+      closeIconEventInfo={eventsInfo.closeIcon}
     >
       {children}
     </ModalLayout>
   );
 };
 ImportModalLayoutComponent.propTypes = {
   data: PropTypes.object,
+  url: PropTypes.string.isRequired,
   tracking: PropTypes.shape({
     trackEvent: PropTypes.func,
     getTrackingData: PropTypes.func,
   }).isRequired,
   children: PropTypes.node,
   files: PropTypes.arrayOf(PropTypes.object).isRequired,
   setFiles: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired,
+  importConfirmationWarning: PropTypes.string,
+  importButton: PropTypes.string.isRequired,
+  eventsInfo: PropTypes.object,
 };
 ImportModalLayoutComponent.defaultProps = {
-  data: { eventsInfo: { uploadButton: () => {}, cancelBtn: {}, closeIcon: {} } },
+  data: {},
   dropzoneCountNumber: 0,
   children: [null],
+  importConfirmationWarning: '',
+  eventsInfo: { uploadButton: () => {}, cancelBtn: {}, closeIcon: {} },
 };
 export const ImportModalLayout = track()(ImportModalLayoutComponent);
diff --git a/app/src/pages/common/uploadFileControls/importModalLayout/utils.js b/app/src/pages/common/uploadFileControls/importModalLayout/utils.js
@@ -71,12 +71,21 @@ export const isUploadFinished = (files) => {
   return validFiles?.length ? validFiles.every(({ uploaded }) => uploaded) : false;
 };
 
-export const uploadFiles = (data, files, setFiles, addCancelRequest, dispatch, trackEvent) => {
+export const uploadFiles = (
+  data,
+  url,
+  files,
+  setFiles,
+  addCancelRequest,
+  eventsInfo,
+  dispatch,
+  trackEvent,
+) => {
   const getFilesNames = () => files.map(({ file: { name } }) => name).join('#');
 
   const successUploadHandler = (id) => {
     data.onImport();
-    const uploadButton = data.eventsInfo.uploadButton;
+    const uploadButton = eventsInfo.uploadButton;
 
     if (uploadButton) {
       trackEvent(uploadButton(getFilesNames()));
@@ -112,7 +121,7 @@ export const uploadFiles = (data, files, setFiles, addCancelRequest, dispatch, t
     setFiles(updatedFiles);
   };
 
-  const preparedData = prepareDataForServerUploading(data.url, files, setFiles, addCancelRequest);
+  const preparedData = prepareDataForServerUploading(url, files, setFiles, addCancelRequest);
 
   const updatedFiles = files.map((f) => (f.valid ? { ...f, isLoading: true } : f));
   setFiles(updatedFiles);

diff --git a/app/src/pages/inside/launchesPage/modals/importLaunchModal/importLaunchModal.jsx b/app/src/pages/inside/launchesPage/modals/importLaunchModal/importLaunchModal.jsx
@@ -16,7 +16,6 @@
 
 import React, { useState } from 'react';
 import classNames from 'classnames/bind';
-import Parser from 'html-react-parser';
 import { connect } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import DOMPurify from 'dompurify';
@@ -80,18 +79,12 @@ export const ImportLaunchModal = ({ data, activeProject, importPlugins }) => {
       setFiles={setFiles}
       title={formatMessage(messages.modalTitle)}
       importButton={formatMessage(messages.importButton)}
-      tip={formatMessage(messages.importTip, {
-        b: (d) => DOMPurify.sanitize(`<b>${d}</b>`),
-        span: (d) => DOMPurify.sanitize(`<span>${d}</span>`),
-      })}
       url={url}
       eventsInfo={{
         okBtn: LAUNCHES_MODAL_EVENTS.OK_BTN_IMPORT_MODAL,
         cancelBtn: LAUNCHES_MODAL_EVENTS.CANCEL_BTN_IMPORT_MODAL,
         closeIcon: LAUNCHES_MODAL_EVENTS.CLOSE_ICON_IMPORT_MODAL,
       }}
-      incorrectFileSize={formatMessage(messages.incorrectFileSize)}
-      noteMessage={formatMessage(messages.noteMessage)}
       importConfirmationWarning={formatMessage(messages.importConfirmationWarning)}
     >
       <ImportPluginSelector
@@ -104,9 +97,14 @@ export const ImportLaunchModal = ({ data, activeProject, importPlugins }) => {
         setFiles={setFiles}
         maxFileSize={selectedPluginData?.details?.MAX_FILE_SIZES}
         acceptFileMimeTypes={selectedPluginData?.details?.ACCEPT_FILE_MIME_TYPES || []}
+        incorrectFileSize={formatMessage(messages.incorrectFileSize)}
+        tip={formatMessage(messages.importTip, {
+          b: (d) => DOMPurify.sanitize(`<b>${d}</b>`),
+          span: (d) => DOMPurify.sanitize(`<span>${d}</span>`),
+        })}
       />
       <p className={cx('note-label')}>{formatMessage(messages.note)}</p>
-      <p className={cx('note-message')}>{Parser(data.noteMessage)}</p>
+      <p className={cx('note-message')}>{formatMessage(messages.noteMessage)}</p>
     </ImportModalLayout>
   );
 };