@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/search-statement/SearchStatementDialogContent.tsx

@@ -0,0 +1,398 @@
+import React, { useCallback, useEffect } from 'react';
+import './search-statement-dialog.css';
+import { Box, Slide, Tab, Tabs } from '@mui/material';
+import { IDialogProps } from '../../../lib/dialog/Dialog';
+import { EditorService } from '../../../services/editor';
+import SearchStatementBuilder from './SearchStatementBuilder';
+import { ArrowRightAlt } from '@mui/icons-material';
+import {
+	ISearchStatementTab,
+	ITabManager,
+	SearchStatementBuilderTabType,
+} from './search-statement-context';
+import ValueDescriptor from '../value-descriptor/ValueDescriptor';
+import {
+	EntityId,
+	EntityType,
+	SearchState,
+} from '@elyx-code/project-logic-tree';
+import { useParams } from 'react-router-dom';
+import NestedSearchStatementBuilder from './NestedSearchStatementBuilder';
+import DialogLoader from '../../DialogLoader';
+import { initializeNewInputDeclarationForSearch } from '../../../services/editor/utils';
+import { popupNotification } from '../../../popup-notification';
+import EntityDialogHeader from '../../EntityDialogHeader';
+
+export interface ISearchStatementDialogContentProps extends IDialogProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+export function fromTabTypeToReadableName(type: SearchStatementBuilderTabType) {
+	switch (type) {
+		case SearchStatementBuilderTabType.MainSearchStatement:
+			return 'Main statement';
+		case SearchStatementBuilderTabType.NewInputTab:
+			return 'New input';
+		case SearchStatementBuilderTabType.InputDeclarationTab:
+			return 'Edit input';
+		case SearchStatementBuilderTabType.NestedQuery:
+			return 'Nested search';
+		default:
+			return '';
+	}
+}
+
+const SearchStatementSubTabContent: React.FC<{
+	tab: ISearchStatementTab;
+	project: EditorService;
+	entity: SearchState;
+	tabManager: ITabManager;
+}> = (props) => {
+	if (props.tab.entity === SearchStatementBuilderTabType.NewInputTab) {
+		const { declaration: newInput } = initializeNewInputDeclarationForSearch(
+			props.project,
+			props.entity
+		);
+
+		return (
+			<span
+				style={{
+					paddingTop: 20,
+					maxHeight: '100%',
+					maxWidth: '100%',
+					flexGrow: 1,
+					height: '100%',
+				}}
+			>
+				<ValueDescriptor
+					project={props.project}
+					entity={newInput}
+					onClose={() => {
+						props.tabManager.popTab();
+					}}
+				/>
+			</span>
+		);
+	}
+
+	if (props.tab.entity === SearchStatementBuilderTabType.InputDeclarationTab) {
+		return (
+			<span
+				style={{
+					paddingTop: 20,
+					maxHeight: '100%',
+					maxWidth: '100%',
+					flexGrow: 1,
+					height: '100%',
+				}}
+			>
+				<ValueDescriptor
+					project={props.project}
+					entity={props.tab.input}
+					onClose={() => {
+						props.tabManager.popTab();
+					}}
+				/>
+			</span>
+		);
+	}
+
+	if (props.tab.entity === SearchStatementBuilderTabType.NestedQuery) {
+		return (
+			<NestedSearchStatementBuilder
+				project={props.project}
+				ready
+				tabManager={props.tabManager}
+				parent={props.tab.parent}
+				query={props.tab.query}
+				onClose={() => {
+					props.tabManager.popTab();
+				}}
+			/>
+		);
+	}
+
+	return null;
+};
+
+const SearchStatementDialogContent: React.FC<
+	ISearchStatementDialogContentProps
+> = ({ onClose, project, ready }) => {
+	// Represents the index of the previous active tab and the current active tab
+	const [activeTabs, setActiveTabs] = React.useState<[null | number, number]>([
+		null,
+		0,
+	]);
+
+	const currentActiveTab = activeTabs[1];
+	const previousActiveTab = activeTabs[0];
+
+	const [tabs, setTabs] = React.useState<ISearchStatementTab[]>([]);
+
+	const tabManager: ITabManager = {
+		addTab: (tab: ISearchStatementTab, navigate?: boolean) => {
+			let newTabs = [];
+
+			if (tabs.length === 0) {
+				newTabs = [
+					{
+						entity: SearchStatementBuilderTabType.MainSearchStatement,
+					},
+					tab,
+				];
+
+				setTabs(newTabs);
+			} else {
+				newTabs = [...tabs, tab];
+				setTabs(newTabs);
+			}
+
+			if (navigate) {
+				const newActiveTabs: [null | number, number] = [
+					activeTabs[1],
+					newTabs.length - 1,
+				];
+				setActiveTabs(newActiveTabs);
+			}
+		},
+		popTab: () => {
+			if (activeTabs[1] === 1) {
+				const newActiveTabs: [null | number, number] = [null, 0];
+				setActiveTabs(newActiveTabs);
+				setTabs([]);
+				return;
+			}
+
+			if (tabs.length > 1) {
+				const newTabs = tabs.slice(0, tabs.length - 1);
+				setTabs(newTabs);
+				const newActiveTabs: [null | number, number] = [
+					activeTabs[1],
+					newTabs.length - 1,
+				];
+				setActiveTabs(newActiveTabs);
+			} else {
+				const newActiveTabs: [null | number, number] = [null, 0];
+				setTabs([]);
+				setActiveTabs(newActiveTabs);
+			}
+		},
+		navigateToTab: (tab: ISearchStatementTab) => {
+			const index = tabs.findIndex((t) => t.entity === tab.entity);
+
+			if (index === 0) {
+				const newActiveTabs: [null | number, number] = [null, index];
+				setActiveTabs(newActiveTabs);
+				// Hide all tabs
+				setTabs([]);
+			} else if (index > 0) {
+				const newActiveTabs: [null | number, number] = [activeTabs[1], index];
+				setActiveTabs(newActiveTabs);
+				const newTabs = tabs.slice(0, index + 1);
+				setTabs(newTabs);
+			}
+		},
+		navigateToTabIndex: (index: number) => {
+			if (index === 0) {
+				const newActiveTabs: [null | number, number] = [null, index];
+				setActiveTabs(newActiveTabs);
+				// Hide all tabs
+				setTabs([]);
+			} else if (index > 0 && index < tabs.length) {
+				const newActiveTabs: [null | number, number] = [activeTabs[1], index];
+				setActiveTabs(newActiveTabs);
+
+				const newTabs = tabs.slice(0, index + 1);
+				setTabs(newTabs);
+			}
+		},
+	};
+
+	const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+		tabManager.navigateToTabIndex(newValue);
+	};
+
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: SearchState | null =
+		(project?.logic?.get(entityId) as SearchState | null) || null;
+
+	const onEscapePressed = useCallback(
+		(e: KeyboardEvent) => {
+			// Navigate one tab back
+			// Or close the dialog if there is only one tab
+
+			if (tabs.length <= 1) {
+				onClose(e);
+				return;
+			}
+
+			tabManager.popTab();
+		},
+		[tabs, onClose]
+	);
+
+	useEffect(() => {
+		project?.on('escape-key-press', onEscapePressed);
+
+		return () => {
+			project?.off('escape-key-press', onEscapePressed);
+		};
+	}, [project, onEscapePressed]);
+
+	if (!project || !entity) {
+		if (!!project && project.hasLoadedLogic && !entity) {
+			popupNotification({
+				color: 'error',
+				text: 'This search node does not exist in the current version of the project',
+			});
+			onClose(null);
+			return;
+		}
+
+		return (
+			<DialogLoader
+				title='Search node'
+				subtitle='Search statement builder'
+				onClose={onClose}
+			/>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				overflow: 'hidden',
+				paddingBottom: 20,
+			}}
+		>
+			<EntityDialogHeader entity={entity} project={project} onClose={onClose} />
+
+			{!!tabs.length && (
+				<Box
+					style={{
+						marginLeft: 40,
+						marginRight: 40,
+						marginTop: 10,
+					}}
+				>
+					<Tabs
+						value={activeTabs[1]}
+						onChange={handleTabChange}
+						variant='scrollable'
+						scrollButtons
+						aria-label='visible arrows tabs example'
+						style={{
+							minHeight: 0,
+						}}
+					>
+						{tabs.map((tab, index) => (
+							<Tab
+								label={fromTabTypeToReadableName(tab.entity)}
+								style={{
+									paddingRight: 8,
+									paddingLeft: 8,
+									minHeight: 0,
+									maxHeight: 30,
+								}}
+								icon={index !== 0 ? <ArrowRightAlt /> : undefined}
+								iconPosition='start'
+							/>
+						))}
+					</Tabs>
+				</Box>
+			)}
+
+			<div
+				style={{
+					display: 'flex',
+					flexGrow: 1,
+					overflowY: 'scroll',
+				}}
+			>
+				{/* The top-level builder is intentionally always mounted (no
+					Slide unmount, no conditional render) and only hidden via
+					display:none when a nested tab is active. The top
+					SearchStatementBuilder owns its in-memory
+					`SearchStatementState` (created inside the provider's useMemo
+					from `entity.query`) and is the only place anchoring it.
+					Unmounting on tab switch would destroy that state — and any
+					unsaved edits, e.g. a JOIN whose freshly-created nested
+					subquery is still empty (which makes the generated SQL
+					unparseable, so `calculateAst` returns null and the change
+					is never persisted to entity.query) — get wiped on remount as
+					the provider re-hydrates from the stale stored SQL. The
+					nested Slides below keep their unmount behaviour because
+					their state objects are anchored externally via
+					`tabs[i].query`. */}
+				<div
+					style={{
+						width: '100%',
+						maxWidth: '100%',
+						minWidth: 0,
+						display: activeTabs[1] === 0 ? 'flex' : 'none',
+						flexDirection: 'column',
+					}}
+				>
+					<SearchStatementBuilder
+						project={project}
+						ready={ready}
+						tabManager={tabManager}
+						onClose={onClose}
+					/>
+				</div>
+
+				{tabs.map((tab, index) => (
+					<Slide
+						key={index}
+						direction={(() => {
+							if (previousActiveTab === null) {
+								return 'left';
+							}
+
+							if (previousActiveTab < currentActiveTab) {
+								return 'left';
+							}
+
+							if (previousActiveTab > currentActiveTab) {
+								return 'right';
+							}
+
+							return 'left';
+						})()}
+						in={activeTabs[1] === index}
+						mountOnEnter
+						unmountOnExit
+						appear
+					>
+						{/* We need the 'span' for the react ref */}
+						<span
+							style={{
+								maxHeight: '100%',
+								maxWidth: '100%',
+								flexGrow: 1,
+								height: '100%',
+							}}
+						>
+							<SearchStatementSubTabContent
+								tab={tab}
+								project={project}
+								entity={entity}
+								tabManager={tabManager}
+							/>
+						</span>
+					</Slide>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default SearchStatementDialogContent;