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

[Webview] Replace Collection Project webview to use @vscode-elements package #1758

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
+1,324 −1,086
Open

[Webview] Replace Collection Project webview to use @vscode-elements package #1758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c8b8212
Update helper file to allow to run task package ci even when no tags …
audgirka Oct 11, 2024
e1108a8
Revert "Update helper file to allow to run task package ci even when …
audgirka Oct 11, 2024
55c5351
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Oct 18, 2024
ba48ce6
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Oct 23, 2024
1a7871a
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Nov 4, 2024
d8471f1
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Nov 15, 2024
c515e54
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Nov 19, 2024
43a2116
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Dec 6, 2024
30c33ae
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Dec 16, 2024
46a7bd8
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Dec 17, 2024
48ad7c9
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Dec 17, 2024
30b8807
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Dec 20, 2024
05bd720
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Jan 7, 2025
085497f
Merge branch 'main' of github.com:ansible/vscode-ansible
audgirka Jan 9, 2025
cf04b37
Merge branch 'main' of github.com:ansible/vscode-ansible into enhance…
audgirka Jan 10, 2025
d8cc8c1
Added vscode-elements/elements package dependency
audgirka Jan 10, 2025
633f3d2
Update ansible collection creation view's html to use vscode-elements…
audgirka Jan 10, 2025
529e76f
Update collection creation webview page to use vscode-elements
audgirka Jan 10, 2025
4e26597
Update styles required for collection creation view to use new package
audgirka Jan 10, 2025
8d34e2b
Update yarn.lock
audgirka Jan 10, 2025
bafc8ac
Update test for create-ansible-collection webview element
audgirka Jan 10, 2025
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
15 changes: 11 additions & 4 deletions media/contentCreator/createAnsibleCollectionPageStyle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,28 @@
.container {
display: flex;
flex-direction: column;
font-size: 1em;
}

.element {
margin-bottom: 14px;
}

