Improve UX

Author: auxves

src/commons.ts

@@ -113,14 +113,6 @@ export default class Commons {
     const extSettings = this.GetSettings();
     const cusSettings = await this.GetCustomSettings();
 
-    if (
-      cusSettings.downloadPublicGist
-        ? !extSettings.gist
-        : !cusSettings.token || !extSettings.gist
-    ) {
-      this.webviewService.OpenLandingPage();
-    }
-
     settings.customConfig = cusSettings;
     settings.extConfig = extSettings;
     return settings;

src/service/github.oauth.service.ts

@@ -14,7 +14,7 @@ export class GitHubOAuthService {
     this.app.use(express.json(), express.urlencoded({ extended: false }));
   }
 
-  public async StartProcess() {
+  public async StartProcess(cmd?: string) {
     const customSettings = await state.commons.GetCustomSettings();
     const host = customSettings.githubEnterpriseUrl
       ? new URL(customSettings.githubEnterpriseUrl)
@@ -60,9 +60,7 @@ export class GitHubOAuthService {
 
         const gists: any[] = await this.getGists(token, user, host);
 
-        if (gists.length) {
-          state.commons.webviewService.OpenGistSelectionpage(gists);
-        }
+        state.commons.webviewService.OpenGistSelectionpage(gists, cmd)
       } catch (err) {
         const error = new Error(err);
         Commons.LogException(error, state.commons.ERROR_MESSAGE, true);

src/service/webview.service.ts

@@ -189,6 +189,10 @@ export class WebviewService {
         {
           find: "@GISTS",
           replace: "gists"
+        },
+        {
+          find: "@SKIP",
+          replace: "skip"
         }
       ]
     }
@@ -316,7 +320,7 @@ export class WebviewService {
     }
   }
 
-  public OpenLandingPage() {
+  public OpenLandingPage(cmd?: string) {
     const webview = this.webviews[0];
     const releaseNotes = require("../../release-notes.json");
     const content: string = this.GenerateContent({
@@ -327,7 +331,7 @@ export class WebviewService {
     if (webview.webview) {
       webview.webview.webview.html = content;
       webview.webview.reveal();
-      return webview;
+      return webview.webview;
     }
     const landingPanel = vscode.window.createWebviewPanel(
       "landingPage",
@@ -341,7 +345,7 @@ export class WebviewService {
     landingPanel.webview.onDidReceiveMessage(async message => {
       switch (message.command) {
         case "loginWithGitHub":
-          new GitHubOAuthService(54321).StartProcess();
+          new GitHubOAuthService(54321).StartProcess(cmd);
           const customSettings = await state.commons.GetCustomSettings();
           const host = customSettings.githubEnterpriseUrl
             ? new URL(customSettings.githubEnterpriseUrl)
@@ -398,17 +402,20 @@ export class WebviewService {
     return landingPanel;
   }
 
-  public OpenGistSelectionpage(gists: any) {
+  public OpenGistSelectionpage(gists: any, cmd?: string) {
     const webview = this.webviews[2];
     const content: string = this.GenerateContent({
       content: webview.htmlContent,
       items: webview.replaceables,
-      gists
+      gists,
+      skip: cmd !== "extension.downloadSettings"
+      ? `<a href="#" onclick="vscode.postMessage({close: true});" title="Skip (new one will be created upon first upload)" class="btn btn-primary mt-4">Skip (new one will be created upon first upload)</a>`
+      : ""
     });
     if (webview.webview) {
       webview.webview.webview.html = content;
       webview.webview.reveal();
-      return webview;
+      return webview.webview;
     }
     const gistSelectionPanel = vscode.window.createWebviewPanel(
       "selectGist",
@@ -428,6 +435,9 @@ export class WebviewService {
       } else {
         gistSelectionPanel.dispose();
       }
+      if (cmd) {
+        vscode.commands.executeCommand(cmd);
+      }
     });
     webview.webview = gistSelectionPanel;
     gistSelectionPanel.onDidDispose(() => (webview.webview = null));

src/sync.ts

@@ -69,15 +69,20 @@ export class Sync {
     // @ts-ignore
     const args = arguments;
     let github: GitHubService = null;
-    let localConfig = new LocalConfig();
+    const localConfig = await state.commons.InitalizeSettings();
+
+    if (!localConfig.customConfig.token) {
+      state.commons.webviewService.OpenLandingPage("extension.updateSettings");
+      return;
+    }
+
     const allSettingFiles: File[] = [];
     let uploadedExtensions: ExtensionInformation[] = [];
     const ignoredExtensions: ExtensionInformation[] = [];
     const dateNow = new Date();
     await state.commons.HandleStopWatching();
 
     try {
-      localConfig = await state.commons.InitalizeSettings();
       localConfig.publicGist = false;
       if (args.length > 0) {
         if (args[0] === "publicGIST") {
@@ -434,11 +439,22 @@ export class Sync {
    * Download setting from github gist
    */
   public async download(): Promise<void> {
-    let localSettings: LocalConfig = new LocalConfig();
+    const localSettings: LocalConfig = await state.commons.InitalizeSettings();
+
+    if (
+      localSettings.customConfig.downloadPublicGist
+        ? !localSettings.extConfig.gist
+        : !localSettings.customConfig.token || !localSettings.extConfig.gist
+    ) {
+      state.commons.webviewService.OpenLandingPage(
+        "extension.downloadSettings"
+      );
+      return;
+    }
+
     await state.commons.HandleStopWatching();
 
     try {
-      localSettings = await state.commons.InitalizeSettings();
       await StartDownload(localSettings.extConfig, localSettings.customConfig);
     } catch (err) {
       Commons.LogException(err, state.commons.ERROR_MESSAGE, true);

ui/gist-selection/gist-selection.html

@@ -30,13 +30,7 @@ <h3 class="mx-auto mt-2 mb-3 text-white-50a">
         Select Your Existing Gist
       </h3>
       <div id="selectionContainer" class="list-group mx-auto text-left"></div>
-      <a
-        href="#"
-        onclick="vscode.postMessage({close: true});"
-        title="Skip (new one will be created automatically)"
-        class="btn btn-primary mt-4"
-        >Skip (new one will be created automatically)</a
-      >
+      <div id="skipContainer"></div>
     </div>
     <div
       class="modal fade"
@@ -90,6 +84,7 @@ <h5 class="modal-title" id="exampleModalCenterTitle">
     <font-injector></font-injector>
     <script defer>
       const gists = JSON.parse(`@GISTS`);
+      const skip = @SKIP;
     </script>
     <script defer src="@PWD/ui/gist-selection/gist-selection.js"></script>
   </body>

ui/gist-selection/gist-selection.js

@@ -1,5 +1,14 @@
 // @ts-nocheck
 
+function appendHTML(parent, html) {
+  var div = document.createElement("div");
+  div.innerHTML = html;
+  while (div.children.length > 0) {
+    parent.appendChild(div.children[0]);
+  }
+  div.remove();
+}
+
 const vscode = acquireVsCodeApi();
 
 /* https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site */
@@ -52,6 +61,9 @@ document
     document.body.className.includes("vscode-dark") ? "bg-dark" : "bg-light"
   );
 
+const skipContainer = document.querySelector("#skipContainer");
+appendHTML(skipContainer, skip);
+
 const selectionTemplate = `
 <button type="button" onclick="saveGistId('@id')" class="list-group-item list-group-item-action">@description (@id) – Updated @timestamp ago</button>`;