lightspeedExplorer: minor UI adjustments (#1244)

- Add a tooltip to explain why we cannot explain a playbook - Use a dedicated CSS file - Align the view content slightly on the right
ansible · Apr 16, 2024 · b8830a8 · b8830a8
1 parent 62d4313
commit b8830a8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/.vscodeignore b/.vscodeignore
@@ -21,6 +21,7 @@
 !media/contentCreator/icons/ansible-logo-red.png
 !media/contentCreator/scaffoldCollectionPageStyle.css
 !media/contentCreator/welcomePageStyle.css
+!media/lightspeedExplorerView/style.css
 !media/playbookGeneration/playbookGeneration.css
 !media/playbookGeneration/style.css
 !out/client/src/extension.js

diff --git a/media/lightspeedExplorerView/style.css b/media/lightspeedExplorerView/style.css
@@ -0,0 +1,6 @@
+#lightspeedExplorerView {
+	margin-left: 10px;
+}
+.button-container {
+	margin-left: 10px;
+}
diff --git a/package.json b/package.json
@@ -261,7 +261,7 @@
       },
       {
         "command": "ansible.lightspeed.playbookExplanation",
-        "title": "Ansible Lightspeed: Playbook explanation",
+        "title": "Explain the playbook with Ansible Lightspeed",
         "enablement": "redhat.ansible.lightspeedExperimentalEnabled"
       },
       {

diff --git a/src/features/lightspeed/utils/explorerView.ts b/src/features/lightspeed/utils/explorerView.ts
@@ -15,7 +15,11 @@ export function getWebviewContentWithLoginForm(
     "explorer",
     "main.js",
   ]);
-  const styleUri = getUri(webview, extensionUri, ["media", "style.css"]);
+  const styleUri = getUri(webview, extensionUri, [
+    "media",
+    "lightspeedExplorerView",
+    "style.css",
+  ]);
   const nonce = getNonce();
 
   return /*html*/ `
@@ -29,15 +33,17 @@ export function getWebviewContentWithLoginForm(
       <title>Ansible Lightspeed Explorer!</title>
     </head>
     <body>
-    Welcome to Ansible Lightspeed for Visual Studio Code.\nExperience smarter automation using Ansible Lightspeed with watsonx Code Assistant solutions for your playbook. <a href="https://www.redhat.com/en/engage/project-wisdom">Learn more</a><br />Let's simplify your workflow by connecting VS Code with Ansible Lightspeed.<br />
-    <form id="playbook-explanation-form">
-      <div class="component-container">
-        <section class="component-section">
-          <vscode-button id="lightspeed-explorer-connect">Connect</vscode-button>
-        </section>
-      </section>
-      <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
-    </form>
+    <div id="lightspeedExplorerView">
+      Welcome to Ansible Lightspeed for Visual Studio Code.\nExperience smarter automation using Ansible Lightspeed with watsonx Code Assistant solutions for your playbook. <a href="https://www.redhat.com/en/engage/project-wisdom">Learn more</a><br />Let's simplify your workflow by connecting VS Code with Ansible Lightspeed.<br />
+      <form id="playbook-explanation-form">
+        <div class="button-container">
+          <section class="component-section">
+            <vscode-button id="lightspeed-explorer-connect">Connect</vscode-button>
+          </section>
+        </div>
+        <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
+      </form>
+    </div>
     </body>
   </html>
         `;
@@ -61,12 +67,18 @@ export function getWebviewContentWithActiveSession(
     "explorer",
     "main.js",
   ]);
-  const styleUri = getUri(webview, extensionUri, ["media", "style.css"]);
+  const styleUri = getUri(webview, extensionUri, [
+    "media",
+    "lightspeedExplorerView",
+    "style.css",
+  ]);
   const nonce = getNonce();
   const explainForm = `<div class="button-container">
   <form id="playbook-explanation-form">
     <vscode-button id="lightspeed-explorer-playbook-explanation-submit" ${
-      has_playbook_opened ? "" : "disabled"
+      has_playbook_opened
+        ? ""
+        : "disabled title='The file in the active editor view is not an Ansible playbook' "
     }>Explain the current playbook</vscode-button>
   <script type="module" nonce="${nonce}" src="${webviewUri}"></script>
   </form>
@@ -85,11 +97,13 @@ export function getWebviewContentWithActiveSession(
       <title>Ansible Lightspeed Explorer!</title>
     </head>
     <body>
-
-    Logged in as: ${userName}<br />
-    User Type: ${userType}<br />
-    Role: ${userRole}<br />
-    ${lightspeedExperimentalEnabled ? explainForm : ""}
+    <body>
+    <div id="lightspeedExplorerView">
+      Logged in as: ${userName}<br />
+      User Type: ${userType}<br />
+      Role: ${userRole}<br />
+      ${lightspeedExperimentalEnabled ? explainForm : ""}
+    </div>
     </body>
   </html>
         `;