From 4025d0bdfbc4bf36a803f3e0881750dba7e75b2f Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 12 Oct 2023 12:54:10 +0200
Subject: [PATCH] Better reporting

---
 node-src/lib/uploadMetadataFiles.ts           | 10 ++++-
 node-src/ui/content/metadata.html.stories.ts  | 39 +++++++++++++++++--
 node-src/ui/content/metadata.html.ts          |  1 -
 .../info/uploadingMetadata.stories.ts         | 10 +++++
 .../ui/messages/info/uploadingMetadata.ts     | 12 ++++++
 5 files changed, 66 insertions(+), 6 deletions(-)
 create mode 100644 node-src/ui/messages/info/uploadingMetadata.stories.ts
 create mode 100644 node-src/ui/messages/info/uploadingMetadata.ts

diff --git a/node-src/lib/uploadMetadataFiles.ts b/node-src/lib/uploadMetadataFiles.ts
index 932312e6f..defbe0489 100644
--- a/node-src/lib/uploadMetadataFiles.ts
+++ b/node-src/lib/uploadMetadataFiles.ts
@@ -10,6 +10,7 @@ import { CHROMATIC_LOG_FILE } from './log';
 import { uploadAsIndividualFiles } from './upload';
 import { CHROMATIC_DIAGNOSTICS_FILE } from './writeChromaticDiagnostics';
 import uploadingMetadata from '../ui/messages/info/uploadingMetadata';
+import { baseStorybookUrl } from './utils';
 
 const fileSize = (path: string): Promise<number> =>
   new Promise((resolve) => stat(path, (err, stats) => resolve(err ? 0 : stats.size)));
@@ -35,7 +36,11 @@ export async function uploadMetadataFiles(ctx: Context) {
       const contentLength = await fileSize(localPath);
       return contentLength && { localPath, targetPath, contentLength };
     })
-  ).then((files) => files.filter(Boolean));
+  ).then((files) =>
+    files
+      .filter(Boolean)
+      .sort((a, b) => a.targetPath.localeCompare(b.targetPath, 'en', { numeric: true }))
+  );
 
   if (!files.length) {
     ctx.log.warn('No metadata files found, skipping metadata upload.');
@@ -51,7 +56,8 @@ export async function uploadMetadataFiles(ctx: Context) {
       contentLength: html.length,
     });
 
-    ctx.log.info(uploadingMetadata(files));
+    const directoryUrl = `${baseStorybookUrl(ctx.isolatorUrl)}/.chromatic/`;
+    ctx.log.info(uploadingMetadata(directoryUrl, files));
 
     await uploadAsIndividualFiles(ctx, files);
   });
diff --git a/node-src/ui/content/metadata.html.stories.ts b/node-src/ui/content/metadata.html.stories.ts
index 0a1ed04f6..ca05e2f33 100644
--- a/node-src/ui/content/metadata.html.stories.ts
+++ b/node-src/ui/content/metadata.html.stories.ts
@@ -1,15 +1,48 @@
-import { files } from '../messages/info/uploadingMetadata.stories';
 import metadataHtml from './metadata.html';
 
 export default {
   title: 'HTML/Metadata index',
+  includeStories: /^[A-Z]/,
 };
 
-const announced: any = { announcedBuild: { number: 7801 } };
+export const files = [
+  {
+    contentLength: 833,
+    localPath: 'build-storybook.log',
+    targetPath: '.chromatic/build-storybook.log',
+  },
+  {
+    contentLength: 674,
+    localPath: 'chromatic.log',
+    targetPath: '.chromatic/chromatic.log',
+  },
+  {
+    contentLength: 3645,
+    localPath: 'chromatic-diagnostics.json',
+    targetPath: '.chromatic/chromatic-diagnostics.json',
+  },
+  {
+    contentLength: 423,
+    localPath: 'main.ts',
+    targetPath: '.chromatic/main.ts',
+  },
+  {
+    contentLength: 5635,
+    localPath: 'preview.tsx',
+    targetPath: '.chromatic/preview.tsx',
+  },
+  {
+    contentLength: 5635,
+    localPath: 'preview-stats.json',
+    targetPath: '.chromatic/preview-stats.json',
+  },
+];
+
+const announced: any = { announcedBuild: { number: 7805 } };
 
 const build: any = {
   ...announced,
-  build: { webUrl: 'https://www.chromatic.com/build?appId=5d67dc0374b2e300209c41e7&number=7801' },
+  build: { webUrl: 'https://www.chromatic.com/build?appId=5d67dc0374b2e300209c41e7&number=7805' },
 };
 
 export const Default = () => metadataHtml(announced, files);
diff --git a/node-src/ui/content/metadata.html.ts b/node-src/ui/content/metadata.html.ts
index c6d204289..4965ffcaa 100644
--- a/node-src/ui/content/metadata.html.ts
+++ b/node-src/ui/content/metadata.html.ts
@@ -56,7 +56,6 @@ export default ({ announcedBuild, build }: Context, files: FileDesc[]) => `<!DOC
     <span>Metadata files</span>
     <ul>
     ${files
-      .sort((a, b) => a.targetPath.localeCompare(b.targetPath, 'en', { numeric: true }))
       .map(({ targetPath, contentLength }) => {
         const path = targetPath.replace(/^\.chromatic\//, '');
         const size = filesize(contentLength);
diff --git a/node-src/ui/messages/info/uploadingMetadata.stories.ts b/node-src/ui/messages/info/uploadingMetadata.stories.ts
new file mode 100644
index 000000000..a91b1cb11
--- /dev/null
+++ b/node-src/ui/messages/info/uploadingMetadata.stories.ts
@@ -0,0 +1,10 @@
+import { files } from '../../content/metadata.html.stories';
+import uploadingMetadata from './uploadingMetadata';
+
+export default {
+  title: 'CLI/Messages/Info',
+};
+
+const directoryUrl = 'https://5d67dc0374b2e300209c41e7-dlmmxasauj.chromatic.com/.chromatic/';
+
+export const UploadingMetadata = () => uploadingMetadata(directoryUrl, files);
diff --git a/node-src/ui/messages/info/uploadingMetadata.ts b/node-src/ui/messages/info/uploadingMetadata.ts
new file mode 100644
index 000000000..d22300ab3
--- /dev/null
+++ b/node-src/ui/messages/info/uploadingMetadata.ts
@@ -0,0 +1,12 @@
+import chalk from 'chalk';
+import pluralize from 'pluralize';
+
+import { info } from '../../components/icons';
+import { FileDesc } from '../../../types';
+import link from '../../components/link';
+
+export default (directoryUrl: string, files: FileDesc[]) => {
+  const count = pluralize('metadata file', files.length, true);
+  const list = `- ${files.map((f) => f.targetPath.replace(/^\.chromatic\//, '')).join('\n- ')}`;
+  return chalk`${info} Uploading {bold ${count}} to ${link(directoryUrl)}\n${list}`;
+};