refactor(UI-1174): remove close icon session and event viewer component

autokitteh · Jan 11, 2025 · 92bb03b · 92bb03b
1 parent 896e8c1
commit 92bb03b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 53 deletions.
diff --git a/src/components/organisms/deployments/sessions/viewer.tsx b/src/components/organisms/deployments/sessions/viewer.tsx
@@ -21,16 +21,14 @@ import { SessionState } from "@src/enums";
 import { ViewerSession } from "@src/interfaces/models/session.interface";
 import { useActivitiesCacheStore, useOutputsCacheStore, useToastStore } from "@src/store";
 
-import { Frame, IconButton, IconSvg, Loader, LogoCatLarge, Tab } from "@components/atoms";
+import { Frame, IconSvg, Loader, LogoCatLarge, Tab } from "@components/atoms";
 import { Accordion, CopyButton, RefreshButton } from "@components/molecules";
 import { SessionsTableState } from "@components/organisms/deployments";
 
-import { ArrowRightIcon, CircleMinusIcon, CirclePlusIcon, Close } from "@assets/image/icons";
+import { ArrowRightIcon, CircleMinusIcon, CirclePlusIcon } from "@assets/image/icons";
 
 export const SessionViewer = () => {
-	const { deploymentId, projectId, sessionId } = useParams<{
-		deploymentId: string;
-		projectId: string;
+	const { sessionId } = useParams<{
 		sessionId: string;
 	}>();
 	const { t } = useTranslation("deployments", { keyPrefix: "sessions.viewer" });
@@ -47,15 +45,6 @@ export const SessionViewer = () => {
 	const { loading: loadingOutputs, reload: reloadOutputs } = useOutputsCacheStore();
 	const { loading: loadingActivities, reload: reloadActivities } = useActivitiesCacheStore();
 
-	const closeEditor = useCallback(() => {
-		if (deploymentId) {
-			navigate(`/projects/${projectId}/deployments/${deploymentId}/sessions`);
-
-			return;
-		}
-		navigate(`/projects/${projectId}/sessions`);
-	}, [navigate, projectId, deploymentId]);
-
 	const fetchSessionInfo = useCallback(async () => {
 		if (!sessionId) return;
 		const { data: sessionInfoResponse, error } = await SessionsService.getSessionInfo(sessionId);
@@ -135,20 +124,7 @@ export const SessionViewer = () => {
 	) : (
 		<Frame className="overflow-y-auto overflow-x-hidden rounded-l-none pb-3 font-fira-code">
 			<div className="flex items-center justify-end border-b border-gray-950 pb-3.5">
-				<div className="flex items-center gap-3">
-					<RefreshButton
-						disabled={!isRefreshButtonDisabled}
-						isLoading={isLoading}
-						onRefresh={fetchSessions}
-					/>
-					<IconButton
-						ariaLabel={t("buttons.ariaCloseEditor")}
-						className="size-7 bg-gray-1100 p-0.5"
-						onClick={closeEditor}
-					>
-						<Close className="size-3 fill-white" />
-					</IconButton>
-				</div>
+				<RefreshButton disabled={!isRefreshButtonDisabled} isLoading={isLoading} onRefresh={fetchSessions} />
 			</div>
 
 			<div className="mt-2.5 flex justify-between">

diff --git a/src/components/organisms/events/viewer.tsx b/src/components/organisms/events/viewer.tsx
@@ -4,40 +4,22 @@ import JsonView from "@uiw/react-json-view";
 import { githubDarkTheme } from "@uiw/react-json-view/githubDark";
 import moment from "moment";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 
-import { useEventsDrawer } from "@contexts";
 import { EventsService, LoggerService } from "@services";
 import { dateTimeFormat, namespaces } from "@src/constants";
 import { useToastStore } from "@src/store";
 import { EnrichedEvent } from "@src/types/models";
 
-import { Frame, IconButton, Loader, Typography } from "@components/atoms";
+import { Frame, Loader, Typography } from "@components/atoms";
 import { CopyButton } from "@components/molecules";
 
-import { Close } from "@assets/image/icons";
-
 export const EventViewer = () => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [eventInfo, setEventInfo] = useState<EnrichedEvent | null>(null);
-	const { isDrawer } = useEventsDrawer();
 
 	const { eventId } = useParams();
-	const navigate = useNavigate();
-
-	const closeViewer = useCallback(() => {
-		if (!isDrawer) {
-			navigate("/events");
-
-			return;
-		}
 
-		const parts = location.pathname.split("/");
-		parts.pop();
-		const newPath = parts.join("/");
-		navigate(newPath);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [location.pathname]);
 	const addToast = useToastStore((state) => state.addToast);
 	const { t } = useTranslation("events", { keyPrefix: "viewer" });
 	const { t: tErrors } = useTranslation("errors");
@@ -73,11 +55,6 @@ export const EventViewer = () => {
 		<Loader size="xl" />
 	) : (
 		<Frame className="overflow-y-auto overflow-x-hidden rounded-l-none pb-3 font-fira-code">
-			<div className="flex items-center justify-between border-b border-gray-950 pb-3.5">
-				<IconButton className="ml-auto size-7 bg-gray-1100 p-0.5" onClick={closeViewer}>
-					<Close className="size-3 fill-white" />
-				</IconButton>
-			</div>
 			{eventInfo ? (
 				<div className="mt-3 flex justify-between border-b border-gray-950 pb-3.5">
 					<div className="flex flex-col gap-0.5 leading-6">