wrap ups

CHANGELOG.md

@@ -0,0 +1,34 @@
+## v0.2.0
+
+Welcome to v0.2.0, and your first official changelog! With this and all future updates, if something's not quite right you can [report issues here](https://github.com/jodyheavener/circleci-vscode/issues).
+
+So what's new? **Everything.**
+
+### Entirely rewritten
+
+Everything about the extension has been reworked, from the code to the README. This allowed me to break things up into cleaner, purpose-built components that will hopefully make things more extensible and easier to debug.
+
+With the new code comes new underlying architecture, including the use of a different [client for the CircleCI API](https://www.npmjs.com/package/circle-client), one which gives access to [V2 API endpoints](https://circleci.com/docs/api/v2/). Some of these endpoints are still evolving, so the extension could break because of this, but I'll do my best to keep everything up to date.
+
+Alongside the code changes comes some cosmetic updates as well, with brand new icons hand-made for the extension, updated status icons, and new webview layouts (we'll get to this later).
+
+### Updated tree view
+
+v0.1.0 of the extension displayed each Pipeline's Job builds, regardless of the Workflow, which was mostly a limitation of the API client I was using. This was fine, but was a little hard to follow and didn't really resemble the same type of hierarchy present in Circle's web UI. With this release comes a whole new tree view that displays nested Pipelines, Workflows, and Jobs. You can learn more about each tree item and all of its capabilities in the [README](https://github.com/jodyheavener/circleci-vscode#-features).
+
+### Inspect tests
+
+One of the major new features of the extension is the ability to inspect Job Test metadata. That means, if your Job [supports it](https://circleci.com/docs/2.0/collect-test-data/), you can load the results of your test suite right inside VS Code. Not can you see results, but you can also check out failure messages and even click right over to the relevant code.
+
+### All the small things
+
+In addition to the new layout and test UI, there are all sorts of small updates, such as approving hold jobs, better support for artifact files, and improved Workflow re-run functionality.
+
+### What's up next
+
+There will be bugs, but I'll be trying to stay on top of them. Additionally, I'm aiming to get the following completed before too long:
+
+- Localize everything and provide a few translations.
+- Release a 1.x version; this is dependent on Circle moving their V2 API endpoints out of Preview.
+- Better in-app Artifact viewing.
+- Workflow summary metrics and other Project analytics.

src/extension.ts

@@ -21,6 +21,8 @@ let exportedContext: ExtensionContext;
 let globalCommands: Disposable[];
 
 export async function activate(context: ExtensionContext): Promise<void> {
+  // context.globalState.update(constants.EXTENSION_VERSION, undefined); // REMOVE ME
+
   const extension = extensions.getExtension(constants.QUALIFIED_EXTENSION_ID)!;
   const currentVersion = extension.packageJSON.version;
   const previousVersion = context.globalState.get<string>(
@@ -30,7 +32,7 @@ export async function activate(context: ExtensionContext): Promise<void> {
   migrateConfig(currentVersion, previousVersion);
 
   if (!workspace.workspaceFolders || !workspace.workspaceFolders.length) {
-    // NOTE: This was getting annoying. Maybe we can
+    // FIXME: This was getting annoying. Maybe we can
     // re-enable with a different approach later.
     //
     // return void window.showInformationMessage(
@@ -82,7 +84,10 @@ function migrateConfig(
   currentVersion: string,
   previousVersion: string | undefined
 ): void {
-  if (!previousVersion || currentVersion === previousVersion) {
+  // FIXME: This needs some fine tuning
+  return;
+
+  if (currentVersion === previousVersion) {
     return;
   }
 

src/lib/constants.ts

@@ -53,4 +53,6 @@ export default {
   REQUEST_TESTS_WEBVIEW_EVENT: 'circleci.requestTestsWebview',
   REQUEST_JOB_WEBVIEW_EVENT: 'circleci.requestJobWebview',
   OPEN_FILE_WEBVIEW_EVENT: 'circleci.openFileWebview',
+  WELCOME_SETUP_WEBVIEW_EVENT: 'circleci.welcomeSetupWebview',
+  UPDATE_TOKEN_WEBVIEW_EVENT: 'circleci.updateTokenWebview',
 };

src/views/job-tests.ts

@@ -14,7 +14,7 @@ export default class JobTests extends TreeItem implements Disposable {
   private testsCommand: string;
   private testsWebView: JobTestsWebView;
   private disposed = false;
-  private registeredCommand: Disposable;
+  private registeredCommand?: Disposable;
 
   constructor(readonly job: Job) {
     super(l('viewTests', 'View Tests →'), TreeItemCollapsibleState.None);
@@ -28,10 +28,14 @@ export default class JobTests extends TreeItem implements Disposable {
     `.replace(/(\r|\s)/gm, '');
     this.testsWebView = new JobTestsWebView(job);
 
-    this.registeredCommand = commands.registerCommand(
-      this.testsCommand,
-      async () => await this.testsWebView.show()
-    );
+    try {
+      this.registeredCommand = commands.registerCommand(
+        this.testsCommand,
+        async () => await this.testsWebView.show()
+      );
+    } catch (error) {
+      // FIXME: Config changes result in double command registrations.
+    }
 
     this.command = {
       command: this.testsCommand,
@@ -41,7 +45,7 @@ export default class JobTests extends TreeItem implements Disposable {
   }
 
   dispose(): void {
-    this.registeredCommand.dispose();
+    this.registeredCommand?.dispose();
     this.disposed = true;
   }
 }

src/views/upgrade-webview.ts

@@ -1,3 +1,6 @@
+import { resolve } from 'path';
+import { Uri, workspace } from 'vscode';
+import { getContext } from '../extension';
 import constants from '../lib/constants';
 import { l } from '../lib/utils';
 import BaseWebView from './base-webview';
@@ -24,8 +27,13 @@ export default class UpgradeWebView extends BaseWebView {
   }
 
   async getContent(): Promise<void> {
-    // TODO: get changelog data for version
-    const changelog = '# Changelog';
+    const document = await workspace.openTextDocument(
+      Uri.file(
+        resolve(getContext().extensionPath, 'CHANGELOG.md')
+      )
+    );
+
+    const changelog = document.getText();
 
     this.postMessage({
       event: constants.CHANGELOG_CONTENT_WEBVIEW_EVENT,

src/views/welcome-webview.ts

@@ -1,4 +1,9 @@
+import { resolve } from 'path';
+import { existsSync } from 'fs';
+import { workspace } from 'vscode';
+import config from '../lib/config';
 import constants from '../lib/constants';
+import { ConfigKey, PostMessagePayload } from '../lib/types';
 import { l } from '../lib/utils';
 import BaseWebView from './base-webview';
 
@@ -20,19 +25,36 @@ export default class WelcomeWebView extends BaseWebView {
   }
 
   onDidShow(): void {
-    this.getContent();
+    this.getSetupInfo();
   }
 
-  async getContent(): Promise<void> {
-    // TODO: get changelog data for version
-    const changelog = '# Changelog';
+  getSetupInfo(): void {
+    const basePath = workspace.workspaceFolders![0].uri.fsPath;
+
+    const configFile = [
+      'circle.yml',
+      'circle.yaml',
+      '.circleci/config.yml',
+      '.circleci/config.yaml',
+    ].find((path) => {
+      return existsSync(resolve(basePath, path));
+    });
 
     this.postMessage({
-      event: constants.CHANGELOG_CONTENT_WEBVIEW_EVENT,
+      event: constants.WELCOME_SETUP_WEBVIEW_EVENT,
       data: {
+        apiToken: config().get(ConfigKey.APIToken),
+        configFile,
         version: this.version,
-        content: changelog,
       },
     });
   }
+
+  async onMessage(message: PostMessagePayload): Promise<void> {
+    switch (message.event) {
+      case constants.UPDATE_TOKEN_WEBVIEW_EVENT:
+        config().set(ConfigKey.APIToken, message.data.token);
+        break;
+    }
+  }
 }

src/webviews/assets/components/Upgrade/index.scss

@@ -6,3 +6,38 @@ body {
   min-height: 100vh;
   box-sizing: border-box;
 }
+
+.upgrade-header {
+  display: flex;
+  margin-bottom: 15px;
+  flex-direction: column;
+  padding: 30px 0 20px;
+  border-bottom: 2px solid var(--vscode-panel-border);
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  svg {
+    fill: var(--vscode-icon-foreground);
+    margin-right: 15px;
+  }
+
+  h1 {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .version {
+    margin-bottom: 0;
+    margin-top: 10px;
+    font-size: 1.2em;
+  }
+}
+
+.upgrade-changelog {
+  background-color: var(--vscode-textBlockQuote-background);
+  padding: 15px 20px;
+  margin-bottom: 15px;
+}

src/webviews/assets/components/Upgrade/index.tsx

@@ -3,10 +3,10 @@ import ReactMarkdown from 'react-markdown';
 import constants from '../../../../lib/constants';
 import { PostMessagePayload } from '../../../../lib/types';
 import Loading from '../Loading';
+import CircleLogo from './circleci.svg';
 import './index.scss';
 
 const Upgrade = ({}: { vscode: any }): JSX.Element => {
-  const [initLoaded, setInitLoaded] = useState<boolean>(false);
   const [changelog, setChangelog] = useState<{
     content: string;
     version: string;
@@ -23,22 +23,33 @@ const Upgrade = ({}: { vscode: any }): JSX.Element => {
                 content: data.data.content,
                 version: data.data.version,
               });
-              setInitLoaded(true);
               break;
           }
         }
       );
     }
   }, [changelog]);
 
-  if (!initLoaded) {
+  if (!changelog) {
     return <Loading />;
   }
 
   return (
     <div>
-      <h1>New in CircleCI for VS Code v{changelog!.version}</h1>
-      <div>{<ReactMarkdown source={changelog!.content} />}</div>
+      <header className="upgrade-header">
+        <CircleLogo />
+        <div>
+          <h1>CircleCI for VS Code updated!</h1>
+          <p className="version">You’re now on v{changelog.version}</p>
+        </div>
+      </header>
+
+      <div>
+        <h2>Here's what's new in this version:</h2>
+        <div className="upgrade-changelog">
+          {<ReactMarkdown source={changelog.content} />}
+        </div>
+      </div>
     </div>
   );
 };

src/webviews/assets/components/Welcome/index.scss

@@ -6,3 +6,52 @@ body {
   min-height: 100vh;
   box-sizing: border-box;
 }
+
+.welcome-header {
+  display: flex;
+  margin-bottom: 15px;
+  flex-direction: column;
+  padding: 30px 0 20px;
+  border-bottom: 2px solid var(--vscode-panel-border);
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  svg {
+    fill: var(--vscode-icon-foreground);
+    margin-right: 15px;
+  }
+
+  h1 {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .version {
+    margin-bottom: 0;
+    margin-top: 10px;
+    font-size: 1.2em;
+  }
+}
+
+.token-container {
+  display: flex;
+
+  input[type="text"] {
+    background-color: var(--vscode-input-background);
+    color: var(--vscode-input-foreground);
+    border: none;
+    padding: 7px 10px;
+    width: 100%;
+    box-sizing: border-box;
+    margin-right: 10px;
+  }
+}
+
+.welcome-changelog {
+  background-color: var(--vscode-textBlockQuote-background);
+  font-size: 0.8em;
+  padding: 15px 20px;
+}