Skip to content

Commit b302534

Browse files
d13d13
committed
Updates home to a web component app
1 parent 1eca569 commit b302534

File tree

10 files changed

+1211
-1181
lines changed

10 files changed

+1211
-1181
lines changed

‎src/webviews/apps/home/components/feature-nav.ts

Lines changed: 412 additions & 0 deletions
Large diffs are not rendered by default.

‎src/webviews/apps/home/components/home-nav.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { consume } from '@lit/context';
2+
import { css, html, LitElement } from 'lit';
3+
import { customElement, state } from 'lit/decorators.js';
4+
import { getApplicablePromo } from '../../../../plus/gk/account/promos';
5+
import type { State } from '../../../home/protocol';
6+
import { linkBase } from '../../shared/components/styles/lit/base.css';
7+
import { stateContext } from '../context';
8+
import { inlineNavStyles } from '../home.css';
9+
import '../../shared/components/code-icon';
10+
import '../../shared/components/overlays/tooltip';
11+
import '../../shared/components/promo';
12+
13+
@customElement('gl-home-nav')
14+
export class GlHomeNav extends LitElement {
15+
static override styles = [
16+
linkBase,
17+
inlineNavStyles,
18+
css`
19+
:host {
20+
display: block;
21+
}
22+
`,
23+
];
24+
25+
@consume<State>({ context: stateContext, subscribe: true })
26+
@state()
27+
private _state!: State;
28+
29+
override render() {
30+
return html`
31+
<gl-promo
32+
.promo=${getApplicablePromo(this._state.subscription.state)}
33+
class="promo-banner promo-banner--eyebrow"
34+
id="promo"
35+
type="link"
36+
></gl-promo>
37+
<nav class="inline-nav" id="links" aria-label="Help and Resources">
38+
<div class="inline-nav__group">
39+
<gl-tooltip hoist>
40+
<a
41+
class="inline-nav__link inline-nav__link--text"
42+
href="https://help.gitkraken.com/gitlens/gitlens-release-notes-current/"
43+
aria-label="What's New"
44+
><code-icon icon="megaphone"></code-icon><span>What's New</span></a
45+
>
46+
<span slot="content">What's New</span>
47+
</gl-tooltip>
48+
<gl-tooltip hoist>
49+
<a
50+
class="inline-nav__link inline-nav__link--text"
51+
href="https://help.gitkraken.com/gitlens/gitlens-home/"
52+
aria-label="Help Center"
53+
><code-icon icon="question"></code-icon><span>Help</span></a
54+
>
55+
<span slot="content">Help Center</span>
56+
</gl-tooltip>
57+
<gl-tooltip hoist>
58+
<a
59+
class="inline-nav__link inline-nav__link--text"
60+
href="https://github.com/gitkraken/vscode-gitlens/issues"
61+
aria-label="Feedback"
62+
><code-icon icon="feedback"></code-icon><span>Feedback</span></a
63+
>
64+
<span slot="content">Feedback</span>
65+
</gl-tooltip>
66+
</div>
67+
<div class="inline-nav__group">
68+
<gl-tooltip hoist>
69+
<a
70+
class="inline-nav__link"
71+
href="https://github.com/gitkraken/vscode-gitlens/discussions"
72+
aria-label="GitHub Discussions"
73+
><code-icon icon="comment-discussion"></code-icon
74+
></a>
75+
<span slot="content">GitHub Discussions</span>
76+
</gl-tooltip>
77+
<gl-tooltip hoist>
78+
<a
79+
class="inline-nav__link"
80+
href="https://github.com/gitkraken/vscode-gitlens"
81+
aria-label="GitHub Repo"
82+
><code-icon icon="github"></code-icon
83+
></a>
84+
<span slot="content">GitHub Repo</span>
85+
</gl-tooltip>
86+
<gl-tooltip hoist>
87+
<a class="inline-nav__link" href="https://twitter.com/gitlens" aria-label="@gitlens on Twitter"
88+
><code-icon icon="twitter"></code-icon
89+
></a>
90+
<span slot="content">@gitlens on Twitter</span>
91+
</gl-tooltip>
92+
<gl-tooltip hoist>
93+
<a
94+
class="inline-nav__link"
95+
href=${'https://gitkraken.com/gitlens?utm_source=gitlens-extension&utm_medium=in-app-links&utm_campaign=gitlens-logo-links'}
96+
aria-label="GitLens Website"
97+
><code-icon icon="globe"></code-icon
98+
></a>
99+
<span slot="content">GitLens Website</span>
100+
</gl-tooltip>
101+
</div>
102+
</nav>
103+
`;
104+
}
105+
}

