git: Docs-based workaround for GitHub/git auth confusion (#38479)

Conrad Irwin created 1 month ago

Closes #ISSUE

Release Notes:

- git: Added a link to Github's authentication help if you end up in Zed
trying to type a password in for https auth

Change summary

crates/git_ui/src/askpass_modal.rs | 43 ++++++++++++++++++++++++++++---
1 file changed, 38 insertions(+), 5 deletions(-)

Detailed changes

crates/git_ui/src/askpass_modal.rs

@@ -2,9 +2,10 @@ use editor::Editor;
 use futures::channel::oneshot;
 use gpui::{AppContext, DismissEvent, Entity, EventEmitter, Focusable, Styled};
 use ui::{
-    ActiveTheme, App, Context, DynamicSpacing, Headline, HeadlineSize, Icon, IconName, IconSize,
-    InteractiveElement, IntoElement, ParentElement, Render, SharedString, StyledExt,
-    StyledTypography, Window, div, h_flex, v_flex,
+    ActiveTheme, AnyElement, App, Button, Clickable, Color, Context, DynamicSpacing, Headline,
+    HeadlineSize, Icon, IconName, IconSize, InteractiveElement, IntoElement, Label, LabelCommon,
+    LabelSize, ParentElement, Render, SharedString, StyledExt, StyledTypography, Window, div,
+    h_flex, v_flex,
 };
 use workspace::ModalView;
 
@@ -33,7 +34,7 @@ impl AskPassModal {
     ) -> Self {
         let editor = cx.new(|cx| {
             let mut editor = Editor::single_line(window, cx);
-            if prompt.contains("yes/no") {
+            if prompt.contains("yes/no") || prompt.contains("Username") {
                 editor.set_masked(false, cx);
             } else {
                 editor.set_masked(true, cx);
@@ -58,6 +59,36 @@ impl AskPassModal {
         }
         cx.emit(DismissEvent);
     }
+
+    fn render_hint(&mut self, cx: &mut Context<Self>) -> Option<AnyElement> {
+        let color = cx.theme().status().info_background;
+        if (self.prompt.contains("Password") || self.prompt.contains("Username"))
+            && self.prompt.contains("github.com")
+        {
+            return Some(
+            div()
+                .p_2()
+                .bg(color)
+                .border_t_1()
+                .border_color(cx.theme().status().info_border)
+                .child(
+                    h_flex().gap_2()
+                        .child(
+                            Icon::new(IconName::Github).size(IconSize::Small)
+                        )
+                        .child(
+                            Label::new("You may need to configure git for Github.")
+                                .size(LabelSize::Small),
+                        )
+                        .child(Button::new("learn-more", "Learn more").color(Color::Accent).label_size(LabelSize::Small).on_click(|_, _, cx| {
+                            cx.open_url("https://docs.github.com/en/get-started/git-basics/set-up-git#authenticating-with-github-from-git")
+                        })),
+                )
+                .into_any_element(),
+        );
+        }
+        None
+    }
 }
 
 impl Render for AskPassModal {
@@ -68,9 +99,9 @@ impl Render for AskPassModal {
             .on_action(cx.listener(Self::confirm))
             .elevation_2(cx)
             .size_full()
-            .font_buffer(cx)
             .child(
                 h_flex()
+                    .font_buffer(cx)
                     .px(DynamicSpacing::Base12.rems(cx))
                     .pt(DynamicSpacing::Base08.rems(cx))
                     .pb(DynamicSpacing::Base04.rems(cx))
@@ -86,6 +117,7 @@ impl Render for AskPassModal {
             )
             .child(
                 div()
+                    .font_buffer(cx)
                     .text_buffer(cx)
                     .py_2()
                     .px_3()
@@ -97,5 +129,6 @@ impl Render for AskPassModal {
                     .child(self.prompt.clone())
                     .child(self.editor.clone()),
             )
+            .children(self.render_hint(cx))
     }
 }