Merge pull request meshery#8787 from Yashsharma1911/yash/preventReren…

…derOfModalwq [UI] Prevent rjsf modal rerendering
Mohith234 · Sep 17, 2023 · 3a33bb3 · 3a33bb3
2 parents ad83f29 + 91bf436
commit 3a33bb3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 81 deletions.
diff --git a/ui/components/Filters.js b/ui/components/Filters.js
@@ -25,7 +25,6 @@ import { toggleCatalogContent, updateProgress } from "../lib/store";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import dataFetch from "../lib/data-fetch";
 import PromptComponent from "./PromptComponent";
-import UploadImport from "./Modals/ImportModal";
 import FullscreenIcon from '@material-ui/icons/Fullscreen';
 import FullscreenExitIcon from '@material-ui/icons/FullscreenExit';
 import { FILE_OPS, MesheryFiltersCatalog, VISIBILITY } from "../utils/Enum";
@@ -739,16 +738,6 @@ function MesheryFilters({ updateProgress, user, classes, selectedK8sContexts, ca
     reader.readAsArrayBuffer(file);
   }
 
-  function urlUploadHandler(link, _, metadata,) {
-
-    handleSubmit({
-      data : link,
-      name : "meshery_" + Math.floor(trueRandom() * 100),
-      type : FILE_OPS.URL_UPLOAD,
-      metadata : metadata
-    });
-  }
-
   const columns = [
     {
       name : "name",
@@ -1162,18 +1151,16 @@ function MesheryFilters({ updateProgress, user, classes, selectedK8sContexts, ca
               canPublishFilter={canPublishFilter}
               handlePublish={handlePublish}
               handleUnpublishModal={handleUnpublishModal}
+              handleUploadImport={handleUploadImport}
               handleClone={handleClone}
               handleDownload={handleDownload}
-              urlUploadHandler={urlUploadHandler}
               uploadHandler={uploadHandler}
               setSelectedFilter={setSelectedFilter}
               selectedFilter={selectedFilter}
               pages={Math.ceil(count / pageSize)}
               importSchema={importSchema}
               setPage={setPage}
               selectedPage={page}
-              UploadImport={UploadImport}
-              handleImportFilter={handleImportFilter}
               publishModal={publishModal}
               setPublishModal={setPublishModal}
               publishSchema={publishSchema}
@@ -1191,9 +1178,9 @@ function MesheryFilters({ updateProgress, user, classes, selectedK8sContexts, ca
           componentCount={modalOpen.count}
           tab={modalOpen.deploy ? 2 : 1}
         />
-        {canPublishFilter &&
+        {(canPublishFilter && publishModal.open) &&
           <Modal
-            open={publishModal.open}
+            open={true}
             schema={publishSchema.rjsfSchema}
             uiSchema={publishSchema.uiSchema}
             title={publishModal.filter?.name}
@@ -1205,18 +1192,19 @@ function MesheryFilters({ updateProgress, user, classes, selectedK8sContexts, ca
           />
         }
         <PromptComponent ref={modalRef} />
-        <Modal
-          open={importModal.open}
-          schema={importSchema.rjsfSchema}
-          uiSchema={importSchema.uiSchema}
-          handleClose={handleUploadImportClose}
-          handleSubmit={handleImportFilter}
-          title="Import Filter"
-          submitBtnText="Import"
-          leftHeaderIcon={<Filter fill="#fff" style={{ ...iconMedium }} />}
-          submitBtnIcon={<PublishIcon/>}
-        />
-        {/* REMOVE this with its deps <UploadImport open={importModal.open} handleClose={handleUploadImportClose} aria-label="URL upload button" handleUrlUpload={urlUploadHandler} handleUpload={uploadHandler} fetch={() => fetchFilters(page, pageSize, search, sortOrder) } configuration="Filter" /> */}
+        {importModal.open &&
+          <Modal
+            open={true}
+            schema={importSchema.rjsfSchema}
+            uiSchema={importSchema.uiSchema}
+            handleClose={handleUploadImportClose}
+            handleSubmit={handleImportFilter}
+            title="Import Filter"
+            submitBtnText="Import"
+            leftHeaderIcon={<Filter fill="#fff" style={{ height : "24px", width : "24px", fonSize : "1.45rem" }} />}
+            submitBtnIcon={<PublishIcon/>}
+          />
+        }
       </NoSsr>
     </>
   );

diff --git a/ui/components/MesheryFilters/FiltersGrid.js b/ui/components/MesheryFilters/FiltersGrid.js
@@ -9,7 +9,6 @@ import { getComponentsinFile } from "../../utils/utils";
 import PublishIcon from "@material-ui/icons/Publish";
 import useStyles from "../MesheryPatterns/Grid.styles";
 import Modal from "../Modal";
-import Filter from "../../public/static/img/drawer-icons/filter_svg.js";
 import PublicIcon from '@material-ui/icons/Public';
 
 const INITIAL_GRID_SIZE = { xl : 4, md : 6, xs : 12 };
@@ -102,21 +101,16 @@ function FiltersGrid({
   pages = 1,
   setPage,
   selectedPage,
-  importSchema,
   canPublishFilter,
+  handleUploadImport,
   handlePublish,
   handleUnpublishModal,
-  handleImportFilter,
   publishModal,
   setPublishModal,
   publishSchema
 }) {
   const classes = useStyles();
 
-  const [importModal, setImportModal] = useState({
-    open : false,
-  });
-
   const handlePublishModal = (filter) => {
     if (canPublishFilter) {
       setPublishModal({
@@ -135,18 +129,6 @@ function FiltersGrid({
     });
   };
 
-  const handleUploadImport = () => {
-    setImportModal({
-      open : true,
-    });
-  };
-
-  const handleUploadImportClose = () => {
-    setImportModal({
-      open : false,
-    });
-  };
-
   const [modalOpen, setModalOpen] = useState({
     open : false,
     deploy : false,
@@ -244,9 +226,9 @@ function FiltersGrid({
         componentCount={modalOpen.count}
         tab={modalOpen.deploy ? 2 : 1}
       />
-      {canPublishFilter && (
+      {(canPublishFilter && publishModal.open)&& (
         <Modal
-          open={publishModal.open}
+          open={true}
           schema={publishSchema.rjsfSchema}
           uiSchema={publishSchema.uiSchema}
           title={publishModal.filter?.name}
@@ -257,17 +239,6 @@ function FiltersGrid({
           submitBtnIcon={<PublicIcon/>}
         />
       )}
-      <Modal
-        open={importModal.open}
-        schema={importSchema.rjsfSchema}
-        uiSchema={importSchema.uiSchema}
-        handleClose={handleUploadImportClose}
-        handleSubmit={handleImportFilter}
-        title="Import Filter"
-        submitBtnText="Import"
-        leftHeaderIcon={<Filter fill="#fff" style={{ height : "24px", width : "24px", fonSize : "1.45rem" }} />}
-        submitBtnIcon={<PublishIcon/>}
-      />
     </div>
   );
 }

diff --git a/ui/components/MesheryMeshInterface/PatternService/RJSFCustomComponents/CustomBaseInput.js b/ui/components/MesheryMeshInterface/PatternService/RJSFCustomComponents/CustomBaseInput.js
@@ -43,6 +43,7 @@ const BaseInput = (props) => {
           focused={focused}
           type={props.options?.inputType}
           key={props.id}
+          disabled={props?.disabled || props?.readonly}
           value={
             props.options?.inputType === "file"
               ? null

diff --git a/ui/components/MesheryPatterns.js b/ui/components/MesheryPatterns.js
@@ -1419,9 +1419,9 @@ function MesheryPatterns({
           dryRunComponent={modalOpen.dryRunComponent}
           errors={modalOpen.errors}
         />
-        {canPublishPattern &&
+        {(canPublishPattern && publishModal.open) &&
           <Modal
-            open={publishModal.open}
+            open={true}
             schema={publishSchema.rjsfSchema}
             uiSchema={publishSchema.uiSchema}
             handleClose={handlePublishModalClose}
@@ -1433,18 +1433,19 @@ function MesheryPatterns({
             submitBtnIcon={<PublicIcon/>}
           />
         }
-        <Modal
-          open={importModal.open}
-          schema={importSchema.rjsfSchema}
-          uiSchema={importSchema.uiSchema}
-          handleClose={handleUploadImportClose}
-          handleSubmit={handleImportDesign}
-          title="Import Design"
-          submitBtnText="Import"
-          leftHeaderIcon={<Pattern fill="#fff" style={{ height : "24px", width : "24px", fonSize : "1.45rem" }} className={undefined} />}
-          submitBtnIcon={<PublishIcon  className={classes.addIcon} data-cy="import-button"/>}
-        />
-        {/* <UploadImport open={importModal.open} handleClose={handleUploadImportClose} aria-label="URL upload button" handleUrlUpload={urlUploadHandler} handleUpload={uploadHandler} fetch={() => fetchPatterns(page, pageSize, search, sortOrder)} configuration="Design" /> */}
+        { importModal.open &&
+          <Modal
+            open={true}
+            schema={importSchema.rjsfSchema}
+            uiSchema={importSchema.uiSchema}
+            handleClose={handleUploadImportClose}
+            handleSubmit={handleImportDesign}
+            title="Import Design"
+            submitBtnText="Import"
+            leftHeaderIcon={<Pattern fill="#fff" style={{ height : "24px", width : "24px", fonSize : "1.45rem" }} className={undefined} />}
+            submitBtnIcon={<PublishIcon  className={classes.addIcon} data-cy="import-button"/>}
+          />
+        }
         <PromptComponent ref={modalRef} />
       </NoSsr>
     </>

diff --git a/ui/components/MesheryPatterns/MesheryPatternGridView.js b/ui/components/MesheryPatterns/MesheryPatternGridView.js
@@ -208,9 +208,9 @@ function MesheryPatternGrid({ patterns=[], handleVerify, handlePublish, handleUn
         dryRunComponent={modalOpen.dryRunComponent}
         validationBody={modalOpen.validationBody}
       />
-      {canPublishPattern &&
+      {(canPublishPattern && publishModal.open) &&
        <Modal
-         open={publishModal.open}
+         open={true}
          schema={publishSchema.rjsfSchema}
          uiSchema={publishSchema.uiSchema}
          handleClose={handlePublishModalClose}

diff --git a/ui/components/Modal.js b/ui/components/Modal.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { IconButton, Menu, MenuItem, Tooltip, Button, Typography } from "@material-ui/core";
 import { Dialog, DialogActions, makeStyles } from "@material-ui/core";
 import { CustomTextTooltip } from "./MesheryMeshInterface/PatternService/CustomTextTooltip";
@@ -162,7 +162,7 @@ function Modal(props) {
 
   const [canNotSubmit, setCanNotSubmit] = useState(false);
   const [snackbar, setSnackbar] = useState(false);
-  const [formState, setFormState] = useState({});
+  const formStateRef = useRef({});
   const formRef = React.createRef();
 
   const renderTooltipContent = () => (
@@ -207,7 +207,7 @@ function Modal(props) {
   }, [title]);
 
   const handleFormChange = (data) => {
-    setFormState(data.formData);
+    formStateRef.current = data;
   };
 
   return (
@@ -230,7 +230,7 @@ function Modal(props) {
 
         <RJSFWrapper
           key={type}
-          formData={formState}
+          formData={formStateRef.current}
           jsonSchema={schema || getSchema(type)}
           uiSchema={uiSchema}
           onChange={handleFormChange}
@@ -286,4 +286,4 @@ function Modal(props) {
   );
 }
 
-export default Modal;
+export default React.memo(Modal);