‎src/webviews/apps/home/components/onboarding.ts

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { consume } from '@lit/context';
2+
import { html, LitElement } from 'lit';
3+
import { customElement, state } from 'lit/decorators.js';
4+
import type { State } from '../../../home/protocol';
5+
import { CollapseSectionCommand } from '../../../home/protocol';
6+
import { ipcContext } from '../../shared/context';
7+
import type { HostIpc } from '../../shared/ipc';
8+
import { stateContext } from '../context';
9+
import { alertStyles, buttonStyles } from '../home.css';
10+
import '../../shared/components/button';
11+
import '../../shared/components/code-icon';
12+
import '../../shared/components/overlays/tooltip';
13+
14+
@customElement('gl-onboarding')
15+
export class GlOnboarding extends LitElement {
16+
static override styles = [alertStyles, buttonStyles];
17+
18+
@consume<State>({ context: stateContext, subscribe: true })
19+
@state()
20+
private _state!: State;
21+
22+
@consume<HostIpc>({ context: ipcContext, subscribe: true })
23+
@state()
24+
private _ipc!: HostIpc;
25+
26+
private onSectionExpandClicked(e: MouseEvent, isToggle = false) {
27+
if (isToggle) {
28+
e.stopImmediatePropagation();
29+
}
30+
const target = (e.target as HTMLElement).closest('[data-section-expand]') as HTMLElement;
31+
const section = target?.dataset.sectionExpand;
32+
if (section !== 'walkthrough') {
33+
return;
34+
}
35+
36+
if (isToggle) {
37+
this.updateCollapsedSections(!this._state.walkthroughCollapsed);
38+
return;
39+
}
40+
41+
this.updateCollapsedSections(false);
42+
}
43+
44+
private updateCollapsedSections(toggle = this._state.walkthroughCollapsed) {
45+
this._state.walkthroughCollapsed = toggle;
46+
this.requestUpdate();
47+
this._ipc.sendCommand(CollapseSectionCommand, {
48+
section: 'walkthrough',
49+
collapsed: toggle,
50+
});
51+
}
52+
53+
override render() {
54+
return html`
55+
<div
56+
id="section-walkthrough"
57+
data-section-expand="walkthrough"
58+
class="alert${this._state.walkthroughCollapsed ? ' is-collapsed' : ''}"
59+
@click=${(e: MouseEvent) => this.onSectionExpandClicked(e)}
60+
>
61+
<h1 class="alert__title">Get Started with GitLens</h1>
62+
<div class="alert__description">
63+
<p>Explore all of the powerful features in GitLens</p>
64+
<p class="button-container button-container--trio">
65+
<gl-button
66+
appearance="secondary"
67+
full
68+
href="command:gitlens.showWelcomePage"
69+
aria-label="Open Welcome"
70+
>Start Here (Welcome)</gl-button
71+
>
72+
<span class="button-group button-group--single">
73+
<gl-button appearance="secondary" full href="command:gitlens.getStarted?%22home%22"
74+
>Walkthrough</gl-button
75+
>
76+
<gl-button
77+
appearance="secondary"
78+
full
79+
href=${'https://youtu.be/oJdlGtsbc3U?utm_source=inapp&utm_medium=home_banner&utm_id=GitLens+tutorial'}
80+
aria-label="Watch the GitLens Tutorial video"
81+
tooltip="Watch the GitLens Tutorial video"
82+
><code-icon icon="vm-running" slot="prefix"></code-icon>Tutorial</gl-button
83+
>
84+
</span>
85+
</p>
86+
</div>
87+
<a
88+
href="#"
89+
class="alert__close"
90+
data-section-toggle="walkthrough"
91+
@click=${(e: MouseEvent) => this.onSectionExpandClicked(e, true)}
92+
>
93+
<gl-tooltip hoist>
94+
<code-icon icon="chevron-down" aria-label="Collapse walkthrough section"></code-icon>
95+
<span slot="content">Collapse</span>
96+
</gl-tooltip>
97+
<gl-tooltip hoist>
98+
<code-icon icon="chevron-right" aria-label="Expand walkthrough section"></code-icon>
99+
<span slot="content">Expand</span>
100+
</gl-tooltip>
101+
</a>
102+
</div>
103+
`;
104+
}
105+
}

