zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-20 19:08:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

Create copilot auth popup UI

Browse Source
This commit is contained in:
Mikayla Maki 2023-03-27 14:25:11 -07:00
parent da81ff3295
commit 6ff09865eb
12 changed files with 253 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.lock generated
View File

@ -1347,6 +1347,7 @@ dependencies = [
"serde_derive",
"settings",
"smol",
"theme",
"util",
"workspace",
]

1
assets/icons/github-copilot-dummy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1.24em" height="1em" viewBox="0 0 256 208"><path d="M205.28 31.36c14.096 14.88 20.016 35.2 22.512 63.68c6.626 0 12.805 1.47 16.976 7.152l7.792 10.56A17.548 17.548 0 0 1 256 123.2v28.688c-.008 3.704-1.843 7.315-4.832 9.504C215.885 187.222 172.35 208 128 208c-49.066 0-98.19-28.273-123.168-46.608c-2.989-2.189-4.825-5.8-4.832-9.504V123.2c0-3.776 1.2-7.424 3.424-10.464l7.792-10.544c4.173-5.657 10.38-7.152 16.992-7.152c2.496-28.48 8.4-48.8 22.512-63.68C77.331 3.165 112.567.06 127.552 0H128c14.72 0 50.4 2.88 77.28 31.36Zm-77.264 47.376c-3.04 0-6.544.176-10.272.544c-1.312 4.896-3.248 9.312-6.08 12.128c-11.2 11.2-24.704 12.928-31.936 12.928c-6.802 0-13.927-1.42-19.744-5.088c-5.502 1.808-10.786 4.415-11.136 10.912c-.586 12.28-.637 24.55-.688 36.824c-.026 6.16-.05 12.322-.144 18.488c.024 3.579 2.182 6.903 5.44 8.384C79.936 185.92 104.976 192 128.016 192c23.008 0 48.048-6.08 74.512-18.144c3.258-1.48 5.415-4.805 5.44-8.384c.317-18.418.062-36.912-.816-55.312h.016c-.342-6.534-5.648-9.098-11.168-10.912c-5.82 3.652-12.927 5.088-19.728 5.088c-7.232 0-20.72-1.728-31.936-12.928c-2.832-2.816-4.768-7.232-6.08-12.128a106.26 106.26 0 0 0-10.24-.544Zm-26.941 43.93c5.748 0 10.408 4.66 10.408 10.409v19.183c0 5.749-4.66 10.409-10.408 10.409c-5.748 0-10.408-4.66-10.408-10.409v-19.183c0-5.748 4.66-10.408 10.408-10.408Zm53.333 0c5.749 0 10.409 4.66 10.409 10.409v19.183c0 5.749-4.66 10.409-10.409 10.409c-5.748 0-10.408-4.66-10.408-10.409v-19.183c0-5.748 4.66-10.408 10.408-10.408ZM81.44 28.32c-11.2 1.12-20.64 4.8-25.44 9.92c-10.4 11.36-8.16 40.16-2.24 46.24c4.32 4.32 12.48 7.2 21.28 7.2c6.72 0 19.52-1.44 30.08-12.16c4.64-4.48 7.52-15.68 7.2-27.04c-.32-9.12-2.88-16.64-6.72-19.84c-4.16-3.68-13.6-5.28-24.16-4.32Zm68.96 4.32c-3.84 3.2-6.4 10.72-6.72 19.84c-.32 11.36 2.56 22.56 7.2 27.04c10.56 10.72 23.36 12.16 30.08 12.16c8.8 0 16.96-2.88 21.28-7.2c5.92-6.08 8.16-34.88-2.24-46.24c-4.8-5.12-14.24-8.8-25.44-9.92c-10.56-.96-20 .64-24.16 4.32ZM128 56c-2.56 0-5.6.16-8.96.48c.32 1.76.48 3.68.64 5.76c0 1.44 0 2.88-.16 4.48c3.2-.32 5.92-.32 8.48-.32c2.56 0 5.28 0 8.48.32c-.16-1.6-.16-3.04-.16-4.48c.16-2.08.32-4 .64-5.76c-3.36-.32-6.4-.48-8.96-.48Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

1
crates/copilot/Cargo.toml
View File

@ -12,6 +12,7 @@ doctest = false
gpui = { path = "../gpui" }
language = { path = "../language" }
settings = { path = "../settings" }
theme = { path = "../theme" }
lsp = { path = "../lsp" }
util = { path = "../util" }
client = { path = "../client" }

2
crates/copilot/src/copilot.rs
View File

