[ansible-creator] Fix file opening issue in Linux environments (#1009)

* handle opening of files in the editor properly

* update content and styling of system-check box in the welcome page

* fix the language in the UI

* chore: auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

media/contentCreator/welcomePageStyle.css

@@ -54,6 +54,14 @@ body {
   content: "✗ ";
 }
 
+.refresh-button-div {
+  margin-top: 8px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .menu {
   display: flex;
   justify-content: space-around;

src/features/contentCreator/initPage.ts

@@ -144,7 +144,7 @@ export class AnsibleCreatorInit {
                 </div>
 
                 <div class="checkbox-div">
-                  <vscode-checkbox id="log-to-file-checkbox" form="init-form">Log to output to file <br><i>Default path:
+                  <vscode-checkbox id="log-to-file-checkbox" form="init-form">Log output to a file <br><i>Default path:
                       ${tempDir}/ansible-creator.log.</i></vscode-checkbox>
                 </div>
 
@@ -422,10 +422,11 @@ export class AnsibleCreatorInit {
   }
 
   public async openLogFile(fileUrl: string) {
-    vscode.commands.executeCommand(
-      "vscode.open",
-      vscode.Uri.parse(`vscode://file/${fileUrl}`)
-    );
+    const logFileUrl = vscode.Uri.file(fileUrl).fsPath;
+    console.log(`[ansible-creator] New Log file url: ${logFileUrl}`);
+    const parsedUrl = vscode.Uri.parse(`vscode://file${logFileUrl}`);
+    console.log(`[ansible-creator] Parsed log file url: ${parsedUrl}`);
+    this.openFileInEditor(parsedUrl.toString());
   }
 
   public async openFolderInWorkspace(folderUrl: string) {
@@ -442,9 +443,21 @@ export class AnsibleCreatorInit {
     );
 
     // open the galaxy file in the editor
-    vscode.commands.executeCommand(
-      "vscode.open",
-      vscode.Uri.parse(`vscode://file/${folderUrl}/galaxy.yml`)
-    );
+    const galaxyFileUrl = vscode.Uri.joinPath(
+      vscode.Uri.parse(folderUrl),
+      "galaxy.yml"
+    ).fsPath;
+    console.log(`[ansible-creator] Galaxy file url: ${galaxyFileUrl}`);
+    const parsedUrl = vscode.Uri.parse(`vscode://file${galaxyFileUrl}`);
+    console.log(`[ansible-creator] Parsed galaxy file url: ${parsedUrl}`);
+    this.openFileInEditor(parsedUrl.toString());
+  }
+
+  public openFileInEditor(fileUrl: string) {
+    const re = /~/gi;
+    const updatedUrl = fileUrl.replace(re, os.homedir());
+    console.log(`[ansible-creator] Updated url: ${updatedUrl}`);
+
+    vscode.commands.executeCommand("vscode.open", vscode.Uri.parse(updatedUrl));
   }
 }

src/features/contentCreator/welcomePage.ts

@@ -134,6 +134,7 @@ export class AnsibleCreatorMenu {
               <img src="${contentCreatorIcon}" alt="Ansible Creator Icon">
               <h1>nsible Content Creator</h1>
             </div>
+
             <p>A tool for scaffolding ansible content.
               <vscode-link href="https://github.com/ansible-community/ansible-creator#ansible-creator">Read our docs</vscode-link>
               to learn more about this tool.</p>
@@ -142,12 +143,15 @@ export class AnsibleCreatorMenu {
               <div class="icon">
                 <p>System requirements:</p>
               </div>
+
               <div id=install-status></div>
 
-              <vscode-button id="refresh">
-                <span class="codicon codicon-refresh"></span>
-                &nbsp; Refresh
-              </vscode-button>
+              <div class="refresh-button-div">
+                <vscode-button id="refresh">
+                  <span class="codicon codicon-refresh"></span>
+                  &nbsp; Refresh
+                </vscode-button>
+              </div>
 
             </div>
           </div>

src/webview/apps/contentCreator/initPageApp.ts

@@ -203,6 +203,11 @@ function handleInitClearClick() {
   verboseDropdown.currentValue = "Off";
 
   initCreateButton.disabled = true;
+
+  logToFileCheckbox.checked = false;
+  logFilePath.value = "";
+  logFileAppendCheckbox.checked = false;
+  logLevelDropdown.currentValue = "Debug";
 }
 
 function toggleLogToFileOptions() {

src/webview/apps/contentCreator/welcomePageApp.ts

@@ -97,8 +97,8 @@ function updateAnsibleCreatorAvailabilityStatus() {
         } else {
           ansibleCreatorVersionStatusText.innerHTML = `
           <p class='not-found'>ansible-creator version: Not found</p>
-          <p>Please <vscode-link href="command:ansible.content-creator.install">install ansible-creator</vscode-link> (via pip) before getting started.<br>
-          Or change <vscode-link href="command:ansible.python-settings.open">ansible-python settings</vscode-link>.</p>
+          <p>Before getting started, please <vscode-link href="command:ansible.content-creator.install">install ansible-creator</vscode-link> (via pip) or <br>
+          <vscode-link href="command:ansible.python-settings.open">switch to a different python interpreter</vscode-link>  with ansible-creator already installed in it.</p>
           `;
         }
         installStatusDiv?.appendChild(ansibleCreatorVersionStatusText);