feat(ui): ModuleInfo - display reasons

relative-ci · Nov 5, 2024 · b186601 · b186601
1 parent 1650f29
commit b186601
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 6 deletions.
diff --git a/packages/ui/src/components/module-info/module-info.module.css b/packages/ui/src/components/module-info/module-info.module.css
@@ -39,3 +39,10 @@
 .duplicateInstances {
   padding: 2px 0; /* compensate for the Entry Label padding */
 }
+
+.reasons {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
diff --git a/packages/ui/src/components/module-info/module-info.tsx b/packages/ui/src/components/module-info/module-info.tsx
@@ -2,9 +2,10 @@ import type { ElementType } from 'react';
 import React, { useMemo } from 'react';
 import cx from 'classnames';
 import orderBy from 'lodash/orderBy';
-import noop from 'lodash/noop';
 import type { MetricRunInfo, MetricTypeConfig, ReportMetricRow } from '@bundle-stats/utils';
 import {
+  COMPONENT,
+  SECTIONS,
   METRIC_TYPE_CONFIGS,
   BUNDLE_MODULES_DUPLICATE,
   FILE_TYPE_LABELS,
@@ -19,6 +20,7 @@ import type { Module, MetaChunk } from '@bundle-stats/utils/types/webpack';
 
 import type { ReportMetricModuleRow } from '../../types';
 import { Stack } from '../../layout/stack';
+import { FileName } from '../../ui/file-name';
 import { Tag } from '../../ui/tag';
 import { ComponentLink } from '../component-link';
 import { RunInfo } from '../run-info';
@@ -221,7 +223,6 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
     chunkIds = [],
     metricLabel = '',
     customComponentLink: CustomComponentLink = ComponentLink,
-    onClick = noop,
     onClose,
   } = props;
 
@@ -283,7 +284,6 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
           <EntryInfoMetaLink
             as={CustomComponentLink}
             {...getBundleModulesBySource(item.thirdParty || false, sourceTypeLabel)}
-            onClick={onClick}
           >
             {sourceTypeLabel}
           </EntryInfoMetaLink>
@@ -306,6 +306,31 @@ export const ModuleInfo = (props: ModuleInfoProps & React.ComponentProps<'div'>)
             customComponentLink={CustomComponentLink}
           />
         </EntryInfo.Meta>
+
+        {item?.runs?.[0].reasons && (
+          <EntryInfo.Meta label="Reasons">
+            <ul className={css.reasons}>
+              {item.runs[0].reasons.map((reason) => (
+                <li key={reason}>
+                  <EntryInfoMetaLink
+                    as={CustomComponentLink}
+                    section={SECTIONS.MODULES}
+                    params={{
+                      [COMPONENT.BUNDLE_MODULES]: {
+                        filters: {},
+                        search: '',
+                        entryId: reason,
+                      },
+                    }}
+                    className={css.reasonLink}
+                  >
+                    <FileName name={reason} className={css.reason} />
+                  </EntryInfoMetaLink>
+                </li>
+              ))}
+            </ul>
+          </EntryInfo.Meta>
+        )}
       </Stack>
     </EntryInfo>
   );

diff --git a/packages/utils/src/i18n.js b/packages/utils/src/i18n.js
@@ -7,6 +7,7 @@ export default {
   COMPONENT_LINK_BUNDLE_ASSETS_COUNT: 'View assets',
   COMPONENT_LINK_BUNDLE_ASSETS_CHUNK_COUNT: 'View chunks',
   COMPONENT_LINK_MODULES: 'View modules',
+  COMPONENT_LINK_MODULE: 'View module information',
   COMPONENT_LINK_MODULES_DUPLICATE: 'View duplicate modules',
   COMPONENT_LINK_MODULES_BY_FILE_TYPE: (fileType) => `View ${fileType} modules`,
   COMPONENT_LINK_MODULES_BY_SOURCE: (source) => `View ${source} modules`,

diff --git a/packages/utils/src/utils/component-links.ts b/packages/utils/src/utils/component-links.ts
@@ -257,6 +257,22 @@ export const getBundleModulesBySearch = (search: string): ComponentLink => ({
   },
 });
 
+export const getBundleModulesEntry = (
+  entryId: string,
+  search = '',
+  filters: ComponentLinkFilters = {},
+): ComponentLink => ({
+  section: SECTIONS.MODULES,
+  title: I18N.COMPONENT_LINK_MODULE,
+  params: {
+    [COMPONENT.BUNDLE_MODULES]: {
+      search,
+      filters,
+      entryId,
+    },
+  },
+});
+
 export const getBundleModulesByChunk = (
   chunkIds: Array<string>,
   chunkId: string,

diff --git a/packages/utils/src/webpack/extract/modules.ts b/packages/utils/src/webpack/extract/modules.ts
@@ -87,11 +87,10 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
 
   modulesByName.forEach((moduleEntry, normalizedName) => {
     const { name, size = 0, chunks } = moduleEntry;
-    const normalizedName = getModuleName(name);
 
     // skip modules that are orphane(do not belong to any chunk)
     if (!chunks || chunks?.length === 0) {
-      return agg;
+      return;
     }
 
     const instances = chunks.length;
@@ -101,12 +100,13 @@ export const extractModules = (webpackStats?: WebpackStatsFiltered): MetricsModu
     moduleCount += instances;
     totalCodeSize += instances * size;
 
-    const reasons = moduleEntry.reasons?.map((reason) => getModuleName(reason.module));
     if (duplicated) {
       duplicateModulesCount += duplicateInstances;
       duplicateCodeSize += duplicateInstances * size;
     }
 
+    const reasons = moduleEntry.reasons?.map((reason) => getModuleName(reason.module));
+
     modules[normalizedName] = {
       name,
       value: size,