diff --git a/frontend/src/Editor/Comment/index.jsx b/frontend/src/Editor/Comment/index.jsx
index 5585d2baed..920033ee46 100644
--- a/frontend/src/Editor/Comment/index.jsx
+++ b/frontend/src/Editor/Comment/index.jsx
@@ -36,6 +36,7 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads,
}, []);
React.useLayoutEffect(() => {
+ // eslint-disable-next-line no-unsafe-optional-chaining
const { left } = trigger?.ref?.current?.getBoundingClientRect();
if (left < 460) setPlacement('right');
@@ -54,7 +55,7 @@ const Comment = ({ socket, x, y, threadId, user = {}, isResolved, fetchThreads,
} else {
// resetting the query param
// react router updates the url with the set basename resulting invalid url unless replaced
- router.push(window.location.pathname.replace(window.public_config?.SUB_PATH, '/'));
+ router.history(window.location.pathname.replace(window.public_config?.SUB_PATH, '/'));
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open]);
diff --git a/frontend/src/Editor/Components/ButtonGroup.jsx b/frontend/src/Editor/Components/ButtonGroup.jsx
index 5ef5f32349..9643f25638 100644
--- a/frontend/src/Editor/Components/ButtonGroup.jsx
+++ b/frontend/src/Editor/Components/ButtonGroup.jsx
@@ -29,6 +29,7 @@ export const ButtonGroup = function Button({
const [defaultActive, setDefaultActive] = useState(defaultSelected);
const [data, setData] = useState(
+ // eslint-disable-next-line no-unsafe-optional-chaining
values?.length <= labels?.length ? [...labels, ...values?.slice(labels?.length)] : labels
);
// data is used as state to show what to display , club of label+values / values
@@ -39,6 +40,7 @@ export const ButtonGroup = function Button({
useEffect(() => {
if (labels?.length < values?.length) {
+ // eslint-disable-next-line no-unsafe-optional-chaining
setData([...labels, ...values?.slice(labels?.length)]);
} else {
setData(labels);
diff --git a/frontend/src/Editor/Components/Calendar.jsx b/frontend/src/Editor/Components/Calendar.jsx
index 9c4b2edf9a..db754d03c5 100644
--- a/frontend/src/Editor/Components/Calendar.jsx
+++ b/frontend/src/Editor/Components/Calendar.jsx
@@ -119,11 +119,6 @@ export const Calendar = function ({
},
};
- //! hack
- if (exposedVariables.currentDate === undefined) {
- setExposedVariable('currentDate', moment(defaultDate).format(properties.dateFormat));
- }
-
return (
{
const { icon } = properties;
const { iconColor, visibility } = styles;
+ // eslint-disable-next-line import/namespace
const IconElement = Icons[icon];
const color = iconColor === '#000' ? (darkMode ? '#fff' : '#000') : iconColor;
@@ -42,6 +43,7 @@ export const Icon = ({ properties, styles, fireEvent, width, height, registerAct
event.stopPropagation();
fireEvent('onHover');
}}
+ stroke={1.5}
/>
);
diff --git a/frontend/src/Editor/Components/RangeSlider.jsx b/frontend/src/Editor/Components/RangeSlider.jsx
index 480d1e12bf..c19057a24c 100644
--- a/frontend/src/Editor/Components/RangeSlider.jsx
+++ b/frontend/src/Editor/Components/RangeSlider.jsx
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
-import Slider, { Range } from 'rc-slider';
+import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
export const RangeSlider = function RangeSlider({ height, properties, styles, setExposedVariable, fireEvent, dataCy }) {
@@ -64,7 +64,8 @@ export const RangeSlider = function RangeSlider({ height, properties, styles, se
return (
{enableTwoHandle ? (
-
);
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index ab2e025334..24032468a2 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -28,6 +28,7 @@ import generateColumnsData from './columns';
import generateActionsData from './columns/actions';
import autogenerateColumns from './columns/autogenerateColumns';
import IndeterminateCheckbox from './IndeterminateCheckbox';
+// eslint-disable-next-line import/no-unresolved
import { useTranslation } from 'react-i18next';
// eslint-disable-next-line import/no-unresolved
import JsPDF from 'jspdf';
@@ -35,7 +36,7 @@ import JsPDF from 'jspdf';
import 'jspdf-autotable';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
// eslint-disable-next-line import/no-unresolved
-import { IconEyeOff } from '@tabler/icons';
+import { IconEyeOff } from '@tabler/icons-react';
import * as XLSX from 'xlsx/xlsx.mjs';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
@@ -43,6 +44,7 @@ import { useMounted } from '@/_hooks/use-mount';
import GenerateEachCellValue from './GenerateEachCellValue';
// eslint-disable-next-line import/no-unresolved
import { toast } from 'react-hot-toast';
+import { Tooltip } from 'react-tooltip';
export function Table({
id,
@@ -348,6 +350,9 @@ export function Table({
darkMode,
] // Hack: need to fix
);
+
+ console.log('columns--- ', columns);
+
const data = useMemo(
() => tableData,
[
@@ -598,7 +603,7 @@ export function Table({
className={`${darkMode && 'popover-dark-themed theme-dark'} shadow table-widget-download-popup`}
placement="bottom"
>
-
+
exportData('csv', true)}>
Download as CSV
@@ -618,7 +623,7 @@ export function Table({
Download as PDF
-
+
);
}
@@ -635,7 +640,6 @@ export function Table({
borderRadius: Number.parseFloat(borderRadius),
}}
onClick={(event) => {
- event.stopPropagation();
onComponentClick(id, component, event);
}}
ref={tableRef}
@@ -661,19 +665,34 @@ export function Table({
)}
{showFilterButton && (
-
showFilters()}>
- 
- {tableDetails.filterDetails.filters.length > 0 && (
-
- )}
-
+ <>
+
showFilters()}
+ data-tooltip-id="tooltip-for-filter-data"
+ data-tooltip-content="Filter data"
+ >
+
+ {tableDetails.filterDetails.filters.length > 0 && (
+
+ )}
+
+
+
)}
{showDownloadButton && (
-
-
- 
-
-
+ <>
+
+
+
+
+
+
+
)}
{!hideColumnSelectorButton && (
{
handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
}}
- filterOptions={fuzzySearch}
+ fuzzySearch
placeholder={t('globals.select', 'Select') + '...'}
disabled={!column.isEditable}
- className={`${darkMode ? 'select-search-dark' : 'select-search'}`}
+ className={'select-search'}
/>
{validationError}
diff --git a/frontend/src/Editor/Container.jsx b/frontend/src/Editor/Container.jsx
index 033a6998c2..eedb5617f0 100644
--- a/frontend/src/Editor/Container.jsx
+++ b/frontend/src/Editor/Container.jsx
@@ -68,11 +68,11 @@ export const Container = ({
const canvasRef = useRef(null);
const focusedParentIdRef = useRef(undefined);
- useHotkeys('⌘+z, control+z', () => handleUndo());
- useHotkeys('⌘+shift+z, control+shift+z', () => handleRedo());
+ useHotkeys('meta+z, control+z', () => handleUndo());
+ useHotkeys('meta+shift+z, control+shift+z', () => handleRedo());
useHotkeys(
- '⌘+v, control+v',
+ 'meta+v, control+v',
() => {
if (isContainerFocused) {
navigator.clipboard.readText().then((cliptext) => {
diff --git a/frontend/src/Editor/DraggableBox.jsx b/frontend/src/Editor/DraggableBox.jsx
index dbd861a822..9a32aa89fb 100644
--- a/frontend/src/Editor/DraggableBox.jsx
+++ b/frontend/src/Editor/DraggableBox.jsx
@@ -176,15 +176,9 @@ export const DraggableBox = function DraggableBox({
};
const layoutData = inCanvas ? layouts[currentLayout] || defaultData : defaultData;
- const [currentLayoutOptions, setCurrentLayoutOptions] = useState(layoutData);
-
- useEffect(() => {
- console.log(layoutData);
- setCurrentLayoutOptions(layoutData);
- }, [layoutData.height, layoutData.width, layoutData.left, layoutData.top, currentLayout]);
const gridWidth = canvasWidth / 43;
- const width = (canvasWidth * currentLayoutOptions.width) / 43;
+ const width = (canvasWidth * layoutData.width) / 43;
const configWidgetHandlerForModalComponent =
!isSelectedComponent &&
@@ -217,11 +211,11 @@ export const DraggableBox = function DraggableBox({
dragGrid={[gridWidth, 10]}
size={{
width: width,
- height: currentLayoutOptions.height,
+ height: layoutData.height,
}}
position={{
- x: currentLayoutOptions ? (currentLayoutOptions.left * canvasWidth) / 100 : 0,
- y: currentLayoutOptions ? currentLayoutOptions.top : 0,
+ x: layoutData ? (layoutData.left * canvasWidth) / 100 : 0,
+ y: layoutData ? layoutData.top : 0,
}}
defaultSize={{}}
className={`resizer ${
@@ -241,7 +235,7 @@ export const DraggableBox = function DraggableBox({
disableDragging={mode !== 'edit' || readOnly}
onDragStop={(e, direction) => {
setDragging(false);
- onDragStop(e, id, direction, currentLayout, currentLayoutOptions);
+ onDragStop(e, id, direction, currentLayout, layoutData);
}}
cancel={`div.table-responsive.jet-data-table, div.calendar-widget, div.text-input, .textarea, .map-widget, .range-slider, .kanban-container`}
onDragStart={(e) => e.stopPropagation()}
@@ -261,9 +255,9 @@ export const DraggableBox = function DraggableBox({
id={id}
removeComponent={removeComponent}
component={component}
- position={currentLayoutOptions.top < 15 ? 'bottom' : 'top'}
- widgetTop={currentLayoutOptions.top}
- widgetHeight={currentLayoutOptions.height}
+ position={layoutData.top < 15 ? 'bottom' : 'top'}
+ widgetTop={layoutData.top}
+ widgetHeight={layoutData.height}
isMultipleComponentsSelected={isMultipleComponentsSelected}
configWidgetHandlerForModalComponent={configWidgetHandlerForModalComponent}
/>
@@ -273,7 +267,7 @@ export const DraggableBox = function DraggableBox({
component={component}
id={id}
width={width}
- height={currentLayoutOptions.height - 4}
+ height={layoutData.height - 4}
mode={mode}
changeCanDrag={changeCanDrag}
inCanvas={inCanvas}
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index dabb10477c..4f5e51a1a1 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -32,7 +32,7 @@ import {
removeSelectedComponent,
} from '@/_helpers/appUtils';
import { Confirm } from './Viewer/Confirm';
-import ReactTooltip from 'react-tooltip';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
import CommentNotifications from './CommentNotifications';
import { WidgetManager } from './WidgetManager';
import Fuse from 'fuse.js';
@@ -53,6 +53,8 @@ import { v4 as uuid } from 'uuid';
import Skeleton from 'react-loading-skeleton';
import EmptyQueriesIllustration from '@assets/images/icons/no-queries-added.svg';
import EditorHeader from './Header';
+import '@/_styles/editor/react-select-search.scss';
+import { withRouter } from '@/_hoc/withRouter';
setAutoFreeze(false);
enablePatches();
@@ -61,9 +63,9 @@ class EditorComponent extends React.Component {
constructor(props) {
super(props);
- const appId = this.props.match.params.id;
+ const appId = this.props.params.id;
- const pageHandle = this.props.match.params.pageHandle;
+ const pageHandle = this.props.params.pageHandle;
const currentUser = authenticationService.currentUserValue;
@@ -174,7 +176,7 @@ class EditorComponent extends React.Component {
componentDidMount() {
this.autoSave();
this.fetchApps(0);
- this.fetchApp(this.props.match.params.pageHandle);
+ this.fetchApp(this.props.params.pageHandle);
this.fetchOrgEnvironmentVariables();
this.initComponentVersioning();
this.initRealtimeSave();
@@ -402,7 +404,7 @@ class EditorComponent extends React.Component {
};
fetchApp = (startingPageHandle) => {
- const appId = this.props.match.params.id;
+ const appId = this.props.params.id;
const callBack = async (data) => {
let dataDefinition = defaults(data.definition, this.defaultDefinition);
@@ -1627,7 +1629,7 @@ class EditorComponent extends React.Component {
const queryParamsString = queryParams.map(([key, value]) => `${key}=${value}`).join('&');
- this.props.history.push(`/apps/${this.state.appId}/${handle}?${queryParamsString}`);
+ this.props.navigate(`/apps/${this.state.appId}/${handle}?${queryParamsString}`);
const { globals: existingGlobals } = this.state.currentState;
@@ -1765,7 +1767,6 @@ class EditorComponent extends React.Component {
return (
-
0}
message={`Do you want to run this query - ${queryConfirmationList[0]?.queryName}?`}
@@ -2037,11 +2038,11 @@ class EditorComponent extends React.Component {
onClick={() => {
this.handleAddNewQuery(setSaveConfirmation, setCancelData);
}}
+ data-tooltip-id="tooltip-for-add-query"
+ data-tooltip-content="Add new query"
>
)}
+
-
+
+
@@ -207,8 +206,8 @@ export const GlobalSettings = ({
-
-
+
-