From 503154d7b220be0ebcfff5d58e6348293a98ff63 Mon Sep 17 00:00:00 2001
From: Beatrix <68532117+abeatrix@users.noreply.github.com>
Date: Tue, 10 Sep 2024 09:04:14 -0700
Subject: [PATCH] Chat: add unique identifiers to CollapsiblePanel components
 (#5532)

This PR adds an id prop to the History Chat items that allows dev
identify chat history by period in E2E test

- Adds an `id` prop to the `CollapsiblePanel` component to provide a
unique identifier
- Updates the `Collapsible` and `CollapsibleContent` components to use
the `id` prop
- Ensures each `CollapsiblePanel` in the `HistoryTab` has a unique
identifier based on the period

## Test plan

<!-- Required. See
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles.
-->

Green CI - Everything should works the same.

## Changelog

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->
---
 vscode/webviews/components/CollapsiblePanel.tsx | 4 ++++
 vscode/webviews/tabs/HistoryTab.tsx             | 1 +
 2 files changed, 5 insertions(+)

diff --git a/vscode/webviews/components/CollapsiblePanel.tsx b/vscode/webviews/components/CollapsiblePanel.tsx
index 40695074aab7..240398388872 100644
--- a/vscode/webviews/components/CollapsiblePanel.tsx
+++ b/vscode/webviews/components/CollapsiblePanel.tsx
@@ -12,9 +12,11 @@ interface CollapsiblePanelProps {
     className?: string
     contentClassName?: string
     initialOpen?: boolean
+    id?: string
 }
 
 export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
+    id,
     storageKey,
     title,
     children,
@@ -28,6 +30,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
 
     return (
         <Collapsible
+            id={id}
             open={isOpen}
             onOpenChange={setIsOpen}
             className={clsx('tw-w-full tw-flex tw-flex-col tw-gap-3', className)}
@@ -46,6 +49,7 @@ export const CollapsiblePanel: React.FC<CollapsiblePanelProps> = ({
             </div>
             <CollapsibleContent>
                 <div
+                    id={`${id}-content`}
                     className={clsx(
                         'tw-px-2 tw-py-2 tw-flex tw-flex-col tw-bg-popover tw-border tw-border-border tw-rounded-lg',
                         contentClassName
diff --git a/vscode/webviews/tabs/HistoryTab.tsx b/vscode/webviews/tabs/HistoryTab.tsx
index b1c539761579..3cf6e959531d 100644
--- a/vscode/webviews/tabs/HistoryTab.tsx
+++ b/vscode/webviews/tabs/HistoryTab.tsx
@@ -65,6 +65,7 @@ export const HistoryTab: React.FC<HistoryTabProps> = ({
         <div className="tw-px-8 tw-pt-6 tw-pb-12 tw-flex tw-flex-col tw-gap-10">
             {chats.map(([period, chats]) => (
                 <CollapsiblePanel
+                    id={`history-${period}`.replaceAll(' ', '-').toLowerCase()}
                     key={period}
                     storageKey={`history.${period}`}
                     title={period}