Browse Source

Updates welcome view links when not available

main
Keith Daulton 1 year ago
parent
commit
25f8457c5b
5 changed files with 162 additions and 18 deletions
  1. +71
    -11
      src/webviews/apps/welcome/welcome.html
  2. +12
    -1
      src/webviews/apps/welcome/welcome.scss
  3. +39
    -1
      src/webviews/apps/welcome/welcome.ts
  4. +7
    -1
      src/webviews/welcome/protocol.ts
  5. +33
    -4
      src/webviews/welcome/welcomeWebview.ts

+ 71
- 11
src/webviews/apps/welcome/welcome.html View File

@ -294,7 +294,11 @@
<h3>Commit Graph ✨</h3> <h3>Commit Graph ✨</h3>
<p> <p>
The The
<a href="command:gitlens.showGraph" title="Open Commit Graph" aria-label="Open Commit Graph"
<a
href="command:gitlens.showGraph"
data-requires="repo"
title="Open Commit Graph"
aria-label="Open Commit Graph"
>Commit Graph</a >Commit Graph</a
> >
helps you easily visualize and keep track of all work in progress<br /> helps you easily visualize and keep track of all work in progress<br />
@ -401,76 +405,109 @@
<h3>Side Bar Views</h3> <h3>Side Bar Views</h3>
<p>Powerful views into Git that don't come with VS Code</p> <p>Powerful views into Git that don't come with VS Code</p>
<nav class="welcome__views-nav" aria-label="Sidebar view links"> <nav class="welcome__views-nav" aria-label="Sidebar view links">
<a href="command:gitlens.showCommitsView" title="Show Commits view" aria-label="Show Commits view"
<a
href="command:gitlens.showCommitsView"
data-requires="repo"
title="Show Commits view"
aria-label="Show Commits view"
><code-icon icon="gl-commits-view" size="20"></code-icon>Commits</a ><code-icon icon="gl-commits-view" size="20"></code-icon>Commits</a
> >
<a <a
href="command:gitlens.showCommitDetailsView" href="command:gitlens.showCommitDetailsView"
data-requires="repo"
title="Show Commit Details view" title="Show Commit Details view"
aria-label="Show Commit Details view" aria-label="Show Commit Details view"
><code-icon icon="gl-commit-view" size="20"></code-icon>Commit Details</a ><code-icon icon="gl-commit-view" size="20"></code-icon>Commit Details</a
> >
<a <a
href="command:gitlens.showRepositoriesView" href="command:gitlens.showRepositoriesView"
data-requires="repo"
title="Show Repositories view" title="Show Repositories view"
aria-label="Show Repositories view" aria-label="Show Repositories view"
><code-icon icon="gl-repositories-view" size="20"></code-icon>Repositories</a ><code-icon icon="gl-repositories-view" size="20"></code-icon>Repositories</a
> >
<a <a
href="command:gitlens.showFileHistoryView" href="command:gitlens.showFileHistoryView"
data-requires="repo"
title="Show File History view" title="Show File History view"
aria-label="Show File History view" aria-label="Show File History view"
><code-icon icon="gl-history-view" size="20"></code-icon>File History</a ><code-icon icon="gl-history-view" size="20"></code-icon>File History</a
> >
<a <a
href="command:gitlens.showTimelineView" href="command:gitlens.showTimelineView"
data-requires="repo"
title="Show Visual File History view" title="Show Visual File History view"
aria-label="Show Visual File History view" aria-label="Show Visual File History view"
><code-icon icon="graph-scatter" size="20"></code-icon>Visual File History ✨</a ><code-icon icon="graph-scatter" size="20"></code-icon>Visual File History ✨</a
> >
<a <a
href="command:gitlens.showLineHistoryView" href="command:gitlens.showLineHistoryView"
data-requires="repo"
title="Show Line History view" title="Show Line History view"
aria-label="Show Line History view" aria-label="Show Line History view"
><code-icon icon="gl-history-view" size="20"></code-icon>Line History</a ><code-icon icon="gl-history-view" size="20"></code-icon>Line History</a
> >
<a <a
href="command:gitlens.showBranchesView" href="command:gitlens.showBranchesView"
data-requires="repo"
title="Show Branches view" title="Show Branches view"
aria-label="Show Branches view" aria-label="Show Branches view"
><code-icon icon="gl-branches-view" size="20"></code-icon>Branches</a ><code-icon icon="gl-branches-view" size="20"></code-icon>Branches</a
> >
<a href="command:gitlens.showRemotesView" title="Show Remotes view" aria-label="Show Remotes view"
<a
href="command:gitlens.showRemotesView"
data-requires="repo"
title="Show Remotes view"
aria-label="Show Remotes view"
><code-icon icon="gl-remotes-view" size="20"></code-icon>Remotes</a ><code-icon icon="gl-remotes-view" size="20"></code-icon>Remotes</a
> >
<a href="command:gitlens.showStashesView" title="Show Stashes view" aria-label="Show Stashes view"
<a
href="command:gitlens.showStashesView"
data-requires="repo"
title="Show Stashes view"
aria-label="Show Stashes view"
><code-icon icon="gl-stashes-view" size="20"></code-icon>Stashes</a ><code-icon icon="gl-stashes-view" size="20"></code-icon>Stashes</a
> >
<a href="command:gitlens.showTagsView" title="Show Tags view" aria-label="Show Tags view"
<a
href="command:gitlens.showTagsView"
data-requires="repo"
title="Show Tags view"
aria-label="Show Tags view"
><code-icon icon="gl-tags-view" size="20"></code-icon>Tags</a ><code-icon icon="gl-tags-view" size="20"></code-icon>Tags</a
> >
<a <a
href="command:gitlens.showWorktreesView" href="command:gitlens.showWorktreesView"
data-requires="repo"
title="Show Worktrees view" title="Show Worktrees view"
aria-label="Show Worktrees view" aria-label="Show Worktrees view"
><code-icon icon="gl-worktrees-view" size="20"></code-icon>Worktrees ✨</a ><code-icon icon="gl-worktrees-view" size="20"></code-icon>Worktrees ✨</a
> >
<a href="command:gitlens.showContributorsView"
<a href="command:gitlens.showContributorsView" data-requires="repo"
><code-icon icon="gl-contributors-view" size="20"></code-icon>Contributors</a ><code-icon icon="gl-contributors-view" size="20"></code-icon>Contributors</a
> >
<a <a
href="command:gitlens.showSearchAndCompareView" href="command:gitlens.showSearchAndCompareView"
data-requires="repo"
title="Show Search &amp; Compare view" title="Show Search &amp; Compare view"
aria-label="Show Search &amp; Compare view" aria-label="Show Search &amp; Compare view"
><code-icon icon="gl-search-view" size="20"></code-icon>Search &amp; Compare</a ><code-icon icon="gl-search-view" size="20"></code-icon>Search &amp; Compare</a
> >
</nav> </nav>
<p data-requires="norepo">
<code-icon icon="question"></code-icon> Features which need a repository are currently unavailable
</p>
<h3>Focus ✨</h3> <h3>Focus ✨</h3>
<p> <p>
The The
<a href="command:gitlens.showFocusPage" title="Open Focus" aria-label="Open Focus">Focus</a> view
helps you focus on what's important by providing you with a comprehensive list of all your pull
<a
href="command:gitlens.showFocusPage"
data-requires="repo"
title="Open Focus"
aria-label="Open Focus"
>Focus</a
>
view helps you focus on what's important by providing you with a comprehensive list of all your pull
requests and issues on your GitHub repos. requests and issues on your GitHub repos.
</p> </p>
@ -522,12 +559,14 @@
> >
<a <a
href="command:workbench.view.scm" href="command:workbench.view.scm"
data-requires="repo"
title="Show Source Control Side Bar" title="Show Source Control Side Bar"
aria-label="Show GitLens Side Bar" aria-label="Show GitLens Side Bar"
><code-icon icon="source-control"></code-icon><span>Source Control</span></a ><code-icon icon="source-control"></code-icon><span>Source Control</span></a
> >
<a <a
href="command:workbench.view.extension.gitlensInspect" href="command:workbench.view.extension.gitlensInspect"
data-requires="repo"
title="Show GitLens Inspect Side Bar" title="Show GitLens Inspect Side Bar"
aria-label="Show GitLens Inspect Side Bar" aria-label="Show GitLens Inspect Side Bar"
><code-icon icon="gl-gitlens-inspect"></code-icon><span>GitLens Inspect</span></a ><code-icon icon="gl-gitlens-inspect"></code-icon><span>GitLens Inspect</span></a
@ -535,41 +574,58 @@
</nav> </nav>
<nav class="welcome__resources-nav"> <nav class="welcome__resources-nav">
<h3 class="t-eyebrow">Popular views</h3> <h3 class="t-eyebrow">Popular views</h3>
<a href="command:gitlens.showGraph" title="Show Commit Graph" aria-label="Show Commit Graph"
<a
href="command:gitlens.showGraph"
data-requires="repo"
title="Show Commit Graph"
aria-label="Show Commit Graph"
><code-icon icon="gl-graph"></code-icon><span>Commit Graph ✨</span></a ><code-icon icon="gl-graph"></code-icon><span>Commit Graph ✨</span></a
> >
<a href="command:gitlens.showFocusPage" title="Open Focus" aria-label="Open Focus"
<a
href="command:gitlens.showFocusPage"
data-requires="repo"
title="Open Focus"
aria-label="Open Focus"
><code-icon icon="target"></code-icon><span>Focus ✨</span></a ><code-icon icon="target"></code-icon><span>Focus ✨</span></a
> >
<a href="command:gitlens.showCommitsView" title="Show Commits view" aria-label="Show Commits view"
<a
href="command:gitlens.showCommitsView"
data-requires="repo"
title="Show Commits view"
aria-label="Show Commits view"
><code-icon icon="gl-commits-view"></code-icon><span>Commits view</span></a ><code-icon icon="gl-commits-view"></code-icon><span>Commits view</span></a
> >
<a <a
href="command:gitlens.showCommitDetailsView" href="command:gitlens.showCommitDetailsView"
data-requires="repo"
title="Show Commit Details view" title="Show Commit Details view"
aria-label="Show Commit Details view" aria-label="Show Commit Details view"
><code-icon icon="gl-commit-view"></code-icon><span>Commit Details view</span></a ><code-icon icon="gl-commit-view"></code-icon><span>Commit Details view</span></a
> >
<a <a
href="command:gitlens.showFileHistoryView" href="command:gitlens.showFileHistoryView"
data-requires="repo"
title="Show File History view" title="Show File History view"
aria-label="Show File History view" aria-label="Show File History view"
><code-icon icon="gl-history-view"></code-icon><span>File History view</span></a ><code-icon icon="gl-history-view"></code-icon><span>File History view</span></a
> >
<a <a
href="command:gitlens.showTimelineView" href="command:gitlens.showTimelineView"
data-requires="repo"
title="Show Visual File History view" title="Show Visual File History view"
aria-label="Show Visual File History view" aria-label="Show Visual File History view"
><code-icon icon="graph-scatter"></code-icon><span>Visual File History ✨</span></a ><code-icon icon="graph-scatter"></code-icon><span>Visual File History ✨</span></a
> >
<a <a
href="command:gitlens.showSearchAndCompareView" href="command:gitlens.showSearchAndCompareView"
data-requires="repo"
title="Show Search &amp; Compare view" title="Show Search &amp; Compare view"
aria-label="Show Search &amp; Compare view" aria-label="Show Search &amp; Compare view"
><code-icon icon="gl-search-view"></code-icon>Search &amp; Compare</a ><code-icon icon="gl-search-view"></code-icon>Search &amp; Compare</a
> >
<a <a
href="command:gitlens.showWorktreesView" href="command:gitlens.showWorktreesView"
data-requires="repo"
title="Show Worktrees view" title="Show Worktrees view"
aria-label="Show Worktrees view" aria-label="Show Worktrees view"
><code-icon icon="gl-worktrees-view"></code-icon>Worktrees ✨</a ><code-icon icon="gl-worktrees-view"></code-icon>Worktrees ✨</a
@ -585,6 +641,7 @@
> >
<a <a
href="command:gitlens.gitCommands" href="command:gitlens.gitCommands"
data-requires="repo"
title="Open Git Command Palette" title="Open Git Command Palette"
aria-label="Open Git Command Palette" aria-label="Open Git Command Palette"
><code-icon icon="symbol-color"></code-icon><span>Git Command Palette</span></a ><code-icon icon="symbol-color"></code-icon><span>Git Command Palette</span></a
@ -640,6 +697,9 @@
</main> </main>
<footer> <footer>
<p>✨ Requires a trial or subscription to use this on privately hosted repos</p> <p>✨ Requires a trial or subscription to use this on privately hosted repos</p>
<p data-requires="norepo">
<code-icon icon="question"></code-icon> Features which need a repository are currently unavailable
</p>
</footer> </footer>
#{endOfBody} #{endOfBody}
</body> </body>

