@elyx-code/editor-ui 0.0.2

package/src/components/test-relational-database/query.ts

@@ -0,0 +1,74 @@
+export enum QueryWhereOperator {
+	EQ = 'eq',
+	NEQ = 'neq',
+	GT = 'gt',
+	GTE = 'gte',
+	LT = 'lt',
+	LTE = 'lte',
+	LIKE = 'like',
+	ILIKE = 'ilike',
+}
+
+export type QueryValue = string | number | boolean | null;
+
+export interface IWhereRawClause {
+	name: string;
+	operator?: QueryWhereOperator;
+	value: QueryValue;
+}
+
+export interface IWhereClause extends IWhereRawClause {
+	and?: IWhereClause[];
+	or?: IWhereClause[];
+}
+
+export interface ISelectQuery {
+	from: {
+		name: string;
+	};
+	items: {
+		name: string;
+	}[];
+	where?: IWhereClause[];
+	sorts?: {
+		name: string;
+		direction: 'asc' | 'desc';
+	}[];
+	limit?: number;
+	offset?: number;
+}
+
+export interface IInsertQuery {
+	into: {
+		name: string;
+	};
+	items: {
+		name: string;
+		value: QueryValue;
+	}[];
+}
+
+export interface IUpdateQuery {
+	table: {
+		name: string;
+	};
+	set: {
+		name: string;
+		value: QueryValue;
+	}[];
+	where: IWhereClause[];
+}
+
+export interface IDeleteQuery {
+	from: {
+		name: string;
+	};
+	where: IWhereClause[];
+}
+
+export interface IQueryRequest {
+	select?: ISelectQuery;
+	insert?: IInsertQuery;
+	update?: IUpdateQuery;
+	delete?: IDeleteQuery;
+}

package/src/components/toolbar/ToolBar.tsx

