[Feature]: Added universal props for widgets with Tooltip (ToolJet#3096)

* Added universal props for widget

* Fixed lint issues

* Updated export name

* Fixed lint errors

* Updated genral variable name

* Updated file name in doc

docs/docs/contributing-guide/tutorials/create-widget.md

@@ -4,16 +4,17 @@ title: Creating Widgets
 ---
 
 # Creating Widgets
+
 These are some of the most useful properties and functions passed to the widget
 
 ### properties
 
-The `properties` object will contain the configurable properties of a widget, initially obtained from its definition on `components.js`.
+The `properties` object will contain the configurable properties of a widget, initially obtained from its definition on `widgetConfig.js`.
 The values inside `properties` changes whenever the developer changes it from the inspector panel of ToolJet editor.
 
 ### exposedVariables
 
-The `exposedVariables` object will contain the values of all exposed variables as configured in `components.js`.
+The `exposedVariables` object will contain the values of all exposed variables as configured in `widgetConfig.js`.
 
 ### setExposedVariable('exposedVariableName', newValue)
 
@@ -23,4 +24,4 @@ This function allows you to update the value of an exposed variable to `newValue
 
 This function validates the `value` passed based on the validation settings configured on the inspector panel for the widget.
 It returns an array `[isValid, validationError]`, which represents respectively, whether the `value` passed is valid,
-and the error message if there is one.
+and the error message if there is one.

frontend/src/Editor/Box.jsx

@@ -44,7 +44,7 @@ import { VerticalDivider } from './Components/verticalDivider';
 import { PDF } from './Components/PDF';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import '@/_styles/custom.scss';
-import { resolveProperties, resolveStyles } from './component-properties-resolution';
+import { resolveProperties, resolveStyles, resolveGeneralProperties } from './component-properties-resolution';
 import { validateWidget, resolveReferences } from '@/_helpers/utils';
 
 const AllComponents = {
@@ -137,6 +137,7 @@ export const Box = function Box({
 
   const resolvedProperties = resolveProperties(component, currentState, null, customResolvables);
   const resolvedStyles = resolveStyles(component, currentState, null, customResolvables);
+  const resolvedGeneralProperties = resolveGeneralProperties(component, currentState, null, customResolvables);
   resolvedStyles.visibility = resolvedStyles.visibility !== false ? true : false;
 
   useEffect(() => {
@@ -189,10 +190,12 @@ export const Box = function Box({
 
   return (
     <OverlayTrigger
-      placement="top"
+      placement={inCanvas ? 'auto' : 'top'}
       delay={{ show: 500, hide: 0 }}
-      trigger={!inCanvas ? ['hover', 'focus'] : null}
-      overlay={(props) => renderTooltip({ props, text: `${component.description}` })}
+      trigger={inCanvas && !resolvedGeneralProperties.tooltip?.trim() ? null : ['hover', 'focus']}
+      overlay={(props) =>
+        renderTooltip({ props, text: inCanvas ? `${resolvedGeneralProperties.tooltip}` : `${component.description}` })
+      }
     >
       <div style={{ ...styles, backgroundColor }} role={preview ? 'BoxPreview' : 'Box'}>
         {inCanvas ? (

frontend/src/Editor/CodeBuilder/CodeBuilder.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import 'codemirror/theme/duotone-light.css';
-import { componentTypes } from '../Components/components';
+import { componentTypes } from '../WidgetManager/components';
 import { DataSourceTypes } from '../DataSourceManager/SourceComponents';
 import { debounce } from 'lodash';
 import Fuse from 'fuse.js';

frontend/src/Editor/Container.jsx

@@ -7,7 +7,7 @@ import { ItemTypes } from './ItemTypes';
 import { DraggableBox } from './DraggableBox';
 import { snapToGrid as doSnapToGrid } from './snapToGrid';
 import update from 'immutability-helper';
-import { componentTypes } from './Components/components';
+import { componentTypes } from './WidgetManager/components';
 import { computeComponentName, resolveReferences } from '@/_helpers/utils';
 import useRouter from '@/_hooks/use-router';
 import Comments from './Comments';

frontend/src/Editor/Editor.jsx

@@ -10,7 +10,7 @@ import { Container } from './Container';
 import { EditorKeyHooks } from './EditorKeyHooks';
 import { CustomDragLayer } from './CustomDragLayer';
 import { LeftSidebar } from './LeftSidebar';
-import { componentTypes } from './Components/components';
+import { componentTypes } from './WidgetManager/components';
 import { Inspector } from './Inspector/Inspector';
 import { DataSourceTypes } from './DataSourceManager/SourceComponents';
 import { QueryManager } from './QueryManager';

frontend/src/Editor/Inspector/Components/DefaultComponent.jsx

@@ -109,6 +109,25 @@ export const baseComponentProperties = (
     });
   }
 
+  items.push({
+    title: 'General',
+    isOpen: false,
+    children: (
+      <>
+        {renderElement(
+          component,
+          componentMeta,
+          layoutPropertyChanged,
+          dataQueries,
+          'tooltip',
+          'general',
+          currentState,
+          allComponents
+        )}
+      </>
+    ),
+  });
+
   items.push({
     title: 'Layout',
     isOpen: false,

frontend/src/Editor/Inspector/Inspector.jsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useLayoutEffect } from 'react';
 import Tabs from 'react-bootstrap/Tabs';
 import Tab from 'react-bootstrap/Tab';
 import { v4 as uuidv4 } from 'uuid';
-import { componentTypes } from '../Components/components';
+import { componentTypes } from '../WidgetManager/components';
 import { Table } from './Components/Table';
 import { Chart } from './Components/Chart';
 import { renderElement } from './Utils';

frontend/src/Editor/SubContainer.jsx

@@ -6,7 +6,7 @@ import { ItemTypes } from './ItemTypes';
 import { DraggableBox } from './DraggableBox';
 import { snapToGrid as doSnapToGrid } from './snapToGrid';
 import update from 'immutability-helper';
-import { componentTypes } from './Components/components';
+import { componentTypes } from './WidgetManager/components';
 import { computeComponentName } from '@/_helpers/utils';
 import produce from 'immer';
 

frontend/src/Editor/WidgetManager/components.js

@@ -0,0 +1,35 @@
+import { widgets } from './widgetConfig';
+
+const universalProps = {
+  properties: {},
+  general: {
+    tooltip: { type: 'code', displayName: 'Tooltip' },
+  },
+  others: {},
+  events: {},
+  styles: {},
+  definition: {
+    others: {},
+    events: [],
+    styles: {},
+  },
+};
+
+const combineProperties = (widget, universal, isArray = false) => {
+  return {
+    ...widget,
+    properties: { ...universal.properties, ...widget.properties },
+    general: { ...universal.general, ...widget.general },
+    others: { ...universal.others, ...widget.others },
+    events: isArray ? [...universal.events, ...widget.events] : { ...universal.events, ...widget.events },
+    styles: { ...universal.styles, ...widget.styles },
+    exposedVariables: { ...universal.exposedVariables, ...widget.exposedVariables },
+  };
+};
+
+export const componentTypes = widgets.map((widget) => {
+  return {
+    ...combineProperties(widget, universalProps),
+    definition: combineProperties(widget.definition, universalProps.definition, true),
+  };
+});

frontend/src/Editor/Components/components.js → frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -1,4 +1,4 @@
-export const componentTypes = [
+export const widgets = [
   {
     name: 'Table',
     displayName: 'Table',

frontend/src/Editor/component-properties-resolution.js

@@ -27,3 +27,19 @@ export const resolveStyles = (component, currentState, defaultValue, customResol
     return {};
   }
 };
+
+export const resolveGeneralProperties = (component, currentState, defaultValue, customResolvables) => {
+  if (currentState) {
+    const generalProperties = component.definition?.general ?? {};
+    return Object.entries(generalProperties).reduce((resolvedGeneral, entry) => {
+      const key = entry[0];
+      const value = resolveReferences(entry[1].value, currentState, defaultValue, customResolvables);
+      return {
+        ...resolvedGeneral,
+        ...{ [key]: value },
+      };
+    }, {});
+  } else {
+    return {};
+  }
+};

frontend/src/_helpers/appUtils.js

@@ -10,7 +10,7 @@ import { dataqueryService } from '@/_services';
 import _ from 'lodash';
 import moment from 'moment';
 import Tooltip from 'react-bootstrap/Tooltip';
-import { componentTypes } from '@/Editor/Components/components';
+import { componentTypes } from '@/Editor/WidgetManager/components';
 import generateCSV from '@/_lib/generate-csv';
 import generateFile from '@/_lib/generate-file';
 import { allSvgs } from '@tooljet/plugins/client';