slick-table 1.2.2 → 1.2.3

package/src/entities/drawer-run-query/lib/grouping/getGroupLabel.spec.ts

@@ -0,0 +1,46 @@
+import moment from "moment";
+
+import { getGroupLabel } from "./getGroupLabel";
+
+const toDateString = (date: Date): string => moment(date).format("YYYY-MM-DD");
+
+const daysAgo = (days: number): Date => moment().subtract(days, "day").toDate();
+
+describe("pages | chat-with-ai | lib | getGroupLabel", () => {
+	it('returns "Today" for the current date', () => {
+		expect(getGroupLabel(new Date())).toBe("Today");
+	});
+
+	it('returns "Yesterday" for the previous calendar day', () => {
+		expect(getGroupLabel(daysAgo(1))).toBe("Yesterday");
+	});
+
+	it("returns a relative label for dates within the relative limit", () => {
+		expect(getGroupLabel(daysAgo(2))).toBe("2 days");
+		expect(getGroupLabel(daysAgo(15))).toBe("15 days");
+	});
+
+	it('returns "30 days" on the last day of the relative limit', () => {
+		expect(getGroupLabel(daysAgo(30))).toBe("30 days");
+	});
+
+	it("returns the formatted date for dates beyond the relative limit", () => {
+		const lastMonth = daysAgo(31);
+		const lastYear = daysAgo(365);
+
+		expect(getGroupLabel(lastMonth)).toBe(toDateString(lastMonth));
+		expect(getGroupLabel(lastYear)).toBe(toDateString(lastYear));
+		expect(getGroupLabel(lastMonth)).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+	});
+
+	it("uses calendar days and ignores the time of day", () => {
+		const yesterdayEvening = daysAgo(1);
+		yesterdayEvening.setHours(23, 59, 59, 999);
+
+		const thirtyDaysAgoEvening = daysAgo(30);
+		thirtyDaysAgoEvening.setHours(23, 59, 59, 999);
+
+		expect(getGroupLabel(yesterdayEvening)).toBe("Yesterday");
+		expect(getGroupLabel(thirtyDaysAgoEvening)).toBe("30 days");
+	});
+});

package/src/entities/drawer-run-query/lib/grouping/getGroupLabel.ts

@@ -0,0 +1,26 @@
+import moment from "moment";
+
+import { EDateFormat } from "shared/model/enums";
+
+const RELATIVE_DAY_LIMIT = 30;
+
+/**
+ * Builds a human readable label for the day a query was run on.
+ * The label is relative ("Today", "Yesterday", "N days") within the limit
+ * and an absolute date after it. Days are calendar days, the time of day
+ * is ignored.
+ * */
+export const getGroupLabel = (date: Date): string => {
+	const value = moment(date);
+
+	if (value.isSame(moment(), "day")) return "Today";
+	if (value.isSame(moment().subtract(1, "day"), "day")) return "Yesterday";
+
+	const daysAgo = moment()
+		.startOf("day")
+		.diff(value.clone().startOf("day"), "days");
+
+	if (daysAgo <= RELATIVE_DAY_LIMIT) return `${daysAgo} days`;
+
+	return value.format(EDateFormat.db);
+};

package/src/entities/drawer-run-query/lib/grouping/groupQueriesByDate.spec.ts

