| Command | -Command Details | -
|---|---|
| Command Run | -kubectl {{name}} | -
| Command Output | -{{{breaklines command}}} |
-
{command.command}
+ {props.output}}
+ {hasError && {props.errorMessage}}
+ {hasExplanation && {props.explanation}}
+
+ );
+}
\ No newline at end of file
diff --git a/webview-ui/src/Kubectl/Kubectl.module.css b/webview-ui/src/Kubectl/Kubectl.module.css
new file mode 100644
index 00000000..206701c8
--- /dev/null
+++ b/webview-ui/src/Kubectl/Kubectl.module.css
@@ -0,0 +1,113 @@
+.wrapper {
+ display: grid;
+ gap: 0.5rem;
+ grid-template-areas:
+ "header header"
+ "nav content";
+ grid-template-columns: 1fr 3fr;
+}
+
+.mainHeading {
+ grid-area: header;
+}
+
+.commandNav {
+ grid-area: nav;
+}
+
+.mainContent {
+ grid-area: content;
+}
+
+ul.commandCategoryList {
+ list-style-type: none;
+ padding: 0;
+ padding-left: 0;
+ margin: 0;
+}
+
+ul.commandCategoryList > li {
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 0.6rem;
+}
+
+ul.commandCategoryList h3,h4 {
+ margin: 0;
+ margin-top: 0.2rem;
+ margin-bottom: 0.2rem;
+}
+
+ul.commandList {
+ list-style-type: none;
+ padding: 0;
+ padding-left: 1rem;
+ margin: 0;
+}
+
+ul.commandList > li {
+ display: grid;
+ grid-template-columns: auto 2rem;
+ grid-gap: 0.5rem;
+ margin-bottom: 0.4rem;
+ align-items: center;
+}
+
+ul.commandList > li.selected {
+ background-color: var(--vscode-list-activeSelectionBackground);
+ color: var(--vscode-list-activeSelectionForeground);
+}
+
+ul.commandList > li:hover {
+ cursor: pointer;
+ background-color: var(--vscode-list-hoverBackground);
+ color: var(--vscode-list-hoverForeground);
+}
+
+ul.commandList pre {
+ margin: 0;
+ font-size: 0.8rem;
+}
+
+ul.commandList .commandDelete {
+ cursor: pointer;
+}
+
+ul.commandList .commandDelete:hover {
+ cursor: pointer;
+ color: var(--vscode-notificationsWarningIcon-foreground);
+}
+
+.inputContainer {
+ display: grid;
+ grid-template-columns: auto 10rem;
+ grid-gap: 0;
+ grid-column-gap: 0.5rem;
+ align-items: center;
+}
+
+.inputContainer .label {
+ grid-column: 1 / 2;
+ margin-bottom: 0.2rem;
+}
+
+.inputContainer .control, .commands {
+ margin-bottom: 0.8rem;
+ min-width: 20rem;
+}
+
+.inputContainer .control {
+ grid-column: 1 / 1;
+}
+
+.inputContainer .commands {
+ grid-column: 2 / 2;
+}
+
+.inputContainer .commands > * {
+ margin-right: 0.5rem;
+}
+
+pre.error {
+ color: var(--vscode-testing-iconFailed);
+}
diff --git a/webview-ui/src/Kubectl/Kubectl.tsx b/webview-ui/src/Kubectl/Kubectl.tsx
new file mode 100644
index 00000000..610daa9f
--- /dev/null
+++ b/webview-ui/src/Kubectl/Kubectl.tsx
@@ -0,0 +1,102 @@
+import { VSCodeDivider } from "@vscode/webview-ui-toolkit/react";
+import { CommandCategory, InitialState, PresetCommand, presetCommands } from "../../../src/webview-contract/webviewDefinitions/kubectl";
+import styles from "./Kubectl.module.css";
+import { getWebviewMessageContext } from "../utilities/vscode";
+import { useEffect, useState } from "react";
+import { CommandList } from "./CommandList";
+import { CommandInput } from "./CommandInput";
+import { CommandOutput } from "./CommandOutput";
+import { SaveCommandDialog } from "./SaveCommandDialog";
+
+interface KubectlState {
+ allCommands: PresetCommand[]
+ selectedCommand: string | null
+ isCommandRunning: boolean
+ output?: string
+ errorMessage?: string
+ explanation?: string
+ isSaveDialogShown: boolean
+}
+
+export function Kubectl(props: InitialState) {
+ const vscode = getWebviewMessageContext<"kubectl">();
+
+ const [state, setState] = useState