workspace: Fix remote project buttons sharing same element ID on welcome page (#49096)

Xin Zhao created 2 months ago

Closes #49083

This issue was caused by remote projects on the welcome page sharing the
same ID, as they all used the "Remote Project" label. Additionally, the
tab size was hardcoded to 10, which caused the tab navigation to break.
This PR assigns unique IDs and removes the hardcoded limitation.


- [x] locally checked the click behavior
- [x] self-review done

Release Notes:

- Fixed Welcome page remote projects not responding correctly when
clicked.

Change summary

crates/workspace/src/welcome.rs | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)

Detailed changes

crates/workspace/src/welcome.rs

@@ -88,7 +88,7 @@ impl SectionButton {
 
 impl RenderOnce for SectionButton {
     fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
-        let id = format!("onb-button-{}", self.label);
+        let id = format!("onb-button-{}-{}", self.label, self.tab_index);
         let action_ref: &dyn Action = &*self.action;
 
         ButtonLike::new(id)
@@ -305,7 +305,8 @@ impl WelcomePage {
 
     fn render_recent_project(
         &self,
-        index: usize,
+        project_index: usize,
+        tab_index: usize,
         location: &SerializedWorkspaceLocation,
         paths: &PathList,
     ) -> impl IntoElement {
@@ -326,8 +327,10 @@ impl WelcomePage {
         SectionButton::new(
             title,
             icon,
-            &OpenRecentProject { index },
-            10,
+            &OpenRecentProject {
+                index: project_index,
+            },
+            tab_index,
             self.focus_handle.clone(),
         )
     }
@@ -346,7 +349,9 @@ impl Render for WelcomePage {
             .flatten()
             .take(5)
             .enumerate()
-            .map(|(index, (_, loc, paths))| self.render_recent_project(index, loc, paths))
+            .map(|(index, (_, loc, paths))| {
+                self.render_recent_project(index, first_section_entries + index, loc, paths)
+            })
             .collect::<Vec<_>>();
 
         let second_section = if self.fallback_to_recent_projects && !recent_projects.is_empty() {