Asset meta tag changes

fixtures/webpack-stats.baseline.json

@@ -94,10 +94,10 @@
       "entry": true,
       "initial": true,
       "files": [
-        "vendors.8b6bb4f.css",
-        "vendors.176a5f6.js",
-        "vendors.8b6bb4f.css.map",
-        "vendors.176a5f6.js.map"
+        "assets/css/vendors.8b6bb4f.css",
+        "assets/js/vendors.176a5f6.js",
+        "assets/css/vendors.8b6bb4f.css.map",
+        "assets/js/vendors.176a5f6.js.map"
       ],
       "names": [
         "vendors"

fixtures/webpack-stats.current.json

@@ -182,10 +182,10 @@
       "entry": true,
       "initial": true,
       "files": [
-        "vendors.5024abb.css",
-        "vendors.278dc2f.js",
-        "vendors.5024abb.css.map",
-        "vendors.278dc2f.js.map"
+        "assets/css/vendors.5024abb.css",
+        "assets/js/vendors.278dc2f.js",
+        "assets/css/vendors.5024abb.css.map",
+        "assets/js/vendors.278dc2f.js.map"
       ],
       "names": [
         "vendors"

packages/ui/src/app/app-gladys.stories.jsx → packages/ui/src/app/app-gladys.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
 
 /* eslint-disable import/no-unresolved, import/no-relative-packages */
@@ -20,16 +21,21 @@ const BASELINE_SOURCE = {
 
 const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
 
-export default {
+const meta: Meta<typeof App> = {
   title: 'App/Gladys',
   component: App,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '-1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
 };
 
-export const Default = () => <App jobs={JOBS} version="1.0" />;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

packages/ui/src/app/app-home-assistant.stories.jsx → packages/ui/src/app/app-home-assistant.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
 
 /* eslint-disable import/no-unresolved, import/no-relative-packages */
@@ -20,16 +21,21 @@ const BASELINE_SOURCE = {
 
 const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
 
-export default {
+const meta: Meta<typeof App> = {
   title: 'App/HomeAssistant',
   component: App,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '-1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
 };
 
-export const Default = () => <App jobs={JOBS} version="1.0" />;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

packages/ui/src/app/app-outline.stories.jsx → packages/ui/src/app/app-outline.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { createJobs } from '@bundle-stats/utils';
 
 /* eslint-disable import/no-unresolved, import/no-relative-packages */
@@ -20,16 +21,21 @@ const BASELINE_SOURCE = {
 
 const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
 
-export default {
+const meta: Meta<typeof App> = {
   title: 'App/Outline',
   component: App,
-  decorators: [
-    (Story) => (
-      <div style={{ margin: '-1rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
 };
 
-export const Default = () => <App jobs={JOBS} version="1.0" />;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};

packages/ui/src/app/app.stories.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { createJobs } from '@bundle-stats/utils';
+import merge from 'lodash/merge';
+
+/* eslint-disable import/no-unresolved, import/no-relative-packages */
+import currentData from '../../../../fixtures/job.current';
+import baselineData from '../../../../fixtures/job.baseline';
+/* eslint-enable import/no-unresolved, import/no-relative-packages */
+import { App } from '.';
+
+const CURRENT_SOURCE = {
+  webpack: {
+    ...currentData.rawData.webpack,
+    builtAt: currentData.createdAt,
+    hash: currentData.commit,
+  },
+};
+
+const BASELINE_SOURCE = {
+  webpack: {
+    ...baselineData.rawData.webpack,
+    builtAt: baselineData.createdAt,
+    hash: baselineData.commit,
+  },
+};
+
+const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+
+const MULTIPLE_JOBS = createJobs([
+  CURRENT_SOURCE,
+  BASELINE_SOURCE,
+  {
+    webpack: {
+      ...baselineData.rawData.webpack,
+      builtAt: baselineData.createdAt,
+      hash: 'aaaa1111',
+      assets: baselineData.rawData.webpack.assets.filter((asset) => asset.name.match(/.(css|js)$/)),
+      modules: baselineData.rawData.webpack.modules.slice(0, 100),
+    },
+  },
+]);
+
+const [CURRENT_JOB, BASELINE_JOB] = JOBS;
+
+const meta: Meta<typeof App> = {
+  title: 'App',
+  component: App,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    version: '1.0',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <App jobs={JOBS} {...args} />,
+};
+
+export const NoInsights: Story = {
+  render: (args) => (
+    <App
+      jobs={[
+        {
+          ...CURRENT_JOB,
+          insights: undefined,
+        },
+        BASELINE_JOB,
+      ]}
+      {...args}
+    />
+  ),
+};
+
+export const AssetMetaChanges: Story = {
+  render: (args) => {
+    const current = merge({}, CURRENT_SOURCE);
+    const baseline = merge({}, CURRENT_SOURCE);
+
+    current.webpack.assets.push({
+      name: 'assets/js/vendors-auth.1a278dc.js',
+      size: 26364,
+    });
+    current.webpack.chunks.push({
+      id: 100,
+      entry: false,
+      initial: false,
+      files: ['assets/js/vendors-auth.1a278dc.js'],
+      names: ['vendors-auth'],
+    });
+
+    baseline.webpack.assets.push({
+      name: 'assets/js/vendors-auth.1a278dc.js',
+      size: 26364,
+    });
+    baseline.webpack.chunks.push({
+      id: 100,
+      entry: false,
+      initial: true,
+      files: ['assets/js/vendors-auth.1a278dc.js'],
+      names: ['vendors-auth'],
+    });
+
+    return <App jobs={createJobs([current, baseline])} {...args} />;
+  },
+};
+
+export const NoBaseline: Story = {
+  render: (args) => <App jobs={createJobs([CURRENT_SOURCE])} {...args} />,
+};
+
+export const EmptyBaseline: Story = {
+  render: (args) => <App jobs={createJobs([CURRENT_SOURCE, { webpack: null }])} {...args} />,
+};
+
+export const MultipleBaselines: Story = {
+  render: (args) => <App jobs={MULTIPLE_JOBS} {...args} />,
+};
+
+export const Empty: Story = {
+  render: (args) => <App {...args} />,
+};

packages/ui/src/components/asset-info/asset-info.module.css

@@ -29,3 +29,12 @@
   content: ' ';
 }
 
+.runNameTags {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--space-xxxsmall) / 2);
+}
+
+.runNameTags:empty {
+  display: block;
+}