vscode-text-field {
margin-top: 6px;
vscode-textfield {
margin-bottom: 6px;
width: 100%;
}

vscode-text-area {
vscode-textarea {
margin-top: 6px;
margin-bottom: 6px;
}

vscode-form-group {
width: 100%;
margin: 0;
}

.checkbox-div {
display: flex; /* Use flexbox */
flex-direction: column; /* Arrange child elements vertically */
Expand Down Expand Up @@ -59,7 +65,7 @@ vscode-checkbox i {
font-size: small;
}

vscode-dropdown {
vscode-single-select {
width: 200px;
}

Expand Down Expand Up @@ -87,6 +93,7 @@ vscode-dropdown {

#log-to-file-options-div {
display: none;
width: 100%;
flex-direction: column;
border-style: dotted;
border-color: var(--focus-border);;
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,6 +923,7 @@
"@redhat-developer/vscode-redhat-telemetry": "^0.9.1",
"@shikijs/core": "^1.26.1",
"@types/ini": "^4.1.1",
"@vscode-elements/elements": "^1.9.1",
"@vscode/webview-ui-toolkit": "^1.4.0",
"axios": "^1.7.9",
"ini": "^5.0.0",
Expand Down
117 changes: 79 additions & 38 deletions src/features/contentCreator/createAnsibleCollectionPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,11 @@

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${webview.cspSource}; font-src ${webview.cspSource};">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${webview.cspSource}; font-src ${webview.cspSource};"/>

Check warning on line 117 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L116-L117 

Added lines #L116 - L117 were not covered by tests
<title>AAA</title>
<link rel="stylesheet" href="${styleUri}">
<link rel="stylesheet" href="${codiconsUri}">
<link rel="stylesheet" href="${styleUri}"/>
<link rel="stylesheet" href="${codiconsUri}" id="vscode-codicon-stylesheet"/>

Check warning on line 120 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L119-L120 

Added lines #L119 - L120 were not covered by tests
</head>

<body>
Expand All @@ -128,38 +128,61 @@

<form id="init-form">
<section class="component-container">

<vscode-text-field id="namespace-name" form="init-form" placeholder="Enter namespace name" size="512">Namespace
*</vscode-text-field>
<vscode-text-field id="collection-name" form="init-form" placeholder="Enter collection name" size="512">Collection
*</vscode-text-field>
<vscode-form-group variant="vertical">
<vscode-label for="namespace-name">
<span class="normal">Namespace</span>
<sup>*</sup>
</vscode-label>
<vscode-textfield
id="namespace-name"
name="namespace"
form="init-form"
placeholder="Enter namespace name">
</vscode-textfield>
</vscode-form-group>

<vscode-form-group variant="vertical">
<vscode-label for="collection-name">
<span class="normal">Collection</span>
<sup>*</sup>
</vscode-label>
<vscode-textfield id="collection-name" form="init-form" placeholder="Enter collection name" size="512"></vscode-textfield>
</vscode-form-group>

Check warning on line 150 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L131-L150 

Added lines #L131 - L150 were not covered by tests

<div id="full-collection-name" class="full-collection-name">
<p>Collection name:&nbsp</p>
</div>

<vscode-text-field id="path-url" class="required" form="init-form" placeholder="${homeDir}/.ansible/collections/ansible_collections"
size="512">Init path
<section slot="end" class="explorer-icon">
<vscode-button id="folder-explorer" appearance="icon">
<span class="codicon codicon-folder-opened"></span>
</vscode-button>
</section>
</vscode-text-field>
<vscode-form-group variant="vertical">
<vscode-label for="path-url">
<span class="normal">Init path</span>
</vscode-label>
<vscode-textfield id="path-url" class="required" form="init-form" placeholder="${homeDir}/.ansible/collections/ansible_collections"
size="512">
<vscode-icon
slot="content-after"
id="folder-explorer"
name="folder-opened"
action-icon
></vscode-icon>
</vscode-textfield>
</vscode-form-group>

Check warning on line 169 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L156-L169 

Added lines #L156 - L169 were not covered by tests

<div id="full-collection-path" class="full-collection-name">
<p>Default collection path:&nbsp</p>
</div>

<div class="verbose-div">
<div class="dropdown-container">
<label for="verbosity-dropdown">Verbosity</label>
<vscode-dropdown id="verbosity-dropdown" position="below">
<vscode-label for="verbosity-dropdown">
<span class="normal">Verbosity</span>
</vscode-label>
<vscode-single-select id="verbosity-dropdown" position="below">

Check warning on line 180 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L177-L180 

Added lines #L177 - L180 were not covered by tests
<vscode-option>Off</vscode-option>
<vscode-option>Low</vscode-option>
<vscode-option>Medium</vscode-option>
<vscode-option>High</vscode-option>
</vscode-dropdown>
</vscode-single-select>

Check warning on line 185 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L185 

Added line #L185 was not covered by tests
</div>
</div>

Expand All @@ -169,27 +192,35 @@
</div>

<div id="log-to-file-options-div">
<vscode-text-field id="log-file-path" class="required" form="init-form" placeholder="${tempDir}/ansible-creator.log"
size="512">Log file path
<section slot="end" class="explorer-icon">
<vscode-button id="file-explorer" appearance="icon">
<span class="codicon codicon-file"></span>
</vscode-button>
</section>
</vscode-text-field>
<vscode-form-group variant="vertical">
<vscode-label for="log-file-path">
<span class="normal">Log file path<span>
</vscode-label>
<vscode-textfield id="log-file-path" class="required" form="init-form" placeholder="${tempDir}/ansible-creator.log"
size="512">
<vscode-icon
slot="content-after"
id="file-explorer"
name="file"
action-icon
></vscode-icon>
</vscode-textfield>
</vscode-form-group>

Check warning on line 208 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L195-L208 

Added lines #L195 - L208 were not covered by tests

<vscode-checkbox id="log-file-append-checkbox" form="init-form">Append</i></vscode-checkbox>

<div class="log-level-div">
<div class="dropdown-container">
<label for="log-level-dropdown">Log level</label>
<vscode-dropdown id="log-level-dropdown" position="below">
<vscode-label for="log-level-dropdown">
<span class="normal">Log level</span>
</vscode-label>
<vscode-single-select id="log-level-dropdown" position="below">

Check warning on line 217 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L214-L217 

Added lines #L214 - L217 were not covered by tests
<vscode-option>Debug</vscode-option>
<vscode-option>Info</vscode-option>
<vscode-option>Warning</vscode-option>
<vscode-option>Error</vscode-option>
<vscode-option>Critical</vscode-option>
</vscode-dropdown>
</vscode-single-select>

Check warning on line 223 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L223 

Added line #L223 was not covered by tests
</div>
</div>

Expand All @@ -203,11 +234,11 @@
<vscode-checkbox id="editable-mode-checkbox" form="init-form">Install collection from source code (editable mode) <br><i>This will
allow immediate reflection of content changes without having to reinstalling it. <br>
(NOTE: Requires ansible-dev-environment installed in the environment.)</i></vscode-checkbox>
<vscode-link id="ade-docs-link"href="https://ansible.readthedocs.io/projects/dev-environment/">Learn more.</vscode-link>
<a id="ade-docs-link" href="https://ansible.readthedocs.io/projects/dev-environment/">Learn more</a>

Check warning on line 237 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L237 

Added line #L237 was not covered by tests
</div>

<div class="group-buttons">
<vscode-button id="clear-button" form="init-form" appearance="secondary">
<vscode-button id="clear-button" form="init-form" secondary>

Check warning on line 241 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L241 

Added line #L241 was not covered by tests
<span class="codicon codicon-clear-all"></span>
&nbsp; Clear All
</vscode-button>
Expand All @@ -220,19 +251,19 @@
<br>
<vscode-divider></vscode-divider>
<br>
<vscode-text-area id="log-text-area" cols="512" rows="10" placeholder="Output of the command execution"
resize="vertical" readonly>Logs</vscode-text-area>
<vscode-textarea id="log-text-area" cols="90" rows="10" placeholder="Output of the command execution"
resize="vertical" readonly>Logs</vscode-textarea>

Check warning on line 255 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L254-L255 

Added lines #L254 - L255 were not covered by tests

<div class="group-buttons">
<vscode-button id="clear-logs-button" form="init-form" appearance="secondary">
<vscode-button id="clear-logs-button" form="init-form" secondary>

Check warning on line 258 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L258 

Added line #L258 was not covered by tests
<span class="codicon codicon-clear-all"></span>
&nbsp; Clear Logs
</vscode-button>
<vscode-button id="copy-logs-button" form="init-form" appearance="secondary">
<vscode-button id="copy-logs-button" form="init-form" secondary>

Check warning on line 262 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L262 

Added line #L262 was not covered by tests
<span class="codicon codicon-copy"></span>
&nbsp; Copy Logs
</vscode-button>
<vscode-button id="open-log-file-button" form="init-form" appearance="secondary" disabled>
<vscode-button id="open-log-file-button" form="init-form" secondary disabled>

Check warning on line 266 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L266 

Added line #L266 was not covered by tests
<span class="codicon codicon-open-preview"></span>
&nbsp; Open Log File
</vscode-button>
Expand All @@ -245,6 +276,16 @@
</form>

<!-- Component registration code -->
<script type="module" nonce="${getNonce()}">
import "@vscode-elements/elements/dist/vscode-button/index.js";
import "@vscode-elements/elements/dist/vscode-checkbox/index.js";
import "@vscode-elements/elements/dist/vscode-divider/index.js";
import "@vscode-elements/elements/dist/vscode-form-group/index.js";
import "@vscode-elements/elements/dist/vscode-label/index.js";
import "@vscode-elements/elements/dist/vscode-single-select/index.js";
import "@vscode-elements/elements/dist/vscode-textarea/index.js";
import "@vscode-elements/elements/dist/vscode-textfield/index.js";
</script>

Check warning on line 288 in src/features/contentCreator/createAnsibleCollectionPage.ts

View check run for this annotation

Codecov / codecov/patch

src/features/contentCreator/createAnsibleCollectionPage.ts#L279-L288 

Added lines #L279 - L288 were not covered by tests
<script type="module" nonce="${nonce}" src="${webviewUri}"></script>
</body>
</html>
Expand Down
Loading