Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore use of vscode-webview-ui-toolkit #3904

Closed
wants to merge 7 commits into from
Closed

Explore use of vscode-webview-ui-toolkit #3904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fdf5cee
Install toolkit
Thomas1664 Aug 30, 2022
bcf12bb
setup
Thomas1664 Aug 30, 2022
11fc7db
Use button from UI toolkit
Thomas1664 Aug 30, 2022
d368f11
Merge branch 'main' into uitk
Thomas1664 Aug 30, 2022
71fc8b6
Merge branch 'main' into uitk
Thomas1664 Sep 2, 2022
d6d37bd
Merge branch 'main' into uitk
Thomas1664 Oct 13, 2022
8b9645d
Test icon buttons
Thomas1664 Oct 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1970,6 +1970,7 @@
"@octokit/rest": "18.2.0",
"@octokit/types": "6.10.0",
"@vscode/extension-telemetry": "0.6.2",
"@vscode/webview-ui-toolkit": "^1.0.1",
"apollo-boost": "^0.4.9",
"apollo-link-context": "1.0.20",
"cross-fetch": "3.1.5",
Expand All @@ -1987,4 +1988,4 @@
"vsls": "^0.3.967"
},
"license": "MIT"
}
}
3 changes: 2 additions & 1 deletion src/github/issueOverview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,8 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
<title>Pull Request #${number}</title>
</head>
<body class="${process.platform}">
<div id=app></div>
<div id=app>
</div>
<script nonce="${nonce}" src="${this._webview!.asWebviewUri(uri).toString()}"></script>
</body>
</html>`;
Expand Down
7 changes: 4 additions & 3 deletions webviews/activityBarView/exit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
import React, { useContext, useState } from 'react';
import { GithubItemStateEnum } from '../../src/github/interface';
import { PullRequest } from '../common/cache';
import PullRequestContext from '../common/context';

const ExitButton = ({ repositoryDefaultBranch, isBusy, onClick }: { repositoryDefaultBranch: string, isBusy: boolean, onClick: () => Promise<void> }) => {
return (<button title="Switch to a different branch than this pull request branch" disabled={isBusy} onClick={onClick}>
return (<VSCodeButton title="Switch to a different branch than this pull request branch" disabled={isBusy} onClick={onClick}>
Checkout '{repositoryDefaultBranch}'
</button>);
</VSCodeButton>);
};

const ExitLink = ({ repositoryDefaultBranch, onClick }: { repositoryDefaultBranch: string, onClick: () => Promise<void> }) => {
Expand Down Expand Up @@ -44,4 +45,4 @@ export const ExitSection = ({ pr }: { pr: PullRequest }) => {
}
</div>
);
};
};
26 changes: 13 additions & 13 deletions webviews/components/comment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ @

*--------------------------------------------------------------------------------------------*/

import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { IComment } from '../../src/common/comment';
import { GithubItemStateEnum } from '../../src/github/interface';
Expand Down Expand Up @@ -220,7 +221,7 @@ export const CommentBody = ({ comment, bodyHTML, body, canApplyPatch }: Embodied

const containsSuggestion = (body || bodyHTML).indexOf('```diff') > -1;
const applyPatchButton = (containsSuggestion && canApplyPatch) ? (
<button onClick={() => applyPatch(comment)}>Apply Patch</button>
<VSCodeButton onClick={() => applyPatch(comment)}>Apply Patch</VSCodeButton>
) : (
<></>
);
Expand Down Expand Up @@ -311,45 +312,44 @@ export function AddComment({
/>
<div className="form-actions">
{(hasWritePermission || isAuthor) && !isIssue ? (
<button
<VSCodeButton
id="close"
className="secondary"
appearance='secondary'
disabled={isBusy || state !== GithubItemStateEnum.Open}
onClick={onClick}
data-command="close"
>
Close Pull Request
</button>
</VSCodeButton>
) : null}
{!isIssue && !isAuthor ? (
<button
<VSCodeButton
id="request-changes"
disabled={isBusy || !pendingCommentText}
className="secondary"
onClick={onClick}
data-command="requestChanges"
>
{continueOnGitHub ? 'Request changes on github.com' : 'Request Changes'}
</button>
</VSCodeButton>
) : null}
{!isIssue && !isAuthor ? (
<button
<VSCodeButton
id="approve"
className="secondary"
appearance='secondary'
disabled={isBusy || currentUserReviewState === 'APPROVED'}
onClick={onClick}
data-command="approve"
>
{continueOnGitHub ? 'Approve on github.com' : 'Approve'}
</button>
</VSCodeButton>
) : null}
<input
<VSCodeButton
id="reply"
value="Comment"
type="submit"
className="secondary"
appearance='primary'
disabled={isBusy || !pendingCommentText}
/>
>Comment</VSCodeButton>
</div>
</form>
);
Expand Down
25 changes: 13 additions & 12 deletions webviews/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
import React, { useContext, useState } from 'react';
import { GithubItemStateEnum } from '../../src/github/interface';
import { PullRequest } from '../common/cache';
Expand Down Expand Up @@ -67,11 +68,11 @@ function Title({ title, number, url, canEdit, isCurrentlyCheckedOut, isIssue, re
}}
>
<textarea name="text" style={{ width: '100%' }} defaultValue={currentTitle}></textarea>
<div className="form-actions">
<button className="secondary" onClick={() => setEditMode(false)}>
<div className="form-actions button-group">
<VSCodeButton appearance='secondary' onClick={() => setEditMode(false)}>
Cancel
</button>
<input type="submit" value="Update" />
</VSCodeButton>
<VSCodeButton type="submit">Update</VSCodeButton>
</div>
</form>
) : (
Expand All @@ -91,16 +92,16 @@ function Title({ title, number, url, canEdit, isCurrentlyCheckedOut, isIssue, re
*/}
</div>
{canEdit && !inEditMode ? (
<div className="flex-action-bar comment-actions">
<div className="flex-action-bar comment-actions button-group">
{
<button title="Edit" onClick={() => setEditMode(true)}>
<VSCodeButton appearance='icon' title="Edit" onClick={() => setEditMode(true)}>
{editIcon}
</button>
</VSCodeButton>
}
{
<button title="Copy Link" onClick={copyPrLink}>
<VSCodeButton appearance='icon' title="Copy Link" onClick={copyPrLink}>
{copyIcon}
</button>
</VSCodeButton>
}
</div>
) : (
Expand All @@ -109,7 +110,7 @@ function Title({ title, number, url, canEdit, isCurrentlyCheckedOut, isIssue, re
</div>
<div className="button-group">
<CheckoutButtons {...{ isCurrentlyCheckedOut, isIssue, repositoryDefaultBranch }} />
<button onClick={refresh}>Refresh</button>
<VSCodeButton onClick={refresh}>Refresh</VSCodeButton>
</div>
</div>
);
Expand Down Expand Up @@ -144,9 +145,9 @@ const CheckoutButtons = ({ isCurrentlyCheckedOut, isIssue, repositoryDefaultBran
<button aria-live="polite" className="checkedOut" disabled>
{checkIcon} Checked Out
</button>
<button aria-live="polite" title="Switch to a different branch than this pull request branch"disabled={isBusy} onClick={() => onClick('exitReviewMode')}>
<VSCodeButton aria-live="polite" title="Switch to a different branch than this pull request branch"disabled={isBusy} onClick={() => onClick('exitReviewMode')}>
Checkout '{repositoryDefaultBranch}'
</button>
</VSCodeButton>
</>
);
} else if (!isIssue) {
Expand Down
5 changes: 3 additions & 2 deletions webviews/components/merge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { VSCodeButton } from '@vscode/webview-ui-toolkit/react'
import React, { ChangeEventHandler, Context, useCallback, useContext, useEffect, useReducer, useRef, useState } from 'react';
import { groupBy } from '../../src/common/utils';
import { GithubItemStateEnum, MergeMethod, PullRequestMergeability } from '../../src/github/interface';
Expand Down Expand Up @@ -181,9 +182,9 @@ export const ReadyForReview = ({ isSimple }: { isSimple: boolean }) => {
return (
<div className="ready-for-review-container">
<div className="select-control">
<button className="ready-for-review-button" disabled={isBusy} onClick={markReadyForReview}>
<VSCodeButton className="ready-for-review-button" disabled={isBusy} onClick={markReadyForReview}>
Ready for review
</button>
</VSCodeButton>
</div>
{isSimple ? '' : <div className="ready-for-review-icon">{alertIcon}</div>}
<div className="ready-for-review-heading">This pull request is still a work in progress.</div>
Expand Down
9 changes: 5 additions & 4 deletions webviews/components/timeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/

import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
import React, { useContext, useRef, useState } from 'react';

import { IComment } from '../../src/common/comment';
Expand Down Expand Up @@ -185,9 +186,9 @@ function CommentThread({ thread, event }: { thread: IComment[]; event: ReviewEve
)}
{!resolved && !revealed ? <span className='unresolvedLabel'>Unresolved</span> : null}
</div>
<button className="secondary" onClick={() => setRevealed(!revealed)}>
<VSCodeButton appearance='secondary' onClick={() => setRevealed(!revealed)}>
{revealed ? 'Hide' : 'Show'}
</button>
</VSCodeButton>
</div>
{revealed ? (
<div>
Expand All @@ -197,9 +198,9 @@ function CommentThread({ thread, event }: { thread: IComment[]; event: ReviewEve
))}
{resolvePermission ?
<div className='comment-container comment review-comment'>
<button className="secondary comment-resolve" onClick={() => toggleResolve()}>
<VSCodeButton appearance='secondary' className="comment-resolve" onClick={() => toggleResolve()}>
{resolved ? 'Unresolve Conversation' : 'Resolve Conversation'}
</button>
</VSCodeButton>
</div>
: null}
</div>
Expand Down
4 changes: 2 additions & 2 deletions webviews/editorWebview/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,11 +407,11 @@ body button .icon {
white-space: nowrap;
}

body .overview-title .button-group button {
body .overview-title .button-group button, body .overview-title .button-group vscode-button {
display: flex;
}

body .overview-title .button-group button:last-child {
body .overview-title .button-group button:last-child, body .overview-title .button-group vscode-button:last-child {
margin-left: 10px;
}

Expand Down
Loading