@@ -97,31 +116,42 @@ export function ConversationCard({
- {
- event.preventDefault();
- event.stopPropagation();
- setContextMenuVisible((prev) => !prev);
- }}
- />
+ {hasContextMenu && (
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ setContextMenuVisible((prev) => !prev);
+ }}
+ />
+ )}
+ {contextMenuVisible && (
+ setContextMenuVisible(false)}
+ onDelete={onDelete && handleDelete}
+ onEdit={onChangeTitle && handleEdit}
+ onDownload={onDownloadWorkspace && handleDownload}
+ position={variant === "compact" ? "top" : "bottom"}
+ />
+ )}
- {contextMenuVisible && (
-
setContextMenuVisible(false)}
- onDelete={handleDelete}
- onEdit={handleEdit}
- />
- )}
- {selectedRepository && (
- e.stopPropagation()}
- />
- )}
-
-
-
+
+
+ {selectedRepository && (
+
e.stopPropagation()}
+ />
+ )}
+
+
+
+
);
}
diff --git a/frontend/src/components/features/project-menu/ProjectMenuCard.tsx b/frontend/src/components/features/project-menu/ProjectMenuCard.tsx
deleted file mode 100644
index bebf4a5ae921..000000000000
--- a/frontend/src/components/features/project-menu/ProjectMenuCard.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from "react";
-import posthog from "posthog-js";
-import { useTranslation } from "react-i18next";
-import EllipsisH from "#/icons/ellipsis-h.svg?react";
-import { ProjectMenuCardContextMenu } from "./project.menu-card-context-menu";
-import { ProjectMenuDetailsPlaceholder } from "./project-menu-details-placeholder";
-import { ProjectMenuDetails } from "./project-menu-details";
-import { ConnectToGitHubModal } from "#/components/shared/modals/connect-to-github-modal";
-import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
-import { DownloadModal } from "#/components/shared/download-modal";
-import { I18nKey } from "#/i18n/declaration";
-
-interface ProjectMenuCardProps {
- isConnectedToGitHub: boolean;
- githubData: {
- avatar: string | null;
- repoName: string;
- lastCommit: GitHubCommit;
- } | null;
-}
-
-export function ProjectMenuCard({
- isConnectedToGitHub,
- githubData,
-}: ProjectMenuCardProps) {
- const { t } = useTranslation();
-
- const [contextMenuIsOpen, setContextMenuIsOpen] = React.useState(false);
- const [connectToGitHubModalOpen, setConnectToGitHubModalOpen] =
- React.useState(false);
- const [downloading, setDownloading] = React.useState(false);
-
- const toggleMenuVisibility = () => {
- setContextMenuIsOpen((prev) => !prev);
- };
-
- const handleDownloadWorkspace = () => {
- posthog.capture("download_workspace_button_clicked");
- setDownloading(true);
- };
-
- const handleDownloadClose = () => {
- setDownloading(false);
- };
-
- return (
-
- {!downloading && contextMenuIsOpen && (
-
setConnectToGitHubModalOpen(true)}
- onDownloadWorkspace={handleDownloadWorkspace}
- onClose={() => setContextMenuIsOpen(false)}
- />
- )}
- {githubData && (
-
- )}
- {!githubData && (
- setConnectToGitHubModalOpen(true)}
- />
- )}
-
- {!downloading && (
-
- )}
- {connectToGitHubModalOpen && (
- setConnectToGitHubModalOpen(false)}>
- setConnectToGitHubModalOpen(false)}
- />
-
- )}
-
- );
-}
diff --git a/frontend/src/components/features/project-menu/project-menu-details-placeholder.tsx b/frontend/src/components/features/project-menu/project-menu-details-placeholder.tsx
deleted file mode 100644
index 47a6a381809c..000000000000
--- a/frontend/src/components/features/project-menu/project-menu-details-placeholder.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { cn } from "#/utils/utils";
-import CloudConnection from "#/icons/cloud-connection.svg?react";
-import { I18nKey } from "#/i18n/declaration";
-
-interface ProjectMenuDetailsPlaceholderProps {
- isConnectedToGitHub: boolean;
- onConnectToGitHub: () => void;
-}
-
-export function ProjectMenuDetailsPlaceholder({
- isConnectedToGitHub,
- onConnectToGitHub,
-}: ProjectMenuDetailsPlaceholderProps) {
- const { t } = useTranslation();
-
- return (
-
-
- {t(I18nKey.PROJECT_MENU_DETAILS_PLACEHOLDER$NEW_PROJECT_LABEL)}
-
-
-
- );
-}
diff --git a/frontend/src/components/features/project-menu/project-menu-details.tsx b/frontend/src/components/features/project-menu/project-menu-details.tsx
deleted file mode 100644
index 3766d00e30c0..000000000000
--- a/frontend/src/components/features/project-menu/project-menu-details.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useTranslation } from "react-i18next";
-import ExternalLinkIcon from "#/icons/external-link.svg?react";
-import { formatTimeDelta } from "#/utils/format-time-delta";
-import { I18nKey } from "#/i18n/declaration";
-
-interface ProjectMenuDetailsProps {
- repoName: string;
- avatar: string | null;
- lastCommit: GitHubCommit;
-}
-
-export function ProjectMenuDetails({
- repoName,
- avatar,
- lastCommit,
-}: ProjectMenuDetailsProps) {
- const { t } = useTranslation();
- return (
-
- );
-}
diff --git a/frontend/src/components/features/project-menu/project.menu-card-context-menu.tsx b/frontend/src/components/features/project-menu/project.menu-card-context-menu.tsx
deleted file mode 100644
index d476ffdaf932..000000000000
--- a/frontend/src/components/features/project-menu/project.menu-card-context-menu.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
-import { ContextMenu } from "../context-menu/context-menu";
-import { ContextMenuListItem } from "../context-menu/context-menu-list-item";
-import { I18nKey } from "#/i18n/declaration";
-
-interface ProjectMenuCardContextMenuProps {
- isConnectedToGitHub: boolean;
- onConnectToGitHub: () => void;
- onDownloadWorkspace: () => void;
- onClose: () => void;
-}
-
-export function ProjectMenuCardContextMenu({
- isConnectedToGitHub,
- onConnectToGitHub,
- onDownloadWorkspace,
- onClose,
-}: ProjectMenuCardContextMenuProps) {
- const menuRef = useClickOutsideElement
(onClose);
- const { t } = useTranslation();
- return (
-
- {!isConnectedToGitHub && (
-
- {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$CONNECT_TO_GITHUB_LABEL)}
-
- )}
-
- {t(I18nKey.PROJECT_MENU_CARD_CONTEXT_MENU$DOWNLOAD_FILES_LABEL)}
-
-
- );
-}
diff --git a/frontend/src/components/features/sidebar/sidebar.tsx b/frontend/src/components/features/sidebar/sidebar.tsx
index 6b7db215841a..f6a1728ce5ed 100644
--- a/frontend/src/components/features/sidebar/sidebar.tsx
+++ b/frontend/src/components/features/sidebar/sidebar.tsx
@@ -72,7 +72,7 @@ export function Sidebar() {
{MULTI_CONVERSATION_UI && (
setConversationPanelIsOpen((prev) => !prev)}
diff --git a/frontend/src/hooks/query/get-conversation-permissions.ts b/frontend/src/hooks/query/use-user-conversation.ts
similarity index 100%
rename from frontend/src/hooks/query/get-conversation-permissions.ts
rename to frontend/src/hooks/query/use-user-conversation.ts
diff --git a/frontend/src/routes/_oh.app/route.tsx b/frontend/src/routes/_oh.app/route.tsx
index ab3384f951ec..086d3f0f5e23 100644
--- a/frontend/src/routes/_oh.app/route.tsx
+++ b/frontend/src/routes/_oh.app/route.tsx
@@ -20,7 +20,6 @@ import { FilesProvider } from "#/context/files";
import { ChatInterface } from "../../components/features/chat/chat-interface";
import { WsClientProvider } from "#/context/ws-client-provider";
import { EventHandler } from "./event-handler";
-import { useLatestRepoCommit } from "#/hooks/query/use-latest-repo-commit";
import { useAuth } from "#/context/auth-context";
import { useConversationConfig } from "#/hooks/query/use-conversation-config";
import { Container } from "#/components/layout/container";
@@ -30,38 +29,26 @@ import {
} from "#/components/layout/resizable-panel";
import Security from "#/components/shared/modals/security/security";
import { useEndSession } from "#/hooks/use-end-session";
-import { useUserConversation } from "#/hooks/query/get-conversation-permissions";
+import { useUserConversation } from "#/hooks/query/use-user-conversation";
import { CountBadge } from "#/components/layout/count-badge";
import { TerminalStatusLabel } from "#/components/features/terminal/terminal-status-label";
import { useSettings } from "#/hooks/query/use-settings";
import { MULTI_CONVERSATION_UI } from "#/utils/feature-flags";
function AppContent() {
+ useConversationConfig();
const { gitHubToken } = useAuth();
const { data: settings } = useSettings();
-
- const endSession = useEndSession();
- const [width, setWidth] = React.useState(window.innerWidth);
-
const { conversationId } = useConversation();
-
- const dispatch = useDispatch();
-
- useConversationConfig();
const { data: conversation, isFetched } = useUserConversation(
conversationId || null,
);
+ const dispatch = useDispatch();
+ const endSession = useEndSession();
- const { selectedRepository } = useSelector(
- (state: RootState) => state.initialQuery,
- );
-
+ const [width, setWidth] = React.useState(window.innerWidth);
const { updateCount } = useSelector((state: RootState) => state.browser);
- const { data: latestGitHubCommit } = useLatestRepoCommit({
- repository: selectedRepository,
- });
-
const secrets = React.useMemo(
() => [gitHubToken].filter((secret) => secret !== null),
[gitHubToken],
@@ -180,13 +167,10 @@ function AppContent() {
{renderMain()}
-
-
-
+
{
test.beforeEach(async ({ page }) => {
await page.goto("/");
await page.evaluate(() => {
+ localStorage.setItem("FEATURE_MULTI_CONVERSATION_UI", "true");
localStorage.setItem("analytics-consent", "true");
localStorage.setItem("SETTINGS_VERSION", "5");
});
@@ -111,3 +112,28 @@ test("should redirect to home screen if conversation deos not exist", async ({
await page.goto("/conversations/9999");
await page.waitForURL("/");
});
+
+test("display the conversation details during a conversation", async ({
+ page,
+}) => {
+ const conversationPanelButton = page.getByTestId("toggle-conversation-panel");
+ await expect(conversationPanelButton).toBeVisible();
+ await conversationPanelButton.click();
+
+ const panel = page.getByTestId("conversation-panel");
+
+ // select a conversation
+ const conversationItem = panel.getByTestId("conversation-card").first();
+ await conversationItem.click();
+
+ // panel should close
+ await expect(panel).not.toBeVisible();
+
+ await page.waitForURL("/conversations/1");
+ expect(page.url()).toBe("http://localhost:3001/conversations/1");
+
+ const conversationDetails = page.getByTestId("conversation-card");
+
+ await expect(conversationDetails).toBeVisible();
+ await expect(conversationDetails).toHaveText("Conversation 1");
+});