@@ -0,0 +1,236 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import './toolbar.css';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import { useNavigate, useParams } from 'react-router-dom';
+import ResourcesIcon from '../../assets/resources.svg';
+import { onClickAway } from '../../utils/DOM';
+import CanvasSearch from '../canvas-search/CanvasSearch';
+import NotificationsPanel from '../notifications/NotificationsPanel';
+import NotificationsIconButton from '../notifications/NotificationsIconButton';
+import { EditorService } from '../../services/editor';
+import { IComponentLifecycleProps } from '../../utils/react';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+
+export interface IToolBarProps extends IComponentLifecycleProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+const ToolBar: React.FC<IToolBarProps> = (props) => {
+	const navigate = useNavigate();
+
+	const [searchIsOpen, setSearchIsOpen] = useState<boolean>(false);
+	const [notificationsIsOpen, setNotificationsIsOpen] =
+		useState<boolean>(false);
+	const { id: projectId } = useParams<{ id: string }>();
+
+	const onSearchClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+
+		props.project?.hideEntityCreationMenu();
+		const isOpen = searchIsOpen;
+
+		if (isOpen) {
+			setSearchIsOpen(false);
+			return;
+		}
+
+		const searchWindow = document.querySelector('.popup__search');
+
+		onClickAway(searchWindow, () => {
+			setSearchIsOpen(false);
+		});
+
+		setSearchIsOpen(true);
+
+		// If notifications are open, close them
+		if (notificationsIsOpen) {
+			setNotificationsIsOpen(false);
+		}
+	};
+
+	const onNotificationClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		props.project?.hideEntityCreationMenu();
+		const isOpen = notificationsIsOpen;
+
+		if (isOpen) {
+			setNotificationsIsOpen(false);
+			return;
+		}
+
+		const searchWindow = document.querySelector('.popup__notifications');
+
+		onClickAway(searchWindow, () => {
+			setNotificationsIsOpen(false);
+		});
+
+		setNotificationsIsOpen(true);
+
+		// If search are open, close them
+		if (searchIsOpen) {
+			setSearchIsOpen(false);
+		}
+	};
+
+	const onPublishClick = async () => {
+		props.project?.hideEntityCreationMenu?.();
+		await props.project?.test?.close();
+
+		navigate(`${props.project?.editorBasePath}/publication/preview`);
+	};
+
+	const handleKeyDown = useCallback(
+		(e: KeyboardEvent) => {
+			e.preventDefault();
+
+			if (!searchIsOpen) {
+				// @ts-ignore
+				onSearchClick(e);
+			}
+		},
+		[props.project, searchIsOpen]
+	);
+
+	const closeAllMenus = useCallback((e: KeyboardEvent) => {
+		setSearchIsOpen(false);
+		setNotificationsIsOpen(false);
+	}, []);
+
+	useEffect(() => {
+		props.project?.on('global-canvas-search', handleKeyDown);
+		props.project?.on('escape-key-press', closeAllMenus);
+
+		return () => {
+			props.project?.off('global-canvas-search', handleKeyDown);
+			props.project?.off('escape-key-press', closeAllMenus);
+		};
+	}, [handleKeyDown, closeAllMenus]);
+
+	let editorBasePath = props.project?.editorBasePath;
+
+	if (!editorBasePath) {
+		// The project hasn't finished loading yet, but the URL already encodes
+		// enough to derive the editor base path. Pattern:
+		//   /ws/{workspaceSlug}/editor/{projectId}/{branchIdentifier}/{projectVersion}/...
+		// Take everything up to and including {projectVersion} (the 6th segment).
+		const segments = window.location.pathname.split('/');
+		if (
+			segments[1] === 'ws' &&
+			segments[3] === 'editor' &&
+			segments.length >= 7
+		) {
+			editorBasePath = segments.slice(0, 7).join('/');
+		}
+	}
+
+	return (
+		<div className='toolbar' onMouseOver={(e) => e.stopPropagation()}>
+			<div className='toolbar__section'>
+				<button
+					className='toolbar__button toolbar__primary-button'
+					id='publish-project-toolbar-button'
+					onClick={onPublishClick}
+				>
+					<i className='fa-solid fa-flag-checkered' />
+					<p>Publish</p>
+				</button>
+				<Tooltip
+					anchorQuerySelector='#publish-project-toolbar-button'
+					placement='left'
+				>
+					{'Launch this project as an app to your users'}
+				</Tooltip>
+			</div>
+			<div className='toolbar__section'>
+				<button
+					className='toolbar__button'
+					id='search-toolbar-button'
+					onClick={onSearchClick}
+					disabled={!props.ready}
+				>
+					<i className='fa-solid fa-magnifying-glass' />
+					<p>Search</p>
+				</button>
+				<Tooltip anchorQuerySelector='#search-toolbar-button' placement='left'>
+					{!props.ready
+						? 'Wait for the canvas to load before searching'
+						: 'Search the canvas entities'}
+				</Tooltip>
+				{props.ready && (
+					<CanvasSearch isOpen={searchIsOpen} project={props.project} />
+				)}
+				<NotificationsIconButton onClick={onNotificationClick} />
+				<NotificationsPanel
+					project={props.project}
+					isOpen={notificationsIsOpen}
+				/>
+				<button
+					className='toolbar__button'
+					id='to-the-budget-button'
+					onClick={() => {
+						props.project?.hideEntityCreationMenu();
+						navigate(`${editorBasePath}/costs`);
+					}}
+				>
+					<i className='fa-solid fa-dollar-sign' />
+					<p>Costs</p>
+				</button>
+				<Tooltip anchorQuerySelector='#to-the-budget-button' placement='left'>
+					{'Manage and inspect the costs for this project'}
+				</Tooltip>
+				<button
+					className='toolbar__button'
+					id='to-resources-button'
+					onClick={() => {
+						props.project?.hideEntityCreationMenu();
+						navigate(
+							`${editorBasePath}/resources/${InfrastructureResourceType.RelationalDatabase}`
+						);
+					}}
+				>
+					<img src={ResourcesIcon} alt='Cloud resources' />
+					<p>Cloud</p>
+				</button>
+				<Tooltip anchorQuerySelector='#to-resources-button' placement='left'>
+					{
+						'Explore the cloud resources and data generated by your project when it is published'
+					}
+				</Tooltip>
+				<button
+					className='toolbar__button'
+					id='help-toolbar-button'
+					onClick={() => {
+						props.project?.hideEntityCreationMenu();
+						navigate(`${editorBasePath}/help`);
+					}}
+				>
+					<i className='fa-solid fa-question' />
+					<p>Help</p>
+				</button>
+				<Tooltip anchorQuerySelector='#help-toolbar-button' placement='left'>
+					{'Learn how to use the product and get help'}
+				</Tooltip>
+				<button
+					className='toolbar__button'
+					id='project-config-toolbar-button'
+					onClick={() => {
+						props.project?.hideEntityCreationMenu();
+						navigate(`${editorBasePath}/project-configuration`);
+					}}
+				>
+					<i className='fa-solid fa-gear' />
+					<p>Project</p>
+				</button>
+				<Tooltip
+					anchorQuerySelector='#project-config-toolbar-button'
+					placement='left'
+				>
+					{'Project settings'}
+				</Tooltip>
+			</div>
+		</div>
+	);
+};
+
+export default ToolBar;

