Merge pull request #1646 from relative-ci/ui-fixes

UI fixes
relative-ci · Oct 9, 2021 · 4cc51eb · 4cc51eb
2 parents b19f533 + d32c690
commit 4cc51eb
Show file tree

Hide file tree

Showing 15 changed files with 346 additions and 80 deletions.
diff --git a/fixtures/job.current.json b/fixtures/job.current.json
@@ -3524,6 +3524,20 @@
             5
           ]
         },
+        {
+          "name": "./node_modules/@bundle-stats/ui/node_modules/lodash.throttle/index.js",
+          "size": 8211,
+          "chunks": [
+            5
+          ]
+        },
+        {
+          "name": "../linked-dependency/node_modules/lodash.throttle/index.js",
+          "size": 8211,
+          "chunks": [
+            5
+          ]
+        },
         {
           "name": "./src/components/admin-logs/index.js + 2 modules",
           "size": 4816,

diff --git a/packages/html-templates/src/app/__snapshots__/app.stories.storyshot b/packages/html-templates/src/app/__snapshots__/app.stories.storyshot
diff --git a/packages/ui/src/app/app.jsx b/packages/ui/src/app/app.jsx
@@ -181,7 +181,10 @@ const AppComponent = ({ version, jobs }) => {
               <Stack space="large">
                 {duplicatePackagesInsights && (
                   <Container>
-                    <DuplicatePackagesWarning duplicatePackagesCount={duplicatePackagesCount} />
+                    <DuplicatePackagesWarning
+                      duplicatePackagesCount={duplicatePackagesCount}
+                      showDelta={jobs.length > 1}
+                    />
                   </Container>
                 )}
                 <Container>

diff --git a/packages/ui/src/app/app.stories.jsx b/packages/ui/src/app/app.stories.jsx
@@ -25,6 +25,7 @@ const BASELINE_SOURCE = {
 };
 
 const JOBS = createJobs([CURRENT_SOURCE, BASELINE_SOURCE]);
+const NO_BASELINE_JOBS = createJobs([CURRENT_SOURCE]);
 
 const MULTIPLE_JOBS = createJobs([
   CURRENT_SOURCE,
@@ -72,7 +73,7 @@ stories.add('no insights', () => (
 ));
 
 stories.add('no baseline', () => (
-  <App jobs={[CURRENT_JOB]} version="1.0" />
+  <App jobs={NO_BASELINE_JOBS} version="1.0" />
 ));
 
 stories.add('empty baseline', () => (

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.jsx b/packages/ui/src/components/bundle-packages/bundle-packages.jsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import {
   PACKAGE_FILTERS,
   PACKAGES_SEPARATOR,
+  PACKAGE_ID_SEPARATOR,
   getBundleModulesBySearch,
   getBundlePackagesByNameComponentLink,
 } from '@bundle-stats/utils';
@@ -27,25 +28,37 @@ import css from './bundle-packages.module.css';
 
 const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponentLink }) => {
   const normalizedPackagePath = path || `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}/`;
+  const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
 
   return (
     <Stack space="xxsmall" className={css.packagePopover}>
       <Stack space="xxxsmall">
-        <h3 className={css.packagePopoverTitle}>{name}</h3>
+        <h3 className={css.packagePopoverTitle}>
+          {normalizedName}
+          {packageId && (
+            <span className={css.packagePopoverTitleIndex}>
+              {`${PACKAGE_ID_SEPARATOR}${packageId}`}
+            </span>
+          )}
+        </h3>
         <p className={css.packagePopoverPath}>
           <FileName className={css.packagePopoverPathValue} name={normalizedPackagePath} />
         </p>
       </Stack>
 
       <ul className={css.packagePopoverList}>
         <li className={css.packagePopoverItem}>
-          <a href={`https://www.npmjs.com/package/${name}`} target="_blank" rel="noreferrer">
+          <a
+            href={`https://www.npmjs.com/package/${normalizedName}`}
+            target="_blank"
+            rel="noreferrer"
+          >
             npmjs.com
           </a>
         </li>
         <li className={css.packagePopoverItem}>
           <a
-            href={`https://bundlephobia.com/result?p=${name}`}
+            href={`https://bundlephobia.com/result?p=${normalizedName}`}
             target="_blank"
             rel="noreferrer"
           >
@@ -57,14 +70,14 @@ const PackagePopoverContent = ({ name, fullName, path, duplicate, CustomComponen
       <Stack space="xxxsmall" className={css.packagePopover.actions}>
         {duplicate && (
           <div>
-            <CustomComponentLink {...getBundlePackagesByNameComponentLink(name)}>
+            <CustomComponentLink {...getBundlePackagesByNameComponentLink(normalizedName)}>
               View all duplicate instances
             </CustomComponentLink>
           </div>
         )}
 
         <CustomComponentLink {...getBundleModulesBySearch(normalizedPackagePath)}>
-          View package modules
+          Search modules by package path
         </CustomComponentLink>
       </Stack>
     </Stack>

diff --git a/packages/ui/src/components/bundle-packages/bundle-packages.module.css b/packages/ui/src/components/bundle-packages/bundle-packages.module.css
@@ -47,6 +47,11 @@
   min-width: 320px;
 }
 
+.packagePopoverTitleIndex {
+  color: var(--color-text-light);
+  font-weight: normal;
+}
+
 .packagePopoverPathValue {
   padding: var(--space-xxxsmall);
   background: var(--color-highlight-warning);

diff --git a/...nts/duplicate-packages-warning/__snapshots__/duplicate-packages-warning.stories.storyshot b/...nts/duplicate-packages-warning/__snapshots__/duplicate-packages-warning.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Components/DuplicatePackagesWarning multiple duplicate packages 1`] = `
+exports[`Storyshots Components/DuplicatePackagesWarning multiple jobs 1`] = `
 <Router
   history={
     Object {
@@ -51,6 +51,7 @@ exports[`Storyshots Components/DuplicatePackagesWarning multiple duplicate packa
           "current": 2,
         }
       }
+      showDelta={true}
     />
   </div>
 </Router>
@@ -107,12 +108,13 @@ exports[`Storyshots Components/DuplicatePackagesWarning no changes 1`] = `
           "current": 2,
         }
       }
+      showDelta={true}
     />
   </div>
 </Router>
 `;
 
-exports[`Storyshots Components/DuplicatePackagesWarning single duplicate packages 1`] = `
+exports[`Storyshots Components/DuplicatePackagesWarning single job 1`] = `
 <Router
   history={
     Object {
@@ -163,6 +165,7 @@ exports[`Storyshots Components/DuplicatePackagesWarning single duplicate package
           "current": 1,
         }
       }
+      showDelta={false}
     />
   </div>
 </Router>

diff --git a/packages/ui/src/components/duplicate-packages-warning/duplicate-packages-warning.jsx b/packages/ui/src/components/duplicate-packages-warning/duplicate-packages-warning.jsx
@@ -11,7 +11,12 @@ import css from './duplicate-packages-warning.module.css';
 const numberMetric = METRIC_TYPES[METRIC_TYPE_NUMERIC];
 
 export const DuplicatePackagesWarning = (props) => {
-  const { className, duplicatePackagesCount, customComponentLink: CustomComponentLink } = props;
+  const {
+    className,
+    duplicatePackagesCount,
+    customComponentLink: CustomComponentLink,
+    showDelta,
+  } = props;
 
   const metricRunInfo = getMetricRunInfo(
     numberMetric,
@@ -24,7 +29,7 @@ export const DuplicatePackagesWarning = (props) => {
       {`Bundle contains `}
       <CustomComponentLink {...BUNDLE_PACKAGES_DUPLICATE}>
         {metricRunInfo.value}
-        {metricRunInfo.delta !== 0 && (
+        {showDelta && metricRunInfo.delta !== 0 && (
           <Delta
             className={css.titleDelta}
             inverted
@@ -45,9 +50,11 @@ DuplicatePackagesWarning.propTypes = {
     current: PropTypes.number,
     baseline: PropTypes.number,
   }).isRequired,
+  showDelta: PropTypes.bool,
 };
 
 DuplicatePackagesWarning.defaultProps = {
   className: '',
   customComponentLink: ComponentLink,
+  showDelta: true,
 };
diff --git a/packages/ui/src/components/duplicate-packages-warning/duplicate-packages-warning.stories.jsx b/packages/ui/src/components/duplicate-packages-warning/duplicate-packages-warning.stories.jsx
@@ -7,16 +7,17 @@ import { DuplicatePackagesWarning } from '.';
 const stories = storiesOf('Components/DuplicatePackagesWarning', module);
 stories.addDecorator(getWrapperDecorator());
 
-stories.add('single duplicate packages', () => (
+stories.add('single job', () => (
   <DuplicatePackagesWarning
     duplicatePackagesCount={{
       current: 1,
       baseline: 0,
     }}
+    showDelta={false}
   />
 ));
 
-stories.add('multiple duplicate packages', () => (
+stories.add('multiple jobs', () => (
   <DuplicatePackagesWarning
     duplicatePackagesCount={{
       current: 2,

diff --git a/packages/ui/src/ui/popover/__snapshots__/popover.stories.storyshot b/packages/ui/src/ui/popover/__snapshots__/popover.stories.storyshot
@@ -80,7 +80,7 @@ exports[`Storyshots UI/Popover default 1`] = `
             Object {
               "current": <div
                 class="arrow"
-                style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
               >
                 <svg
                   style="transform: rotateZ(180deg);"
@@ -138,7 +138,7 @@ exports[`Storyshots UI/Popover default 1`] = `
               >
                 <div
                   class="arrow"
-                  style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                  style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                 >
                   <svg
                     style="transform: rotateZ(180deg);"
@@ -249,7 +249,7 @@ exports[`Storyshots UI/Popover default 1`] = `
             Object {
               "current": <div
                 class="arrow"
-                style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
               >
                 <svg
                   style="transform: rotateZ(180deg);"
@@ -307,7 +307,7 @@ exports[`Storyshots UI/Popover default 1`] = `
               >
                 <div
                   class="arrow"
-                  style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                  style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                 >
                   <svg
                     style="transform: rotateZ(180deg);"
@@ -393,7 +393,7 @@ exports[`Storyshots UI/Popover default 1`] = `
                   >
                     <div
                       class="arrow"
-                      style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                      style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                     >
                       <svg
                         style="transform: rotateZ(180deg);"
@@ -468,13 +468,14 @@ exports[`Storyshots UI/Popover default 1`] = `
                   setModal={[Function]}
                   setVisible={[Function]}
                   show={[Function]}
+                  size={24}
                   stopAnimation={[Function]}
                   toggle={[Function]}
                   unstable_arrowRef={
                     Object {
                       "current": <div
                         class="arrow"
-                        style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                        style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                       >
                         <svg
                           style="transform: rotateZ(180deg);"
@@ -532,7 +533,7 @@ exports[`Storyshots UI/Popover default 1`] = `
                       >
                         <div
                           class="arrow"
-                          style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                          style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                         >
                           <svg
                             style="transform: rotateZ(180deg);"
@@ -604,7 +605,7 @@ exports[`Storyshots UI/Popover default 1`] = `
                     className="arrow"
                     style={
                       Object {
-                        "fontSize": 30,
+                        "fontSize": 24,
                         "height": "1em",
                         "pointerEvents": "none",
                         "top": "100%",
@@ -758,7 +759,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
             Object {
               "current": <div
                 class="arrow"
-                style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
               >
                 <svg
                   style="transform: rotateZ(180deg);"
@@ -828,7 +829,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
               >
                 <div
                   class="arrow"
-                  style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                  style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                 >
                   <svg
                     style="transform: rotateZ(180deg);"
@@ -976,7 +977,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
             Object {
               "current": <div
                 class="arrow"
-                style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
               >
                 <svg
                   style="transform: rotateZ(180deg);"
@@ -1046,7 +1047,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
               >
                 <div
                   class="arrow"
-                  style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                  style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                 >
                   <svg
                     style="transform: rotateZ(180deg);"
@@ -1144,7 +1145,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
                   >
                     <div
                       class="arrow"
-                      style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                      style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                     >
                       <svg
                         style="transform: rotateZ(180deg);"
@@ -1219,13 +1220,14 @@ exports[`Storyshots UI/Popover with icon 1`] = `
                   setModal={[Function]}
                   setVisible={[Function]}
                   show={[Function]}
+                  size={24}
                   stopAnimation={[Function]}
                   toggle={[Function]}
                   unstable_arrowRef={
                     Object {
                       "current": <div
                         class="arrow"
-                        style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                        style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                       >
                         <svg
                           style="transform: rotateZ(180deg);"
@@ -1295,7 +1297,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
                       >
                         <div
                           class="arrow"
-                          style="font-size: 30px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
+                          style="font-size: 24px; width: 1em; height: 1em; pointer-events: none; top: 100%;"
                         >
                           <svg
                             style="transform: rotateZ(180deg);"
@@ -1379,7 +1381,7 @@ exports[`Storyshots UI/Popover with icon 1`] = `
                     className="arrow"
                     style={
                       Object {
-                        "fontSize": 30,
+                        "fontSize": 24,
                         "height": "1em",
                         "pointerEvents": "none",
                         "top": "100%",

diff --git a/packages/ui/src/ui/popover/popover.jsx b/packages/ui/src/ui/popover/popover.jsx
@@ -47,7 +47,7 @@ export const Popover = ({ className, icon, label, ariaLabel, children }) => {
         {label && <span className={css.label}>{label}</span>}
       </UIPopoverDisclosure>
       <UIPopover className={css.popover} {...popover} tabIndex={0}>
-        <UIPopoverArrow className={css.arrow} {...popover} />
+        <UIPopoverArrow className={css.arrow} {...popover} size={24} />
 
         {typeof children === 'function' ? children({ popoverToggle: popover.toggle }) : children}