+ 12
- 1
src/webviews/apps/welcome/welcome.scss View File

@ -316,7 +316,7 @@ gk-card p {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 0.64rem 2rem; gap: 0.64rem 2rem;
// width: min-content; // width: min-content;
margin: 0 1rem;
margin: 0 1rem 1.3rem;
> * { > * {
white-space: nowrap; white-space: nowrap;
@ -841,3 +841,14 @@ body[data-feature-revision='off'] {
} }
} }
} }
body {
&[data-repos='blocked'] [data-requires='repo'] {
opacity: 0.5;
cursor: not-allowed;
}
&:not([data-repos='blocked']) [data-requires='norepo'] {
display: none;
}
}

+ 39
- 1
src/webviews/apps/welcome/welcome.ts View File

@ -1,8 +1,10 @@
/*global*/ /*global*/
import './welcome.scss'; import './welcome.scss';
import type { Disposable } from 'vscode'; import type { Disposable } from 'vscode';
import type { IpcMessage } from '../../protocol';
import { onIpc } from '../../protocol';
import type { State } from '../../welcome/protocol'; import type { State } from '../../welcome/protocol';
import { UpdateConfigurationCommandType } from '../../welcome/protocol';
import { DidChangeRepositoriesType, UpdateConfigurationCommandType } from '../../welcome/protocol';
import { App } from '../shared/appBase'; import { App } from '../shared/appBase';
import { DOM } from '../shared/dom'; import { DOM } from '../shared/dom';
// import { Snow } from '../shared/snow'; // import { Snow } from '../shared/snow';
@ -38,10 +40,40 @@ export class WelcomeApp extends App {
document.getElementById(hoverTargetId)?.setAttribute('hovering', 'false'); document.getElementById(hoverTargetId)?.setAttribute('hovering', 'false');
}), }),
DOM.on('[data-requires="repo"]', 'click', (e, target: HTMLElement) => this.onRepoFeatureClicked(e, target)),
]; ];
return disposables; return disposables;
} }
protected override onMessageReceived(e: MessageEvent) {
const msg = e.data as IpcMessage;
switch (msg.method) {
case DidChangeRepositoriesType.method:
this.log(`onMessageReceived(${msg.id}): name=${msg.method}`);
onIpc(DidChangeRepositoriesType, msg, params => {
this.state.repoFeaturesBlocked = params.repoFeaturesBlocked;
this.setState(this.state);
this.updateRepoState();
});
break;
default:
super.onMessageReceived?.(e);
break;
}
}
private onRepoFeatureClicked(e: MouseEvent, _target: HTMLElement) {
if (this.state.repoFeaturesBlocked ?? false) {
e.preventDefault();
e.stopPropagation();
return false;
}
return true;
}
private onFeatureToggled(e: Event, target: HTMLElement) { private onFeatureToggled(e: Event, target: HTMLElement) {
const feature = target.dataset.feature; const feature = target.dataset.feature;
if (!feature) return; if (!feature) return;
@ -73,6 +105,7 @@ export class WelcomeApp extends App {
private updateState() { private updateState() {
this.updateVersion(); this.updateVersion();
this.updateFeatures(); this.updateFeatures();
this.updateRepoState();
} }
private updateVersion() { private updateVersion() {
@ -95,6 +128,11 @@ export class WelcomeApp extends App {
const state = document.body.getAttribute(`data-feature-${feature}`); const state = document.body.getAttribute(`data-feature-${feature}`);
this.setFeatureState(feature, state === 'off'); this.setFeatureState(feature, state === 'off');
} }
private updateRepoState() {
const { repoFeaturesBlocked } = this.state;
document.body.dataset.repos = repoFeaturesBlocked ? 'blocked' : 'allowed';
}
} }
new WelcomeApp(); new WelcomeApp();

+ 7
- 1
src/webviews/welcome/protocol.ts View File

@ -1,5 +1,5 @@
import type { Config } from '../../config'; import type { Config } from '../../config';
import { IpcCommandType } from '../protocol';
import { IpcCommandType, IpcNotificationType } from '../protocol';
export interface State { export interface State {
timestamp: number; timestamp: number;
@ -9,6 +9,7 @@ export interface State {
currentLine: Config['currentLine']['enabled']; currentLine: Config['currentLine']['enabled'];
}; };
customSettings?: Record<string, boolean>; customSettings?: Record<string, boolean>;
repoFeaturesBlocked?: boolean;
} }
export interface UpdateConfigurationParams { export interface UpdateConfigurationParams {
@ -18,3 +19,8 @@ export interface UpdateConfigurationParams {
export const UpdateConfigurationCommandType = new IpcCommandType<UpdateConfigurationParams>( export const UpdateConfigurationCommandType = new IpcCommandType<UpdateConfigurationParams>(
'welcome/configuration/update', 'welcome/configuration/update',
); );
export interface DidChangeRepositoriesParams {
repoFeaturesBlocked?: boolean;
}
export const DidChangeRepositoriesType = new IpcNotificationType<DidChangeRepositoriesParams>('repositories/didChange');

+ 33
- 4
src/webviews/welcome/welcomeWebview.ts View File

@ -1,17 +1,28 @@
import { Disposable } from 'vscode';
import { Disposable, workspace } from 'vscode';
import type { Container } from '../../container'; import type { Container } from '../../container';
import { configuration } from '../../system/configuration'; import { configuration } from '../../system/configuration';
import type { IpcMessage } from '../protocol'; import type { IpcMessage } from '../protocol';
import { onIpc } from '../protocol'; import { onIpc } from '../protocol';
import type { WebviewController, WebviewProvider } from '../webviewController'; import type { WebviewController, WebviewProvider } from '../webviewController';
import type { State, UpdateConfigurationParams } from './protocol';
import { UpdateConfigurationCommandType } from './protocol';
import type { DidChangeRepositoriesParams, State, UpdateConfigurationParams } from './protocol';
import { DidChangeRepositoriesType, UpdateConfigurationCommandType } from './protocol';
const emptyDisposable = Object.freeze({
dispose: () => {
/* noop */
},
});
export class WelcomeWebviewProvider implements WebviewProvider<State> { export class WelcomeWebviewProvider implements WebviewProvider<State> {
private readonly _disposable: Disposable; private readonly _disposable: Disposable;
constructor(private readonly container: Container, private readonly host: WebviewController<State>) { constructor(private readonly container: Container, private readonly host: WebviewController<State>) {
this._disposable = Disposable.from();
this._disposable = Disposable.from(
this.container.git.onDidChangeRepositories(this.notifyDidChangeRepositories, this),
!workspace.isTrusted
? workspace.onDidGrantWorkspaceTrust(this.notifyDidChangeRepositories, this)
: emptyDisposable,
);
} }
dispose() { dispose() {
@ -19,6 +30,8 @@ export class WelcomeWebviewProvider implements WebviewProvider {
} }
includeBootstrap(): State { includeBootstrap(): State {
const { repoFeaturesBlocked } = this.getRepositoriesState();
return { return {
timestamp: Date.now(), timestamp: Date.now(),
version: this.container.version, version: this.container.version,
@ -27,6 +40,7 @@ export class WelcomeWebviewProvider implements WebviewProvider {
codeLens: configuration.get('codeLens.enabled'), codeLens: configuration.get('codeLens.enabled'),
currentLine: configuration.get('currentLine.enabled'), currentLine: configuration.get('currentLine.enabled'),
}, },
repoFeaturesBlocked: repoFeaturesBlocked,
}; };
} }
@ -38,7 +52,22 @@ export class WelcomeWebviewProvider implements WebviewProvider {
} }
} }
private getRepositoriesState(): DidChangeRepositoriesParams {
// const count = this.container.git.repositoryCount;
const openCount = this.container.git.openRepositoryCount;
const hasUnsafe = this.container.git.hasUnsafeRepositories();
const trusted = workspace.isTrusted;
return {
repoFeaturesBlocked: !trusted || openCount === 0 || hasUnsafe,
};
}
private updateConfiguration(params: UpdateConfigurationParams) { private updateConfiguration(params: UpdateConfigurationParams) {
void configuration.updateEffective(`${params.type}.enabled`, params.value); void configuration.updateEffective(`${params.type}.enabled`, params.value);
} }
private notifyDidChangeRepositories() {
void this.host.notify(DidChangeRepositoriesType, this.getRepositoriesState());
}
} }

Loading…
Cancel
Save