adds On change event in color picker component (#4203)

* #issue4174

* #issue-4174

* #issue-4174

* bug fixed : event is getting fired on reloading the component

* bug fixed : event getting fired on changing default value of the color picker from the inspector widget

Co-authored-by: manishkushare <kushare.manish9@gmail.com>

frontend/src/Editor/Components/ColorPicker.jsx

@@ -9,6 +9,7 @@ export const ColorPicker = function ({
   darkMode,
   height,
   registerAction,
+  fireEvent,
 }) {
   const { visibility } = styles;
   const defaultColor = properties.defaultColor;
@@ -46,16 +47,18 @@ export const ColorPicker = function ({
 
   registerAction(
     'setColor',
-    async function (color) {
-      if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(color)) {
-        setExposedVariable('selectedColorHex', `${color}`);
-        setExposedVariable('selectedColorRGB', hexToRgb(color));
-        setExposedVariable('selectedColorRGBA', hexToRgba(color));
-        setColor(color);
+    async function (colorCode) {
+      if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(colorCode)) {
+        if (colorCode !== color) {
+          setColor(colorCode);
+          setExposedVariable('selectedColorHex', `${colorCode}`);
+          setExposedVariable('selectedColorRGB', hexToRgb(colorCode));
+          setExposedVariable('selectedColorRGBA', hexToRgba(colorCode)).then(() => fireEvent('onChange'));
+        }
       } else {
         setExposedVariable('selectedColorHex', 'undefined');
         setExposedVariable('selectedColorRGB', 'undefined');
-        setExposedVariable('selectedColorRGBA', 'undefined');
+        setExposedVariable('selectedColorRGBA', 'undefined').then(() => fireEvent('onChange'));
         setColor('Invalid Color');
       }
     },
@@ -64,10 +67,12 @@ export const ColorPicker = function ({
 
   useEffect(() => {
     if (/^#(([\dA-Fa-f]{3}){1,2}|([\dA-Fa-f]{4}){1,2})$/.test(defaultColor)) {
-      setExposedVariable('selectedColorHex', `${defaultColor}`);
-      setExposedVariable('selectedColorRGB', hexToRgb(defaultColor));
-      setExposedVariable('selectedColorRGBA', hexToRgba(defaultColor));
-      setColor(defaultColor);
+      if (defaultColor !== color) {
+        setExposedVariable('selectedColorHex', `${defaultColor}`);
+        setExposedVariable('selectedColorRGB', hexToRgb(defaultColor));
+        setExposedVariable('selectedColorRGBA', hexToRgba(defaultColor));
+        setColor(defaultColor);
+      }
     } else {
       setExposedVariable('selectedColorHex', 'undefined');
       setExposedVariable('selectedColorRGB', 'undefined');
@@ -77,13 +82,15 @@ export const ColorPicker = function ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultColor]);
 
-  const handleColorChange = (color) => {
-    const { r, g, b, a } = color.rgb;
-    const { hex: hexColor } = color;
-    setColor(hexColor);
-    setExposedVariable('selectedColorHex', `${hexColor}`);
-    setExposedVariable('selectedColorRGB', `rgb(${r},${g},${b})`);
-    setExposedVariable('selectedColorRGBA', `rgb(${r},${g},${b},${a})`);
+  const handleColorChange = (colorCode) => {
+    const { r, g, b, a } = colorCode.rgb;
+    const { hex: hexColor } = colorCode;
+    if (hexColor !== color) {
+      setColor(hexColor);
+      setExposedVariable('selectedColorHex', `${hexColor}`);
+      setExposedVariable('selectedColorRGB', `rgb(${r},${g},${b})`);
+      setExposedVariable('selectedColorRGBA', `rgb(${r},${g},${b},${a})`).then(() => fireEvent('onChange'));
+    }
   };
   //background color style for the div dispaying box filled by selected color
   const backgroundColorDivStyle = {

frontend/src/Editor/DataSourceManager/TestConnection.jsx

@@ -47,11 +47,15 @@ export const TestConnection = ({ kind, options, pluginId, onConnectionTestFailed
   return (
     <div>
       {connectionStatus === 'failed' && (
-        <span className="badge bg-red-lt" data-cy={`test-connection-failed-text`}>{t('globals.noConnection', 'could not connect')}</span>
+        <span className="badge bg-red-lt" data-cy={`test-connection-failed-text`}>
+          {t('globals.noConnection', 'could not connect')}
+        </span>
       )}
 
       {connectionStatus === 'success' && (
-        <span className="badge bg-green-lt" data-cy={`test-connection-verified-text`}>{t('globals.connectionVerified', 'connection verified')}</span>
+        <span className="badge bg-green-lt" data-cy={`test-connection-verified-text`}>
+          {t('globals.connectionVerified', 'connection verified')}
+        </span>
       )}
 
       {connectionStatus === 'unknown' && (

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

@@ -786,7 +786,9 @@ class TableComponent extends React.Component {
     const displayServerSideFilter = component.component.definition.properties.showFilterButton?.value
       ? resolveReferences(component.component.definition.properties.showFilterButton?.value, currentState)
       : false;
-    const displayServerSideSearch = (component.component.definition.properties.displaySearchBox?.value) ? resolveReferences(component.component.definition.properties.displaySearchBox?.value, currentState) : false;
+    const displayServerSideSearch = component.component.definition.properties.displaySearchBox?.value
+      ? resolveReferences(component.component.definition.properties.displaySearchBox?.value, currentState)
+      : false;
     const serverSidePagination = component.component.definition.properties.serverSidePagination?.value
       ? resolveReferences(component.component.definition.properties.serverSidePagination?.value, currentState)
       : false;

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -4828,7 +4828,9 @@ ReactDOM.render(<ConnectedComponent />, document.body);`,
       showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
       showOnMobile: { type: 'toggle', displayName: 'Show on mobile' },
     },
-    events: {},
+    events: {
+      onChange: { displayName: 'On change' },
+    },
     styles: {
       visibility: { type: 'toggle', displayName: 'Visibility' },
     },