Playbook Generation UI update

ansible · May 6, 2024 · 083deb7 · 083deb7
1 parent 3eb7f3b
commit 083deb7
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 5 deletions.
diff --git a/media/playbookGeneration/style.css b/media/playbookGeneration/style.css
@@ -1,3 +1,23 @@
+a:link {
+  text-decoration: none;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+a:active {
+  text-decoration: none;
+}
+
+.backAnchor {
+  cursor: pointer;
+}
+
 .playbookGeneration {
   right: 0px;
   bottom: 0px;
@@ -152,6 +172,12 @@
   display: none;
 }
 
+.promptContainer {
+  margin: 1em;
+  display: none;
+  color: var(--vscode-descriptionForeground);
+}
+
 .examplesContainer {
   margin-top: 1em;
 }
@@ -167,6 +193,7 @@
   border-radius: 8px;
   width: fit-content;
   max-width: 90%;
+  color: var(--vscode-descriptionForeground);
 }
 
 .continueButtonContainer {

diff --git a/src/features/lightspeed/playbookGeneration.ts b/src/features/lightspeed/playbookGeneration.ts
@@ -185,6 +185,12 @@ export function getWebviewContent(webview: Webview, extensionUri: Uri) {
           <h3>Do the following steps look right to you?</h3>
         </div>
         <div class="mainContainer">
+          <div class="promptContainer">
+            <span>
+              "<span id="prompt"></span>"&nbsp;
+              <a class="backAnchor" id="back-anchor">Edit</a>
+            </span>
+          </div>
           <div class="editArea">
             <vscode-text-area rows=5 resize="vertical"
                 placeholder="Describe the goal in your own words."
@@ -201,7 +207,7 @@ export function getWebviewContent(webview: Webview, extensionUri: Uri) {
           </div>
           <div class="resetFeedbackContainer">
             <div class="resetContainer">
-                <vscode-button class="buttonBorder" appearance="secondary" id="reset-button">
+                <vscode-button appearance="secondary" id="reset-button" disabled>
                     Reset
                 </vscode-button>
             </div>

diff --git a/src/webview/apps/lightspeed/playbookGeneration/main.ts b/src/webview/apps/lightspeed/playbookGeneration/main.ts
@@ -30,6 +30,7 @@ window.addEventListener("load", () => {
   setListener("thumbsup-button", sendThumbsup);
   setListener("thumbsdown-button", sendThumbsdown);
   setListener("back-button", back);
+  setListener("back-anchor", back);
 
   setListenerOnTextArea();
 
@@ -57,11 +58,16 @@ window.addEventListener("message", (event) => {
       changeDisplay("firstMessage", "none");
       changeDisplay("secondMessage", "block");
       changeDisplay("generatePlaybookContainer", "block");
+      changeDisplay("promptContainer", "block");
 
       const element = document.getElementById("playbook-text-area") as TextArea;
-      savedSummary = element.value = message.summary;
+      savedSummary = element.value = message.summary.content;
       resetTextAreaHeight();
-      element.rows = 25;
+
+      const prompt = document.getElementById("prompt") as HTMLSpanElement;
+      prompt.textContent = savedInput;
+
+      element.rows = 20;
 
       break;
     }
@@ -87,11 +93,16 @@ function setListener(id: string, func: any) {
 function setListenerOnTextArea() {
   const textArea = document.getElementById("playbook-text-area") as TextArea;
   const submitButton = document.getElementById("submit-button") as Button;
+  const resetButton = document.getElementById("reset-button") as Button;
   if (textArea) {
     textArea.addEventListener("input", async () => {
       const input = textArea.value;
       submitButton.disabled = input.length === 0;
 
+      if (savedSummary) {
+        resetButton.disabled = savedSummary === input;
+      }
+
       adjustTextAreaHeight();
     });
   }
@@ -129,6 +140,7 @@ function back() {
   changeDisplay("firstMessage", "block");
   changeDisplay("secondMessage", "none");
   changeDisplay("generatePlaybookContainer", "none");
+  changeDisplay("promptContainer", "none");
 
   const element = document.getElementById("playbook-text-area") as TextArea;
   if (savedInput) {

diff --git a/test/ui-test/lightspeedUiTest.ts b/test/ui-test/lightspeedUiTest.ts
@@ -201,12 +201,21 @@ export function lightspeedUIAssetsTest(): void {
           setTimeout(res, 1000);
         });
 
-        // Test Reset button
+        // Verify summary output and text edit
         let text = await textArea.getText();
         expect(text.includes('Name: "Create an azure network..."'));
         await textArea.sendKeys("# COMMENT\n");
         text = await textArea.getText();
         expect(text.includes("# COMMENT\n"));
+
+        // Verify the prompt is displayed as a static text
+        const prompt = await webView.findWebElement(
+          By.xpath("//span[@id='prompt']"),
+        );
+        text = await prompt.getText();
+        expect(text.includes("Create an azure network."));
+
+        // Test Reset button
         const resetButton = await webView.findWebElement(
           By.xpath("//vscode-button[@id='reset-button']"),
         );
@@ -239,6 +248,26 @@ export function lightspeedUIAssetsTest(): void {
         text = await textArea.getText();
         expect(text.includes('Name: "Create an azure network..."'));
 
+        // Test Edit link next to the prompt text
+        const backAnchor = await webView.findWebElement(
+          By.xpath("//a[@id='back-anchor']"),
+        );
+        expect(backButton, "backButton should not be undefined").not.to.be
+          .undefined;
+        backAnchor.click();
+        await new Promise((res) => {
+          setTimeout(res, 500);
+        });
+
+        text = await textArea.getText();
+        expect(text.startsWith("Create an azure network."));
+        submitButton.click();
+        await new Promise((res) => {
+          setTimeout(res, 1000);
+        });
+        text = await textArea.getText();
+        expect(text.includes('Name: "Create an azure network..."'));
+
         // Click Generate playbook button to invoke the generations API
         const generatePlaybookButton = await webView.findWebElement(
           By.xpath("//vscode-button[@id='generate-button']"),
@@ -279,7 +308,7 @@ export function lightspeedUIAssetsTest(): void {
 
         // Open playbook explanation webview.
         await workbench.executeCommand(
-          "Ansible Lightspeed: Playbook explanation",
+          "Explain the playbook with Ansible Lightspeed",
         );
         await new Promise((res) => {
           setTimeout(res, 2000);