@sanity/runtime-cli 12.2.0 → 12.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -31
- package/dist/actions/blueprints/assets.d.ts +3 -4
- package/dist/actions/blueprints/assets.js +124 -2
- package/dist/baseCommands.d.ts +43 -7
- package/dist/baseCommands.js +82 -10
- package/dist/commands/blueprints/add.d.ts +2 -2
- package/dist/commands/blueprints/add.js +2 -2
- package/dist/commands/blueprints/config.d.ts +2 -2
- package/dist/commands/blueprints/config.js +2 -2
- package/dist/commands/blueprints/deploy.d.ts +2 -2
- package/dist/commands/blueprints/deploy.js +2 -2
- package/dist/commands/blueprints/destroy.d.ts +2 -2
- package/dist/commands/blueprints/destroy.js +2 -2
- package/dist/commands/blueprints/doctor.d.ts +5 -4
- package/dist/commands/blueprints/doctor.js +10 -12
- package/dist/commands/blueprints/info.d.ts +2 -2
- package/dist/commands/blueprints/info.js +2 -2
- package/dist/commands/blueprints/init.d.ts +2 -2
- package/dist/commands/blueprints/init.js +6 -9
- package/dist/commands/blueprints/logs.d.ts +2 -2
- package/dist/commands/blueprints/logs.js +2 -2
- package/dist/commands/blueprints/plan.d.ts +2 -2
- package/dist/commands/blueprints/plan.js +2 -2
- package/dist/commands/blueprints/stacks.d.ts +2 -2
- package/dist/commands/blueprints/stacks.js +2 -2
- package/dist/commands/functions/add.d.ts +2 -2
- package/dist/commands/functions/add.js +2 -2
- package/dist/commands/functions/dev.d.ts +2 -2
- package/dist/commands/functions/dev.js +2 -2
- package/dist/commands/functions/env/add.d.ts +2 -2
- package/dist/commands/functions/env/add.js +2 -2
- package/dist/commands/functions/env/list.d.ts +2 -2
- package/dist/commands/functions/env/list.js +2 -2
- package/dist/commands/functions/env/remove.d.ts +2 -2
- package/dist/commands/functions/env/remove.js +2 -2
- package/dist/commands/functions/logs.d.ts +3 -3
- package/dist/commands/functions/logs.js +7 -4
- package/dist/commands/functions/test.d.ts +3 -3
- package/dist/commands/functions/test.js +7 -4
- package/dist/cores/blueprints/config.d.ts +2 -5
- package/dist/cores/blueprints/deploy.js +29 -13
- package/dist/cores/blueprints/destroy.d.ts +2 -5
- package/dist/cores/blueprints/doctor.js +12 -2
- package/dist/cores/blueprints/info.js +2 -2
- package/dist/cores/blueprints/stacks.d.ts +2 -5
- package/dist/cores/functions/logs.d.ts +3 -1
- package/dist/cores/functions/logs.js +11 -2
- package/dist/cores/functions/test.d.ts +3 -1
- package/dist/cores/functions/test.js +11 -2
- package/dist/server/static/components/app.css +0 -116
- package/dist/server/static/components/clear-button.js +1 -1
- package/dist/server/static/components/console-panel.js +27 -6
- package/dist/server/static/components/fetch-button.js +1 -1
- package/dist/server/static/components/filter-api-version.js +39 -3
- package/dist/server/static/components/filter-document-id.js +39 -3
- package/dist/server/static/components/filter-with-token.js +27 -4
- package/dist/server/static/components/filters.js +127 -62
- package/dist/server/static/components/function-list.js +33 -13
- package/dist/server/static/components/network-spinner.js +6 -4
- package/dist/server/static/components/payload-panel.js +46 -24
- package/dist/server/static/components/response-panel.js +33 -6
- package/dist/server/static/components/rule-panel.js +13 -4
- package/dist/server/static/components/run-panel.js +14 -7
- package/dist/server/static/components/select-dropdown.js +34 -5
- package/dist/server/static/components/shared-styles.js +31 -0
- package/dist/server/static/components/toggle-switch.js +11 -2
- package/dist/utils/display/blueprints-formatting.d.ts +2 -2
- package/dist/utils/display/blueprints-formatting.js +31 -26
- package/dist/utils/find-function.d.ts +4 -0
- package/dist/utils/find-function.js +6 -0
- package/dist/utils/types.d.ts +21 -3
- package/oclif.manifest.json +281 -38
- package/package.json +2 -2
|
@@ -1,19 +1,49 @@
|
|
|
1
1
|
/* globals customElements */
|
|
2
2
|
import {ApiBaseElement} from './api-base.js'
|
|
3
|
+
import {getSharedStyleSheets} from './shared-styles.js'
|
|
3
4
|
|
|
4
|
-
const template =
|
|
5
|
+
const template = document.createElement('template')
|
|
6
|
+
template.innerHTML = `
|
|
7
|
+
<ol class="hidden-lg pad-t-0 pad-b-0 pad-r-4 pad-l-4" type="content"></ol>
|
|
5
8
|
<fieldset class="hidden block-lg pad-t-0 pad-b-0 pad-r-3 pad-l-3 mar-b-3"><select class="dropdown-select"></select></fieldset>
|
|
6
9
|
`
|
|
7
10
|
|
|
8
11
|
class FunctionList extends ApiBaseElement {
|
|
12
|
+
constructor() {
|
|
13
|
+
super()
|
|
14
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
async connectedCallback() {
|
|
18
|
+
const sheets = await getSharedStyleSheets()
|
|
19
|
+
|
|
20
|
+
// Create a component-specific stylesheet that will be applied after shared styles
|
|
21
|
+
const componentSheet = new CSSStyleSheet()
|
|
22
|
+
await componentSheet.replace(`
|
|
23
|
+
select {
|
|
24
|
+
background: transparent !important;
|
|
25
|
+
color: light-dark(var(--gray-950), var(--gray-300)) !important;
|
|
26
|
+
}
|
|
27
|
+
`)
|
|
28
|
+
|
|
29
|
+
this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
|
|
30
|
+
|
|
31
|
+
this.list = this.shadowRoot.querySelector('ol')
|
|
32
|
+
this.select = this.shadowRoot.querySelector('select')
|
|
33
|
+
this.list.addEventListener('click', this.functionClicked)
|
|
34
|
+
this.select.addEventListener('change', this.functionSelected)
|
|
35
|
+
this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
|
|
36
|
+
this.api.blueprint()
|
|
37
|
+
}
|
|
38
|
+
|
|
9
39
|
functionClicked = (event) => {
|
|
10
|
-
const name = event.
|
|
40
|
+
const name = event.target.closest('li').dataset.name
|
|
11
41
|
const target = this.api.store.functions.find((func) => func.name === name)
|
|
12
42
|
this.api.store.selectedIndex = target.name
|
|
13
43
|
this.api.store.selectedFunctionType = target.type
|
|
14
44
|
}
|
|
15
45
|
functionSelected = (event) => {
|
|
16
|
-
this.api.store.selectedIndex = event.
|
|
46
|
+
this.api.store.selectedIndex = event.target.value
|
|
17
47
|
}
|
|
18
48
|
renderListItem = (func) => {
|
|
19
49
|
const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
|
|
@@ -53,16 +83,6 @@ class FunctionList extends ApiBaseElement {
|
|
|
53
83
|
}
|
|
54
84
|
}
|
|
55
85
|
|
|
56
|
-
connectedCallback() {
|
|
57
|
-
this.innerHTML = template
|
|
58
|
-
this.list = this.querySelector('ol')
|
|
59
|
-
this.select = this.querySelector('select')
|
|
60
|
-
this.list.addEventListener('click', this.functionClicked)
|
|
61
|
-
this.select.addEventListener('change', this.functionSelected)
|
|
62
|
-
this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
|
|
63
|
-
this.api.blueprint()
|
|
64
|
-
}
|
|
65
|
-
|
|
66
86
|
disconnectedCallback() {
|
|
67
87
|
this.list.removeEventListener('click', this.functionClicked)
|
|
68
88
|
this.select.removeEventListener('change', this.functionSelected)
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/* globals customElements HTMLElement */
|
|
2
|
-
const template =
|
|
3
|
-
|
|
2
|
+
const template = document.createElement('template')
|
|
3
|
+
template.innerHTML = `<style>
|
|
4
|
+
:host {
|
|
4
5
|
--track-width: 2px;
|
|
5
6
|
--track-color: var(--card-border-color);
|
|
6
7
|
--indicator-color: var(--text-color);
|
|
@@ -63,8 +64,9 @@ const template = `<style>
|
|
|
63
64
|
</svg>`
|
|
64
65
|
|
|
65
66
|
class NetworkSpinner extends HTMLElement {
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
constructor() {
|
|
68
|
+
super()
|
|
69
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
68
70
|
}
|
|
69
71
|
}
|
|
70
72
|
|
|
@@ -3,11 +3,28 @@
|
|
|
3
3
|
import {basicSetup, EditorView, json} from '../vendor/vendor.bundle.js'
|
|
4
4
|
import {ApiBaseElement} from './api-base.js'
|
|
5
5
|
import {sanityCodeMirrorTheme} from './codemirror-theme.js'
|
|
6
|
+
import {getSharedStyleSheets} from './shared-styles.js'
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const template = document.createElement('template')
|
|
9
|
+
template.innerHTML = `
|
|
10
|
+
<style>
|
|
11
|
+
:host {
|
|
12
|
+
grid-area: payload;
|
|
13
|
+
max-height: 100%;
|
|
14
|
+
height: 100%;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
min-height: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@media (max-width: 40rem) {
|
|
20
|
+
:host {
|
|
21
|
+
max-height: none;
|
|
22
|
+
min-height: 200px;
|
|
23
|
+
overflow: auto;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
</style>
|
|
27
|
+
<div id="payloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l">
|
|
11
28
|
<div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
|
|
12
29
|
<div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
|
|
13
30
|
<h2 class="config-label mar-t-0 mar-b-0">Document</h2>
|
|
@@ -16,7 +33,7 @@ function template({selectedEvent}) {
|
|
|
16
33
|
</div>
|
|
17
34
|
<div id="payload" name="payload" class='max-h-100 min-h-0'></div>
|
|
18
35
|
</div>
|
|
19
|
-
<div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"
|
|
36
|
+
<div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l" style="display: none;">
|
|
20
37
|
<div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
|
|
21
38
|
<div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
|
|
22
39
|
<h2 class="config-label mar-t-0 mar-b-0">Before Document</h2>
|
|
@@ -34,9 +51,30 @@ function template({selectedEvent}) {
|
|
|
34
51
|
<div id="afterPayload" name="afterPayload" class='max-h-50 min-h-0'></div>
|
|
35
52
|
</div>
|
|
36
53
|
`
|
|
37
|
-
}
|
|
38
54
|
|
|
39
55
|
class PayloadPanel extends ApiBaseElement {
|
|
56
|
+
constructor() {
|
|
57
|
+
super()
|
|
58
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
async connectedCallback() {
|
|
62
|
+
const sheets = await getSharedStyleSheets()
|
|
63
|
+
this.shadowRoot.adoptedStyleSheets = sheets
|
|
64
|
+
|
|
65
|
+
const beforePayloadElem = this.shadowRoot.querySelector('#beforePayload')
|
|
66
|
+
const afterPayloadElem = this.shadowRoot.querySelector('#afterPayload')
|
|
67
|
+
|
|
68
|
+
this.api.store.beforePayload = attachEditorView(beforePayloadElem)
|
|
69
|
+
this.api.store.afterPayload = attachEditorView(afterPayloadElem)
|
|
70
|
+
|
|
71
|
+
const payloadElem = this.shadowRoot.querySelector('#payload')
|
|
72
|
+
this.api.store.payload = attachEditorView(payloadElem)
|
|
73
|
+
|
|
74
|
+
this.api.subscribe(this.updatePayload, ['document'])
|
|
75
|
+
this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
|
|
76
|
+
}
|
|
77
|
+
|
|
40
78
|
updatePayload = ({document}) => {
|
|
41
79
|
if (!document) return
|
|
42
80
|
|
|
@@ -57,30 +95,14 @@ class PayloadPanel extends ApiBaseElement {
|
|
|
57
95
|
updateSelectedEvent = ({selectedEvent}) => {
|
|
58
96
|
console.log('updateSelectedEvent', selectedEvent)
|
|
59
97
|
|
|
60
|
-
const payloadContainer = this.querySelector('#payloadContainer')
|
|
61
|
-
const deltaPayloadContainer = this.querySelector('#deltaPayloadContainer')
|
|
98
|
+
const payloadContainer = this.shadowRoot.querySelector('#payloadContainer')
|
|
99
|
+
const deltaPayloadContainer = this.shadowRoot.querySelector('#deltaPayloadContainer')
|
|
62
100
|
|
|
63
101
|
const isUpdateEvent = selectedEvent === 'update'
|
|
64
102
|
payloadContainer.style.display = isUpdateEvent ? 'none' : 'block'
|
|
65
103
|
deltaPayloadContainer.style.display = isUpdateEvent ? 'block' : 'none'
|
|
66
104
|
}
|
|
67
|
-
connectedCallback() {
|
|
68
|
-
this.innerHTML = template({
|
|
69
|
-
selectedEvent: this.api.store.selectedEvent,
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
const beforePayloadElem = this.querySelector('#beforePayload')
|
|
73
|
-
const afterPayloadElem = this.querySelector('#afterPayload')
|
|
74
|
-
|
|
75
|
-
this.api.store.beforePayload = attachEditorView(beforePayloadElem)
|
|
76
|
-
this.api.store.afterPayload = attachEditorView(afterPayloadElem)
|
|
77
|
-
|
|
78
|
-
const payloadElem = this.querySelector('#payload')
|
|
79
|
-
this.api.store.payload = attachEditorView(payloadElem)
|
|
80
105
|
|
|
81
|
-
this.api.subscribe(this.updatePayload, ['document'])
|
|
82
|
-
this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
|
|
83
|
-
}
|
|
84
106
|
disconnectedCallback() {
|
|
85
107
|
if (this.api) {
|
|
86
108
|
this.api.unsubscribe(this.updatePayload)
|
|
@@ -11,8 +11,28 @@ import {
|
|
|
11
11
|
} from '../vendor/vendor.bundle.js'
|
|
12
12
|
import {ApiBaseElement} from './api-base.js'
|
|
13
13
|
import {sanityCodeMirrorTheme} from './codemirror-theme.js'
|
|
14
|
+
import {getSharedStyleSheets} from './shared-styles.js'
|
|
14
15
|
|
|
15
|
-
const template =
|
|
16
|
+
const template = document.createElement('template')
|
|
17
|
+
template.innerHTML = `
|
|
18
|
+
<style>
|
|
19
|
+
:host {
|
|
20
|
+
grid-area: response;
|
|
21
|
+
max-height: 100%;
|
|
22
|
+
height: 100%;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
min-height: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (max-width: 40rem) {
|
|
28
|
+
:host {
|
|
29
|
+
max-height: none;
|
|
30
|
+
min-height: 200px;
|
|
31
|
+
overflow: auto;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
35
|
+
<div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
|
|
16
36
|
<!-- Response Section -->
|
|
17
37
|
<div class="y-scroll min-h-0">
|
|
18
38
|
<div class="pad-b-12">
|
|
@@ -32,7 +52,12 @@ const template = `<div class="border-left border-top border-top-none-l h-100 gut
|
|
|
32
52
|
</div>
|
|
33
53
|
</div>
|
|
34
54
|
`
|
|
55
|
+
|
|
35
56
|
class ResponsePanel extends ApiBaseElement {
|
|
57
|
+
constructor() {
|
|
58
|
+
super()
|
|
59
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
60
|
+
}
|
|
36
61
|
updateResponse = ({result}) => {
|
|
37
62
|
if (!result) return
|
|
38
63
|
|
|
@@ -72,11 +97,13 @@ class ResponsePanel extends ApiBaseElement {
|
|
|
72
97
|
}
|
|
73
98
|
}
|
|
74
99
|
|
|
75
|
-
connectedCallback() {
|
|
76
|
-
|
|
77
|
-
this.
|
|
78
|
-
|
|
79
|
-
this.
|
|
100
|
+
async connectedCallback() {
|
|
101
|
+
const sheets = await getSharedStyleSheets()
|
|
102
|
+
this.shadowRoot.adoptedStyleSheets = sheets
|
|
103
|
+
|
|
104
|
+
this.response = this.shadowRoot.querySelector('#response')
|
|
105
|
+
this.size = this.shadowRoot.querySelector('#size')
|
|
106
|
+
this.time = this.shadowRoot.querySelector('#time')
|
|
80
107
|
if (this.api) {
|
|
81
108
|
this.api.subscribe(this.updateResponse, ['result'])
|
|
82
109
|
if (this.api.store.result) {
|
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
import {basicSetup, EditorState, EditorView, json} from '../vendor/vendor.bundle.js'
|
|
5
5
|
import {ApiBaseElement} from './api-base.js'
|
|
6
6
|
import {sanityCodeMirrorTheme} from './codemirror-theme.js'
|
|
7
|
+
import {getSharedStyleSheets} from './shared-styles.js'
|
|
7
8
|
|
|
8
|
-
const template =
|
|
9
|
+
const template = document.createElement('template')
|
|
10
|
+
template.innerHTML = `<div class="border-left y-scroll min-h-0">
|
|
9
11
|
<div>
|
|
10
12
|
<h3 class="config-label mar-t-0 hidden">Filter/Projection</h3>
|
|
11
13
|
<header class='flex space-between'>
|
|
@@ -17,7 +19,12 @@ const template = `<div class="border-left y-scroll min-h-0">
|
|
|
17
19
|
</div>
|
|
18
20
|
</div>
|
|
19
21
|
`
|
|
22
|
+
|
|
20
23
|
class RulePanel extends ApiBaseElement {
|
|
24
|
+
constructor() {
|
|
25
|
+
super()
|
|
26
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
27
|
+
}
|
|
21
28
|
updateRule = () => {
|
|
22
29
|
const {functions, rule, selectedIndex} = this.api.store
|
|
23
30
|
const func = functions.find((func) => func.name === selectedIndex)
|
|
@@ -34,9 +41,11 @@ class RulePanel extends ApiBaseElement {
|
|
|
34
41
|
}
|
|
35
42
|
}
|
|
36
43
|
|
|
37
|
-
connectedCallback() {
|
|
38
|
-
|
|
39
|
-
this.
|
|
44
|
+
async connectedCallback() {
|
|
45
|
+
const sheets = await getSharedStyleSheets()
|
|
46
|
+
this.shadowRoot.adoptedStyleSheets = sheets
|
|
47
|
+
|
|
48
|
+
this.rule = this.shadowRoot.querySelector('#rule')
|
|
40
49
|
|
|
41
50
|
if (this.api) {
|
|
42
51
|
this.api.subscribe(this.updateRule, ['selectedIndex', 'functions'])
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/* globals customElements document */
|
|
2
2
|
import {ApiBaseElement} from './api-base.js'
|
|
3
|
+
import {getSharedStyleSheets} from './shared-styles.js'
|
|
3
4
|
|
|
4
5
|
const runTemplate = `<svg data-sanity-icon="play" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 18.5V6.5L17.5 12.5L7.5 18.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
|
|
5
6
|
<span title="Type CTRL + Enter to Run">Run</span>`
|
|
6
7
|
|
|
7
|
-
const template =
|
|
8
|
+
const template = document.createElement('template')
|
|
9
|
+
template.innerHTML = `<div class="pad-3">
|
|
8
10
|
<button ord="primary" class="items-center sanity-button">
|
|
9
11
|
<span class="flex pad-3 gap-25 justify-content-center flex-row">
|
|
10
12
|
${runTemplate}
|
|
@@ -12,7 +14,12 @@ const template = `<div class="pad-3">
|
|
|
12
14
|
</button>
|
|
13
15
|
</div>
|
|
14
16
|
`
|
|
17
|
+
|
|
15
18
|
class RunPanel extends ApiBaseElement {
|
|
19
|
+
constructor() {
|
|
20
|
+
super()
|
|
21
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
22
|
+
}
|
|
16
23
|
invoke = () => {
|
|
17
24
|
const selectedEvent = this.api.store.selectedEvent
|
|
18
25
|
const docFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT
|
|
@@ -41,7 +48,7 @@ class RunPanel extends ApiBaseElement {
|
|
|
41
48
|
}
|
|
42
49
|
const context = {
|
|
43
50
|
clientOptions: {
|
|
44
|
-
apiVersion:
|
|
51
|
+
apiVersion: this.api.store.apiVersion,
|
|
45
52
|
dataset: this.api.store.selectedDataset,
|
|
46
53
|
projectId: this.api.store.selectedProject,
|
|
47
54
|
token: this.api.store.withToken,
|
|
@@ -86,11 +93,11 @@ class RunPanel extends ApiBaseElement {
|
|
|
86
93
|
}
|
|
87
94
|
}
|
|
88
95
|
|
|
89
|
-
connectedCallback() {
|
|
90
|
-
|
|
91
|
-
this.
|
|
92
|
-
|
|
93
|
-
this.button = this.querySelector('button')
|
|
96
|
+
async connectedCallback() {
|
|
97
|
+
const sheets = await getSharedStyleSheets()
|
|
98
|
+
this.shadowRoot.adoptedStyleSheets = sheets
|
|
99
|
+
|
|
100
|
+
this.button = this.shadowRoot.querySelector('button')
|
|
94
101
|
this.buttonText = this.button.querySelector('span')
|
|
95
102
|
this.button.addEventListener('click', this.invoke)
|
|
96
103
|
document.addEventListener('keydown', this.onKeyDown)
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
/* globals customElements */
|
|
2
2
|
import {ApiBaseElement} from './api-base.js'
|
|
3
|
+
import {getSharedStyleSheets} from './shared-styles.js'
|
|
3
4
|
|
|
4
|
-
const
|
|
5
|
+
const template = document.createElement('template')
|
|
6
|
+
template.innerHTML = `
|
|
5
7
|
<fieldset class="mar-t-2">
|
|
6
8
|
<label class="slab-text">
|
|
7
|
-
<span class="block mar-b-1"
|
|
9
|
+
<span class="block mar-b-1"><slot name="label"></slot></span>
|
|
8
10
|
<div data-ui="Select" class="relative inline-block w-100">
|
|
9
11
|
<select
|
|
10
12
|
data-ui="Select"
|
|
@@ -37,7 +39,31 @@ const dropdownTemplate = ({label}) => `
|
|
|
37
39
|
`
|
|
38
40
|
|
|
39
41
|
class SelectDropdown extends ApiBaseElement {
|
|
40
|
-
|
|
42
|
+
constructor() {
|
|
43
|
+
super()
|
|
44
|
+
this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
async connectedCallback() {
|
|
48
|
+
const sheets = await getSharedStyleSheets()
|
|
49
|
+
|
|
50
|
+
// Create a component-specific stylesheet that will be applied after shared styles
|
|
51
|
+
const componentSheet = new CSSStyleSheet()
|
|
52
|
+
await componentSheet.replace(`
|
|
53
|
+
:host {
|
|
54
|
+
align-self: flex-end;
|
|
55
|
+
}
|
|
56
|
+
fieldset {
|
|
57
|
+
margin-top: 0 !important;
|
|
58
|
+
}
|
|
59
|
+
select {
|
|
60
|
+
background: transparent !important;
|
|
61
|
+
color: light-dark(var(--gray-950), var(--gray-300)) !important;
|
|
62
|
+
}
|
|
63
|
+
`)
|
|
64
|
+
|
|
65
|
+
this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
|
|
66
|
+
|
|
41
67
|
this.label = this.getAttribute('label') || 'Select'
|
|
42
68
|
this.storeKey = this.getAttribute('store-key')
|
|
43
69
|
this.selectedKey = this.getAttribute('selected-key')
|
|
@@ -45,8 +71,11 @@ class SelectDropdown extends ApiBaseElement {
|
|
|
45
71
|
this.labelProp = this.getAttribute('label-prop') || 'displayName'
|
|
46
72
|
this.subscribeTo = this.getAttribute('subscribe-to')
|
|
47
73
|
|
|
48
|
-
|
|
49
|
-
|
|
74
|
+
// Set label text in slot
|
|
75
|
+
const labelSlot = this.shadowRoot.querySelector('slot[name="label"]')
|
|
76
|
+
labelSlot.textContent = this.label
|
|
77
|
+
|
|
78
|
+
this.select = this.shadowRoot.querySelector('select')
|
|
50
79
|
this.select.addEventListener('change', this.handleSelect)
|
|
51
80
|
|
|
52
81
|
this.api.subscribe(this.renderOptions, [this.storeKey])
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* globals fetch */
|
|
2
|
+
|
|
3
|
+
let cachedStyleSheets = null
|
|
4
|
+
|
|
5
|
+
export async function getSharedStyleSheets() {
|
|
6
|
+
if (cachedStyleSheets) {
|
|
7
|
+
return cachedStyleSheets
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
try {
|
|
11
|
+
// Fetch both stylesheets
|
|
12
|
+
const [mCssResponse, appCssResponse] = await Promise.all([
|
|
13
|
+
fetch('./vendor/m-.css'),
|
|
14
|
+
fetch('./components/app.css'),
|
|
15
|
+
])
|
|
16
|
+
|
|
17
|
+
const [mCssText, appCssText] = await Promise.all([mCssResponse.text(), appCssResponse.text()])
|
|
18
|
+
|
|
19
|
+
// Create CSSStyleSheet objects
|
|
20
|
+
const mSheet = new CSSStyleSheet()
|
|
21
|
+
const appSheet = new CSSStyleSheet()
|
|
22
|
+
|
|
23
|
+
await Promise.all([mSheet.replace(mCssText), appSheet.replace(appCssText)])
|
|
24
|
+
|
|
25
|
+
cachedStyleSheets = [mSheet, appSheet]
|
|
26
|
+
return cachedStyleSheets
|
|
27
|
+
} catch (error) {
|
|
28
|
+
console.error('Failed to load shared stylesheets:', error)
|
|
29
|
+
return []
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -6,6 +6,7 @@ template.innerHTML = `
|
|
|
6
6
|
<style>
|
|
7
7
|
:host {
|
|
8
8
|
display: inline-block;
|
|
9
|
+
cursor: pointer;
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
.switch-container {
|
|
@@ -14,9 +15,11 @@ template.innerHTML = `
|
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
[part="track"] {
|
|
18
|
+
padding: 0.125em;
|
|
19
|
+
border-radius: 1em;
|
|
20
|
+
background-color: hsl(0, 0%, 67%);
|
|
17
21
|
width: 1.5rem;
|
|
18
22
|
height: 0.75rem;
|
|
19
|
-
background-color: #dddddd;
|
|
20
23
|
text-align: left;
|
|
21
24
|
border-radius: 10px;
|
|
22
25
|
overflow: hidden;
|
|
@@ -24,9 +27,11 @@ template.innerHTML = `
|
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
[part="slider"] {
|
|
30
|
+
border-radius: 1em;
|
|
31
|
+
background-color: hsl(0, 0%, 100%);
|
|
32
|
+
box-shadow: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
|
|
27
33
|
width: 50%;
|
|
28
34
|
height: 100%;
|
|
29
|
-
background-color: #777777;
|
|
30
35
|
transition: all 256ms;
|
|
31
36
|
position: absolute;
|
|
32
37
|
top: 0;
|
|
@@ -37,6 +42,10 @@ template.innerHTML = `
|
|
|
37
42
|
:host([checked]) [part="slider"] {
|
|
38
43
|
transform: translateX(100%);
|
|
39
44
|
}
|
|
45
|
+
|
|
46
|
+
:host([checked])::part(track) {
|
|
47
|
+
background-color: var(--color-interactive-primary-active-bg);
|
|
48
|
+
}
|
|
40
49
|
</style>
|
|
41
50
|
|
|
42
51
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { Blueprint, Resource } from '@sanity/blueprints-parser';
|
|
2
2
|
import { type DeployedResource, type Stack } from '../types.js';
|
|
3
3
|
export declare function formatTitle(title: string, name: string): string;
|
|
4
|
-
export declare function formatDeployedResourceTree(resources: DeployedResource[] | undefined): string;
|
|
5
|
-
export declare function formatResourceTree(resources: Resource[] | undefined): string;
|
|
4
|
+
export declare function formatDeployedResourceTree(resources: DeployedResource[] | undefined, verbose?: boolean): string;
|
|
5
|
+
export declare function formatResourceTree(resources: Resource[] | undefined, verbose?: boolean): string;
|
|
6
6
|
export declare function formatStackInfo(stack: Stack | Blueprint, isCurrentStack?: boolean): string;
|
|
7
7
|
export declare function formatStacksListing(stacks: Stack[], currentStackId?: string): string;
|
|
8
8
|
export declare function stackDeployDiff(localBlueprint: Blueprint, deployedStack: Stack): string | null;
|
|
@@ -47,28 +47,35 @@ const categoryByLabel = Object.values(RESOURCE_CATEGORIES).reduce((acc, curr) =>
|
|
|
47
47
|
return acc;
|
|
48
48
|
}, {});
|
|
49
49
|
function resourceName(res, displayNameAttribute) {
|
|
50
|
+
const nameParts = [chalk.bold.green(res.name)];
|
|
50
51
|
const displayName = displayNameAttribute &&
|
|
51
52
|
displayNameAttribute in res &&
|
|
52
53
|
typeof res[displayNameAttribute] === 'string' &&
|
|
53
54
|
res[displayNameAttribute];
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
if (displayName && displayName !== res.name)
|
|
56
|
+
nameParts.push(chalk.green(`"${displayName}"`));
|
|
57
|
+
return nameParts.join(' ');
|
|
56
58
|
}
|
|
57
|
-
function deployedResourceName(res, displayNameAttribute) {
|
|
59
|
+
function deployedResourceName(res, displayNameAttribute, _verbose = false) {
|
|
60
|
+
const nameParts = [chalk.bold.green(res.name)];
|
|
58
61
|
const displayName = displayNameAttribute &&
|
|
59
62
|
typeof res.parameters[displayNameAttribute] === 'string' &&
|
|
60
63
|
res.parameters[displayNameAttribute];
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
+
if (displayName && displayName !== res.name)
|
|
65
|
+
nameParts.push(chalk.green(`"${displayName}"`));
|
|
66
|
+
// if (verbose)
|
|
67
|
+
nameParts.push(idList(res));
|
|
68
|
+
return nameParts.join(' ');
|
|
64
69
|
}
|
|
65
70
|
function idList(res) {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
71
|
+
const ids = [];
|
|
72
|
+
if ('id' in res && typeof res.id === 'string' && res.id) {
|
|
73
|
+
ids.push(niceId(res.id));
|
|
74
|
+
}
|
|
75
|
+
if ('externalId' in res && typeof res.externalId === 'string' && res.externalId) {
|
|
76
|
+
ids.push(`<${niceId(res.externalId)}>`);
|
|
77
|
+
}
|
|
78
|
+
return ids.length > 0 ? ids.join(' ') : '';
|
|
72
79
|
}
|
|
73
80
|
export function formatTitle(title, name) {
|
|
74
81
|
return `${chalk.bold.blue(title)} ${chalk.bold(`"${name}"`)}`;
|
|
@@ -93,46 +100,44 @@ function categorizeResources(resources) {
|
|
|
93
100
|
}
|
|
94
101
|
return categorized;
|
|
95
102
|
}
|
|
96
|
-
function buildOutputTree(resources,
|
|
103
|
+
function buildOutputTree(resources, createName, mapToResource, verbose = false) {
|
|
97
104
|
const output = [`${chalk.bold.underline('Resources')} [${resources.length}]`];
|
|
105
|
+
const children = [];
|
|
98
106
|
const categorized = categorizeResources(resources);
|
|
99
107
|
for (const category of Object.values(categoryByLabel)) {
|
|
100
108
|
const catResources = categorized[category.label];
|
|
101
109
|
if (catResources && catResources.length > 0) {
|
|
102
|
-
|
|
110
|
+
children.push(`${chalk.bold(category.label)} [${catResources.length}]`);
|
|
103
111
|
const details = [];
|
|
104
112
|
for (const res of catResources) {
|
|
105
|
-
details.push(
|
|
113
|
+
details.push(createName(category, res, verbose));
|
|
106
114
|
if (category.formatDetails) {
|
|
107
115
|
details.push(category.formatDetails(mapToResource(res)));
|
|
108
116
|
}
|
|
109
117
|
}
|
|
110
|
-
|
|
111
|
-
output.push(catOutput);
|
|
118
|
+
children.push(details);
|
|
112
119
|
}
|
|
113
120
|
}
|
|
114
121
|
if (categorized['Other Resources'] && categorized['Other Resources'].length > 0) {
|
|
115
|
-
|
|
116
|
-
`${chalk.bold('Other Resources')} [${categorized['Other Resources'].length}]`,
|
|
117
|
-
];
|
|
122
|
+
children.push(`${chalk.bold('Other Resources')} [${categorized['Other Resources'].length}]`);
|
|
118
123
|
const otherResourcesOutput = categorized['Other Resources'].map((other) => {
|
|
119
124
|
return `${chalk.yellow(other.name ?? 'unnamed')} ${chalk.dim(other.type)}`;
|
|
120
125
|
});
|
|
121
|
-
|
|
122
|
-
output.push(otherOutput);
|
|
126
|
+
children.push(otherResourcesOutput);
|
|
123
127
|
}
|
|
128
|
+
output.push(children);
|
|
124
129
|
return output;
|
|
125
130
|
}
|
|
126
|
-
export function formatDeployedResourceTree(resources) {
|
|
131
|
+
export function formatDeployedResourceTree(resources, verbose = false) {
|
|
127
132
|
if (!resources || resources.length === 0)
|
|
128
133
|
return ' Zero deployed resources';
|
|
129
|
-
const output = buildOutputTree(resources, (category, res) => deployedResourceName(res, category.displayNameAttribute), (res) => ({ name: res.name, type: res.type, ...res.parameters }));
|
|
134
|
+
const output = buildOutputTree(resources, (category, res, v) => deployedResourceName(res, category.displayNameAttribute, v), (res) => ({ name: res.name, type: res.type, ...res.parameters }), verbose);
|
|
130
135
|
return `${treeify(output)}\n`;
|
|
131
136
|
}
|
|
132
|
-
export function formatResourceTree(resources) {
|
|
137
|
+
export function formatResourceTree(resources, verbose = false) {
|
|
133
138
|
if (!resources || resources.length === 0)
|
|
134
139
|
return ' Zero resources';
|
|
135
|
-
const output = buildOutputTree(resources, (category, res) => resourceName(res, category.displayNameAttribute), (res) => res);
|
|
140
|
+
const output = buildOutputTree(resources, (category, res) => resourceName(res, category.displayNameAttribute), (res) => res, verbose);
|
|
136
141
|
return `${treeify(output)}\n`;
|
|
137
142
|
}
|
|
138
143
|
export function formatStackInfo(stack, isCurrentStack = false) {
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import type { Blueprint } from '@sanity/blueprints-parser';
|
|
2
2
|
import type { DeployedResource, FunctionResource, Stack } from './types.js';
|
|
3
|
+
export declare function getFunctionNames(resources: Array<{
|
|
4
|
+
type?: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
}> | undefined): string[];
|
|
3
7
|
export declare function findFunctionInBlueprint(blueprint: Blueprint, name: string): FunctionResource;
|
|
4
8
|
export declare function findFunctionInStack(stack: Stack, name: string): DeployedResource;
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
export function getFunctionNames(resources) {
|
|
2
|
+
return (resources
|
|
3
|
+
?.filter((r) => r?.type?.startsWith('sanity.function.'))
|
|
4
|
+
.map((r) => r.name)
|
|
5
|
+
.filter((name) => typeof name === 'string') ?? []);
|
|
6
|
+
}
|
|
1
7
|
export function findFunctionInBlueprint(blueprint, name) {
|
|
2
8
|
const func = blueprint?.resources?.find((r) => r?.type?.startsWith('sanity.function.') && r.name === name);
|
|
3
9
|
if (!func)
|