wip welcome and upgrade views

package.json

@@ -39,6 +39,7 @@
     "open": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-markdown": "^4.3.1",
     "vscode-nls": "^5.0.0"
   },
   "devDependencies": {

src/extension.ts

@@ -1,24 +1,36 @@
-import { window, workspace, ExtensionContext, Disposable } from 'vscode';
+import { window, workspace, ExtensionContext, Disposable, extensions, commands } from 'vscode';
 import constants from './lib/constants';
 import config from './lib/config';
 import gitService from './lib/git-service';
 import ArtifactContentProvider from './lib/artifact-content-provider';
 import PipelinesTree from './lib/pipelines-tree';
 import registerGlobalCommands from './lib/global-commands';
-import { l } from './lib/utils';
+import WelcomeWebView from './views/welcome-webview';
+import UpgradeWebView from './views/upgrade-webview';
+import { l, splitVersion } from './lib/utils';
 
 let pipelinesTree: PipelinesTree;
 let exportedContext: ExtensionContext;
 let globalCommands: Disposable[];
 
 export async function activate(context: ExtensionContext): Promise<void> {
+  // context.globalState.update(constants.EXTENSION_VERSION, '0.1.0'); // REMOVE
+
+  const extension = extensions.getExtension(constants.EXTENSION_ID)!;
+  const currentVersion = extension.packageJSON.version;
+  const previousVersion = context.globalState.get<string>(constants.EXTENSION_VERSION);
+
   if (!workspace.workspaceFolders || !workspace.workspaceFolders.length) {
-    return void window.showInformationMessage(
-      l(
-        'activationMessage',
-        'CircleCI will activate when a folder is added to your Workspace'
-      )
-    );
+    // NOTE: This was getting annoying. Maybe we can
+    // re-enable with a different approach later.
+    //
+    // return void window.showInformationMessage(
+    //   l(
+    //     'activationMessage',
+    //     'CircleCI will activate when a folder is added to your Workspace'
+    //   )
+    // );
+    return;
   }
 
   const git = await gitService();
@@ -32,6 +44,7 @@ export async function activate(context: ExtensionContext): Promise<void> {
   git.onChange(refresh);
 
   pipelinesTree = new PipelinesTree(git);
+
   window.registerTreeDataProvider(
     constants.PIPELINES_TREE_VIEW_ID,
     pipelinesTree
@@ -43,13 +56,50 @@ export async function activate(context: ExtensionContext): Promise<void> {
   );
 
   globalCommands = registerGlobalCommands(pipelinesTree);
+
+  showStartupView(currentVersion, previousVersion);
+  context.globalState.update(constants.EXTENSION_VERSION, currentVersion);
 }
 
 export function deactivate(): void {
   pipelinesTree && pipelinesTree.dispose();
   globalCommands.forEach(command => command.dispose());
 }
 
+async function showStartupView(currentVersion: string, previousVersion: string | undefined) {
+  const welcomeWebView = new WelcomeWebView(currentVersion);
+  const upgradeWebView = new UpgradeWebView(currentVersion);
+
+	if (previousVersion === undefined) {
+		return welcomeWebView.show();
+	}
+
+  const [currentMajor, currentMinor] = splitVersion(currentVersion);
+  const [previousMajor, previousMinor] = splitVersion(previousVersion);
+
+  // Don't do anything if...
+	if (
+    // The versions are the same major and minor
+    (currentMajor === previousMajor && currentMinor === previousMinor) ||
+    // A major downgrade occurred
+    currentMajor < previousMajor ||
+    // A minor downgrade occurred
+    (currentMajor === previousMajor && currentMinor < previousMinor)
+	) {
+		return;
+	}
+
+  // Show upgrade view if...
+	if (
+    // A major upgrade occurred
+    currentMajor !== previousMajor ||
+    // A minor upgrade occurred
+    (currentMajor === previousMajor && currentMinor > previousMinor)
+  ) {
+		upgradeWebView.show();
+	}
+}
+
 export function getContext(): ExtensionContext {
   return exportedContext;
 }

src/lib/constants.ts

@@ -1,4 +1,7 @@
 export default {
+  EXTENSION_ID: 'jodyh.circleci-vscode',
+  EXTENSION_VERSION: 'circleciExtensionVersion',
+
   LOCALIZATION_PREFIX: 'circleciExtension',
 
   PROJECT_URL: 'https://app.circleci.com/pipelines/{vcs}/{user}/{repo}',
@@ -40,9 +43,12 @@ export default {
   OPEN_JOB_TESTS_COMMAND: 'circleci.openJobTests',
 
   JOB_TESTS_WEBVIEW_ID: 'circleci.jobTestsWebView',
+  WELCOME_WEBVIEW_ID: 'circleci.welcomeWebView',
+  UPGRADE_WEBVIEW_ID: 'circleci.upgradeWebView',
 
   JOB_DATA_WEBVIEW_EVENT: 'circleci.jobDataWebview',
   TEST_DATA_WEBVIEW_EVENT: 'circleci.testDataWebview',
+  CHANGELOG_CONTENT_WEBVIEW_EVENT: 'circleci.changelogContentWebview',
   REQUEST_TESTS_WEBVIEW_EVENT: 'circleci.requestTestsWebview',
   REQUEST_JOB_WEBVIEW_EVENT: 'circleci.requestJobWebview',
 };

src/lib/utils.ts

@@ -138,3 +138,7 @@ export function interpolate(
     return p.split('{' + c + '}').join(String(replacements[c]));
   }, value);
 }
+
+export function splitVersion(version: string) {
+  return version.split('.').map(v => parseInt(v, 10));
+}

src/views/upgrade-webview.ts

@@ -0,0 +1,38 @@
+import constants from '../lib/constants';
+import { l } from '../lib/utils';
+import BaseWebView from './base-webview';
+
+export default class UpgradeWebView extends BaseWebView {
+  constructor(private version: string) {
+    super();
+  }
+
+  get filename(): string {
+    return 'upgrade.html';
+  }
+
+  get id(): string {
+    return `${constants.UPGRADE_WEBVIEW_ID}`;
+  }
+
+  get title(): string {
+    return l('upgradeTitle', 'CircleCI upgraded to v{0}', this.version);
+  }
+
+  onDidShow(): void {
+    this.getContent();
+  }
+
+  async getContent(): Promise<void> {
+    // TODO: get changelog data for version
+    const changelog = '# Changelog';
+
+    this.postMessage({
+      event: constants.CHANGELOG_CONTENT_WEBVIEW_EVENT,
+      data: {
+        version: this.version,
+        content: changelog,
+      },
+    });
+  }
+}

src/views/welcome-webview.ts

@@ -0,0 +1,38 @@
+import constants from '../lib/constants';
+import { l } from '../lib/utils';
+import BaseWebView from './base-webview';
+
+export default class WelcomeWebView extends BaseWebView {
+  constructor(private version: string) {
+    super();
+  }
+
+  get filename(): string {
+    return 'welcome.html';
+  }
+
+  get id(): string {
+    return `${constants.WELCOME_WEBVIEW_ID}`;
+  }
+
+  get title(): string {
+    return l('welcomeTitle', 'Welcome to CircleCI for VS Code!');
+  }
+
+  onDidShow(): void {
+    this.getContent();
+  }
+
+  async getContent(): Promise<void> {
+    // TODO: get changelog data for version
+    const changelog = '# Changelog';
+
+    this.postMessage({
+      event: constants.CHANGELOG_CONTENT_WEBVIEW_EVENT,
+      data: {
+        version: this.version,
+        content: changelog,
+      },
+    });
+  }
+}

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

@@ -7,7 +7,7 @@ import TestResults from '../TestResults';
 import Loading from '../Loading';
 import './index.scss';
 
-const JobTests = ({ vscode, rootPath }: { vscode: any; rootPath: string }): JSX.Element => {
+const JobTests = ({ vscode }: { vscode: any }): JSX.Element => {
   const [jobDetails, setJobDetails] = useState<JobTestDetails | null>(null);
   const [initLoaded, setInitLoaded] = useState<boolean>(false);
   const [initHasTests, setInitHasTests] = useState<boolean>(false);

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

@@ -0,0 +1,8 @@
+body {
+  padding: 10px 20px;
+  line-height: 22px;
+  max-width: 882px;
+  margin: 0 auto;
+  min-height: 100vh;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import constants from '../../../../lib/constants';
+import { PostMessagePayload } from '../../../../lib/types';
+import Loading from '../Loading';
+import './index.scss';
+
+const Upgrade = ({ vscode }: { vscode: any }): JSX.Element => {
+  const [initLoaded, setInitLoaded] = useState<boolean>(false);
+  const [changelog, setChangelog] = useState<{ content: string; version: string; } | null>(null);
+
+  useEffect(() => {
+    if (!changelog) {
+      window.addEventListener(
+        'message',
+        ({ data }: { data: PostMessagePayload }) => {
+          switch (data.event) {
+            case constants.CHANGELOG_CONTENT_WEBVIEW_EVENT:
+              setChangelog({
+                content: data.data.content,
+                version: data.data.version,
+              });
+              setInitLoaded(true);
+              break;
+          }
+        }
+      );
+    }
+	}, [changelog]);
+
+	if (!initLoaded) {
+		return <Loading />
+  }
+
+  return (
+		<div>
+      <h1>New in CircleCI for VS Code v{changelog!.version}</h1>
+      <div>
+        {<ReactMarkdown source={changelog!.content} />}
+      </div>
+    </div>
+  );
+};
+
+export default Upgrade;

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

@@ -0,0 +1,8 @@
+body {
+  padding: 10px 20px;
+  line-height: 22px;
+  max-width: 882px;
+  margin: 0 auto;
+  min-height: 100vh;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import constants from '../../../../lib/constants';
+import { PostMessagePayload } from '../../../../lib/types';
+import Loading from '../Loading';
+import './index.scss';
+
+const Welcome = ({ vscode }: { vscode: any }): JSX.Element => {
+  const [initLoaded, setInitLoaded] = useState<boolean>(false);
+  const [changelog, setChangelog] = useState<{ content: string; version: string; } | null>(null);
+
+  useEffect(() => {
+    if (!changelog) {
+      window.addEventListener(
+        'message',
+        ({ data }: { data: PostMessagePayload }) => {
+          switch (data.event) {
+            case constants.CHANGELOG_CONTENT_WEBVIEW_EVENT:
+              setChangelog({
+                content: data.data.content,
+                version: data.data.version,
+              });
+              setInitLoaded(true);
+              break;
+          }
+        }
+      );
+    }
+	}, [changelog]);
+
+	if (!initLoaded) {
+		return <Loading />
+  }
+
+  return (
+		<div>
+			<h1>Welcome!</h1>
+
+      <div>
+        <h2>Here's what's new in v{changelog!.version}</h2>
+        <div>
+          {<ReactMarkdown source={changelog!.content} />}
+        </div>
+      </div>
+		</div>
+  );
+};
+
+export default Welcome;

src/webviews/assets/job-tests.tsx

@@ -5,11 +5,10 @@ import JobTests from './components/JobTests';
 // @ts-ignore
 const vscode = acquireVsCodeApi() as any;
 const rootElement = document.getElementById('root')!;
-const rootPath = rootElement.dataset.rootPath!;
 
 render(
   <React.StrictMode>
-    <JobTests {...{ vscode, rootPath }} />
+    <JobTests {...{ vscode }} />
   </React.StrictMode>,
   rootElement
 );

src/webviews/assets/upgrade.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from 'react-dom';
+import Upgrade from './components/Upgrade';
+
+// @ts-ignore
+const vscode = acquireVsCodeApi() as any;
+const rootElement = document.getElementById('root')!;
+
+render(
+  <React.StrictMode>
+    <Upgrade {...{ vscode }} />
+  </React.StrictMode>,
+  rootElement
+);

src/webviews/assets/welcome.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from 'react-dom';
+import Welcome from './components/Welcome';
+
+// @ts-ignore
+const vscode = acquireVsCodeApi() as any;
+const rootElement = document.getElementById('root')!;
+
+render(
+  <React.StrictMode>
+    <Welcome {...{ vscode }} />
+  </React.StrictMode>,
+  rootElement
+);

src/webviews/upgrade.html

@@ -0,0 +1,2 @@
+<div id="root" data-root-path="#{root}"></div>
+<script src="#{root}/webviews/assets/upgrade.js"></script>

src/webviews/welcome.html

@@ -0,0 +1,2 @@
+<div id="root" data-root-path="#{root}"></div>
+<script src="#{root}/webviews/assets/welcome.js"></script>

webpack.config.js

@@ -49,6 +49,8 @@ const webviewConfig = {
   target: 'web',
   entry: {
     'job-tests': './src/webviews/assets/job-tests.tsx',
+    'welcome': './src/webviews/assets/welcome.tsx',
+    'upgrade': './src/webviews/assets/upgrade.tsx',
   },
   output: {
     path: resolve(__dirname, 'dist/webviews/assets'),