8000 feat: port over to VSCode Webview UI Toolkit (#18) · githubocto/flat-editor@0a3dbf5 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0a3dbf5

Browse files
mattrothenbergmattrothenberg
authored
feat: port over to VSCode Webview UI Toolkit (#18)
1 parent a92e976 commit 0a3dbf5

18 files changed

+753
-1624
lines changed

‎package.json

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,6 @@
117117
"@snowpack/plugin-dotenv": "^2.0.5",
118118
"@snowpack/plugin-postcss": "^1.2.1",
119119
"@snowpack/plugin-typescript": "^1.2.1",
120-
"@tailwindcss/forms": "^0.2.1",
121-
"@tailwindcss/jit": "^0.1.8",
122120
"@types/lodash-es": "^4.17.4",
123121
"@types/node": "^12.12.0",
124122
"@types/react": "^17.0.3",
@@ -133,11 +131,10 @@
133131
"eslint": "^7.21.0",
134132
"nodemon": "^2.0.7",
135133
"npm-run-all": "^4.1.5",
136-
"postcss": "^8.2.10",
137-
"postcss-nested": "^5.0.5",
134+
"postcss": "^8.4.5",
138135
"prettier": "^2.2.1",
139136
"snowpack": "^3.1.0",
140-
"tailwindcss": "^2.0.4",
137+
"tailwindcss": "^3.0.17",
141138
"ts-loader": "^8.1.0",
142139
"typescript": "^4.2.2",
143140
"webpack": "^5.30.0",
@@ -146,24 +143,22 @@
146143
"dependencies": {
147144
"@octokit/rest": "^18.5.2",
148145
"@radix-ui/react-dropdown-menu": "^0.0.17",
146+
"@reach/combobox": "^0.16.5",
149147
"@types/isomorphic-fetch": "^0.0.35",
148+
"@vscode/codicons": "^0.0.27",
150149
"@vscode/webview-ui-toolkit": "^0.9.0",
151-
"classcat": "^5.0.3",
152-
"cronstrue": "^1.110.0",
153-
"downshift": "^6.1.2",
150+
"cronstrue": "^1.123.0",
154151
"fast-glob": "^3.2.5",
155-
"formik": "^2.2.6",
156152
"git-url-parse": "^11.4.4",
157153
"immer": "^9.0.1",
158154
"isomorphic-fetch": "^3.0.0",
159155
"lodash-es": "^4.17.21",
160156
"nanoid": "^3.1.22",
161157
"react": "^17.0.1",
162158
"react-dom": "^17.0.1",
163-
"reakit": "^1.3.6",
159+
"react-error-boundary": "^3.1.4",
164160
"ts-debounce": "^3.0.0",
165161
"tweetsodium": "0.0.4",
166-
"vscode-codicons": "^0.0.15",
167162
"yaml": "^2.0.0-4",
168163
"yup": "^0.32.9",
169164
"zod": "^3.0.0-alpha.33",

‎postcss.config.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
// postcss.config.js
2-
// Taken from: https://tailwindcss.com/docs/installation#using-tailwind-with-postcss
31
module.exports = {
42
plugins: {
5-
// ...
6-
'@tailwindcss/jit': {},
7-
'postcss-nested': {},
3+
tailwindcss: {},
84
autoprefixer: {},
9-
// ...
105
},
116
}

‎snowpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ module.exports = {
33
mount: {
44
'src/webviews/public': { url: '/', static: true },
55
'src/webviews/src': { url: '/' },
6+
'node_modules/@vscode/codicons/dist': { url: '/public', static: true },
67
},
78
plugins: [
89
'@snowpack/plugin-dotenv',

‎src/flatConfigEditor.ts

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -144,23 +144,10 @@ export class FlatConfigEditor implements vscode.CustomTextEditorProvider {
144144
const styleVSCodeUri = webview.asWebviewUri(
145145
vscode.Uri.joinPath(this.context.extensionUri, 'out/webviews/index.css')
146146
)
147-
148147
const codiconsUri = webview.asWebviewUri(
149148
vscode.Uri.joinPath(
150149
this.context.extensionUri,
151-
'node_modules',
152-
'vscode-codicons',
153-
'dist',
154-
'codicon.css'
155-
)
156-
)
157-
const codiconsFontUri = webview.asWebviewUri(
158-
vscode.Uri.joinPath(
159-
this.context.extensionUri,
160-
'node_modules',
161-
'vscode-codicons',
162-
'dist',
163-
'codicon.ttf'
150+
'out/webviews/public/codicon.css'
164151
)
165152
)
166153

@@ -218,7 +205,7 @@ export class FlatConfigEditor implements vscode.CustomTextEditorProvider {
218205
Use a content security policy to only allow loading images from https or from our extension directory,
219206
and only allow scripts that have a specific nonce.
220207
-->
221-
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} 'self' data:; style-src ${webview.cspSource} ${codiconsUri}; script-src 'nonce-${nonce}'; font-src ${codiconsFontUri};">
208+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${webview.cspSource} 'self' data:; style-src ${webview.cspSource}; script-src 'nonce-${nonce}'; font-src ${webview.cspSource};">
222209
223210
<meta name="viewport" content="width=device-width, initial-scale=1.0">
224211
@@ -451,6 +438,8 @@ export class FlatConfigEditor implements vscode.CustomTextEditorProvider {
451438
webviewPanel: vscode.WebviewPanel,
452439
url: string
453440
) => {
441+
// FIX: For whatever reason, we're getting an undefined URL when the extension mounts with a certain Flat YML
442+
if (!url) return
454443
const res = await fetch(url)
455444
const contents = await res.text()
456445

‎src/webviews/src/App.tsx

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ import { flatStateValidationSchema } from './validation'
88
import { VSCodeAPI } from './VSCodeAPI'
99
import { FlatStep, PullSqlConfig } from '../../types'
1010
import { ErrorState } from './error-state'
11+
import {
12+
VSCodeButton,
13+
VSCodeDivider,
14+
VSCodeLink,
15+
} from '@vscode/webview-ui-toolkit/react'
1116

1217
interface AppProps {}
1318

@@ -77,53 +82,44 @@ function App({}: AppProps) {
7782
const actionsUrl = gitRepo && `https://github.com/${gitRepo}/actions`
7883

7984
return (
80-
<div className="p-4">
81-
<div className="mb-2 p-4">
82-
<h1 className="text-2xl font-bold text-vscode-settings-headerForeground py-2">
83-
Flat Editor
84-
</h1>
85-
<p className="mb-2">
86-
This is a gui for setting up a Flat Action, which will pull external
87-
data and update it using GitHub Actions.
88-
</p>
89-
<button onClick={handleOpenRaw}>View the raw YAML</button>
90-
</div>
91-
<Triggers />
92-
<Jobs />
93-
94-
{showErrorState ? (
95-
<div className="border-2 border-vscode-editorOverviewRuler-warningForeground bg-vscode-settings-dropdownBackground text-sm p-4 flex items-center">
96-
<span className="codicon codicon-warning mr-1 text-vscode-editorOverviewRuler-warningForeground" />
97-
<p>
98-
Make sure all of your steps have a{' '}
99-
<strong>downloaded_filename</strong> specified!
100-
</p>
85+
<div className="p-8 space-y-6">
86+
<header>
87+
<div className="mb-2">
88+
<h1 className="text-[26px] leading-[30px] font-medium my-0">
89+
Flat Editor
90+
</h1>
10191
</div>
102-
) : (
103-
<div className="pt-4 pl-4 pb-6">
104-
<p className="text-lg font-bold pb-1">
105-
You're all set!{' '}
106-
<span
107-
className="codicon codicon-rocket pl-1"
108-
style={{ fontSize: '0.875rem' }}
109-
/>
92+
<div className="mb-4">
93+
<p className="text-[13px] my-0">
94+
This is a gui for setting up a Flat Action, which will pull external
95+
data and update it using GitHub Actions.
11096
</p>
111-
<p>
112-
Commit, push, and check out your new Action{' '}
113-
{actionsUrl ? (
114-
<span>
115-
<a className="underline" href={actionsUrl}>
116-
on GitHub
117-
</a>
118-
.
119-
</span>
120-
) : (
121-
'on GitHub. '
122-
)}{' '}
97+
</div>
98+
<VSCodeButton onClick={handleOpenRaw}>View the raw YAML</VSCodeButton>
99+
</header>
100+
<VSCodeDivider />
101+
<Triggers />
102+
<Jobs />
103+
<VSCodeDivider />
104+
<div>
105+
{showErrorState ? (
106+
<div className="text-[color:var(--vscode-errorForeground)] flex items-center">
107+
<span className="codicon codicon-warning" />
108+
<p className="ml-1 my-0">
109+
Make sure all of your steps have a{' '}
110+
<span className="font-bold">downloaded_filename</span> specified!
111+
</p>
112+
</div>
113+
) : (
114+
<p className="my-0">
115+
Commit, push, and check out your new Action on{' '}
116+
<VSCodeLink className="align-super" href={actionsUrl}>
117+
on GitHub
118+
</VSCodeLink>{' '}
123119
It should run automatically, once pushed.
124120
</p>
125-
</div>
126-
)}
121+
)}
122+
</div>
127123
</div>
128124
)
129125
}

‎src/webviews/src/Jobs.tsx

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Header from './Header'
44
import { Step } from './Step'
55
import useFlatConfigStore from './store'
66
import type { FlatStep } from './../../types'
7+
import { VSCodeButton, VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
78

89
interface JobsProps {}
910

@@ -40,41 +41,40 @@ const Jobs: FunctionComponent<JobsProps> = props => {
4041
.map((j, i) => <Step index={i + 2} step={j as FlatStep} key={i} />)
4142

4243
return (
43-
<div className="text-vscode-foreground">
44-
<Header
45-
title="Where to get data from"
46-
description="Flat can fetch data from HTTP endpoints or SQL queries."
47-
hasHoverState={false}
48-
>
49-
{steps}
50-
44+
<div>
45+
<header>
46+
<div className="mb-2">
47+
<h2 className="my-0 text-[20px] leading-[30px] font-normal">
48+
Where to get data from
49+
</h2>
50+
</div>
51+
<p className="text-[13px] my-0">
52+
Flat can fetch data from HTTP endpoints or SQL queries.
53+
</p>
54+
</header>
55+
<section className="mt-4">
56+
<div className="space-y-6">{steps}</div>
57+
</section>
58+
<footer className="mt-4">
5159
<div className="font-bold pb-2">
5260
Add {state.jobs.scheduled.steps.length ? 'another' : 'a'} data source
5361
</div>
54-
<div className="flex">
55-
<button
56-
className="text-extensionButton-prominentForeground p-2"
57-
style={{ marginRight: 1 }}
62+
<div className="flex items-center space-x-2">
63+
<VSCodeButton
64+
appearance="secondary"
5865
onClick={() => handleJobAdded('http')}
5966
>
60-
<span
61-
className="codicon codicon-add pr-1"
62-
style={{ fontSize: '0.875rem' }}
63-
/>{' '}
64-
HTTP
65-
</button>
66-
<button
67-
className="text-extensionButton-prominentForeground p-2"
67+
<span className="codicon codicon-add" slot="start" /> Add from HTTP
68+
</VSCodeButton>
69+
<VSCodeButton
70+
appearance="secondary"
6871
onClick={() => handleJobAdded('sql')}
6972
>
70-
<span
71-
className="codicon codicon-add pr-1"
72-
style={{ fontSize: '0.875rem' }}
73-
/>{' '}
74-
SQL
75-
</button>
73+
<span className="codicon codicon-add pr-1" slot="start" />
74+
Add from SQL
75+
</VSCodeButton>
7676
</div>
77-
</Header>
77+
</footer>
7878
</div>
7979
)
8080
}

‎src/webviews/src/Step.tsx

Lines changed: 14 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { VSCodeButton, VSCodeTag } from '@vscode/webview-ui-toolkit/react'
12
import React, { FunctionComponent } from 'react'
2-
import { Clickable } from 'reakit/Clickable'
33
import type { FlatStep } from '../../types'
44

55
import { FilePicker } from './settings/FilePicker'
@@ -35,38 +35,21 @@ export const Step: FunctionComponent<StepProps> = props => {
3535
}
3636

3737
return (
38-
<div className="flex mb-6">
39-
<div
40-
className="flex-none w-5 pt-2 text-right"
41-
style={{
42-
paddingTop: 13,
43-
}}
44-
>
45-
{props.index + 1 - 2}.
38+
<div className="p-4 rounded border-solid border border-[color:var(--divider-background)]">
39+
<div className="flex items-center justify-between mb-4">
40+
<VSCodeTag>
41+
<span>#{props.index + 1 - 2}</span> Fetch data via{' '}
42+
{'with' in props.step && 'sql_queryfile' in props.step.with
43+
? 'SQL'
44+
: 'HTTP'}
45+
</VSCodeTag>
46+
<VSCodeButton appearance="secondary" onClick={handleRemoveStep}>
47+
<span className="codicon codicon-x" slot="start" />
48+
Remove
49+
</VSCodeButton>
4650
</div>
47-
<div className="flex-1 w-full">
48-
<div className="p-2 flex items-center justify-between overflow-hidden">
49-
<div className="text-lg font-bold">
50-
Fetch data via{' '}
51-
{'with' in props.step && 'sql_queryfile' in props.step.with
52-
? 'SQL'
53-
: 'HTTP'}
54-
</div>
55-
<Clickable
56-
onClick={handleRemoveStep}
57-
as="div"
58-
className="flex-none cursor-pointer flex items-center"
59-
>
60-
<span
61-
className="codicon codicon-x pr-1"
62-
style={{ fontSize: '0.875rem' }}
63-
/>
64-
<div className="font-medium underline">Remove</div>
65-
</Clickable>
66-
</div>
67-
51+
<div className="flex-1 w-full space-y-6">
6852
<StepConfig stepIndex={props.index} step={props.step} />
69-
7053
<FilePicker
7154
title="Postprocessing file (optional)"
7255
label="The file containing the postprocessing script. This needs to be within the same repository."

0 commit comments

Comments
 (0)
0