From 231f71d8dca1255d7313f8d016320a465a8c944e Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 26 Feb 2025 00:00:52 +0530 Subject: [PATCH 01/16] Added indicator in switchPage function for browser navigation and also added page id and handle in url state. --- .../Viewer/MobileNavigationMenu.jsx | 2 +- .../Viewer/ViewerSidebarNavigation.jsx | 2 +- .../src/AppBuilder/_stores/slices/appSlice.js | 23 +++++++++++-------- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx b/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx index e6c8179328..bf4b6b50b4 100644 --- a/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx +++ b/frontend/src/AppBuilder/Viewer/MobileNavigationMenu.jsx @@ -134,7 +134,7 @@ const MobileNavigationMenu = ({ pages, switchPage, currentPageId, darkMode, chan version: selectedVersionName, env: selectedEnvironmentName, }; - switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams), true); + switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams)); }; var styles = { bmBurgerButton: { diff --git a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx index d913bffd91..a7111a48a0 100644 --- a/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx +++ b/frontend/src/AppBuilder/Viewer/ViewerSidebarNavigation.jsx @@ -95,7 +95,7 @@ export const ViewerSidebarNavigation = ({ version: selectedVersionName, env: selectedEnvironmentName, }; - switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams), true); + switchPage(pageId, pages.find((page) => page.id === pageId)?.handle, Object.entries(queryParams)); }; const isLicensed = diff --git a/frontend/src/AppBuilder/_stores/slices/appSlice.js b/frontend/src/AppBuilder/_stores/slices/appSlice.js index 560dabdec8..6635519def 100644 --- a/frontend/src/AppBuilder/_stores/slices/appSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/appSlice.js @@ -93,7 +93,7 @@ export const createAppSlice = (set, get) => ({ console.error('Error updating page:', error); } }, - switchPage: (pageId, handle, queryParams = []) => { + switchPage: (pageId, handle, queryParams = [], isBackOrForward = false) => { get().debugger.resetUnreadErrorCount(); // reset stores if (get().pageSwitchInProgress) { @@ -134,14 +134,19 @@ export const createAppSlice = (set, get) => ({ const queryParamsString = filteredQueryParams.map(([key, value]) => `${key}=${value}`).join('&'); const slug = get().app.slug; - navigate( - `/${isPreview ? 'applications' : getWorkspaceId() + '/apps'}/${slug ?? appId}/${handle}?${queryParamsString}`, - { - state: { - isSwitchingPage: true, - }, - } - ); + if (!isBackOrForward) { + navigate( + `/${isPreview ? 'applications' : getWorkspaceId() + '/apps'}/${slug ?? appId}/${handle}?${queryParamsString}`, + { + state: { + isSwitchingPage: true, + id: pageId, + handle: handle, + }, + } + ); + } + const newPage = pages.find((p) => p.id === pageId); setResolvedPageConstants({ id: newPage?.id, From 23e103ad96bb515c21ce8c33099b4742eefdb86d Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 26 Feb 2025 01:29:14 +0530 Subject: [PATCH 02/16] Added function set page id and handle in the url state on first load. --- frontend/src/AppBuilder/AppBuilder.jsx | 9 +++++++++ frontend/src/AppBuilder/Viewer/Viewer.jsx | 10 ++++++++++ frontend/src/AppBuilder/_utils/misc.js | 9 +++++++++ 3 files changed, 28 insertions(+) diff --git a/frontend/src/AppBuilder/AppBuilder.jsx b/frontend/src/AppBuilder/AppBuilder.jsx index 30b0d6d97b..9a414f55f5 100644 --- a/frontend/src/AppBuilder/AppBuilder.jsx +++ b/frontend/src/AppBuilder/AppBuilder.jsx @@ -14,6 +14,7 @@ import EditorHeader from '@/AppBuilder/Header'; import LeftSidebar from '@/AppBuilder/LeftSidebar'; import Popups from './Popups'; import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext'; +import { setPageStateOnLoad } from '@/AppBuilder/_utils/misc'; // const EditorHeader = lazy(() => import('@/AppBuilder/Header')); // const LeftSidebar = lazy(() => import('@/AppBuilder/LeftSidebar')); @@ -26,6 +27,14 @@ export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod useAppData(appId, moduleId, darkMode); const isEditorLoading = useStore((state) => state.isEditorLoading); const currentMode = useStore((state) => state.currentMode); + const currentPageId = useStore((state) => state.currentPageId); + const currentPageHandle = useStore((state) => state.currentPageHandle); + + useEffect(() => { + if (currentPageId && currentPageHandle) { + setPageStateOnLoad(currentPageId, currentPageHandle); + } + }, [currentPageId, currentPageHandle]); const updateIsTJDarkMode = useStore((state) => state.updateIsTJDarkMode); diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx index af820fca13..fa4a4e1883 100644 --- a/frontend/src/AppBuilder/Viewer/Viewer.jsx +++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx @@ -15,6 +15,7 @@ import ViewerSidebarNavigation from './ViewerSidebarNavigation'; import { shallow } from 'zustand/shallow'; import Popups from '../Popups'; import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext'; +import { setPageStateOnLoad } from '@/AppBuilder/_utils/misc'; export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMode, environmentId, versionId } = {}) => { const DEFAULT_CANVAS_WIDTH = 1292; @@ -30,6 +31,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod selectedVersion, currentCanvasWidth, currentPageId, + currentPageHandle, globalSettings, pages, pageSettings, @@ -50,6 +52,7 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod appName: state.app.appName, homePageId: state?.app.homepageId, currentPageId: state.currentPageId, + currentPageHandle: state.currentPageHandle, globalSettings: state.globalSettings, pages: state.modules.canvas.pages, modules: state.modules, @@ -110,6 +113,13 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod const changeToDarkMode = (newMode) => { switchDarkMode(newMode); }; + + useEffect(() => { + if (currentPageId && currentPageHandle) { + setPageStateOnLoad(currentPageId, currentPageHandle); + } + }, [currentPageId, currentPageHandle]); + useEffect(() => { const isMobileDevice = deviceWindowWidth < 600; toggleCurrentLayout(isMobileDevice ? 'mobile' : 'desktop'); diff --git a/frontend/src/AppBuilder/_utils/misc.js b/frontend/src/AppBuilder/_utils/misc.js index 14929007f8..6fb5db56b9 100644 --- a/frontend/src/AppBuilder/_utils/misc.js +++ b/frontend/src/AppBuilder/_utils/misc.js @@ -15,6 +15,15 @@ export const navigate = (url, options = {}) => { ); }; +export const setPageStateOnLoad = (pageId, pageHandle) => { + // function to set page id and handle in the url state on first load + const currentState = history.state || {}; + if (currentState.isSwitchingPage) return; + + const newState = { ...currentState, id: pageId, handle: pageHandle }; + history.replaceState(newState, '', window.location.href); +}; + export async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); From 62c3d884417b83164fd1c8d10712efa16f3e609a Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Wed, 26 Feb 2025 02:08:10 +0530 Subject: [PATCH 03/16] Added event listener for forward and backward navigation. --- frontend/src/Routes/AppsRoute.jsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/Routes/AppsRoute.jsx b/frontend/src/Routes/AppsRoute.jsx index 7ed530162d..70a4b508d6 100644 --- a/frontend/src/Routes/AppsRoute.jsx +++ b/frontend/src/Routes/AppsRoute.jsx @@ -8,6 +8,7 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { handleAppAccess } from '@/_helpers/handleAppAccess'; import { getQueryParams } from '@/_helpers/routes'; import queryString from 'query-string'; +import useStore from '@/AppBuilder/_stores/store'; export const AppsRoute = ({ children, componentType }) => { const params = useParams(); @@ -20,6 +21,7 @@ export const AppsRoute = ({ children, componentType }) => { }); const clonedElement = React.cloneElement(children, extraProps); const navigate = useNavigate(); + const switchPage = useStore((state) => state.switchPage); /* any extra logic specifc to the route can be done @@ -29,6 +31,8 @@ export const AppsRoute = ({ children, componentType }) => { if (isValidSession) { onValidSession(); } + + return () => window.removeEventListener('popstate'); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isValidSession]); @@ -67,6 +71,12 @@ export const AppsRoute = ({ children, componentType }) => { setExtraProps(restDetails); setLoading(false); } + + // handle back and forward navigation + window.addEventListener('popstate', (e) => { + const { id, handle } = e.state; + switchPage(id, handle, [], true); + }); }; return {clonedElement}; From 189ecc38a0b897cd146c2cf92cb9779a2f835aa6 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Fri, 7 Mar 2025 00:04:13 +0530 Subject: [PATCH 04/16] Fixed issue where app crashed on arc browser. Removed setPageStateOnLoad logic and shifted it to useAppData hook. --- frontend/src/AppBuilder/AppBuilder.jsx | 9 --------- frontend/src/AppBuilder/Viewer/Viewer.jsx | 10 ---------- frontend/src/AppBuilder/_hooks/useAppData.js | 10 ++++++++++ frontend/src/AppBuilder/_utils/misc.js | 9 --------- frontend/src/Routes/AppsRoute.jsx | 12 +++++++----- 5 files changed, 17 insertions(+), 33 deletions(-) diff --git a/frontend/src/AppBuilder/AppBuilder.jsx b/frontend/src/AppBuilder/AppBuilder.jsx index 9a414f55f5..30b0d6d97b 100644 --- a/frontend/src/AppBuilder/AppBuilder.jsx +++ b/frontend/src/AppBuilder/AppBuilder.jsx @@ -14,7 +14,6 @@ import EditorHeader from '@/AppBuilder/Header'; import LeftSidebar from '@/AppBuilder/LeftSidebar'; import Popups from './Popups'; import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext'; -import { setPageStateOnLoad } from '@/AppBuilder/_utils/misc'; // const EditorHeader = lazy(() => import('@/AppBuilder/Header')); // const LeftSidebar = lazy(() => import('@/AppBuilder/LeftSidebar')); @@ -27,14 +26,6 @@ export const Editor = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod useAppData(appId, moduleId, darkMode); const isEditorLoading = useStore((state) => state.isEditorLoading); const currentMode = useStore((state) => state.currentMode); - const currentPageId = useStore((state) => state.currentPageId); - const currentPageHandle = useStore((state) => state.currentPageHandle); - - useEffect(() => { - if (currentPageId && currentPageHandle) { - setPageStateOnLoad(currentPageId, currentPageHandle); - } - }, [currentPageId, currentPageHandle]); const updateIsTJDarkMode = useStore((state) => state.updateIsTJDarkMode); diff --git a/frontend/src/AppBuilder/Viewer/Viewer.jsx b/frontend/src/AppBuilder/Viewer/Viewer.jsx index fa4a4e1883..af820fca13 100644 --- a/frontend/src/AppBuilder/Viewer/Viewer.jsx +++ b/frontend/src/AppBuilder/Viewer/Viewer.jsx @@ -15,7 +15,6 @@ import ViewerSidebarNavigation from './ViewerSidebarNavigation'; import { shallow } from 'zustand/shallow'; import Popups from '../Popups'; import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext'; -import { setPageStateOnLoad } from '@/AppBuilder/_utils/misc'; export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMode, environmentId, versionId } = {}) => { const DEFAULT_CANVAS_WIDTH = 1292; @@ -31,7 +30,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod selectedVersion, currentCanvasWidth, currentPageId, - currentPageHandle, globalSettings, pages, pageSettings, @@ -52,7 +50,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod appName: state.app.appName, homePageId: state?.app.homepageId, currentPageId: state.currentPageId, - currentPageHandle: state.currentPageHandle, globalSettings: state.globalSettings, pages: state.modules.canvas.pages, modules: state.modules, @@ -113,13 +110,6 @@ export const Viewer = ({ id: appId, darkMode, moduleId = 'canvas', switchDarkMod const changeToDarkMode = (newMode) => { switchDarkMode(newMode); }; - - useEffect(() => { - if (currentPageId && currentPageHandle) { - setPageStateOnLoad(currentPageId, currentPageHandle); - } - }, [currentPageId, currentPageHandle]); - useEffect(() => { const isMobileDevice = deviceWindowWidth < 600; toggleCurrentLayout(isMobileDevice ? 'mobile' : 'desktop'); diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js index 1b664cfa21..17ab503fa2 100644 --- a/frontend/src/AppBuilder/_hooks/useAppData.js +++ b/frontend/src/AppBuilder/_hooks/useAppData.js @@ -326,6 +326,16 @@ const useAppData = (appId, moduleId, darkMode, mode = 'edit', { environmentId, v // navigate(`/${getWorkspaceId()}/apps/${slug ?? appId}/${startingPage.handle}`); } + + // Add page id and handle to the state on initial load + const currentState = window.history.state || {}; + const pageInfo = { + id: startingPage.id, + handle: startingPage.handle, + }; + const newState = { ...currentState, ...pageInfo }; + window.history.replaceState(newState, '', window.location.href); + setCurrentPageHandle(startingPage.handle); updateFeatureAccess(); setCurrentPageId(startingPage.id, moduleId); diff --git a/frontend/src/AppBuilder/_utils/misc.js b/frontend/src/AppBuilder/_utils/misc.js index 6fb5db56b9..14929007f8 100644 --- a/frontend/src/AppBuilder/_utils/misc.js +++ b/frontend/src/AppBuilder/_utils/misc.js @@ -15,15 +15,6 @@ export const navigate = (url, options = {}) => { ); }; -export const setPageStateOnLoad = (pageId, pageHandle) => { - // function to set page id and handle in the url state on first load - const currentState = history.state || {}; - if (currentState.isSwitchingPage) return; - - const newState = { ...currentState, id: pageId, handle: pageHandle }; - history.replaceState(newState, '', window.location.href); -}; - export async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); diff --git a/frontend/src/Routes/AppsRoute.jsx b/frontend/src/Routes/AppsRoute.jsx index 70a4b508d6..e31d692d98 100644 --- a/frontend/src/Routes/AppsRoute.jsx +++ b/frontend/src/Routes/AppsRoute.jsx @@ -32,7 +32,7 @@ export const AppsRoute = ({ children, componentType }) => { onValidSession(); } - return () => window.removeEventListener('popstate'); + return () => window.removeEventListener('popstate', handleBrowserNavigation); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isValidSession]); @@ -73,10 +73,12 @@ export const AppsRoute = ({ children, componentType }) => { } // handle back and forward navigation - window.addEventListener('popstate', (e) => { - const { id, handle } = e.state; - switchPage(id, handle, [], true); - }); + window.addEventListener('popstate', handleBrowserNavigation); + }; + + const handleBrowserNavigation = (e) => { + const { id, handle } = e.state; + switchPage(id, handle, [], true); }; return {clonedElement}; From 93531030d2f748e49e59e8696ec45b16f7555396 Mon Sep 17 00:00:00 2001 From: Vijaykant Yadav Date: Thu, 13 Mar 2025 10:34:26 +0530 Subject: [PATCH 05/16] fix: query input focus on query rename --- .../Components/QueryManagerHeader.jsx | 22 ++++++++++--------- server/ee | 2 +- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerHeader.jsx b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerHeader.jsx index 75cbe9cef7..013733494f 100644 --- a/frontend/src/AppBuilder/QueryManager/Components/QueryManagerHeader.jsx +++ b/frontend/src/AppBuilder/QueryManager/Components/QueryManagerHeader.jsx @@ -1,4 +1,4 @@ -import React, { useState, forwardRef, useRef, useEffect } from 'react'; +import React, { useState, forwardRef, useRef, useEffect, useCallback } from 'react'; import RenameIcon from '../Icons/RenameIcon'; import Eye1 from '@/_ui/Icon/solidIcons/Eye1'; import Play from '@/_ui/Icon/solidIcons/Play'; @@ -13,6 +13,7 @@ import { decodeEntities } from '@/_helpers/utils'; import { canDeleteDataSource, canReadDataSource, canUpdateDataSource } from '@/_helpers'; import useStore from '@/AppBuilder/_stores/store'; import { useModuleId } from '@/AppBuilder/_contexts/ModuleContext'; +import { debounce } from 'lodash'; export const QueryManagerHeader = forwardRef(({ darkMode, setActiveTab, activeTab }, ref) => { const moduleId = useModuleId(); @@ -166,16 +167,17 @@ const NameInput = ({ onInput, value, darkMode, isDiabled, selectedQuery }) => { } }, [isFocused]); + const debouncedHandleInput = useCallback( + debounce((newName) => { + onInput(newName); + }, 300), + [onInput] + ); + const handleChange = (event) => { const sanitizedValue = event.target.value.replace(/[ \t&]/g, ''); setName(sanitizedValue); - }; - - const handleInput = (newName) => { - const result = onInput(newName); - if (!result) { - setName(value); - } + debouncedHandleInput(sanitizedValue); }; return ( @@ -200,12 +202,12 @@ const NameInput = ({ onInput, value, darkMode, isDiabled, selectedQuery }) => { event.persist(); if (event.keyCode === 13) { setIsFocused(false); - handleInput(event.target.value); + debouncedHandleInput(event.target.value); } }} onBlur={({ target }) => { setIsFocused(false); - handleInput(target.value); + debouncedHandleInput(target.value); }} /> ) : ( diff --git a/server/ee b/server/ee index 26447ec13d..1da04eef69 160000 --- a/server/ee +++ b/server/ee @@ -1 +1 @@ -Subproject commit 26447ec13d91119d001319ac940264bbc39a3b54 +Subproject commit 1da04eef696345ce9f35d42af92e5d6de992cd85 From 68124b112aef2afcab281de63b7529822b4ac73f Mon Sep 17 00:00:00 2001 From: Kartik Gupta Date: Mon, 17 Mar 2025 12:47:02 +0530 Subject: [PATCH 06/16] fix query race condition --- .../_stores/slices/dataQuerySlice.js | 15 +++++++-- .../_stores/slices/queryPanelSlice.js | 31 ++++++++++++++++++- 2 files changed, 42 insertions(+), 4 deletions(-) diff --git a/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js b/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js index 7f7868416d..252e387d70 100644 --- a/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js +++ b/frontend/src/AppBuilder/_stores/slices/dataQuerySlice.js @@ -13,6 +13,7 @@ const initialState = { creatingQueryInProcessId: null, queryConfirmationList: [], queuedActions: {}, + queryUpdates: {}, queries: { modules: { canvas: [], @@ -381,8 +382,11 @@ export const createDataQuerySlice = (set, get) => ({ return; } const versionId = get().currentVersionId; - dataqueryService - .update(newValues?.id, versionId, newValues?.name, newValues?.options) + const updatePromise = dataqueryService.update(newValues?.id, versionId, newValues?.name, newValues?.options); + set((state) => { + state.dataQuery.queryUpdates[newValues?.id] = updatePromise; + }); + updatePromise .then((data) => { localStorage.removeItem('transformation'); set((state) => { @@ -401,7 +405,12 @@ export const createDataQuerySlice = (set, get) => ({ state.dataQuery.isUpdatingQueryInProcess = false; }); }) - .finally(() => setIsAppSaving(false)); + .finally(() => { + setIsAppSaving(false); + set((state) => { + delete state.dataQuery.queryUpdates[newValues?.id]; + }); + }); }, 500), runOnLoadQueries: async () => { const queries = get().dataQuery.queries.modules.canvas; diff --git a/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js b/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js index fd49d2a5e4..fbfb931130 100644 --- a/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js @@ -206,7 +206,6 @@ export const createQueryPanelSlice = (set, get) => ({ isOnLoad = false, moduleId = 'canvas' ) => { - //! TODO get this using get() when migrated into slice const { eventsSlice, dataQuery: dataQuerySlice, @@ -227,6 +226,28 @@ export const createQueryPanelSlice = (set, get) => ({ executeWorkflow, executeMultilineJS, } = queryPanel; + const queryUpdatePromise = dataQuerySlice.queryUpdates[queryId]; + if (queryUpdatePromise) { + setResolvedQuery(queryId, { + isLoading: true, + }); + return queryUpdatePromise.then(() => + get().queryPanel.runQuery( + queryId, + queryName, + confirmed, + mode, + userSuppliedParameters, + component, + eventId, + shouldSetPreviewData, + isOnLoad, + moduleId + ) + ); + } + //! TODO get this using get() when migrated into slice + const { onEvent } = eventsSlice; const { queryConfirmationList } = dataQuerySlice; @@ -494,6 +515,14 @@ export const createQueryPanelSlice = (set, get) => ({ executeMultilineJS, setIsPreviewQueryLoading, } = queryPanel; + const queryUpdatePromise = get().dataQuery.queryUpdates[query?.id]; + if (queryUpdatePromise) { + setPreviewLoading(true); + setIsPreviewQueryLoading(true); + return queryUpdatePromise.then(() => + get().queryPanel.previewQuery(query, calledFromQuery, userSuppliedParameters, moduleId) + ); + } const { onEvent } = eventsSlice; let parameters = userSuppliedParameters; From d68565b43c56976aae9288fed466e170095c2f27 Mon Sep 17 00:00:00 2001 From: devanshu052000 Date: Mon, 17 Mar 2025 17:15:36 +0530 Subject: [PATCH 07/16] Added support for arrow key navigation in Dropdown and Multiselect component. --- .../Components/DropdownV2/DropdownV2.jsx | 28 ++++++++++++++++--- .../MultiselectV2/CustomValueContainer.jsx | 9 +++++- .../MultiselectV2/MultiselectV2.jsx | 20 ++++++++++++- 3 files changed, 51 insertions(+), 6 deletions(-) diff --git a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx index a01ed895e0..b2445435c0 100644 --- a/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx +++ b/frontend/src/Editor/Components/DropdownV2/DropdownV2.jsx @@ -88,6 +88,7 @@ export const DropdownV2 = ({ padding, } = styles; const isInitialRender = useRef(true); + const [isMenuOpen, setIsMenuOpen] = useState(false); const [currentValue, setCurrentValue] = useState(() => findDefaultItem(schema)); const isMandatory = validation?.mandatory ?? false; const options = properties?.options; @@ -353,15 +354,16 @@ export const DropdownV2 = ({ ...provided, padding: '0px', }), - option: (provided) => ({ + option: (provided, _state) => ({ ...provided, - backgroundColor: 'var(--surfaces-surface-01)', + backgroundColor: _state.isFocused ? 'var(--interactive-overlays-fill-hover)' : 'var(--surfaces-surface-01)', color: selectedTextColor !== '#1B1F24' ? selectedTextColor : isDropdownDisabled || isDropdownLoading ? 'var(--text-disabled)' : 'var(--text-primary)', + borderRadius: _state.isFocused && '8px', padding: '8px 6px 8px 38px', '&:hover': { backgroundColor: 'var(--interactive-overlays-fill-hover)', @@ -431,6 +433,7 @@ export const DropdownV2 = ({ />
option.value === currentValue)[0] ?? null} diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx index 93c8be1baf..4665430d00 100644 --- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx +++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx @@ -12,6 +12,7 @@ import Label from '@/_ui/Label'; const tinycolor = require('tinycolor2'); import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2'; import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor } from '../DropdownV2/utils'; +import useStore from '@/AppBuilder/_stores/store'; export const MultiselectV2 = ({ id, @@ -62,6 +63,7 @@ export const MultiselectV2 = ({ const isMandatory = validation?.mandatory ?? false; const multiselectRef = React.useRef(null); const labelRef = React.useRef(null); + const selectRef = React.useRef(null); const [validationStatus, setValidationStatus] = useState( validate(selected?.length ? selected?.map((option) => option.value) : null) ); @@ -74,6 +76,8 @@ export const MultiselectV2 = ({ const [searchInputValue, setSearchInputValue] = useState(''); const _height = padding === 'default' ? `${height}px` : `${height + 4}px`; const [userInteracted, setUserInteracted] = useState(false); + const currentMode = useStore((state) => state.currentMode); + const isEditor = currentMode === 'edit'; const [isMultiselectOpen, setIsMultiselectOpen] = useState(false); useEffect(() => { @@ -281,6 +285,12 @@ export const MultiselectV2 = ({ } }; + const handleClickInEditor = (e) => { + if (e.target.className.includes('clear-indicator') || isMultiselectOpen) return; + e.stopPropagation(); + selectRef.current?.onControlMouseDown(e); + }; + const setInputValue = (values) => { setSelected(values); setExposedVariables({ @@ -457,16 +467,9 @@ export const MultiselectV2 = ({ _width={_width} top={'1px'} /> -
{ - if (!isMultiSelectDisabled) { - fireEvent('onFocus'); - setIsMultiselectOpen(!isMultiselectOpen); - } - }} - > +
.cm-line { // max-width: 357px !important; } @@ -16287,19 +16304,20 @@ fieldset:disabled { } .datepicker-validation-half { - flex:1 1 calc(50% - 8px); + flex: 1 1 calc(50% - 8px); } .date-validation-wrapper { .field { - height:24px; + height: 24px; } .code-flex-wrapper { - flex-wrap:wrap; + flex-wrap: wrap; } + margin-bottom: 3px; } @@ -16308,57 +16326,60 @@ fieldset:disabled { } - .react-datepicker__day--disabled { +.react-datepicker__day--disabled { + color: #ccc !important; +} + +.react-datepicker__time-list { + li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item { color: #ccc !important; } - - .react-datepicker__time-list{ - li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item { - color: #ccc !important; - } - } - - .inspector-validation-date-picker { - .react-datepicker-wrapper{ - input { - background-color: #fff; - } - input.dark-theme { - background-color: var(--slate3); - color: var(--slate12); - } +} +.inspector-validation-date-picker { + .react-datepicker-wrapper { + input { + background-color: #fff; } - + + input.dark-theme { + background-color: var(--slate3); + color: var(--slate12); + } + } +} -.datetimepicker-component, #component-portal, .custom-inspector-validation-time-picker { + +.datetimepicker-component, +#component-portal, +.custom-inspector-validation-time-picker { .datepicker-component { .react-datepicker { border-radius: 10px; box-shadow: 8px 8px 16px 0px #3032331A; - height:auto; + height: auto; } } - + .react-datepicker-time-component { border-radius: 10px; - width:auto; + width: auto; - .custom-time-input{ - border-left:none; - border-radius:10px; + .custom-time-input { + border-left: none; + border-radius: 10px; box-shadow: 8px 8px 16px 0px #3032331A; } .time-input-body { - padding-bottom:0px; + padding-bottom: 0px; } - + .time-col { height: 200px; } @@ -16367,28 +16388,32 @@ fieldset:disabled { border-radius: 10px; box-shadow: 8px 8px 16px 0px #3032331A; } - - .react-datepicker-time__input-container{ - border-radius:10px; + + .react-datepicker-time__input-container { + border-radius: 10px; } } - + .dark-theme { - .react-datepicker__year-text, .react-datepicker__month-text { + + .react-datepicker__year-text, + .react-datepicker__month-text { color: #fff; } - .react-datepicker__year-text:hover, .react-datepicker__month-text:hover { - background-color: #9ba1a6 ; + .react-datepicker__year-text:hover, + .react-datepicker__month-text:hover { + background-color: #9ba1a6; } } - .tj-datepicker-widget-year-selector:hover, .tj-datepicker-widget-month-selector:hover { - padding:1px 6px; + .tj-datepicker-widget-year-selector:hover, + .tj-datepicker-widget-month-selector:hover { + padding: 1px 6px; } - .react-datepicker{ + .react-datepicker { display: grid; grid-auto-flow: column; border-top-right-radius: 0rem; @@ -16401,48 +16426,49 @@ fieldset:disabled { justify-content: center; align-items: center; } + .react-datepicker__year-wrapper { - display:grid; - grid-template-columns:repeat(3, 1fr); + display: grid; + grid-template-columns: repeat(3, 1fr); max-width: unset; - gap:10px; + gap: 10px; } .react-datepicker { border-radius: 10px; } - .react-datepicker__header--custom{ + .react-datepicker__header--custom { height: 34px; margin-bottom: 14px; } - .react-datepicker__year--container{ - height:208px; + .react-datepicker__year--container { + height: 208px; width: 250px; box-shadow: 8px 8px 16px 0px #3032331A; border-radius: 10px; } .react-datepicker__year-text--selected { - background-color: #4368E3 !important; - height:24px; - width:61.33px; - border-radius: 8px; - color: #fff ; + background-color: #4368E3 !important; + height: 24px; + width: 61.33px; + border-radius: 8px; + color: #fff; } - .react-datepicker__year-text{ - font-family:'IBM Plex Sans' ; + .react-datepicker__year-text { + font-family: 'IBM Plex Sans'; font-size: 12px; line-height: 16px; text-align: center; font-weight: 400; - height:24px; - width:61.33px; + height: 24px; + width: 61.33px; justify-content: center; align-items: center; - display:flex; + display: flex; } } @@ -16457,42 +16483,42 @@ fieldset:disabled { } .react-datepicker__month-container { - height:208px; + height: 208px; width: 250px; box-shadow: 8px 8px 16px 0px #3032331A; border-radius: 10px; } .react-datepicker__monthPicker { - display:flex; + display: flex; flex-direction: column; - gap:10px; + gap: 10px; } .react-datepicker__month-text--selected { background-color: #4368E3 !important; - height:24px; - width:61.33px; + height: 24px; + width: 61.33px; border-radius: 8px; - color: #fff ; + color: #fff; } .react-datepicker__month-wrapper { - display:flex; - gap:24px; + display: flex; + gap: 24px; } .react-datepicker__month-text { - font-family:'IBM Plex Sans' ; + font-family: 'IBM Plex Sans'; font-size: 12px; line-height: 16px; text-align: center; font-weight: 400; - height:24px; - width:61.33px; + height: 24px; + width: 61.33px; justify-content: center; align-items: center; - display:flex; + display: flex; } } @@ -16502,7 +16528,7 @@ fieldset:disabled { .react-datepicker__month-container { width: 100%; - width:250px; + width: 250px; } .react-datepicker__input-time-container { @@ -16517,12 +16543,12 @@ fieldset:disabled { color: #ccc !important; pointer-events: none; } - + .react-datepicker-time__input { margin-left: 0px !important; .dark-time-input { - color:#f4f6fa !important; + color: #f4f6fa !important; background-color: var(--surfaces-surface-01) !important; } } @@ -16530,15 +16556,15 @@ fieldset:disabled { .react-datepicker-wrapper { width: 100%; } - + .react-datepicker-time__caption { - display:none; + display: none; } .custom-time-input { background-color: #fff; border-left: 1px solid #CCD1D5; - border-top-right-radius: 10px; + border-top-right-radius: 10px; border-bottom-right-radius: 10px; } @@ -16552,18 +16578,18 @@ fieldset:disabled { border-bottom: 1px solid #CCD1D5; font-weight: 500; font-family: 'IBM Plex Sans'; - color:#ACB2B9; + color: #ACB2B9; } - + .time-input-body { padding-bottom: 12px; } .time-col { margin-top: 5px; - overflow-y: auto; + overflow-y: auto; overflow-x: hidden; - scrollbar-width: none; + scrollbar-width: none; height: 265px; width: 62px; } @@ -16571,12 +16597,12 @@ fieldset:disabled { .selected-time { background-color: #4368E3 !important; border-radius: 6px; - color:#fff; + color: #fff; } .time-item { - width: 50px; - height:22px; + width: 50px; + height: 22px; display: flex; justify-content: center; align-items: center; @@ -16916,16 +16942,17 @@ section.ai-message-prompt-input-wrapper { .tj-inspector-timepicker.dark-theme { - .react-datepicker { - color:#f4f6fa !important; + .react-datepicker { + color: #f4f6fa !important; background-color: var(--surfaces-surface-01) !important; } - .react-datepicker, .react-datepicker__header { + .react-datepicker, + .react-datepicker__header { border: 1px solid var(--borders-default); background-color: #1f2936; - .react-datepicker-time__header{ + .react-datepicker-time__header { color: #fff !important; } @@ -16933,25 +16960,27 @@ section.ai-message-prompt-input-wrapper { } .tj-inspector-timepicker { - padding:0px !important; + padding: 0px !important; .react-datepicker__time-list { - scrollbar-width: none; + scrollbar-width: none; } .react-datepicker__triangle { - display:none; + display: none; } } -.custom-inspector-validation-date-picker, .custom-inspector-validation-time-picker { +.custom-inspector-validation-date-picker, +.custom-inspector-validation-time-picker { flex-basis: 100% !important; font-family: monospace; font-size: 12px; - height:32px; - + height: 32px; + .react-datepicker-wrapper { width: 100%; + input { width: 100%; border: 1px solid var(--slate7); @@ -16959,23 +16988,23 @@ section.ai-message-prompt-input-wrapper { background-color: var(--base); background-color: #fff; color: rgb(0, 92, 197); - height:32px; + height: 32px; } input.dark-theme { background-color: #272822; color: rgb(174, 129, 255); - + } } - + } .custom-inspector-validation-time-picker { .custom-time-input { - border-left:none; - border-radius:10px; + border-left: none; + border-radius: 10px; } .time-col { @@ -16983,19 +17012,21 @@ section.ai-message-prompt-input-wrapper { } .react-datepicker__input-time-container { - border-radius:10px; + border-radius: 10px; } - - + + } .custom-inspector-validation-time-picker-popper { - border-radius:10px; + border-radius: 10px; } -.input-date-display-format, .input-date-time-format { +.input-date-display-format, +.input-date-time-format { height: 60px; + .hide-fx { opacity: 0; transition: opacity 0.3s ease; @@ -17014,8 +17045,9 @@ section.ai-message-prompt-input-wrapper { color: white; } - .react-datepicker__day:hover, .react-datepicker__day--selecting-range-end { - background-color: var(--interactive-overlays-fill-hover) !important ; + .react-datepicker__day:hover, + .react-datepicker__day--selecting-range-end { + background-color: var(--interactive-overlays-fill-hover) !important; } .react-datepicker__day--keyboard-selected { @@ -17038,15 +17070,17 @@ section.ai-message-prompt-input-wrapper { .tj-daterange-widget { - border-radius:10px; + border-radius: 10px; box-shadow: 0px 8px 16px 0px #3032331A !important; font-family: 'IBM Plex Sans'; - .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range { - border-radius:0px; + .react-datepicker__day--in-selecting-range, + .react-datepicker__day--in-range { + border-radius: 0px; background-color: #4368E31A !important; } - .react-datepicker__header{ + + .react-datepicker__header { background-color: var(--surfaces-surface-01); padding: 6px 0px; border: none; @@ -17057,44 +17091,48 @@ section.ai-message-prompt-input-wrapper { background-color: #ededee !important; } - .react-datepicker__day--selecting-range-start, .react-datepicker__day--selected, .react-datepicker__day--range-end { - border-radius:8px !important; + .react-datepicker__day--selecting-range-start, + .react-datepicker__day--selected, + .react-datepicker__day--range-end { + border-radius: 8px !important; background-color: #4368E3 !important; color: #fff !important; } - .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end), .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) { + .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end), + .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } - + .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end) { box-shadow: 10px 0 0 0px #4368E31A; } - .react-datepicker__day--range-start + .react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start + .react-datepicker__day--in-selecting-range{ + .react-datepicker__day--range-start+.react-datepicker__day--in-range, + .react-datepicker__day--selecting-range-start+.react-datepicker__day--in-selecting-range { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__day--range-start + .react-datepicker__day--in-range { + .react-datepicker__day--range-start+.react-datepicker__day--in-range { box-shadow: -10px 0 0 0px #4368E31A; } - + .react-datepicker__week { - .react-datepicker__day--in-range:first-of-type, - .react-datepicker__day--in-selecting-range:first-of-type, - .react-datepicker__day--outside-month + .react-datepicker__day--in-range, - .react-datepicker__day--outside-month + .react-datepicker__day--in-selecting-range{ + .react-datepicker__day--in-range:first-of-type, + .react-datepicker__day--in-selecting-range:first-of-type, + .react-datepicker__day--outside-month+.react-datepicker__day--in-range, + .react-datepicker__day--outside-month+.react-datepicker__day--in-selecting-range { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__day--in-range:last-of-type, - .react-datepicker__day--in-selecting-range:last-of-type, - .react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month), - .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month){ + .react-datepicker__day--in-range:last-of-type, + .react-datepicker__day--in-selecting-range:last-of-type, + .react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month), + .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } @@ -17112,8 +17150,8 @@ section.ai-message-prompt-input-wrapper { } .tj-datepicker-widget-right { - position: absolute; - right: 10px; + position: absolute; + right: 10px; } .tj-datepicker-widget-left { @@ -17136,41 +17174,42 @@ section.ai-message-prompt-input-wrapper { } .react-datepicker { - border-radius:10px !important; - border:none; + border-radius: 10px !important; + border: none; } - + } -.tj-daterangepicker-widget-month-selector, .tj-daterangepicker-widget-year-selector { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - padding-right: 4px; - /* Add some padding on the right to create space for custom arrow */ - background-image: url('data:image/svg+xml;utf8,'); - /* Add a custom arrow (you can use your own SVG) */ - background-repeat: no-repeat; - background-position: right center; - border: none; - /* Remove the default border */ - padding: 8px; - /* Adjust padding as needed */ - cursor: pointer; - /* Add pointer cursor for better usability */ - background: none; - padding: 0px; - height: 24px; - text-align: center; - color: var(--text-primary); - font-weight: 500; - width:auto; +.tj-daterangepicker-widget-month-selector, +.tj-daterangepicker-widget-year-selector { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + padding-right: 4px; + /* Add some padding on the right to create space for custom arrow */ + background-image: url('data:image/svg+xml;utf8,'); + /* Add a custom arrow (you can use your own SVG) */ + background-repeat: no-repeat; + background-position: right center; + border: none; + /* Remove the default border */ + padding: 8px; + /* Adjust padding as needed */ + cursor: pointer; + /* Add pointer cursor for better usability */ + background: none; + padding: 0px; + height: 24px; + text-align: center; + color: var(--text-primary); + font-weight: 500; + width: auto; } .datepicker-widget { - .react-datepicker-wrapper{ - width:100% !important; + .react-datepicker-wrapper { + width: 100% !important; } } @@ -17184,26 +17223,29 @@ section.ai-message-prompt-input-wrapper { } .tj-daterange-widget.react-datepicker-month-component { - border-radius:10px; + border-radius: 10px; box-shadow: 0px 8px 16px 0px #3032331A !important; font-family: 'IBM Plex Sans'; + .react-datepicker__month-container { box-shadow: none !important; } - + .react-datepicker__month-text { - height:26px !important; + height: 26px !important; margin: 0px; - width:100% !important; + width: 100% !important; } - .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range { - border-radius:0px; + .react-datepicker__month-text--in-selecting-range, + .react-datepicker__month-text--in-range { + border-radius: 0px; background-color: #4368E31A !important; - color:#000; + color: #000; } - .react-datepicker__header{ + + .react-datepicker__header { background-color: var(--surfaces-surface-01); padding: 6px 0px; border: none; @@ -17216,45 +17258,49 @@ section.ai-message-prompt-input-wrapper { } - .react-datepicker__month-text--selecting-range-start, .react-datepicker__month-text--selected, .react-datepicker__month-text--range-end { - border-radius:8px !important; + .react-datepicker__month-text--selecting-range-start, + .react-datepicker__month-text--selected, + .react-datepicker__month-text--range-end { + border-radius: 8px !important; background-color: #4368E3 !important; color: #fff !important; } - .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end), .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) { + .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end), + .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } - + .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end) { box-shadow: 10px 0 0 0px #4368E31A; } - .react-datepicker__month-text--range-start + .react-datepicker__month-text--in-range, .react-datepicker__month-text--selecting-range-start + .react-datepicker__month-text--in-selecting-range{ + .react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range, + .react-datepicker__month-text--selecting-range-start+.react-datepicker__month-text--in-selecting-range { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__month-text--range-start + .react-datepicker__month-text--in-range { + .react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range { box-shadow: -10px 0 0 0px #4368E31A; } - - .react-datepicker__month-wrapper{ - gap:0px !important; - .react-datepicker__month-text--in-range:first-of-type, - .react-datepicker__month-text--in-selecting-range:first-of-type, - .react-datepicker__month-text--outside-month-text + .react-datepicker__month-text--in-range, - .react-datepicker__month-text--outside-month-text + .react-datepicker__month-text--in-selecting-range{ + .react-datepicker__month-wrapper { + gap: 0px !important; + + .react-datepicker__month-text--in-range:first-of-type, + .react-datepicker__month-text--in-selecting-range:first-of-type, + .react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-range, + .react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-selecting-range { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__month-text--in-range:last-of-type, - .react-datepicker__month-text--in-selecting-range:last-of-type, - .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text), - .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text){ + .react-datepicker__month-text--in-range:last-of-type, + .react-datepicker__month-text--in-selecting-range:last-of-type, + .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text), + .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } @@ -17274,44 +17320,47 @@ section.ai-message-prompt-input-wrapper { } .tj-daterange-widget.react-datepicker-year-component { - border-radius:10px; + border-radius: 10px; box-shadow: 0px 8px 16px 0px #3032331A !important; font-family: 'IBM Plex Sans'; + .react-datepicker__year-container { box-shadow: none !important; } - .react-datepicker__year-wrapper{ - gap:0px !important; + .react-datepicker__year-wrapper { + gap: 0px !important; - .react-datepicker__year-text--in-range:first-of-type, - .react-datepicker__year-text--in-selecting-range:first-of-type{ + .react-datepicker__year-text--in-range:first-of-type, + .react-datepicker__year-text--in-selecting-range:first-of-type { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__year-text--in-range:last-of-type, - .react-datepicker__year-text--in-selecting-range:last-of-type{ + .react-datepicker__year-text--in-range:last-of-type, + .react-datepicker__year-text--in-selecting-range:last-of-type { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } } - + .react-datepicker__year-text { - height:26px !important; + height: 26px !important; margin-top: 5px !important; - margin-bottom:5px !important; + margin-bottom: 5px !important; margin: 0px; - width:62px !important; + width: 62px !important; } - .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { - border-radius:0px; + .react-datepicker__year-text--in-selecting-range, + .react-datepicker__year-text--in-range { + border-radius: 0px; background-color: #4368E31A !important; - color:#000; + color: #000; } - .react-datepicker__header{ + + .react-datepicker__header { background-color: var(--surfaces-surface-01); padding: 6px 0px; border: none; @@ -17324,31 +17373,35 @@ section.ai-message-prompt-input-wrapper { } - .react-datepicker__year-text--selecting-range-start, .react-datepicker__year-text--selected, .react-datepicker__year-text--range-end { - border-radius:8px !important; + .react-datepicker__year-text--selecting-range-start, + .react-datepicker__year-text--selected, + .react-datepicker__year-text--range-end { + border-radius: 8px !important; background-color: #4368E3 !important; color: #fff !important; } - .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end), .react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) { + .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end), + .react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } - + .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end) { box-shadow: 10px 0 0 0px #4368E31A; } - .react-datepicker__year-text--range-start + .react-datepicker__year-text--in-range, .react-datepicker__year-text--selecting-range-start + .react-datepicker__year-text--in-selecting-range{ + .react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range, + .react-datepicker__year-text--selecting-range-start+.react-datepicker__year-text--in-selecting-range { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__year-text--range-start + .react-datepicker__year-text--in-range { + .react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range { box-shadow: -10px 0 0 0px #4368E31A; } - - + + } .dark-theme { @@ -18658,6 +18711,7 @@ section.ai-message-prompt-input-wrapper { font-style: normal; font-weight: 400; line-height: 18px; + &.dark { background: #FFFAEB !important; } diff --git a/frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx b/frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx new file mode 100644 index 0000000000..293d325c59 --- /dev/null +++ b/frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { withEditionSpecificComponent } from '@/modules/common/helpers/withEditionSpecificComponent'; + +const AppTypeTab = () => { + return <>; +}; +export default withEditionSpecificComponent(AppTypeTab, 'Dashboard'); diff --git a/frontend/src/modules/dashboard/components/AppTypeTab/index.js b/frontend/src/modules/dashboard/components/AppTypeTab/index.js new file mode 100644 index 0000000000..ae18e0c4c3 --- /dev/null +++ b/frontend/src/modules/dashboard/components/AppTypeTab/index.js @@ -0,0 +1 @@ +export { default } from './AppTypeTab'; diff --git a/frontend/src/modules/dashboard/components/index.js b/frontend/src/modules/dashboard/components/index.js index ab540b5feb..d4ffff00c4 100644 --- a/frontend/src/modules/dashboard/components/index.js +++ b/frontend/src/modules/dashboard/components/index.js @@ -6,6 +6,7 @@ import SettingsMenu from './SettingsMenu'; import WorkspaceActions from './WorkspaceActions'; import ConsultationBanner from './ConsultationBanner'; import UserGroupMigrationBanner from './UserGroupMigrationBanner'; +import AppTypeTab from './AppTypeTab'; export { ImportAppMenu, @@ -16,4 +17,5 @@ export { WorkspaceActions, ConsultationBanner, UserGroupMigrationBanner, + AppTypeTab, }; From c500f9f584de9ceac67c80cd991197ad40f14d7a Mon Sep 17 00:00:00 2001 From: Kavin Venkatachalam Date: Thu, 3 Apr 2025 18:12:36 +0530 Subject: [PATCH 16/16] Revert "init: modules and added a tab on homepage" This reverts commit 3a5aa4b2d4922fb9cdeed664a60431c63636c382. --- frontend/src/App/App.jsx | 9 - frontend/src/HomePage/Folders.jsx | 23 +- frontend/src/HomePage/Footer.jsx | 4 +- frontend/src/HomePage/HomePage.jsx | 99 ++-- frontend/src/_components/AppModal.jsx | 9 +- frontend/src/_styles/modules.scss | 39 -- frontend/src/_styles/theme.scss | 494 ++++++++---------- .../components/AppTypeTab/AppTypeTab.jsx | 7 - .../dashboard/components/AppTypeTab/index.js | 1 - .../src/modules/dashboard/components/index.js | 2 - 10 files changed, 264 insertions(+), 423 deletions(-) delete mode 100644 frontend/src/_styles/modules.scss delete mode 100644 frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx delete mode 100644 frontend/src/modules/dashboard/components/AppTypeTab/index.js diff --git a/frontend/src/App/App.jsx b/frontend/src/App/App.jsx index 06cc061e0c..0c06b4c513 100644 --- a/frontend/src/App/App.jsx +++ b/frontend/src/App/App.jsx @@ -254,15 +254,6 @@ class AppComponent extends React.Component { }> }> }> - - - - } - /> {getAuditLogsRoutes(this.props)} { if (_.isEmpty(currentFolder)) { - updateSidebarNAV(`All ${appType === 'workflow' ? 'workflows' : appType === 'module' ? 'modules' : 'apps'}`); + updateSidebarNAV(`All ${appType === 'workflow' ? 'workflows' : 'apps'}`); setActiveFolder({}); } else { updateSidebarNAV(currentFolder.name); @@ -104,9 +104,7 @@ export const Folders = function Folders({ setActiveFolder(folder); } folderChanged(folder); - updateSidebarNAV( - folder?.name ?? `All ${appType === 'front-end' ? 'apps' : appType === 'module' ? 'modules' : 'workflows'}` - ); + updateSidebarNAV(folder?.name ?? 'All apps'); //update the url query parameter with folder name updateFolderQuery(folder?.name); } @@ -114,12 +112,7 @@ export const Folders = function Folders({ function updateFolderQuery(name) { const search = `${name ? `?folder=${name}` : ''}`; navigate( - { - pathname: `/${getWorkspaceId()}${ - appType === 'workflow' ? '/workflows' : appType === 'module' ? '/modules' : '' - }`, - search, - }, + { pathname: `/${getWorkspaceId()}${appType === 'workflow' ? '/workflows' : ''}`, search }, { replace: true } ); } @@ -293,12 +286,10 @@ export const Folders = function Folders({ onClick={() => handleFolderChange({})} data-cy="all-applications-link" > - {appType === 'module' - ? 'All modules' - : t( - `${appType === 'workflow' ? 'workflowsDashboard' : 'homePage'}.foldersSection.allApplications`, - 'All apps' - )} + {t( + `${appType === 'workflow' ? 'workflowsDashboard' : 'homePage'}.foldersSection.allApplications`, + 'All apps' + )}
)} diff --git a/frontend/src/HomePage/Footer.jsx b/frontend/src/HomePage/Footer.jsx index a95f450e1b..d5520aea77 100644 --- a/frontend/src/HomePage/Footer.jsx +++ b/frontend/src/HomePage/Footer.jsx @@ -2,7 +2,7 @@ import React, { useState, useMemo } from 'react'; import Pagination from '@/_ui/Pagination'; import Skeleton from 'react-loading-skeleton'; -const Footer = ({ darkMode, count, pageChanged, dataLoading, itemsPerPage = 9, appType }) => { +const Footer = ({ darkMode, count, pageChanged, dataLoading, itemsPerPage = 9 }) => { const [pageCount, setPageCount] = useState(1); const totalPages = useMemo(() => { return Math.floor((count - 1) / itemsPerPage) + 1; @@ -60,7 +60,7 @@ const Footer = ({ darkMode, count, pageChanged, dataLoading, itemsPerPage = 9, a ) : ( - {pageRange} of {count} {appType === 'module' ? 'modules' : 'apps'} + {pageRange} of {count} apps )}
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx index a94b322252..ab50cbb05d 100644 --- a/frontend/src/HomePage/HomePage.jsx +++ b/frontend/src/HomePage/HomePage.jsx @@ -44,7 +44,6 @@ import { OrganizationList, UserGroupMigrationBanner, ConsultationBanner, - AppTypeTab, } from '@/modules/dashboard/components'; import CreateAppWithPrompt from '@/modules/AiBuilder/components/CreateAppWithPrompt'; @@ -237,18 +236,10 @@ class HomePageComponent extends React.Component { let _self = this; _self.setState({ creatingApp: true }); try { - const data = await appsService.createApp({ - icon: sample(iconList), - name: appName, - type: type ?? this.props.appType, - }); + const data = await appsService.createApp({ icon: sample(iconList), name: appName, type: this.props.appType }); const workspaceId = getWorkspaceId(); _self.props.navigate(`/${workspaceId}/apps/${data.id}`, { state: { commitEnabled: this.state.commitEnabled } }); - toast.success( - `${ - this.props.appType === 'workflow' ? 'Workflow' : this.props.appType === 'module' ? 'Module' : 'App' - } created successfully!` - ); + toast.success(`${this.props.appType === 'workflow' ? 'Workflow' : 'App'} created successfully!`); _self.setState({ creatingApp: false }); return true; } catch (errorResponse) { @@ -848,10 +839,6 @@ class HomePageComponent extends React.Component { dependentPluginsForTemplate, dependentPluginsDetail, } = this.state; - - const invalidLicense = featureAccess?.licenseStatus?.isExpired || !featureAccess?.licenseStatus?.isLicenseValid; - // const invalidLicense = false; - const modalConfigs = { create: { modalType: 'create', @@ -1149,7 +1136,6 @@ class HomePageComponent extends React.Component { )}
- {this.canCreateApp() && (
= 100} disabled={ - this.props.appType === 'front-end' || this.props.appType === 'module' - ? appsLimit?.percentage >= 100 || (this.props.appType === 'module' && invalidLicense) + this.props.appType === 'front-end' + ? appsLimit?.percentage >= 100 : workflowInstanceLevelLimit.percentage >= 100 || workflowWorkspaceLevelLimit.percentage >= 100 } className={`create-new-app-button col-11 ${creatingApp ? 'btn-loading' : ''}`} - onClick={() => - this.setState({ - [this.props.appType === 'module' ? 'showCreateModuleModal' : 'showCreateAppModal']: true, - }) - } + onClick={() => this.setState({ showCreateAppModal: true })} data-cy="create-new-app-button" > {isImportingApp && ( )} - {this.props.appType === 'module' - ? 'Create new module' - : this.props.t( - `${ - this.props.appType === 'workflow' ? 'workflowsDashboard' : 'homePage' - }.header.createNewApplication`, - 'Create new app' - )} + {this.props.t( + `${ + this.props.appType === 'workflow' ? 'workflowsDashboard' : 'homePage' + }.header.createNewApplication`, + 'Create new app' + )} {this.props.appType !== 'workflow' && ( = 100 || (this.props.appType === 'module' && invalidLicense) - } + disabled={appsLimit?.percentage >= 100} split className="d-inline" data-cy="import-dropdown-menu" @@ -1295,7 +1273,6 @@ class HomePageComponent extends React.Component { onSearchSubmit={this.onSearchSubmit} darkMode={this.props.darkMode} appType={this.props.appType} - disabled={this.props.appType === 'module' && invalidLicense} />
@@ -1323,37 +1300,24 @@ class HomePageComponent extends React.Component {
)} - {!isLoading && - featuresLoaded && - meta?.total_count === 0 && - !currentFolder.id && - !appSearchKey && - (['front-end', 'modules'].includes(this.props.appType) ? ( - - ) : ( -

- You have not created any modules.  - - Create a module  - - to start using it within your apps. -

- ))} + {!isLoading && featuresLoaded && meta?.total_count === 0 && !currentFolder.id && !appSearchKey && ( + + )} {!isLoading && apps?.length === 0 && appSearchKey && (
@@ -1377,7 +1341,7 @@ class HomePageComponent extends React.Component { appActionModal={this.appActionModal} removeAppFromFolder={this.removeAppFromFolder} appType={this.props.appType} - basicPlan={invalidLicense} + basicPlan={featureAccess?.licenseStatus?.isExpired || !featureAccess?.licenseStatus?.isLicenseValid} appSearchKey={this.state.appSearchKey} /> )} @@ -1391,7 +1355,6 @@ class HomePageComponent extends React.Component { pageChanged={this.pageChanged} darkMode={this.props.darkMode} dataLoading={isLoading} - appType={this.props.appType} /> )} {/* need to review the mobile view */} diff --git a/frontend/src/_components/AppModal.jsx b/frontend/src/_components/AppModal.jsx index 318d7f5280..7d45e4c36e 100644 --- a/frontend/src/_components/AppModal.jsx +++ b/frontend/src/_components/AppModal.jsx @@ -10,7 +10,6 @@ import { PluginsListForAppModal } from './PluginsListForAppModal'; const APP_TYPE = { WORKFLOW: 'workflow', APP: 'app', - MODULE: 'module', }; export function AppModal({ @@ -53,8 +52,6 @@ export function AppModal({ const [isNameChanged, setIsNameChanged] = useState(false); const inputRef = useRef(null); - const appTypeName = APP_TYPE.WORKFLOW == appType ? 'Workflow' : APP_TYPE.MODULE == appType ? 'Module' : 'App'; - useEffect(() => { setIsNameChanged(newAppName?.trim() !== selectedAppName); }, [newAppName, selectedAppName]); @@ -88,7 +85,7 @@ export function AppModal({ success = await processApp(trimmedAppName); } if (success === false) { - setErrorText(`${appTypeName} name already exists`); + setErrorText(`${appType == APP_TYPE.WORKFLOW ? 'Workflow' : 'App'} name already exists`); setInfoText(''); } else { setErrorText(''); @@ -130,6 +127,8 @@ export function AppModal({ (actionButton === 'Rename app' && (!isNameChanged || newAppName.trim().length === 0 || newAppName.length > 50)) || // For rename case (actionButton !== 'Rename app' && (newAppName.length > 50 || newAppName.trim().length === 0)); + const appTypeName = APP_TYPE.WORKFLOW == appType ? 'Workflow' : 'App'; + return ( )} - {orgGit?.is_enabled && appType != APP_TYPE.WORKFLOW && appType != APP_TYPE.MODULE && ( + {orgGit?.is_enabled && appType != APP_TYPE.WORKFLOW && (
.cm-line { // max-width: 357px !important; } @@ -16304,20 +16287,19 @@ fieldset:disabled { } .datepicker-validation-half { - flex: 1 1 calc(50% - 8px); + flex:1 1 calc(50% - 8px); } .date-validation-wrapper { .field { - height: 24px; + height:24px; } .code-flex-wrapper { - flex-wrap: wrap; + flex-wrap:wrap; } - margin-bottom: 3px; } @@ -16326,60 +16308,57 @@ fieldset:disabled { } -.react-datepicker__day--disabled { - color: #ccc !important; -} - -.react-datepicker__time-list { - li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item { + .react-datepicker__day--disabled { color: #ccc !important; } -} - -.inspector-validation-date-picker { - .react-datepicker-wrapper { - input { - background-color: #fff; - } - - input.dark-theme { - background-color: var(--slate3); - color: var(--slate12); - } - + + .react-datepicker__time-list{ + li.react-datepicker__time-list-item--disabled.react-datepicker__time-list-item { + color: #ccc !important; + } } -} + .inspector-validation-date-picker { + .react-datepicker-wrapper{ + input { + background-color: #fff; + } + input.dark-theme { + background-color: var(--slate3); + color: var(--slate12); + } + + } + + } -.datetimepicker-component, -#component-portal, -.custom-inspector-validation-time-picker { +.datetimepicker-component, #component-portal, .custom-inspector-validation-time-picker { .datepicker-component { .react-datepicker { border-radius: 10px; box-shadow: 8px 8px 16px 0px #3032331A; - height: auto; + height:auto; } } - + .react-datepicker-time-component { border-radius: 10px; - width: auto; + width:auto; - .custom-time-input { - border-left: none; - border-radius: 10px; + .custom-time-input{ + border-left:none; + border-radius:10px; box-shadow: 8px 8px 16px 0px #3032331A; } .time-input-body { - padding-bottom: 0px; + padding-bottom:0px; } - + .time-col { height: 200px; } @@ -16388,32 +16367,28 @@ fieldset:disabled { border-radius: 10px; box-shadow: 8px 8px 16px 0px #3032331A; } - - .react-datepicker-time__input-container { - border-radius: 10px; + + .react-datepicker-time__input-container{ + border-radius:10px; } } - + .dark-theme { - - .react-datepicker__year-text, - .react-datepicker__month-text { + .react-datepicker__year-text, .react-datepicker__month-text { color: #fff; } - .react-datepicker__year-text:hover, - .react-datepicker__month-text:hover { - background-color: #9ba1a6; + .react-datepicker__year-text:hover, .react-datepicker__month-text:hover { + background-color: #9ba1a6 ; } } - .tj-datepicker-widget-year-selector:hover, - .tj-datepicker-widget-month-selector:hover { - padding: 1px 6px; + .tj-datepicker-widget-year-selector:hover, .tj-datepicker-widget-month-selector:hover { + padding:1px 6px; } - .react-datepicker { + .react-datepicker{ display: grid; grid-auto-flow: column; border-top-right-radius: 0rem; @@ -16426,49 +16401,48 @@ fieldset:disabled { justify-content: center; align-items: center; } - .react-datepicker__year-wrapper { - display: grid; - grid-template-columns: repeat(3, 1fr); + display:grid; + grid-template-columns:repeat(3, 1fr); max-width: unset; - gap: 10px; + gap:10px; } .react-datepicker { border-radius: 10px; } - .react-datepicker__header--custom { + .react-datepicker__header--custom{ height: 34px; margin-bottom: 14px; } - .react-datepicker__year--container { - height: 208px; + .react-datepicker__year--container{ + height:208px; width: 250px; box-shadow: 8px 8px 16px 0px #3032331A; border-radius: 10px; } .react-datepicker__year-text--selected { - background-color: #4368E3 !important; - height: 24px; - width: 61.33px; - border-radius: 8px; - color: #fff; + background-color: #4368E3 !important; + height:24px; + width:61.33px; + border-radius: 8px; + color: #fff ; } - .react-datepicker__year-text { - font-family: 'IBM Plex Sans'; + .react-datepicker__year-text{ + font-family:'IBM Plex Sans' ; font-size: 12px; line-height: 16px; text-align: center; font-weight: 400; - height: 24px; - width: 61.33px; + height:24px; + width:61.33px; justify-content: center; align-items: center; - display: flex; + display:flex; } } @@ -16483,42 +16457,42 @@ fieldset:disabled { } .react-datepicker__month-container { - height: 208px; + height:208px; width: 250px; box-shadow: 8px 8px 16px 0px #3032331A; border-radius: 10px; } .react-datepicker__monthPicker { - display: flex; + display:flex; flex-direction: column; - gap: 10px; + gap:10px; } .react-datepicker__month-text--selected { background-color: #4368E3 !important; - height: 24px; - width: 61.33px; + height:24px; + width:61.33px; border-radius: 8px; - color: #fff; + color: #fff ; } .react-datepicker__month-wrapper { - display: flex; - gap: 24px; + display:flex; + gap:24px; } .react-datepicker__month-text { - font-family: 'IBM Plex Sans'; + font-family:'IBM Plex Sans' ; font-size: 12px; line-height: 16px; text-align: center; font-weight: 400; - height: 24px; - width: 61.33px; + height:24px; + width:61.33px; justify-content: center; align-items: center; - display: flex; + display:flex; } } @@ -16528,7 +16502,7 @@ fieldset:disabled { .react-datepicker__month-container { width: 100%; - width: 250px; + width:250px; } .react-datepicker__input-time-container { @@ -16543,12 +16517,12 @@ fieldset:disabled { color: #ccc !important; pointer-events: none; } - + .react-datepicker-time__input { margin-left: 0px !important; .dark-time-input { - color: #f4f6fa !important; + color:#f4f6fa !important; background-color: var(--surfaces-surface-01) !important; } } @@ -16556,15 +16530,15 @@ fieldset:disabled { .react-datepicker-wrapper { width: 100%; } - + .react-datepicker-time__caption { - display: none; + display:none; } .custom-time-input { background-color: #fff; border-left: 1px solid #CCD1D5; - border-top-right-radius: 10px; + border-top-right-radius: 10px; border-bottom-right-radius: 10px; } @@ -16578,18 +16552,18 @@ fieldset:disabled { border-bottom: 1px solid #CCD1D5; font-weight: 500; font-family: 'IBM Plex Sans'; - color: #ACB2B9; + color:#ACB2B9; } - + .time-input-body { padding-bottom: 12px; } .time-col { margin-top: 5px; - overflow-y: auto; + overflow-y: auto; overflow-x: hidden; - scrollbar-width: none; + scrollbar-width: none; height: 265px; width: 62px; } @@ -16597,12 +16571,12 @@ fieldset:disabled { .selected-time { background-color: #4368E3 !important; border-radius: 6px; - color: #fff; + color:#fff; } .time-item { - width: 50px; - height: 22px; + width: 50px; + height:22px; display: flex; justify-content: center; align-items: center; @@ -16942,17 +16916,16 @@ section.ai-message-prompt-input-wrapper { .tj-inspector-timepicker.dark-theme { - .react-datepicker { - color: #f4f6fa !important; + .react-datepicker { + color:#f4f6fa !important; background-color: var(--surfaces-surface-01) !important; } - .react-datepicker, - .react-datepicker__header { + .react-datepicker, .react-datepicker__header { border: 1px solid var(--borders-default); background-color: #1f2936; - .react-datepicker-time__header { + .react-datepicker-time__header{ color: #fff !important; } @@ -16960,27 +16933,25 @@ section.ai-message-prompt-input-wrapper { } .tj-inspector-timepicker { - padding: 0px !important; + padding:0px !important; .react-datepicker__time-list { - scrollbar-width: none; + scrollbar-width: none; } .react-datepicker__triangle { - display: none; + display:none; } } -.custom-inspector-validation-date-picker, -.custom-inspector-validation-time-picker { +.custom-inspector-validation-date-picker, .custom-inspector-validation-time-picker { flex-basis: 100% !important; font-family: monospace; font-size: 12px; - height: 32px; - + height:32px; + .react-datepicker-wrapper { width: 100%; - input { width: 100%; border: 1px solid var(--slate7); @@ -16988,23 +16959,23 @@ section.ai-message-prompt-input-wrapper { background-color: var(--base); background-color: #fff; color: rgb(0, 92, 197); - height: 32px; + height:32px; } input.dark-theme { background-color: #272822; color: rgb(174, 129, 255); - + } } - + } .custom-inspector-validation-time-picker { .custom-time-input { - border-left: none; - border-radius: 10px; + border-left:none; + border-radius:10px; } .time-col { @@ -17012,21 +16983,19 @@ section.ai-message-prompt-input-wrapper { } .react-datepicker__input-time-container { - border-radius: 10px; + border-radius:10px; } + - - + } .custom-inspector-validation-time-picker-popper { - border-radius: 10px; + border-radius:10px; } -.input-date-display-format, -.input-date-time-format { +.input-date-display-format, .input-date-time-format { height: 60px; - .hide-fx { opacity: 0; transition: opacity 0.3s ease; @@ -17045,9 +17014,8 @@ section.ai-message-prompt-input-wrapper { color: white; } - .react-datepicker__day:hover, - .react-datepicker__day--selecting-range-end { - background-color: var(--interactive-overlays-fill-hover) !important; + .react-datepicker__day:hover, .react-datepicker__day--selecting-range-end { + background-color: var(--interactive-overlays-fill-hover) !important ; } .react-datepicker__day--keyboard-selected { @@ -17070,17 +17038,15 @@ section.ai-message-prompt-input-wrapper { .tj-daterange-widget { - border-radius: 10px; + border-radius:10px; box-shadow: 0px 8px 16px 0px #3032331A !important; font-family: 'IBM Plex Sans'; - .react-datepicker__day--in-selecting-range, - .react-datepicker__day--in-range { - border-radius: 0px; + .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range { + border-radius:0px; background-color: #4368E31A !important; } - - .react-datepicker__header { + .react-datepicker__header{ background-color: var(--surfaces-surface-01); padding: 6px 0px; border: none; @@ -17091,48 +17057,44 @@ section.ai-message-prompt-input-wrapper { background-color: #ededee !important; } - .react-datepicker__day--selecting-range-start, - .react-datepicker__day--selected, - .react-datepicker__day--range-end { - border-radius: 8px !important; + .react-datepicker__day--selecting-range-start, .react-datepicker__day--selected, .react-datepicker__day--range-end { + border-radius:8px !important; background-color: #4368E3 !important; color: #fff !important; } - .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end), - .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) { + .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end), .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--selecting-range-end) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } - + .react-datepicker__day--in-range:has(+ .react-datepicker__day--range-end) { box-shadow: 10px 0 0 0px #4368E31A; } - .react-datepicker__day--range-start+.react-datepicker__day--in-range, - .react-datepicker__day--selecting-range-start+.react-datepicker__day--in-selecting-range { + .react-datepicker__day--range-start + .react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start + .react-datepicker__day--in-selecting-range{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__day--range-start+.react-datepicker__day--in-range { + .react-datepicker__day--range-start + .react-datepicker__day--in-range { box-shadow: -10px 0 0 0px #4368E31A; } - + .react-datepicker__week { - .react-datepicker__day--in-range:first-of-type, - .react-datepicker__day--in-selecting-range:first-of-type, - .react-datepicker__day--outside-month+.react-datepicker__day--in-range, - .react-datepicker__day--outside-month+.react-datepicker__day--in-selecting-range { + .react-datepicker__day--in-range:first-of-type, + .react-datepicker__day--in-selecting-range:first-of-type, + .react-datepicker__day--outside-month + .react-datepicker__day--in-range, + .react-datepicker__day--outside-month + .react-datepicker__day--in-selecting-range{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__day--in-range:last-of-type, - .react-datepicker__day--in-selecting-range:last-of-type, - .react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month), - .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month) { + .react-datepicker__day--in-range:last-of-type, + .react-datepicker__day--in-selecting-range:last-of-type, + .react-datepicker__day--in-range:has(+ .react-datepicker__day--outside-month), + .react-datepicker__day--in-selecting-range:has(+ .react-datepicker__day--outside-month){ border-top-right-radius: 8px; border-bottom-right-radius: 8px; } @@ -17150,8 +17112,8 @@ section.ai-message-prompt-input-wrapper { } .tj-datepicker-widget-right { - position: absolute; - right: 10px; + position: absolute; + right: 10px; } .tj-datepicker-widget-left { @@ -17174,42 +17136,41 @@ section.ai-message-prompt-input-wrapper { } .react-datepicker { - border-radius: 10px !important; - border: none; + border-radius:10px !important; + border:none; } - + } -.tj-daterangepicker-widget-month-selector, -.tj-daterangepicker-widget-year-selector { - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - padding-right: 4px; - /* Add some padding on the right to create space for custom arrow */ - background-image: url('data:image/svg+xml;utf8,'); - /* Add a custom arrow (you can use your own SVG) */ - background-repeat: no-repeat; - background-position: right center; - border: none; - /* Remove the default border */ - padding: 8px; - /* Adjust padding as needed */ - cursor: pointer; - /* Add pointer cursor for better usability */ - background: none; - padding: 0px; - height: 24px; - text-align: center; - color: var(--text-primary); - font-weight: 500; - width: auto; +.tj-daterangepicker-widget-month-selector, .tj-daterangepicker-widget-year-selector { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + padding-right: 4px; + /* Add some padding on the right to create space for custom arrow */ + background-image: url('data:image/svg+xml;utf8,'); + /* Add a custom arrow (you can use your own SVG) */ + background-repeat: no-repeat; + background-position: right center; + border: none; + /* Remove the default border */ + padding: 8px; + /* Adjust padding as needed */ + cursor: pointer; + /* Add pointer cursor for better usability */ + background: none; + padding: 0px; + height: 24px; + text-align: center; + color: var(--text-primary); + font-weight: 500; + width:auto; } .datepicker-widget { - .react-datepicker-wrapper { - width: 100% !important; + .react-datepicker-wrapper{ + width:100% !important; } } @@ -17223,29 +17184,26 @@ section.ai-message-prompt-input-wrapper { } .tj-daterange-widget.react-datepicker-month-component { - border-radius: 10px; + border-radius:10px; box-shadow: 0px 8px 16px 0px #3032331A !important; font-family: 'IBM Plex Sans'; - .react-datepicker__month-container { box-shadow: none !important; } - + .react-datepicker__month-text { - height: 26px !important; + height:26px !important; margin: 0px; - width: 100% !important; + width:100% !important; } - .react-datepicker__month-text--in-selecting-range, - .react-datepicker__month-text--in-range { - border-radius: 0px; + .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range { + border-radius:0px; background-color: #4368E31A !important; - color: #000; + color:#000; } - - .react-datepicker__header { + .react-datepicker__header{ background-color: var(--surfaces-surface-01); padding: 6px 0px; border: none; @@ -17258,49 +17216,45 @@ section.ai-message-prompt-input-wrapper { } - .react-datepicker__month-text--selecting-range-start, - .react-datepicker__month-text--selected, - .react-datepicker__month-text--range-end { - border-radius: 8px !important; + .react-datepicker__month-text--selecting-range-start, .react-datepicker__month-text--selected, .react-datepicker__month-text--range-end { + border-radius:8px !important; background-color: #4368E3 !important; color: #fff !important; } - .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end), - .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) { + .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end), .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--selecting-range-end) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } - + .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--range-end) { box-shadow: 10px 0 0 0px #4368E31A; } - .react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range, - .react-datepicker__month-text--selecting-range-start+.react-datepicker__month-text--in-selecting-range { + .react-datepicker__month-text--range-start + .react-datepicker__month-text--in-range, .react-datepicker__month-text--selecting-range-start + .react-datepicker__month-text--in-selecting-range{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__month-text--range-start+.react-datepicker__month-text--in-range { + .react-datepicker__month-text--range-start + .react-datepicker__month-text--in-range { box-shadow: -10px 0 0 0px #4368E31A; } + + .react-datepicker__month-wrapper{ + gap:0px !important; - .react-datepicker__month-wrapper { - gap: 0px !important; - - .react-datepicker__month-text--in-range:first-of-type, - .react-datepicker__month-text--in-selecting-range:first-of-type, - .react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-range, - .react-datepicker__month-text--outside-month-text+.react-datepicker__month-text--in-selecting-range { + .react-datepicker__month-text--in-range:first-of-type, + .react-datepicker__month-text--in-selecting-range:first-of-type, + .react-datepicker__month-text--outside-month-text + .react-datepicker__month-text--in-range, + .react-datepicker__month-text--outside-month-text + .react-datepicker__month-text--in-selecting-range{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__month-text--in-range:last-of-type, - .react-datepicker__month-text--in-selecting-range:last-of-type, - .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text), - .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text) { + .react-datepicker__month-text--in-range:last-of-type, + .react-datepicker__month-text--in-selecting-range:last-of-type, + .react-datepicker__month-text--in-range:has(+ .react-datepicker__month-text--outside-month-text), + .react-datepicker__month-text--in-selecting-range:has(+ .react-datepicker__month-text--outside-month-text){ border-top-right-radius: 8px; border-bottom-right-radius: 8px; } @@ -17320,47 +17274,44 @@ section.ai-message-prompt-input-wrapper { } .tj-daterange-widget.react-datepicker-year-component { - border-radius: 10px; + border-radius:10px; box-shadow: 0px 8px 16px 0px #3032331A !important; font-family: 'IBM Plex Sans'; - .react-datepicker__year-container { box-shadow: none !important; } - .react-datepicker__year-wrapper { - gap: 0px !important; + .react-datepicker__year-wrapper{ + gap:0px !important; - .react-datepicker__year-text--in-range:first-of-type, - .react-datepicker__year-text--in-selecting-range:first-of-type { + .react-datepicker__year-text--in-range:first-of-type, + .react-datepicker__year-text--in-selecting-range:first-of-type{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__year-text--in-range:last-of-type, - .react-datepicker__year-text--in-selecting-range:last-of-type { + .react-datepicker__year-text--in-range:last-of-type, + .react-datepicker__year-text--in-selecting-range:last-of-type{ border-top-right-radius: 8px; border-bottom-right-radius: 8px; } } - + .react-datepicker__year-text { - height: 26px !important; + height:26px !important; margin-top: 5px !important; - margin-bottom: 5px !important; + margin-bottom:5px !important; margin: 0px; - width: 62px !important; + width:62px !important; } - .react-datepicker__year-text--in-selecting-range, - .react-datepicker__year-text--in-range { - border-radius: 0px; + .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range { + border-radius:0px; background-color: #4368E31A !important; - color: #000; + color:#000; } - - .react-datepicker__header { + .react-datepicker__header{ background-color: var(--surfaces-surface-01); padding: 6px 0px; border: none; @@ -17373,35 +17324,31 @@ section.ai-message-prompt-input-wrapper { } - .react-datepicker__year-text--selecting-range-start, - .react-datepicker__year-text--selected, - .react-datepicker__year-text--range-end { - border-radius: 8px !important; + .react-datepicker__year-text--selecting-range-start, .react-datepicker__year-text--selected, .react-datepicker__year-text--range-end { + border-radius:8px !important; background-color: #4368E3 !important; color: #fff !important; } - .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end), - .react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) { + .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end), .react-datepicker__year-text--in-selecting-range:has(+ .react-datepicker__year-text--selecting-range-end) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } - + .react-datepicker__year-text--in-range:has(+ .react-datepicker__year-text--range-end) { box-shadow: 10px 0 0 0px #4368E31A; } - .react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range, - .react-datepicker__year-text--selecting-range-start+.react-datepicker__year-text--in-selecting-range { + .react-datepicker__year-text--range-start + .react-datepicker__year-text--in-range, .react-datepicker__year-text--selecting-range-start + .react-datepicker__year-text--in-selecting-range{ border-top-left-radius: 8px; border-bottom-left-radius: 8px; } - .react-datepicker__year-text--range-start+.react-datepicker__year-text--in-range { + .react-datepicker__year-text--range-start + .react-datepicker__year-text--in-range { box-shadow: -10px 0 0 0px #4368E31A; } - - + + } .dark-theme { @@ -18711,7 +18658,6 @@ section.ai-message-prompt-input-wrapper { font-style: normal; font-weight: 400; line-height: 18px; - &.dark { background: #FFFAEB !important; } diff --git a/frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx b/frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx deleted file mode 100644 index 293d325c59..0000000000 --- a/frontend/src/modules/dashboard/components/AppTypeTab/AppTypeTab.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { withEditionSpecificComponent } from '@/modules/common/helpers/withEditionSpecificComponent'; - -const AppTypeTab = () => { - return <>; -}; -export default withEditionSpecificComponent(AppTypeTab, 'Dashboard'); diff --git a/frontend/src/modules/dashboard/components/AppTypeTab/index.js b/frontend/src/modules/dashboard/components/AppTypeTab/index.js deleted file mode 100644 index ae18e0c4c3..0000000000 --- a/frontend/src/modules/dashboard/components/AppTypeTab/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './AppTypeTab'; diff --git a/frontend/src/modules/dashboard/components/index.js b/frontend/src/modules/dashboard/components/index.js index d4ffff00c4..ab540b5feb 100644 --- a/frontend/src/modules/dashboard/components/index.js +++ b/frontend/src/modules/dashboard/components/index.js @@ -6,7 +6,6 @@ import SettingsMenu from './SettingsMenu'; import WorkspaceActions from './WorkspaceActions'; import ConsultationBanner from './ConsultationBanner'; import UserGroupMigrationBanner from './UserGroupMigrationBanner'; -import AppTypeTab from './AppTypeTab'; export { ImportAppMenu, @@ -17,5 +16,4 @@ export { WorkspaceActions, ConsultationBanner, UserGroupMigrationBanner, - AppTypeTab, };