Merge pull request #13155 from ToolJet/fix/disable-modules-editor

[feat]: Show tooltip and disable modules if the license is expired

frontend/ee

@@ -1 +1 @@
-Subproject commit d47523cfa18e15e774781d3ccf4d16858970479b
+Subproject commit 0ae5dac299e4a72e219243255722fbea2f530808

frontend/src/AppBuilder/AppCanvas/ConfigHandle/ConfigHandle.jsx

@@ -7,6 +7,7 @@ import SolidIcon from '@/_ui/Icon/solidIcons/index';
 import { ToolTip } from '@/_components/ToolTip';
 import { useModuleContext } from '@/AppBuilder/_contexts/ModuleContext';
 import { DROPPABLE_PARENTS } from '../appCanvasConstants';
+import { Tooltip } from 'react-tooltip';
 
 const CONFIG_HANDLE_HEIGHT = 20;
 const BUFFER_HEIGHT = 1;
@@ -25,6 +26,7 @@ export const ConfigHandle = ({
   subContainerIndex,
 }) => {
   const { moduleId } = useModuleContext();
+  const isLicenseValid = useStore((state) => state.isLicenseValid(), shallow);
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
   const componentName = useStore((state) => state.getComponentDefinition(id, moduleId)?.component?.name || '', shallow);
   const isMultipleComponentsSelected = useStore(
@@ -111,6 +113,9 @@ export const ConfigHandle = ({
           }
         }
       }}
+      data-tooltip-id={`invalid-license-modules-${componentName?.toLowerCase()}`}
+      data-tooltip-html="Your plan is expired. <br/> Renew to use the modules."
+      data-tooltip-place="right"
     >
       {licenseValid && isRestricted && (
         <ToolTip message={getTooltip()} show={licenseValid && isRestricted && !draggingComponentId}>
@@ -201,6 +206,15 @@ export const ConfigHandle = ({
           </div>
         )}
       </span>
+      {/* Tooltip for invalid license on ModuleViewer */}
+      {!isLicenseValid && componentType === 'ModuleViewer' && (
+        <Tooltip
+          id={`invalid-license-modules-${componentName?.toLowerCase()}`}
+          className="tooltip"
+          isOpen={_showHandle && componentType === 'ModuleViewer'}
+          style={{ textAlign: 'center' }}
+        />
+      )}
     </div>
   );
 };

frontend/src/_styles/modules.scss

@@ -72,6 +72,10 @@
             scrollbar-color: #6a727c4d transparent;
         }
     }
+    &.disabled{
+        pointer-events: none;
+        opacity: 0.5;
+    }
 }
 
 .empty-module-container{