@@ -0,0 +1,54 @@
+import moment from "moment";
+
+import { IRecentQuery } from "shared/model/types";
+
+import { groupQueriesByDate } from "./groupQueriesByDate";
+
+const toTime = (daysAgo: number, time = "12:00:00"): string =>
+	moment().subtract(daysAgo, "day").format(`YYYY-MM-DD ${time}`);
+
+const makeQuery = (query: string, time: string): IRecentQuery => ({
+	query,
+	time,
+});
+
+describe("pages | chat-with-ai | lib | groupConversationsByDate", () => {
+	it("groups conversations into today, yesterday, N days and dated buckets", () => {
+		const conversations = [
+			makeQuery("older", toTime(31)),
+			makeQuery("30d", toTime(30)),
+			makeQuery("2d", toTime(2)),
+			makeQuery("yesterday", toTime(1)),
+			makeQuery("today-late", toTime(0, "15:00:00")),
+			makeQuery("today-early", toTime(0, "09:00:00")),
+		];
+
+		const groups = groupQueriesByDate(conversations);
+
+		expect(groups.map((group) => group.label)).toEqual([
+			"Today",
+			"Yesterday",
+			"2 days",
+			"30 days",
+			toTime(31).slice(0, 10),
+		]);
+	});
+
+	it("sorts conversations within a group by time descending", () => {
+		const conversations = [
+			makeQuery("early", toTime(0, "09:00:00")),
+			makeQuery("late", toTime(0, "15:00:00")),
+		];
+
+		const groups = groupQueriesByDate(conversations);
+
+		expect(groups[0].queries.map(({ query }) => query)).toEqual([
+			"late",
+			"early",
+		]);
+	});
+
+	it("returns an empty array for empty input", () => {
+		expect(groupQueriesByDate([])).toEqual([]);
+	});
+});

package/src/entities/drawer-run-query/lib/grouping/groupQueriesByDate.ts

@@ -0,0 +1,37 @@
+import moment from "moment";
+
+import { dateFormats } from "shared/model/consts";
+import { EDateFormat } from "shared/model/enums";
+import { IRecentQuery } from "shared/model/types";
+
+import { IQueryGroup } from "../../model";
+import { getGroupLabel } from "./getGroupLabel";
+
+export const groupQueriesByDate = (
+	recentQueries: IRecentQuery[],
+): IQueryGroup[] => {
+	const sorted = [...recentQueries].sort(
+		(a, b) =>
+			moment(b.time, dateFormats).valueOf() -
+			moment(a.time, dateFormats).valueOf(),
+	);
+
+	const groups = new Map<string, IQueryGroup>();
+
+	for (const query of sorted) {
+		const date = moment(query.time, dateFormats).startOf("day");
+		const key = date.format(EDateFormat.db);
+
+		const group = groups.get(key);
+		if (group) {
+			group.queries.push(query);
+		} else {
+			groups.set(key, {
+				label: getGroupLabel(date.toDate()),
+				queries: [query],
+			});
+		}
+	}
+
+	return Array.from(groups.values());
+};

package/src/entities/drawer-run-query/lib/grouping/index.ts

@@ -0,0 +1 @@
+export { groupQueriesByDate } from "./groupQueriesByDate";

package/src/entities/{popup-query → drawer-run-query}/lib/hooks/index.ts

@@ -1 +1,2 @@
+export { useResizeCanvas } from "./useResizeCanvas";
 export { useSubscribeToEvent } from "./useSubscribeToEvent";

package/src/entities/drawer-run-query/lib/hooks/useResizeCanvas.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+import { TRANSITION_MS } from "../../model";
+import { tableQuery } from "../table";
+
+export function useResizeCanvas(isExpanded: boolean) {
+	useEffect(() => {
+		if (!isExpanded) return;
+		setTimeout(() => {
+			tableQuery.grid?.resizeCanvas();
+		}, TRANSITION_MS);
+	}, [isExpanded]);
+}

package/src/entities/{popup-query → drawer-run-query}/lib/hooks/useSubscribeToEvent.ts

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useEffect } from "react";
 