@ -475,7 +475,7 @@ mod tests {
.update(cx, |copilot, cx| copilot.sign_in(cx))
.await
.unwrap();
dbg!(copilot.read_with(cx, |copilot, _| copilot.status()));
copilot.read_with(cx, |copilot, _| copilot.status());
let buffer = cx.add_model(|cx| language::Buffer::new(0, "fn foo() -> ", cx));
dbg!(copilot

90
crates/copilot/src/sign_in.rs
View File

@ -1,11 +1,18 @@
use crate::{request::PromptUserDeviceFlow, Copilot};
use gpui::{
elements::*,
geometry::{rect::RectF, vector::vec2f},
Axis, Element, Entity, MutableAppContext, View, WindowKind, WindowOptions,
elements::*, geometry::rect::RectF, impl_internal_actions, ClipboardItem, Element, Entity,
MutableAppContext, View, WindowKind, WindowOptions,
};
use settings::Settings;
#[derive(PartialEq, Eq, Debug, Clone)]
struct CopyUserCode;
#[derive(PartialEq, Eq, Debug, Clone)]
struct OpenGithub;
impl_internal_actions!(copilot_sign_in, [CopyUserCode, OpenGithub]);
pub fn init(cx: &mut MutableAppContext) {
let copilot = Copilot::global(cx).unwrap();
@ -19,16 +26,24 @@ pub fn init(cx: &mut MutableAppContext) {
cx.remove_window(window_id);
}
let window_size = cx
.global::<Settings>()
.theme
.copilot
.auth
.popup_dimensions
.to_vec();
let (window_id, _) = cx.add_window(
WindowOptions {
bounds: gpui::WindowBounds::Fixed(RectF::new(
Default::default(),
vec2f(600., 400.),
window_size,
)),
titlebar: None,
center: true,
focus: false,
kind: WindowKind::Normal,
kind: WindowKind::PopUp,
is_movable: true,
screen: None,
},
@ -62,23 +77,68 @@ impl View for CopilotCodeVerification {
fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> gpui::ElementBox {
let style = cx.global::<Settings>().theme.copilot.clone();
let auth_text = style.auth_text.clone();
let prompt = self.prompt.clone();
Flex::new(Axis::Vertical)
.with_child(Label::new(prompt.user_code.clone(), auth_text.clone()).boxed())
let instruction_text = style.auth.instruction_text;
let user_code_text = style.auth.user_code;
let button = style.auth.button;
let button_width = style.auth.button_width;
let height = style.auth.popup_dimensions.height;
let user_code = self.prompt.user_code.replace("-", " - ");
Flex::column()
.with_child(
MouseEventHandler::<Self>::new(1, cx, move |_state, _cx| {
Label::new("Click here to open GitHub!", auth_text.clone()).boxed()
MouseEventHandler::<Self>::new(0, cx, |state, _cx| {
let style = style.auth.close_icon.style_for(state, false);
theme::ui::icon(style).boxed()
})
.on_click(gpui::MouseButton::Left, move |_click, cx| {
cx.platform().open_url(&prompt.verification_uri)
.on_click(gpui::MouseButton::Left, move |_, cx| {
let window_id = cx.window_id();
cx.remove_window(window_id);
})
.with_cursor_style(gpui::CursorStyle::PointingHand)
.aligned()
.right()
.boxed(),
)
.with_child(
Flex::column()
.align_children_center()
.with_children([
theme::ui::svg(&style.auth.copilot_icon).boxed(),
Label::new(
"Here is your code to authenticate with github",
instruction_text.clone(),
)
.boxed(),
Label::new(user_code, user_code_text.clone()).boxed(),
theme::ui::cta_button_with_click("Copy Code", button_width, &button, cx, {
let user_code = self.prompt.user_code.clone();
move |_, cx| {
cx.platform()
.write_to_clipboard(ClipboardItem::new(user_code.clone()))
}
}),
Label::new("Copy it and enter it on GitHub", instruction_text.clone())
.boxed(),
theme::ui::cta_button_with_click(
"Go to Github",
button_width,
&button,
cx,
{
let verification_uri = self.prompt.verification_uri.clone();
move |_, cx| cx.platform().open_url(&verification_uri)
},
),
])
.aligned()
.boxed(),
)
.contained()
.with_style(style.auth_modal)
.named("Copilot Authentication status modal")
.with_style(style.auth.popup_container)
.constrained()
.with_height(height)
.boxed()
}
}

23
crates/theme/src/theme.rs
View File

@ -9,7 +9,7 @@ use gpui::{
use serde::{de::DeserializeOwned, Deserialize};
use serde_json::Value;
use std::{collections::HashMap, sync::Arc};
use ui::{CheckboxStyle, IconStyle};
use ui::{ButtonStyle, CheckboxStyle, Dimensions, IconStyle, SvgStyle};
pub mod ui;
@ -76,8 +76,8 @@ pub struct Workspace {
#[derive(Clone, Deserialize, Default)]
pub struct BlankPaneStyle {
pub logo: IconStyle,
pub logo_shadow: IconStyle,
pub logo: SvgStyle,
pub logo_shadow: SvgStyle,
pub logo_container: ContainerStyle,
pub keyboard_hints: ContainerStyle,
pub keyboard_hint: Interactive<ContainedText>,
@ -118,8 +118,19 @@ pub struct AvatarStyle {
#[derive(Deserialize, Default, Clone)]
pub struct Copilot {
pub auth_modal: ContainerStyle,
pub auth_text: TextStyle,
pub auth: CopilotAuth,
}
#[derive(Deserialize, Default, Clone)]
pub struct CopilotAuth {
pub popup_container: ContainerStyle,
pub popup_dimensions: Dimensions,
pub instruction_text: TextStyle,
pub user_code: TextStyle,
pub button: ButtonStyle,
pub button_width: f32,
pub copilot_icon: SvgStyle,
pub close_icon: Interactive<IconStyle>,
}
#[derive(Deserialize, Default)]
@ -876,7 +887,7 @@ pub struct FeedbackStyle {
#[derive(Clone, Deserialize, Default)]
pub struct WelcomeStyle {
pub page_width: f32,
pub logo: IconStyle,
pub logo: SvgStyle,
pub logo_subheading: ContainedText,
pub usage_note: ContainedText,
pub checkbox: CheckboxStyle,

82
crates/theme/src/ui.rs
View File

@ -1,18 +1,22 @@
use std::borrow::Cow;
use gpui::{
color::Color,
elements::{
ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label,
MouseEventHandler, ParentElement, Svg,
},
Action, Element, ElementBox, EventContext, RenderContext, View,
geometry::vector::{vec2f, Vector2F},
scene::MouseClick,
Action, Element, ElementBox, EventContext, MouseButton, MouseState, RenderContext, View,
};
use serde::Deserialize;
use crate::ContainedText;
use crate::{ContainedText, Interactive};
#[derive(Clone, Deserialize, Default)]
pub struct CheckboxStyle {
pub icon: IconStyle,
pub icon: SvgStyle,
pub label: ContainedText,
pub default: ContainerStyle,
pub checked: ContainerStyle,
@ -44,7 +48,7 @@ pub fn checkbox_with_label<T: 'static, V: View>(
) -> MouseEventHandler<T> {
MouseEventHandler::<T>::new(0, cx, |state, _| {
let indicator = if checked {
icon(&style.icon)
svg(&style.icon)
} else {
Empty::new()
.constrained()
@ -80,9 +84,9 @@ pub fn checkbox_with_label<T: 'static, V: View>(
}
#[derive(Clone, Deserialize, Default)]
pub struct IconStyle {
pub struct SvgStyle {
pub color: Color,
pub icon: String,
pub asset: String,
pub dimensions: Dimensions,
}
@ -92,14 +96,30 @@ pub struct Dimensions {
pub height: f32,
}
pub fn icon(style: &IconStyle) -> ConstrainedBox {
Svg::new(style.icon.clone())
impl Dimensions {
pub fn to_vec(&self) -> Vector2F {
vec2f(self.width, self.height)
}
}
pub fn svg(style: &SvgStyle) -> ConstrainedBox {
Svg::new(style.asset.clone())
.with_color(style.color)
.constrained()
.with_width(style.dimensions.width)
.with_height(style.dimensions.height)
}
#[derive(Clone, Deserialize, Default)]
pub struct IconStyle {
icon: SvgStyle,
container: ContainerStyle,
}
pub fn icon(style: &IconStyle) -> Container {
svg(&style.icon).contained().with_style(style.container)
}
pub fn keystroke_label<V: View>(
label_text: &'static str,
label_style: &ContainedText,
@ -147,3 +167,49 @@ pub fn keystroke_label_for(
.contained()
.with_style(label_style.container)
}
pub type ButtonStyle = Interactive<ContainedText>;
pub fn cta_button<L, A, V>(
label: L,
action: A,
max_width: f32,
style: &ButtonStyle,
cx: &mut RenderContext<V>,
) -> ElementBox
where
L: Into<Cow<'static, str>>,
A: 'static + Action + Clone,
V: View,
{
cta_button_with_click(label, max_width, style, cx, move |_, cx| {
cx.dispatch_action(action.clone())
})
}
pub fn cta_button_with_click<L, V, F>(
label: L,
max_width: f32,
style: &ButtonStyle,
cx: &mut RenderContext<V>,
f: F,
) -> ElementBox
where
L: Into<Cow<'static, str>>,
V: View,
F: Fn(MouseClick, &mut EventContext) + 'static,
{
MouseEventHandler::<F>::new(0, cx, |state, _| {
let style = style.style_for(state, false);
Label::new(label, style.text.to_owned())
.aligned()
.contained()
.with_style(style.container)
.constrained()
.with_max_width(max_width)
.boxed()
})
.on_click(MouseButton::Left, f)
.with_cursor_style(gpui::CursorStyle::PointingHand)
.boxed()
}

101
crates/welcome/src/welcome.rs
View File

@ -1,12 +1,11 @@
mod base_keymap_picker;
use std::{borrow::Cow, sync::Arc};
use std::sync::Arc;
use db::kvp::KEY_VALUE_STORE;
use gpui::{
elements::{Flex, Label, MouseEventHandler, ParentElement},
Action, Element, ElementBox, Entity, MouseButton, MutableAppContext, RenderContext,
Subscription, View, ViewContext,
elements::{Flex, Label, ParentElement},
Element, ElementBox, Entity, MutableAppContext, Subscription, View, ViewContext,
};
use settings::{settings_file::SettingsFile, Settings};
@ -77,7 +76,7 @@ impl View for WelcomePage {
.with_children([
Flex::column()
.with_children([
theme::ui::icon(&theme.welcome.logo)
theme::ui::svg(&theme.welcome.logo)
.aligned()
.contained()
.aligned()
@ -98,22 +97,25 @@ impl View for WelcomePage {
.boxed(),
Flex::column()
.with_children([
self.render_cta_button(
theme::ui::cta_button(
"Choose a theme",
theme_selector::Toggle,
width,
&theme.welcome.button,
cx,
),
self.render_cta_button(
theme::ui::cta_button(
"Choose a keymap",
ToggleBaseKeymapSelector,
width,
&theme.welcome.button,
cx,
),
self.render_cta_button(
theme::ui::cta_button(
"Install the CLI",
install_cli::Install,
width,
&theme.welcome.button,
cx,
),
])
@ -201,89 +203,6 @@ impl WelcomePage {
_settings_subscription: settings_subscription,
}
}
fn render_cta_button<L, A>(
&self,
label: L,
action: A,
width: f32,
cx: &mut RenderContext<Self>,
) -> ElementBox
where
L: Into<Cow<'static, str>>,
A: 'static + Action + Clone,
{
let theme = cx.global::<Settings>().theme.clone();
MouseEventHandler::<A>::new(0, cx, |state, _| {
let style = theme.welcome.button.style_for(state, false);
Label::new(label, style.text.clone())
.aligned()
.contained()
.with_style(style.container)
.constrained()
.with_max_width(width)
.boxed()
})
.on_click(MouseButton::Left, move |_, cx| {
cx.dispatch_action(action.clone())
})
.with_cursor_style(gpui::CursorStyle::PointingHand)
.boxed()
}
// fn render_settings_checkbox<T: 'static>(
// &self,
// label: &'static str,
// style: &CheckboxStyle,
// checked: bool,
// cx: &mut RenderContext<Self>,
// set_value: fn(&mut SettingsFileContent, checked: bool) -> (),
// ) -> ElementBox {
// MouseEventHandler::<T>::new(0, cx, |state, _| {
// let indicator = if checked {
// Svg::new(style.check_icon.clone())
// .with_color(style.check_icon_color)
// .constrained()
// } else {
// Empty::new().constrained()
// };
// Flex::row()
// .with_children([
// indicator
// .with_width(style.width)
// .with_height(style.height)
// .contained()
// .with_style(if checked {
// if state.hovered() {
// style.hovered_and_checked
// } else {
// style.checked
// }
// } else {
// if state.hovered() {
// style.hovered
// } else {
// style.default
// }
// })
// .boxed(),
// Label::new(label, style.label.text.clone())
// .contained()
// .with_style(style.label.container)
// .boxed(),
// ])
// .align_children_center()
// .boxed()
// })
// .on_click(gpui::MouseButton::Left, move |_, cx| {
// SettingsFile::update(cx, move |content| set_value(content, !checked))
// })
// .with_cursor_style(gpui::CursorStyle::PointingHand)
// .contained()
// .with_style(style.container)
// .boxed()
// }
}
impl Item for WelcomePage {

12
styles/src/styleTree/components.ts
View File

@ -280,3 +280,15 @@ export function border(
...properties,
}
}
export function svg(color: string, asset: String, width: Number, height: Number) {
return {
color,
asset,
dimensions: {
width,
height,
}
}
}

60
styles/src/styleTree/copilot.ts
View File

@ -1,21 +1,59 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { background, border, text } from "./components";
import { background, border, foreground, svg, text } from "./components";
export default function copilot(colorScheme: ColorScheme) {
let layer = colorScheme.highest;
return {
authModal: {
background: background(colorScheme.lowest),
border: border(colorScheme.lowest),
shadow: colorScheme.modalShadow,
cornerRadius: 12,
padding: {
bottom: 4,
auth: {
popupContainer: {
background: background(colorScheme.highest),
},
},
authText: text(layer, "sans")
popupDimensions: {
width: 336,
height: 256,
},
instructionText: text(layer, "sans"),
userCode:
text(layer, "sans", { size: "lg" }),
button: { // Copied from welcome screen. FIXME: Move this into a ZDS component
background: background(layer),
border: border(layer, "active"),
cornerRadius: 4,
margin: {
top: 4,
bottom: 4,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" }),
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
},
buttonWidth: 320,
copilotIcon: svg(foreground(layer, "default"), "icons/github-copilot-dummy.svg", 64, 64),
closeIcon: {
icon: svg(background(layer, "on"), "icons/x_mark_16.svg", 16, 16),
container: {
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
}
},
hover: {
icon: svg(foreground(layer, "on"), "icons/x_mark_16.svg", 16, 16),
}
},
}
}
}

19
styles/src/styleTree/welcome.ts
View File

@ -6,6 +6,7 @@ import {
foreground,
text,
TextProperties,
svg,
} from "./components"
export default function welcome(colorScheme: ColorScheme) {
@ -32,14 +33,7 @@ export default function welcome(colorScheme: ColorScheme) {
return {
pageWidth: 320,
logo: {
color: foreground(layer, "default"),
icon: "icons/logo_96.svg",
dimensions: {
width: 64,
height: 64,
},
},
logo: svg(foreground(layer, "default"), "icons/logo_96.svg", 64, 64),
logoSubheading: {
...text(layer, "sans", "variant", { size: "md" }),
margin: {
@ -109,14 +103,7 @@ export default function welcome(colorScheme: ColorScheme) {
...text(layer, "sans", interactive_text_size),
// Also supports margin, container, border, etc.
},
icon: {
color: foreground(layer, "on"),
icon: "icons/check_12.svg",
dimensions: {
width: 12,
height: 12,
},
},
icon: svg(foreground(layer, "on"), "icons/check_12.svg", 12, 12),
default: {
...checkboxBase,
background: background(layer, "default"),

31
styles/src/styleTree/workspace.ts
View File

@ -1,6 +1,6 @@
import { ColorScheme } from "../themes/common/colorScheme"
import { withOpacity } from "../utils/color"
import { background, border, borderColor, foreground, text } from "./components"
import { background, border, borderColor, foreground, svg, text } from "./components"
import statusBar from "./statusBar"
import tabBar from "./tabBar"
@ -46,27 +46,14 @@ export default function workspace(colorScheme: ColorScheme) {
width: 256,
height: 256,
},
logo: {
color: withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8),
icon: "icons/logo_96.svg",
dimensions: {
width: 256,
height: 256,
},
},
logoShadow: {
color: withOpacity(
colorScheme.isLight
? "#FFFFFF"
: colorScheme.lowest.base.default.background,
colorScheme.isLight ? 1 : 0.6
),
icon: "icons/logo_96.svg",
dimensions: {
width: 256,
height: 256,
},
},
logo: svg(withOpacity("#000000", colorScheme.isLight ? 0.6 : 0.8), "icons/logo_96.svg", 256, 256),
logoShadow: svg(withOpacity(
colorScheme.isLight
? "#FFFFFF"
: colorScheme.lowest.base.default.background,
colorScheme.isLight ? 1 : 0.6
), "icons/logo_96.svg", 256, 256),
keyboardHints: {
margin: {
top: 96,