diff --git a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js index 6baca33644..e6e2a2473d 100644 --- a/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js +++ b/frontend/src/AppBuilder/AppCanvas/appCanvasUtils.js @@ -330,8 +330,9 @@ const updateComponentLayout = (components, parentId, isCut = false) => { }; const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentId = undefined) => { - const parentId = componentParentId ?? component.component?.parent?.split('-').slice(0, -1).join('-'); + const parentId = componentParentId ?? component.component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1]; const parentComponent = allComponents?.[parentId]; + if (parentComponent) { return parentComponent.component.component === 'Tabs' || parentComponent.component.component === 'Calendar'; } diff --git a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx index 6d9237f8e6..cb3fc653c2 100644 --- a/frontend/src/AppBuilder/Header/CreateVersionModal.jsx +++ b/frontend/src/AppBuilder/Header/CreateVersionModal.jsx @@ -26,6 +26,7 @@ export const CreateVersion = ({ showCreateAppVersion, setShowCreateAppVersion }) appId, setCurrentVersionId, selectedVersion, + fetchDevelopmentVersions, } = useStore( (state) => ({ createNewVersionAction: state.createNewVersionAction, @@ -40,14 +41,15 @@ export const CreateVersion = ({ showCreateAppVersion, setShowCreateAppVersion }) currentVersionId: state.currentVersionId, setCurrentVersionId: state.setCurrentVersionId, selectedVersion: state.selectedVersion, + fetchDevelopmentVersions: state.fetchDevelopmentVersions, }), shallow ); const [selectedVersionForCreation, setSelectedVersionForCreation] = useState(null); - // useEffect(() => { - // fetchDevelopmentVersions(appId); - // }, []); + useEffect(() => { + fetchDevelopmentVersions(appId); + }, []); useEffect(() => { if (developmentVersions?.length && selectedVersion?.id) { @@ -59,7 +61,7 @@ export const CreateVersion = ({ showCreateAppVersion, setShowCreateAppVersion }) const { t } = useTranslation(); console.log({ developmentVersions }); - const options = versionsPromotedToEnvironment.map((version) => { + const options = developmentVersions.map((version) => { return { label: version.name, value: version }; }); diff --git a/frontend/src/AppBuilder/_hooks/useAppData.js b/frontend/src/AppBuilder/_hooks/useAppData.js index 604339f9e1..e216cbadad 100644 --- a/frontend/src/AppBuilder/_hooks/useAppData.js +++ b/frontend/src/AppBuilder/_hooks/useAppData.js @@ -190,7 +190,7 @@ const useAppData = (appId, moduleId, mode = 'edit', { environmentId, versionId } ); setPages(pages, moduleId); - setPageSettings(deepCamelCase(appData?.editing_version?.page_settings)); + setPageSettings(deepCamelCase(appData?.editing_version?.page_settings || appData?.page_settings)); // set starting page as homepage initially let startingPage = appData.pages.find((page) => page.id === homePageId); diff --git a/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js b/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js index a3d7384517..919e818bd9 100644 --- a/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/environmentsAndVersionsSlice.js @@ -54,7 +54,7 @@ export const createEnvironmentsAndVersionsSlice = (set, get) => ({ setEnvironmentDropdownStatus: (status) => set({ initializedEnvironmentDropdown: status }), fetchDevelopmentVersions: async (appId) => { - const developmentEnvironmentId = get().environments.find((environment) => environment.name === 'development').id; + const developmentEnvironmentId = get().environments.find((environment) => environment.name === 'production').id; try { const response = await appEnvironmentService.getVersionsByEnvironment(appId, developmentEnvironmentId); diff --git a/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js b/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js index 12a538400e..27a59740db 100644 --- a/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/queryPanelSlice.js @@ -205,7 +205,6 @@ export const createQueryPanelSlice = (set, get) => ({ setPreviewPanelExpanded, executeRunPycode, runTransformation, - executeWorkflow, executeMultilineJS, } = queryPanel; const { onEvent } = eventsSlice; @@ -297,14 +296,6 @@ export const createQueryPanelSlice = (set, get) => ({ queryExecutionPromise = executeMultilineJS(query.options.code, query?.id, false, mode, parameters); } else if (query.kind === 'runpy') { queryExecutionPromise = executeRunPycode(query.options.code, query, false, mode, queryState); - } else if (query.kind === 'workflows') { - queryExecutionPromise = executeWorkflow( - moduleId, - query.options.workflowId, - query.options.blocking, - query.options?.params, - (currentAppEnvironmentId ?? environmentId) || selectedEnvironment?.id //TODO: currentAppEnvironmentId may no longer required. Need to check - ); } else { queryExecutionPromise = dataqueryService.run( queryId, @@ -465,7 +456,6 @@ export const createQueryPanelSlice = (set, get) => ({ setPreviewPanelExpanded, executeRunPycode, runTransformation, - executeWorkflow, executeMultilineJS, setIsPreviewQueryLoading, } = queryPanel; @@ -514,14 +504,6 @@ export const createQueryPanelSlice = (set, get) => ({ queryExecutionPromise = executeMultilineJS(query.options.code, query?.id, true, '', parameters); } else if (query.kind === 'runpy') { queryExecutionPromise = executeRunPycode(query.options.code, query, true, 'edit', queryState); - } else if (query.kind === 'workflows') { - queryExecutionPromise = executeWorkflow( - moduleId, - query.options.workflowId, - query.options.blocking, - query.options?.params, - (currentAppEnvironmentId ?? environmentId) || selectedEnvironment?.id //TODO: currentAppEnvironmentId may no longer required. Need to check - ); } else { queryExecutionPromise = dataqueryService.preview(query, options, currentVersionId, currentAppEnvironmentId); } diff --git a/frontend/src/Editor/CodeBuilder/Elements/Color.jsx b/frontend/src/Editor/CodeBuilder/Elements/Color.jsx index bdeb8f8ac1..a6323be340 100644 --- a/frontend/src/Editor/CodeBuilder/Elements/Color.jsx +++ b/frontend/src/Editor/CodeBuilder/Elements/Color.jsx @@ -4,6 +4,8 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import Popover from 'react-bootstrap/Popover'; import classNames from 'classnames'; import { computeColor } from '@/_helpers/utils'; +import SolidIcon from '@/_ui/Icon/SolidIcons'; +import { Tooltip } from 'react-bootstrap'; export const Color = ({ value, @@ -12,11 +14,12 @@ export const Color = ({ cyLabel, asBoxShadowPopover = true, meta, + outerWidth = '142px', component, styleDefinition, + onReset, }) => { value = component == 'Button' ? computeColor(styleDefinition, value, meta) : value; - const [showPicker, setShowPicker] = useState(false); const darkMode = localStorage.getItem('darkMode') === 'true'; const colorPickerPosition = meta?.colorPickerPosition ?? ''; @@ -28,7 +31,7 @@ export const Color = ({ left: '0px', }; const outerStyles = { - width: '142px', + width: outerWidth, height: '32px', borderRadius: ' 6px', display: 'flex', @@ -109,6 +112,15 @@ export const Color = ({
{value}
+ {typeof onReset === 'function' && ( +
+ Reset to default}> +
+ +
+ +
+ )} ); }; diff --git a/frontend/src/ManageOrgConstants/ConstantFormStyle.scss b/frontend/src/ManageOrgConstants/ConstantFormStyle.scss index a627964da0..2984295cfa 100644 --- a/frontend/src/ManageOrgConstants/ConstantFormStyle.scss +++ b/frontend/src/ManageOrgConstants/ConstantFormStyle.scss @@ -105,11 +105,6 @@ align-items: center; } -.p-3 { - padding: 16px; - padding-left: 0px !important; -} - .workspace-setting-buttons-wrap { display: flex; align-items: center; diff --git a/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx index 439f58af19..ea054f421c 100644 --- a/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx +++ b/frontend/src/ToolJetUI/SwitchGroup/ToggleGroupItem.jsx @@ -3,9 +3,10 @@ import React from 'react'; import * as ToggleGroup from '@radix-ui/react-toggle-group'; import SolidIcon from '@/_ui/Icon/SolidIcons'; -const ToggleGroupItem = ({ children, value, isIcon, ...restProps }) => { +const ToggleGroupItem = ({ children, value, isIcon, className, ...restProps }) => { return ( - + + {' '}
{!isIcon ? ( children diff --git a/frontend/src/_components/AccordionForm.jsx b/frontend/src/_components/AccordionForm.jsx new file mode 100644 index 0000000000..6afe396bb0 --- /dev/null +++ b/frontend/src/_components/AccordionForm.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import isEmpty from 'lodash/isEmpty'; +import Accordion from '@/_ui/Accordion'; + +const AccordionForm = ({ formComponent, getLayout }) => { + const sections = Object.keys(formComponent) + .map((key) => ({ + title: formComponent[key].title, + inputs: formComponent[key].inputs, + })) + .filter(({ inputs }) => inputs && !isEmpty(inputs)); + + const items = sections.map(({ title, inputs }) => ({ + title: title, + isOpen: true, + children: getLayout(inputs), + })); + + return ; +}; + +export default AccordionForm; diff --git a/frontend/src/_components/DarkModeToggle.jsx b/frontend/src/_components/DarkModeToggle.jsx index 56a7639842..2f0ef8474c 100644 --- a/frontend/src/_components/DarkModeToggle.jsx +++ b/frontend/src/_components/DarkModeToggle.jsx @@ -102,7 +102,9 @@ export const DarkModeToggle = function DarkModeToggle({ {showText && ( - Switch to {!darkMode ? 'dark mode' : 'light mode'} + + Switch to {!darkMode ? 'dark mode' : 'light mode'} + )}
diff --git a/frontend/src/_components/DynamicForm.jsx b/frontend/src/_components/DynamicForm.jsx index 37fd3104af..13734d54b9 100644 --- a/frontend/src/_components/DynamicForm.jsx +++ b/frontend/src/_components/DynamicForm.jsx @@ -8,13 +8,13 @@ import OAuth from '@/_ui/OAuth'; import Toggle from '@/_ui/Toggle'; import OpenApi from '@/_ui/OpenAPI'; import { Checkbox, CheckboxGroup } from '@/_ui/CheckBox'; -import CodeHinter from '@/Editor/CodeEditor'; +import CodeHinter from '@/AppBuilder/CodeEditor'; import GoogleSheets from '@/_components/Googlesheets'; import Slack from '@/_components/Slack'; import Zendesk from '@/_components/Zendesk'; import { ConditionFilter, CondtionSort, MultiColumn } from '@/_components/MultiConditions'; import Salesforce from '@/_components/Salesforce'; -import ToolJetDbOperations from '@/Editor/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations'; +import ToolJetDbOperations from '@/AppBuilder/QueryManager/QueryEditors/TooljetDatabase/ToolJetDbOperations'; import { orgEnvironmentVariableService, orgEnvironmentConstantService } from '../_services'; import { find, isEmpty } from 'lodash'; import { ButtonSolid } from './AppButton'; diff --git a/frontend/src/_components/OverflowTooltip.jsx b/frontend/src/_components/OverflowTooltip.jsx index f20669e746..297f17d236 100644 --- a/frontend/src/_components/OverflowTooltip.jsx +++ b/frontend/src/_components/OverflowTooltip.jsx @@ -24,6 +24,7 @@ export default function OverflowTooltip({ children, className, whiteSpace = 'now >
{ - if (ref.current && !ref.current.contains(event.target)) { + if (ref?.current && !ref.current.contains(event.target)) { clearSearchText(); // Your function to be triggered } diff --git a/frontend/src/_components/SortableList/SortableList.jsx b/frontend/src/_components/SortableList/SortableList.jsx index 42273bcbd9..7a59e7fda9 100644 --- a/frontend/src/_components/SortableList/SortableList.jsx +++ b/frontend/src/_components/SortableList/SortableList.jsx @@ -4,26 +4,26 @@ import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-ki import { SortableItem } from './components'; import { useAppVersionStore } from '@/_stores/appVersionStore'; import { shallow } from 'zustand/shallow'; +import useStore from '@/AppBuilder/_stores/store'; export function SortableList({ items, onChange, renderItem }) { const sensors = useSensors( - useSensor(PointerSensor), + useSensor(PointerSensor, { + activationConstraint: { delay: 150 }, + }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates, }) ); - const { enableReleasedVersionPopupState, isVersionReleased } = useAppVersionStore( - (state) => ({ - enableReleasedVersionPopupState: state.actions.enableReleasedVersionPopupState, - isVersionReleased: state.isVersionReleased, - }), - shallow - ); + + const shouldFreeze = useStore((state) => state.isVersionReleased || state.isEditorFreezed); + const enableReleasedVersionPopupState = useStore((state) => state.enableReleasedVersionPopupState); + return ( { - if (isVersionReleased) { + if (shouldFreeze) { enableReleasedVersionPopupState(); return; } diff --git a/frontend/src/_components/SortableList/components/SortableItem.jsx b/frontend/src/_components/SortableList/components/SortableItem.jsx index 383ac4ced1..345aa9aee5 100644 --- a/frontend/src/_components/SortableList/components/SortableItem.jsx +++ b/frontend/src/_components/SortableList/components/SortableItem.jsx @@ -29,7 +29,7 @@ export function SortableItem({ children, id, classNames }) { return ( -
+
{children}
@@ -51,3 +51,16 @@ export function DragHandle({ show = true }) { ); } + +// hoc for wrapping components that need to be draggable +export function withDraggable(Component) { + return function DraggableComponent(props) { + const { attributes, listeners, ref } = useContext(SortableItemContext); + + return ( +
+ +
+ ); + }; +} diff --git a/frontend/src/_components/SortableList/index.js b/frontend/src/_components/SortableList/index.js index 8146d4c14e..375b7add58 100644 --- a/frontend/src/_components/SortableList/index.js +++ b/frontend/src/_components/SortableList/index.js @@ -1,36 +1,41 @@ import React from 'react'; +import useStore from '@/AppBuilder/_stores/store'; +import EmptyIllustration from '@assets/images/no-results.svg'; import { SortableList } from './SortableList'; import { DragHandle } from './components'; +import { shallow } from 'zustand/shallow'; +import _ from 'lodash'; const SortableComponent = ({ data, Element, ...restProps }) => { - const { onSort } = restProps; + const allpages = useStore((state) => _.get(state, 'modules.canvas.pages', []), shallow); + const reorderPages = useStore((state) => state.reorderPages); - const [items, setItems] = React.useState([]); + const showSearch = useStore((state) => state.showSearch); + const pageSearchResults = useStore((state) => state.pageSearchResults); - React.useEffect(() => { - setItems(data); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [JSON.stringify(data)]); + const pagesTorender = + showSearch && pageSearchResults !== null + ? allpages.filter((page) => pageSearchResults.includes(page.id)) + : allpages; - //function to check if the item in items array has changed position with respect to the original data - const didItemChangePosition = (originalArr, sortedArry) => { - return originalArr.some((item, index) => { - return item.id !== sortedArry[index].id; - }); - }; - - React.useEffect(() => { - if (items.length > 0 && didItemChangePosition(data, items)) { - onSort(items); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [items]); + if (pagesTorender.length === 0) { + return ( +
+
+ +

+ No pages found +

+
+
+ ); + } return (
( diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index 943d363979..5875a021c9 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/frontend/src/_helpers/appUtils.js @@ -1856,7 +1856,7 @@ const updateComponentLayout = (components, parentId, isCut = false) => { }; // const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentId = undefined) => { - const parentId = componentParentId ?? component.component?.parent?.split('-').slice(0, -1).join('-'); + const parentId = componentParentId ?? component.component?.parent?.match(/([a-fA-F0-9-]{36})-(.+)/)?.[1]; const parentComponent = allComponents.find((comp) => comp.componentId === parentId); diff --git a/frontend/src/_hooks/useAppDarkMode.js b/frontend/src/_hooks/useAppDarkMode.js index c89fb204ed..7e5b33f87b 100644 --- a/frontend/src/_hooks/useAppDarkMode.js +++ b/frontend/src/_hooks/useAppDarkMode.js @@ -1,31 +1,17 @@ -import { useCallback, useMemo } from 'react'; +import { useMemo } from 'react'; import { shallow } from 'zustand/shallow'; -import { useEditorStore } from '@/_stores/editorStore'; -import { useAppDataStore } from '@/_stores/appDataStore'; +import useStore from '@/AppBuilder/_stores/store'; const useAppDarkMode = () => { - const { appMode, setAppMode } = useEditorStore( - (state) => ({ - appMode: state.appMode, - setAppMode: state.actions.setAppMode, - }), - shallow - ); - - const { isTJDarkMode } = useAppDataStore( + const { appMode, globalSettingsChanged, isTJDarkMode } = useStore( (state) => ({ + appMode: state.globalSettings.appMode, + globalSettingsChanged: state.globalSettingsChanged, isTJDarkMode: state.isTJDarkMode, }), shallow ); - const handleAppModeChange = useCallback( - (appMode = 'auto') => { - setAppMode(appMode); - }, - [setAppMode] - ); - const isAppDarkMode = useMemo(() => { if (appMode === 'light') { return false; @@ -37,7 +23,7 @@ const useAppDarkMode = () => { }, [appMode, isTJDarkMode]); return { - onAppModeChange: handleAppModeChange, + onAppModeChange: globalSettingsChanged, appMode, isAppDarkMode, }; diff --git a/frontend/src/_services/appVersion.service.js b/frontend/src/_services/appVersion.service.js index 85a462a855..d4ce1edb0f 100644 --- a/frontend/src/_services/appVersion.service.js +++ b/frontend/src/_services/appVersion.service.js @@ -93,6 +93,9 @@ function autoSaveApp( global_settings: { update: { ...diff }, }, + page_settings: { + update: { ...diff }, + }, }; const body = !type diff --git a/frontend/src/_stores/gridStore.js b/frontend/src/_stores/gridStore.js index 919d09a784..aa070e4a89 100644 --- a/frontend/src/_stores/gridStore.js +++ b/frontend/src/_stores/gridStore.js @@ -40,7 +40,7 @@ export const useGridStore = create( useGridStore.subscribe(({ draggingComponentId }) => { if (draggingComponentId) { document.querySelector(`.dragged-movable-control-box`)?.classList?.remove('dragged-movable-control-box'); - document.querySelector(`[target-id='${draggingComponentId}']`).classList.add('dragged-movable-control-box'); + document.querySelector(`[target-id='${draggingComponentId}']`)?.classList.add('dragged-movable-control-box'); } else if (document.querySelector(`.dragged-movable-control-box`)) { document.querySelector(`.dragged-movable-control-box`)?.classList.remove('dragged-movable-control-box'); } diff --git a/frontend/src/_stores/storeHelper.js b/frontend/src/_stores/storeHelper.js index 85c3addb74..3897d0d789 100644 --- a/frontend/src/_stores/storeHelper.js +++ b/frontend/src/_stores/storeHelper.js @@ -3,6 +3,7 @@ import { allOperations } from '@tooljet/plugins/client'; import { capitalize, cloneDeep } from 'lodash'; import { DATA_SOURCE_TYPE } from '@/_helpers/constants'; import { useDataQueriesStore } from '@/_stores/dataQueriesStore'; +import useStore from '@/AppBuilder/_stores/store'; export const getDefaultOptions = (source) => { const isSchemaUnavailable = Object.keys(schemaUnavailableOptions).includes(source.kind); @@ -42,7 +43,9 @@ export const getDefaultOptions = (source) => { const computeQueryName = (source) => { const { kind, type } = source; - const dataQueries = useDataQueriesStore.getState().dataQueries; + // TODO: Might need to move this out + // const dataQueries = useDataQueriesStore.getState().dataQueries; + const dataQueries = useStore.getState().dataQuery.queries.modules.canvas; let currentQueriesForKind = dataQueries.filter((query) => query.kind === kind); if (type == DATA_SOURCE_TYPE.SAMPLE) { currentQueriesForKind = currentQueriesForKind.filter((query) => query.data_source_id === source.id); diff --git a/frontend/src/_styles/components.scss b/frontend/src/_styles/components.scss index df518ec0b2..9399081d0f 100644 --- a/frontend/src/_styles/components.scss +++ b/frontend/src/_styles/components.scss @@ -125,7 +125,11 @@ $btn-dark-color: #FFFFFF; .page-selector-panel-body { height: 100%; padding: 12px 16px; - background-color: var(--base); + border-right: 1px solid #DFE3E6; + + &.dark-theme { + border-right: 1px solid var(--slate7); + } .page-handler { height: 32px !important; diff --git a/frontend/src/_styles/left-sidebar.scss b/frontend/src/_styles/left-sidebar.scss index 50866f9595..0817aa8727 100644 --- a/frontend/src/_styles/left-sidebar.scss +++ b/frontend/src/_styles/left-sidebar.scss @@ -214,6 +214,23 @@ } } +.expired-gradient-border { + border: none !important; + position: relative; + background-color: var(--slate3) !important; + color: var(--indigo9) !important; +} + +.expired-gradient-border::before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: var(--upgrade-default); +} + .debugger-content { background-color: var(--base); @@ -366,7 +383,7 @@ } .modal-searchbar { - width: 200px; + width: 200px !important; height: 36px; float: right; margin-right: 3.5rem !important; @@ -440,6 +457,17 @@ } } +.select-datasource-list-modal { + .form-control:focus { + padding: 0px; + width: 200px !important; + } + + .modal-body-content { + scrollbar-width: none; + } +} + .modal-body { .datasource-modal-sidebar-footer { border: 1px solid var(--slate5); @@ -543,6 +571,32 @@ .page-handler-wrapper { background: transparent; + + .tj-list-item-selected { + .custom-icon { + svg { + color: #4368E3; + stroke: #4368E3; + + } + } + } + .custom-icon { + svg { + color: #6A727C; + stroke: #6A727C; + } + } + + &.dark-theme { + .custom-icon { + svg { + color: #ffffff; + stroke: #ffffff; + } + } + } +// } } @@ -657,10 +711,10 @@ align-items: center; flex-direction: column; position: absolute; - bottom: 0; + bottom: 0px; padding-bottom: 8px; width: 44px; - max-height: 180px; + max-height: 230px; } .tj-leftsidebar-icon-items { diff --git a/frontend/src/_styles/pages-sidebar.scss b/frontend/src/_styles/pages-sidebar.scss index 8f4036549b..9c9e0616ed 100644 --- a/frontend/src/_styles/pages-sidebar.scss +++ b/frontend/src/_styles/pages-sidebar.scss @@ -3,26 +3,41 @@ } .viewer { - .page-name, .navigation-area, .tj-list-item, .canvas-box { + + .page-name, + .navigation-area, + .tj-list-item, + .canvas-box { transition: var(--tran-01); } + .page-name { + font-size: 14px; + } + .navigation-area { z-index: 2; border-right: 1px solid var(--slate6); + .left-sidebar-header-btn { + width: 25px; + height: 25px; + } + .tj-list-item { width: 96%; + justify-content: start; } &.close { - transform: translateX(-90%); + transform: translateX(-90%); .tj-list-item { opacity: 0; display: none; } } + .pin { position: absolute; right: -30px; @@ -30,13 +45,173 @@ } &.sidebar-overlay:hover { - transform: translateX(0%); - box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); + transform: translateX(0%); + box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); - .tj-list-item { - opacity: 1; - display: unset; + .tj-list-item { + opacity: 1; + display: flex; + } + } + + &.icon-only { + width: 65px !important; + padding: 0.5rem; + + .tj-list-item { + justify-content: center; + + .custom-icon { + display: flex; + align-items: center; + justify-content: center; } + } + } + .accordion-item{ + border: none; + } + .accordion-body{ + padding: 4px 0 4px 16px !important; + } + .accordion-header{ + height: auto !important; + position: relative; + .page-group{ + height: 32px; + display: flex; + align-items: center; + svg{ + height: 18px; + width: 18px; + } + } + .tj-list-item{ + border:none !important; + padding-left: 8px !important; + outline: none !important; + &:hover{ + background: none !important; + } + } + .active-page-group-highlight{ + height: 32px; + width: 5px; + background: var(--primary-brand); + position: absolute; + left: -1rem; + } + } + .accordion-header button{ + margin: 0; + padding: 0 !important; } } + +} + +.pages-settings { + .label-style { + width: unset !important; + + .ToggleGroupItem { + width: unset !important; + + .toggle-item { + width: unset !important; + padding: 6px; + ; + } + } + + } + + .settings-tab { + .field { + label { + width: 100px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + } +} + +.icon-selector { + width: 25px; + height: 25px; + margin-right: 6px; + justify-content: center; + + .selector-wrapper { + display: flex; + align-items: center; + justify-content: center; + } + + &:hover { + background: var(--slate7); + border-radius: 6px; + } +} + +.page-menu-item { + .icon-selector { + svg { + color: #6A727C; + stroke: #6A727C; + + } + } + &.is-selected { + .icon-selector { + svg { + color: #4368E3; + stroke: #4368E3; + + } + } + } + &.dark-theme { + .icon-selector { + svg { + color: #ffffff; + stroke: #ffffff; + } + } + } +} + +.active-group{ + border-left: 2px solid red; +} + +.page-group-collapse-icon{ + margin-right: 6px; + position: relative; + top: 1px; +} + +.page-drag-overlay { + background: var(--slate5); + svg { + margin-right: 12px; + width: 20px !important; + height: 20px !important; + color:#6A727C; + } + &.dark-theme{ + color: #fff; + svg{ + color:#fff; + } + } +} + +.rename-input-buttons{ + button{ + box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10); + border: 1px solid #CCD1D5; + } } \ No newline at end of file diff --git a/frontend/src/_styles/popover.scss b/frontend/src/_styles/popover.scss index 2dad65cc30..45b24463cb 100644 --- a/frontend/src/_styles/popover.scss +++ b/frontend/src/_styles/popover.scss @@ -20,7 +20,6 @@ will-change: initial; } - .PopoverArrow { fill: white; } diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss index f81e2897f5..fa366ba993 100644 --- a/frontend/src/_styles/theme.scss +++ b/frontend/src/_styles/theme.scss @@ -10,6 +10,7 @@ @import "./designtheme.scss"; @import "./dropdown-custom.scss"; @import "./ui-operations.scss"; +// @import "./license.scss"; @import 'react-loading-skeleton/dist/skeleton.css'; @import './table-component.scss'; @import './groups-permissions.scss'; @@ -178,9 +179,11 @@ width: 6px; height: 50px; } + &::-webkit-scrollbar-track { background: transparent; } + &::-webkit-scrollbar-thumb { background-color: #E4E7EB; border-radius: 10px; @@ -209,6 +212,9 @@ body { font-family: 'IBM Plex Sans'; // color: var(--text-default) !important; } +body:has(.wrapper.audit-log) { + overflow: hidden; +} input, button { @@ -323,6 +329,31 @@ button { box-shadow: none !important; color: var(--slate12) !important; padding: 16px 16px !important; + display: flex; + justify-content: space-between; + align-items: center; +} + +.accordion-button.inspector::after { + display: none; +} + +.accordion-item-trigger { + background-image: url('data:image/svg+xml,') !important; + height: 16px !important; + width: 16px !important; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + transition: transform 0.3s; + display: inherit !important; + opacity: 0.7; +} + +.accordion-item-trigger:not(.collapsed) { + transform: rotate(180deg); + opacity: 1; + } .accordion-button::after { @@ -583,7 +614,9 @@ button { background-color: var(--base); background-clip: border-box; height: 100vh; - z-index: 11; + >div { + background-color: var(--base); + } .inspector { @@ -673,7 +706,6 @@ button { &:hover { background-color: var(--slate4); border: 1px solid var(--slate4, #E6E8EB); - } &:active { @@ -706,7 +738,7 @@ button { .main { top: 0; - height: calc(100vh - 84px); + height: calc(100vh - 42px); // check &.hide-scrollbar { .canvas-container::-webkit-scrollbar { @@ -1378,6 +1410,26 @@ button { } } +.organizations-modal.dark-mode, +.user-edit-modal.dark-mode { + .modal-header { + border-color: #232e3c !important; + } + + .modal-body, + .modal-footer, + .modal-header, + .modal-content { + color: white; + background-color: #2b394a; + } + + .user-table-header th { + color: white; + background-color: #1c252f; + } +} + .fx-container { position: relative; } @@ -1538,6 +1590,10 @@ button { background-image: url('data:image/svg+xml,'); } + .accordion-item-trigger { + background-image: url('data:image/svg+xml,') !important; + } + .homepage-body { .app-list { .app-title { @@ -1744,6 +1800,18 @@ button { color: #ffffff; } +.audit-log { + .select-search__option.is-selected { + background: $primary; + color: $white; + } + + .page-body { + margin-bottom: 0px; + } + +} + /** * Group */ @@ -1763,7 +1831,9 @@ button { .select-search.is-loading .select-search__value::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath fill='%232F2D37' d='M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); - background-size: 11px; + background-size: 8px; + width: 8px; + height: 8px; } .select-search:not(.is-disabled) .select-search__input { @@ -1846,7 +1916,6 @@ button { */ .select-search-dark__value { position: relative; - z-index: 1; } .select-search-dark__value::after { @@ -2613,17 +2682,17 @@ hr { width: 110px; } -.draggable-box { - .config-handle { - top: -20px; - position: fixed; - max-height: 10px; - z-index: 100; - min-width: 108px; - } + +.config-handle { + top: -20px; + position: fixed; + max-height: 10px; + z-index: 100; + min-width: 108px; } -.draggable-box .config-handle, + +.config-handle, .multiple-components-config-handle { .handle-content { cursor: move; @@ -2658,7 +2727,7 @@ hr { } .config-handle:hover, -.widget-in-canvas:hover .config-handle { +.config-handle { visibility: visible; } @@ -2731,6 +2800,9 @@ hr { } } + + + .CodeMirror-placeholder { color: #9e9e9e !important; font-size: 0.7rem !important; @@ -2950,7 +3022,7 @@ input:focus-visible { } } -.jet-tabs{ +.jet-tabs { overflow-y: auto } @@ -3016,6 +3088,20 @@ input:focus-visible { cursor: pointer; } +.color-reset { + display: flex; + align-items: center; + justify-content: center; + height: 20px; + width: 25px; + margin-right: 5px; + border-radius: 5px; + + &:hover { + background: var(--slate1); + } +} + .app-sharing-modal { .form-control.is-invalid, @@ -3123,6 +3209,28 @@ input:focus-visible { background: 0 0; } + .audit-log { + + .card-footer { + background: var(--page-default); + color: var(--slate12); + } + + .select-search__option:not(.is-selected), + .select-search__select { + background: #2c3547; + color: $white; + } + + .select-search__option.is-selected:hover, + .select-search__option:not(.is-selected):hover, + .select-search__option.is-selected { + background: #1F2936; + color: $white; + border-radius: 0px; + } + } + .navbar .navbar-nav .active>.nav-link, .theme-dark .navbar .navbar-nav .nav-link.active, .theme-dark .navbar .navbar-nav .nav-link.show, @@ -3444,6 +3552,8 @@ input:focus-visible { .org-users-page { .user-email, + .user-type, + .workspaces, .user-status { color: var(--slate12) !important; } @@ -3483,6 +3593,10 @@ input:focus-visible { } } + .org-constant-bg { + background-color: var(--page-default); + } + .react-json-view { background-color: transparent !important; } @@ -3508,11 +3622,30 @@ input:focus-visible { } } + .oidc-button { + .btn-loading:after { + color: $white; + } + } + .page-item { a.page-link { color: white; } } + + .tj-ms-count { + background-color: #273342; + color: $white; + } + + .tj-ms-preview { + color: #273342; + } + + .tj-dashed-tooltip { + border-color: white; + } } .main-wrapper { @@ -3684,6 +3817,11 @@ input[type="text"] { opacity: 0.4; } +.enable-edit-fields { + pointer-events: auto !important; + opacity: 1 !important; +} + .DateRangePicker { padding: 1.25px 5px; } @@ -4375,6 +4513,10 @@ input[type="text"] { .app-name:hover { background: $bg-light; + input:disabled { + outline-style: none + } + &.dark { @extend .bg-dark; } @@ -4395,6 +4537,9 @@ input[type="text"] { font-size: 12px; letter-spacing: 0.5px; + @media screen and (max-width: 768px) { + width: 100%; + } } .undo-button, @@ -4545,6 +4690,7 @@ input[type="text"] { input { border-radius: $border-radius !important; padding-left: 1.75rem !important; + border-radius: $border-radius !important; } } @@ -4662,7 +4808,7 @@ input[type="text"] { font-weight: 500; } - input { + input:not([type=checkbox]) { border-radius: 5px !important; background: var(--base); color: var(--slate12); @@ -4674,11 +4820,11 @@ input[type="text"] { .modal-footer-btn { - & > *:nth-child(2) { + &>*:nth-child(2) { margin-left: 16px; + } } } -} .home-modal-component-editor.dark { @@ -5416,6 +5562,10 @@ div#driver-page-overlay { background: var(--base); } + .open-id-sso-card { + border-bottom: 1px solid var(--slate5) !important; + } + .sso-card-footer { display: flex; flex-direction: row; @@ -5662,6 +5812,7 @@ div#driver-page-overlay { .action-icons-group { + img, svg { filter: invert(89%) sepia(2%) saturate(127%) hue-rotate(175deg) brightness(99%) contrast(96%); @@ -5672,9 +5823,44 @@ div#driver-page-overlay { color: #8092ab !important; border-color: #8092ab !important; } + } .json-tree-container { + + .inspector-json-node { + .color-primary { + color: $primary; + } + + .node-key-outline { + height: 1rem !important; + border: 1px solid transparent !important; + color: var(--slate12); + } + + &:hover { + .action-icons-group { + visibility: visible; + pointer-events: all; + } + + .hovered-json-node { + font-weight: 400 !important; + height: 1rem !important; + color: #8092ab; + } + + .hovered-json-node-border.node-key.badge { + border-color: $primary !important; + } + + .node-key-outline.node-key.badge { + border-color: #8092ab !important; + } + } + } + .json-tree-svg-icon.component-icon { height: 16px; width: 16px; @@ -5760,6 +5946,8 @@ div#driver-page-overlay { .action-icons-group { + visibility: hidden; + pointer-events: none; cursor: pointer; } @@ -5781,8 +5969,14 @@ div#driver-page-overlay { border: 1px solid transparent !important; color: var(--slate12); } + } + + + + + .popover-more-actions { font-weight: 400 !important; @@ -6045,6 +6239,7 @@ div#driver-page-overlay { color: var(--slate9); cursor: not-allowed; } + &::placeholder { color: var(--slate9); font-weight: 400; @@ -6325,9 +6520,12 @@ a.step-item-disabled { } .notification-center-badge { - top: 0; - right: 6px; + + margin-top: 0px; + margin-left: 10px; + margin-bottom: 15px; position: absolute; + right: 6px; } .notification-center { @@ -6385,6 +6583,12 @@ input.hide-input-arrows { width: 36px; } + + + + + + .custom-checkbox-tree { overflow-y: scroll; color: #3e525b; @@ -6442,6 +6646,12 @@ input.hide-input-arrows { } } +.oidc-button { + .btn-loading:after { + color: $primary; + } +} + .icon-widget-popover { &.theme-dark { .popover-header { @@ -7439,7 +7649,6 @@ tbody { } - .right-bar { height: 100%; padding: 3px 3px 3px 0px; @@ -7590,7 +7799,21 @@ tbody { height: calc(100vh - 64px) !important; } -.workspace-variable-table-card { +.instance-settings-wrapper {} + +.database-page-content-wrap { + height: calc(100vh - 64px) !important; +} + +.audit-logs-nav-item { + position: fixed; + bottom: 100px; + left: 8px; +} + +.home-page-sidebar, +.workspace-variable-table-card, +.org-wrapper { margin: 0 auto; width: 880px; } @@ -7602,6 +7825,18 @@ tbody { border-right: 1px solid var(--slate5) !important; display: grid !important; grid-template-rows: auto 1fr auto !important; + position: relative; + + .trial-banner { + position: absolute; + bottom: 50px; + max-height: 130px; + min-width: 255px; + + svg { + width: 48px; + } + } } .marketplace-page-sidebar { @@ -7647,6 +7882,14 @@ tbody { .sidebar-container { height: 40px !important; + padding-top: 4px !important; + margin: 0 auto; + display: flex; + justify-content: center; + } + + .sidebar-container-with-banner { + height: 140px !important; padding-top: 1px !important; margin: 0 auto; display: flex; @@ -7660,6 +7903,11 @@ tbody { .dropdown-toggle-split { border-left: 1px solid var(--indigo11) !important; + + &:disabled { + background-color: var(--slate6) !important; + border-left: 1px solid var(--slate6) !important; + } } button { @@ -7673,6 +7921,11 @@ tbody { height: 40px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; + + &:disabled { + background-color: var(--slate6) !important; + color: var(--slate9) !important; + } } .create-new-app-button+.dropdown-toggle { @@ -7693,9 +7946,37 @@ tbody { } } -// .jet-data-table td .textarea-dark-theme.text-container:focus { -// background-color: transparent !important; -// } +.jet-data-table td .textarea-dark-theme.text-container:focus { + background-color: transparent !important; +} + +.app-environment-menu { + display: flex; + align-items: center; + min-width: 170px; + max-width: 180px; + height: 28px; + font-size: 12px; + margin-left: 1rem; + + @media screen and (max-width: 767px) { + margin-left: 0 !important; + width: 100%; + max-width: unset !important; + } + + .app-environment-list-item { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .app-environment-name { + font-weight: 400; + font-size: 12px; + line-height: 20px; + } +} .tooljet-logo-loader { height: 100vh; @@ -7968,6 +8249,10 @@ tbody { font-weight: 400; } +.font-weight-600 { + font-weight: 600; +} + .border-indigo-09 { border: 1px solid $color-light-indigo-09; } @@ -8029,6 +8314,246 @@ tbody { &:focus { outline: #ECEEF0 auto 5px; + background: #3756C5; + box-shadow: none; + } + + &:disabled, + &[disabled] { + background: linear-gradient(0deg, #F3F4F6, #F3F4F6); + box-shadow: none; + color: #D1D5DB; + } +} + +.tj-text-input-error-state { + font-weight: 400; + font-size: 11px; + line-height: 16px; + margin-top: 2px !important; + color: #EB1414; +} + +.input-error { + border: 1px solid #EB1414; +} + +.onboarding-radio-checked { + border: 1px solid #466BF2 !important; + box-shadow: none; +} + +.onboarding-bubbles { + width: 8px !important; + height: 8px !important; + background: #D1D5DB !important; + margin-right: 8px; + border-radius: 100%; +} + +.onboarding-bubbles-selected { + width: 8px !important; + height: 8px !important; + background: #466BF2 !important; + margin-right: 8px; + border-radius: 100%; +} + +.onboarding-bubbles-active { + background: #466BF2 !important; + width: 16px !important; + height: 16px !important; + margin-right: 8px; + border-radius: 100%; +} + +.onboarding-bubbles-completed { + background: #D1D5DB; +} + +.onboarding-bubbles-wrapper { + display: flex; + flex-direction: row; + align-items: center; +} + +.onboarding-progress-cloud { + margin-bottom: 32px; + display: flex; + align-items: center; +} + +.onboarding-progress { + margin-bottom: 32px; + display: grid; +} + +.onboarding-progress-layout-cloud { + grid-template-columns: 3fr 6fr 3fr; + margin-bottom: 40px; + display: grid; +} + +.onboarding-progress-layout { + grid-template-columns: 12fr; + margin-bottom: 40px; + display: grid; +} + +.onboarding-bubbles-container { + margin-left: auto; + margin-right: auto; +} + +.onboarding-header-wrapper { + display: flex; + flex-direction: column; + align-items: center; +} + +.onboarding-back-button, +.onboarding-front-button { + + font-size: 12px; + line-height: 20px; + color: #6B7380; + display: flex !important; + flex-direction: row !important; + align-items: center; + cursor: pointer; + + .onboarding-back-text { + margin-left: 12px; + color: #D7DBDF; + } + + p, + .onboarding-skip-text { + margin-bottom: 0 !important; + color: #D7DBDF; + font-weight: 600; + font-size: 14px; + } + + .onboarding-skip-text { + margin-right: 12px !important; + } +} + + +.info-screen-description { + margin-bottom: 0px !important; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + color: #4B5563; + line-height: 24px; +} + +.separator-onboarding, +.separator-signup { + .separator { + width: 100%; + + h2 { + width: 100%; + text-align: center; + border-bottom: 1px solid #E4E7EB; + line-height: 0.1em; + font-size: 14px; + margin: 26px 0 26px; + } + + h2 span { + color: #9BA3AF; + background: #fff; + padding: 0 18px; + } + } +} + +// login ,signin +.separator-signup { + .separator { + width: 100%; + + h2 { + margin: 36px 0 36px !important; + } + } +} + + +.common-auth-section-whole-wrapper { + display: flex; + flex-direction: row; + + .common-auth-section-right-wrapper { + width: 29.16%; + border-left: 1px solid #E4E7EB; + overflow: hidden; + } + + .common-auth-section-left-wrapper { + width: 70.83%; + position: relative; + + .common-auth-section-left-wrapper-grid { + display: grid; + height: calc(100% - 64px); + + form { + display: flex !important; + justify-content: center; + align-items: center !important; + } + } + + } + + .common-auth-container-wrapper { + display: flex; + flex-direction: column; + align-items: center; + width: 352px; + margin: 0px auto 0px auto; + } + + .login-sso-wrapper { + padding: 6px 16px; + gap: 5px; + width: 352px; + height: 40px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin-bottom: 12px; + background: #FFFFFF; + border: 1px solid #D1D5DB; + border-radius: 4px; + + &:hover { + border: 1px solid #D1D5DB; + box-shadow: 0px 0px 0px 4px #E4E7EB; + } + } +} + +.sso-info-text { + font-weight: 600; + font-size: 14px; + line-height: 24px; + margin-left: 11px; +} + +.sso-button { + background-color: #fff; + cursor: pointer; + + img { + width: 32px; } } @@ -8042,10 +8567,15 @@ tbody { padding-bottom: 24px; border-right: 1px solid var(--slate5); - &[data-name="Profile settings"], - &[data-name="Workspace constants"] { + &[data-name="Audit logs"], + &[data-name="Workspace constants"], + &[data-name="Profile settings"] { border-right: none; border-bottom: 1px solid var(--slate5); + + .paid-feature-banner { + margin-left: 15px; + } } } @@ -8104,6 +8634,10 @@ tbody { background-color: var(--page-default); border: none !important; } + + @media screen and (max-width: 767px) { + width: 100%; + } } .app-version-list-item { @@ -8137,6 +8671,7 @@ tbody { .modal-backdrop { opacity: 0.5; + z-index: 1060; } .canvas-area>.modal-backdrop { @@ -8194,6 +8729,7 @@ tbody { width: fit-content; width: 30px !important; height: 20px !important; + margin-bottom: 0px !important; text-align: center; } @@ -8259,7 +8795,9 @@ tbody { img { width: 20px; - height: 20px + height: 20px; + margin-left: 0px !important; + margin-right: 0px !important; } } } @@ -8336,10 +8874,18 @@ tbody { // DASHBOARD SCROLL STYLES---> +.create-new-app-license-wrapper { + display: flex; + align-items: center; + flex-direction: column; +} + .create-new-app-wrapper { margin: 0 auto; display: flex; justify-content: center; + flex-direction: column; + align-items: center; padding-top: 4px; } @@ -8512,7 +9058,46 @@ tbody { .version-manager-container { padding: 0.6rem; - width: 158px; + + @media screen and (max-width: 767px) { + padding: 0 !important; + width: 100%; + } +} + +.git-sync-btn { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + background: var(--indigo3); + border-radius: 6px; + width: 36px; + height: 36px; + margin: auto 5px; +} + +.git-sync-btn.disabled-action-tooltip { + .license-tooltip { + opacity: 1; + } + + opacity: 1; + background: var(--slate3); + + rect { + fill: var(--slate3); + } + + svg { + path { + fill: var(--slate8); + } + } +} + +.env-version-container { + padding-right: 100px; } // tooljet db fields styles [ query manager ] @@ -8555,13 +9140,31 @@ tbody { } .react-loading-skeleton { - background-color: var(--interactive-default) ; + background-color: var(--interactive-default); // background-image: linear-gradient(90deg, #2F3C4C, #2F3C4C, #2F3C4C) !important; } .theme-dark { + .audit-log { + .rdtPicker { + background-color: #2B394A; + color: #fff; + + .rdtDay:hover { + background-color: #636466; + } + } + + .card-body { + .count-main { + background-color: inherit !important; + color: #fff !important; + } + } + } + .react-loading-skeleton { - background-color: var(--interactive-default) ; + background-color: var(--interactive-default); background-image: linear-gradient(90deg, #2F3C4C, #2F3C4C, #2F3C4C) !important; } @@ -8615,15 +9218,20 @@ tbody { width: 376px; } + .cursor-pointer { + margin-left: auto; + margin-right: 10px; + margin-top: 10px; + } + .modal-content { background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(0deg, #DFE3E6, #DFE3E6); } .modal-header { - justify-content: center !important; + padding: 10px 10px 20px 5px; flex-direction: column; - padding: 40px 32px 20px 32px; .header-text { font-style: normal; @@ -8634,6 +9242,7 @@ tbody { } p { + margin: 15px 22px 0px 27px; font-style: normal; font-weight: 400; font-size: 14px; @@ -8645,12 +9254,15 @@ tbody { } .modal-body { + max-height: 300px; + overflow: auto; padding: 18px 32px; .org-list { display: flex; flex-direction: column; + .org-item { height: 50px; display: flex; @@ -8693,6 +9305,14 @@ tbody { padding: 24px 32px; border-top: 1px solid #DFE3E6; + .switch-ws-btn { + &:disabled { + background-color: var(--slate3); + color: var(--slate11); + } + + } + button { width: 100%; font-style: normal; @@ -8804,6 +9424,75 @@ tbody { color: var(—-slate12) !important; } + + +.no-active-organization-modal { + font-family: 'IBM Plex Sans'; + + .modal-dialog { + width: 350px; + } + + .cursor-pointer { + margin-left: auto; + margin-right: 10px; + margin-top: 10px; + } + + .modal-content { + background: linear-gradient(0deg, #FFFFFF, #FFFFFF), + linear-gradient(0deg, #DFE3E6, #DFE3E6); + } + + .modal-header { + padding: 5px 10px 20px 5px; + flex-direction: column; + + .header-text { + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 36px; + margin: 24px 0 5px 0; + } + + p { + margin: 15px 22px 0px 27px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: #687076; + text-align: Center; + margin-bottom: 0px; + } + } +} + +.no-active-organization-modal.dark-mode { + + .modal-footer, + .modal-header { + border-color: #232e3c !important; + + p { + color: rgba(255, 255, 255, 0.5) !important; + } + } + + .modal-body, + .modal-footer, + .modal-header, + .modal-content { + color: white; + background-color: #2b394a; + } + + .modal-content { + border: none; + } +} + .app-card-name { color: var(—-slate12); margin-bottom: 2px; @@ -8966,7 +9655,7 @@ tbody { padding: 16px; tbody { - tr{ + tr { td { border-bottom-width: 0px !important; display: flex; @@ -8977,10 +9666,25 @@ tbody { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - &[data-name="role-header"] { - max-width: 98px !important; + + &[data-name="status-header"] { + max-width: 160px !important; } - span,a { + + &[data-name="name-header"] { + max-width: 220px !important; + } + + &[data-name="meta-header"] { + max-width: 80px !important; + } + + &[data-name="role-header"] { + max-width: 108px !important; + } + + span, + a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -9004,10 +9708,22 @@ tbody { background: var(--base) !important; border-bottom: none !important; padding: 0 !important; - width: 282px; + width: 230px; + + &[data-name="name-header"] { + max-width: 210px !important; + } + + &[data-name="meta-header"] { + width: 80px !important; + } &[data-name="role-header"] { - width:120px !important; + width: 108px !important; + } + + &[data-name="status-header"] { + width: 160px !important; } } } @@ -9022,21 +9738,40 @@ tbody { gap: 8px; } - // tr>td { - // border-bottom-width: 0px !important; - // display: flex; - // align-items: center; - // flex: 9%; - // padding-left: 0px !important; - // padding-right: 0px !important; - // white-space: nowrap; - // overflow: hidden; - // text-overflow: ellipsis; + tr>td { + border-bottom-width: 0px !important; + display: flex; + align-items: center; + flex: 9%; + padding-left: 0px !important; + padding-right: 0px !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; - // &[data-name="role-header"] { - // width:120px !important; - // } - // } + &[data-name="name-header"] { + max-width: 210px !important; + } + + &[data-name="role-header"], + &[data-name="meta-header"] { + max-width: 88px !important; + } + + &[data-name="status-header"] { + width: 160px !important; + } + } + + .metadata { + padding: 20px; + font-weight: 400; + } + + .metadata.empty { + padding-left: 25px; + font-weight: 500; + } } .user-actions-button { @@ -9069,6 +9804,259 @@ tbody { margin: 0 auto; } + +.manage-workspace-table-wrap { + max-width: 880px; + min-height: 595px; + border: 1px solid var(--slate5); + border-radius: 6px; + margin: 10px auto; + background-color: #FFFFFF; + display: flex; + flex-direction: column; + + .tab-spinner { + width: 200px; + height: 200px; + } + + .pagination-container-box { + align-items: center; + justify-content: center; + display: flex; + padding-bottom: 15px; + margin-top: auto; + padding-top: 13px; + border-top: 1px solid var(--slate5) !important; + + .pagination-container { + align-items: center; + justify-content: center; + display: flex; + } + } + + + + + .tab-content-ws { + height: 504px; + } + + .worskspace-sub-header-wrap-nav-ws { + width: 100%; + height: 64px; + border-bottom: 1px solid var(--slate5); + display: flex; + + .nav-link.active { + border-bottom: 2px solid var(--indigo9) !important; + border-color: var(--indigo9) !important; + + } + + .nav-item { + font-weight: 500 !important; + font-size: 12px !important; + padding: 6px 8px 6px 8px; + align-items: flex-end; + color: var(--slate11); + + } + + .nav-tabs { + border: none; + padding-left: 16px; + } + + p { + width: 205px; + } + } + + .workspace-search-bar { + display: flex; + justify-content: end; + align-items: center; + padding: 0; + padding: 6px 10px 6px 10px; + + .ws-filter-search { + width: 300px; + height: 32px; + + } + } + + .worspace-list-table-body-header { + border-bottom: 1px solid var(--slate5); + display: flex; + height: 40px; + align-items: center; + + p { + height: 5px; + display: flex; + align-items: center; + width: 100%; + color: var(--slate11); + + } + + p:first-child { + width: 285px !important; + margin-left: 10px; + } + } + + .ws-list-table { + padding: 16px; + width: 100%; + height: 100%; + + + + .loader-container { + display: flex; + align-items: center; + justify-content: center; + height: 40vh; + /* Set the height of the container to the full viewport height */ + + .primary-spin-loader { + width: 100px; + height: 100px; + } + } + + .ws-empty-icon { + height: 130px; + width: 400px; + margin: 100px auto; + display: flex; + + p { + text-align: center; + } + } + } + + .manage-ws-table-body { + width: 100%; + + .workspace-table-row { + border-bottom: 1px solid var(--slate5); + height: 64px; + width: 100%; + + .ws-name { + padding-left: 8px; + + + .current-workspace-tag { + font-weight: 500; + color: var(--indigo9); + font-size: 12px; + display: flex; + height: 21px; + width: 130px; + align-items: center; + margin-left: 20px; + padding: 4px 8px 5px 8px; + border: 1px solid var(--indigo7); + background-color: var(--indigo3); + border-radius: 100px; + } + } + + .open-button-cont { + width: 44px; + padding: 0px 8px 0px 8px; + + .workspace-open-btn { + width: 28px; + height: 28px; + background-color: var(--slate1); + border: 1px solid var(--slate7); + box-shadow: none; + + &:hover { + background-color: var(--slate4); + } + } + } + + .archive-btn-cont { + width: 103px; + padding-right: 8px; + + .workspace-archive-btn { + width: 95px; + height: 28px; + background-color: var(--slate1); + box-shadow: none; + border: 1px solid var(--tomato7); + color: var(--tomato9); + + &:hover { + background-color: var(--tomato3); + } + + &:disabled { + border: 1px solid var(--slate7); + } + } + + .workspace-active-btn { + width: 95px; + height: 28px; + + background-color: var(--slate1); + box-shadow: none; + border: 1px solid var(--slate7); + color: var(--slate12); + + &:hover { + background-color: var(--slate7); + } + } + + + } + + } + } +} + +.manage-workspace-table-wrap.dark-mode { + border: 1px solid var(--slate7) !important; + border-radius: 6px !important; + ; + + .worskspace-sub-header-wrap-nav-ws { + background-color: var(--slate3) !important; + border-bottom: 1px solid var(--slate7) !important; + + } + + .tab-content-ws { + background-color: var(--base) !important; + } + + .pagination-container-box { + background-color: var(--base) !important; + } + + .workspace-table-row { + border-bottom: 1px solid var(--slate7); + } + + .worspace-list-table-body-header { + border-bottom: 1px solid var(--slate7); + } + +} + .workspace-settings-filters { display: flex; gap: 12px; @@ -9117,10 +10105,47 @@ tbody { margin: 0 auto !important; div:first-child { - margin: 0 auto !important; + margin: 10px auto !important; width: 880px; } + + .user-limits { + column-gap: 8px; + + .limit { + width: 100px !important; + display: flex; + flex-direction: column; + align-items: center; + padding: 5px !important; + background-color: var(--base); + border-radius: 5px; + border: 1px solid var(--slate5); + font-size: 12px; + margin: 10px 0 10px 0; + + .count { + font-weight: 500; + font-size: 14px; + } + + div { + width: unset !important; + font-size: 11px; + } + } + } +} + +.header-table-flex { + display: flex; + flex-direction: column; +} + +.workspace-constant-header { + width: 880px; + margin: 0 auto !important; } .workspace-constant-header { @@ -9155,12 +10180,11 @@ tbody { .workspace-clipboard-wrap { display: flex; align-items: center; - width: 162.67px; cursor: pointer; p { font-weight: 500 !important; - margin-left: 5px; + margin-left: 3px; color: var(--slate11); } @@ -9440,6 +10464,19 @@ tbody { border-color: var(--amber3); } +.workspace-variables-alert-banner { + width: inherit; + background-color: #EBF9EB; + border-color: #46A758; +} + +.codehinter.alert-component.workspace-constants-alert-banner { + color: #46A758; + border-color: #EBF9EB; + background-color: #EBF9EB; + font-size: 12px; +} + .add-new-variables-button { margin-bottom: 20px; width: 169px; @@ -9454,6 +10491,21 @@ tbody { border-right: 1px solid var(--slate5); overflow-y: auto; overflow-x: hidden; + + .group-banner { + svg { + display: none; + } + } + + .license-banner { + svg { + display: inline-block; + width: 54%; + } + } + + } .groups-header-wrap { @@ -9465,8 +10517,6 @@ tbody { .org-users-page-container { width: 880px; margin: 0 auto; - - } .group-duplcate-modal-body { @@ -9491,6 +10541,7 @@ tbody { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + color: var(--slate12) } .nav-tabs .nav-link.active { @@ -9508,10 +10559,12 @@ tbody { // overflow-y: auto; height: calc(100vh - 300px); - .group-users-list-container{ - height: calc(100vh - 300px - 100px); /* Set a fixed height */ - overflow-y: auto; /* Enable vertical scrolling */ - border-bottom: 1px solid var(--slate6) !important; + .group-users-list-container { + height: calc(100vh - 300px - 100px); + /* Set a fixed height */ + overflow-y: auto; + /* Enable vertical scrolling */ + border-bottom: 1px solid var(--slate6) !important; } } @@ -9556,7 +10609,7 @@ tbody { } .org-users-page-card-wrap, -.manage-sso-wrapper-card { +.org-settings-wrapper-card { display: flex; flex-direction: row; background: var(--base); @@ -9564,9 +10617,10 @@ tbody { outline: 1px solid var(--slate5); box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); border-radius: 6px; + max-height: calc(100vh - 156px); } -.manage-sso-wrapper-card { +.org-settings-wrapper-card { margin: 0 auto; .card-body { @@ -9635,7 +10689,8 @@ tbody { height: 32px; } -.groups-app-body-header { +.groups-app-body-header, +.groups-datasource-body-header { border-bottom: 1px solid var(--slate5); p { @@ -9684,15 +10739,19 @@ tbody { align-items: center; margin-top: 88px; } + } .apps-permission-wrap { height: auto; justify-content: center; - width: auto; + min-width: 300px; + flex-grow: 1; gap: 12px; } + + .apps-folder-permission-wrap, .apps--variable-permission-wrap { height: auto; @@ -9861,21 +10920,22 @@ tbody { } } - &:hover .apps-remove-btn { + &:hover .apps-remove-btn, + .datasources-remove-btn { display: flex; } - .edit-role-btn{ + .edit-role-btn { margin-left: auto; margin-right: 20px; display: flex; - align-items: center; + align-items: center; padding-top: 5px; } } - -.manage-group-app-table-body { +.manage-group-app-table-body, +.manage-group-datasource-table-body { width: 602px !important; tr { @@ -9889,14 +10949,16 @@ tbody { } } -.apps-view-edit-wrap { +.apps-view-edit-wrap, +.datasources-view-edit-wrap { display: flex; flex-direction: column; width: 51px; margin-right: 32px; } -.apps-table-row { +.apps-table-row, +.datasources-table-row { display: grid !important; grid-template-columns: 205px 286px 115px; @@ -9907,12 +10969,14 @@ tbody { text-overflow: ellipsis; } - &:hover .apps-remove-btn { + &:hover .apps-remove-btn, + .datasources-remove-btn { display: flex; } } -.apps-remove-btn { +.apps-remove-btn, +.datasources-remove-btn { width: 97px; height: 28px; font-weight: 600 !important; @@ -9922,7 +10986,8 @@ tbody { color: var(--slate8); } -.manage-groups-app-dropdown { +.manage-groups-app-dropdown, +.manage-groups-datasource-dropdown { width: 440px; } @@ -9951,12 +11016,12 @@ tbody { font-weight: 500; } - .edit-role-btn{ + .edit-role-btn { margin-left: auto; margin-right: 50px; display: flex; width: 20px; - align-items: center; + align-items: center; padding-top: 5px; } @@ -9969,6 +11034,7 @@ tbody { .manage-groups-permission-apps, .apps-folder-permission-wrap, +.datasource-permissions-wrap, .apps-variable-permission-wrap, .apps-constant-permission-wrap { display: flex; @@ -9988,6 +11054,10 @@ tbody { height: auto; } +.datasource-permissions-wrap { + border-top: 1px solid var(--slate5); +} + .apps-folder-permission-wrap, .apps-variable-permission-wrap { height: auto; @@ -10018,7 +11088,9 @@ tbody { background-color: var(--base) !important; } -.manage-constants-dropdown { +.manage-groups-app-dropdown, +.manage-constants-dropdown, +.manage-groups-datasource-dropdown { .rmsc.multi-select { .dropdown-container { gap: 17px; @@ -10145,6 +11217,47 @@ tbody { } } +.manage-constants-dropdown { + .rmsc.multi-select { + .dropdown-container { + gap: 17px; + height: 32px; + background: var(--base); + border: 1px solid var(--slate7); + border-radius: 6px; + display: flex; + justify-content: center; + align-items: center; + margin-right: 12px; + } + + .dropdown-content { + .panel-content { + background: var(--base); + border: 1px solid var(--slate3); + box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); + border-radius: 6px; + align-items: center; + + + .select-item:hover { + background-color: var(--slate3); + } + + .item-renderer { + align-items: center; + + span { + font-size: 12px; + color: var(--slate12) + } + } + } + } + } +} + + .sso-form-wrap { .form-label { font-size: 12px; @@ -10399,7 +11512,7 @@ tbody { .manage-users-drawer-content { - margin: 24px 32px; + margin: 24px 15px; .invite-user-by-email { display: flex; @@ -10570,6 +11683,14 @@ tbody { color: var(--slate7); } + .disable { + color: var(--slate7); + + &.dark-theme { + color: var(--slate11); + } + } + &__danger { color: var(--tomato9); } @@ -10622,6 +11743,9 @@ tbody { } .workspace-variable-container-wrap { + &.constants-list { + overflow: auto; + } .card, thead { @@ -10809,6 +11933,33 @@ tbody { span { letter-spacing: -0.02em; } + + &::-webkit-scrollbar { + width: 6.5px; + } + + &::-webkit-scrollbar-thumb { + background-color: transparent; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &:hover::-webkit-scrollbar-thumb { + background-color: #A1A6AD; + } +} + +.sidebar-list-wrap-with-banner { + margin-top: 24px; + padding: 0px 20px 20px 20px; + height: calc(100vh - 280px); + overflow: auto; + + span { + letter-spacing: -0.02em; + } } .drawer-footer-btn-wrap, @@ -10887,7 +12038,7 @@ tbody { } .tj-user-table-wrapper { - height: calc(100vh - 270px); //52+64+40+32+20+62 + height: calc(100vh - 392px); //52+64+40+32+20+62 overflow-y: auto; background: var(--base); border-right: 1px solid var(--slate7); @@ -10898,9 +12049,9 @@ tbody { border-bottom-right-radius: 6px; - .user-detail{ + .user-detail { display: flex; - flex-direction: column; + flex-direction: column; } } @@ -11001,6 +12152,12 @@ tbody { } + input.dynamic-form-encrypted-field[type="password"] { + &:disabled { + padding-right: 35px !important; + } + } + } .tj-app-input-wrapper { @@ -11466,10 +12623,6 @@ tbody { background-color: $bg-dark-light !important; border: 1px solid #2B2F31; - .global-popover-text { - color: #fff !important; - } - .maximum-canvas-width-input-select { background-color: $bg-dark-light !important; border: 1px solid #324156; @@ -11567,6 +12720,10 @@ tbody { width: 880px; min-height: calc(100vh - 308px); + .manage-constant-wrapper-card { + max-height: calc(100vh - 260px); + } + .empty-state-org-constants { padding-top: 5rem; @@ -11576,6 +12733,14 @@ tbody { } .workspace-constant-card-body { + min-height: calc(100vh - 408px); + background: var(--base); + + } + + .constant-table-wrapper { + height: calc(100vh - 403px); + overflow-y: auto; height: 100%; } @@ -11621,7 +12786,7 @@ tbody { .app-list { overflow-y: auto; - height: calc(100vh - 23rem); + height: calc(100vh - 26rem); .skeleton-container { display: flex; @@ -11779,6 +12944,14 @@ tbody { background-color: var(--slate2) !important; } } + + input:disabled { + background-color: var(--slate3) !important; + } + + .react-select__control--is-disabled { + background-color: var(--slate3) !important; + } } .org-edit-icon { @@ -11795,6 +12968,8 @@ tbody { } } + + .marketplace-body { height: calc(100vh - 64px) !important; overflow-y: auto; @@ -11867,6 +13042,64 @@ tbody { } } + +.gitsync-modal-body { + align-items: center; + justify-content: center; + display: flex; + + .p { + width: auto; + } + + .loader { + border: 4px solid #f3f3f3; + /* Light gray border */ + border-top: 4px solid #3498db; + /* Blue border on top */ + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + /* Rotation animation */ + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } +} + +.box-container { + border: 1px solid #ccc; + background-color: #f0f0f0; + border-radius: 8px; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); + + .box-content { + padding: 10px; + /* Add padding for spacing inside the box */ + + p { + max-width: 100%; + margin: 0px; + word-wrap: break-word; + /* Ensure the paragraph wraps within the box */ + } + } + + +} + + + + + .theme-dark { .icon-widget-popover { .search-box-wrapper input { @@ -11940,10 +13173,141 @@ tbody { } } +.instance-all-users { + .users-table { + tbody { + tr>td>span { + max-width: 85px; + } + + tr>td>a { + max-width: 140px; + } + } + + thead { + tr { + gap: 0px; + } + + tr>th { + min-width: 203px; + } + } + + .workspace-folder-modal { + .tj-text-input.dark { + background: #202425; + border-color: var(--slate7) !important; + } + } + + .slug-ellipsis { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 150px; + } + + } +} + +.audit-log { + width: 880px; + margin: 0 auto; + + .card { + background: var(--base); + border: 1px solid var(--slate7) !important; + box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important; + + .card-header { + background: var(--slate3); + padding: 15px 16px; + gap: 12px; + height: 62px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + } + + .form-label { + font-size: 12px; + font-weight: 500px; + margin-bottom: 4px !important; + color: var(--slate12); + } + } +} + .break-all { word-break: break-all; } +.instance-settings-page { + width: 880px; + margin: 0 auto; + background: var(--base); + + .card { + background: var(--base); + border: 1px solid var(--slate7) !important; + box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important; + width: 880px; + + .card-header { + padding: 24px 24px; + gap: 12px; + height: 72px; + border-top-left-radius: 6px; + border-top-right-radius: 6px; + + .title-banner-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + width: 878px; + } + + } + + .form-label { + font-size: 12px; + font-weight: 500px; + margin-bottom: 4px !important; + color: var(--slate12); + } + + .card-footer { + display: flex; + justify-content: flex-end; + align-items: center; + padding: 24px 32px; + gap: 8px; + border-top: 1px solid var(--slate5) !important; + background: var(--base); + margin-top: 0px !important; + align-Self: 'stretch'; + height: 88px; + } + + .card-body { + height: 467px; + padding: 24px; + + .form-group { + .tj-app-input { + .form-control { + &:disabled { + background: var(--slate3) !important; + } + } + } + } + } + } +} + + .workspace-folder-modal { .tj-text-input.dark { background: #202425; @@ -12040,6 +13404,57 @@ tbody { } } +.audit-log { + background-color: var(--slate2); + width: unset; + + .tj-ms { + width: unset; + } + + .filter-by-section { + height: 90px; + } + + .select-search__select { + .select-search__options { + margin-left: -24px; + margin-bottom: 0px; + + .select-search__row { + button { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap; + border-radius: 0; + } + + :hover { + background-color: var(--slate3) !important; + } + } + } + } + + .select-search-dark__select { + padding: 0px; + border: none; + + .select-search-dark__options { + margin-bottom: 0px; + + .select-search-dark__option, + .select-search-dark__not-found { + background-color: var(--base); + color: var(--slate12); + border: 1px solid var(--slate5); + box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); + margin: 0 auto; + } + } + } +} + .theme-dark .card-container { background-color: #121212 !important } @@ -12078,6 +13493,19 @@ tbody { } } +.progress-bar { + width: 100%; + height: 6px; + background-color: var(--amber4); + border-radius: 10px; + overflow: hidden; +} + +.progress { + height: 100%; + transition: width 0.5s ease-in-out; +} + .app-slug-container, .workspace-folder-modal { .tj-app-input { @@ -12166,6 +13594,27 @@ tbody { } } +.custom-css-input-container span.cm-error { + background-color: transparent; + text-decoration: underline; + text-decoration-color: red; + text-decoration-style: dashed; +} + +.custom-styles-wrapper { + height: calc(100vh - 156px); + overflow: auto; + + .card-title { + padding-left: 30px; + } +} + +.org-settings-info { + background-color: var(--slate2); + border: 1px solid var(--slate3); +} + .badge-warning { background-color: var(--amber7) !important; } @@ -12207,6 +13656,31 @@ tbody { display: none; } +.ldap-login-page { + .common-auth-signup-container-wrapper { + margin-top: 150px; + } + + .ldap-login-header { + margin-bottom: 10px; + + h2 { + color: #111827; + font-size: 44px; + font-weight: 400; + } + } + + .signup-password-hide-img { + top: 24%; + } + + .ldap-form { + display: flex; + flex-direction: column; + align-items: center; + } +} #tooltip-for-org-constant-cell, #tooltip-for-org-input-disabled { @@ -12407,7 +13881,7 @@ tbody { .runjs-parameter-badge { max-width: 104px; - height: 24px !important; + height: 28px !important; padding: 2px 6px !important; } @@ -12427,6 +13901,10 @@ tbody { background-color: #F1F3F5; color: #C1C8CD; } + + .nav-item { + background-color: transparent !important; + } } .modal-divider { @@ -12505,13 +13983,18 @@ tbody { width: auto !important; padding: 18px; } - } .share-disabled { opacity: 0.4; } +.license-tooltip { + .nav-item { + line-height: 0px; + } +} + // Editor revamp styles .main-wrapper { .editor { @@ -12523,6 +14006,12 @@ tbody { } } +.custom-gap-2 { + gap: 2px +} + +// ToolJet Database buttons + .component-image-wrapper { background-color: var(--slate3) !important; border-radius: 6px; @@ -12685,6 +14174,12 @@ tbody { align-items: center; } +.copilot-codehinter-wrap { + .CodeMirror.cm-s-monokai.CodeMirror-wrap { + border-radius: 0px; + } +} + .avatar-list-stacked { display: flex; } @@ -12763,6 +14258,8 @@ tbody { } } + + .navbar-seperator { border: 1px solid var(--slate5, #2B2F31); background: var(--slate1, #151718); @@ -12774,15 +14271,13 @@ tbody { .CodeMirror { background: var(--base); - font-size: 12px; } .color-picker-input { - position: relative; + border: solid 1px #333c48; height: 36px; background-color: var(--slate1); border: 1px solid var(--slate7); - border-radius: 6px; &:hover { background-color: var(--slate4); @@ -12792,7 +14287,6 @@ tbody { } #popover-basic-2 { - .sketch-picker { left: 7px; width: 170px !important; @@ -12809,6 +14303,10 @@ tbody { color: var(--slate11) !important; } +.custom-gap-7 { + gap: 7px +} + .custom-gap-6 { gap: 6px } @@ -12817,11 +14315,335 @@ tbody { gap: 2px } +.custom-gap-4 { + gap: 4px; +} + +.text-black-000 { + color: var(--text-black-000) !important; +} + +.custom-gap-12 { + gap: 12px +} + +#inspector-tabpane-properties { + .accordion { + .accordion-item:last-child { + border-bottom: none !important; + } + } +} + +.share-disabled { + opacity: 0.4; +} + +// Editor revamp styles +.main-wrapper { + .editor { + .header>.navbar { + background-color: var(--base) !important; + border-bottom: 1px solid var(--slate5); + z-index: 10; + } + } +} + +.custom-gap-2 { + gap: 2px +} + // ToolJet Database buttons -.ghost-black-operation { - border: 1px solid transparent !important; - padding: 4px 10px; +.component-image-wrapper { + background-color: var(--slate3) !important; + border-radius: 6px; +} + +.components-container { + margin-left: 16px; + margin-right: 16px; +} + +.draggable-box-wrapper { + height: 86px; + width: 72px; + margin-bottom: 4px; +} + +.component-card-group-wrapper { + display: flex; + flex-wrap: wrap; + column-gap: 22px; +} + +.component-card-group-container { + display: flex; + row-gap: 12px; + flex-direction: column; + padding-bottom: 12px; + padding-top: 12px; +} + +.widgets-manager-header { + color: var(--slate12); + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + /* 142.857% */ + margin-top: 16px; + margin-bottom: 12px; +} + +.components-container { + .tj-input { + margin-bottom: 16px; + } +} + +.tj-widgets-search-input { + width: 266px; + height: 32px; + border-radius: 6px; + background-color: var(--base) !important; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; +} + +.release-button { + color: var(--indigo-01, #FDFDFE); + font-family: IBM Plex Sans; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 20px; + /* 166.667% */ + display: flex; + padding: 4px 12px; + align-items: center; + gap: 8px; + flex: 1 0 0; +} + +.editor-header-icon { + border-radius: 6px; + border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00)); + background: var(--indigo3); + display: flex; + padding: 7px; + justify-content: center; + align-items: center; + gap: 8px; + height: 28px; + width: 28px; +} + +.tj-header-avatar { + display: flex; + font-weight: 500; + width: 27px; + height: 26px; + padding: 4px 6px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + margin-bottom: 0px !important; + border-radius: 100% !important; + margin-left: -8px; + background-color: var(--slate5) !important; + color: var(--slate10) !important +} + +.undo-redo-container { + position: absolute; + top: 10px; + display: flex; + right: 222px; + justify-content: center; + align-items: center; + height: 28px; + gap: 2px; + + div { + display: flex; + justify-content: center; + align-items: center; + height: 28px; + width: 28px; + border-radius: 6px; + } +} + +.sidebar-panel-header { + color: var(--slate12); + padding-left: 4px; +} + +.modal-content { + background: var(--base); + color: var(--slate12); +} + +.main-editor-canvas { + background-color: var(--base); +} + +.event-manager-popover { + border: none; + /* Shadow/03 */ + box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08); + + .popover-body { + background-color: var(--base); + color: var(--slate12); + border: 1px solid var(--slate3, #F1F3F5); + border-radius: 6px; + } + +} + +.copilot-toggle { + font-family: IBM Plex Sans; + font-size: 12px; + font-style: normal; + font-weight: 500; + background-color: transparent !important; + display: flex; + align-items: center; +} + +.copilot-codehinter-wrap { + .CodeMirror.cm-s-monokai.CodeMirror-wrap { + border-radius: 0px; + } +} + +.avatar-list-stacked { + display: flex; +} + +.avatar-list-stacked .avatar { + margin-right: 0px !important; +} + +.navbar-right-section { + border-left: 1px solid var(--slate5); +} + +.modal-header { + background-color: var(--base); + border-bottom: 1px solid var(--slate5); +} + +.sidebar-debugger { + .nav-item { + button:hover { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + } + } +} + +.tj-app-version-text { + color: var(--pink9); +} + +.left-sidebar-comments { + position: absolute; + left: 0; + bottom: 48px; +} + +.popover-body { + background-color: var(--base); + color: var(--slate12); + border-radius: 6px; +} + +.popover { + border: none; + border-radius: 6px; + border: 1px solid var(--slate3, #F1F3F5); + background: var(--slate1, #FBFCFD); + box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10); +} + +.canvas-codehinter-container { + .sketch-picker { + left: 70px !important; + top: 207px; + } +} + +.debugger-card-body { + margin-top: 8px; + margin-bottom: 16px; + padding: 0px 16px; +} + +.left-sidebar-header-btn { + background-color: var(--base) !important; + width: 28px; + height: 28px; + padding: 7px !important; + + &:focus-visible { + border: none !important; + outline: none !important; + box-shadow: none !important; + } +} + +.navbar-seperator { + border: 1px solid var(--slate5, #2B2F31); + background: var(--slate1, #151718); + width: 1px; + height: 19px; + margin-left: 8px; + margin-right: 8px; +} + +.CodeMirror { + background: var(--base); +} + +.color-picker-input { + border: solid 1px #333c48; + height: 36px; + background-color: var(--slate1); + border: 1px solid var(--slate7); + + &:hover { + background-color: var(--slate4); + border: 1px solid var(--slate8); + + } +} + +#popover-basic-2 { + .sketch-picker { + left: 7px; + width: 170px !important; + } +} + +.custom-gap-8 { + gap: 8px; +} + +.color-slate-11 { + color: var(--slate11) !important; +} + +.custom-gap-6 { + gap: 6px } .custom-gap-2 { @@ -12870,6 +14692,547 @@ tbody { } } +.share-disabled { + opacity: 0.4; +} + +.bold-text { + font-weight: 500; +} + +// Editor revamp styles +.main-wrapper { + .editor { + .header>.navbar { + background-color: var(--base) !important; + border-bottom: 1px solid var(--slate5); + } + } +} + +.custom-gap-2 { + gap: 2px +} + +// ToolJet Database buttons + +.component-image-wrapper { + background-color: var(--slate3) !important; + border-radius: 6px; +} + +.components-container { + margin-left: 16px; + margin-right: 16px; +} + +.draggable-box-wrapper { + height: 86px; + width: 72px; + margin-bottom: 4px; +} + +.component-card-group-wrapper { + display: flex; + flex-wrap: wrap; + column-gap: 22px; +} + +.component-card-group-container { + display: flex; + row-gap: 12px; + flex-direction: column; + padding-bottom: 12px; + padding-top: 12px; +} + +.widgets-manager-header { + color: var(--slate12); + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 20px; + /* 142.857% */ + margin-top: 16px; + margin-bottom: 12px; +} + +.components-container { + .tj-input { + margin-bottom: 16px; + } +} + +.tj-widgets-search-input { + width: 266px; + height: 32px; + border-radius: 6px; + background-color: var(--base) !important; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; +} + +.release-button { + color: var(--indigo-01, #FDFDFE); + font-family: IBM Plex Sans; + font-size: 12px; + font-style: normal; + font-weight: 600; + line-height: 20px; + /* 166.667% */ + display: flex; + padding: 4px 12px; + align-items: center; + gap: 8px; + flex: 1 0 0; +} + +.editor-header-icon { + border-radius: 6px; + border: 1px solid var(--bases-transparent, rgba(255, 255, 255, 0.00)); + background: var(--indigo3); + display: flex; + padding: 7px; + justify-content: center; + align-items: center; + gap: 8px; + height: 28px; + width: 28px; +} + +.tj-header-avatar { + display: flex; + font-weight: 500; + width: 27px; + height: 26px; + padding: 4px 6px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 10px; + flex-shrink: 0; + margin-bottom: 0px !important; + border-radius: 100% !important; + margin-left: -8px; + background-color: var(--slate5) !important; + color: var(--slate10) !important +} + +.undo-redo-container { + position: absolute; + top: 10px; + display: flex; + right: 222px; + justify-content: center; + align-items: center; + height: 28px; + gap: 2px; + + div { + display: flex; + justify-content: center; + align-items: center; + height: 28px; + width: 28px; + border-radius: 6px; + } +} + +.sidebar-panel-header { + color: var(--slate12); + padding-left: 4px; +} + +.modal-content { + background: var(--base); + color: var(--slate12); +} + +.main-editor-canvas { + background-color: var(--base); +} + +.event-manager-popover { + border: none; + /* Shadow/03 */ + box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08); + + .popover-body { + background-color: var(--base); + color: var(--slate12); + border: 1px solid var(--slate3, #F1F3F5); + border-radius: 6px; + } + +} + +.copilot-toggle { + font-family: IBM Plex Sans; + font-size: 12px; + font-style: normal; + font-weight: 500; + background-color: transparent !important; + display: flex; + align-items: center; +} + +.copilot-codehinter-wrap { + .CodeMirror.cm-s-monokai.CodeMirror-wrap { + border-radius: 0px; + } +} + +.avatar-list-stacked { + display: flex; +} + +.avatar-list-stacked .avatar { + margin-right: 0px !important; +} + +.navbar-right-section { + border-left: 1px solid var(--slate5); +} + +.modal-header { + background-color: var(--base); + border-bottom: 1px solid var(--slate5); +} + +.sidebar-debugger { + .nav-item { + button:hover { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + } + } +} + +.tj-app-version-text { + color: var(--pink9); +} + +.left-sidebar-comments { + position: absolute; + left: 0; + bottom: 48px; +} + +.popover-body { + background-color: var(--base); + color: var(--slate12); + border-radius: 6px; +} + +.popover { + border: none; + border-radius: 6px; + border: 1px solid var(--slate3, #F1F3F5); + background: var(--slate1, #FBFCFD); + box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10); +} + +.canvas-codehinter-container { + .sketch-picker { + left: 70px !important; + top: 207px; + } +} + +.debugger-card-body { + margin-top: 8px; + margin-bottom: 16px; + padding: 0px 16px; +} + +.left-sidebar-header-btn { + background-color: var(--base) !important; + width: 28px; + height: 28px; + padding: 7px !important; + + &:focus-visible { + border: none !important; + outline: none !important; + box-shadow: none !important; + } +} + +.navbar-seperator { + border: 1px solid var(--slate5, #2B2F31); + background: var(--slate1, #151718); + width: 1px; + height: 19px; + margin-left: 8px; + margin-right: 8px; +} + +.CodeMirror { + background: var(--base); +} + +.color-picker-input { + border: solid 1px #333c48; + height: 36px; + background-color: var(--interactive-default); + border: 1px solid var(--slate7); + + &:hover { + background-color: var(--slate4); + border: 1px solid var(--slate8); + + } +} + +#popover-basic-2 { + .sketch-picker { + left: 7px; + width: 170px !important; + } +} + +.custom-gap-8 { + gap: 8px; +} + +.color-slate-11 { + color: var(--slate11) !important; +} + +.custom-gap-6 { + gap: 6px +} + +// ToolJet Database buttons + +.ghost-black-operation { + border: 1px solid transparent !important; + padding: 4px 10px; +} + +.custom-gap-2 { + gap: 2px +} + +.custom-gap-4 { + gap: 4px; +} + +.text-black-000 { + color: var(--text-black-000) !important; +} + +.custom-gap-12 { + gap: 12px +} + +.overflow-tooltip { + .tooltip-inner { + max-width: 100%; + } +} + +#inspector-tabpane-properties { + .accordion { + .accordion-item:last-child { + border-bottom: none !important; + } + } +} + + +.bold-text { + font-weight: 500; +} + +.saml-sso-conf { + .saml-footer { + display: block !important; + } + + .text-indigo-09 { + color: $color-light-indigo-09; + } + + .card-body { + padding-bottom: 0px !important; + } +} + +.add-datasource-btn-workflows { + width: 195px; + margin-top: 8px; + position: sticky; + bottom: 0; + font-size: 12px; +} + +.react-flow__panel { + bottom: 50px +} + +.add-datasource-btn-workflows { + width: 195px; + margin-top: 8px; + position: sticky; + bottom: 0; + font-size: 12px; +} + +.react-flow__panel { + bottom: 50px +} + +.connect-to-repository-container { + width: 70%; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin: auto; + + a { + text-decoration: none; + color: unset !important; + } + + .tj-btn-right-icon { + svg { + path { + fill: var(--indigo9); + } + } + } +} + +.git-sync-modal, +.modal-base { + + .create-commit-container, + .commit-info, + .pull-container { + .form-control { + font-weight: 400; + font-size: 12px; + line-height: 20px; + color: var(--slate12); + } + + .form-group { + .tj-input-error-state { + border: 1px solid var(--tomato9) !important; + } + + .tj-input-error { + color: var(--tomato10) !important; + } + } + + .info-text { + color: var(--slate10); + } + + .tj-input-error { + color: var(--tomato10); + } + + .form-control.disabled { + background-color: var(--slate3) !important; + color: var(--slate9) !important; + } + + .last-commit-info { + background: var(--slate3); + + .message-info { + display: flex; + justify-content: space-between; + } + + .author-info { + font-size: 10px; + color: var(--slate11); + } + } + + .check-for-updates { + display: flex; + align-items: center; + color: var(--indigo9); + + svg { + path { + fill: var(--indigo9); + } + + rect { + fill: none; + } + } + + .loader-container { + height: unset !important; + + .primary-spin-loader { + width: 18px; + height: 18px; + margin-right: 5px; + } + } + } + } + + + + .modal-footer { + border-top: 1px solid var(--slate5); + padding: 1rem; + + .tj-btn-left-icon { + svg { + width: 20px; + height: 20px; + + path { + fill: var(--indigo1); + } + } + } + + .tj-large-btn { + font-weight: 500; + font-size: 14px; + } + } + + .modal-body { + .loader-container { + display: flex; + justify-content: center; + align-items: center; + height: 180px; + } + } + + .modal-base { + .tj-text-xxsm { + color: var(--slate11); + } + } + + .modal-header { + border-bottom: 1px solid var(--slate5) !important; + + .modal-title { + color: var(--slate12); + } + + } +} + .custom-gap-7 { gap: 7px } @@ -12936,6 +15299,121 @@ tbody { .group-chip { max-width: unset !important; + min-height: 28px !important; + } +} + +.groups-hover { + &:hover { + background: var(--slate3); + cursor: pointer; + } +} + +.user-actions-menu-container { + border: 1px solid var(--slate8); + border-radius: 6px; + + &:hover { + background: var(--slate4); + } + + .actions-menu-icon { + fill: var(--slate8); + width: 20px !important; + height: 20px !important; + cursor: pointer; + + path { + fill: var(--slate12) !important; + } + } +} + +.primary-spin-loader { + width: 43px; + height: 43px; + border: 3px solid var(--indigo6); + border-bottom-color: var(--indigo9); + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.commit-changes { + display: flex; + gap: 6px; +} + +.disabled-action-tooltip { + opacity: 0.4; +} + +.overflow-tooltip { + .tooltip-inner { + max-width: 100%; + } +} + +.card-table { + overflow: visible; +} + +.groups-name-cell { + transition: 0.3s all; + border-radius: 6px; + position: relative !important; + overflow: visible !important; + + .groups-name-container { + display: flex; + column-gap: 8px; + } + + .group-chip { + padding: 5px 8px; + border-radius: 6px; + background-color: var(--slate3); + color: var(--slate11); + } + + .all-groups-list { + position: absolute; + width: 100%; + top: 41px; + display: flex; + flex-direction: column; + background: var(--slate1); + align-items: flex-start; + border-radius: 6px; + border: 1px solid var(--slate1); + box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08); + padding: 9px 10px; + gap: 15px; + cursor: default; + max-height: 240px; + overflow: auto; + left: 0px; + z-index: 1; + } +} + +.groups-name-cell[data-active="true"] { + background: var(--gray5) !important; + + .groups-name-container { + padding-left: 6px; } } @@ -13022,16 +15500,62 @@ tbody { } .blank-page-wrapper-mobile { - display: none; + display: none !important; @media only screen and (max-width: 768px) { - transform: translateY(80%); - display: flex; + transform: translateY(50%); + display: flex !important; align-items: center; justify-content: center; } } +.reset-password-info-banner { + width: inherit; + background-color: #F8FAFF; + border-color: #D9E2FC; + padding-top: 4px !important; + padding-bottom: 4px !important; + padding-left: 12px !important; + padding-right: 12px !important; +} + +.tj-text-input-wrapper { + .signup-password-wrapper { + .tj-text-input { + width: 290px !important; + background: var(--slate3); + color: var(--slate9); + height: auto !important; + margin-bottom: 5px; + border-color: var(--slate7); + } + } +} + +.tj-text-input-icon-wrapper { + .signup-password-wrapper { + .tj-text-input { + width: 320px !important; + background: #F1F3F5; + color: var(--slate9); + height: 38px !important; + margin-bottom: 10px; + border-color: var(--slate7) !important; + } + + .icon-wrapper { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + align-items: center; + gap: 5px; + /* space between icons */ + } + } +} + .modal-custom-height { height: 700px !important; /* Set the desired width */ @@ -13133,13 +15657,13 @@ tbody { .rest-api-options-codehinter { .cm-content>.cm-line { - max-width: 357px !important; + // max-width: 357px !important; } } .rest-api-codehinter-key-field { .cm-content>.cm-line { - max-width: 184px !important; + // max-width: 184px !important; } } @@ -13165,6 +15689,17 @@ tbody { opacity: 1; } +.add-new-group-modal { + .modal-title { + display: flex; + align-items: center; + + .paid-feature-banner { + margin-left: 8px; + } + } +} + .action-description-highlighter { color: var(--indigo9) !important; } @@ -13206,6 +15741,46 @@ tbody { } } +#popover-user-menu { + box-shadow: 0px 2px 4px -2px var(--indigo1), 0px 4px 8px -2px var(--indigo1); +} + +.rest-api-url-codehinter { + .cm-content>.cm-line { + max-width: 505px !important; + } +} + +.rest-api-options-codehinter { + .cm-content>.cm-line { + // max-width: 357px !important; + } +} + +.rest-api-codehinter-key-field { + .cm-content>.cm-line { + // max-width: 184px !important; + } +} + +.rest-api-codehinter-key-field, +.rest-api-url-codehinter, +.rest-api-options-codehinter { + .cm-content>.cm-line { + white-space: pre-wrap; + word-wrap: break-word; + } +} + +.fx-button-container { + opacity: 0; + transition: opacity 0.3s ease; +} + +.wrapper-div-code-editor:hover .fx-button-container { + opacity: 1; +} + .canvas-container { scrollbar-color: transparent; scrollbar-width: thin; @@ -13297,6 +15872,7 @@ tbody { } } } + .component-spinner { animation: l13 1s infinite linear; position: absolute; @@ -13329,13 +15905,13 @@ tbody { @extend .widget-version-identifier } -.tjdb-display-time-pill{ +.tjdb-display-time-pill { height: 12px; gap: 10px; border-radius: 100px 100px 100px 100px; - padding: 8px 8px ; + padding: 8px 8px; background: var(--Slate-07, #D7DBDF); - color: var(--Slate-11, #687076); + color: var(--Slate-11, #687076); display: flex; justify-content: center; align-items: center; @@ -13371,6 +15947,10 @@ div.ds-svg-container svg { padding: 2px; } +.custom-textarea-height { + height: 300px; + min-height: 300px; +} .dropdown-multiselect-widget-custom-menu-list { @@ -13389,6 +15969,7 @@ div.ds-svg-container svg { border-radius: 8px; } } + .form-check-input:disabled { background-color: var(--surfaces-surface-03) !important; } @@ -13426,18 +16007,89 @@ div.ds-svg-container svg { margin-bottom: 0px !important; } -.tabs-component{ - .tab-pane{ +.tabs-component { + .tab-pane { top: initial !important; } } -.user-not-found-svg{ - display: flex; - align-items: center; - justify-content: center; - background: var(--slate3); - width: 36px; - height: 36px; - padding: 4px; + +fieldset:disabled { + .json-form-wrapper-disabled { + opacity: 0.5; + pointer-events: none; + filter: grayscale(100%); + } } + +.debugger-card-body { + .json-tree-container { + margin-bottom: 10px; + } +} + +.pdf-retry-button { + background-color: var(--primary-brand); + color: var(--text-on-solid); + width: 100px; + border-radius: 6px; + height: 28px; + --tblr-btn-color-darker: #000000; + --tblr-btn-color-clicked: #000000; + --loader-color: #ffffff; + border-color: rgb(67, 104, 227); + padding: 0px 12px; + justify-content: center; + align-items: center; + flex-direction: row-reverse; + justify-content: center; + gap: 6px; + + >div { + overflow: hidden; + + >span { + max-width: 100%; + min-width: 0px; + + >p { + font-weight: 500; + margin: 0px; + padding: 0px; + color: var(--text-on-solid); + } + } + } + + + + + .user-not-found-svg { + display: flex; + align-items: center; + justify-content: center; + background: var(--slate3); + width: 36px; + height: 36px; + padding: 4px; + } +} + +.add-params-btn { + border: 1px solid var(--border-default, #CCD1D5) !important; + border-radius: 6px; + box-shadow: 0px 1px 0px 0px #0000001A; + padding-left: 10px; + padding-right: 10px; + height: 28px; + + &:hover { + background-color: var(--slate4) !important; + } + + &:active { + background-color: var(--slate5) !important; + } + + +} \ No newline at end of file diff --git a/frontend/src/_ui/Accordion/AccordionItem.js b/frontend/src/_ui/Accordion/AccordionItem.js index 275bed5e6c..22fe54512d 100644 --- a/frontend/src/_ui/Accordion/AccordionItem.js +++ b/frontend/src/_ui/Accordion/AccordionItem.js @@ -31,17 +31,18 @@ const AccordionItem = ({ open = true, index, title, children }) => { } return (
-

setShow(!show)} className="accordion-header" id={`heading-${index}`}> - + +

{!isLoading ? ( @@ -59,13 +66,17 @@ function FolderList({ 'tj-list-item-disabled': disabled, 'tj-list-item-option-opened': showGroupOptions, })} - style={backgroundColor && { backgroundColor }} + style={{ + ...(backgroundColor && { backgroundColor }), + ...{ ...computedStyles.pill, ...computedStyles.text }, + }} onClick={isHoveredInside ? menuToggle : onClick} data-cy={`${dataCy}-list-item`} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} data-tooltip-content={toolTipText} data-tooltip-id="button-content" + data-tooltip-hidden={!toolTipDisabled} > {LeftIcon && (
@@ -73,10 +84,24 @@ function FolderList({
)} + {CustomIcon && ( +
+ +
+ )} + {children} {RightIcon &&
{RightIcon && }
} - {overLayComponent && (isHovered || showGroupOptions) && ( + {overLayComponent && ((!disableHoverOption && isHovered) || showGroupOptions) && ( <>
)} + + ); } diff --git a/frontend/src/_ui/Icon/solidIcons/Reset.jsx b/frontend/src/_ui/Icon/solidIcons/Reset.jsx new file mode 100644 index 0000000000..74dceefd11 --- /dev/null +++ b/frontend/src/_ui/Icon/solidIcons/Reset.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +const Reset = ({ fill = '#6A727C', width = '10', className = '', viewBox = '0 0 10 10' }) => ( + + + +); + +export default Reset; diff --git a/frontend/src/_ui/Icon/solidIcons/index.js b/frontend/src/_ui/Icon/solidIcons/index.js index 7e6874ca09..02ce6bc09a 100644 --- a/frontend/src/_ui/Icon/solidIcons/index.js +++ b/frontend/src/_ui/Icon/solidIcons/index.js @@ -173,6 +173,7 @@ import Search01 from './Search01.jsx'; import ShiftButtonIcon from './ShiftButtonIcon.jsx'; import Unpin01 from './Unpin01.jsx'; import WarningUserNotFound from './WarningUserNotFound.jsx'; +import Reset from './Reset.jsx'; const Icon = (props) => { switch (props.name) { @@ -394,6 +395,8 @@ const Icon = (props) => { return ; case 'row': return ; + case 'reset': + return ; case 'sadrectangle': return ; case 'search': diff --git a/frontend/src/_ui/Sort/QueryEditor.jsx b/frontend/src/_ui/Sort/QueryEditor.jsx new file mode 100644 index 0000000000..65ed441ce9 --- /dev/null +++ b/frontend/src/_ui/Sort/QueryEditor.jsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { ButtonSolid } from '@/_ui/AppButton/AppButton'; +import AddRectangle from '@/_ui/Icon/bulkIcons/AddRectangle'; +import CodeHinter from '@/Editor/CodeEditor'; +import InfoIcon from '@assets/images/icons/info.svg'; +import Trash from '@/_ui/Icon/solidIcons/Trash'; +import Select from '@/_ui/Select'; +import Input from '@/_ui/Input'; +import '@/_ui/Sort/sortStyles.scss'; + +export default ({ options, addNewKeyValuePair, removeKeyValuePair, keyValuePairValueChanged, buttonText }) => { + const darkMode = localStorage.getItem('darkMode') === 'true'; + const sortOptions = [ + { value: 'asc', label: 'Ascending' }, + { value: 'desc', label: 'Descending' }, + ]; + return ( +
+ {options.length === 0 && ( +
+ + There are no key value pairs added +
+ )} + {options.map((option, index) => { + return ( +
+
+
+ keyValuePairValueChanged(e.target.value, 0, index)} + /> +
+
+ keyValuePairValueChanged(e.target.value, 0, index)} + /> +