-import { eventQuery } from "shared/lib/slickgrid";
+import { eventRunQuery } from "shared/lib/slickgrid";
 
 export function useSubscribeToEvent(
 	setIsOpened: Dispatch<SetStateAction<boolean>>,
@@ -8,17 +8,13 @@ export function useSubscribeToEvent(
 ) {
 	useEffect(() => {
 		function callback() {
-			const { open, table } = eventQuery;
+			const { open, table } = eventRunQuery;
 			if (table?.id !== tableId) return;
-			if (open) {
-				const table = eventQuery.table;
-				const grid = table?.grid;
-			}
 			setIsOpened(open);
 		}
-		eventQuery.subscribe(callback);
+		eventRunQuery.subscribe(callback);
 		return () => {
-			eventQuery.unsubscribe(callback);
+			eventRunQuery.unsubscribe(callback);
 		};
 	}, [tableId]);
 }

package/src/entities/drawer-run-query/lib/index.ts

@@ -0,0 +1,3 @@
+export { groupQueriesByDate } from "./grouping";
+export { useResizeCanvas, useSubscribeToEvent } from "./hooks";
+export { tableQuery, getColumsHash } from "./table";

package/src/entities/drawer-run-query/lib/table/getColumsHash.ts

@@ -0,0 +1,18 @@
+import { eventRunQuery } from "shared/lib/slickgrid";
+import { IS_EDITED } from "shared/model/consts";
+import { IColumn } from "shared/model/types";
+
+export function getColumsHash(): Record<string, IColumn> {
+	const table = eventRunQuery.table;
+	if (!table) return {};
+	const grid = table.grid;
+	if (!grid) return {};
+	const columns: IColumn[] = grid.getColumns();
+	const result: Record<string, IColumn> = {};
+	for (const column of columns) {
+		if (column.id !== "_checkbox_selector" && column.id !== IS_EDITED) {
+			result[column.id] = column;
+		}
+	}
+	return result;
+}

package/src/entities/drawer-run-query/lib/table/index.ts

@@ -0,0 +1,2 @@
+export { tableQuery } from "./tableQuery";
+export { getColumsHash } from "./getColumsHash";

package/src/entities/{popup-query/model/consts/id.ts → drawer-run-query/model/consts/consts.ts}

@@ -1 +1,2 @@
-export const QUERY_LANGUAGE = "QUERY_LANGUAGE";
+export const TRANSITION_MS = 300;
+export const QUERY_LANGUAGE = "QUERY_LANGUAGE";

package/src/entities/drawer-run-query/model/consts/index.ts

@@ -0,0 +1 @@
+export { QUERY_LANGUAGE, TRANSITION_MS } from "./consts";

package/src/entities/drawer-run-query/model/index.ts

@@ -0,0 +1,2 @@
+export { QUERY_LANGUAGE, TRANSITION_MS } from "./consts";
+export type { IQueryGroup } from "./types";

package/src/entities/drawer-run-query/model/types/IQueryGroup.ts

@@ -0,0 +1,6 @@
+import { IRecentQuery } from "shared/model/types";
+
+export interface IQueryGroup {
+	label: string;
+	queries: IRecentQuery[];
+}

package/src/entities/drawer-run-query/model/types/index.ts

@@ -0,0 +1 @@
+export type { IQueryGroup } from "./IQueryGroup";

package/src/entities/{popup-query/ui/PopupQuery.style.ts → drawer-run-query/ui/DrawerRunQuery.style.ts}

@@ -2,6 +2,8 @@ import {
 	Box,
 	Button,
 	Drawer,
+	IconButton,
+	InputAdornment,
 	TextField,
 	Typography,
 	styled,
@@ -9,20 +11,31 @@ import {
 
 import { doNotForwardProps } from "shared/lib/dom";
 
-const StyledDrawer = styled(Drawer)({
+import { TRANSITION_MS } from "../model";
+
+const HEIGHT_EXPANDED = "90vh";
+const HEIGHT_COLLAPSED_EM = 11;
+
+const StyledDrawer = styled(Drawer, {
+	shouldForwardProp: doNotForwardProps(["isExpanded"]),
+})<{ isExpanded: boolean }>(({ isExpanded }) => ({
 	zIndex: 1300,
 	"& .MuiDrawer-paper": {
-		display: "flex",
-		flexDirection: "column",
+		borderTopLeftRadius: "10px",
+		borderTopRightRadius: "10px",
+		columnGap: "1em",
+		display: "grid",
+		gridTemplateColumns: "25% 1fr",
+		transition: `${TRANSITION_MS / 1000}s`,
+		height: isExpanded ? HEIGHT_EXPANDED : `${HEIGHT_COLLAPSED_EM}em`,
 		padding: "1em",
-		maxHeight: "90vh",
 	},
 	"& div.MuiBackdrop-root": {
 		opacity: "0 !important",
 	},
-});
+}));
 
-const Header = styled(Typography)({
+const Header = styled(Box)({
 	display: "flex",
 	justifyContent: "space-between",
 });
@@ -49,6 +62,23 @@ const StyledTextField = styled(TextField)({
 	},
 });
 
+const EndAdornment = styled(InputAdornment)({
+	alignSelf: "flex-start",
+	marginTop: "-2px",
+});
+
+const ClearButton = styled(IconButton)({
+	color: "#808080",
+	padding: "4px",
+	"& .sgi": {
+		display: "block",
+	},
+	"&:hover": {
+		backgroundColor: "#E8F4FE",
+		color: "#235B95",
+	},
+});
+
 const ContainerInput = styled(Box)({
 	display: "flex",
 	columnGap: "0.5em",
@@ -66,11 +96,13 @@ const ColumnName = styled("span")({
 });
 
 const ContainerTable = styled(Box, {
-	shouldForwardProp: doNotForwardProps(["isRightScreenVisible"]),
+	shouldForwardProp: doNotForwardProps(["isExpanded"]),
 })<{ isExpanded: boolean }>(({ isExpanded }) => ({
 	overflowY: "auto",
-	// transition: "0.3s",
-	height: isExpanded ? "90vh" : "0vh",
+	transition: `${TRANSITION_MS / 1000}s`,
+	height: isExpanded
+		? `calc(${HEIGHT_EXPANDED} - ${HEIGHT_COLLAPSED_EM + 2}em)`
+		: "0vh",
 }));
 
 const StyledButton = styled(Button)({
@@ -84,10 +116,12 @@ const StyledButton = styled(Button)({
 
 export default {
 	Button: StyledButton,
+	ClearButton,
 	ColumnName,
 	ContainerInput,
 	ContainerTable,
 	Drawer: StyledDrawer,
+	EndAdornment,
 	Header,
 	RowsNumber,
 	TextField: StyledTextField,

package/src/entities/{popup-query/ui/PopupQuery.tsx → drawer-run-query/ui/DrawerRunQuery.tsx}

@@ -1,47 +1,45 @@
-import { Box, IconButton } from "@mui/material";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import { GvizTable } from "myworkql";
 import { ChangeEvent, FC, MouseEvent, useRef, useState } from "react";
 import { SlickDataView } from "slickgrid";
 
-import { SlickgridTable, eventQuery } from "shared/lib/slickgrid";
-import { CHECKBOX_SELECTOR } from "shared/model/consts";
+import { localStore } from "shared/lib/localStrore";
+import { SlickgridTable, eventRunQuery } from "shared/lib/slickgrid";
 import { IColumn } from "shared/model/types";
 
-import { tableQuery, useSubscribeToEvent } from "../lib";
+import {
+	getColumsHash,
+	tableQuery,
+	useResizeCanvas,
+	useSubscribeToEvent,
+} from "../lib";
+import { QueryHistory } from "./QueryHistory";
 
-import Styled from "./PopupQuery.style";
+import Styled from "./DrawerRunQuery.style";
 
-export const PopupQuery: FC<Props> = ({ tableId }) => {
-	const [query, setQuery] = useState(`select * where hours > 7`);
+export const DrawerRunQuery: FC<Props> = ({ tableId }) => {
+	const [query, setQuery] = useState("");
 	const [isOpened, setIsOpened] = useState(false);
 	const [isExpanded, setIsExpanded] = useState(false);
 	const [items, setItems] = useState<Record<string, any>[]>([]);
 	const [columns, setColumns] = useState<IColumn[]>([]);
 	const queryInputRef = useRef<HTMLTextAreaElement>(null);
+	const columnsHash = getColumsHash();
 
-	function getColumNames(): IColumn[] {
-		const table = eventQuery.table;
-		if (!table) return [];
-		const grid = table.grid;
-		if (!grid) return [];
-		return grid
-			.getColumns()
-			.filter(
-				({ id, name }) =>
-					typeof name === "string" &&
-					id !== CHECKBOX_SELECTOR &&
-					id !== "isEdited",
-			);
-	}
-
-	function onClose() {
-		eventQuery.open = false;
+	function closeDrawer() {
+		eventRunQuery.open = false;
 	}
 
 	function updateQuery(event: ChangeEvent<HTMLTextAreaElement>) {
 		setQuery(event.target.value);
 	}
 
+	function clearQuery() {
+		const input = queryInputRef.current;
+		setQuery("");
+		requestAnimationFrame(() => input?.focus());
+	}
+
 	function pasteColumnId(event: MouseEvent<HTMLSpanElement>) {
 		const columnId = event.currentTarget.id;
 		if (!columnId) return;
@@ -57,43 +55,59 @@ export const PopupQuery: FC<Props> = ({ tableId }) => {
 		});
 	}
 
-	function executeQuery() {
-		const table = eventQuery.table;
+	function executeQuery(query: string) {
+		const table = eventRunQuery.table;
 		if (!table) return;
 		const grid = table.grid;
 		if (!grid) return;
 		const dataView: SlickDataView = grid.getData();
 		const items = dataView.getItems();
-		const idPropertyName = dataView.getIdPropertyName();
-		const itemsCopy = [...items];
-		for (const item of itemsCopy) {
-			delete item[idPropertyName];
+		const itemsCopy = [];
+		const fields = Object.keys(columnsHash);
+		for (const item of items) {
+			const newItem: Record<string, string | number | boolean> = {};
+			for (const field of fields) {
+				newItem[field] = item[field];
+			}
+			itemsCopy.push(newItem);
 		}
 		const gvizTable = new GvizTable(itemsCopy);
 		const run = gvizTable.query(query);
 		const newItems = run.toObjects();
 		setItems(newItems);
 		setColumns(
-			Object.keys(newItems[0]).map(
+			Object.keys(newItems[0] || {}).map(
 				(key): IColumn => ({
-					id: key,
-					field: key,
-					name: key
-						.split(" ")
-						.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-						.join(" "),
+					id: columnsHash[key].id,
+					field: columnsHash[key].field,
+					name: columnsHash[key].name,
+					formatter: columnsHash[key].formatter,
+					cssClass: columnsHash[key].cssClass,
 				}),
 			),
 		);
 		setIsExpanded(true);
+		localStore.queries.set(tableId, query);
 	}
 
 	useSubscribeToEvent(setIsOpened, tableId);
+	useResizeCanvas(isExpanded);
 
 	if (!isOpened) return null;
 
 	return (
-		<Styled.Drawer anchor={"bottom"} open={isOpened} onClose={onClose}>
+		<Styled.Drawer
+			anchor={"bottom"}
+			open={isOpened}
+			onClose={closeDrawer}
+			disablePortal
+			isExpanded={isExpanded}
+		>
+			<QueryHistory
+				executeQuery={executeQuery}
+				query={query}
+				setQuery={setQuery}
+			/>
 			<Box>
 				<Styled.Header>
 					<Styled.Title variant={"h6"}>
@@ -110,7 +124,7 @@ export const PopupQuery: FC<Props> = ({ tableId }) => {
 								<span className={"sgi sgi-arrow-expand"}></span>
 							</IconButton>
 						)}
-						<IconButton onClick={onClose}>
+						<IconButton onClick={closeDrawer}>
 							<span className={"sgi sgi-close"}></span>
 						</IconButton>
 					</Box>
@@ -123,14 +137,35 @@ export const PopupQuery: FC<Props> = ({ tableId }) => {
 						multiline
 						onChange={updateQuery}
 						inputRef={queryInputRef}
+						slotProps={{
+							input: {
+								endAdornment: !!query && (
+									<Styled.EndAdornment position={"end"}>
+										<Tooltip title={"Clear query"}>
+											<Styled.ClearButton
+												aria-label={"Clear query"}
+												onClick={clearQuery}
+												size={"small"}
+											>
+												<span className={"sgi sgi-close"}></span>
+											</Styled.ClearButton>
+										</Tooltip>
+									</Styled.EndAdornment>
+								),
+							},
+						}}
 						value={query}
 					/>
-					<Styled.Button variant={"contained"} onClick={executeQuery}>
+					<Styled.Button
+						disabled={!query.trim()}
+						onClick={() => executeQuery(query)}
+						variant={"contained"}
+					>
 						Execute
 					</Styled.Button>
 				</Styled.ContainerInput>
 				<Box sx={{ display: "flex", columnGap: "1em", marginBottom: "1em" }}>
-					{getColumNames().map(({ id, name }) => (
+					{Object.values(columnsHash).map(({ id, name }) => (
 						<Styled.ColumnName
 							key={id}
 							id={id as string}
@@ -140,17 +175,17 @@ export const PopupQuery: FC<Props> = ({ tableId }) => {
 						</Styled.ColumnName>
 					))}
 				</Box>
+				<Styled.ContainerTable isExpanded={isExpanded}>
+					{!!columns.length && (
+						<SlickgridTable
+							assignIds={true}
+							columns={columns}
+							items={items}
+							table={tableQuery}
+						/>
+					)}
+				</Styled.ContainerTable>
 			</Box>
-			<Styled.ContainerTable isExpanded={isExpanded}>
-				{!!columns.length && (
-					<SlickgridTable
-						assignIds={true}
-						columns={columns}
-						items={items}
-						table={tableQuery}
-					/>
-				)}
-			</Styled.ContainerTable>
 		</Styled.Drawer>
 	);
 };

package/src/entities/drawer-run-query/ui/QueryHistory/QueryHistory.style.ts

@@ -0,0 +1,53 @@
+import styled from "@emotion/styled";
+import { Box, Typography } from "@mui/material";
+
+const Wrapper = styled(Box)({
+	backgroundColor: "#F8F8FA",
+	borderRadius: "10px",
+	padding: "10px",
+	overflowY: "auto",
+});
+
+const GroupLabel = styled(Typography)({
+	color: "#BBBDBF",
+	fontSize: "0.75rem",
+	fontWeight: 400,
+	letterSpacing: "-2%",
+	lineHeight: "100%",
+	margin: "1.5em 0 0.75em",
+	padding: "0 8px",
+});
+
+const Item = styled(Box)({
+	alignItems: "center",
+	borderRadius: "8px",
+	color: "#333333",
+	cursor: "pointer",
+	display: "flex",
+	justifyContent: "space-between",
+	marginBottom: "2px",
+	padding: "8px 10px",
+	textAlign: "left",
+	userSelect: "none",
+	width: "100%",
+	"&:hover": {
+		backgroundColor: "#E8F4FE",
+	},
+	"&.active": {
+		backgroundColor: "#E8F4FE",
+		color: "#235B95",
+	},
+});
+
+const Title = styled("span")({
+	display: "-webkit-box",
+	fontSize: "0.75rem",
+	fontWeight: 400,
+	letterSpacing: "-2%",
+	lineHeight: "100%",
+	overflow: "hidden",
+	WebkitBoxOrient: "vertical",
+	WebkitLineClamp: 3,
+});
+
+export default { Wrapper, GroupLabel, Item, Title };