package/src/components/toolbar/toolbar.css

@@ -0,0 +1,78 @@
+.toolbar {
+  position: fixed;
+  top: 50vh;
+  right: 65px;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  z-index: 1;
+}
+
+.toolbar__section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 0.5em;
+  overflow: hidden;
+  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
+}
+
+.toolbar__button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--color-main-grey);
+  background: white;
+  border: none;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+
+.toolbar__button p {
+  margin: 0;
+  padding: 4px 0 0 0;
+  font-size: 0.5em;
+}
+
+.toolbar__primary-button {
+  color: white;
+  background: #2bd650;
+}
+
+.toolbar__button:hover {
+  /* box-shadow: 0 0.5em 1.5em -0.5em #26262698; */
+  transform: scale(1.06);
+}
+
+.toolbar__button:active {
+  color: var(--color-main-primary);
+}
+
+.toolbar__button.toolbar__primary-button:active {
+  color: white;
+}
+
+.toolbar__button:disabled {
+  cursor: not-allowed;
+  color: var(--color-light-grey);
+}
+
+.toolbar__button:disabled:hover {
+  transform: none;
+}
+
+.toolbar__button:disabled:active {
+  color: var(--color-light-grey);
+}

package/src/components/transaction-history/TransactionHistoryDialog.tsx

