diff --git a/.storybook/main.js b/.storybook/main.js
index 310bce17d..843c63b77 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -12,6 +12,10 @@ module.exports = {
'./i18n-party-addon/register.js',
],
webpackFinal: async (config) => {
+ config.context = process.cwd()
+ config.node = {
+ __filename: true
+ }
config.module.strictExportPresence = true;
config.module.rules.push({
test: /\.scss$/,
diff --git a/development/highlights/README.md b/development/highlights/README.md
new file mode 100644
index 000000000..1f6788ea9
--- /dev/null
+++ b/development/highlights/README.md
@@ -0,0 +1,3 @@
+### highlights
+
+the purpose of this directory is to house utilities for generating "highlight" messages for the metamaskbot comment based on changes included in the PR
\ No newline at end of file
diff --git a/development/highlights/index.js b/development/highlights/index.js
new file mode 100644
index 000000000..5ed891e5d
--- /dev/null
+++ b/development/highlights/index.js
@@ -0,0 +1,31 @@
+const { promisify } = require('util');
+const exec = promisify(require('child_process').exec);
+const storybook = require('./storybook.js');
+
+module.exports = { getHighlights };
+
+async function getHighlights({ artifactBase }) {
+ let highlights = '';
+ // here we assume the PR base branch ("target") is `develop` in lieu of doing
+ // a query against the github api which requires an access token
+ // see https://discuss.circleci.com/t/how-to-retrieve-a-pull-requests-base-branch-name-github/36911
+ const changedFiles = await getChangedFiles({ target: 'develop' });
+ console.log(`detected changed files vs develop:`);
+ for (const filename of changedFiles) {
+ console.log(` ${filename}`);
+ }
+ const announcement = await storybook.getHighlightAnnouncement({
+ changedFiles,
+ artifactBase,
+ });
+ if (announcement) {
+ highlights += announcement;
+ }
+ return highlights;
+}
+
+async function getChangedFiles({ target }) {
+ const { stdout } = await exec(`git diff --name-only ${target}...HEAD`);
+ const changedFiles = stdout.split('\n').slice(0, -1);
+ return changedFiles;
+}
diff --git a/development/highlights/storybook.js b/development/highlights/storybook.js
new file mode 100644
index 000000000..9c71e129e
--- /dev/null
+++ b/development/highlights/storybook.js
@@ -0,0 +1,86 @@
+const path = require('path');
+const { promisify } = require('util');
+const exec = promisify(require('child_process').exec);
+const dependencyTree = require('dependency-tree');
+
+const cwd = process.cwd();
+const resolutionCache = {};
+
+// 1. load stories
+// 2. load list per story
+// 3. filter against files
+module.exports = {
+ getHighlights,
+ getHighlightAnnouncement,
+};
+
+async function getHighlightAnnouncement({ changedFiles, artifactBase }) {
+ const highlights = await getHighlights({ changedFiles });
+ if (!highlights.length) return null;
+ const highlightsBody = highlights
+ .map((entry) => `\n- [${entry}](${urlForStoryFile(entry, artifactBase)})`)
+ .join('');
+ const announcement = `
+ storybook
+ ${highlightsBody}
+ \n\n`;
+ return announcement;
+}
+
+async function getHighlights({ changedFiles }) {
+ const highlights = [];
+ const storyFiles = await getAllStories();
+ // check each story file for dep graph overlap with changed files
+ for (const storyFile of storyFiles) {
+ const list = await getLocalDependencyList(storyFile);
+ if (list.some((entry) => changedFiles.includes(entry))) {
+ highlights.push(storyFile);
+ }
+ }
+ return highlights;
+}
+
+async function getAllStories() {
+ const { stdout } = await exec('find ui -name "*.stories.js"');
+ const matches = stdout.split('\n').slice(0, -1);
+ return matches;
+}
+
+async function getLocalDependencyList(filename) {
+ const list = dependencyTree
+ .toList({
+ filename,
+ // not sure what this does but its mandatory
+ directory: cwd,
+ webpackConfig: `.storybook/main.js`,
+ // skip all dependencies
+ filter: (entry) => !entry.includes('node_modules'),
+ // for memoization across trees: 30s -> 5s
+ visited: resolutionCache,
+ })
+ .map((entry) => path.relative(cwd, entry));
+ return list;
+}
+
+function urlForStoryFile(filename, artifactBase) {
+ const storyId = sanitize(filename);
+ return `${artifactBase}/storybook/index.html?path=/story/${storyId}`;
+}
+
+/**
+ * Remove punctuation and illegal characters from a story ID.
+ * See:
+ * https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
+ * https://github.com/ComponentDriven/csf/blame/7ac941eee85816a4c567ca85460731acb5360f50/src/index.ts
+ */
+function sanitize(string) {
+ return (
+ string
+ .toLowerCase()
+ // eslint-disable-next-line no-useless-escape
+ .replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/giu, '-')
+ .replace(/-+/gu, '-')
+ .replace(/^-+/u, '')
+ .replace(/-+$/u, '')
+ );
+}
diff --git a/development/metamaskbot-build-announce.js b/development/metamaskbot-build-announce.js
index 8403a4843..ee547728b 100755
--- a/development/metamaskbot-build-announce.js
+++ b/development/metamaskbot-build-announce.js
@@ -4,6 +4,7 @@ const path = require('path');
const fetch = require('node-fetch');
const glob = require('fast-glob');
const VERSION = require('../dist/chrome/manifest.json').version; // eslint-disable-line import/no-unresolved
+const { getHighlights } = require('./highlights');
start().catch(console.error);
@@ -98,7 +99,7 @@ async function start() {
.map((row) => `${row}`)
.join('\n')}`;
const exposedContent = `Builds ready [${SHORT_SHA1}]`;
- const artifactsBody = `${exposedContent}
${hiddenContent}${exposedContent}
${hiddenContent}${benchmarkTableHeader}${benchmarkTableBody}
`;
- const benchmarkBody = `${benchmarkSummary}
${benchmarkTable}${benchmarkSummary}
${benchmarkTable}