fix : qa bugs

ToolJet · May 16, 2024 · d35afc5 · d35afc5
1 parent cd10eca
commit d35afc5
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 71 deletions.
diff --git a/frontend/src/Editor/CodeBuilder/Elements/Color.jsx b/frontend/src/Editor/CodeBuilder/Elements/Color.jsx
@@ -3,34 +3,10 @@ import { SketchPicker } from 'react-color';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import classNames from 'classnames';
+import { computeColor } from '@/_helpers/utils';
 
 export const Color = ({ value, onChange, pickerStyle = {}, cyLabel, asBoxShadowPopover = true, meta, component }) => {
- // This function is written only to handle diff colors W.R.T button types
- const computeColor = () => {
- if (component?.component?.definition?.styles?.type?.value == 'primary') return value;
- else {
- if (meta?.displayName == 'Background') {
- value = value == '#4368E3' ? '#FFFFFF' : value;
- return value;
- }
- if (meta?.displayName == 'Text color') {
- value = value == '#FFFFFF' ? '#1B1F24' : value;
- return value;
- }
- if (meta?.displayName == 'Icon color') {
- value = value == '#FFFFFF' ? '#CCD1D5' : value;
- return value;
- }
- if (meta?.displayName == 'Border color') {
- value = value == '#4368E3' ? '#CCD1D5' : value;
- return value;
- }
- if (meta?.displayName == 'Loader color') {
- return value;
- }
- }
- };
- value = component.component.component == 'Button' ? computeColor() : value;
+ value = component?.component?.component == 'Button' ? computeColor(component, value, meta) : value;
 
  const [showPicker, setShowPicker] = useState(false);
  const darkMode = localStorage.getItem('darkMode') === 'true';

diff --git a/frontend/src/Editor/Components/Button.jsx b/frontend/src/Editor/Components/Button.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 const tinycolor = require('tinycolor2');
 import * as Icons from '@tabler/icons-react';
+import Loader from '@/ToolJetUI/Loader/Loader';
 
 export const Button = function Button(props) {
  const { height, properties, styles, fireEvent, id, dataCy, setExposedVariable, setExposedVariables } = props;
@@ -56,6 +57,8 @@ export const Button = function Button(props) {
 
  const computedTextColor =
  '#FFFFFF' === textColor ? (type === 'primary' ? 'var(--text-on-solid)' : 'var(--text-primary)') : textColor;
+ const computedLoaderColor =
+ '#FFFFFF' === loaderColor ? (type === 'primary' ? loaderColor : 'var(--primary-brand)') : loaderColor;
 
  const computedBgColor =
  '#4368E3' === backgroundColor
@@ -72,15 +75,17 @@ export const Button = function Button(props) {
  width: '100%',
  borderRadius: `${borderRadius}px`,
  height,
- display: visibility ? '' : 'none',
  '--tblr-btn-color-darker': tinycolor(computedBgColor).darken(8).toString(),
  '--tblr-btn-color-clicked': tinycolor(computedBgColor).darken(15).toString(),
- '--loader-color': tinycolor(loaderColor ?? 'var(--icons-on-solid)').toString(),
+ '--loader-color': tinycolor(computedLoaderColor ?? 'var(--icons-on-solid)').toString(),
  borderColor: computedBorderColor,
  boxShadow: type == 'primary' && boxShadow,
  padding: '0px 12px',
- cursor: 'pointer',
+ // cursor: 'pointer',
  opacity: disable && '50%',
+ display: visibility ? (loading ? 'flex' : '') : 'none',
+ justifyContent: 'center',
+ alignItems: 'center',
  };
 
  useEffect(() => {
@@ -166,63 +171,66 @@ export const Button = function Button(props) {
  position: 'relative',
  height,
  }}
+ disabled={disable || loading}
  >
  <button
- disabled={disable || loading}
  className={cx('overflow-hidden', {
- 'btn-loading': loading,
  'btn-custom': hasCustomBackground,
  'jet-button ': type == 'primary',
  'jet-outline-button ': type == 'outline',
  })}
  style={computedStyles}
  onClick={handleClick}
- onMouseOver={() => {
- fireEvent('onHover');
- }}
  data-cy={dataCy}
  type="default"
+ onMouseEnter={() => {
+ fireEvent('onHover');
+ }}
  >
- <div
- style={{
- height: '100%',
- width: '100%',
- display: !loading ? 'flex' : 'none',
- alignItems: 'center',
- flexDirection: direction == 'left' ? 'row-reverse' : 'row',
- justifyContent: 'center',
- gap: '6px',
- }}
- >
+ {!loading ? (
  <div
  style={{
- overflow: 'hidden',
+ height: '100%',
+ width: '100%',
+ display: !loading ? 'flex' : 'none',
+ alignItems: 'center',
+ flexDirection: direction == 'left' ? 'row-reverse' : 'row',
+ justifyContent: 'center',
+ gap: '6px',
  }}
  >
- <span style={{ maxWidth: ' 100%', minWidth: '0' }}>
- <p
- className="tj-text-sm"
- style={{ fontWeight: '500', margin: '0px', padding: '0px', color: computedTextColor }}
- >
- {label}
- </p>
- </span>
- </div>
- {iconVisibility && (
- <div className="d-flex">
- {!props.isResizing && !loading && (
- <IconElement
- style={{
- width: '16px',
- height: '16px',
- color: computedIconColor,
- }}
- stroke={1.5}
- />
- )}
+ <div
+ style={{
+ overflow: 'hidden',
+ }}
+ >
+ <span style={{ maxWidth: ' 100%', minWidth: '0' }}>
+ <p
+ className="tj-text-sm"
+ style={{ fontWeight: '500', margin: '0px', padding: '0px', color: computedTextColor }}
+ >
+ {label}
+ </p>
+ </span>
  </div>
- )}
- </div>
+ {iconVisibility && (
+ <div className="d-flex">
+ {!props.isResizing && !loading && (
+ <IconElement
+ style={{
+ width: '16px',
+ height: '16px',
+ color: computedIconColor,
+ }}
+ stroke={1.5}
+ />
+ )}
+ </div>
+ )}
+ </div>
+ ) : (
+ <Loader color={computedLoaderColor} width="16" />
+ )}
  </button>
  </div>
  );

diff --git a/frontend/src/ToolJetUI/Loader/Loader.jsx b/frontend/src/ToolJetUI/Loader/Loader.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const Loader = ({ width, style, absolute = true }) => {
+const Loader = ({ width, style, absolute = true, color = '#3E63DD' }) => {
  const viewBoxSize = 240; // Increase the viewBox size as needed
 
  return (
@@ -11,7 +11,7 @@ const Loader = ({ width, style, absolute = true }) => {
  height={width}
  viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
  fill="none"
- color="#3E63DD"
+ color={color}
  >
  <defs>
  <linearGradient id="spinner-secondHalf">

diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
@@ -1271,3 +1271,29 @@ export const setWindowTitle = async (pageDetails, location) => {
  document.title = !(pageDetails?.preview === false) ? `${pageTitle} | ${whiteLabelText}` : `${pageTitle}`;
  }
 };
+// This function is written only to handle diff colors W.R.T button types
+export const computeColor = (component, value, meta) => {
+ if (component?.component?.definition?.styles?.type?.value == 'primary') return value;
+ else {
+ if (meta?.displayName == 'Background') {
+ value = value == '#4368E3' ? '#FFFFFF' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Text color') {
+ value = value == '#FFFFFF' ? '#1B1F24' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Icon color') {
+ value = value == '#FFFFFF' ? '#CCD1D5' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Border color') {
+ value = value == '#4368E3' ? '#CCD1D5' : value;
+ return value;
+ }
+ if (meta?.displayName == 'Loader color') {
+ value = value == '#FFFFFF' ? '#4368E3' : value;
+ return value;
+ }
+ }
+};