‎src/webviews/apps/home/components/repo-alerts.ts

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { consume } from '@lit/context';
2+
import { css, html } from 'lit';
3+
import { customElement, state } from 'lit/decorators.js';
4+
import { when } from 'lit/directives/when.js';
5+
import type { State } from '../../../home/protocol';
6+
import { GlElement } from '../../shared/components/element';
7+
import { linkBase } from '../../shared/components/styles/lit/base.css';
8+
import { stateContext } from '../context';
9+
import { alertStyles } from '../home.css';
10+
import '../../shared/components/button';
11+
12+
@customElement('gl-repo-alerts')
13+
export class GlRepoAlerts extends GlElement {
14+
static override styles = [
15+
linkBase,
16+
alertStyles,
17+
css`
18+
.alert {
19+
margin-bottom: 0;
20+
}
21+
`,
22+
];
23+
24+
@consume<State>({ context: stateContext, subscribe: true })
25+
@state()
26+
private _state!: State;
27+
28+
get alertVisibility() {
29+
const sections = {
30+
header: false,
31+
untrusted: false,
32+
noRepo: false,
33+
unsafeRepo: false,
34+
};
35+
if (this._state == null) {
36+
return sections;
37+
}
38+
39+
if (!this._state.repositories.trusted) {
40+
sections.header = true;
41+
sections.untrusted = true;
42+
} else if (this._state.repositories.openCount === 0) {
43+
sections.header = true;
44+
sections.noRepo = true;
45+
} else if (this._state.repositories.hasUnsafe) {
46+
sections.header = true;
47+
sections.unsafeRepo = true;
48+
}
49+
50+
return sections;
51+
}
52+
53+
override render() {
54+
if (this._state == null || !this.alertVisibility.header) {
55+
return;
56+
}
57+
58+
return html`
59+
${when(
60+
this.alertVisibility.noRepo,
61+
() => html`
62+
<div id="no-repo-alert" class="alert alert--info mb-0">
63+
<h1 class="alert__title">No repository detected</h1>
64+
<div class="alert__description">
65+
<p>
66+
To use GitLens, open a folder containing a git repository or clone from a URL from the
67+
Explorer.
68+
</p>
69+
<p class="centered">
70+
<gl-button class="is-basic" href="command:workbench.view.explorer"
71+
>Open a Folder or Repository</gl-button
72+
>
73+
</p>
74+
<p class="mb-0">
75+
If you have opened a folder with a repository, please let us know by
76+
<a class="one-line" href="https://github.com/gitkraken/vscode-gitlens/issues/new/choose"
77+
>creating an Issue</a
78+
>.
79+
</p>
80+
</div>
81+
</div>
82+
`,
83+
)}
84+
${when(
85+
this.alertVisibility.unsafeRepo,
86+
() => html`
87+
<div id="unsafe-repo-alert" class="alert alert--info mb-0">
88+
<h1 class="alert__title">Unsafe repository</h1>
89+
<div class="alert__description">
90+
<p>
91+
Unable to open any repositories as Git blocked them as potentially unsafe, due to the
92+
folder(s) not being owned by the current user.
93+
</p>
94+
<p class="centered">
95+
<gl-button class="is-basic" href="command:workbench.view.scm"
96+
>Manage in Source Control</gl-button
97+
>
98+
</p>
99+
</div>
100+
</div>
101+
`,
102+
)}
103+
${when(
104+
this.alertVisibility.untrusted,
105+
() => html`
106+
<div id="untrusted-alert" class="alert alert--info mb-0" aria-hidden="true">
107+
<h1 class="alert__title">Untrusted workspace</h1>
108+
<div class="alert__description">
109+
<p>Unable to open repositories in Restricted Mode.</p>
110+
<p class="centered">
111+
<gl-button class="is-basic" href="command:workbench.trust.manage"
112+
>Manage Workspace Trust</gl-button
113+
>
114+
</p>
115+
</div>
116+
</div>
117+
`,
118+
)}
119+
`;
120+
}
121+
}

0 commit comments

Comments
 (0)