Skip to content

Commit 77123fc

Browse files
tejhantejhan
authored
[Webview UI toolkit deprecation] AttachAcrToCluster, DraftDeployment/Dockerfile/Workflow Panel component removal (#1260)
Signed-off-by: Tejhan Diallo <82427254+tejhan@users.noreply.github.com>
1 parent 67b6c1b commit 77123fc

File tree

12 files changed

+273
-193
lines changed

12 files changed

+273
-193
lines changed

‎webview-ui/src/AttachAcrToCluster/AttachAcrToCluster.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import {
1818
import { AttachAcrToClusterState, stateUpdater, vscode } from "./state/state";
1919
import { distinct } from "../utilities/array";
2020
import { ResourceSelector } from "../components/ResourceSelector";
21-
import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
2221
import { faLink, faLinkSlash } from "@fortawesome/free-solid-svg-icons";
2322
import { AcrRoleState } from "./state/stateTypes";
2423
import { InlineAction, InlineActionProps, makeFixAction, makeInlineActionProps } from "../components/InlineAction";
@@ -96,16 +95,16 @@ export function AttachAcrToCluster(initialState: InitialState) {
9695
<p className={styles.fullWidth}>
9796
Select a cluster and Azure Container Registry (ACR) to attach. For more information on attaching an
9897
ACR to a cluster, see{" "}
99-
<VSCodeLink href="https://learn.microsoft.com/en-us/azure/aks/cluster-container-registry-integration?tabs=azure-cli#configure-acr-integration-for-an-existing-aks-cluster">
98+
<a href="https://learn.microsoft.com/en-us/azure/aks/cluster-container-registry-integration?tabs=azure-cli#configure-acr-integration-for-an-existing-aks-cluster">
10099
Configure ACR integration for an existing AKS cluster
101-
</VSCodeLink>
100+
</a>
102101
.
103102
</p>
104103
<p className={styles.fullWidth}>
105104
This operation assigns the{" "}
106-
<VSCodeLink href="https://learn.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#acrpull">
105+
<a href="https://learn.microsoft.com/en-us/azure/role-based-access-control/built-in-roles#acrpull">
107106
AcrPull
108-
</VSCodeLink>{" "}
107+
</a>{" "}
109108
role to the Microsoft Entra ID managed identity associated with your AKS cluster.
110109
</p>
111110

‎webview-ui/src/AutomatedDeployments/AutomatedDeployments.tsx

+6-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
//import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
22
import { InitialState } from "../../../src/webview-contract/webviewDefinitions/automatedDeployments";
3-
//import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
43
//import { faFolder } from "@fortawesome/free-regular-svg-icons";
54

65
import {
@@ -26,16 +25,6 @@ import {
2625
valid,
2726
} from "../utilities/validation";
2827
import { ResourceSelector } from "../components/ResourceSelector";
29-
import {
30-
VSCodeButton,
31-
//VSCodeButton,
32-
//VSCodeLink,
33-
//VSCodeRadio,
34-
//VSCodeRadioGroup,
35-
VSCodeTextField,
36-
//VSCodeDropdown,
37-
//VSCodeOption,
38-
} from "@vscode/webview-ui-toolkit/react";
3928

4029
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4130
import {
@@ -152,7 +141,8 @@ export function AutomatedDeployments(initialState: InitialState) {
152141
Workflow name *
153142
</label>
154143

155-
<VSCodeTextField
144+
<input
145+
type="text"
156146
id="workflow-name-input"
157147
value={orDefault(state.selectedWorkflowName, "")}
158148
className={styles.control}
@@ -218,12 +208,12 @@ export function AutomatedDeployments(initialState: InitialState) {
218208
onSelect={(g) => console.log("Selected Resource Group:", g)}
219209
/>
220210

221-
<VSCodeButton
211+
<button
222212
className={styles.sideControl}
223213
onClick={() => eventHandlers.onSetIsNewResourceGroupDialogShown(true)}
224214
>
225215
Create New Resource Group
226-
</VSCodeButton>
216+
</button>
227217

228218
{state.isNewResourceGroupDialogShown && (
229219
<CreateResourceGroupDialog
@@ -253,9 +243,9 @@ export function AutomatedDeployments(initialState: InitialState) {
253243
</form>
254244

255245
<div className={styles.buttonContainer}>
256-
<VSCodeButton type="submit" onClick={handleCreateWorkflowClick}>
246+
<button type="submit" onClick={handleCreateWorkflowClick}>
257247
Create DevHub Workflow
258-
</VSCodeButton>
248+
</button>
259249
</div>
260250
</>
261251
);

‎webview-ui/src/Draft/Draft.module.css

+12
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@
4747
color: var(--vscode-textLink-foreground);
4848
}
4949

50+
.linkColor {
51+
color: var(--vscode-textLink-foreground);
52+
}
53+
5054
.buttonContainer {
5155
margin-top: 1rem;
5256
margin-bottom: 1rem;
@@ -102,3 +106,11 @@ ul.existingFileList > li.removable {
102106
.nextStepsContainer h3 {
103107
margin-top: 0;
104108
}
109+
110+
.radioLabel {
111+
margin-left: 0.62rem;
112+
}
113+
114+
.radioLine {
115+
margin-bottom: 0.5rem;
116+
}

‎webview-ui/src/Draft/DraftDeployment/DraftDeployment.tsx

+47-30
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,6 @@ import { Lazy, map as lazyMap } from "../../utilities/lazy";
3232
import { ResourceSelector } from "../../components/ResourceSelector";
3333
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3434
import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
35-
import {
36-
VSCodeButton,
37-
VSCodeLink,
38-
VSCodeRadio,
39-
VSCodeRadioGroup,
40-
VSCodeTextField,
41-
} from "@vscode/webview-ui-toolkit/react";
4235
import { faFolder } from "@fortawesome/free-regular-svg-icons";
4336
import { distinct } from "../../utilities/array";
4437
import { TextWithDropdown } from "../../components/TextWithDropdown";
@@ -231,7 +224,6 @@ export function DraftDeployment(initialState: InitialState) {
231224
});
232225
}
233226

234-
const [manifests, helm, kustomize]: DeploymentSpecType[] = ["manifests", "helm", "kustomize"];
235227
const existingFiles = getExistingPaths(state.selectedDeploymentSpecType, state.existingFiles);
236228

237229
const acrImageTooltipMessage =
@@ -372,7 +364,8 @@ export function DraftDeployment(initialState: InitialState) {
372364
)}
373365

374366
{state.selectedAcrRepository.value.isNew && (
375-
<VSCodeTextField
367+
<input
368+
type="text"
376369
id="acr-image-tag-input"
377370
className={styles.control}
378371
value={
@@ -436,19 +429,20 @@ export function DraftDeployment(initialState: InitialState) {
436429
<label htmlFor="location-input" className={styles.label}>
437430
Location *
438431
</label>
439-
<VSCodeTextField
432+
<input
433+
type="text"
440434
id="location-input"
441435
readOnly
442436
value={`.${state.workspaceConfig.pathSeparator}${state.selectedLocation.value}`}
443437
className={styles.control}
444438
/>
445439
<div className={styles.controlSupplement}>
446-
<VSCodeButton appearance="icon" onClick={handleChooseLocationClick}>
440+
<button className="choose-location-button" onClick={handleChooseLocationClick}>
447441
<span className={styles.iconButton}>
448442
<FontAwesomeIcon icon={faFolder} />
449443
&nbsp;Choose location
450444
</span>
451-
</VSCodeButton>
445+
</button>
452446
</div>
453447
{hasMessage(state.selectedLocation) && (
454448
<span className={styles.validationMessage}>
@@ -460,22 +454,45 @@ export function DraftDeployment(initialState: InitialState) {
460454
<label htmlFor="deployment-type-input" className={styles.label}>
461455
Deployment options *
462456
</label>
463-
<VSCodeRadioGroup
464-
id="deployment-type-input"
465-
className={styles.control}
466-
value={state.selectedDeploymentSpecType}
467-
orientation="vertical"
468-
onChange={handleDeploymentSpecTypeChange}
469-
>
470-
<VSCodeRadio value={manifests}>Manifests</VSCodeRadio>
471-
<VSCodeRadio value={helm}>Helm</VSCodeRadio>
472-
<VSCodeRadio value={kustomize}>Kustomize</VSCodeRadio>
473-
</VSCodeRadioGroup>
457+
<div id="deployment-type-input" className={styles.control}>
458+
<div className={styles.radioLine}>
459+
<input
460+
type="radio"
461+
name="deployment-type"
462+
value="manifests"
463+
checked={state.selectedDeploymentSpecType === "manifests"}
464+
onChange={handleDeploymentSpecTypeChange}
465+
/>
466+
467+
<label className={styles.radioLabel}>Manifests</label>
468+
</div>
469+
<div className={styles.radioLine}>
470+
<input
471+
type="radio"
472+
name="deployment-type"
473+
value="helm"
474+
checked={state.selectedDeploymentSpecType === "helm"}
475+
onChange={handleDeploymentSpecTypeChange}
476+
/>
477+
<label className={styles.radioLabel}>Helm</label>
478+
</div>
479+
<div className={styles.radioLine}>
480+
<input
481+
type="radio"
482+
name="deployment-type"
483+
value="kustomize"
484+
checked={state.selectedDeploymentSpecType === "kustomize"}
485+
onChange={handleDeploymentSpecTypeChange}
486+
/>
487+
<label className={styles.radioLabel}>Kustomize</label>
488+
</div>
489+
</div>
474490

475491
<label htmlFor="app-name-input" className={styles.label}>
476492
Application name *
477493
</label>
478-
<VSCodeTextField
494+
<input
495+
type="text"
479496
id="app-name-input"
480497
value={orDefault(state.selectedApplicationName, "")}
481498
className={styles.control}
@@ -554,9 +571,9 @@ export function DraftDeployment(initialState: InitialState) {
554571
</fieldset>
555572

556573
<div className={styles.buttonContainer}>
557-
<VSCodeButton type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
574+
<button type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
558575
Create
559-
</VSCodeButton>
576+
</button>
560577
</div>
561578

562579
{existingFiles.length > 0 && (
@@ -565,15 +582,15 @@ export function DraftDeployment(initialState: InitialState) {
565582
<ul className={styles.existingFileList}>
566583
{existingFiles.map((path, i) => (
567584
<li key={i}>
568-
<VSCodeLink
585+
<a
569586
href="#"
570587
onClick={(e) => {
571588
e.preventDefault();
572589
vscode.postOpenFileRequest(path);
573590
}}
574591
>
575592
{path}
576-
</VSCodeLink>
593+
</a>
577594
</li>
578595
))}
579596
</ul>
@@ -588,9 +605,9 @@ export function DraftDeployment(initialState: InitialState) {
588605

589606
<p>
590607
To generate a GitHub Action, you can run{" "}
591-
<VSCodeLink href="#" onClick={handleDraftWorkflowClick}>
608+
<a href="#" onClick={handleDraftWorkflowClick}>
592609
Automated Deployments: Create a GitHub workflow
593-
</VSCodeLink>
610+
</a>
594611
.
595612
</p>
596613
</div>

‎webview-ui/src/Draft/DraftDockerfile/DraftDockerfile.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { ResourceSelector } from "../../components/ResourceSelector";
44
import { useStateManagement } from "../../utilities/state";
55
import styles from "../Draft.module.css";
66
import { stateUpdater, vscode } from "./state";
7-
import { VSCodeButton, VSCodeLink, VSCodeTextField } from "@vscode/webview-ui-toolkit/react";
87
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
98
import { faFolder } from "@fortawesome/free-regular-svg-icons";
109
import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
@@ -146,19 +145,20 @@ export function DraftDockerfile(initialState: InitialState) {
146145
<i className={`${styles.inlineIcon} codicon codicon-info`} />
147146
</span>
148147
</label>
149-
<VSCodeTextField
148+
<input
149+
type="text"
150150
id="location-input"
151151
readOnly
152152
value={`.${state.workspaceConfig.pathSeparator}${state.selectedLocation.value}`}
153153
className={styles.control}
154154
/>
155155
<div className={styles.controlSupplement}>
156-
<VSCodeButton appearance="icon" onClick={handleChooseLocationClick}>
156+
<button className="choose-location-button" onClick={handleChooseLocationClick}>
157157
<span className={styles.iconButton}>
158158
<FontAwesomeIcon icon={faFolder} />
159159
&nbsp;Choose location
160160
</span>
161-
</VSCodeButton>
161+
</button>
162162
</div>
163163
{hasMessage(state.selectedLocation) && (
164164
<span className={styles.validationMessage}>
@@ -243,15 +243,15 @@ export function DraftDockerfile(initialState: InitialState) {
243243

244244
<div className={styles.buttonContainer}>
245245
{state.status !== "Created" && (
246-
<VSCodeButton type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
246+
<button type="submit" disabled={state.status !== "Editing" || isNothing(validate())}>
247247
Create
248-
</VSCodeButton>
248+
</button>
249249
)}
250250

251251
{state.existingFiles.map((path, i) => (
252-
<VSCodeButton key={i} appearance="secondary" onClick={() => vscode.postOpenFileRequest(path)}>
252+
<button key={i} className="secondary-button" onClick={() => vscode.postOpenFileRequest(path)}>
253253
Open {path}
254-
</VSCodeButton>
254+
</button>
255255
))}
256256
</div>
257257

@@ -263,18 +263,18 @@ export function DraftDockerfile(initialState: InitialState) {
263263

264264
<p>
265265
If you still need to generate the appropriate deployment files, you can run{" "}
266-
<VSCodeLink href="#" onClick={handleDraftDeploymentClick}>
266+
<a href="#" onClick={handleDraftDeploymentClick}>
267267
Automated Deployments: Create a deployment
268-
</VSCodeLink>{" "}
268+
</a>{" "}
269269
to easily create the appropriate files.
270270
</p>
271271

272272
<p>
273273
If you already have all the files you need to deploy and would like to generate a GitHub
274274
Action, you can run{" "}
275-
<VSCodeLink href="#" onClick={handleDraftWorkflowClick}>
275+
<a href="#" onClick={handleDraftWorkflowClick}>
276276
Automated Deployments: Create a GitHub workflow
277-
</VSCodeLink>
277+
</a>
278278
.
279279
</p>
280280
</div>

0 commit comments

Comments
 (0)