@@ -0,0 +1,268 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { getAccessToken, getCurrentUserOrLogoutRedirect } from '../../auth';
+import Button from '../../lib/button/Button';
+import { formatCurrency } from '../../localization';
+import Chip from '../../lib/chip/Chip';
+import axios from 'axios';
+import { capitalizeFirstLetter } from '@elyx-code/project-logic-tree';
+import { envConfig } from '../../config';
+import { useWorkspaceStore } from '../../store/workspace';
+import { EditorService } from '../../services/editor';
+
+interface ITransactionHistoryDialogProps {
+	onClose: () => void;
+	project: EditorService
+}
+
+const TransactionHistoryDialog: React.FC<ITransactionHistoryDialogProps> = ({
+	onClose,
+	project,
+}) => {
+	const [transactions, setTransactions] = useState<any[]>([]);
+	const [user, setUser] = useState<any | null>(null);
+	const { id: projectId } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const getTransactions = async ({ page }: { page?: number } = { page: 1 }) => {
+		if (!projectId) return;
+
+		const previouslyFetchedTransactions = transactions;
+
+		const response = await axios.get(
+			`${envConfig.API_BASE_URL}/pricing-service/v1/transactions?projectId=${projectId}&limit=10${
+				previouslyFetchedTransactions.length
+					? '&lastTransactionId=' +
+						previouslyFetchedTransactions[
+							previouslyFetchedTransactions.length - 1
+						].id
+					: ''
+			}`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			},
+		);
+
+		return response.data.items;
+	};
+
+	const init = async () => {
+		const [fetchedTransactions, fetchedUser] = await Promise.all([
+			getTransactions(),
+			getCurrentUserOrLogoutRedirect(),
+		]);
+
+		setTransactions(fetchedTransactions);
+		setUser(fetchedUser);
+	};
+
+	useEffect(() => {
+		init();
+	}, []);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+				<button className='dialog_back_button' onClick={onClose}>
+					<i className='fa-solid fa-arrow-left' />
+				</button>
+				<h1 style={{ margin: '0px', fontWeight: 500, fontSize: '28px' }}>
+					Transaction history
+				</h1>
+			</div>
+			<a
+				style={{
+					display: 'flex',
+					gap: '6px',
+					marginLeft: '42px',
+					textDecoration: 'none',
+					alignItems: 'center',
+				}}
+				href=''
+				onClick={(event) => {
+					event.preventDefault();
+					navigate(
+						`${project?.editorBasePath}/costs/billing-history`,
+					);
+				}}
+			>
+				<i
+					className='fa-solid fa-money-check-dollar'
+					style={{ color: 'rgba(0,0,0,0.7)' }}
+				/>
+				<p style={{ margin: '0px', color: 'rgba(0,0,0,0.7)' }}>
+					Payment methods
+				</p>
+			</a>
+			<div style={{ flex: 1, margin: '0 42px', marginTop: '30px' }}>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						minHeight: '80%',
+						height: '100%',
+					}}
+				>
+					<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+						<h3
+							style={{
+								display: 'flex',
+								gap: '6px',
+								fontWeight: 'normal',
+								margin: '0px',
+							}}
+						>
+							Billing history
+						</h3>
+					</span>
+					<div
+						style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+					>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							{`List of past bills and transactions from the costs incured by this project.`}
+							<br />
+							<br />
+							{`Bills are sent on the first day of each month by email to: `}
+							<b>{user?.email}</b>
+						</p>
+					</div>
+					<ul
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: '8px',
+							marginTop: '20px',
+							paddingLeft: '0px',
+						}}
+					>
+						{transactions.map((transaction) => (
+							<li
+								style={{
+									display: 'flex',
+									gap: '10px',
+									alignItems: 'start',
+								}}
+								key={transaction.id}
+							>
+								<h4 style={{ margin: '0px', fontSize: '18px' }}>
+									{formatCurrency(
+										transaction.amount / 100,
+										transaction.currency,
+									)}
+								</h4>
+								<div
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: '4px',
+									}}
+								>
+									<div
+										style={{
+											display: 'flex',
+											gap: '8px',
+											alignItems: 'center',
+										}}
+									>
+										<i
+											className='fa-regular fa-credit-card'
+											style={{ color: 'rgba(0,0,0,0.54)', fontSize: '14px' }}
+										/>
+										<p
+											style={{
+												fontSize: '14px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px',
+											}}
+										>
+											{capitalizeFirstLetter(
+												transaction.payment_method_details.card.brand,
+											) + ' ending in '}
+										</p>
+										<p
+											style={{
+												fontSize: '14px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px',
+											}}
+										>
+											{'****' + transaction.payment_method_details.card.last4}
+										</p>
+										<Chip color='success'>{transaction.status}</Chip>
+										<a
+											href={transaction.receipt_url}
+											target='_blank'
+											style={{
+												textDecoration: 'none',
+												color: 'var(--color-main-grey)',
+											}}
+										>
+											<i className='fa-solid fa-receipt' />
+										</a>
+									</div>
+									<div
+										style={{
+											display: 'flex',
+											gap: '8px',
+											justifyContent: 'flex-start',
+											alignItems: 'center',
+										}}
+									>
+										<p
+											style={{
+												fontSize: '14px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px',
+											}}
+										>
+											{new Date(transaction.created * 1000).toLocaleString()}
+										</p>
+									</div>
+								</div>
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button
+					onClick={() =>
+						navigate(`${project?.editorBasePath}`)
+					}
+				>
+					Back
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default TransactionHistoryDialog;